@docsector/docsector-reader 0.1.0

package/public/sad.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166.7 168.9" width="166.7" height="168.9" isolation="isolate"><defs><clipPath><rect width="166.7" height="168.9"/></clipPath></defs><g clip-path="url(#_clipPath_PPPiEcORhRSYwopEENnaRFzzeYSXmwtt)"><path d="M65.6 135.2C65.6 137.1 64.1 138.6 62.2 138.6 60.4 138.6 58.9 137.1 58.9 135.2 58.9 130.7 61.9 126.7 66.8 124 71.1 121.6 77 120.1 83.3 120.1 89.7 120.1 95.6 121.6 99.9 124 104.7 126.7 107.8 130.7 107.8 135.2 107.8 137.1 106.3 138.6 104.4 138.6 102.6 138.6 101.1 137.1 101.1 135.2 101.1 133.3 99.4 131.3 96.6 129.8 93.3 127.9 88.6 126.8 83.3 126.8 78.1 126.8 73.4 127.9 70 129.8 67.3 131.3 65.6 133.3 65.6 135.2ZM149.2 153.3C149.2 157.6 147.5 161.5 144.6 164.4 141.8 167.2 137.9 168.9 133.6 168.9 129.3 168.9 125.4 167.2 122.6 164.4 120.9 162.8 119.7 160.9 118.9 158.7 114.1 161 109 162.8 103.7 164.1 97.2 165.8 90.4 166.6 83.3 166.6 60.3 166.6 39.5 157.3 24.4 142.2 9.3 127.1 0 106.3 0 83.3 0 60.3 9.3 39.5 24.4 24.4 39.5 9.3 60.3 0 83.3 0 106.4 0 127.2 9.3 142.3 24.4 157.3 39.5 166.7 60.3 166.7 83.3 166.7 94.5 164.5 105.1 160.5 114.9 156.6 124.2 151.1 132.7 144.4 140 147 145.1 149.2 150.2 149.2 153.3ZM130.7 126.3C131.1 125.5 131.8 125 132.5 124.8L132.6 124.7 132.6 124.7 132.7 124.7 132.7 124.7 132.8 124.7 132.9 124.6 132.9 124.6 132.9 124.6 133 124.6 133 124.6C133 124.6 133.1 124.6 133.1 124.6L133.1 124.6 133.2 124.6 133.2 124.6C133.9 124.5 134.6 124.6 135.2 125 135.8 125.3 136.3 125.8 136.6 126.4L136.6 126.4 136.6 126.4 136.6 126.4 136.6 126.4 136.6 126.4 136.6 126.5 136.6 126.5 136.6 126.5 136.6 126.5 136.6 126.5 136.7 126.5C137 127.2 137.7 128.3 138.4 129.6L138.4 129.6 138.5 129.7 138.5 129.7 138.6 129.8 138.6 129.9 138.6 129.9 138.7 130 138.7 130.1 138.7 130.1 138.7 130.1 138.8 130.2 138.8 130.2 138.8 130.3 138.9 130.3 138.9 130.4 138.9 130.4 138.9 130.4 139 130.5 139 130.5 139 130.6 139.1 130.7 139.1 130.7 139.1 130.7 139.2 130.8 139.2 130.8 139.2 130.9C139.8 131.8 140.4 132.9 141 133.9 146.5 127.6 151.1 120.3 154.3 112.4 158 103.4 160 93.6 160 83.3 160 62.1 151.4 43 137.6 29.1 123.7 15.2 104.5 6.7 83.3 6.7 62.2 6.7 43 15.2 29.1 29.1 15.2 43 6.7 62.1 6.7 83.3 6.7 104.5 15.2 123.6 29.1 137.5 43 151.4 62.2 160 83.3 160 89.8 160 96.1 159.2 102.1 157.7 107.8 156.2 113.1 154.2 118.1 151.7L118.1 151.6 118.2 151.6 118.2 151.3 118.2 151.3 118.3 151 118.3 151 118.4 150.7 118.4 150.6 118.5 150.4 118.5 150.3 118.5 150 118.6 149.9 118.6 149.7 118.7 149.6 118.8 149.3C118.9 148.9 119 148.5 119.1 148.2L119.2 148.1 119.3 147.8 119.3 147.7 119.4 147.4 119.4 147.4C119.5 147.1 119.6 146.9 119.7 146.7L119.7 146.6 119.8 146.3 119.9 146.2 120 145.9 120.1 145.9C120.2 145.6 120.3 145.3 120.4 145.1L120.4 145.1 120.6 144.7 120.6 144.6 120.7 144.3 120.8 144.2 120.9 143.9 120.9 143.8 121 143.8 121.1 143.5 121.1 143.4 121.2 143.2 121.3 143 121.4 143C121.6 142.6 121.7 142.2 122 141.8L122 141.7 122.2 141.4 122.2 141.3 122.4 140.9 122.4 140.9 122.6 140.5 122.6 140.5 122.8 140.1 123 139.8 123 139.7 123 139.7 123.4 138.9 123.5 138.9 123.6 138.6 123.7 138.4 123.8 138.3 123.9 138 124 137.9 124.2 137.6 124.2 137.5 124.4 137.2 124.4 137.2 124.6 136.8 124.6 136.8 124.8 136.4 124.8 136.4 125 136.1 125.1 136 125.2 135.7 125.3 135.6 125.4 135.3 125.5 135.2 125.6 135 125.7 134.8 125.8 134.6 125.9 134.4 126.2 134 126.2 133.9 126.4 133.6 126.4 133.6 126.6 133.3 126.6 133.2 126.8 132.9 126.8 132.9 127 132.5 127 132.5 127.3 132.2 127.4 131.9 127.4 131.8 127.6 131.6 127.7 131.5 127.8 131.3 127.9 131.1 128 131 128.1 130.8 128.1 130.6 128.3 130.4 128.3 130.4 128.5 130.1 128.5 130.1 128.7 129.8 128.7 129.8 128.8 129.5 128.8 129.5 128.9 129.4 128.9 129.3 129 129.3 129 129.2 129 129.1 129 129.1 129.1 129 129.1 129 129.2 128.9 129.2 128.9 129.2 128.8 129.2 128.8 129.3 128.8 129.3 128.8 129.3 128.7 129.3 128.7 129.3 128.7 129.3 128.7 129.4 128.6 129.4 128.6 129.4 128.5 129.4 128.5 129.4 128.4 129.5 128.4 129.5 128.4 129.5 128.4 129.5 128.4 129.5 128.3 129.5 128.3 129.6 128.2 129.6 128.2 129.6 128.2 129.6 128.2 129.6 128.1 129.6 128.1 129.7 128.1 129.7 128.1 129.7 128 129.7 128 129.8 127.9 129.8 127.9 129.8 127.9 129.8 127.9 129.8 127.8 129.8 127.8 129.8 127.8 129.8 127.8 129.9 127.7 129.9 127.7 129.9 127.7 129.9 127.7 129.9 127.6 129.9 127.6 130 127.6 130 127.6 130 127.5 130 127.5 130 127.4 130 127.4 130.1 127.4 130.1 127.4 130.1 127.4 130.1 127.4 130.1 127.3 130.1 127.3 130.1 127.3 130.1 127.3 130.2 127.2 130.2 127.2 130.2 127.2 130.2 127.2 130.2 127.1 130.2 127.1 130.2 127.1 130.2 127.1 130.3 127 130.3 127 130.3 127 130.3 127 130.3 127 130.3 127 130.4 126.9 130.4 126.9 130.4 126.9 130.4 126.9 130.4 126.8 130.4 126.8 130.4 126.8 130.4 126.8 130.4 126.8 130.4 126.8 130.5 126.7 130.5 126.7 130.5 126.7 130.5 126.7 130.5 126.7 130.5 126.7 130.5 126.6 130.5 126.6 130.5 126.6 130.5 126.6 130.6 126.5 130.6 126.5 130.6 126.5 130.6 126.5 130.6 126.5 130.6 126.5 130.6 126.4 130.6 126.4 130.7 126.4 130.7 126.4 130.7 126.4 130.7 126.4 130.7 126.3 130.7 126.3 130.7 126.3 130.7 126.3ZM140 159.6C141.5 158.1 142.6 155.8 142.6 153.3 142.6 151 140.1 146 137.4 141.1L137.4 141.1 137.4 141.1 137.4 141.1C137 140.4 136.7 139.8 136.3 139.1L136.2 139 136.2 138.9 136.1 138.9 136.1 138.8 136 138.5 135.9 138.5C135.2 137.2 134.5 136.1 133.9 135L133.8 134.9 133.8 134.8 133.8 134.8 133.7 134.7 133.6 134.6 133.6 134.5 133.4 134.8 133.3 135.1 133.3 135.1 133.1 135.4 133.1 135.4 132.9 135.7 132.7 136 132.7 136 132.5 136.3 132.5 136.3 132.4 136.6 132.2 136.9 132.2 136.9 132 137.2 131.8 137.5 131.8 137.5 131.6 137.9 131.6 137.9 131.4 138.2 131.4 138.2 131.2 138.5 131 138.9 131 138.9 130.8 139.2 130.8 139.2 130.7 139.5 130.7 139.5 130.5 139.9 130.5 139.9 130.3 140.2 130.1 140.5 130.1 140.5 129.9 140.9 129.9 140.9 129.7 141.2 129.7 141.2 129.6 141.5 129.4 141.9 129.2 142.2 129.2 142.2 129 142.6 129 142.6 128.8 142.9 128.6 143.2 128.6 143.2 128.5 143.6 128.3 143.9 128.3 143.9 128.1 144.3 128.1 144.3 127.9 144.6 127.9 144.6 127.8 144.9 127.6 145.2 127.4 145.6 127.3 145.9 127.3 145.9 127.1 146.2 127 146.5 127 146.5 126.8 146.8 126.8 146.8 126.7 147.2 126.7 147.2 126.5 147.5 126.5 147.5 126.4 147.8 126.4 147.8 126.3 148.1 126.1 148.4 126 148.6 126 148.6 125.9 149 125.9 149 125.7 149.3 125.7 149.5 125.7 149.5 125.6 149.8 125.6 149.8 125.4 150 125.4 150 125.3 150.3 125.3 150.3 125.3 150.6 125.3 150.6 125.2 150.8 125.2 150.8 125.1 151.1 125.1 151.1 125 151.3 125 151.3 125 151.6 125 151.6 124.9 151.8 124.9 151.8 124.8 152 124.8 152 124.8 152.2 124.8 152.2 124.8 152.4 124.8 152.4C124.7 152.5 124.7 152.5 124.7 152.6L124.7 152.6 124.7 152.8 124.7 152.8C124.7 152.9 124.7 152.9 124.7 153L124.7 153 124.6 153.2 124.6 153.2 124.6 153.3 124.6 153.4C124.7 155.9 125.7 158.1 127.3 159.7 128.9 161.3 131.1 162.3 133.6 162.3 136.1 162.3 138.3 161.3 140 159.6ZM135.3 72.7C136.2 74.3 135.6 76.3 133.9 77.2 132.3 78 130.3 77.4 129.4 75.8 128.7 74.3 127.6 72.9 126.3 71.9 125 70.8 123.4 70.1 121.8 69.6L121.8 69.6C120.8 69.4 119.8 69.2 118.9 69.2 117.8 69.2 116.8 69.3 115.8 69.5 114 69.9 112.3 68.8 111.8 67 111.5 65.2 112.6 63.5 114.4 63 115.8 62.7 117.4 62.6 118.9 62.6 120.5 62.6 122 62.8 123.4 63.2L123.6 63.2C126.1 63.9 128.4 65.1 130.4 66.7 132.5 68.3 134.1 70.4 135.3 72.7ZM37.2 75.8C36.4 77.4 34.4 78 32.7 77.2 31.1 76.3 30.5 74.3 31.3 72.7 32.5 70.4 34.2 68.3 36.2 66.7 38.2 65.1 40.6 63.9 43.1 63.2L43.2 63.2C44.7 62.8 46.2 62.6 47.7 62.6 49.3 62.6 50.8 62.7 52.3 63 54.1 63.5 55.2 65.2 54.8 67 54.4 68.8 52.6 69.9 50.9 69.5 49.9 69.3 48.8 69.2 47.8 69.2 46.8 69.2 45.8 69.4 44.9 69.6L44.9 69.6C43.2 70.1 41.7 70.8 40.4 71.9 39.1 72.9 38 74.3 37.2 75.8ZM125.2 92.7C125.2 90.7 124.5 88.9 123.3 87.6 122.2 86.5 120.6 85.7 119 85.7 117.3 85.7 115.8 86.5 114.7 87.6 113.5 88.9 112.8 90.7 112.8 92.7 112.8 94.6 113.5 96.4 114.7 97.7 115.8 98.9 117.3 99.6 119 99.6 120.6 99.6 122.2 98.9 123.3 97.7 124.5 96.4 125.2 94.6 125.2 92.7ZM128.2 83.2C130.4 85.6 131.8 89 131.8 92.7 131.8 96.4 130.4 99.7 128.2 102.2 125.8 104.7 122.6 106.3 119 106.3 115.4 106.3 112.1 104.7 109.8 102.2 107.5 99.7 106.1 96.4 106.1 92.7 106.1 89 107.5 85.6 109.8 83.2 112.1 80.6 115.4 79.1 119 79.1 122.6 79.1 125.8 80.6 128.2 83.2ZM53.9 92.7C53.9 90.7 53.2 88.9 52 87.6 50.9 86.5 49.4 85.7 47.7 85.7 46 85.7 44.5 86.5 43.4 87.6 42.2 88.9 41.5 90.7 41.5 92.7 41.5 94.6 42.2 96.4 43.4 97.7 44.5 98.9 46 99.6 47.7 99.6 49.4 99.6 50.9 98.9 52 97.7 53.2 96.4 53.9 94.6 53.9 92.7ZM56.9 83.2C59.2 85.6 60.5 89 60.5 92.7 60.5 96.4 59.2 99.7 56.9 102.2 54.5 104.7 51.3 106.3 47.7 106.3 44.1 106.3 40.9 104.7 38.5 102.2 36.2 99.7 34.8 96.4 34.8 92.7 34.8 89 36.2 85.6 38.5 83.2 40.9 80.6 44.1 79.1 47.7 79.1 51.3 79.1 54.5 80.6 56.9 83.2Z" fill="rgb(1,22,39)" fill-opacity="0.2"/></g></svg>

package/quasar.config.js

@@ -0,0 +1,117 @@
+/* eslint-env node */
+
+import { configure } from 'quasar/wrappers'
+import { readFileSync } from 'fs'
+import { fileURLToPath } from 'url'
+import { dirname, resolve } from 'path'
+import HJSON from 'hjson'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export default configure((/* ctx */) => {
+  return {
+    boot: [
+      'store',
+      'QZoom',
+      'i18n',
+      'axios'
+    ],
+
+    css: [
+      'app.sass'
+    ],
+
+    extras: [
+      'fontawesome-v5',
+      'roboto-font',
+      'material-icons'
+    ],
+
+    build: {
+      target: {
+        browser: ['es2022', 'firefox115', 'chrome115', 'safari14'],
+        node: 'node20'
+      },
+
+      vueRouterMode: 'history',
+
+      vitePlugins: [
+        // HJSON loader plugin
+        {
+          name: 'vite-plugin-hjson',
+          transform (code, id) {
+            if (id.endsWith('.hjson')) {
+              const parsed = HJSON.parse(readFileSync(id, 'utf-8'))
+              return {
+                code: `export default ${JSON.stringify(parsed, null, 2)};`,
+                map: null
+              }
+            }
+          }
+        }
+      ],
+
+      extendViteConf (viteConf) {
+        viteConf.resolve = viteConf.resolve || {}
+        viteConf.resolve.alias = viteConf.resolve.alias || {}
+        viteConf.resolve.alias['docsector.config.js'] = resolve(__dirname, 'docsector.config.js')
+      }
+    },
+
+    devServer: {
+      port: 8181,
+      open: false
+    },
+
+    framework: {
+      config: {},
+      lang: 'en-US',
+      plugins: [
+        'LocalStorage', 'SessionStorage'
+      ]
+    },
+
+    animations: ['zoomIn', 'zoomOut'],
+
+    pwa: {
+      workboxMode: 'GenerateSW',
+      manifest: {
+        name: 'Docsector Documentation System',
+        short_name: 'Docsector Docs',
+        description: 'Streamline your documentation process with Docsector.',
+        display: 'standalone',
+        orientation: 'portrait',
+        background_color: '#ffffff',
+        theme_color: '#655529',
+        icons: [
+          {
+            src: 'icons/icon-128x128.png',
+            sizes: '128x128',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-256x256.png',
+            sizes: '256x256',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-384x384.png',
+            sizes: '384x384',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      }
+    }
+  }
+})

package/src/App.vue

@@ -0,0 +1,235 @@
+<template>
+<router-view />
+
+<q-dialog id="settings" v-model="toogleDialog" :maximized="$q.platform.is.mobile ? true : false">
+  <q-layout
+    view="Lhh lpR fff"
+    container
+    :class="$q.dark.isActive ? 'bg-dark' : 'bg-white'"
+    :style="$q.platform.is.mobile ? '' : 'max-height: 450px'"
+  >
+    <q-header class="d-header" elevated>
+      <q-toolbar class="q-pr-none">
+        <q-icon name="settings" style="font-size: 1.5rem" />
+        <q-toolbar-title>{{ $t('menu.settings') }}</q-toolbar-title>
+        <q-btn class="filled" v-close-popup text-color="white" icon="close" />
+      </q-toolbar>
+    </q-header>
+    <q-page-container>
+      <q-page>
+        <q-list>
+          <q-item>
+            <q-item-section>
+              <q-item-label header>{{ $t('settings.general._') }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item dense>
+            <q-item-section avatar>
+              <q-icon name="language" class="q-pl-sm" />
+            </q-item-section>
+            <q-item-section>
+              <q-select
+                v-model="settings.general.language.default" :options="settings.general.language.options"
+                stack-label dense outlined
+                emit-value map-options
+                :label="$t('settings.general.language._')"
+                options-selected-class="bg-primary text-white"
+                behavior="menu"
+                @update:model-value="setLanguage"
+              >
+                <template v-slot:option="scope">
+                  <q-item v-bind="scope.itemProps">
+                    <q-item-section avatar>
+                      <q-img no-spinner :src="scope.opt.image" width="24px" height="24px" />
+                    </q-item-section>
+                    <q-item-section>
+                      <q-item-label>{{ scope.opt.label }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </template>
+                <template v-slot:selected-item="scope">
+                  <q-item @remove="scope.removeAtIndex(scope.index)" :tabindex="scope.tabindex">
+                    <q-item-section avatar>
+                      <q-img no-spinner :src="scope.opt.image" width="24px" height="24px" />
+                    </q-item-section>
+                    <q-item-section>
+                      <q-item-label>{{ scope.opt.label }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </q-item-section>
+          </q-item>
+
+          <q-separator spaced />
+
+          <q-item>
+            <q-item-section>
+              <q-item-label header>{{ $t('settings.appearance._') }}</q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item dense>
+            <q-item-section avatar>
+              <q-icon name="format_color_fill" class="q-pl-sm" />
+            </q-item-section>
+            <q-item-section>
+              <q-select
+                v-model="settings.appearance.background.default" :options="settings.appearance.background.options"
+                stack-label dense outlined
+                emit-value map-options
+                :label="$t('settings.appearance.background._')"
+                behavior="menu"
+                options-selected-class="bg-primary text-white"
+                @update:model-value="setBackground"
+              >
+                <template v-slot:option="scope">
+                  <q-item v-bind="scope.itemProps">
+                    <q-item-section avatar>
+                      <q-icon :name="scope.opt.icon" />
+                    </q-item-section>
+                    <q-item-section class="text-weight-bold">
+                      <q-item-label>{{ scope.opt.label }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </template>
+                <template v-slot:selected-item="scope">
+                  <q-item @remove="scope.removeAtIndex(scope.index)" :tabindex="scope.tabindex">
+                    <q-item-section avatar>
+                      <q-icon :name="scope.opt.icon" />
+                    </q-item-section>
+                    <q-item-section>
+                      <q-item-label>{{ scope.opt.label }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-page>
+    </q-page-container>
+  </q-layout>
+</q-dialog>
+</template>
+
+<script setup>
+import { reactive, computed, onMounted } from 'vue'
+import { useQuasar } from 'quasar'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import docsectorConfig from 'docsector.config.js'
+
+defineOptions({ name: 'App' })
+
+const $q = useQuasar()
+const store = useStore()
+const { locale } = useI18n()
+const router = useRouter()
+
+const settings = reactive({
+  general: {
+    language: {
+      default: $q.localStorage.getItem('setting.language'),
+      options: docsectorConfig.languages || [
+        {
+          image: '/images/flags/united-states-of-america.png',
+          label: 'English (US)',
+          value: 'en-US'
+        },
+        {
+          image: '/images/flags/brazil.png',
+          label: 'Português (BR)',
+          value: 'pt-BR'
+        }
+      ]
+    }
+  },
+  appearance: {
+    background: {
+      default: $q.localStorage.getItem('setting.background'),
+      options: [
+        {
+          icon: 'light_mode',
+          label: 'Modo Claro',
+          value: false
+        },
+        {
+          icon: 'dark_mode',
+          label: 'Modo Escuro',
+          value: true
+        }
+      ]
+    }
+  }
+})
+
+const toogleDialog = computed({
+  get () {
+    return store.getters['settings/dialog']
+  },
+  set (value) {
+    store.commit('settings/dialog', value)
+  }
+})
+
+// Language
+function setLanguage (language) {
+  $q.localStorage.set('setting.language', language)
+
+  store.commit('page/resetAnchors')
+  store.commit('page/resetNodes')
+
+  locale.value = language
+
+  router.go()
+}
+
+// Background
+function setBackground (mode) {
+  $q.localStorage.set('setting.background', mode)
+  $q.dark.set(mode)
+}
+
+onMounted(() => {
+  const defaultLang = docsectorConfig.defaultLanguage || 'en-US'
+
+  // Language
+  let loc = $q.localStorage.getItem('setting.language')
+  if (loc === null) {
+    loc = defaultLang
+    $q.localStorage.set('setting.language', loc)
+    settings.general.language.default = loc
+  }
+  locale.value = loc
+
+  // Background
+  let dark = $q.localStorage.getItem('setting.background')
+  if (dark === null) {
+    dark = false
+    $q.localStorage.set('setting.background', dark)
+    settings.appearance.background.default = dark
+  }
+  $q.dark.set(dark)
+})
+</script>
+
+<style lang="sass">
+#settings
+  .q-select
+    .q-field__append, .q-field--dense .q-field__marginal
+      height: 63px !important
+    .q-item
+      padding: 8px 0
+      .q-item__section--side
+        padding-right: 12px
+      .q-item__section--avatar
+        min-width: 24px
+.q-menu
+  .q-item__section--side
+    padding-right: 12px
+  .q-item__section--avatar
+    min-width: 24px
+</style>

package/src/boot/QZoom.js

@@ -0,0 +1,7 @@
+import { boot } from 'quasar/wrappers'
+
+import QZoom from '../components/QZoom'
+
+export default boot(({ app }) => {
+  app.component('QZoom', QZoom)
+})

package/src/boot/axios.js

@@ -0,0 +1,11 @@
+import { boot } from 'quasar/wrappers'
+import axios from 'axios'
+
+const api = axios.create({ baseURL: 'https://api.example.com' })
+
+export default boot(({ app }) => {
+  app.config.globalProperties.$axios = axios
+  app.config.globalProperties.$api = api
+})
+
+export { api }

package/src/boot/i18n.js

@@ -0,0 +1,15 @@
+import { boot } from 'quasar/wrappers'
+import { createI18n } from 'vue-i18n'
+
+import messages from 'src/i18n'
+
+export default boot(({ app }) => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en-US',
+    messages
+  })
+
+  // Set i18n instance on app
+  app.use(i18n)
+})

package/src/boot/store.js

@@ -0,0 +1,26 @@
+import { boot } from 'quasar/wrappers'
+import { createStore } from 'vuex'
+
+import app from '../store/App'
+import i18n from '../store/I18n'
+import layout from '../store/Layout'
+import page from '../store/Page'
+import settings from '../store/Settings'
+
+const store = createStore({
+  modules: {
+    app,
+    i18n,
+    page,
+    layout,
+    settings
+  },
+
+  strict: process.env.DEBUGGING
+})
+
+export default boot(({ app: vueApp }) => {
+  vueApp.use(store)
+})
+
+export { store }

package/src/components/DH1.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { computed, onMounted, onUpdated } from 'vue'
+import { useStore } from 'vuex'
+import { useI18n } from "vue-i18n";
+
+import useNavigator from 'src/composables/useNavigator'
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true
+  }
+})
+
+const store = useStore()
+const { register, navigate } = useNavigator()
+const { t } = useI18n()
+
+const heading = computed(() => {
+  const base = store.state.i18n.base
+  const absolute = store.state.i18n.absolute
+
+  let h = ''
+  if (base && absolute) {
+    h = t(`_.${base}._`)
+  }
+
+  return h
+})
+
+onMounted(() => {
+  register(props.id)
+})
+
+onUpdated(() => {
+  register(props.id)
+})
+</script>
+
+<template>
+<h1 :id="id" @click="navigate(id)" v-html="heading"></h1>
+</template>

package/src/components/DH2.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { watch, onMounted, onUpdated } from 'vue'
+
+import useNavigator from 'src/composables/useNavigator'
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true
+  },
+  value: {
+    type: String,
+    required: true
+  }
+})
+
+const { register, index, navigate, selected } = useNavigator()
+
+watch(() => props.value, (val) => {
+  selected.value = val
+}, { immediate: true })
+
+onMounted(() => {
+  register(props.id)
+  index(props.id)
+})
+
+onUpdated(() => {
+  register(props.id)
+  index(props.id)
+})
+</script>
+
+<template>
+<h2 :id="id" @click="navigate(id)" v-html="value"></h2>
+</template>

