Add loader and manifest

docs/index.css

@@ -110,5 +110,74 @@ body:not(.download) #download {
   background:black;
 }
 #dl-name {
-margin-bottom:2em;
+  margin-bottom:2em;
 }
+
+.loader{
+  border-radius:50%;
+  width: 1em;
+  height: 1em;
+  font-size: 10px;
+  margin: 0 auto;
+  position: relative;
+  text-indent: -9999em;
+  color:white;
+  display:none;
+
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation: turntable 2.8s infinite ease-in-out;
+  animation: turntable 2.8s infinite ease-in-out;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+  animation-timing-function: ease-in-out;
+
+  --ld0: 0.00em 2.25em 0 0.20em rgba(127,127,127,1.50);
+  --ld1: 0.93em 2.24em 0 0.20em rgba(127,127,127,1.45);
+  --ld2: 1.76em 2.20em 0 0.18em rgba(127,127,127,1.31);
+  --ld3: 2.43em 2.15em 0 0.16em rgba(127,127,127,1.09);
+  --ld4: 2.85em 2.08em 0 0.13em rgba(127,127,127,0.81);
+  --ld5: 3.00em 2.00em 0 0.10em rgba(127,127,127,0.50);
+  --ld6: 2.85em 1.92em 0 0.07em rgba(127,127,127,0.19);
+  --ld7: 2.43em 1.85em 0 0.04em rgba(127,127,127,-0.09);
+  --ld8: 1.76em 1.80em 0 0.02em rgba(127,127,127,-0.31);
+  --ld9: 0.93em 1.76em 0 0.00em rgba(127,127,127,-0.45);
+  --ld10: 0.00em 1.75em 0 0.00em rgba(127,127,127,-0.50);
+  --ld11: -0.93em 1.76em 0 0.00em rgba(127,127,127,-0.45);
+  --ld12: -1.76em 1.80em 0 0.02em rgba(127,127,127,-0.31);
+  --ld13: -2.43em 1.85em 0 0.04em rgba(127,127,127,-0.09);
+  --ld14: -2.85em 1.92em 0 0.07em rgba(127,127,127,0.19);
+  --ld15: -3.00em 2.00em 0 0.10em rgba(127,127,127,0.50);
+  --ld16: -2.85em 2.08em 0 0.13em rgba(127,127,127,0.81);
+  --ld17: -2.43em 2.15em 0 0.16em rgba(127,127,127,1.09);
+  --ld18: -1.76em 2.20em 0 0.18em rgba(127,127,127,1.31);
+  --ld19: -0.93em 2.24em 0 0.20em rgba(127,127,127,1.45);
+}
+
+
+@keyframes turntable {
+  100%,
+  0% {box-shadow:var(--ld0),var(--ld4), var(--ld8),var(--ld12),var(--ld16)}
+  5% {box-shadow:var(--ld1),var(--ld5), var(--ld9),var(--ld13),var(--ld17)}
+  10% {box-shadow:var(--ld2),var(--ld6), var(--ld10),var(--ld14),var(--ld18)}
+  15% {box-shadow:var(--ld3),var(--ld7), var(--ld11),var(--ld15),var(--ld19)}
+  20% {box-shadow:var(--ld4),var(--ld8), var(--ld12),var(--ld16),var(--ld0)}
+  25% {box-shadow:var(--ld5),var(--ld9), var(--ld13),var(--ld17),var(--ld1)}
+  30% {box-shadow:var(--ld6),var(--ld10), var(--ld14),var(--ld18),var(--ld2)}
+  35% {box-shadow:var(--ld7),var(--ld11), var(--ld15),var(--ld19),var(--ld3)}
+  40% {box-shadow:var(--ld8),var(--ld12), var(--ld16),var(--ld0),var(--ld4)}
+  45% {box-shadow:var(--ld9),var(--ld13), var(--ld17),var(--ld1),var(--ld5)}
+  50% {box-shadow:var(--ld10),var(--ld14), var(--ld18),var(--ld2),var(--ld6)}
+  55% {box-shadow:var(--ld11),var(--ld15), var(--ld19),var(--ld3),var(--ld7)}
+  60% {box-shadow:var(--ld12),var(--ld16), var(--ld0),var(--ld4),var(--ld8)}
+  65% {box-shadow:var(--ld13),var(--ld17), var(--ld1),var(--ld5),var(--ld9)}
+  70% {box-shadow:var(--ld14),var(--ld18), var(--ld2),var(--ld6),var(--ld10)}
+  75% {box-shadow:var(--ld15),var(--ld19), var(--ld3),var(--ld7),var(--ld11)}
+  80% {box-shadow:var(--ld16),var(--ld0), var(--ld4),var(--ld8),var(--ld12)}
+  85% {box-shadow:var(--ld17),var(--ld1), var(--ld5),var(--ld9),var(--ld13)}
+  90% {box-shadow:var(--ld18),var(--ld2), var(--ld6),var(--ld10),var(--ld14)}
+  95% {box-shadow:var(--ld19),var(--ld3), var(--ld7),var(--ld11),var(--ld15)}
+}

docs/index.html

@@ -4,10 +4,11 @@
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, viewport-fit=cover">
 <meta name="description" content="itty bitty things can be conveyed in a link.">
-<meta id="themeColor" name="theme-color" content="#ebeff9">
+<meta id="themeColor" name="theme-color">
 <link id="favicon" rel="icon" href='/favicon.svg'>
 <link rel="stylesheet" href="/index.css">
-<script src="/js/lzma/lzma-d-min.js"></script>
+<link rel="manifest" href="/manifest.json">
+<script src="/js/lzma/lzma-d-min.js"></script> 
 <script src="/js/lzma/lzma_worker-min.js"></script>
 
 <script src="/index.js" type="module"></script>

docs/index.js

@@ -24,6 +24,12 @@
     // <br><br><button onclick="dismiss()">I understand</button> <input id="never" type="checkbox"><label for="never">Never show this</label>
     // </div>`
   }
+    
+  function addLoader() {
+    let el = document.createElement("div");
+    el.className = "loader";
+    document.body.appendChild(el);
+  }
 
   function setThemeColor(color) {
     document.getElementById("themeColor").content = color;
@@ -44,6 +50,7 @@
     "application/ld+json": {script:"recipe"},
     "text/rawhtml": {script:"parse"},
     "javascript": {script:"bookmarklet"},
+    "ipfs": {script:"ipfs"},
     "web3": {script:"web3", mode:"frame"},
     "text/directory": {script:"download", args: {extension:"vcf", filename:"contact"}}
   }

docs/manifest.json

@@ -0,0 +1,26 @@
+{
+  "short_name": "itty.bitty",
+  "name": "itty.bitty.app",
+  "description": "itty.bitty.app",
+  "icons": [
+    {
+      "src": "/favicon.svg",
+      "type": "image/svg+xml",
+      "sizes": "32x32"
+    }
+  ],
+  "start_url": "/edit",
+  "background_color": "#3367D6",
+  "display": "browser",
+  "scope": "/",
+  "theme_color": "#3367D6",
+  "shortcuts": [
+    {
+      "name": "New",
+      "short_name": "New Site",
+      "description": "New Site",
+      "url": "/edit",
+      "icons": [{ "src": "/favicon.svg", "sizes": "32x32" }]
+    }
+  ]
+}