@brillout/docpress 0.5.39 → 0.5.40-commit-51be4fa

package/navigation/NavigationHeader.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import iconGithub from '../icons/github.svg'
+import iconTwitter from '../icons/twitter.svg'
+import iconDiscord from '../icons/discord.svg'
+import iconChangelog from '../icons/changelog.svg'
+import iconLanguages from '../icons/languages.svg'
+import { usePageContext } from '../renderer/usePageContext'
+
+export { NavigationHeader }
+
+function NavigationHeader() {
+  const pageContext = usePageContext()
+  return (
+    <div
+      id="navigation-header"
+      className={pageContext.config.pressKit && 'press-kit'}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        marginBottom: -5
+      }}
+    >
+      <a
+        id="navigation-header-logo"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          color: 'inherit',
+          justifyContent: 'left',
+          textDecoration: 'none',
+          paddingTop: 12,
+          paddingBottom: 7,
+          ...pageContext.config.navHeaderWrapperStyle
+        }}
+        href="/"
+      >
+        {pageContext.config.navHeader}
+      </a>
+      <Links />
+    </div>
+  )
+}
+
+function Links() {
+  const pageContext = usePageContext()
+  const { projectInfo, i18n } = pageContext.config
+  const iconI18n = !i18n ? null : (
+    <LinkIcon
+      className="decolorize-4"
+      icon={iconLanguages}
+      href={'/languages'}
+      style={{ height: 21, position: 'relative', top: 0, left: 0 }}
+    />
+  )
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        paddingTop: 0,
+        justifyContent: 'left'
+      }}
+    >
+      <LinkIcon className="decolorize-4" icon={iconGithub} href={projectInfo.githubRepository} />
+      <LinkIcon className="decolorize-6" icon={iconDiscord} href={projectInfo.discordInvite} />
+      <LinkIcon className="decolorize-7" icon={iconTwitter} href={projectInfo.twitterProfile} />
+      <div className="decolorize-6 colorize-on-hover" id="docsearch-desktop" />
+      {iconI18n}
+      <ChangelogButton />
+    </div>
+  )
+}
+
+function ChangelogButton() {
+  const pageContext = usePageContext()
+  const { projectInfo } = pageContext.config
+  return (
+    <a
+      href={`${projectInfo.githubRepository}/blob/main/CHANGELOG.md`}
+      className="button colorize-on-hover"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '1px 7px',
+        marginLeft: 2,
+        fontSize: '0.97em',
+        color: 'inherit'
+      }}
+    >
+      <span id="version-number" className="decolorize-7">
+        v{projectInfo.projectVersion}
+      </span>
+      <img className="decolorize-6" src={iconChangelog} height={16} style={{ marginLeft: 5 }} />
+    </a>
+  )
+}
+
+function LinkIcon({ className, icon, href, style }: { className: string; icon: string; href: string; style?: any }) {
+  return (
+    <>
+      <a
+        className={'colorize-on-hover ' + className}
+        href={href}
+        style={{ padding: 3, display: 'inline-block', lineHeight: 0 }}
+      >
+        <img src={icon} height="20" style={style} />
+      </a>
+    </>
+  )
+}

package/navigation/navigation-fullscreen/NavigationFullscreenButton.css

@@ -0,0 +1,32 @@
+:root {
+  --navigation-fullscreen-button-width: 20px;
+}
+#navigation-fullscreen-button {
+  width: var(--navigation-fullscreen-button-width);
+  position: relative;
+  z-index: 2;
+}
+#navigation-wrapper:hover + #navigation-fullscreen-button > div > div,
+#navigation-fullscreen-button:hover > div > div {
+  left: 0px;
+}
+#navigation-fullscreen-button > div > div {
+  transition: all 0.3s ease-in-out;
+  left: -20px;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: #eee !important;
+  background: url('./chevron.svg');
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+html:not(.navigation-fullscreen) #navigation-fullscreen-close {
+  display: none;
+}
+
+html.navigation-fullscreen #page-content {
+  /* Make `Ctrl-F` browser search only crawl the navigation menu */
+  visibility: hidden;
+}

