@docsector/docsector-reader 0.1.0

package/src/css/quasar.variables.scss

@@ -0,0 +1,24 @@
+// Quasar SCSS (& Sass) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+$primary   : #69562B;
+$secondary : #000080;
+$accent    : #9C27B0;
+
+$dark      : #1D1D1D;
+
+$positive  : #21BA45;
+$negative  : #C10015;
+$info      : #31CCEC;
+$warning   : #F2C037;

package/src/i18n/index.js

@@ -0,0 +1,126 @@
+// @ Import language HJSON files (Vite-compatible eager import)
+const langModules = import.meta.glob('./languages/*.hjson', { eager: true })
+// @ Import markdown files (Vite-compatible eager import as raw strings)
+const mdModules = import.meta.glob('../pages/**/*.md', { eager: true, query: '?raw', import: 'default' })
+
+// @ Import pages
+import boot from 'pages/boot'
+import pages from 'pages'
+
+const langs = [
+  'en-US',
+  'pt-BR'
+]
+const i18n = {}
+
+function filter (source) {
+  const regex1 = /{/gm
+  const regex2 = /}/gm
+  const regex3 = /([@|])+/gm
+
+  source = source
+    .replace(regex1, '{')
+    .replace(regex2, '}')
+    .replace(regex3, "{'$&'}")
+
+  return source
+}
+
+function load (topPage, path, subpage, lang) {
+  const key = `../pages/${topPage}/${path}.${subpage}.${lang}.md`
+  const content = mdModules[key]
+
+  if (!content) {
+    console.warn(`[i18n] Missing markdown: ${key}`)
+    return ''
+  }
+
+  const source = filter(typeof content === 'string' ? content : String(content))
+
+  return source
+}
+
+// @ Iterate langs
+for (const lang of langs) {
+  // Load HJSON language file
+  const langKey = `./languages/${lang}.hjson`
+  i18n[lang] = langModules[langKey]?.default || langModules[langKey] || {}
+
+  // @ Iterate pages
+  for (const [key, page] of Object.entries(pages)) {
+    const path = key.slice(1)
+
+    const config = page.config
+    const data = page.data
+    const meta = page.meta || boot.meta
+
+    const topPage = config?.type ?? 'manual'
+
+    // ---
+
+    const _ = path.split('/').reduce((accumulator, current) => {
+      let node = accumulator[current]
+
+      // Set object if not exists
+      if (node === undefined) {
+        accumulator[current] = {}
+        node = accumulator[current]
+      }
+
+      // @ Set metadata
+      // title
+      if (node._ === undefined) {
+        node._ = data[lang]?.title || data['*']?.title
+      }
+
+      if (config === null) {
+        return node
+      }
+
+      // Set subpages sources if not exists
+      if (node.overview === undefined) {
+        node.overview = {
+          _translations: meta[lang]?.overview?._translations,
+          _sections: meta[lang]?.overview?._sections,
+          source: ''
+        }
+      }
+      if (config.subpages?.showcase && node.showcase === undefined) {
+        node.showcase = {
+          _translations: meta[lang]?.showcase?._translations,
+          _sections: meta[lang]?.showcase?._sections,
+          source: ''
+        }
+      }
+      if (config.subpages?.vs && node.vs === undefined) {
+        node.vs = {
+          _translations: meta[lang]?.vs?._translations,
+          _sections: meta[lang]?.vs?._sections,
+          source: ''
+        }
+      }
+
+      return node
+    }, i18n[lang]._[topPage])
+
+    // ---
+
+    if (config === null || config.status === 'empty') {
+      continue
+    }
+
+    // @ Subpages
+    // Overview
+    _.overview.source = load(topPage, path, 'overview', lang)
+    // showcase
+    if (config.subpages?.showcase === true) {
+      _.showcase.source = load(topPage, path, 'showcase', lang)
+    }
+    // Vs
+    if (config.subpages?.vs === true) {
+      _.vs.source = load(topPage, path, 'vs', lang)
+    }
+  }
+}
+
+export default i18n

package/src/i18n/languages/en-US.hjson

