@docsector/docsector-reader 0.7.2 → 0.8.0

package/README.md

@@ -18,13 +18,20 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 
 ---
 
+## 🤖 AI-Friendly Features
+
+- 📋 **Copy Page** — One-click button copies the current page as raw Markdown, ready to paste into LLMs
+- 📄 **View as Markdown** — Open any page as plain text by appending `.md` to the URL, with locale support (`?lang=`)
+- 🤖 **Open in ChatGPT / Claude** — One-click links to open the current page directly in ChatGPT or Claude for Q&A
+- 🤖 **LLM Bot Detection** — Automatically serves raw Markdown to known AI crawlers (GPTBot, ClaudeBot, PerplexityBot, GrokBot, and others)
+
+---
+
 ## ✨ Features
 
 - 📝 **Markdown Rendering** — Write docs in Markdown, rendered with syntax highlighting (Prism.js)
 - 🧩 **Mermaid Diagrams** — Native support for fenced ` ```mermaid ` blocks, with automatic dark/light theme switching
 - 🚨 **GitHub-Style Alerts** — Native support for `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, and `[!CAUTION]`
-- 🤖 **AI-Friendly** — "Copy page" button copies raw Markdown for LLMs; "View as Markdown" opens any page as plain text via `.md` URL suffix
-- 📅 **Last Updated Date** — Automatic per-page "last updated" date from git commit history, locale-formatted
 - 🌍 **Internationalization (i18n)** — Multi-language support with HJSON locale files and per-page translations
 - 🌗 **Dark/Light Mode** — Automatic theme switching with Quasar Dark Plugin
 - 🔗 **Anchor Navigation** — Right-side Table of Contents tree with scroll tracking
@@ -32,6 +39,7 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 - 📱 **Responsive** — Mobile-friendly with collapsible sidebar and drawers
 - 🏷️ **Status Badges** — Mark pages as `done`, `draft`, or `empty` with visual indicators
 - ✏️ **Edit on GitHub** — Direct links to edit pages on your repository
+- 📅 **Last Updated Date** — Automatic per-page "last updated" date from git commit history, locale-formatted
 - 📊 **Translation Progress** — Automatic translation percentage based on header coverage
 - ⚙️ **Single Config File** — Customize branding, links, and languages via `docsector.config.js`
 

package/bin/docsector.js

