@lincyaw/web 1.0.0-rc.0 → 1.0.0-rc.2

package/custom-nav-controls.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { useMessages } from '@lincyaw/host'
-import { configs, useNav } from '@slidev/client'
-import { computed } from 'vue'
-import { formOptions, WEB_MESSAGES, webUrl } from './src/domain/index.ts'
-
-const t = useMessages(WEB_MESSAGES)
-const { currentSlideNo, clicks } = useNav()
-const base = computed(() => formOptions(configs.presmium).webUrl ?? new URL('../web', new URL(import.meta.env.BASE_URL, location.href)).href)
-const href = computed(() => webUrl(base.value, currentSlideNo.value, clicks.value))
-</script>
-
-<template>
-  <a class="slidev-icon-btn pm-read-web" :href="href" :title="t.readOnWeb" :aria-label="t.readOnWeb">
-    <div class="i-carbon:document" />
-  </a>
-</template>

package/src/client/env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vitepress/client" />

package/src/client/home.ts

@@ -1,182 +0,0 @@
-import { createSharedStates, currentLocale, installHost, PmEmpty, PmIcon, pluginsOf, PmToolbar, presmiumReport, presmiumService, registerPresmiumPlugin, startHost, useMessages } from '@lincyaw/host'
-import type { HostAdapter, Navigation } from '@lincyaw/host'
-import { FINAL_STEP } from '@lincyaw/viewer'
-import type { Theme } from 'vitepress'
-import { inBrowser, useData } from 'vitepress'
-import DefaultTheme from 'vitepress/theme-without-fonts'
-import { computed, defineComponent, h, onBeforeUnmount, onMounted, readonly, ref } from 'vue'
-import { samePage, WEB_MESSAGES } from '../domain/index.ts'
-import './style.css'
-
-export interface SiteHomeInput {
-  plugins: (() => Promise<unknown>)[]
-}
-
-interface HomeDocument {
-  dir: string
-  title: string
-  lang?: string
-  tags?: string[]
-  href: string
-  description?: string
-  pages?: number
-  problems?: { errors: number, warnings: number }
-}
-
-const query = ref('')
-
-function useDocuments() {
-  const { theme } = useData()
-  return computed<HomeDocument[]>(() => theme.value.presmium?.documents ?? [])
-}
-
-function card(doc: HomeDocument, t: typeof WEB_MESSAGES[keyof typeof WEB_MESSAGES]) {
-  const badge = (text: string, tone = '') => h('span', { class: `pm-ui-badge${tone ? ` pm-ui-badge--${tone}` : ''}` }, text)
-  const problems = doc.problems
-  return h('li', { 'class': 'pm-site-home__document pm-ui-card pm-ui-card--interactive', 'data-document': doc.dir }, [
-    h('a', { class: 'pm-site-home__link', href: doc.href, ...doc.lang ? { lang: doc.lang } : {} }, doc.title),
-    doc.description ? h('p', { class: 'pm-site-home__description' }, doc.description) : null,
-    h('div', { class: 'pm-ui-badges' }, [
-      h('span', { class: 'pm-site-home__dir pm-ui-badge' }, `${doc.dir}/`),
-      doc.pages ? badge(t.pages(doc.pages)) : null,
-      doc.lang ? badge(doc.lang) : null,
-      ...(doc.tags ?? []).map(name => h('span', { class: 'pm-site-home__badge pm-ui-badge' }, name)),
-      problems ? problems.errors ? badge(t.errors(problems.errors), 'danger') : problems.warnings ? badge(t.warnings(problems.warnings), 'warn') : badge(t.checked, 'ok') : null,
-    ]),
-  ])
-}
-
-const SearchBox = defineComponent({
-  name: 'PresmiumSiteSearch',
-  setup() {
-    const t = useMessages(WEB_MESSAGES)
-    const input = ref<HTMLInputElement>()
-    const onKey = (event: KeyboardEvent) => {
-      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
-        event.preventDefault()
-        input.value?.focus()
-      }
-    }
-    onMounted(() => window.addEventListener('keydown', onKey))
-    onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
-    return () => h('label', { class: 'pm-ui-search pm-site-home__search-box' }, [
-      h(PmIcon, { name: 'search', size: 15, strokeWidth: 1.8 }),
-      h('input', {
-        'ref': input,
-        'class': 'pm-site-home__search',
-        'type': 'search',
-        'value': query.value,
-        'placeholder': t.value.searchDocuments,
-        'aria-label': t.value.searchDocuments,
-        'onInput': (event: Event) => query.value = (event.target as HTMLInputElement).value,
-      }),
-      h('kbd', { class: 'pm-ui-kbd' }, 'Ctrl K'),
-    ])
-  },
-})
-
-const SiteHome = defineComponent({
-  name: 'PresmiumSiteHome',
-  setup() {
-    const { site } = useData()
-    const documents = useDocuments()
-    const tag = ref<string>()
-    const t = computed(() => WEB_MESSAGES[currentLocale()])
-    const tags = computed(() => [...new Set(documents.value.flatMap(doc => doc.tags ?? []))].sort())
-    const shown = computed(() => {
-      const words = query.value.trim().toLowerCase().split(/\s+/).filter(Boolean)
-      return documents.value.filter(doc => (!tag.value || doc.tags?.includes(tag.value))
-        && words.every(word => `${doc.title} ${doc.dir} ${doc.description ?? ''} ${(doc.tags ?? []).join(' ')}`.toLowerCase().includes(word)))
-    })
-    return () => h('div', { class: 'pm-site-home pm-ui' }, [
-      h('h1', { class: 'pm-site-home__title' }, site.value.title),
-      h('section', { 'class': 'pm-site-home__section', 'aria-labelledby': 'pm-site-home-documents' }, [
-        h('div', { class: 'pm-site-home__filters' }, [
-          h('h2', { id: 'pm-site-home-documents', class: 'pm-ui-heading' }, t.value.documentsHeading),
-          h(SearchBox),
-          tags.value.length > 0
-            ? h('div', { 'class': 'pm-site-home__tags pm-ui-segmented', 'role': 'group', 'aria-label': t.value.tags }, [
-                h('button', { 'type': 'button', 'class': 'pm-site-home__tag pm-ui-segmented__option', 'aria-pressed': tag.value === undefined, 'onClick': () => tag.value = undefined }, t.value.allTags),
-                ...tags.value.map(name => h('button', { 'type': 'button', 'class': 'pm-site-home__tag pm-ui-segmented__option', 'aria-pressed': tag.value === name, 'onClick': () => tag.value = tag.value === name ? undefined : name }, name)),
-              ])
-            : null,
-        ]),
-        h('div', { class: 'pm-site-home__grid' }, [
-          shown.value.length === 0
-            ? h(PmEmpty, { class: 'pm-site-home__empty', icon: 'document' }, () => t.value.noDocuments)
-            : h('ul', { class: 'pm-site-home__documents', role: 'list' }, shown.value.map(doc => card(doc, t.value))),
-        ]),
-      ]),
-    ])
-  },
-})
-
-const SiteRedirect = defineComponent({
-  name: 'PresmiumSiteRedirect',
-  setup() {
-    const { theme, page } = useData()
-    const href = computed(() => theme.value.presmium?.redirect as string | undefined)
-    onMounted(() => {
-      if (href.value) location.replace(href.value)
-    })
-    return () => h('p', { class: 'pm-site-home' }, [h('a', { class: 'pm-site-home__link', href: href.value }, page.value.title)])
-  },
-})
-
-function homeHost(lang: string, sharedState: HostAdapter['useSharedState']): HostAdapter {
-  const cursor = readonly(ref({ slide: 1, step: 0 }))
-  return {
-    mode: 'document',
-    lang,
-    useCursor: () => cursor,
-    useStep: () => readonly(ref(FINAL_STEP)),
-    useViewRole: () => readonly(ref('reader' as const)),
-    useStaticRender: () => readonly(ref(false)),
-    useSectionConfig: () => readonly(ref({})),
-    useSharedState: sharedState,
-    getService: presmiumService,
-    startReport: presmiumReport,
-    useDarkMode: () => useData().isDark,
-  }
-}
-
-const Layout = defineComponent({
-  name: 'PresmiumSiteHomeLayout',
-  setup() {
-    return () => h(DefaultTheme.Layout, null, {
-      'nav-bar-content-after': () => h(PmToolbar, { class: 'pm-toolbar--bar' }),
-      'nav-screen-content-after': () => h(PmToolbar, { class: 'pm-toolbar--screen' }),
-    })
-  },
-})
-
-export function createSiteHomeTheme(input: SiteHomeInput): Theme {
-  return {
-    extends: DefaultTheme,
-    Layout,
-    enhanceApp({ app, router, siteData }) {
-      app.component('PresmiumSiteHome', SiteHome)
-      app.component('PresmiumSiteRedirect', SiteRedirect)
-      router.onBeforeRouteChange = (to) => {
-        if (!inBrowser) return
-        const url = new URL(to, location.href)
-        const { base } = siteData.value
-        const own = [base, `${base}index.html`, siteData.value.themeConfig.presmium?.list]
-        if (url.origin !== location.origin || samePage(url.pathname, location.pathname) || own.includes(url.pathname)) return
-        location.assign(url.href)
-        return false
-      }
-      const shared = createSharedStates(`${siteData.value.title} (home)`)
-      installHost(app, homeHost(siteData.value.lang, shared.sharedState))
-      if (!inBrowser) return
-      const navigation: Navigation = { position: computed(() => ({ slide: 1, step: 0 })), go: () => {} }
-      void Promise.all(input.plugins.map(load => load().catch((error: unknown) => {
-        console.error('[presmium] a plugin module failed to load', error)
-        return {}
-      }))).then((modules) => {
-        modules.flatMap(module => pluginsOf(module, {})).forEach(registerPresmiumPlugin)
-        return startHost({ mode: 'document', config: {}, navigation, transports: shared.transports })
-      })
-    },
-  }
-}

