deploy: 6e9b523

dogeorg · Jan 7, 2025 · 54d27d6 · 54d27d6
1 parent 1475cda
commit 54d27d6
Show file tree

Hide file tree

Showing 17 changed files with 762 additions and 29 deletions.
diff --git a/doge-donate.js b/doge-donate.js
@@ -0,0 +1 @@
+export * from "./doge-donate/doge-donate.js"
diff --git a/doge-donate/demo/dance.gif b/doge-donate/demo/dance.gif
diff --git a/doge-donate/demo/demo.css b/doge-donate/demo/demo.css
@@ -0,0 +1,68 @@
+span.note {
+  display: block;
+  font-size: 1rem;
+  margin: 0.5em 0;
+}
+
+.container {
+  margin: 0px auto;
+  max-width: 800px;
+  background-color: #fff;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 40px;
+  padding: 20px;
+}
+
+.box {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: sans-serif;
+  border-radius: 8px;
+  background-color: #fff;
+}
+
+.box span {
+  padding: 10px;
+  margin-top: 15px;
+  font-weight: 500;
+  color: #666;
+}
+
+/* Theme showcase section */
+.theme-examples {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 40px;
+  margin: 20px 0;
+}
+
+.theme-example {
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+}
+
+/* Code container styles */
+#CodeContainer .code-toolbar {
+  display: none;
+}
+
+#CodeContainer .code-toolbar:first-child {
+  display: block;
+}
+
+/* Responsive adjustments */
+@media (max-width: 800px) {
+  .container {
+    padding: 10px;
+    grid-template-columns: 1fr;
+  }
+
+  .box {
+    margin: 10px 0;
+  }
+}
diff --git a/doge-donate/demo/index.html b/doge-donate/demo/index.html
@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../../../../resources/img/favicon.ico" type="image/x-icon">
+    <title>Doge Web Components | doge-donate</title>
+
+    <link rel="stylesheet" href="../../../index.css" />
+    <link rel="stylesheet" href="demo.css" />
+    <link rel="stylesheet" href="../../../../resources/blocks/prism/prism.css" />
+    <script type="text/javascript" src="../../../../resources/blocks/prism/prism.js"></script>
+
+    <link rel="stylesheet" href="../../../../resources/css/doge-components.css" />
+    <link rel="stylesheet" href="../initial.css" />
+    <script type="module" src="../doge-donate.js"></script>
+  </head>
+  <body>
+    <div class="page">
+      <header>
+        <a href="/">← Back</a>
+        <h1><span class="sans">&lt;doge-donate&gt; </span><span class="soft comic">web component</span></h1>
+      </header>
+
+      <section>
+        <h2>Purpose</h2>
+        <hr />
+        <p>
+          A donation widget that combines preset amounts with a QR code for easy Dogecoin donations.
+        </p>
+
+        <div class="container">
+          <div class="box">
+            <doge-donate
+              address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+              presets="69, 100, 300, 1200"
+              selectedAmount="300"
+              theme="such-doge"
+              listLabel="(1) Select Amount"
+              qrLabel="(2) Scan to pay"
+              >
+            </doge-donate>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Usage</h2>
+        <hr />
+        <p>
+          1. Add the script to your webpage.
+        </p>
+
+        <pre><code class="language-markup">
+          &lt;script
+            type="module"
+            src="https://fetch.dogecoin.org/doge-donate.js"&gt;
+          &lt;/script&gt;
+          </code></pre>
+
+        <p>
+          2. Place the doge-donate element on your page.
+        </p>
+        <div id="CodeContainer">
+          <script type="text/plain" class="language-html">
+          <doge-donate
+            address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+            presets="69, 500, 1337, 9001"
+            selectedAmount="500">
+          </doge-donate>
+          </script>
+        </div>
+
+        <p>
+          3. Test the donation options and QR codes to ensure they generate correct Dogecoin URIs.
+        </p>
+      </section>
+
+      <section>
+        <h2>Properties</h2>
+        <hr />
+        <table class="props-list">
+          <tr>
+            <th>Name</th>
+            <th>Description</th>
+          </tr>
+          <tr>
+            <td><code class="nowrap">address</code></td>
+            <td>Your Dogecoin receiving address</td>
+          </tr>
+          <tr>
+            <td><code class="nowrap">presets</code></td>
+            <td>The donation options presented as buttons</td>
+          </tr>
+          <tr>
+            <td><code class="nowrap">selectedAmount</code></td>
+            <td>The initially selected value</td>
+          </tr>
+          <tr>
+            <td><code class="nowrap">listLabel</code></td>
+            <td>Text label placed above the presets</td>
+          </tr>
+          <tr>
+            <td><code class="nowrap">qrLabel</code></td>
+            <td>Text label placed above the QR code</td>
+          </tr>
+        </table>
+      </section>
+
+      <section>
+        <h2>Styling</h2>
+        <hr />
+        <table class="props-list">
+          <tr>
+            <th>Name</th>
+            <th>Description</th>
+          </tr>
+          <tr>
+            <td><code class="nowrap">size</code></td>
+            <td>Select a size <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code></td>
+          </tr>
+          <tr>
+            <td><code class="nowrap">theme</code></td>
+            <td>Select a predefined theme:
+              <br><code>such-doge</code>,
+              <br><code>so-coin</code>,<br>
+              <code>much-dev</code>,<br>
+              <code>very-community</code><br>
+              <span class="note">When used, the theme determines the background and fill color(s).</span>
+            </td>
+          </tr>
+          <tr>
+            <td><code class="nowrap">tint</code></td>
+            <td>Overrides the color of the preset options eg: <code>#CCC</code>, <code>red</code></td>
+          </tr>
+          <tr>
+            <td><code class="nowrap">background</code></td>
+            <td>The QR background color. This can be any valid CSS color</td>
+          </tr>
+          <tr>
+            <td><code class="nowrap">fill</code></td>
+            <td>
+              The QR dots color. This can be any valid CSS color.<br/>
+              Provide two colors for a simple gradient<br/>
+              <code>yellow</code><br/>
+              <code>#ffc107</code><br/>
+              <code>"#ffc107, blue"</code>
+            </td>
+          </tr>
+          <tr>
+            <td><code class="nowrap">img</code></td>
+            <td>Set a custom image by providing a URL. This can be a <code>png</code>, <code>jpg</code> or <code>gif</code>.</td>
+          </tr>
+
+        </table>
+      </section>
+
+      <section>
+        <h2>Slots</h2>
+        <hr />
+        <table class="props-list">
+          <tr>
+            <th>Name</th>
+            <th>Description</th>
+          </tr>
+          <tr>
+            <td><code class="nowrap">label-list</code></td>
+            <td>Provided content will be rendered above the list of presets</td>
+          </tr>
+          <tr>
+            <td><code class="nowrap">label-qr</code></td>
+            <td>Provided content will be rendered above the QR code</td>
+          </tr>
+        </table>
+      </section>
+
+      <section>
+        <h2>Examples</h2>
+        <hr />
+
+        <h3>Classic Theme</h3>
+        <script type="text/plain" class="language-html">
+        <doge-donate
+          address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+          theme="so-coin">
+        </doge-donate>
+        </script>
+
+        <doge-donate
+          address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+          theme="so-coin">
+        </doge-donate>
+
+        <h3>Developer Theme</h3>
+        <script type="text/plain" class="language-html">
+        <doge-donate
+          address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+          theme="much-dev">
+        </doge-donate>
+        </script>
+
+        <doge-donate
+          address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+          theme="much-dev">
+        </doge-donate>
+
+        <h3>Community Theme</h3>
+        <script type="text/plain" class="language-html">
+        <doge-donate
+          address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+          theme="very-community">
+        </doge-donate>
+        </script>
+
+        <doge-donate
+          address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+          theme="very-community">
+        </doge-donate>
+
+        <h3>Custom Styling</h3>
+        <script type="text/plain" class="language-html">
+        <doge-donate
+          address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+          presets="10, 69"
+          tint="#ddd"
+          fill="#bbb, #ccc"
+          img="dance.gif">
+          <img slot="label-list" src="./select.png" />
+          <img slot="label-qr" src="./scan.png" />
+        </doge-donate>
+        </script>
+
+        <doge-donate
+          address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+          presets="10, 69, 200, 3000, 4567"
+          tint="#ddd"
+          fill="#bbb, #ccc"
+          img="dance.gif">
+
+          <img slot="label-list" src="./select.png" />
+          <img slot="label-qr" src="./scan.png" />
+        </doge-donate>
+      </section>
+
+    </div>
+  </body>
+</html>
diff --git a/doge-donate/demo/scan.png b/doge-donate/demo/scan.png
diff --git a/doge-donate/demo/select.png b/doge-donate/demo/select.png