feat: html only example

License: (Apache-2.0 AND MIT) Signed-off-by: Oli Evans <[email protected]>
nftstorage · May 4, 2022 · f851afb · f851afb
1 parent 74d3c62
commit f851afb
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -61,4 +61,4 @@ typings/
 package-lock.json
 yarn.lock
 
-example/nftstorage-sw.js
+example/html/nftstorage-sw.js
diff --git a/example/html/index.html b/example/html/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./style.css">
+  <title>nftstorage service worker</title>
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('./nftstorage-sw.js');
+    }
+  </script>
+</head>
+<body class="sans-serif">
+  <h1 class="pa3 ma0 flex items-center">
+    <span class="f4 fw6 black">NFT STORAGE</span>
+    <span class="ml2 f5 fw7 code silver tracked">~~service worker~~</span>
+  </h1>
+  <figure class="pa4 ma3 ba dib">
+    <figcaption>
+      <code class="bg-light-gray dib br2 mb2 pa1">
+        &lt;img src="<a href="/ipfs/bafkreigh2akiscaildcqabsyg3dfr6chu3fgpregiymsck7e7aqa4s52zy" class="link blue fw5">/ipfs/bafkreigh2akiscaildcqabsyg3dfr6chu3fgpregiymsck7e7aqa4s52zy"</a> /&gt;
+      </code>
+    </a>
+    </figcaption>
+    <img src="/ipfs/bafkreigh2akiscaildcqabsyg3dfr6chu3fgpregiymsck7e7aqa4s52zy" alt="room guardian" style="width:766px" />
+  </figure>
+
+  <figure class="pa4 ma3 ba dib">
+    <figcaption>
+      <code class="bg-light-gray dib br2 mb2 pa1">
+        &lt;img src="<a href="https://nftstorage.link/ipfs/bafkreigh2akiscaildcqabsyg3dfr6chu3fgpregiymsck7e7aqa4s52zy" class="link blue fw5">https://nftstorage.link/ipfs/bafkreigh2akiscaildcqabsyg3dfr6chu3fgpregiymsck7e7aqa4s52zy"</a> /&gt;
+      </code>
+    </a>
+    </figcaption>
+    <img src="https://nftstorage.link/ipfs/bafkreigh2akiscaildcqabsyg3dfr6chu3fgpregiymsck7e7aqa4s52zy" alt="room guardian" style="width:766px" />
+  </figure>
+
+</body>
+</html>
diff --git a/example/html/style.css b/example/html/style.css
diff --git a/example/index.html b/example/index.html
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "src/nftstorage-sw.js",
   "scripts": {
-    "start": "cp src/nftstorage-sw.js example && serve example",
+    "start": "cp src/nftstorage-sw.js example/html && serve example/html",
     "test": "npm-run-all -p -r mock:nftstorage.link mock:dweb.link test:worker",
     "test:worker": "playwright-test --sw src/nftstorage-sw.js test/browser.test.js",
     "mock:nftstorage.link": "smoke -p 9091 test/mocks/nftstorage.link",