package/src/client/index.ts

@@ -1,4 +0,0 @@
-export { createViewerHost, createViewerNavigation } from './host.ts'
-export { PresmiumPage, ViewMenu } from './page.ts'
-export { createPresmiumTheme } from './theme.ts'
-export type { ThemeInput } from './theme.ts'

package/src/client/page.ts

@@ -1,38 +0,0 @@
-import { useMessages } from '@lincyaw/host'
-import { listViews, useViewer, ViewHost } from '@lincyaw/viewer'
-import { useData } from 'vitepress'
-import type { ComputedRef, InjectionKey } from 'vue'
-import { computed, defineComponent, h, inject } from 'vue'
-import { pageOf, toPages, WEB_MESSAGES } from '../domain/index.ts'
-import type { WebPage } from '../domain/index.ts'
-
-export const PAGES: InjectionKey<{ pages: ComputedRef<WebPage[]>, prefix: ComputedRef<string> }> = Symbol('presmium.pages')
-
-export const PresmiumPage = defineComponent({
-  name: 'PresmiumPage',
-  setup() {
-    const { page } = useData()
-    const viewer = useViewer()
-    const known = inject(PAGES, undefined)
-    const sections = computed(() => {
-      const prefix = known?.prefix.value.slice(1) ?? ''
-      const path = prefix && page.value.relativePath.startsWith(`${prefix}/`) ? page.value.relativePath.slice(prefix.length + 1) : page.value.relativePath
-      return pageOf(known?.pages.value ?? toPages(viewer.doc.value), path)?.sections ?? []
-    })
-    return () => h(ViewHost, { sections: sections.value })
-  },
-})
-
-export const ViewMenu = defineComponent({
-  name: 'PresmiumViewMenu',
-  setup() {
-    const viewer = useViewer()
-    const t = useMessages(WEB_MESSAGES)
-    return () => h('select', {
-      'class': 'pm-view-menu',
-      'aria-label': t.value.viewMenu,
-      'value': viewer.view.value,
-      'onChange': (event: Event) => viewer.setView((event.target as HTMLSelectElement).value),
-    }, listViews().filter(view => !view.hidden || view.id === viewer.view.value).map(view => h('option', { value: view.id }, view.label)))
-  },
-})