package/navigation/navigation-fullscreen/NavigationFullscreenButton.tsx

@@ -0,0 +1,44 @@
+export { NavigationFullscreenButton }
+export { NavigationFullscreenClose }
+
+import React from 'react'
+import './NavigationFullscreenButton.css'
+import closeIcon from './close.svg'
+
+function NavigationFullscreenButton() {
+  return (
+    <>
+      <a id="navigation-fullscreen-button">
+        <div
+          style={{
+            position: 'fixed',
+            cursor: 'pointer',
+            height: '100vh',
+            width: 20,
+            overflow: 'hidden'
+          }}
+        >
+          <div></div>
+        </div>
+        <div
+          style={{ position: 'fixed', height: '100vh', width: 20 }}
+          aria-label="Press <Esc>"
+          data-balloon-pos="right"
+        ></div>
+      </a>
+    </>
+  )
+}
+
+function NavigationFullscreenClose() {
+  return (
+    <a
+      id="navigation-fullscreen-close"
+      style={{ position: 'absolute', top: 11, right: 11, zIndex: 10 }}
+      aria-label="Press <Esc>"
+      data-balloon-pos="left"
+    >
+      <img src={closeIcon} height={50} width={50} style={{ display: 'block' }} />
+    </a>
+  )
+}

package/navigation/navigation-fullscreen/initNavigationFullscreen.ts

@@ -0,0 +1,116 @@
+export { initNavigationFullscreen }
+
+import { assert } from '../../utils/client'
+
+let scrollPositionBeforeToggle: number = 0
+
+function initNavigationFullscreen() {
+  updateColumnWidth()
+  window.addEventListener('resize', updateColumnWidth, { passive: true })
+  document.getElementById('navigation-fullscreen-button')!.onclick = toggleNavExpend
+  document.getElementById('navigation-fullscreen-close')!.onclick = toggleNavExpend
+  document.addEventListener(
+    // We don't use keydown to not interfere with user pressing `<Esc>` for closing the browser's `<Ctrl-F>` search diablog, see https://stackoverflow.com/questions/66595035/how-to-detect-escape-key-if-search-bar-of-browser-is-open
+    'keydown',
+    (ev) => {
+      if (document.body.classList.contains('DocSearch--active')) return
+      if (ev.key === 'Escape') toggleNavExpend()
+    },
+    false
+  )
+}
+
+function toggleNavExpend() {
+  const navContainer = document.getElementById('navigation-container')!
+  const scrollPos = navContainer.scrollTop
+  document.documentElement.classList.toggle('navigation-fullscreen')
+  if (scrollPositionBeforeToggle !== undefined) {
+    navContainer.scrollTop = scrollPositionBeforeToggle
+  }
+  scrollPositionBeforeToggle = scrollPos
+}
+
+function updateColumnWidth() {
+  const navMinWidth = 299
+  const navH1Groups = Array.from(document.querySelectorAll('#navigation-content-main .nav-h1-group'))
+  const numberOfColumnsMax = navH1Groups.length
+
+  const widthAvailable = getViewportWidth()
+  const numberOfColumns = Math.max(1, Math.min(numberOfColumnsMax, Math.floor(widthAvailable / navMinWidth)))
+
+  let columns = navH1Groups.map((navH1Group) => {
+    const column = [
+      {
+        element: navH1Group,
+        elementHeight: navH1Group.children.length
+      }
+    ]
+    return column
+  })
+
+  mergeColumns(columns, numberOfColumns)
+
+  const navContent = document.getElementById('navigation-content-main')!
+
+  Array.from(navContent.children).forEach((child) => {
+    assert(child.className === 'nav-column')
+  })
+  navContent.innerHTML = ''
+
+  columns.forEach((column) => {
+    const columnEl = document.createElement('div')
+    columnEl.className = 'nav-column'
+    column.forEach(({ element }) => {
+      columnEl.appendChild(element)
+    })
+    navContent.appendChild(columnEl)
+  })
+
+  const navItemMaxWidth = 350
+  navContent.style.maxWidth = `${numberOfColumns * navItemMaxWidth}px`
+}
+function getViewportWidth(): number {
+  // `window.innerWidth` inlcudes scrollbar width: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+  return document.documentElement.clientWidth
+}
+
+function mergeColumns<T>(columns: { element: T; elementHeight: number }[][], maxNumberOfColumns: number) {
+  assert(columns.length > 0)
+  assert(maxNumberOfColumns > 0)
+  if (columns.length <= maxNumberOfColumns) {
+    return columns
+  }
+
+  let mergeCandidate = {
+    i: -1,
+    mergeHeight: Infinity
+  }
+  for (let i = 0; i <= columns.length - 2; i++) {
+    const column1 = columns[i + 0]
+    const column2 = columns[i + 1]
+    const column1Height = sum(column1.map((c) => c.elementHeight))
+    const column2Height = sum(column2.map((c) => c.elementHeight))
+    const mergeHeight = column1Height + column2Height
+    if (mergeCandidate.mergeHeight > mergeHeight) {
+      mergeCandidate = {
+        i,
+        mergeHeight
+      }
+    }
+  }
+
+  {
+    const { i } = mergeCandidate
+    assert(-1 < i && i < columns.length - 1, { i, columnsLength: columns.length, maxNumberOfColumns })
+    columns[i] = [...columns[i], ...columns[i + 1]]
+    columns.splice(i + 1, 1)
+  }
+
+  mergeColumns(columns, maxNumberOfColumns)
+}
+
+function sum(arr: number[]): number {
+  let total = 0
+  arr.forEach((n) => (total += n))
+  return total
+}

