From a9574211369fe1521c945d66772c7f2301f837c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Wed, 22 Feb 2023 11:31:26 +0100
Subject: [PATCH] chore: include offline support (#79)

---
 .gitignore      |   1 -
 package.json    |   7 +--
 pages/index.vue |  11 +++-
 pnpm-lock.yaml  | 150 ++++++------------------------------------------
 4 files changed, 28 insertions(+), 141 deletions(-)

diff --git a/.gitignore b/.gitignore
index c888971..ed5b96f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,6 @@
 node_modules
 *.log
 dist
-dev-dist
 .output
 .nuxt
 .env
diff --git a/package.json b/package.json
index bb11157..b584894 100644
--- a/package.json
+++ b/package.json
@@ -18,14 +18,11 @@
     "@nuxtjs/color-mode": "^3.2.0",
     "@pinia/nuxt": "^0.4.6",
     "@unocss/nuxt": "^0.49.7",
-    "@vite-pwa/nuxt": "^0.0.5",
+    "@vite-pwa/nuxt": "^0.0.6",
     "@vueuse/nuxt": "^9.13.0",
     "eslint": "^8.34.0",
     "nuxt": "^3.2.2",
     "pinia": "^2.0.30",
-    "typescript": "^4.9.5",
-    "vite-plugin-pwa": "^0.14.4",
-    "workbox-build": "^6.5.4",
-    "workbox-window": "^6.5.4"
+    "typescript": "^4.9.5"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
index b081d09..c7b9695 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,8 +1,17 @@
+<script setup lang="ts">
+const online = useOnline()
+</script>
+
 <template>
   <div>
     <Logos mb-6 />
     <Suspense>
-      <PageView />
+      <ClientOnly>
+        <PageView v-if="online" />
+        <div v-else text-gray:80>
+          You're offline
+        </div>
+      </ClientOnly>
       <template #fallback>
         <div op50 italic>
           <span animate-pulse>Loading...</span>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7237fb2..30e5055 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,15 +7,12 @@ specifiers:
   '@nuxtjs/color-mode': ^3.2.0
   '@pinia/nuxt': ^0.4.6
   '@unocss/nuxt': ^0.49.7
-  '@vite-pwa/nuxt': ^0.0.5
+  '@vite-pwa/nuxt': ^0.0.6
   '@vueuse/nuxt': ^9.13.0
   eslint: ^8.34.0
   nuxt: ^3.2.2
   pinia: ^2.0.30
   typescript: ^4.9.5
-  vite-plugin-pwa: ^0.14.4
-  workbox-build: ^6.5.4
-  workbox-window: ^6.5.4
 
 devDependencies:
   '@antfu/eslint-config': 0.35.2_7kw3g6rralp5ps6mg3uyzz6azm
@@ -24,15 +21,12 @@ devDependencies:
   '@nuxtjs/color-mode': 3.2.0
   '@pinia/nuxt': 0.4.6_typescript@4.9.5
   '@unocss/nuxt': 0.49.7
-  '@vite-pwa/nuxt': 0.0.5_vite-plugin-pwa@0.14.4
+  '@vite-pwa/nuxt': 0.0.6
   '@vueuse/nuxt': 9.13.0_nuxt@3.2.2
   eslint: 8.34.0
   nuxt: 3.2.2_7kw3g6rralp5ps6mg3uyzz6azm
   pinia: 2.0.30_typescript@4.9.5
   typescript: 4.9.5
-  vite-plugin-pwa: 0.14.4_tz3vz2xt4jvid2diblkpydcyn4
-  workbox-build: 6.5.4
-  workbox-window: 6.5.4
 
 packages:
 
@@ -381,13 +375,6 @@ packages:
       '@babel/types': 7.20.2
     dev: true
 
-  /@babel/helper-member-expression-to-functions/7.18.9:
-    resolution: {integrity: sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.20.7
-    dev: true
-
   /@babel/helper-member-expression-to-functions/7.20.7:
     resolution: {integrity: sha512-9J0CxJLq315fEdi4s7xK5TQaNYjZw+nDVpVqr1axNGKzdrdwYBD5b4uKv3n75aABG0rCCTK8Im8Ww7eYfMrZgw==}
     engines: {node: '>=6.9.0'}
@@ -461,19 +448,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/helper-replace-supers/7.19.1:
-    resolution: {integrity: sha512-T7ahH7wV0Hfs46SFh5Jz3s0B6+o8g3c+7TMxu7xKfmHikg7EAZ3I2Qk9LFhjxXq8sL7UkP5JflezNwoZa8WvWw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-member-expression-to-functions': 7.18.9
-      '@babel/helper-optimise-call-expression': 7.18.6
-      '@babel/traverse': 7.20.13
-      '@babel/types': 7.20.7
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/helper-replace-supers/7.20.7:
     resolution: {integrity: sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==}
     engines: {node: '>=6.9.0'}
@@ -627,7 +601,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.20.12
-      '@babel/helper-create-class-features-plugin': 7.20.2_@babel+core@7.20.12
+      '@babel/helper-create-class-features-plugin': 7.20.12_@babel+core@7.20.12
       '@babel/helper-plugin-utils': 7.20.2
     transitivePeerDependencies:
       - supports-color
@@ -757,7 +731,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.20.12
-      '@babel/helper-create-class-features-plugin': 7.20.2_@babel+core@7.20.12
+      '@babel/helper-create-class-features-plugin': 7.20.12_@babel+core@7.20.12
       '@babel/helper-plugin-utils': 7.20.2
     transitivePeerDependencies:
       - supports-color
@@ -1191,7 +1165,7 @@ packages:
     dependencies:
       '@babel/core': 7.20.12
       '@babel/helper-plugin-utils': 7.20.2
-      '@babel/helper-replace-supers': 7.19.1
+      '@babel/helper-replace-supers': 7.20.7
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2146,33 +2120,6 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/kit/3.1.2:
-    resolution: {integrity: sha512-m8/AF8hBJiG7aTx2CpiDGeLYYz30fUoPbJ9XiSmHqRIXv1goAFWHSkzWfRNEsoAAbMHf76oB917wVUQ3VSSQHg==}
-    engines: {node: ^14.16.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
-    dependencies:
-      '@nuxt/schema': 3.1.2
-      c12: 1.1.0
-      consola: 2.15.3
-      defu: 6.1.2
-      globby: 13.1.3
-      hash-sum: 2.0.0
-      ignore: 5.2.4
-      jiti: 1.17.1
-      knitwork: 1.0.0
-      lodash.template: 4.5.0
-      mlly: 1.1.1
-      pathe: 1.1.0
-      pkg-types: 1.0.1
-      scule: 1.0.0
-      semver: 7.3.8
-      unctx: 2.1.2
-      unimport: 2.2.4
-      untyped: 1.2.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/kit/3.2.2:
     resolution: {integrity: sha512-T3UeLxGSNl7dQgKzmtBbPEkUiiBYgXI+KkemmpkYbQK/l+bWy2f9VQw/Rl0HkQLfRTE2fS8q8jhsOedFiEnHQQ==}
     engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
@@ -2270,28 +2217,6 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/schema/3.1.2:
-    resolution: {integrity: sha512-wru9LhRXTa6WQlx7c0oYrtvJY7TiVlkBKXY5Rsmfo0StJuWohgZiReu9fu6z6GU4MzZlX25TVjwvq9Q7bNVbSQ==}
-    engines: {node: ^14.16.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
-    dependencies:
-      c12: 1.1.2
-      create-require: 1.1.1
-      defu: 6.1.2
-      hookable: 5.4.2
-      jiti: 1.17.1
-      pathe: 1.1.0
-      pkg-types: 1.0.2
-      postcss-import-resolver: 2.0.0
-      scule: 1.0.0
-      std-env: 3.3.2
-      ufo: 1.1.0
-      unimport: 2.2.4
-      untyped: 1.2.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/schema/3.2.2:
     resolution: {integrity: sha512-o3O2OqLAMKqb/DlGpK8eJq4tH29NA4OMaohknSSXl35+Nw/qHB5eOLDz+cFxNE+MKHoMj1rRVMCfi/Y/PrCN6g==}
     engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
@@ -2582,20 +2507,6 @@ packages:
       rollup: 2.79.1
     dev: true
 
-  /@rollup/plugin-replace/5.0.2_rollup@3.13.0:
-    resolution: {integrity: sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.0.2_rollup@3.13.0
-      magic-string: 0.27.0
-      rollup: 3.13.0
-    dev: true
-
   /@rollup/plugin-replace/5.0.2_rollup@3.17.0:
     resolution: {integrity: sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==}
     engines: {node: '>=14.0.0'}
@@ -2671,21 +2582,6 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@rollup/pluginutils/5.0.2_rollup@3.13.0:
-    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@types/estree': 1.0.0
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-      rollup: 3.13.0
-    dev: true
-
   /@rollup/pluginutils/5.0.2_rollup@3.17.0:
     resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
     engines: {node: '>=14.0.0'}
@@ -3163,16 +3059,16 @@ packages:
       - supports-color
     dev: true
 
-  /@vite-pwa/nuxt/0.0.5_vite-plugin-pwa@0.14.4:
-    resolution: {integrity: sha512-+/1mj7vKILmZsLoFKJFoqNconjS+QG3elEsCGgjZ8gEN/4RjG67dmrtt8W51pJsa8CcTh586CzuQLWn4tNrHSg==}
-    peerDependencies:
-      vite-plugin-pwa: ^0.14.0
+  /@vite-pwa/nuxt/0.0.6:
+    resolution: {integrity: sha512-TxIBNz8tBvirHFr3zLXEbWSFDQl1CBsyc+gegD6eVpT4fbMBb3i8Gzzqh6gTssVB+nB/zOXK/ZN1mGZysFPevQ==}
     dependencies:
-      '@nuxt/kit': 3.1.2
-      vite-plugin-pwa: 0.14.4_tz3vz2xt4jvid2diblkpydcyn4
+      '@nuxt/kit': 3.2.2
+      vite-plugin-pwa: 0.14.4
     transitivePeerDependencies:
+      - '@types/babel__core'
       - rollup
       - supports-color
+      - vite
     dev: true
 
   /@vitejs/plugin-vue-jsx/3.0.0_vite@4.1.2+vue@3.2.47:
@@ -7454,11 +7350,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /pretty-bytes/6.0.0:
-    resolution: {integrity: sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==}
-    engines: {node: ^14.13.1 || >=16.0.0}
-    dev: true
-
   /pretty-bytes/6.1.0:
     resolution: {integrity: sha512-Rk753HI8f4uivXi4ZCIYdhmG1V+WKzvRMg/X+M42a6t7D07RcmopXJMDNk6N++7Bl75URRGsb40ruvg7Hcp2wQ==}
     engines: {node: ^14.13.1 || >=16.0.0}
@@ -7737,14 +7628,6 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /rollup/3.13.0:
-    resolution: {integrity: sha512-HJwQtrXAc0AmyDohTJ/2c+Bx/sWPScJLlAUJ1kuD7rAkCro8Cr2SnVB2gVYBiSLxpgD2kZ24jbyXtG++GumrYQ==}
-    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
-    hasBin: true
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
   /rollup/3.17.0:
     resolution: {integrity: sha512-0zZQ0J4p0ZtTla6l8sheDTUyNfGZQDpU5h0nPHf6xtUXIzKK70LmB2IRR0wLnzaL8a02fjmsJy+XCncbSwOpjg==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
@@ -8792,21 +8675,20 @@ packages:
       vscode-uri: 3.0.6
     dev: true
 
-  /vite-plugin-pwa/0.14.4_tz3vz2xt4jvid2diblkpydcyn4:
+  /vite-plugin-pwa/0.14.4:
     resolution: {integrity: sha512-M7Ct0so8OlouMkTWgXnl8W1xU95glITSKIe7qswZf1tniAstO2idElGCnsrTJ5NPNSx1XqfTCOUj8j94S6FD7Q==}
     peerDependencies:
       vite: ^3.1.0 || ^4.0.0
-      workbox-build: ^6.5.4
-      workbox-window: ^6.5.4
     dependencies:
-      '@rollup/plugin-replace': 5.0.2_rollup@3.13.0
+      '@rollup/plugin-replace': 5.0.2_rollup@3.17.0
       debug: 4.3.4
       fast-glob: 3.2.12
-      pretty-bytes: 6.0.0
-      rollup: 3.13.0
+      pretty-bytes: 6.1.0
+      rollup: 3.17.0
       workbox-build: 6.5.4
       workbox-window: 6.5.4
     transitivePeerDependencies:
+      - '@types/babel__core'
       - supports-color
     dev: true