@docsector/docsector-reader 0.1.3 → 0.2.1

package/src/components/DH6.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { watch } from 'vue'
 
-import useNavigator from 'src/composables/useNavigator'
+import useNavigator from '../composables/useNavigator'
 
 const props = defineProps({
   id: {

package/src/components/DMenu.vue

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useQuasar, scroll, openURL } from 'quasar'
 import { useI18n } from 'vue-i18n'
 
-import tags from 'src/i18n/tags.hjson'
+import tags from '@docsector/tags'
 import DMenuItem from './DMenuItem.vue'
 import docsectorConfig from 'docsector.config.js'
 
@@ -35,8 +35,8 @@ const searchTerm = (term) => {
     const locale = $q.localStorage.getItem('setting.language')
     founds.value = []
 
-    for (const [index, items] of items.value.entries()) {
-      searchTermIterate(items, term, locale)
+    for (const [index, group] of items.value.entries()) {
+      searchTermIterate(group, term, locale)
     }
   } else {
     founds.value = false
@@ -54,7 +54,7 @@ const searchTermIterate = (items, term, locale) => {
     founds.value[path] = false
 
     // @ search in i18n/tags.hjson
-    if (tags[locale] && tags[locale].length > 0) {
+    if (tags[locale] && Object.keys(tags[locale]).length > 0) {
       founds.value[path] = tags[locale][path]?.indexOf(term) !== -1
       if (founds.value[path] === false && locale !== 'en-US') {
         founds.value[path] = tags['en-US'][path]?.indexOf(term) !== -1

package/src/components/DPage.vue

@@ -4,10 +4,10 @@ import { useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
 
-import useNavigator from 'src/composables/useNavigator'
+import useNavigator from '../composables/useNavigator'
 
-import DPageAnchor from 'components/DPageAnchor.vue'
-import DPageMeta from 'components/DPageMeta.vue'
+import DPageAnchor from './DPageAnchor.vue'
+import DPageMeta from './DPageMeta.vue'
 
 const store = useStore()
 const router = useRouter()

package/src/components/DPageAnchor.vue

@@ -4,7 +4,7 @@ import { useStore } from 'vuex'
 import { useQuasar } from 'quasar'
 import { useRoute } from "vue-router";
 
-import useNavigator from 'src/composables/useNavigator'
+import useNavigator from '../composables/useNavigator'
 
 const store = useStore()
 const $q = useQuasar()

package/src/components/QZoom.js

@@ -15,7 +15,7 @@ import { useColorize } from 'q-colorize-mixin'
 import { dom } from 'quasar'
 const { offset } = dom
 
-import './QZoom.styl'
+import './QZoom.sass'
 
 // @
 export default {

package/src/components/QZoom.sass

@@ -0,0 +1,43 @@
+$box-shadow: 1px 1px 7px 1px rgba(0,0,0,.2) !default
+
+.q-zoom
+  position: relative
+  padding: 0
+  margin: 0
+
+  &__zoom-in
+    cursor: zoom-in
+
+  &__zoom-out
+    cursor: zoom-out
+
+  &__overlay
+    position: fixed
+    transition: all .5s linear
+    left: 0
+    top: 0
+    width: 100%
+    height: 100%
+    background-color: transparent
+    padding: 0
+    margin: 0
+    z-index: 6000
+
+  &__content
+    position: relative
+    display: block
+    transition: all .5s cubic-bezier(.2,0,.2,1)
+    text-align: center
+    vertical-align: middle
+    width: 100%
+    height: 0
+    max-width: 100%
+    max-height: 100%
+    overflow: hidden
+
+  &__no-center
+    text-align: unset
+    vertical-align: unset
+
+  &__no-scroll
+    overflow: hidden

package/src/i18n/helpers.js

@@ -0,0 +1,160 @@
+/**
+ * Docsector Reader — i18n Message Builder
+ *
+ * Extracts the markdown-to-i18n processing logic so consumer projects
+ * can call it with their own import.meta.glob results.
+ *
+ * Usage in consumer's src/i18n/index.js:
+ *
+ *   import { buildMessages } from '@docsector/docsector-reader/i18n'
+ *   import boot from 'pages/boot'
+ *   import pages from 'pages'
+ *
+ *   const langModules = import.meta.glob('./languages/*.hjson', { eager: true })
+ *   const mdModules = import.meta.glob('../pages/⁣**​/⁣*.md', { eager: true, query: '?raw', import: 'default' })
+ *
+ *   export default buildMessages({ langModules, mdModules, pages, boot })
+ */
+
+/**
+ * Escape characters that conflict with vue-i18n message syntax.
+ *
+ * @param {string} source - Raw markdown string
+ * @returns {string} Escaped string safe for vue-i18n
+ */
+export function filter (source) {
+  const regex1 = /{/gm
+  const regex2 = /}/gm
+  const regex3 = /([@|])+/gm
+
+  source = source
+    .replace(regex1, '{')
+    .replace(regex2, '}')
+    .replace(regex3, "{'$&'}")
+
+  return source
+}
+
+/**
+ * Build complete i18n messages from HJSON locale files and Markdown page content.
+ *
+ * @param {Object} options
+ * @param {Object} options.langModules - Result of import.meta.glob('./languages/*.hjson', { eager: true })
+ * @param {Object} options.mdModules - Result of import.meta.glob('../pages/**​/*.md', { eager: true, query: '?raw', import: 'default' })
+ * @param {Object} options.pages - Page registry from pages/index.js
+ * @param {Object} options.boot - Boot meta from pages/boot.js
+ * @param {string[]} [options.langs] - Language codes to process (auto-detected from langModules if omitted)
+ * @returns {Object} Complete i18n messages object keyed by locale
+ */
+export function buildMessages ({ langModules, mdModules, pages, boot, langs }) {
+  // Auto-detect languages from HJSON files if not provided
+  if (!langs) {
+    langs = Object.keys(langModules).map(key => {
+      // key is like './languages/en-US.hjson' — extract 'en-US'
+      const match = key.match(/\/([^/]+)\.hjson$/)
+      return match ? match[1] : null
+    }).filter(Boolean)
+  }
+
+  const i18n = {}
+
+  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)
+      }
+    }
+  }
+
+  return i18n
+}
+
+export default buildMessages

package/src/i18n/index.js

@@ -1,3 +1,6 @@
+// @ Import i18n message builder
+import { buildMessages } from './helpers'
+
 // @ 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)
@@ -7,120 +10,4 @@ const mdModules = import.meta.glob('../pages/**/*.md', { eager: true, query: '?r
 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
+export default buildMessages({ langModules, mdModules, pages, boot })

package/src/layouts/DefaultLayout.vue

@@ -33,7 +33,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 
-import DMenu from 'components/DMenu.vue'
+import DMenu from '../components/DMenu.vue'
 import docsectorConfig from 'docsector.config.js'
 
 defineOptions({ name: 'LayoutDefault' })

package/src/pages/guide/getting-started.overview.en-US.md

@@ -10,50 +10,68 @@ Docsector Reader is a **documentation rendering engine** built with Vue 3, Quasa
 
 ## Installation
 
+Scaffold a new documentation project with the CLI:
+
 ```bash
-npx degit docsector/docsector-reader my-docs
+npx @docsector/docsector-reader init my-docs
 cd my-docs
 npm install
 ```
 
+This creates a ready-to-use project with all necessary configuration files, a sample page registry, and i18n setup.
+
 ## Development Server
 
 Start the dev server with hot-reload:
 
 ```bash
-npx quasar dev
+npx docsector dev
 ```
 
 The documentation site will be available at **http://localhost:8181**.
 
+You can also specify a custom port:
+
+```bash
+npx docsector dev --port 3000
+```
+
 ## Production Build
 
 Build an optimized SPA for deployment:
 
 ```bash
-npx quasar build
+npx docsector build
 ```
 
 The output is placed in `dist/spa/` — ready to deploy to any static hosting.
 
+To preview the production build locally:
+
+```bash
+npx docsector serve
+```
+
 ## Project Structure
 
-The project follows a standard Quasar v2 layout with documentation-specific conventions:
+After `init`, your project will have this structure:
 
-- `docsector.config.js` — Branding, links, languages
+- `docsector.config.js` — Branding, links, languages, GitHub config
+- `quasar.config.js` — Thin wrapper using `createQuasarConfig()` from the package
+- `index.html` — HTML entry point with title and meta tags
 - `src/pages/index.js` — Page registry (routes and metadata)
 - `src/pages/guide/` — Guide-type pages (Markdown files)
 - `src/pages/manual/` — Manual-type pages (Markdown files)
-- `src/components/` — Docsector Vue components
-- `src/composables/` — Vue composables (useNavigator)
-- `src/store/` — Vuex 4 modules
-- `src/i18n/` — Language files (.hjson) and loader
-- `src/layouts/` — DefaultLayout and SystemLayout
-- `src/boot/` — Boot files (store, i18n, QZoom, axios)
+- `src/i18n/index.js` — i18n loader using `buildMessages()` from the package
+- `src/i18n/tags.hjson` — Search keywords per route and locale
+- `public/` — Static assets (logo, favicon, images)
+
+The rendering engine (components, layouts, router, store, composables) lives inside the `@docsector/docsector-reader` package — you only maintain your content and configuration.
 
 ## Next Steps
 
 - Configure your project branding in **docsector.config.js**
 - Define your pages in **src/pages/index.js**
 - Write your documentation in **Markdown**
+- Add search keywords in **src/i18n/tags.hjson**
 - Customize themes and appearance

package/src/pages/guide/getting-started.overview.pt-BR.md

@@ -10,50 +10,68 @@ Docsector Reader é um **motor de renderização de documentação** construído
 
 ## Instalação
 
+Crie um novo projeto de documentação com o CLI:
+
 ```bash
-npx degit docsector/docsector-reader my-docs
+npx @docsector/docsector-reader init my-docs
 cd my-docs
 npm install
 ```
 
+Isso cria um projeto pronto para uso com todos os arquivos de configuração, um registro de páginas de exemplo e setup de i18n.
+
 ## Servidor de Desenvolvimento
 
 Inicie o servidor dev com hot-reload:
 
 ```bash
-npx quasar dev
+npx docsector dev
 ```
 
 O site de documentação estará disponível em **http://localhost:8181**.
 
+Você também pode especificar uma porta personalizada:
+
+```bash
+npx docsector dev --port 3000
+```
+
 ## Build de Produção
 
 Gere um SPA otimizado para deploy:
 
 ```bash
-npx quasar build
+npx docsector build
 ```
 
 O output fica em `dist/spa/` — pronto para deploy em qualquer hosting estático.
 
+Para visualizar a build de produção localmente:
+
+```bash
+npx docsector serve
+```
+
 ## Estrutura do Projeto
 
-O projeto segue o layout padrão do Quasar v2 com convenções específicas para documentação:
+Após o `init`, seu projeto terá esta estrutura:
 
-- `docsector.config.js` — Branding, links, idiomas
+- `docsector.config.js` — Branding, links, idiomas, config do GitHub
+- `quasar.config.js` — Wrapper fino usando `createQuasarConfig()` do pacote
+- `index.html` — Ponto de entrada HTML com título e meta tags
 - `src/pages/index.js` — Registro de páginas (rotas e metadata)
 - `src/pages/guide/` — Páginas tipo guia (arquivos Markdown)
 - `src/pages/manual/` — Páginas tipo manual (arquivos Markdown)
-- `src/components/` — Componentes Vue do Docsector
-- `src/composables/` — Composables Vue (useNavigator)
-- `src/store/` — Módulos Vuex 4
-- `src/i18n/` — Arquivos de idioma (.hjson) e loader
-- `src/layouts/` — DefaultLayout e SystemLayout
-- `src/boot/` — Boot files (store, i18n, QZoom, axios)
+- `src/i18n/index.js` — Loader i18n usando `buildMessages()` do pacote
+- `src/i18n/tags.hjson` — Palavras-chave de busca por rota e idioma
+- `public/` — Assets estáticos (logo, favicon, imagens)
+
+O motor de renderização (componentes, layouts, router, store, composables) fica dentro do pacote `@docsector/docsector-reader` — você só mantém seu conteúdo e configuração.
 
 ## Próximos Passos
 
 - Configure o branding do seu projeto em **docsector.config.js**
 - Defina suas páginas em **src/pages/index.js**
 - Escreva sua documentação em **Markdown**
+- Adicione palavras-chave de busca em **src/i18n/tags.hjson**
 - Personalize temas e aparência