package/package.json

@@ -1,23 +1,14 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.5.39",
+  "version": "0.5.40-commit-51be4fa",
   "scripts": {
+    "// Build vite.config.ts": "",
+    "build": "rm -rf dist/ && tsc --project tsconfig.vite-config.json",
     "// Check types while developing": "",
     "types": "tsc --noEmit --watch",
-    "// Develop Docpress using demo/": "",
-    "dev": "pnpm run dev:build && pnpm run dev:start",
-    "dev:build": "tsup",
-    "dev:start": "node dist/index.js dev",
-    "// Build Docpress": "",
-    "build": "rimraf dist/ && framework-builder",
-    "// Preview build": "",
-    "preview": "pnpm run preview:build && pnpm run preview:start",
-    "preview:build": "pnpm run build && node dist/cli/index.js build",
-    "preview:start": "node dist/cli/index.js preview",
-    "// Test": "",
-    "test": "test-e2e",
     "// Release": "",
     "release": "release-me patch",
+    "release:commit": "release-me commit",
     "release:breaking-change": "release-me minor"
   },
   "dependencies": {
@@ -26,73 +17,60 @@
     "@mdx-js/rollup": "^2.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "balloon-css": "^1.2.0",
-    "express": "^4.17.1",
     "rehype-pretty-code": "^0.3.2",
     "remark-gfm": "^3.0.1",
     "shiki": "^0.10.1",
     "twemoji": "^13.1.0",
-    "vike": "^0.4.158",
-    "vike-contributors": "^0.0.8",
-    "vite": "^4.3.9"
+    "vike-contributors": "^0.0.9"
   },
   "type": "module",
   "exports": {
-    "./renderer/_default.page.server.js": "./dist/renderer/_default.page.server.js",
-    "./renderer/_default.page.client.js": "./dist/renderer/_default.page.client.js",
-    "./renderer/_default.page.server.css": "./dist/renderer/_default.page.server.css",
-    "./renderer/_default.page.client.css": "./dist/renderer/_default.page.client.css",
-    ".": "./dist/index.js",
-    "./features/FeatureList": "./dist/components/features/FeatureList.js",
+    "./renderer/onRenderHtml": "./renderer/onRenderHtml.tsx",
+    "./renderer/client.ts": "./renderer/client.ts",
+    ".": "./index.ts",
+    "./features/FeatureList": "./components/features/FeatureList.tsx",
     "./features/FeatureList.css": {
-      "browser": "./dist/components/features/FeatureList.css"
+      "browser": "./components/features/FeatureList.css"
     },
     "./features/initFeatureList": {
-      "browser": "./dist/components/features/initFeatureList.js"
-    }
+      "browser": "./components/features/initFeatureList.ts"
+    },
+    "./vite-config": "./dist/vite.config.js",
+    "./style": "./css/index.css"
   },
   "typesVersions": {
     "*": {
       "*": [
-        "dist/*"
+        "./*"
       ],
       "types": [
-        "types.d.ts"
+        "./types.d.ts"
+      ],
+      "vite-config": [
+        "./dist/vite.config.d.ts"
       ],
       "features/*": [
-        "dist/components/features/*"
+        "./components/features/*"
       ]
     }
   },
   "peerDependencies": {
+    "vike": "^0.4.161",
+    "vite": "^4.3.9",
     "react": "18",
     "react-dom": "18"
   },
   "devDependencies": {
-    "@brillout/docpress": "link:.",
-    "@brillout/framework-builder": "^0.1.1",
     "@brillout/release-me": "^0.1.13",
-    "@brillout/test-e2e": "^0.5.25",
-    "@types/express": "^4.17.13",
     "@types/node": "^15.12.1",
     "@types/react": "^17.0.44",
     "@types/react-dom": "^17.0.6",
-    "docpress": "link:",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.74.1",
-    "tsup": "^7.0.0",
-    "tsx": "^3.12.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vike": "^0.4.161",
+    "vite": "^4.3.9",
     "typescript": "^4.9.4"
   },
