@nubisco/docs-sdk 0.0.0-stage → 0.0.0

package/src/plugins/tabs/components/useTabsSelectedState.ts

@@ -0,0 +1,95 @@
+import { ref, computed, reactive, inject, watch, onMounted } from 'vue'
+import type { App, Ref, InjectionKey } from 'vue'
+
+type TabsSharedState = {
+  content?: TabsSharedStateContent
+}
+type TabsSharedStateContent = Record<string, string>
+
+const injectionKey: InjectionKey<TabsSharedState> = Symbol(
+  'vitepress:tabSharedState',
+)
+const ls = typeof localStorage !== 'undefined' ? localStorage : null
+const localStorageKey = 'vitepress:tabsSharedState'
+
+const getLocalStorageValue = (): TabsSharedStateContent => {
+  const rawValue = ls?.getItem(localStorageKey)
+  if (rawValue) {
+    try {
+      return JSON.parse(rawValue)
+    } catch {}
+  }
+  return {}
+}
+const setLocalStorageValue = (v: TabsSharedStateContent) => {
+  if (!ls) return
+  ls.setItem(localStorageKey, JSON.stringify(v))
+}
+
+export const provideTabsSharedState = (app: App) => {
+  const state = reactive<TabsSharedState>({})
+  watch(
+    () => state.content,
+    (newStateContent, oldStateContent) => {
+      // skip initialize
+      if (newStateContent && oldStateContent) {
+        setLocalStorageValue(newStateContent)
+      }
+    },
+    { deep: true },
+  )
+
+  app.provide(injectionKey, state)
+}
+
+export const useTabsSelectedState = <T extends string>(
+  acceptValues: Ref<T[]>,
+  sharedStateKey: Ref<string | undefined>,
+) => {
+  const sharedState = inject(injectionKey)
+  if (!sharedState) {
+    throw new Error('[vitepress-doc-tabs] TabsSharedState should be injected')
+  }
+
+  onMounted(() => {
+    if (!sharedState.content) {
+      sharedState.content = getLocalStorageValue()
+    }
+  })
+
+  const nonSharedState = ref<T | undefined>()
+
+  const selected = computed({
+    get() {
+      const key = sharedStateKey.value
+      const acceptVals = acceptValues.value
+      if (key) {
+        const value = sharedState.content?.[key]
+        if (value && (acceptVals as string[]).includes(value)) {
+          return value as T
+        }
+      } else {
+        const nonSharedStateVal = nonSharedState.value
+        if (nonSharedStateVal) {
+          return nonSharedStateVal
+        }
+      }
+      return acceptVals[0]
+    },
+    set(v) {
+      const key = sharedStateKey.value
+      if (key) {
+        if (sharedState.content) {
+          sharedState.content[key] = v
+        }
+      } else {
+        nonSharedState.value = v
+      }
+    },
+  })
+  const select = (newValue: T) => {
+    selected.value = newValue
+  }
+
+  return { selected, select }
+}

package/src/plugins/tabs/components/useTabsSingleState.ts

@@ -0,0 +1,22 @@
+import { provide, type InjectionKey, type Ref, inject } from 'vue'
+
+type TabsSingleState = {
+  uid: string
+  selected: Ref<string>
+}
+
+const injectionKey: InjectionKey<TabsSingleState> = Symbol(
+  'vitepress:tabSingleState',
+)
+
+export const provideTabsSingleState = (state: TabsSingleState) => {
+  provide(injectionKey, state)
+}
+
+export const useTabsSingleState = () => {
+  const singleState = inject(injectionKey)
+  if (!singleState) {
+    throw new Error('[vitepress-doc-tabs] TabsSingleState should be injected')
+  }
+  return singleState
+}

package/src/plugins/tabs/index.ts

@@ -0,0 +1 @@
+export * from './components'

package/src/plugins/tabs/markdown/index.ts

@@ -0,0 +1 @@
+export { tabsPlugin as tabsMarkdownPlugin } from './markdownPlugin'

package/src/plugins/tabs/markdown/markdownPlugin.ts

@@ -0,0 +1,47 @@
+// @ts-nocheck: adapted third-party code (see THIRD_PARTY_NOTICES.md), typed loosely upstream.
+import type MarkdownIt from 'markdown-it'
+import type Token from 'markdown-it/lib/token'
+import container from 'markdown-it-container'
+import { ruleBlockTab } from './ruleBlockTab'
+
+type Params = {
+  shareStateKey: string | undefined
+}
+
+const parseTabsParams = (input: string): Params => {
+  const match = input.match(/key:(\S+)/)
+  return {
+    shareStateKey: match?.[1],
+  }
+}
+
+export const tabsPlugin = (md: MarkdownIt) => {
+  md.use(container, 'tabs', {
+    render(tokens: Token[], index: number) {
+      const token = tokens[index]
+      if (token.nesting === 1) {
+        const params = parseTabsParams(token.info)
+        const shareStateKeyProp = params.shareStateKey
+          ? `sharedStateKey="${md.utils.escapeHtml(params.shareStateKey)}"`
+          : ''
+        return `<ContentTabs ${shareStateKeyProp}>\n`
+      } else {
+        return `</ContentTabs>\n`
+      }
+    },
+  })
+
+  md.block.ruler.after('container_tabs', 'tab', ruleBlockTab)
+  const renderTab = (tokens: Token[], index: number): string => {
+    const token = tokens[index]
+    if (token.nesting === 1) {
+      const label = token.info
+      const labelProp = `label="${md.utils.escapeHtml(label)}"`
+      return `<ContentTab ${labelProp}>\n`
+    } else {
+      return `</ContentTab>\n`
+    }
+  }
+  md.renderer.rules['tab_open'] = renderTab
+  md.renderer.rules['tab_close'] = renderTab
+}

