From 1ebfd472f53ed9fd73f1180adeec9d4464371ff4 Mon Sep 17 00:00:00 2001 From: blend <151626101+blendtwenty@users.noreply.github.com> Date: Thu, 22 Feb 2024 11:08:15 +1100 Subject: [PATCH 1/6] update build script to handle *.initial.css files --- build.sh | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/build.sh b/build.sh index 9dfaecc..050c7da 100755 --- a/build.sh +++ b/build.sh @@ -5,9 +5,11 @@ rm -rf dist mkdir -p dist # Find all JavaScript files within src/components directory -JS_FILES=$(find src/components -type f -name "*.js") +JS_FILES=$(find src/components -type f -name "doge-*.js") +CSS_FILES=$(find src/components -type f -name "*initial.css") -# For each file, compile via rollup, outputting as individual JS modules. +# For each JS file, copy it to the root for convenient +# consumption from fetch.dogecoin.org/.js for file in $JS_FILES do filename=$(basename "$file") @@ -15,6 +17,16 @@ do cp "$file" "dist/$filename" done +# For each css file, concatinate and create a single file +# for component consumers to include within the +# of their webpage, to reduce flash of unstyled content. +for file in $CSS_FILES +do + echo "File: $file" + cat "$file" >> "dist/initial.css" + echo >> "dist/initial.css" #Adds line +done + # Write CNAME file echo "fetch.dogecoin.org" > dist/CNAME echo "fetch.dogecoin.org" > CNAME From 2809e9ac09ff99e3b9c00cbcbbc3b51c9ac0bc47 Mon Sep 17 00:00:00 2001 From: blend <151626101+blendtwenty@users.noreply.github.com> Date: Thu, 22 Feb 2024 11:08:57 +1100 Subject: [PATCH 2/6] components get directories --- src/components/{navigation => doge-nav}/doge-nav.js | 0 src/components/doge-nav/initial.css | 6 ++++++ .../{navigation/doge-nav.test.html => doge-nav/test.html} | 0 src/components/{ => doge-pal}/doge-pal.js | 0 src/components/{ => doge-price}/doge-price.js | 0 src/components/{ => doge-qr}/doge-qr.js | 0 src/components/{ => doge-qr}/doge-qr.test.html | 0 src/components/doge-qr/initial.css | 6 ++++++ 8 files changed, 12 insertions(+) rename src/components/{navigation => doge-nav}/doge-nav.js (100%) create mode 100644 src/components/doge-nav/initial.css rename src/components/{navigation/doge-nav.test.html => doge-nav/test.html} (100%) rename src/components/{ => doge-pal}/doge-pal.js (100%) rename src/components/{ => doge-price}/doge-price.js (100%) rename src/components/{ => doge-qr}/doge-qr.js (100%) rename src/components/{ => doge-qr}/doge-qr.test.html (100%) create mode 100644 src/components/doge-qr/initial.css diff --git a/src/components/navigation/doge-nav.js b/src/components/doge-nav/doge-nav.js similarity index 100% rename from src/components/navigation/doge-nav.js rename to src/components/doge-nav/doge-nav.js diff --git a/src/components/doge-nav/initial.css b/src/components/doge-nav/initial.css new file mode 100644 index 0000000..bca989c --- /dev/null +++ b/src/components/doge-nav/initial.css @@ -0,0 +1,6 @@ +doge-nav:not(:defined) { + display: block; + height: 62px; + overflow: hidden; + opacity: 0; +} \ No newline at end of file diff --git a/src/components/navigation/doge-nav.test.html b/src/components/doge-nav/test.html similarity index 100% rename from src/components/navigation/doge-nav.test.html rename to src/components/doge-nav/test.html diff --git a/src/components/doge-pal.js b/src/components/doge-pal/doge-pal.js similarity index 100% rename from src/components/doge-pal.js rename to src/components/doge-pal/doge-pal.js diff --git a/src/components/doge-price.js b/src/components/doge-price/doge-price.js similarity index 100% rename from src/components/doge-price.js rename to src/components/doge-price/doge-price.js diff --git a/src/components/doge-qr.js b/src/components/doge-qr/doge-qr.js similarity index 100% rename from src/components/doge-qr.js rename to src/components/doge-qr/doge-qr.js diff --git a/src/components/doge-qr.test.html b/src/components/doge-qr/doge-qr.test.html similarity index 100% rename from src/components/doge-qr.test.html rename to src/components/doge-qr/doge-qr.test.html diff --git a/src/components/doge-qr/initial.css b/src/components/doge-qr/initial.css new file mode 100644 index 0000000..7d06c62 --- /dev/null +++ b/src/components/doge-qr/initial.css @@ -0,0 +1,6 @@ +doge-qr:not(:defined) { + display: inline-block; + width: 220px; + height: 220px; + opacity: 0; +} \ No newline at end of file From 3e4f7fef6400ff9393913967720283dc19e94be0 Mon Sep 17 00:00:00 2001 From: blend <151626101+blendtwenty@users.noreply.github.com> Date: Thu, 22 Feb 2024 11:22:35 +1100 Subject: [PATCH 3/6] Update README with initial.css instruction --- README.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 82969b1..0a0eec7 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ add them to your webpage and voilà! ### 1. Cherry Pick (Under development) -Quick and easy. +**Quick and easy** Within your HTML file, add a doge component and start using it. ``` @@ -18,9 +18,15 @@ Within your HTML file, add a doge component and start using it. ``` +**Optionally**, add the initial.css stylesheet to the head of your page to prevent/reduce FOUC (flash of unstyled content). + +``` + Date: Thu, 22 Feb 2024 11:55:29 +1100 Subject: [PATCH 4/6] adjust test file pattern matching --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0bb49bb..99f024d 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "license": "ISC", "scripts": { "dev": "web-dev-server --open example/ --node-resolve --watch", - "test": "web-test-runner \"src/**/*.test.html\" --node-resolve --playwright --browsers firefox", + "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" }, From 0c4388985ab98ccc868f6d45e5614655ed5672d2 Mon Sep 17 00:00:00 2001 From: blend <151626101+blendtwenty@users.noreply.github.com> Date: Thu, 22 Feb 2024 11:55:46 +1100 Subject: [PATCH 5/6] rename doge-qr testfile --- src/components/doge-qr/{doge-qr.test.html => test.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/doge-qr/{doge-qr.test.html => test.html} (100%) diff --git a/src/components/doge-qr/doge-qr.test.html b/src/components/doge-qr/test.html similarity index 100% rename from src/components/doge-qr/doge-qr.test.html rename to src/components/doge-qr/test.html From 8ccdb4eaf1909cfb029b0e65c23c41010985cbc1 Mon Sep 17 00:00:00 2001 From: blend <151626101+blendtwenty@users.noreply.github.com> Date: Thu, 22 Feb 2024 12:05:26 +1100 Subject: [PATCH 6/6] correct filepath for cherry script --- package.json | 4 ++-- src/components/doge-pal/doge-pal.js | 2 +- src/components/doge-price/doge-price.js | 2 +- src/components/doge-qr/doge-qr.js | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 99f024d..8da7ce7 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "license": "ISC", "scripts": { "dev": "web-dev-server --open example/ --node-resolve --watch", - "test": "web-test-runner \"src/**/*test.html\" --node-resolve --playwright --browsers firefox", - "test:watch": "web-test-runner src/**/*.test.html --node-resolve --watch", + "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" }, "devDependencies": { diff --git a/src/components/doge-pal/doge-pal.js b/src/components/doge-pal/doge-pal.js index 999cff7..ad05eef 100644 --- a/src/components/doge-pal/doge-pal.js +++ b/src/components/doge-pal/doge-pal.js @@ -2,7 +2,7 @@ import { dogeComponentInit, resourceBasePath, LitElement, css, html, classMap -} from "../lib/cherry.js" +} from "../../lib/cherry.js" export class DogePal extends LitElement { static styles = css``; diff --git a/src/components/doge-price/doge-price.js b/src/components/doge-price/doge-price.js index 261994b..4d1b1d0 100644 --- a/src/components/doge-price/doge-price.js +++ b/src/components/doge-price/doge-price.js @@ -2,7 +2,7 @@ import { dogeComponentInit, resourceBasePath, LitElement, css, html, classMap -} from "../lib/cherry.js" +} from "../../lib/cherry.js" export class DogePrice extends LitElement { static styles = css``; diff --git a/src/components/doge-qr/doge-qr.js b/src/components/doge-qr/doge-qr.js index c0f8cdb..a5a0e56 100644 --- a/src/components/doge-qr/doge-qr.js +++ b/src/components/doge-qr/doge-qr.js @@ -2,8 +2,8 @@ import { dogeComponentInit, resourceBasePath, LitElement, css, html, classMap -} from "../lib/cherry.js" -import "../../resources/blocks/qr-code-styling@1.5.0/qr-code-styling.js"; +} from "../../lib/cherry.js" +import "../../../resources/blocks/qr-code-styling@1.5.0/qr-code-styling.js"; export class DogeQR extends LitElement { static properties = {