-  "bin": {
-    "docpress": "./bin.js"
-  },
-  "files": [
-    "types.d.ts",
-    "bin.js",
-    "dist/"
-  ],
   "license": "MIT",
   "repository": "https://github.com/brillout/docpress",
   "publishConfig": {

package/parseEmojis.ts

@@ -0,0 +1,35 @@
+export { parseEmojis }
+
+import twemoji from 'twemoji'
+
+const emojiList = {
+  // https://emojipedia.org/no-entry/
+  ':no_entry:': 0x26d4,
+  // https://emojipedia.org/warning/
+  ':warning:': 0x26a0,
+  // https://emojipedia.org/trophy/
+  ':trophy:': 0x1f3c6,
+  // https://emojipedia.org/construction/
+  ':construction:': 0x1f6a7
+  /*
+  // https://emojipedia.org/red-heart/
+  ':heart:': 0x2764,
+  */
+}
+
+function parseEmojis(html: string) {
+  Object.entries(emojiList).forEach(([shortcode, codepoint]) => {
+    if (!html.includes(shortcode)) {
+      return
+    }
+    const emojiStr = twemoji.convert.fromCodePoint(codepoint as any)
+    let emojiImg: any = twemoji.parse(emojiStr, {
+      folder: 'svg',
+      ext: '.svg'
+    })
+    const style = 'height: 1.275em; width: 1.275em; vertical-align: -20%'
+    emojiImg = emojiImg.replace('<img class="emoji" ', `<img style="${style}" `)
+    html = html.split(shortcode).join(emojiImg)
+  })
+  return html
+}

package/parseTitle.ts

@@ -0,0 +1,139 @@
+export { parseTitle }
+export { getHeadingsWithProcessedTitle }
+
+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('/'))
+    }
+  })
+}
+
+function parseTitle(title: string): JSX.Element {
+  type Part = { nodeType: 'text' | 'code'; content: string }
+  const parts: Part[] = []
+  let current: Part | undefined
+  title.split('').forEach((letter) => {
+    if (letter === '`') {
+      if (current?.nodeType === 'code') {
+        // </code>
+        parts.push(current)
+        current = undefined
+      } else {
+        // <code>
+        if (current) {
+          parts.push(current)
+        }
+        current = { nodeType: 'code', content: '' }
+      }
+    } else {
+      if (!current) {
+        current = { nodeType: 'text', content: '' }
+      }
+      current.content += letter
+    }
+  })
+  if (current) {
+    parts.push(current)
+  }
+
+  const titleJsx = React.createElement(
+    React.Fragment,
+    {},
+    ...parts.map((part, i) =>
+      React.createElement(part.nodeType === 'code' ? 'code' : React.Fragment, { key: i }, part.content)
+    )
+  )
+
+  return titleJsx
+}
+
+function withEmoji(name: EmojiName, title: string | JSX.Element): JSX.Element {
+  const style = { fontSize: '1.4em' }
+  //return React.createElement(React.Fragment, null, Emoji({ name, style }), ' ', title)
+  return React.createElement(
+    'span',
+    { style },
+    Emoji({ name }),
+    ' ',
+    React.createElement('span', { style: { fontSize: '1rem' } }, title)
+  )
+}