package/src/components/DH3.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { watch, onMounted, onUpdated } from 'vue'
+
+import useNavigator from 'src/composables/useNavigator'
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true
+  },
+  value: {
+    type: String,
+    required: true
+  }
+})
+
+const { register, index, navigate, selected } = useNavigator()
+
+watch(() => props.value, (val) => {
+  selected.value = val
+}, { immediate: true })
+
+onMounted(() => {
+  register(props.id)
+  index(props.id, true)
+})
+
+onUpdated(() => {
+  register(props.id)
+  index(props.id, true)
+})
+</script>
+
+<template>
+<h3 :id="id" @click="navigate(id)" v-html="value"></h3>
+</template>

package/src/components/DH4.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { watch } from 'vue'
+
+import useNavigator from 'src/composables/useNavigator'
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true
+  },
+  value: {
+    type: String,
+    required: true
+  }
+})
+
+const { navigate, selected } = useNavigator()
+
+watch(() => props.value, (val) => {
+  selected.value = val
+}, { immediate: true })
+</script>
+
+<template>
+<h4 :id="id" @click="navigate(id)" v-html="value"></h4>
+</template>

package/src/components/DH5.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { watch } from 'vue'
+
+import useNavigator from 'src/composables/useNavigator'
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true
+  },
+  value: {
+    type: String,
+    required: true
+  }
+})
+
+const { navigate, selected } = useNavigator()
+
+watch(() => props.value, (val) => {
+  selected.value = val
+}, { immediate: true })
+</script>
+
+<template>
+<h5 :id="id" @click="navigate(id)" v-html="value"></h5>
+</template>

package/src/components/DH6.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { watch } from 'vue'
+
+import useNavigator from 'src/composables/useNavigator'
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true
+  },
+  value: {
+    type: String,
+    required: true
+  }
+})
+
+const { navigate, selected } = useNavigator()
+
+watch(() => props.value, (val) => {
+  selected.value = val
+}, { immediate: true })
+</script>
+
+<template>
+<h6 :id="id" @click="navigate(id)" v-html="value"></h6>
+</template>