@brillout/docpress 0.6.7 → 0.6.9

package/navigation/navigation-fullscreen/NavigationFullscreenButton.css

@@ -27,6 +27,6 @@ html:not(.navigation-fullscreen) #navigation-fullscreen-close {
 }
 
 html.navigation-fullscreen #page-content {
-  /* Make `Ctrl-F` browser search only crawl the navigation menu */
+  /* Make `Ctrl-F` browser search only crawl the navigation */
   visibility: hidden;
 }

package/navigation/navigation-fullscreen/initNavigationFullscreen.ts

@@ -32,7 +32,7 @@ function toggleNavExpend() {
 
 function updateColumnWidth() {
   const navMinWidth = 299
-  const navH1Groups = Array.from(document.querySelectorAll('#navigation-content-main .nav-h1-group'))
+  const navH1Groups = Array.from(document.querySelectorAll('#navigation-content-main .nav-items-level-1-group'))
   const numberOfColumnsMax = navH1Groups.length
 
   const widthAvailable = getViewportWidth()

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.6.7",
+  "version": "0.6.9",
+  "type": "module",
   "scripts": {
     "// Build vite.config.ts and +config.ts": "",
     "build": "rm -rf dist/ && tsc --project tsconfig.config.json",
@@ -14,19 +15,29 @@
     "release:breaking-change": "release-me minor"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^3.0.1",
-    "@mdx-js/react": "^3.0.1",
-    "@mdx-js/rollup": "^3.0.1",
-    "@shikijs/transformers": "^1.2.0",
+    "@brillout/picocolors": "^1.0.10",
+    "@mdx-js/mdx": "3.0.1",
+    "@mdx-js/react": "3.0.1",
+    "@mdx-js/rollup": "3.0.1",
+    "@shikijs/transformers": "1.2.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "balloon-css": "^1.2.0",
-    "rehype-pretty-code": "^0.13.0",
-    "remark-gfm": "^4.0.0",
-    "shiki": "^1.2.0",
-    "twemoji": "^13.1.0",
+    "balloon-css": "1.2.0",
+    "rehype-pretty-code": "0.13.0",
+    "remark-gfm": "4.0.0",
+    "shiki": "1.2.0",
+    "twemoji": "13.1.1",
     "vike-contributors": "^0.0.9"
   },
-  "type": "module",
+  "peerDependencies": {
+    "@types/node": "*",
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "*",
+    "vike": "^0.4.162",
+    "vite": "^5.2.0"
+  },
   "exports": {
     "./renderer/onRenderHtml": "./renderer/onRenderHtml.tsx",
     "./renderer/client": "./renderer/client.ts",
@@ -58,16 +69,6 @@
       ]
     }
   },
-  "peerDependencies": {
-    "@types/node": "*",
-    "@types/react": "*",
-    "@types/react-dom": "*",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "typescript": "*",
-    "vike": "^0.4.162",
-    "vite": "^5.2.0"
-  },
   "devDependencies": {
     "@brillout/release-me": "^0.1.13",
     "@types/node": "^15.12.1",
@@ -75,12 +76,12 @@
     "@types/react-dom": "^17.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^4.9.4",
-    "vike": "^0.4.166",
+    "typescript": "^5.4.3",
+    "vike": "^0.4.167",
     "vite": "^5.2.2"
   },
-  "license": "MIT",
   "repository": "https://github.com/brillout/docpress",
+  "license": "MIT",
   "publishConfig": {
     "access": "public"
   }

package/{markdownHeadingsVitePlugin.ts → parsePageSections.ts}

@@ -1,20 +1,19 @@
-export { markdownHeadingsVitePlugin }
-export type { MarkdownHeading }
+export { parsePageSections }
+export type { PageSection }
 
 import { assert } from './utils/assert.js'
 import { determineSectionUrlHash } from './utils/determineSectionUrlHash.js'
 import os from 'os'
 
