@docsector/docsector-reader 0.1.0

package/src/components/DPage.vue

@@ -0,0 +1,222 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute, useRouter } from 'vue-router'
+import { useQuasar } from 'quasar'
+
+import useNavigator from 'src/composables/useNavigator'
+
+import DPageAnchor from 'components/DPageAnchor.vue'
+import DPageMeta from 'components/DPageMeta.vue'
+
+const store = useStore()
+const router = useRouter()
+const route = useRoute()
+const $q = useQuasar()
+
+const { scrolling, navigate } = useNavigator()
+
+const props = defineProps({
+  disableNav: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const pageScrollArea = ref(null)
+
+const overview = computed(() => route.matched[0].path)
+const showcase = computed(() => {
+  const showcase = route.matched[0].meta.subpages.showcase
+  return showcase ? overview.value + '/showcase' : false
+})
+const vs = computed(() => {
+  const vs = route.matched[0].meta.subpages.vs
+  return vs ? overview.value + '/vs' : false
+})
+const layoutMeta = computed({
+  get: () => store.state.layout.meta,
+  set: (value) => store.commit('layout/setMeta', value)
+})
+const main = computed(() => {
+  switch (store.state.page.relative) {
+    case '/showcase':
+      return 'showcase'
+    case '/vs':
+      return 'vs'
+    default:
+      return 'overview'
+  }
+})
+
+const toggleSectionsTree = () => {
+  layoutMeta.value = !layoutMeta.value
+}
+
+const pActive = (relative) => {
+  if (relative === '/' && (store.state.page.relative === relative || store.state.page.relative === '')) {
+    return 'active'
+  } else if (store.state.page.relative === relative) {
+    return 'active'
+  }
+  return null
+}
+
+const subroute = (to) => {
+  const base = '/' + store.state.page.base
+  const relative = store.state.page.relative
+  let path = base
+
+  if (to !== '/') {
+    path += to
+  }
+
+  if (relative === to) {
+    if (to !== '/showcase') {
+      return router.push({ hash: '#0' })
+    } else {
+      return router.push({ hash: '#1' })
+    }
+  }
+
+  router.push(path)
+  return true
+}
+
+const resetPageScroll = () => {
+  if (pageScrollArea.value !== null) {
+    pageScrollArea.value.setScrollPosition('vertical', 0, 0)
+  }
+}
+
+onMounted(() => {
+  router.beforeEach((to, from, next) => {
+    resetPageScroll()
+
+    if (to.hash === '' && from.path !== to.path) {
+      store.commit('page/resetAnchor')
+      store.commit('page/resetAnchors')
+      store.commit('page/resetNodes')
+    }
+
+    next()
+  })
+})
+</script>
+
+<template>
+<q-page-container id="page-container">
+  <q-toolbar id="submenu" class="bg-grey-8 text-white">
+    <q-toolbar-title class="toolbar-container">
+      <q-btn-group :class="$q.screen.lt.md ? 'mobile' : null">
+        <q-btn
+          v-if="overview && (showcase || vs)"
+          no-caps flat
+          :class="pActive('/overview')"
+          :label="$t('submenu.overview')" icon="pageview"
+          @click="subroute('/overview')"
+        />
+        <q-btn
+          v-if="showcase"
+          no-caps flat
+          :class="pActive('/showcase')"
+          :label="$t('submenu.showcase')" icon="play_circle_filled"
+          @click="subroute('/showcase')"
+        />
+        <q-btn
+          v-if="vs"
+          no-caps flat
+          :class="pActive('/vs')"
+          :label="$t('submenu.versus')" icon="compare"
+          @click="subroute('/vs')"
+        />
+      </q-btn-group>
+    </q-toolbar-title>
+    <q-btn @click="toggleSectionsTree" icon="account_tree" />
+  </q-toolbar>
+
+  <q-page id="page">
+    <q-scroll-area class="content" :class="main" ref="pageScrollArea">
+      <div id="scroll-container">
+        <slot />
+      </div>
+      <d-page-meta v-if="!disableNav" />
+      <q-scroll-observer @scroll="scrolling" :debounce="300" />
+    </q-scroll-area>
+  </q-page>
+
+  <q-drawer elevated show-if-above side="right" v-model="layoutMeta">
+    <d-page-anchor id="anchor" />
+  </q-drawer>
+</q-page-container>
+</template>
+
+<style lang="sass">
+#page-container
+  padding-bottom: 0 !important
+
+.content,
+.content > div.scroll
+  min-height: calc(100vh - 86px)
+
+.content:not(.no-padding) > div.scroll > div.q-scrollarea__content
+  padding: 15px
+
+#page
+  min-height: calc(100vh - 86px) !important
+
+#scroll-container
+  max-width: 1200px
+  margin: auto
+
+#submenu
+  min-height: 36px
+  padding: 0
+  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px rgba(0,0,0,0.14), 0 1px 6px rgba(0,0,0,0.12)
+  overflow: visible
+
+  .on-left
+    margin-right: 5px
+  .toolbar-container
+    overflow: visible
+  .q-btn-group
+    box-shadow: none
+    &.mobile
+      .q-btn-inner
+        div
+          display: none
+  .q-btn-inner
+    .q-icon
+      margin: 0
+    div
+      &:not(.focus-helper)
+        margin-left: 6px
+
+#submenu a,
+#submenu button
+  border-radius: 0
+  padding: 6px 12px
+
+// * Coloring
+// Light
+body.body--light
+  #submenu a.active,
+  #submenu button.active
+    background-color: #fff !important
+    color: #000
+    box-shadow: 0 10px 0 0 #fff
+// Dark
+body.body--dark
+  #submenu a.active,
+  #submenu button.active
+    background-color: var(--q-dark-page) !important
+    color: #fff
+    box-shadow: 0 10px 0 0 var(--q-dark-page)
+
+body.mobile.body--dark
+  .q-drawer--right
+    background: rgba(18, 0, 0, 0.7)
+body.mobile
+  .q-drawer--right
+    background: rgba(255, 255, 255, 0.7)
+</style>

package/src/components/DPageAnchor.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { computed, onMounted, onBeforeUnmount } from 'vue'
+import { useStore } from 'vuex'
+import { useQuasar } from 'quasar'
+import { useRoute } from "vue-router";
+
+import useNavigator from 'src/composables/useNavigator'
+
+const store = useStore()
+const $q = useQuasar()
+const route = useRoute()
+const { navigate, anchor, selected: navigatorSelected } = useNavigator()
+
+const nodes = computed(() => store.getters['page/nodes'])
+const expanded = computed({
+  get() {
+    return store.getters['page/nodesExpanded']
+  },
+  set(value) {
+    // console.log(value)
+  }
+})
+const selected = computed({
+  get() {
+    let anchor = store.state.page.anchor
+
+    if (store.state.page.relative !== '' && anchor === 0) {
+      anchor = anchor + 1
+    }
+
+    return anchor
+  },
+  set(value) {
+    navigate(value)
+  }
+})
+
+navigatorSelected.value = selected.value
+
+const stylize = computed(() => {
+  if ($q.platform.is.mobile && !$q.screen.lt.lg) {
+    return 'fixed'
+  } else {
+    return 'q-ma-xs'
+  }
+})
+
+onMounted(() => {
+  store.commit('layout/setMetaToggle', true)
+
+  setTimeout(() => {
+    store.commit('page/setScrolling', true)
+  }, 1000)
+
+  const id = route.hash.replace(/^#+/g, '')
+  if (id) {
+    setTimeout(() => {
+      anchor(id)
+    }, 500)
+  }
+})
+
+onBeforeUnmount(() => {
+  store.commit('layout/setMetaToggle', false)
+
+  store.commit('page/resetAnchor')
+  store.commit('page/resetAnchors')
+  store.commit('page/resetNodes')
+
+  store.commit('page/setScrolling', false)
+})
+</script>
+
+<template>
+<q-tree
+  v-model:selected="selected"
+  v-model:expanded="expanded"
+  default-expand-all
+  :class="stylize"
+  :nodes="nodes"
+  node-key="id"
+>
+  <template v-slot:default-header="props">
+    <b v-if="props.node.label">{{ props.node.label }}</b>
+    <b v-else>{{ $t(`_.${$store.state.i18n.base}._`) }}</b>
+  </template>
+</q-tree>
+</template>
+
+<style lang="sass">
+#anchor
+  .q-tree
+    padding-top: 12px
+    width: 100%
+  .q-tree-node-header
+    margin: 0
+    border-radius: 0
+  b
+    font-size: 15px
+
+body.body--light
+  #anchor
+    b
+      color: #1A496B
+
+    .q-tree__node-header
+      &.q-tree__node--selected
+        background-color: var(--q-primary)
+
+        b, i
+          color: white !important
+body.body--dark
+  #anchor
+    b
+      color: #42B0FF
+
+    .q-tree__node-header
+      &.q-tree__node--selected
+        background-color: var(--q-primary)
+
+        b, i
+          color: white !important
+</style>

package/src/components/DPageBlockquote.vue

@@ -0,0 +1,19 @@
+<script setup>
+// defineProps is a compiler macro in <script setup>, no import needed
+
+const props = defineProps({
+  message: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+<blockquote>
+  <strong v-if="message === 'important'">Important</strong>
+  <strong v-else-if="message === 'warning'">Warning</strong>
+  <strong v-else-if="message === 'note'">Note</strong>
+  <slot />
+</blockquote>
+</template>

package/src/components/DPageMeta.vue

@@ -0,0 +1,203 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { openURL } from 'quasar'
+import { useI18n } from 'vue-i18n'
+
+import docsectorConfig from 'docsector.config.js'
+
+const store = useStore()
+const route = useRoute()
+const router = useRouter()
+const { t, locale, availableLocales, te, tm } = useI18n()
+
+const base = docsectorConfig.github?.editBaseUrl || ''
+
+const status = computed(() => route.meta.status)
+const URL = computed(() => {
+  const path = route.path.replace(/\/([^/]*)$/, '.$1')
+  return `${base}${path}.${locale.value}.md`
+})
+const color = computed(() => {
+  if (status.value === 'done') {
+    return 'white'
+  } else if (status.value === 'draft') {
+    return 'warning'
+  } else {
+    return 'red-6'
+  }
+})
+const icon = computed(() => {
+  if (status.value === 'done') {
+    return 'edit'
+  } else if (status.value === 'draft') {
+    return 'border_color'
+  } else {
+    return 'note_add'
+  }
+})
+
+const progress = computed(() => {
+  const i18nPathAbsolute = store.state.i18n.absolute
+
+  if (!i18nPathAbsolute) {
+    return '?%'
+  }
+
+  const defaultLang = docsectorConfig.defaultLanguage || 'en-US'
+  const currentLang = locale.value
+
+  // Count headers (## and ###) in the default language source
+  const defaultSourcePath = `_.${i18nPathAbsolute}.source`
+  const defaultSource = te(defaultSourcePath, defaultLang) ? tm(defaultSourcePath, defaultLang) : ''
+
+  if (!defaultSource || typeof defaultSource !== 'string') {
+    return '?%'
+  }
+
+  const headerRegex = /^#{2,6}\s+.+/gm
+  const defaultHeaders = (defaultSource.match(headerRegex) || []).length
+
+  if (defaultHeaders === 0) {
+    return '100%'
+  }
+
+  // If current lang is the default, progress is always 100%
+  if (currentLang === defaultLang) {
+    return '100%'
+  }
+
+  // Count headers in the current language source
+  const currentSource = te(defaultSourcePath, currentLang) ? tm(defaultSourcePath, currentLang) : ''
+
+  if (!currentSource || typeof currentSource !== 'string') {
+    return '0%'
+  }
+
+  const currentHeaders = (currentSource.match(headerRegex) || []).length
+  const percent = Math.min(100, Math.floor((currentHeaders / defaultHeaders) * 100))
+
+  return `${percent}%`
+})
+
+const languages = computed(() => {
+  const i18nPathAbsolute = store.state.i18n.absolute
+  const translations = `_.${i18nPathAbsolute}._translations`
+  const i18nLocales = availableLocales
+  let fallbackLastUpdated = null
+
+  if (te(translations, 'en-US')) {
+    fallbackLastUpdated = tm(translations, 'en-US')
+  }
+
+  let i18nLocalesAvailable = 0
+  if (fallbackLastUpdated) {
+    for (let i = 0; i < i18nLocales.length; i++) {
+      if (t(translations, i18nLocales[i]) !== fallbackLastUpdated) {
+        i18nLocalesAvailable++
+      }
+    }
+  } else {
+    i18nLocalesAvailable = 1
+  }
+
+  return `${i18nLocalesAvailable}/${i18nLocales.length}`
+})
+
+const prev = computed(() => {
+  const base = store.state.page.base
+  const routes = router.options.routes.slice(0, -2)
+
+  for (let i = 0; i < routes.length; i++) {
+    if ('/' + base === routes[i].path) {
+      if (i > 0) {
+        return routes[i - 1].path
+      }
+    }
+  }
+
+  return ''
+})
+
+const next = computed(() => {
+  const base = store.state.page.base
+  const routes = router.options.routes.slice(0, -2)
+
+  for (let i = 0; i < routes.length; i++) {
+    if ('/' + base === routes[i].path) {
+      if (typeof routes[i + 1] !== 'undefined') {
+        return routes[i + 1].path
+      }
+    }
+  }
+
+  return ''
+})
+</script>
+
+<template>
+<div id="d-page-meta">
+  <div class="row justify-between q-mt-lg">
+    <div id="d-page-edit" class="col">
+      <q-btn dense no-caps text-color="black" :color="color" @click="openURL(URL)" aria-label="Edit page on Github">
+        <q-icon class="q-mr-xs" name="fab fa-github" size="20px" />
+        <span class="hm" v-if="status === 'done'">{{ $t('page.edit.github.edit') }}</span>
+        <span class="hm" v-else-if="status === 'draft'">{{ $t('page.edit.github.complete') }}</span>
+        <span class="hm" v-else-if="status === 'empty'">{{ $t('page.edit.github.start') }}</span>
+      </q-btn>
+    </div>
+    <div id="d-page-translation" class="col-auto">
+      <q-chip class="languages-progress q-mr-xs q-ml-none" dense square>
+        <q-icon class="q-mr-xs" name="translate" size="20px" />
+        <span>{{ $i18n.locale }}:<b>{{ ' ' + progress }}</b></span>
+        <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">{{ $t('page.edit.progress') }}</q-tooltip>
+      </q-chip>
+
+      <q-chip class="languages-available q-ma-none" dense square>
+        <q-icon class="q-mr-xs" name="language" size="20px" />
+        <span>{{ '#' + languages }}</span>
+        <q-tooltip anchor="top end" self="bottom end" :offset="[10, 10]">{{ $t('page.edit.translations') }}</q-tooltip>
+      </q-chip>
+    </div>
+  </div>
+
+  <nav id="d-page-nav" class="row">
+    <router-link class="link col" v-if="prev" :to="`${prev}/overview`">
+      <div class="text-caption">{{ $t('page.nav.prev') }}</div>
+      <q-icon name="navigate_before" />
+      <span>{{ $t(`_${prev.replace(/_$/, '').replace(/\//g, '.')}._`) }}</span>
+    </router-link>
+    <router-link class="link col" v-if="next" :to="`${next}/overview`">
+      <div class="text-caption">{{ $t('page.nav.next') }}</div>
+      <span>{{ $t(`_${next.replace(/_$/, '').replace(/\//g, '.')}._`) }}</span>
+      <q-icon name="navigate_next" />
+    </router-link>
+  </nav>
+</div>
+</template>
+
+<style lang="sass">
+#d-page-meta
+  max-width: 1200px
+  display: block
+  width: 100%
+  min-height: 36px
+  margin: 24px auto 40px auto
+  border-top: 3px solid #e0e0e0
+
+  #d-page-translation
+    .q-chip
+      padding: 16px 0.4em
+      margin-top: 0
+      margin-bottom: 0
+
+  #d-page-nav
+    &:first-child
+      margin-top: calc(100vh - 200px)
+
+    .link
+      margin-top: 20px
+      border: 1px solid #e0e0e0
+      padding: 15px !important
+</style>