@@ -0,0 +1,98 @@
+{
+  // @ Pages
+  _: {
+    home: {
+      texts: [
+        'The official documentation of ',
+        'Developed by ',
+        'Documentation under construction...'
+      ]
+    },
+
+    API: {}
+    guide: {}
+    manual: {}
+  },
+
+  // @ Page
+  page: {
+    edit: {
+      github: {
+        start: 'Start this page',
+        complete: 'Complete this page',
+        edit: 'Edit this page'
+      },
+      progress: 'Translation Progress',
+      translations: 'Available translations',
+      anchor: 'Anchor navigation',
+      of: 'of'
+    },
+    nav: {
+      prev: 'Previous page',
+      next: 'Next page'
+    }
+  },
+
+  menu: {
+    search: 'Search',
+
+    home: 'Home',
+    changelog: 'Changelog',
+    roadmap: 'Roadmap',
+    sponsor: 'Sponsor',
+    explore: 'Explore GitHub Repositories',
+
+    status: {
+      empty: {
+        _: 'empty',
+        tooltip: 'This page is empty!'
+      },
+      draft: {
+        _: 'draft',
+        tooltip: 'This page is under constrution.'
+      }
+    },
+
+    settings: 'Settings',
+
+    _404: '404 Error - Not Found'
+  },
+  submenu: {
+    guides: 'Guides',
+    manuals: 'Manuals',
+    references: 'References',
+
+    overview: 'Overview',
+    showcase: 'Showcase',
+    versus: 'Vs',
+
+    changelog: 'Changelog'
+  },
+
+  // @
+  system: {
+    documentation: 'Documentation',
+    support: 'Sponsor this project',
+    backToTop: 'Back to top'
+  },
+  changelog: {},
+  settings: {
+    general: {
+      _: 'General Settings',
+      language: {
+        _: 'Language'
+      }
+    },
+    appearance: {
+      _: 'Appearance',
+      background: {
+        _: 'Background Color'
+      }
+    }
+  },
+
+  _a: ' and ',
+  _o: ' or ',
+  _f: ' files ',
+  _s: 'Source Code'
+}

package/src/i18n/languages/pt-BR.hjson

@@ -0,0 +1,97 @@
+{
+  // @ Pages
+  _: {
+    home: {
+      texts: [
+        'Documentação oficial do ',
+        'Desenvolvido por ',
+        'Documentação em construção...'
+      ]
+    },
+
+    API: {}
+    guide: {}
+    manual: {}
+  },
+
+  page: {
+    edit: {
+      github: {
+        start: 'Comece esta página',
+        complete: 'Complete esta página',
+        edit: 'Edite esta página'
+      },
+      progress: 'Progresso da tradução',
+      translations: 'Traduções disponíveis',
+      anchor: 'Navegação por âncoras',
+      of: 'de'
+    },
+    nav: {
+      prev: 'Página anterior',
+      next: 'Próxima página'
+    }
+  },
+
+  menu: {
+    search: 'Pesquisar',
+
+    home: 'Página inicial',
+    changelog: 'Changelog',
+    roadmap: 'Roadmap',
+    sponsor: 'Patrocine',
+    explore: 'Explore repositórios no GitHub',
+
+    status: {
+      empty: {
+        _: 'vazia',
+        tooltip: 'Esta página está vazia!'
+      },
+      draft: {
+        _: 'rascunho',
+        tooltip: 'Esta página está em construção.'
+      }
+    },
+
+    settings: 'Configurações',
+
+    _404: 'Erro 404 - Não encontrado'
+  },
+  submenu: {
+    guides: 'Guias',
+    manuals: 'Manuais',
+    references: 'Referências',
+
+    overview: 'Apresentação',
+    showcase: 'Demonstração',
+    versus: 'Vs',
+
+    changelog: 'Changelog'
+  },
+
+  // @
+  system: {
+    documentation: 'Documentação',
+    support: 'Patrocine este projeto',
+    backToTop: 'Voltar para o topo'
+  },
+  changelog: {},
+  settings: {
+    general: {
+      _: 'Configurações gerais',
+      language: {
+        _: 'Idioma'
+      }
+    },
+    appearance: {
+      _: 'Aparência',
+      background: {
+        _: 'Cor de fundo'
+      }
+    }
+  },
+
+  _a: ' e ',
+  _o: ' ou ',
+  _f: ' arquivos ',
+  _s: 'Código Fonte'
+}

package/src/i18n/tags.hjson