-type MarkdownHeading = {
-  title: string
-  headingId: string | null
-  headingLevel: number
-  titleAddendum?: string
+type PageSection = {
+  pageSectionTitle: string
+  pageSectionId: string | null
+  pageSectionLevel: number
 }
 
-function markdownHeadingsVitePlugin() {
+function parsePageSections() {
   return {
-    name: 'mdx-headings',
+    name: '@brillout/docpress:parsePageSections',
     enforce: 'pre',
     transform: async (code: string, id: string) => {
       if (!id.endsWith('+Page.mdx')) {
@@ -27,7 +26,7 @@ function markdownHeadingsVitePlugin() {
 }
 
 function transform(code: string) {
-  const headings: MarkdownHeading[] = []
+  const pageSections: PageSection[] = []
   let isCodeBlock = false
   let codeNew = code
     .split('\n')
@@ -46,52 +45,49 @@ function transform(code: string) {
       }
 
       if (line.startsWith('#')) {
-        const { headingId, headingLevel, title, headingHtml } = parseMarkdownHeading(line)
-        headings.push({ headingId, headingLevel, title })
+        const { pageSectionId, pageSectionLevel, pageSectionTitle, headingHtml } = parsePageSection(line)
+        pageSections.push({ pageSectionId, pageSectionLevel, pageSectionTitle })
         return headingHtml
       }
 
       return line
     })
     .join('\n')
-  const headingsExportCode = `export const headings = [${headings
-    .map((heading) => JSON.stringify(heading))
+  const exportCode = `export const pageSectionsExport = [${pageSections
+    .map((pageSection) => JSON.stringify(pageSection))
     .join(', ')}];`
-  codeNew += `\n\n${headingsExportCode}\n`
+  codeNew += `\n\n${exportCode}\n`
   return codeNew
 }
 
-function parseMarkdownHeading(line: string): MarkdownHeading & { headingHtml: string } {
+function parsePageSection(line: string): PageSection & { headingHtml: string } {
   const [lineBegin, ...lineWords] = line.split(' ')
   assert(lineBegin.split('#').join('') === '', { line, lineWords })
-  const headingLevel = lineBegin.length
+  const pageSectionLevel = lineBegin.length
 
   const titleMdx = lineWords.join(' ')
   assert(!titleMdx.startsWith(' '), { line, lineWords })
   assert(titleMdx, { line, lineWords })
 
-  const headingMdx = {
-    title: titleMdx,
-    anchor: titleMdx,
-  }
+  let pageSectionTitle = titleMdx
+  let anchor = titleMdx
   {
-    // Support custom anchor like: `## title{#custom-anchor}`
+    // Support custom anchor: `## Some Title{#custom-anchor}`
     const customAnchor = /(?<={#).*(?=})/g.exec(titleMdx)?.[0]
     if (customAnchor) {
-      headingMdx.anchor = customAnchor
-      headingMdx.title = titleMdx.replace(/{#.*}/g, '')
+      anchor = customAnchor
+      pageSectionTitle = titleMdx.replace(/{#.*}/g, '')
     }
   }
-  const headingId = determineSectionUrlHash(headingMdx.anchor)
-  const title = headingMdx.title
+  const pageSectionId = determineSectionUrlHash(anchor)
 
-  const titleParsed = parseTitle(title)
-  assert(headingId === null || headingId.length > 0)
-  const headingAttrId = headingId === null ? '' : ` id="${headingId}"`
-  const headingHtml = `<h${headingLevel}${headingAttrId}>${titleParsed}</h${headingLevel}>`
+  const titleParsed = parseTitle(pageSectionTitle)
+  assert(pageSectionId === null || pageSectionId.length > 0)
+  const headingId = pageSectionId === null ? '' : ` id="${pageSectionId}"`
+  const headingHtml = `<h${pageSectionLevel}${headingId}>${titleParsed}</h${pageSectionLevel}>`
 
-  const heading = { headingLevel, title, headingId, headingHtml }
-  return heading
+  const pageSection = { pageSectionLevel, pageSectionTitle, pageSectionId, headingHtml }
+  return pageSection
 }
 
 function parseTitle(titleMarkdown: string): string {

package/parseTitle.ts

@@ -1,91 +1,8 @@
 export { parseTitle }
-export { getHeadingsWithProcessedTitle }
+export { withEmoji }
 
 import React from 'react'
-import type { HeadingDefinition, HeadingDetachedDefinition, Heading, HeadingDetached } from './types/Heading'
-import { assert, Emoji, EmojiName } from './utils/server'
-
-function getHeadingsWithProcessedTitle(config: {
-  headings: HeadingDefinition[]
-  headingsDetached: HeadingDetachedDefinition[]
-}): {
-  headingsProcessed: Heading[]
-  headingsDetachedProcessed: HeadingDetached[]
-} {
-  const headingsWithoutBreadcrumb: Omit<Heading, 'headingsBreadcrumb'>[] = config.headings.map(
-    (heading: HeadingDefinition) => {
-      const titleProcessed: JSX.Element = parseTitle(heading.title)
-
-      const titleInNav = heading.titleInNav || heading.title
-      let titleInNavProcessed: JSX.Element
-      titleInNavProcessed = parseTitle(titleInNav)
-      if ('titleEmoji' in heading) {
-        assert(heading.titleEmoji)
-        titleInNavProcessed = withEmoji(heading.titleEmoji, titleInNavProcessed)
-      }
-
-      const headingProcessed: Omit<Heading, 'headingsBreadcrumb'> = {
-        ...heading,
-        title: titleProcessed,
-        titleInNav: titleInNavProcessed,
-      }
-      return headingProcessed
-    },
-  )
-
-  const headingsProcessed: Heading[] = []
-  headingsWithoutBreadcrumb.forEach((heading) => {
-    const headingsBreadcrumb = getHeadingsBreadcrumb(heading, headingsProcessed)
-    headingsProcessed.push({
-      ...heading,
-      headingsBreadcrumb,
-    })
-  })
-
-  const headingsDetachedProcessed = config.headingsDetached.map((headingsDetached) => {
-    const { url, title } = headingsDetached
-    assert(
-      headingsProcessed.find((heading) => heading.url === url) === undefined,
-      `remove ${headingsDetached.url} from headingsDetached`,
-    )
-    const titleProcessed = typeof title === 'string' ? parseTitle(title) : title
-    return {
-      ...headingsDetached,
-      level: 2 as const,
-      title: titleProcessed,
-      titleInNav: titleProcessed,
-      headingsBreadcrumb: null,
-    }
-  })
-
-  assertHeadingsUrl([...headingsProcessed, ...headingsDetachedProcessed])
-  return { headingsProcessed, headingsDetachedProcessed }
-}
-
-function getHeadingsBreadcrumb(heading: Omit<Heading, 'headingsBreadcrumb'>, headings: Heading[]) {
-  const headingsBreadcrumb: Heading[] = []
-  let levelCurrent = heading.level
-  headings
-    .slice()
-    .reverse()
-    .forEach((parentCandidate) => {
-      const isParent = parentCandidate.level < levelCurrent
-      if (isParent) {
-        levelCurrent = parentCandidate.level
-        headingsBreadcrumb.push(parentCandidate)
-      }
-    })
-  return headingsBreadcrumb
-}
-
-function assertHeadingsUrl(headings: { url?: null | string }[]) {
-  headings.forEach((heading) => {
-    if (heading.url) {
-      const { url } = heading
-      assert(url.startsWith('/'))
-    }
-  })
-}
+import { Emoji, EmojiName } from './utils/server'
 
 function parseTitle(title: string): JSX.Element {
   type Part = { nodeType: 'text' | 'code'; content: string }

package/renderer/onRenderHtml.tsx

@@ -34,11 +34,15 @@ async function onRenderHtml(pageContextOriginal: PageContextOriginal) {
       <head>
         <meta charset="UTF-8" />
         <link rel="icon" href="${pageContextResolved.meta.faviconUrl}" />
-        <title>${pageContextResolved.meta.title}</title>
+        <title>${pageContextResolved.documentTitle}</title>
         ${descriptionTag}
         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
         ${docSearchCSS}
-        ${getOpenGraphTags(pageContextOriginal.urlPathname, pageContextResolved.meta)}
+        ${getOpenGraphTags(
+          pageContextOriginal.urlPathname,
+          pageContextResolved.documentTitle,
+          pageContextResolved.meta,
+        )}
       </head>
       <body>
         <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
@@ -49,9 +53,10 @@ async function onRenderHtml(pageContextOriginal: PageContextOriginal) {
 
 function getOpenGraphTags(
   url: string,
-  meta: { title: string; tagline: string; websiteUrl: string; twitterHandle: string; bannerUrl?: string },
+  documentTitle: string,
+  meta: { tagline: string; websiteUrl: string; twitterHandle: string; bannerUrl?: string },
 ) {
-  const { title, tagline, websiteUrl, twitterHandle, bannerUrl } = meta
+  const { tagline, websiteUrl, twitterHandle, bannerUrl } = meta
 
   assert(url.startsWith('/'))
   if (!bannerUrl) return ''
@@ -59,7 +64,7 @@ function getOpenGraphTags(
   // See view-source:https://vitejs.dev/
   return escapeInject`
     <meta property="og:type" content="website">
-    <meta property="og:title" content="${title}">
+    <meta property="og:title" content="${documentTitle}">
     <meta property="og:image" content="${bannerUrl}">
     <meta property="og:url" content="${websiteUrl}">
     <meta property="og:description" content="${tagline}">

package/types/Heading.ts

@@ -1,49 +1,53 @@
-export { Heading }
-export { HeadingDetached }
+export { HeadingResolved }
+export { HeadingDetachedResolved }
 export { HeadingDetachedDefinition }
 export { HeadingDefinition }
 
 import type { EmojiName } from '../utils/server'
 
-type Heading = Omit<HeadingDefinition, 'title' | 'titleInNav'> & {
+type NavItemLevel =
+  | NaItemDefinitionLevel
+  | {
+      level: 3
+      url: null | string
+    }
+type NaItemDefinitionLevel =
+  | ({ level: 1; titleEmoji: EmojiName } & IsNavCategory)
+  | ({ level: 4 } & IsNavCategory)
+  | {
+      level: 2
+      sectionTitles?: string[]
+      url: null | string
+    }
+type IsNavCategory = {
+  url?: undefined
+  titleDocument?: undefined
+  titleInNav?: undefined
+}
+
+type HeadingResolved = HeadingCommon & {
+  level: number
   title: JSX.Element
   titleInNav: JSX.Element
-  headingsBreadcrumb: (Heading | HeadingDetached)[]
-  sectionTitles?: string[]
+  linkBreadcrumb: JSX.Element[]
 }
-type HeadingDetached = Omit<Heading, 'level' | 'headingsBreadcrumb'> & {
+type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'> & {
   level: 2
-  headingsBreadcrumb: null
+  linkBreadcrumb: null
 }
 type HeadingDetachedDefinition = {
   url: string
   title: string | JSX.Element
-  sectionTitles?: string[]
 }
-type HeadingDefinition = HeadingBase &
-  (
-    | ({ level: 1; titleEmoji: EmojiName } & HeadingAbstract)
-    | ({ level: 4 } & HeadingAbstract)
-    | {
-        level: 2
-        sectionTitles?: string[]
-        url: null | string
-      }
-    | {
-        level: 3
-        url: null | string
-      }
-  )
-type HeadingBase = {
-  title: string
-  level: number
+type HeadingDefinition = HeadingCommon &
+  NaItemDefinitionLevel & {
+    title: string
+    // TODO: rename to titleNav
+    titleInNav?: string
+  }
+type HeadingCommon = {
   url?: null | string
+  sectionTitles?: string[]
+  // TODO: remove? Both Vike and Telefunc set it to the same value than docpress.config.js#projectInfo.projectName
   titleDocument?: string
-  titleInNav?: string
-  // titleSize?: string
-}
-type HeadingAbstract = {
-  url?: undefined
-  titleDocument?: undefined
-  titleInNav?: undefined
 }

package/types.d.ts

@@ -3,5 +3,5 @@
 declare module '*.mdx' {
   const value: () => JSX.Element
   export default value
-  export const headings: { level: number; title: string; id: string; titleAddendum?: string }[]
+  export const headings: { level: number; title: string; id: string }[]
 }

package/vite.config.ts

@@ -2,7 +2,7 @@ import mdx from '@mdx-js/rollup'
 import react from '@vitejs/plugin-react-swc'
 import vike from 'vike/plugin'
 import { UserConfig } from 'vite'
-import { markdownHeadingsVitePlugin } from './markdownHeadingsVitePlugin.js'
+import { parsePageSections } from './parsePageSections.js'
 import rehypePrettyCode from 'rehype-pretty-code'
 import remarkGfm from 'remark-gfm'
 import { transformerNotationDiff } from '@shikijs/transformers'
@@ -15,7 +15,7 @@ const remarkPlugins = [remarkGfm]
 const config: UserConfig = {
   root,
   plugins: [
-    markdownHeadingsVitePlugin(),
+    parsePageSections(),
     mdx({ rehypePlugins, remarkPlugins }),
     // @vitejs/plugin-react-swc needs to be added *after* the mdx plugins
     react(),

package/dist/markdownHeadingsVitePlugin.d.ts

@@ -1,13 +0,0 @@
-export { markdownHeadingsVitePlugin };
-export type { MarkdownHeading };
-type MarkdownHeading = {
-    title: string;
-    headingId: string | null;
-    headingLevel: number;
-    titleAddendum?: string;
-};
-declare function markdownHeadingsVitePlugin(): {
-    name: string;
-    enforce: string;
-    transform: (code: string, id: string) => Promise<string | undefined>;
-};