@docsector/docsector-reader 0.1.0

package/src/components/DPageSection.vue

@@ -0,0 +1,243 @@
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import MarkdownIt from 'markdown-it'
+import attrs from 'markdown-it-attrs'
+import { useI18n } from "vue-i18n"
+
+import DH2 from './DH2.vue'
+import DH3 from './DH3.vue'
+import DH4 from './DH4.vue'
+import DH5 from './DH5.vue'
+import DH6 from './DH6.vue'
+import DPageSourceCode from './DPageSourceCode.vue'
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true
+  }
+})
+
+const store = useStore()
+const { t } = useI18n()
+
+const tokenized = computed(() => {
+  const absolute = store.state.i18n.absolute
+
+  if (!absolute) {
+    return []
+  }
+
+  const source = t(`_.${absolute}.source`)
+
+  const Markdown = new MarkdownIt()
+  Markdown.use(attrs, {
+    leftDelimiter: ':',
+    rightDelimiter: ';',
+    allowedAttributes: ['filename']
+  })
+
+  const parsed = Markdown.parse(source)
+
+  // @ map
+  const tokens = []
+  let level = 0
+  let tag = ''
+  const children = []
+  parsed.forEach((element) => {
+    switch (element.type) {
+      case 'bullet_list_open':
+      case 'ordered_list_open':
+      case 'table_open':
+        level++
+    }
+
+    // Render
+    if (element.type === 'inline') {
+      element.content = Markdown.renderInline(element.content)
+    }
+
+    if (level === 0) {
+      // Prepare
+      switch (element.type) {
+        case 'heading_open':
+        case 'paragraph_open':
+        case 'list_item_open':
+          tag = element.tag
+      }
+
+      // Push
+      switch (element.type) {
+        case 'inline':
+          tokens.push({
+            tag,
+            map: element.map,
+            content: element.content,
+            info: element.info,
+            children
+          })
+
+          break
+        case 'fence': {
+          const info = element.info.split(' ')
+          const language = info[0]
+          const filename = info[1] ? info[1].replace('filename=', '').replace(/"/g, '') : ''
+
+          tokens.push({
+            tag: element.tag,
+            content: element.content,
+            info: language,
+            filename: filename
+          })
+          break
+        }
+      }
+    } else if (level === 1) {
+      const parent = tokens[tokens.length - 1]
+
+      switch (element.type) {
+        case 'bullet_list_open':
+          tokens.push({
+            tag: 'ul',
+            content: ''
+          })
+          break
+        case 'ordered_list_open':
+          tokens.push({
+            tag: 'ol',
+            content: ''
+          })
+          break
+        case 'table_open':
+          tokens.push({
+            tag: 'table',
+            content: ''
+          })
+          break
+
+        case 'list_item_open':
+          parent.content += '<li>'
+          break
+
+        case 'thead_open':
+          parent.content += '<thead>'
+          break
+        case 'tbody_open':
+          parent.content += '<tbody>'
+          break
+        case 'tr_open':
+          parent.content += '<tr>'
+          break
+        case 'th_open':
+          parent.content += '<th>'
+          break
+        case 'td_open':
+          parent.content += '<td>'
+          break
+
+        case 'inline':
+          parent.content += element.content
+          break
+
+        case 'list_item_close':
+          parent.content += '</li>'
+          break
+
+        case 'thead_close':
+          parent.content += '</thead>'
+          break
+        case 'tbody_close':
+          parent.content += '</tbody>'
+          break
+        case 'tr_close':
+          parent.content += '</tr>'
+          break
+        case 'th_close':
+          parent.content += '</th>'
+          break
+        case 'td_close':
+          parent.content += '</td>'
+          break
+      }
+    }
+
+    switch (element.type) {
+      case 'bullet_list_close':
+      case 'ordered_list_close':
+      case 'table_close':
+        level--
+    }
+  })
+
+  return tokens
+})
+</script>
+
+<template>
+<section>
+  <template v-for="(token, index) in tokenized" :key="index">
+    <d-h2
+      v-if="token.tag === 'h2'"
+      :id="id + token.map[0]"
+      :value="token.content"
+    />
+    <d-h3
+      v-else-if="token.tag === 'h3'"
+      :id="id + token.map[0]"
+      :value="token.content"
+    />
+    <d-h4
+      v-else-if="token.tag === 'h4'"
+      :id="id + token.map[0]"
+      :value="token.content"
+    />
+    <d-h5
+      v-else-if="token.tag === 'h5'"
+      :id="id + token.map[0]"
+      :value="token.content"
+    />
+    <d-h6
+      v-else-if="token.tag === 'h6'"
+      :id="id + token.map[0]"
+      :value="token.content"
+    />
+
+    <ul
+      v-else-if="token.tag === 'ul'"
+      v-html="token.content"
+    ></ul>
+    <ol
+      v-else-if="token.tag === 'ol'"
+      v-html="token.content"
+    ></ol>
+
+    <table
+      v-else-if="token.tag === 'table'"
+      v-html="token.content"
+    ></table>
+
+    <p
+      v-else-if="token.tag === 'p'"
+      v-html="token.content"
+    ></p>
+
+    <d-page-source-code
+      v-else-if="token.tag === 'code'"
+      :index="id + index"
+      :text="token.content"
+      :language="token.info"
+      :filename="token.filename"
+    />
+  </template>
+</section>
+</template>
+
+<style lang="sass">
+.content
+  p
+    line-height: 1.6em
+
+    &.overview
+      word-spacing: 0.05em
+</style>

package/src/components/DPageSourceCode.vue

@@ -0,0 +1,376 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useQuasar } from 'quasar'
+import { useStore } from 'vuex'
+import Prism from 'prismjs'
+// @ Load Prism languages
+import 'prismjs/components/prism-markup-templating' // dependency for prism-php extension
+// PHP
+import 'prismjs/components/prism-php'
+// Bash
+import 'prismjs/components/prism-bash'
+
+const props = defineProps({
+  index: {
+    type: Number,
+    required: true
+  },
+  language: {
+    type: String,
+    default: 'html'
+  },
+  text: {
+    type: String,
+    required: true
+  },
+  filename: {
+    type: String,
+    default: ''
+  }
+})
+
+const $q = useQuasar()
+const store = useStore()
+
+const copyBtnDisabled = ref(false)
+const copyBtnColor = ref(null)
+const copyBtnIcon = ref('content_copy')
+const codeRef = ref(null)
+
+const href = computed(() => `${store.state.page.absolute}#${anchor.value}`)
+const coloring = computed(() => $q.dark.isActive ? 'dark' : 'white')
+const anchor = computed(() => printToLetter(props.index + 1))
+const lines = computed(() => {
+  const splited = props.text.split(/\r\n|\n/)
+  return splited.length - 1
+})
+const highlighted = computed(() => {
+  if (!props.text) {
+    return ''
+  }
+
+  const text = props.text.replace(/&#123;/g, '{').replace(/&#125;/g, '}').replace(/&amp;/g, '&')
+
+  const lang = props.language || 'markup'
+  const grammar = Prism.languages[lang]
+
+  if (!grammar) {
+    // Language not loaded — return escaped plain text
+    return text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+  }
+
+  return Prism.highlight(text, grammar, lang)
+})
+
+function copyCode() {
+  const code = codeRef.value
+
+  if (code) {
+    const range = document.createRange()
+    range.selectNodeContents(code)
+
+    const selection = window.getSelection()
+    selection.removeAllRanges()
+    selection.addRange(range)
+
+    try {
+      document.execCommand('copy')
+
+      copyBtnDisabled.value = true
+      copyBtnColor.value = 'positive'
+      copyBtnIcon.value = 'done'
+
+      setInterval(() => {
+        copyBtnDisabled.value = false
+        copyBtnColor.value = null
+        copyBtnIcon.value = 'content_copy'
+      }, 3000)
+    } catch (err) {
+      console.error('Error copying text: ', err)
+    } finally {
+      selection.removeAllRanges()
+    }
+  }
+}
+
+function printToLetter(number) {
+  const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+  let result = ''
+
+  while (number > 0) {
+    const charIndex = (number - 1) % 26
+    result = alphabet.charAt(charIndex) + result
+    number = Math.floor((number - 1) / 26)
+  }
+
+  return result
+}
+</script>
+
+<template>
+<div class="source-code">
+  <div class="info" v-if="lines && lines > 1">
+    <div class="filename">{{ filename }}</div>
+    <div class="language">{{ language }}</div>
+    <div class="copy">
+      <q-btn
+        flat square dense size="xs"
+        :disable="copyBtnDisabled"
+        :color="copyBtnColor"
+        :icon="copyBtnIcon"
+        @click="copyCode"
+        aria-label="Copy code"
+      />
+    </div>
+  </div>
+
+  <div class="code" :class="coloring">
+    <div class="lines" v-if="lines && lines > 1">
+      <template v-for="(line, index) in lines" :key="index">
+        <a class="line" :href="href+line">
+          <i class="fa fa-link" aria-hidden="true" data-hidden="true"></i>
+          <span :id="`${anchor}${line}`">{{ line }}</span>
+        </a>
+      </template>
+    </div>
+    <pre>
+      <code :class="`language-${language}`" v-html="highlighted" ref="code"></code>
+    </pre>
+  </div>
+</div>
+</template>
+
+<style lang="sass">
+.source-code
+  box-shadow: 0 1px 1px rgb(0 0 0 / 13%)
+  max-width: calc(100vw - 40px)
+  margin: 14px 0 16px
+
+  .info
+    display: flex
+    flex-direction: row-reverse
+    height: 22px
+
+    .copy
+      border-color: #ddd
+      border-style: solid
+      border-width: 1px 0 0 1px
+      color: gray
+      padding: 0
+      user-select: none
+
+      button
+        padding: 4px 4px 3px
+        position: relative
+        top: -1px
+    .language
+      font-size: 13px
+      border-color: #ddd
+      border-style: solid
+      border-width: 1px 1px 0 1px
+      color: gray
+      padding: 0 5px 0
+      user-select: none
+
+  .code
+    font-family: "Fira Code Nerd Font", "Consolas" !important
+    position: relative
+    border: 1px solid #ddd
+    border-bottom: 1px solid #ccc
+    border-radius: 3px
+    margin: 0
+    padding: 0
+
+    .lines
+      padding: 11px 5px 8px 5px
+      text-align: right
+      float: left
+      -webkit-user-select: none
+      user-select: none
+
+      a
+        display: block
+        font-size: 90% !important
+        min-height: 19px
+        white-space: nowrap
+        padding: 0 3px
+
+        &:hover
+          i
+            visibility: visible
+
+        i
+          font-size: 10px
+          float: left
+          margin-top: 4px
+          margin-right: 4px
+          visibility: hidden
+
+    pre
+      font-family: "Fira Code Nerd Font", "Consolas" !important
+      display: flex
+      margin: 0
+      border: 0
+      padding: 10px
+      white-space: pre
+      line-height: 19px
+      word-wrap: normal
+      overflow: auto
+      overflow-y: hidden
+
+      > code
+        font-family: "Fira Code Nerd Font", "Consolas" !important
+        display: block
+        padding: 0
+
+    &.white
+      .language
+        background-color: white
+      .lines
+        background-color: #fafafa
+        a
+          border-color: #f0f0f0
+          color: #565555 !important
+        a:hover
+          border-color: #f0f0f0
+          color: #565555 !important
+
+      .token.comment,
+      .token.prolog,
+      .token.doctype,
+      .token.cdata
+        color: #4e5a65
+
+      .token.punctuation
+        color: #999
+
+      .token.namespace
+        opacity: .7
+
+      .token.property,
+      .token.tag,
+      .token.boolean,
+      .token.number,
+      .token.constant,
+      .token.class-name,
+      .token.symbol,
+      .token.deleted
+        color: #905
+
+      .token.selector,
+      .token.attr-name,
+      .token.string,
+      .token.char,
+      .token.builtin,
+      .token.inserted
+        color: #416200
+
+      .token.operator,
+      .token.entity,
+      .token.url,
+      .language-css .token.string,
+      .style .token.string
+        color: #9a6e3a
+
+      .token.atrule,
+      .token.attr-value,
+      .token.keyword
+        color: #07a
+
+      .token.function
+        color: #9a3449
+
+      .token.regex,
+      .token.important,
+      .token.variable
+        color: #7b4f00
+
+      .token.important,
+      .token.bold
+        font-weight: bold
+      .token.italic
+        font-style: italic
+
+      .token.entity
+        cursor: help
+
+    &.dark
+      .language
+        background-color: #000
+      .lines
+        background-color: #000
+        a
+          border-color: #f0f0f0
+          color: #969696 !important
+        a:hover
+          border-color: #f0f0f0
+          background-color: transparent !important
+
+      .token.comment,
+      .token.prolog,
+      .token.doctype,
+      .token.cdata
+        color: #A0A1A7cc
+
+      .token.punctuation
+        color: #D5CED9
+
+      .token.namespace
+        opacity: .7
+
+      .token.property
+        color: #7CB7FF
+      .token.constant.boolean
+        color: #f39c12
+      .token.number
+        color: #f39c12
+
+      .token.class-name
+        color: #ff68bc
+      .token.constant
+        color: #ff68bc
+      .token.tag,
+      .token.symbol,
+      .token.deleted
+        color: #FF66BA
+
+      .token.selector,
+      .token.attr-name,
+      .token.string,
+      .token.char,
+      .token.builtin,
+      .token.inserted
+        color: #96E072
+
+      .token.operator,
+      .token.entity,
+      .token.url,
+      .language-css .token.string,
+      .style .token.string
+        color: #9a6e3a
+
+      .token.atrule,
+      .token.attr-value,
+      .token.keyword
+        color: #c74ded
+
+      .token.function
+        color: #FFE66D
+
+      .token.regex,
+      .token.important,
+      .token.variable
+        color: #7CB7FF
+
+      .token.important,
+      .token.bold
+        font-weight: bold
+      .token.italic
+        font-style: italic
+
+      .token.entity
+        cursor: help
+</style>

package/src/components/DSubpage.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// components
+import DPage from "./DPage.vue";
+import DH1 from "./DH1.vue";
+import DPageSection from "./DPageSection.vue";
+
+const route = useRoute()
+
+const id = computed(() => {
+  const path = route.path
+
+  let hash = 5381
+  for (let i = 0; i < path.length; i++) {
+    hash = (hash * 33) ^ path.charCodeAt(i)
+  }
+
+  return hash >>> 0
+})
+</script>
+
+<template>
+<d-page>
+  <header>
+    <d-h1 :id="0" />
+  </header>
+
+  <main>
+    <d-page-section :id="id" />
+  </main>
+</d-page>
+</template>