@@ -0,0 +1,44 @@
+{
+  "en-US": {
+    "/guide/getting-started": "install setup start begin quick project structure",
+    "/guide/configuration": "config branding logo name version language links github docsector.config.js",
+    "/guide/pages-and-routing": "pages routes routing registry menu navigation path type status subpages",
+    "/guide/i18n-and-markdown": "i18n internationalization language locale hjson markdown content translation",
+    "/guide/theming": "theme dark light mode color css sass variables styling",
+    "/guide/deployment": "deploy hosting production build static nginx netlify vercel github pages",
+    "/guide/plugins": "plugins extensions addons customize",
+    "/manual/components/d-page": "page container scroll toolbar drawer layout subpage tabs",
+    "/manual/components/d-subpage": "subpage wrapper composition dh1 section hash",
+    "/manual/components/d-page-section": "section markdown renderer tokenizer parser heading paragraph list table code",
+    "/manual/components/d-headings": "h1 h2 h3 h4 h5 h6 heading title anchor navigation toc",
+    "/manual/components/d-page-source-code": "code syntax highlight prism php bash html copy clipboard line numbers",
+    "/manual/components/d-page-blockquote": "blockquote important warning note quote",
+    "/manual/components/d-menu": "menu sidebar navigation search branding links tree expansion",
+    "/manual/components/d-page-anchor": "anchor toc table contents tree drawer navigation scroll",
+    "/manual/components/d-page-meta": "meta footer edit github translation progress prev next navigation",
+    "/manual/components/q-zoom": "zoom overlay fullscreen scale mouse wheel escape",
+    "/manual/composables/use-navigator": "navigator composable anchor scroll register navigate toc",
+    "/manual/store/modules": "vuex store state mutations getters actions app i18n page layout settings"
+  },
+  "pt-BR": {
+    "/guide/getting-started": "instalar configurar iniciar começar rápido projeto estrutura",
+    "/guide/configuration": "config branding logo nome versão idioma links github docsector.config.js",
+    "/guide/pages-and-routing": "páginas rotas roteamento registro menu navegação caminho tipo status subpages",
+    "/guide/i18n-and-markdown": "i18n internacionalização idioma locale hjson markdown conteúdo tradução",
+    "/guide/theming": "tema escuro claro modo cor css sass variáveis estilização",
+    "/guide/deployment": "deploy hospedagem produção build estático nginx netlify vercel github pages",
+    "/guide/plugins": "plugins extensões complementos customizar",
+    "/manual/components/d-page": "página container scroll toolbar drawer layout subpágina abas",
+    "/manual/components/d-subpage": "subpágina wrapper composição dh1 seção hash",
+    "/manual/components/d-page-section": "seção markdown renderizador tokenizador parser título parágrafo lista tabela código",
+    "/manual/components/d-headings": "h1 h2 h3 h4 h5 h6 título heading âncora navegação toc",
+    "/manual/components/d-page-source-code": "código sintaxe highlight prism php bash html copiar clipboard números linha",
+    "/manual/components/d-page-blockquote": "blockquote importante aviso nota citação",
+    "/manual/components/d-menu": "menu lateral navegação busca branding links árvore expansão",
+    "/manual/components/d-page-anchor": "âncora toc índice conteúdo árvore drawer navegação scroll",
+    "/manual/components/d-page-meta": "meta rodapé editar github tradução progresso anterior próximo navegação",
+    "/manual/components/q-zoom": "zoom overlay tela cheia escala roda mouse escape",
+    "/manual/composables/use-navigator": "navegador composable âncora scroll registro navegar toc",
+    "/manual/store/modules": "vuex store estado mutations getters actions app i18n page layout settings"
+  }
+}

package/src/index.js

@@ -0,0 +1,99 @@
+/**
+ * Docsector Reader — Main Entry Point
+ *
+ * This module exports the core configuration and utilities
+ * needed to use Docsector Reader as an NPM package.
+ *
+ * Usage:
+ *   import { createDocsector } from '@docsector/docsector-reader'
+ *
+ *   const docsector = createDocsector({
+ *     branding: { name: 'My Project', version: 'v1.0.0', logo: '/images/logo.png' },
+ *     links: { github: 'https://github.com/org/repo' },
+ *     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' }
+ *     ],
+ *     defaultLanguage: 'en-US'
+ *   })
+ */
+
+/**
+ * Create a Docsector Reader configuration object.
+ *
+ * @param {Object} config - User configuration
+ * @param {Object} config.branding - Branding settings
+ * @param {string} config.branding.logo - Logo image path (relative to public/)
+ * @param {string} config.branding.name - Project name displayed in sidebar
+ * @param {string} config.branding.version - Version label
+ * @param {string[]} [config.branding.versions] - Available versions for dropdown
+ * @param {Object} config.links - External links
+ * @param {string} [config.links.github] - GitHub repository URL
+ * @param {string} [config.links.discussions] - GitHub discussions URL
+ * @param {string} [config.links.chat] - Chat/Discord invite URL
+ * @param {string} [config.links.email] - Contact email
+ * @param {string} [config.links.changelog] - Changelog path or URL
+ * @param {string} [config.links.roadmap] - Roadmap URL
+ * @param {string} [config.links.sponsor] - Sponsor URL
+ * @param {Array} [config.links.explore] - Related links array [{label, url}]
+ * @param {Object} config.github - GitHub integration settings
+ * @param {string} config.github.editBaseUrl - Base URL for "Edit on GitHub" links
+ * @param {Array} config.languages - Available languages [{image, label, value}]
+ * @param {string} [config.defaultLanguage='en-US'] - Default language code
+ * @returns {Object} Resolved Docsector configuration
+ */
+export function createDocsector (config = {}) {
+  return {
+    branding: {
+      logo: '/images/logo.png',
+      name: 'My Project',
+      version: 'v0.0.1',
+      versions: ['v0.0.1'],
+      ...config.branding
+    },
+
+    links: {
+      github: null,
+      discussions: null,
+      chat: null,
+      email: null,
+      changelog: '/changelog',
+      roadmap: null,
+      sponsor: null,
+      explore: null,
+      ...config.links
+    },
+
+    github: {
+      editBaseUrl: '',
+      ...config.github
+    },
+
+    languages: config.languages || [
+      {
+        image: '/images/flags/united-states-of-america.png',
+        label: 'English (US)',
+        value: 'en-US'
+      }
+    ],
+
+    defaultLanguage: config.defaultLanguage || 'en-US'
+  }
+}
+
+/**
+ * Define a Docsector page entry for the pages registry.
+ *
+ * @param {Object} options - Page options
+ * @param {Object} options.config - Page configuration (icon, status, type, menu, subpages)
+ * @param {Object} options.data - Per-language titles { 'en-US': { title: '...' } }
+ * @returns {Object} Page definition
+ */
+export function definePage (options) {
+  return {
+    config: options.config || null,
+    data: options.data || {}
+  }
+}
+
+export default { createDocsector, definePage }