package/renderer/client.ts

@@ -0,0 +1,4 @@
+import '../css/index.css'
+import '../autoScrollNav'
+import '../installSectionUrlHashs'
+import '../navigation/Navigation.client'

package/renderer/onRenderHtml.tsx

@@ -0,0 +1,69 @@
+export { onRenderHtml }
+
+import ReactDOMServer from 'react-dom/server'
+import React from 'react'
+import { escapeInject, dangerouslySkipEscape } from 'vike/server'
+import { PageLayout } from '../PageLayout'
+import { resolvePageContext, PageContextOriginal } from '../config/resolvePageContext'
+import { getDocSearchJS, getDocSearchCSS } from '../algolia/DocSearch'
+import { parseEmojis } from '../parseEmojis'
+import { assert } from '../utils/server'
+
+async function onRenderHtml(pageContextOriginal: PageContextOriginal) {
+  const { Page } = pageContextOriginal
+  const pageContextResolved = resolvePageContext(pageContextOriginal)
+
+  const page = (
+    <PageLayout pageContext={pageContextResolved}>
+      <Page />
+    </PageLayout>
+  )
+
+  const descriptionTag = pageContextResolved.isLandingPage
+    ? dangerouslySkipEscape(`<meta name="description" content="${pageContextResolved.meta.tagline}" />`)
+    : ''
+
+  const docSearchJS = getDocSearchJS(pageContextResolved)
+  const docSearchCSS = getDocSearchCSS(pageContextResolved)
+
+  let pageHtml = ReactDOMServer.renderToString(page)
+  pageHtml = parseEmojis(pageHtml)
+
+  return escapeInject`<!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="${pageContextResolved.meta.faviconUrl}" />
+        <title>${pageContextResolved.meta.title}</title>
+        ${descriptionTag}
+        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
+        ${docSearchCSS}
+        ${getOpenGraphTags(pageContextOriginal.urlPathname, pageContextResolved.meta)}
+      </head>
+      <body>
+        <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
+        ${docSearchJS}
+      </body>
+    </html>`
+}
+
+function getOpenGraphTags(
+  url: string,
+  meta: { title: string; tagline: string; websiteUrl: string; twitterHandle: string; bannerUrl?: string }
+) {
+  const { title, tagline, websiteUrl, twitterHandle, bannerUrl } = meta
+
+  assert(url.startsWith('/'))
+  if (!bannerUrl) return ''
+
+  // See view-source:https://vitejs.dev/
+  return escapeInject`
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="${title}">
+    <meta property="og:image" content="${bannerUrl}">
+    <meta property="og:url" content="${websiteUrl}">
+    <meta property="og:description" content="${tagline}">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="${twitterHandle}">
+  `
+}