@brillout/docpress 0.5.40 → 0.6.1

package/navigation/Navigation.tsx

@@ -0,0 +1,211 @@
+export { Navigation }
+export { NavigationMask }
+
+import React from 'react'
+import { NavigationHeader } from './NavigationHeader'
+import { Heading, HeadingDetached } from '../types/Heading'
+import { assert, Emoji, assertWarning, jsxToTextContent } from '../utils/server'
+import './Navigation.css'
+import { NavigationFullscreenClose } from './navigation-fullscreen/NavigationFullscreenButton'
+
+function Navigation({
+  pageContext
+}: {
+  pageContext: {
+    headingsProcessed: Heading[]
+    headingsOfDetachedPage: null | (Heading | HeadingDetached)[]
+    urlPathname: string
+  }
+}) {
+  const currentUrl = pageContext.urlPathname
+  return (
+    <>
+      <div id="navigation-container">
+        <NavigationHeader />
+        {pageContext.headingsOfDetachedPage && (
+          <>
+            {pageContext.headingsOfDetachedPage.length > 1 && (
+              <NavigationContent
+                id="navigation-content-detached"
+                headingsProcessed={pageContext.headingsOfDetachedPage}
+                currentUrl={currentUrl}
+              />
+            )}
+            <DetachedPageNote />
+          </>
+        )}
+        <NavigationContent
+          id="navigation-content-main"
+          headingsProcessed={pageContext.headingsProcessed}
+          currentUrl={currentUrl}
+        />
+        {/* <ScrollOverlay /> */}
+        <NavigationFullscreenClose />
+      </div>
+    </>
+  )
+}
+
+function NavigationMask() {
+  return <div id="navigation-mask" />
+}
+
+function NavigationContent(props: {
+  id: 'navigation-content-main' | 'navigation-content-detached'
+  headingsProcessed: (Heading | HeadingDetached)[]
+  currentUrl: string
+}) {
+  const headings = getHeadingsWithComputedProps(props.headingsProcessed, props.currentUrl)
+
+  const headingsGrouped = groupHeadings(headings)
+
+  return (
+    <div id={props.id} className="navigation-content">
+      <div className="nav-column" style={{ position: 'relative' }}>
+        {headingsGrouped.map((headingsH1, i) => (
+          <div className="nav-h1-group" key={i}>
+            <Heading heading={headingsH1} />
+            {headingsH1.headings.map((heading, j) => (
+              <Heading heading={heading} key={j} />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function Heading({
+  heading
+}: {
+  heading: {
+    level: number
+    url?: string | null
+    title: string | JSX.Element
+    titleInNav: string | JSX.Element
+    computed: {
+      isActive: boolean
+      isActiveFirst: boolean
+      isActiveLast: boolean
+      isFirstOfItsKind: boolean
+      isLastOfItsKind: boolean
+    }
+  }
+}) {
+  assert([1, 2, 3, 4].includes(heading.level), heading)
+  if (heading.level === 1 || heading.level === 4) {
+    assert(heading.url === undefined)
+  } else {
+    const sectionTitle = jsxToTextContent(heading.title)
+    assertWarning(
+      heading.url,
+      `${jsxToTextContent(
+        heading.titleInNav
+      )} is missing a URL hash. Use \`<h2 id="url-hash">${sectionTitle}</h2>\` instead of \`## ${sectionTitle}\`.`
+    )
+  }
+  return (
+    <a
+      className={[
+        'nav-item',
+        'nav-item-h' + heading.level,
+        heading.computed.isActive && ' is-active',
+        heading.computed.isActiveFirst && ' is-active-first',
+        heading.computed.isActiveLast && ' is-active-last',
+        heading.computed.isFirstOfItsKind && 'nav-item-first-of-its-kind',
+        heading.computed.isLastOfItsKind && 'nav-item-last-of-its-kind'
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      href={heading.url ?? undefined}
+    >
+      {/* <span className="nav-item-text">{heading.titleInNav}</span> */}
+      {heading.titleInNav}
+    </a>
+  )
+}
+
+function groupHeadings<T extends { level: number }>(headings: T[]) {
+  const headingsGrouped: (T & { headings: T[] })[] = []
+  const headingLevelMin: number = Math.min(...headings.map((h) => h.level))
+  headings.forEach((heading) => {
+    if (heading.level === headingLevelMin) {
+      headingsGrouped.push({ ...heading, headings: [] })
+    } else {
+      headingsGrouped[headingsGrouped.length - 1].headings.push(heading)
+    }
+  })
+  return headingsGrouped
+}
+
+function getHeadingsWithComputedProps(headings: (Heading | HeadingDetached)[], currentUrl: string) {
+  return headings.map((heading, i) => {
+    assert([1, 2, 3, 4].includes(heading.level), heading)
+
+    const headingPrevious = headings[i - 1]
+    const headingNext = headings[i + 1]
+
+    let isActiveFirst = false
+    let isActiveLast = false
+    let isActive = false
+    if (heading.url === currentUrl) {
+      assert(heading.level === 2, { currentUrl })
+      isActive = true
+      isActiveFirst = true
+      if (headingNext?.level !== 3) {
+        isActiveLast = true
+      }
+    }
+    if (heading.level === 3) {
+      isActive = true
+      if (headingNext?.level !== 3) {
+        isActiveLast = true
+      }
+    }
+
+    const isFirstOfItsKind = heading.level !== headingPrevious?.level
+    const isLastOfItsKind = heading.level !== headingNext?.level
+
+    return {
+      ...heading,
+      computed: {
+        isActive,
+        isActiveFirst,
+        isActiveLast,
+        isFirstOfItsKind,
+        isLastOfItsKind
+      }
+    }
+  })
+}
+
+function DetachedPageNote() {
+  return (
+    <div
+      id="detached-note"
+      style={{
+        backgroundColor: 'var(--background-color)',
+        textAlign: 'left',
+        marginLeft: 10,
+        marginRight: 10,
+        marginTop: 25,
+        marginBottom: -5,
+        borderRadius: 5,
+        padding: 10
+      }}
+    >
+      <Emoji name="info" />{' '}
+      <b>
+        <em>Detached</em>
+      </b>
+      <span
+        style={{
+          opacity: 0.8
+        }}
+      >
+        {' '}
+        &mdash; this page isn't listed in the navigation below.
+      </span>
+    </div>
+  )
+}

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,16 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.5.40",
+  "version": "0.6.1",
   "scripts": {
+    "// Build vite.config.ts and +config.ts": "",
+    "build": "rm -rf dist/ && tsc --project tsconfig.config.json",
+    "// Development": "",
+    "dev": "tsc --watch --project tsconfig.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 +19,65 @@
     "@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.9",
-    "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",
-    "./features/FeatureList.css": {
-      "browser": "./dist/components/features/FeatureList.css"
+    "./renderer/onRenderHtml": "./renderer/onRenderHtml.tsx",
+    "./renderer/client": "./renderer/client.ts",
+    ".": "./index.ts",
+    "./FeatureList/FeatureList": "./components/FeatureList/FeatureList.tsx",
+    "./FeatureList/FeatureList.client": {
+      "browser": "./components/FeatureList/FeatureList.client.ts"
     },
-    "./features/initFeatureList": {
-      "browser": "./dist/components/features/initFeatureList.js"
-    }
+    "./vite-config": "./dist/vite.config.js",
+    "./config": "./dist/+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/*"
+      "config": [
+        "./dist/+config.d.ts"
+      ],
+      "FeatureList/*": [
+        "./components/FeatureList/*"
       ]
     }
   },
   "peerDependencies": {
-    "react": "18",
-    "react-dom": "18"
+    "@types/node": "*",
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "*",
+    "vike": "0.4.161-commit-ba539a4",
+    "vite": "npm:@brillout/vite@5.1.0-commit-3dc7abd"
   },
   "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-commit-ba539a4",
+    "vite": "npm:@brillout/vite@5.1.0-commit-3dc7abd",
     "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
+}