package/src/layouts/DefaultLayout.vue

@@ -0,0 +1,95 @@
+<template>
+<q-layout view="lHh LpR lFf">
+  <q-header class="d-header left-btn" elevated>
+    <q-toolbar color="primary">
+      <q-btn class="filled" square icon="menu" aria-label="Toggle Menu" @click="toogleMenu" />
+      <q-toolbar-title class="text-center">
+        <img
+          v-if="branding.logo"
+          :src="branding.logo"
+          :alt="branding.name"
+          height="26"
+          style="vertical-align: middle;"
+          class="q-mr-sm"
+        />
+        <q-icon class="q-mb-xs q-mr-sm" :name="headerTitleIcon" />
+        {{ headerTitleText }}
+      </q-toolbar-title>
+      <q-btn class="filled" square icon="settings" aria-label="Configuration" @click="openSettingsDialog" />
+    </q-toolbar>
+  </q-header>
+
+  <q-drawer elevated show-if-above side="left" v-model="layout.menu">
+    <d-menu />
+  </q-drawer>
+
+  <router-view />
+</q-layout>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+
+import DMenu from 'components/DMenu.vue'
+import docsectorConfig from 'docsector.config.js'
+
+defineOptions({ name: 'LayoutDefault' })
+
+const branding = docsectorConfig.branding || {}
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+const { t } = useI18n()
+
+const layout = ref({
+  menu: false
+})
+
+const headerTitleIcon = computed(() => {
+  return route.matched[0].meta.icon ?? route.meta.icon
+})
+
+const headerTitleText = computed(() => {
+  if (store.state.i18n.base) {
+    return t(`_.${store.state.i18n.base}._`)
+  } else {
+    return t(`menu.${route.matched[1].meta.menu}`)
+  }
+})
+
+function toogleMenu () {
+  layout.value.menu = !layout.value.menu
+}
+
+function openSettingsDialog () {
+  store.commit('settings/dialog', true)
+}
+
+// --- created logic (runs at setup time) ---
+store.dispatch('app/configureLanguage', route.matched)
+
+router.afterEach((to, from) => {
+  if (!to.hash || (from.path !== to.path)) {
+    store.dispatch('app/configureLanguage', to.matched)
+  }
+})
+
+store.commit('page/resetAnchors')
+</script>
+
+<style lang="sass">
+// Header
+.d-header
+  &.left-btn
+    .q-toolbar
+      padding: 0
+  .q-btn
+    border-radius: 0
+  .q-btn:before
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.14), 0 0 1px -2px rgba(0, 0, 0, 0.12)
+    border-radius: 0
+</style>

package/src/layouts/SystemLayout.vue

@@ -0,0 +1,4 @@
+<template lang="pug">
+q-layout(view="lHh lpR lFr")
+  router-view
+</template>

package/src/pages/@/404Page.vue

@@ -0,0 +1,15 @@
+<template>
+<q-page-container>
+  <q-page class="row" padding>
+    <q-scroll-area class="content col text-center">
+      <p>
+        <img src="sad.svg" style="width:30vw;max-width:150px;" />
+      </p>
+      <p class="text-faded">Sorry, nothing here...
+        <strong>(404)</strong>
+      </p>
+      <q-btn color="secondary" style="width:200px;" @click="$router.go(-1)">Go back</q-btn>
+    </q-scroll-area>
+  </q-page>
+</q-page-container>
+</template>