@@ -23,7 +23,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '0.7.2'
+const VERSION = '0.8.0'
 
 const HELP = `
   Docsector Reader v${VERSION}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "A documentation rendering engine built with Vue 3, Quasar v2 and Vite. Transform Markdown into beautiful, navigable documentation sites.",
   "productName": "Docsector Reader",
   "author": "Rodrigo de Araujo Vieira",

package/src/components/DPageBar.vue

@@ -3,7 +3,7 @@ import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
-import { copyToClipboard, openURL } from 'quasar'
+import { copyToClipboard } from 'quasar'
 
 import gitDates from 'virtual:docsector-git-dates'
 
@@ -13,6 +13,9 @@ const { t, locale } = useI18n()
 
 const copied = ref(false)
 
+const openaiIcon = `img:data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23888" d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg>')}`
+const claudeIcon = `img:data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" fill="%23888" fill-rule="evenodd" viewBox="0 0 24 24"><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/></svg>')}`
+
 const subpage = computed(() => {
   const rel = store.state.page.relative
   return rel ? rel.replace(/^\//, '') : 'overview'
@@ -56,6 +59,19 @@ const markdownURL = computed(() => {
   return `${route.path}.md`
 })
 
+const fullMarkdownURL = computed(() => {
+  return `${window.location.origin}${route.path}.md`
+})
+
+const chatgptURL = computed(() => {
+  const prompt = `Read ${fullMarkdownURL.value} and answer questions about the content.`
+  return `https://chat.openai.com/?q=${encodeURIComponent(prompt)}`
+})
+const claudeURL = computed(() => {
+  const prompt = `Read ${fullMarkdownURL.value} and answer questions about the content.`
+  return `https://claude.ai/new?q=${encodeURIComponent(prompt)}`
+})
+
 const copyPage = () => {
   if (!rawMarkdown.value) return
 
@@ -64,16 +80,12 @@ const copyPage = () => {
     setTimeout(() => { copied.value = false }, 2000)
   })
 }
-
-const viewAsMarkdown = () => {
-  openURL(markdownURL.value)
-}
 </script>
 
 <template>
 <div class="d-page-bar">
   <span v-if="formattedDate" class="d-page-bar__date">
-    {{ t('page.lastUpdated') }}: {{ formattedDate }}
+    {{ t('page.lastUpdated') }}: <br class="d-page-bar__date-break"> {{ formattedDate }}
   </span>
   <span v-else class="d-page-bar__date"></span>
 
@@ -98,7 +110,7 @@ const viewAsMarkdown = () => {
         </q-item-section>
       </q-item>
 
-      <q-item clickable v-close-popup @click="viewAsMarkdown" class="q-py-sm">
+      <q-item clickable v-close-popup :href="markdownURL" target="_blank" class="q-py-sm">
         <q-item-section avatar>
           <q-icon name="description" />
         </q-item-section>
@@ -110,6 +122,34 @@ const viewAsMarkdown = () => {
           <q-icon name="open_in_new" size="xs" />
         </q-item-section>
       </q-item>
+
+      <q-separator />
+
+      <q-item clickable v-close-popup :href="chatgptURL" target="_blank" class="q-py-sm">
+        <q-item-section avatar>
+          <q-icon :name="openaiIcon" size="xs" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>{{ t('page.openInChatGPT') }}</q-item-label>
+          <q-item-label caption>{{ t('page.openInChatGPTCaption') }}</q-item-label>
+        </q-item-section>
+        <q-item-section side>
+          <q-icon name="open_in_new" size="xs" />
+        </q-item-section>
+      </q-item>
+
+      <q-item clickable v-close-popup :href="claudeURL" target="_blank" class="q-py-sm">
+        <q-item-section avatar>
+          <q-icon :name="claudeIcon" size="xs" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>{{ t('page.openInClaude') }}</q-item-label>
+          <q-item-label caption>{{ t('page.openInClaudeCaption') }}</q-item-label>
+        </q-item-section>
+        <q-item-section side>
+          <q-icon name="open_in_new" size="xs" />
+        </q-item-section>
+      </q-item>
     </q-list>
   </q-btn-dropdown>
 </div>
@@ -126,10 +166,17 @@ const viewAsMarkdown = () => {
     font-size: 0.8rem
     opacity: 0.6
 
+  &__date-break
+    display: none
+
   &__actions
     font-size: 0.75rem
 
 body.body--dark
   .d-page-bar__date
     color: rgba(255, 255, 255, 0.7)
+
+@media (max-width: 376px)
+  .d-page-bar__date-break
+    display: block
 </style>

package/src/i18n/helpers.js

@@ -29,7 +29,11 @@ const engineDefaults = {
       copyPageCaption: 'Copy page as Markdown for LLMs',
       copied: 'Copied!',
       viewAsMarkdown: 'View as Markdown',
-      viewAsMarkdownCaption: 'View this page as plain text'
+      viewAsMarkdownCaption: 'View this page as plain text',
+      openInChatGPT: 'Open in ChatGPT',
+      openInChatGPTCaption: 'Ask ChatGPT about this page',
+      openInClaude: 'Open in Claude',
+      openInClaudeCaption: 'Ask Claude about this page'
     }
   },
   'pt-BR': {
@@ -39,7 +43,11 @@ const engineDefaults = {
       copyPageCaption: 'Copiar página como Markdown para LLMs',
       copied: 'Copiado!',
       viewAsMarkdown: 'Ver como Markdown',
-      viewAsMarkdownCaption: 'Ver esta página como texto simples'
+      viewAsMarkdownCaption: 'Ver esta página como texto simples',
+      openInChatGPT: 'Abrir no ChatGPT',
+      openInChatGPTCaption: 'Pergunte ao ChatGPT sobre esta página',
+      openInClaude: 'Abrir no Claude',
+      openInClaudeCaption: 'Pergunte ao Claude sobre esta página'
     }
   }
 }

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

@@ -36,7 +36,11 @@
     copyPageCaption: 'Copy page as Markdown for LLMs',
     copied: 'Copied!',
     viewAsMarkdown: 'View as Markdown',
-    viewAsMarkdownCaption: 'View this page as plain text'
+    viewAsMarkdownCaption: 'View this page as plain text',
+    openInChatGPT: 'Open in ChatGPT',
+    openInChatGPTCaption: 'Ask ChatGPT about this page',
+    openInClaude: 'Open in Claude',
+    openInClaudeCaption: 'Ask Claude about this page'
   },
 
   menu: {

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

@@ -35,7 +35,11 @@
     copyPageCaption: 'Copiar página como Markdown para LLMs',
     copied: 'Copiado!',
     viewAsMarkdown: 'Ver como Markdown',
-    viewAsMarkdownCaption: 'Ver esta página como texto simples'
+    viewAsMarkdownCaption: 'Ver esta página como texto simples',
+    openInChatGPT: 'Abrir no ChatGPT',
+    openInChatGPTCaption: 'Pergunte ao ChatGPT sobre esta página',
+    openInClaude: 'Abrir no Claude',
+    openInClaudeCaption: 'Pergunte ao Claude sobre esta página'
   },
 
   menu: {

package/src/quasar.factory.js

@@ -331,6 +331,9 @@ function createMarkdownEndpointPlugin (projectRoot) {
     return null
   }
 
+  // LLM bot user-agent patterns
+  const LLM_BOT_PATTERN = /GPTBot|ChatGPT-User|OAI-SearchBot|ClaudeBot|Claude-User|Claude-SearchBot|anthropic-ai|Google-Extended|Gemini-Deep-Research|PerplexityBot|Perplexity-User|Bytespider|CCBot|Meta-ExternalAgent|FacebookBot|Amazonbot|Applebot-Extended|cohere-ai|DuckAssistBot|GrokBot|AI2Bot|YouBot|PetalBot/i
+
   return {
     name: 'docsector-markdown-endpoint',
 
@@ -349,15 +352,35 @@ function createMarkdownEndpointPlugin (projectRoot) {
 
       server.middlewares.use((req, res, next) => {
         const url = new URL(req.url, 'http://localhost')
-        if (!url.pathname.endsWith('.md')) return next()
 
-        const lang = url.searchParams.get('lang') || defaultLang
-        const file = resolveMarkdownFile(url.pathname, lang)
-        if (!file) return next()
+        // Explicit .md request
+        if (url.pathname.endsWith('.md')) {
+          const lang = url.searchParams.get('lang') || defaultLang
+          const file = resolveMarkdownFile(url.pathname, lang)
+          if (!file) return next()
+
+          const content = readFileSync(file, 'utf-8')
+          res.setHeader('Content-Type', 'text/plain; charset=utf-8')
+          res.end(content)
+          return
+        }
+
+        // Auto-serve markdown to LLM bot crawlers
+        const ua = req.headers['user-agent'] || ''
+        if (LLM_BOT_PATTERN.test(ua)) {
+          const lang = url.searchParams.get('lang') || defaultLang
+          // Try appending /overview as the default subpage
+          const mdPath = url.pathname.replace(/\/$/, '') + '/overview.md'
+          const file = resolveMarkdownFile(mdPath, lang)
+          if (file) {
+            const content = readFileSync(file, 'utf-8')
+            res.setHeader('Content-Type', 'text/plain; charset=utf-8')
+            res.end(content)
+            return
+          }
+        }
 
-        const content = readFileSync(file, 'utf-8')
-        res.setHeader('Content-Type', 'text/plain; charset=utf-8')
-        res.end(content)
+        next()
       })
     },