package/src/client/preview.ts

@@ -1,71 +0,0 @@
-import { componentErrors, presmiumReport } from '@lincyaw/host'
-import type { NavigationPosition } from '@lincyaw/host'
-import { irBlocks, PREVIEW_REVISION, startPreviewAgent, stepKeys, stepTrail } from '@lincyaw/kernel'
-import type { PreviewAgent } from '@lincyaw/kernel'
-import type { FollowAnchor, Viewer } from '@lincyaw/viewer'
-import type { Ref } from 'vue'
-import { nextTick, watch } from 'vue'
-import { createViewerNavigation } from './host.ts'
-
-export interface WebPreviewOptions {
-  origins: string[]
-  document: string
-}
-
-export interface WebPreviewPage {
-  viewer: Viewer
-  dark: Ref<boolean>
-}
-
-export function startWebPreview(page: WebPreviewPage, options: WebPreviewOptions): void {
-  const { viewer, dark } = page
-  const navigation = createViewerNavigation(viewer)
-  const revision = () => {
-    const value = viewer.doc.value.meta[PREVIEW_REVISION]
-    return typeof value === 'string' ? value : undefined
-  }
-  const blockStep = (section: string, block: string) => {
-    const found = viewer.section(section)
-    return found ? [...irBlocks(found.blocks)].find(b => b.id === block)?.at : undefined
-  }
-  const agent: PreviewAgent | undefined = startPreviewAgent({
-    renderer: 'web',
-    document: options.document,
-    origins: options.origins,
-    revision,
-    position() {
-      const { section, step, trail, view } = navigation.position.value as NavigationPosition & FollowAnchor
-      return section === undefined ? undefined : { section, step, trail: trail ?? [], ...view ? { view } : {} }
-    },
-    go: ({ section, step, trail, view }) => navigation.go({ slide: 0, step: step ?? 0, section, ...trail ? { trail } : {}, ...view ? { view } : {} }),
-    reveal: ({ section, block }) => viewer.show({ section, step: (block && blockStep(section, block)) || 0 }),
-    setDark(value) {
-      dark.value = value
-    },
-    stepOf({ section, block }) {
-      const step = blockStep(section, block)
-      const found = viewer.section(section)
-      return step === undefined || !found ? undefined : { step, trail: stepTrail(stepKeys(found), step) }
-    },
-  })
-  if (!agent) return
-  watch(() => navigation.position.value, () => agent.moved())
-  watch(revision, () => void nextTick(() => requestAnimationFrame(() => agent.updated())))
-  watchProblems(agent)
-}
-
-function watchProblems(agent: PreviewAgent): void {
-  const told = new Set<string>()
-  watch(() => [presmiumReport()?.plugins ?? [], componentErrors()] as const, ([plugins, errors]) => {
-    const problems = [
-      ...plugins.filter(p => p.status === 'failed' || p.status === 'disabled').map(p => ({ level: p.status === 'failed' ? 'error' as const : 'warning' as const, plugin: p.id, message: p.reason ?? p.status })),
-      ...errors.map(e => ({ level: 'error' as const, plugin: e.component, message: e.message })),
-    ]
-    for (const problem of problems) {
-      const key = JSON.stringify(problem)
-      if (told.has(key)) continue
-      told.add(key)
-      agent.report(problem)
-    }
-  }, { immediate: true })
-}