Merge pull request #10 from dogeorg/fouc-handle

Handling FOUC (flash of unstyled content)
dogeorg · Feb 22, 2024 · 629808b · 629808b
2 parents be766dc + 8ccdb4e
commit 629808b
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -10,17 +10,23 @@ 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.
 
 ```
 <script type="module" src="https://fetch.dogecoin.org/qr"></script>
 <doge-qr address="D89DhnsgKncmN12RejxudfU8AwXp3946q1" caption="Treat me a coffee?"></doge-qr>
 ```
 
+**Optionally**, add the initial.css stylesheet to the head of your page to prevent/reduce FOUC (flash of unstyled content).
+
+```
+<link rel="stylesheet" href="https://fetch.dogecoin.org/initial.css"
+```
+
 ---
 
-### 2. Fetch Lib (Coming Soon)
+### 2. Fetch Lib (Concept)
 
 Within your HTML file, add configure.js, configure and utilise.
 

diff --git a/build.sh b/build.sh
@@ -5,16 +5,28 @@ 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/<component>.js
 for file in $JS_FILES
 do
    filename=$(basename "$file")
    echo "File: $filename"
    cp "$file" "dist/$filename"
 done
 
+# For each css file, concatinate and create a single file
+# for component consumers to include within the <head>
+# 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

diff --git 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/navigation/doge-nav.js → src/components/doge-nav/doge-nav.js b/src/components/navigation/doge-nav.js → src/components/doge-nav/doge-nav.js
diff --git a/src/components/doge-nav/initial.css b/src/components/doge-nav/initial.css
@@ -0,0 +1,6 @@
+doge-nav:not(:defined) {
+    display: block;
+    height: 62px;
+    overflow: hidden;
+    opacity: 0;
+}
diff --git a/src/components/navigation/doge-nav.test.html → src/components/doge-nav/test.html b/src/components/navigation/doge-nav.test.html → src/components/doge-nav/test.html
diff --git a/src/components/doge-pal.js → src/components/doge-pal/doge-pal.js b/src/components/doge-pal.js → 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.js → src/components/doge-price/doge-price.js b/src/components/doge-price.js → 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.js → src/components/doge-qr/doge-qr.js b/src/components/doge-qr.js → 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/[email protected]/qr-code-styling.js";
+} from "../../lib/cherry.js"
+import "../../../resources/blocks/[email protected]/qr-code-styling.js";
 
 export class DogeQR extends LitElement {
 	static properties = {

diff --git a/src/components/doge-qr/initial.css b/src/components/doge-qr/initial.css
@@ -0,0 +1,6 @@
+doge-qr:not(:defined) {
+    display: inline-block;
+    width: 220px;
+    height: 220px;
+    opacity: 0;
+}
diff --git a/src/components/doge-qr.test.html → src/components/doge-qr/test.html b/src/components/doge-qr.test.html → src/components/doge-qr/test.html