Add PWA support

composables/useMetaThemeColor.js

@@ -0,0 +1,11 @@
+export default function () {
+    const update = () => {
+        const themeColor = getComputedStyle(document.documentElement).getPropertyValue(
+            '--color-ui-gray-800'
+        );
+
+        document.querySelector('meta[name=theme-color]').setAttribute('content', themeColor);
+    };
+
+    return { update };
+}

nuxt.config.js

@@ -59,7 +59,6 @@ module.exports = {
             },
             { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
             { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
-            { rel: 'manifest', href: '/site.webmanifest' },
             { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' },
         ],
         script: [],
@@ -86,7 +85,7 @@ module.exports = {
     buildModules: ['@nuxt/postcss8', '@nuxtjs/composition-api/module', '@pinia/nuxt'],
 
     // Modules: https://go.nuxtjs.dev/config-modules
-    modules: ['@nuxt/content'],
+    modules: ['@nuxtjs/pwa', '@nuxt/content'],
 
     content: {
         markdown: {
@@ -96,6 +95,18 @@ module.exports = {
         },
     },
 
+    pwa: {
+        manifest: {
+            name: 'Showcode',
+            short_name: 'Showcode',
+            description: 'Generate beautiful images of code.',
+            useWebmanifestExtension: false,
+        },
+        workbox: {
+            enabled: true,
+        },
+    },
+
     // Build Configuration: https://go.nuxtjs.dev/config-build
     build: {
         extend(config) {

package.json

@@ -20,6 +20,7 @@
         "@nuxt/content": "^1.15.1",
         "@nuxt/postcss8": "^1.1.3",
         "@nuxtjs/composition-api": "^0.31.0",
+        "@nuxtjs/pwa": "^3.3.5",
         "@panzoom/panzoom": "^4.4.4",
         "@pinia/nuxt": "^0.1.8",
         "@stevebauman/shiki": "^0.10.4",

pages/index.vue

@@ -128,9 +128,10 @@ import { usePreferredColorScheme } from '@vueuse/core';
 import useCurrentTab from '@/composables/useCurrentTab';
 import useProjectStores from '@/composables/useProjectStores';
 import useTemplateStore from '@/composables/useTemplateStore';
+import useMetaThemeColor from '@/composables/useMetaThemeColor';
 import useApplicationStore from '@/composables/useApplicationStore';
 import { XIcon, PlusIcon, SunIcon, MoonIcon, ImageIcon } from 'vue-feather-icons';
-import { computed, onMounted, ref, useContext, watch } from '@nuxtjs/composition-api';
+import { computed, nextTick, onMounted, ref, useContext, watch } from '@nuxtjs/composition-api';
 
 export default {
     components: {
@@ -147,6 +148,8 @@ export default {
 
         const templates = useTemplateStore();
 
+        const { update: updateMetaThemeColor } = useMetaThemeColor();
+
         const { setTabFromProject, projectIsActive, currentTab } = useCurrentTab();
 
         const colorScheme = usePreferredColorScheme();
@@ -279,6 +282,7 @@ export default {
             }
 
             watch(colorScheme, (scheme) => (colorMode.value = scheme));
+            watch(colorMode, () => nextTick(updateMetaThemeColor), { immediate: true });
         });
 
         $bus.$on('alert', (variant, message) => (alert.value = { variant, message }));