package/src/plugins/tabs/markdown/ruleBlockTab.ts

@@ -0,0 +1,97 @@
+// @ts-nocheck: adapted third-party code (see THIRD_PARTY_NOTICES.md), typed loosely upstream.
+import type { RuleBlock } from 'markdown-it/lib/parser_block'
+
+const tabMarker = '='
+const tabMarkerCode = tabMarker.charCodeAt(0)
+const minTabMarkerLen = 2
+
+export const ruleBlockTab: RuleBlock = (state, startLine, endLine, silent) => {
+  let pos = state.bMarks[startLine] + state.tShift[startLine]
+  const max = state.eMarks[startLine]
+
+  // @ts-expect-error markdown-it-container uses 'container'
+  if (state.parentType !== 'container') {
+    return false
+  }
+
+  if (pos + minTabMarkerLen > max) {
+    return false
+  }
+
+  const marker = state.src.charCodeAt(pos)
+  if (marker !== tabMarkerCode) {
+    return false
+  }
+
+  // scan marker length
+  const mem = pos
+  pos = state.skipChars(pos + 1, marker)
+  const tabMarkerLen = pos - mem
+
+  if (tabMarkerLen < minTabMarkerLen - 1) {
+    return false
+  }
+
+  // for validation mode
+  if (silent) {
+    return true
+  }
+
+  // search for the end of the block
+  let nextLine = startLine
+  let endStart = mem
+  let endPos = pos
+
+  for (;;) {
+    nextLine++
+    if (nextLine >= endLine) {
+      break // unclosed block is autoclosed
+    }
+
+    endStart = state.bMarks[nextLine] + state.tShift[nextLine]
+    const max = state.eMarks[nextLine]
+
+    if (endStart < max && state.sCount[nextLine] < state.blkIndent) {
+      // non-empty line with negative indent should stop the list:
+      // - ```
+      //  test
+      break
+    }
+
+    const startCharCode = state.src.charCodeAt(endStart)
+    if (startCharCode !== tabMarkerCode) {
+      continue
+    }
+
+    const p = state.skipChars(endStart + 1, marker)
+    if (p - endStart !== tabMarkerLen) {
+      continue
+    }
+    endPos = p
+    break
+  }
+
+  const oldParent = state.parentType
+  const oldLineMax = state.lineMax
+  // @ts-expect-error use 'tab' for this rule
+  state.parentType = 'tab'
+  // this will prevent lazy continuations from ever going past our end marker
+  state.lineMax = nextLine
+
+  const startToken = state.push('tab_open', 'div', 1)
+  startToken.markup = state.src.slice(mem, pos)
+  startToken.block = true
+  startToken.info = state.src.slice(pos, max).trimStart()
+  startToken.map = [startLine, nextLine - 1]
+
+  state.md.block.tokenize(state, startLine + 1, nextLine)
+
+  const endToken = state.push('tab_close', 'div', -1)
+  endToken.markup = state.src.slice(endStart, endPos)
+  endToken.block = true
+
+  state.parentType = oldParent
+  state.lineMax = oldLineMax
+  state.line = nextLine
+  return true
+}

package/src/theme/Layout.vue

@@ -0,0 +1,32 @@
+<template>
+  <DefaultLayout>
+    <!--
+      The site-wide colour-mode and appearance switches.
+
+      `nav-bar-content-after` is used rather than a bespoke bar so the controls
+      sit in the header VitePress already renders, on every page, including
+      pages that declare their own `layout:` in frontmatter. A custom layout
+      replaces the page content, not the chrome around it.
+    -->
+    <template #nav-bar-content-after>
+      <DocsControls />
+    </template>
+
+    <!--
+      The left navigation. VitePress's own group list is hidden in
+      custom.css and this one renders from the same sidebar config, with a
+      filter box and collapsible groups.
+    -->
+    <template #sidebar-nav-before>
+      <DocsSidebarNav />
+    </template>
+  </DefaultLayout>
+</template>
+
+<script setup lang="ts">
+import DefaultTheme from 'vitepress/theme'
+import DocsControls from './components/DocsControls.vue'
+import DocsSidebarNav from './components/DocsSidebarNav.vue'
+
+const DefaultLayout = DefaultTheme.Layout
+</script>