Merge pull request #12 from dogeorg/doge-qr-tidy

Tidy Doge-QR and README

README.md

@@ -1,65 +1,21 @@
 # doge-web-components
 
-Reusable web components for Dogecoin
-
-## Two ways to consume components.
+**Reusable web components for Dogecoin**
 
 Want to promote Dogecoin on your blogsite, request a tip, add a fitting Doge meme, sell a product even? 
-Doge Components are here to make this easy for you.  Browse the [Doge Component Library](todo), find some you like,
+Doge Components are here to make this easy for you.  Browse the [Doge Component Library](https://fetch.dogecoin.org), find some you like,
 add them to your webpage and voilà!
 
-### 1. Cherry Pick (Under development)
-
 **Quick and easy**
 Within your HTML file, add a doge component and start using it.
 
 ```
-<script type="module" src="https://fetch.dogecoin.org/qr"></script>
-<doge-qr address="D89DhnsgKncmN12RejxudfU8AwXp3946q1" caption="Treat me a coffee?"></doge-qr>
+<script type="module" src="https://fetch.dogecoin.org/doge-qr"></script>
+<doge-qr address="D89DhnsgKncmN12RejxudfU8AwXp3946q1" theme="such-doge"></doge-qr>
 ```
 
-**Optionally**, add the initial.css stylesheet to the head of your page to prevent/reduce FOUC (flash of unstyled content).
+**Optionally**, add the initial.css stylesheet to the head of your page to reduce FOUC (flash of unstyled content).
 
 ```
 <link rel="stylesheet" href="https://fetch.dogecoin.org/initial.css"
 ```
-
----
-
-### 2. Fetch Lib (Concept)
-
-Within your HTML file, add configure.js, configure and utilise.
-
-```
-<script type="text/javascript" src="https://fetch.dogecoin.org/lib/configure.js"></script>
-```
-
-```
-<script type="text/javascript">
-	dogeFetch.init({
-		components: ['qr', 'price', 'pal'],
-		resourcePath: '<your-site>/resources',
-		componentPath: '<your-site>/components'
-	});
-</script>
-```
-
-```
-<doge-qr
-	address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
-	caption="Buy me a coffee"
->
-</doge-qr>
-
-<doge-price
-	source="rss://coinmarketcap.com/currencies/dogecoin"
-	curr="USD"
-	refresh="5"
->
-</doge-price>
-
-<doge-pal
-	max-width="600"
->
-</doge-pal>
-```

package.json

@@ -6,8 +6,7 @@
   "author": "",
   "license": "ISC",
   "scripts": {
-    "dev": "web-dev-server --open /src/index.html --port 8080 --node-resolve --watch",
-    "serve": "web-dev-server --root-dir dist --port 9090 --node-resolve --watch --open /",
+    "dev": "web-dev-server --root-dir dist --port 8080 --node-resolve --open /",
     "test": "web-test-runner \"src/**/test.html\" --node-resolve --playwright --browsers firefox",
     "test:watch": "web-test-runner src/**/test.html --node-resolve --watch",
     "prepare": "husky"

src/components/doge-nav/doge-nav.js

@@ -2,7 +2,7 @@ import {
   dogeComponentInit,
   resourceBasePath,
   LitElement, css, html, classMap
-} from "../../lib/cherry.js"
+} from "../../lib/doge-init.js"
 
 export class DogeNav extends LitElement {
   static styles = css`

src/components/doge-pal/doge-pal.js

@@ -2,7 +2,7 @@ import {
   dogeComponentInit,
   resourceBasePath,
   LitElement, css, html, classMap
-} from "../../lib/cherry.js"
+} from "../../lib/doge-init.js"
 
 export class DogePal extends LitElement {
 	static styles = css``;

src/components/doge-price/doge-price.js

@@ -2,7 +2,7 @@ import {
   dogeComponentInit,
   resourceBasePath,
   LitElement, css, html, classMap
-} from "../../lib/cherry.js"
+} from "../../lib/doge-init.js"
 
 export class DogePrice extends LitElement {
   static styles = css``;

src/components/doge-qr/demo/index.html

@@ -7,10 +7,9 @@
     }
     </script>
 
-    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>DogeWebComponents | doge-qr</title>
+    <link rel="icon" href="../../../../resources/img/favicon.ico" type="image/x-icon">
+    <title>Doge Web Components | doge-qr</title>
 
     <link rel="stylesheet" href="../../../index.css" />
     <link rel="stylesheet" href="demo.css" />
@@ -57,7 +56,7 @@ <h1><span class="sans">&lt;doge-qr&gt; </span><span class="soft comic">web compo
         <h2>Purpose</h2>
         <hr />
         <p>
-          Use this web-component to easily create a Doge wallet QR code to share with friends.
+          Easily display a Dogecoin wallet address as a QR code. This is a convenient way to request a payment or tip.
         </p>
 
         <div class="container">
@@ -153,7 +152,7 @@ <h2>Usage</h2>
         </div>
 
         <p>
-          3. Test your QR code is working before sharing it with others. It should lead you to a URL formatted like so: <a class="yellow mono small" href="dogecoin:D89DhnsgKncmN12RejxudfU8AwXp3946q1?amount=100">dogecoin:D89DhnsgKncmN12RejxudfU8AwXp3946q1?amount=100</a>
+          3. Test your QR code is working before sharing it with others. It should lead you to a URI with the following structure: <a class="yellow mono small" href="dogecoin:D89DhnsgKncmN12RejxudfU8AwXp3946q1?amount=100">dogecoin:D89DhnsgKncmN12RejxudfU8AwXp3946q1?amount=100</a>
         </p>
       </section>
 

src/components/doge-qr/doge-qr.js

@@ -1,8 +1,7 @@
 import { 
-  dogeComponentInit,
   resourceBasePath,
-  LitElement, css, html, classMap
-} from "../../lib/cherry.js"
+  LitElement, css, html
+} from "../../lib/doge-init.js"
 import "../../../resources/blocks/[email protected]/qr-code-styling.js";
 
 export class DogeQR extends LitElement {
@@ -17,10 +16,10 @@ export class DogeQR extends LitElement {
 		qrCanvas: {},
 	};
   static sizes = {
-    sm: 120,
+    sm: 80,
     md: 220,
-    lg: 320,
-    xl: 420,
+    lg: 340,
+    xl: 480,
   }
   static themes = {
     'such-doge': {
@@ -141,7 +140,6 @@ export class DogeQR extends LitElement {
 
 	connectedCallback() {
 		super.connectedCallback();
-		dogeComponentInit();
 	}
 
 	render() {

src/components/doge-qr/test.html

@@ -34,14 +34,6 @@
             expect(nodes.length).to.equal(1);
           })
 
-          it('does not display a caption by default', async () => {
-            const el = await fixture(html`
-              <doge-qr address="foo"></doge-qr>
-            `);
-            const nodes = el.shadowRoot.querySelectorAll(".caption")
-            expect(nodes.length).to.equal(0);
-          })
-
         });
       });
     </script>

src/index.css

@@ -90,3 +90,9 @@ footer {
   padding: 10px 20px;
   text-align: center;
 }
+
+.bone svg {
+  height: 30px;
+  transform: rotateZ(-15deg) translateY(5px);
+  margin-right: 10px;
+}

src/index.html

@@ -1,26 +1,51 @@
+<!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
+    <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</title>
+
     <title id="title">Doge Components</title>
     <link rel="stylesheet" href="index.css" />
     <link rel="stylesheet" href="resources/css/doge-components.css" />
   </head>
   <body>
 
-        <div class="page">
+    <div class="page">
       <header>
-        <h1><span class="sans">&lt;doge&gt; </span><span class="soft comic">components</span></h1>
+        <h1>
+          <span class="bone">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+              <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+              <path d="M153.7 144.8c6.9 16.3 20.6 31.2 38.3 31.2H384c17.7 0 31.4-14.9 38.3-31.2C434.4 116.1 462.9 96 496 96c44.2 0 80 35.8 80 80c0 30.4-17 56.9-42 70.4c-3.6 1.9-6 5.5-6 9.6s2.4 7.7 6 9.6c25 13.5 42 40 42 70.4c0 44.2-35.8 80-80 80c-33.1 0-61.6-20.1-73.7-48.8C415.4 350.9 401.7 336 384 336H192c-17.7 0-31.4 14.9-38.3 31.2C141.6 395.9 113.1 416 80 416c-44.2 0-80-35.8-80-80c0-30.4 17-56.9 42-70.4c3.6-1.9 6-5.5 6-9.6s-2.4-7.7-6-9.6C17 232.9 0 206.4 0 176c0-44.2 35.8-80 80-80c33.1 0 61.6 20.1 73.7 48.8z"/>
+            </svg>
+          </span>
+          <span class="sans">&lt;fetch&gt; </span>
+          <span class="soft comic">components</span>
+        </h1>
       </header>
 
       <section>
         <h2>Purpose</h2>
         <hr />
-        <p>Reusable web components for Doge things.</p>
+        <p>Reusable web components for Dogecoin things.</p>
       </section>
+
       <section>
         <h2>Components</h2>
         <hr />
         <ul></ul>
       </section>
+
+      <section>
+        <h2>Contribute</h2>
+        <hr />
+        <p>
+          Discuss, share ideas, and ask questions at <a href="https://forum.dogecoin.org/t/fetch"  target="_blank">forum.dogecoin.org/t/fetch</a>. Additionally, developers can contribute components to the project via <a href="https://github.com/dogeorg/doge-web-components" target="_blank">GitHub</a>.
+        </p>
+        <p>Be a <a href="https://github.com/dogecoinfoundation/policy/blob/main/policy_02_conduct.md#good-shibes" target="_blank">Good Shibe</a> when contributing  :)</p>
+      </section>
     <script>
       fetch('manifest.json')
         .then(response => response.json())