feat: added assets for pwa

nimiq · Mar 21, 2024 · d6ad84c · d6ad84c
1 parent eef6c59
commit d6ad84c
Show file tree

Hide file tree

Showing 8 changed files with 511 additions and 13 deletions.
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -1,5 +1,6 @@
 import { existsSync, readFileSync } from 'node:fs'
 import { basename, dirname, join } from 'node:path'
+import { env } from 'node:process'
 import { defineConfig } from 'vitepress'
 import container from 'markdown-it-container'
 import { spawn } from 'cross-spawn'
@@ -103,14 +104,14 @@ export default async () => {
     },
 
     head: [
+      ['meta', { name: 'theme-color', content: '#ffffff' }],
       ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: `${baseUrl}favicons/apple-touch-icon.png` }],
       ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: `${baseUrl}favicons/favicon-32x32.png` }],
       ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: `${baseUrl}favicons/favicon-16x16.png` }],
       ['link', { rel: 'manifest', href: `${baseUrl}favicons/site.webmanifest` }],
       ['link', { rel: 'mask-icon', href: `${baseUrl}favicons/safari-pinned-tab.svg`, color: '#eaaf0c' }],
       ['link', { rel: 'shortcut icon', href: `${baseUrl}favicons/favicon.ico` }],
       ['meta', { name: 'msapplication-TileColor', content: '#2b5797' }],
-      ['meta', { name: 'theme-color', content: '#ffffff' }],
       ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
 
       ['meta', { property: 'og:title', content: pkg.title }],
@@ -127,5 +128,45 @@ export default async () => {
       ['meta', { name: 'twitter:creator', content: '@nimiq' }],
       ['meta', { name: 'twitter:title', content: pkg.title }],
     ],
+    pwa: {
+      mode: env.NODE_ENV === 'development' ? 'development' : 'production',
+      registerType: 'autoUpdate',
+      injectRegister: 'script-defer',
+      includeAssets: [`${baseUrl}favicons/favicon.svg`],
+      manifest: {
+        name: pkg.title,
+        short_name: pkg.title,
+        theme_color: '#ffffff',
+        icons: [
+          {
+            src: `${baseUrl}favicons/nimiq-hexagon-192.png`,
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: `${baseUrl}favicons/nimiq-hexagon-512.png`,
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: `${baseUrl}favicons/nimiq-hexagon-512.png`,
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable',
+          },
+        ],
+      },
+      workbox: {
+        globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
+      },
+      experimental: {
+        includeAllowlist: true,
+      },
+      devOptions: {
+        enabled: true,
+        suppressWarnings: true,
+        navigateFallback: '/',
+      },
+    },
   }))
 }
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -5,14 +5,18 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
+  const CardType: typeof import('.vitepress/theme/utils/types')['CardType']
   const EffectScope: typeof import('vue')['EffectScope']
+  const MarkdownContent: typeof import('.vitepress/theme/components/MarkdownContent')['MarkdownContent']
+  const Tag: typeof import('.vitepress/theme/utils/types')['Tag']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const contentUpdatedCallbacks: typeof import('.vitepress/theme/utils/markdown-content')['contentUpdatedCallbacks']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
   const createApp: typeof import('vue')['createApp']
@@ -51,6 +55,7 @@ declare global {
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onContentUpdated: typeof import('.vitepress/theme/utils/markdown-content')['onContentUpdated']
   const onDeactivated: typeof import('vue')['onDeactivated']
   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
@@ -294,14 +299,18 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
+    readonly CardType: UnwrapRef<typeof import('.vitepress/theme/utils/types')['CardType']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly MarkdownContent: UnwrapRef<typeof import('.vitepress/theme/components/MarkdownContent')['MarkdownContent']>
+    readonly Tag: UnwrapRef<typeof import('.vitepress/theme/utils/types')['Tag']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
+    readonly contentUpdatedCallbacks: UnwrapRef<typeof import('.vitepress/theme/utils/markdown-content')['contentUpdatedCallbacks']>
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
@@ -340,6 +349,7 @@ declare module 'vue' {
     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
+    readonly onContentUpdated: UnwrapRef<typeof import('.vitepress/theme/utils/markdown-content')['onContentUpdated']>
     readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
     readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
     readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
@@ -576,14 +586,18 @@ declare module 'vue' {
 declare module '@vue/runtime-core' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
+    readonly CardType: UnwrapRef<typeof import('.vitepress/theme/utils/types')['CardType']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly MarkdownContent: UnwrapRef<typeof import('.vitepress/theme/components/MarkdownContent')['MarkdownContent']>
+    readonly Tag: UnwrapRef<typeof import('.vitepress/theme/utils/types')['Tag']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
+    readonly contentUpdatedCallbacks: UnwrapRef<typeof import('.vitepress/theme/utils/markdown-content')['contentUpdatedCallbacks']>
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
@@ -622,6 +636,7 @@ declare module '@vue/runtime-core' {
     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
+    readonly onContentUpdated: UnwrapRef<typeof import('.vitepress/theme/utils/markdown-content')['onContentUpdated']>
     readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
     readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
     readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>

diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "@vite-pwa/vitepress": "^0.4.0",
     "cross-spawn": "^7.0.3",
     "eslint": "^8.57.0",
+    "https-localhost": "^4.7.1",
     "lint-staged": "^15.2.2",
     "markdown-it": "^14.1.0",
     "markdown-it-container": "^4.0.0",