@brillout/docpress 0.1.14 → 0.1.15

package/src/config/resolvePageContext.ts

@@ -0,0 +1,157 @@
+import { assert, jsxToTextContent, objectAssign } from '../utils/server'
+import { getHeadings, HeadingWithoutLink, parseTitle } from '../headings'
+import type { Heading } from '../headings'
+import type { PageContextBuiltIn } from 'vite-plugin-ssr'
+import type { MarkdownHeading } from '../markdownHeadingsVitePlugin'
+import type { Config } from './Config'
+import { getConfig } from './getConfig'
+
+export { resolvePageContext }
+export type { PageContextOriginal }
+export type { PageContextResolved }
+export type { Heading }
+
+type ReactComponent = () => JSX.Element
+type Exports = {
+  headings?: MarkdownHeading[]
+}
+type PageContextOriginal = PageContextBuiltIn & {
+  Page: ReactComponent
+  exports: Exports
+}
+type PageContextResolved = ReturnType<typeof resolvePageContext>
+
+function resolvePageContext(pageContext: PageContextOriginal) {
+  const config = getConfig()
+  const { headings, headingsWithoutLink } = getHeadings(config)
+  const activeHeading = findActiveHeading(headings, headingsWithoutLink, pageContext)
+  const headingsWithSubHeadings = getHeadingsWithSubHeadings(headings, pageContext, activeHeading)
+  const { title, isLandingPage, pageTitle, isDetachedPage } = getMetaData(
+    headingsWithoutLink,
+    activeHeading,
+    pageContext,
+    config
+  )
+  const { faviconUrl, algolia, tagline, twitterHandle, bannerUrl, websiteUrl } = config
+  const pageContextResolved = {}
+  objectAssign(pageContextResolved, {
+    ...pageContext,
+    meta: {
+      title,
+      faviconUrl,
+      twitterHandle,
+      bannerUrl,
+      websiteUrl,
+      tagline,
+      algolia
+    },
+    headings,
+    headingsWithSubHeadings,
+    isLandingPage,
+    isDetachedPage,
+    pageTitle,
+    config
+  })
+  return pageContextResolved
+}
+
+function getMetaData(
+  headingsWithoutLink: HeadingWithoutLink[],
+  activeHeading: Heading | null,
+  pageContext: { urlOriginal: string; exports: Exports },
+  config: Config
+) {
+  const url = pageContext.urlOriginal
+
+  let title: string
+  let pageTitle: string | JSX.Element | null
+  let isDetachedPage: boolean
+  if (activeHeading) {
+    title = activeHeading.titleDocument || jsxToTextContent(activeHeading.title)
+    pageTitle = activeHeading.title
+    isDetachedPage = false
+  } else {
+    pageTitle = headingsWithoutLink.find((h) => h.url === url)!.title
+    title = jsxToTextContent(pageTitle)
+    isDetachedPage = true
+  }
+
+  const isLandingPage = url === '/'
+  if (!isLandingPage) {
+    title += ' | ' + config.projectInfo.projectName
+  }
+
+  if (isLandingPage) {
+    pageTitle = null
+  }
+
+  return { title, isLandingPage, pageTitle, isDetachedPage }
+}
+
+function findActiveHeading(
+  headings: Heading[],
+  headingsWithoutLink: HeadingWithoutLink[],
+  pageContext: { urlOriginal: string; exports: Exports }
+): Heading | null {
+  let activeHeading: Heading | null = null
+  assert(pageContext.urlOriginal)
+  const pageUrl = pageContext.urlOriginal
+  headings.forEach((heading) => {
+    if (heading.url === pageUrl) {
+      activeHeading = heading
+      assert(heading.level === 2, { pageUrl, heading })
+    }
+  })
+  const debugInfo = {
+    msg: 'Heading not found for url: ' + pageUrl,
+    urls: headings.map((h) => h.url),
+    url: pageUrl
+  }
+  assert(activeHeading || headingsWithoutLink.find(({ url }) => pageUrl === url), debugInfo)
+  return activeHeading
+}
+
+function getHeadingsWithSubHeadings(
+  headings: Heading[],
+  pageContext: { exports: Exports; urlOriginal: string },
+  activeHeading: Heading | null
+): Heading[] {
+  const headingsWithSubHeadings = headings.slice()
+  if (activeHeading === null) return headingsWithSubHeadings
+  const activeHeadingIdx = headingsWithSubHeadings.indexOf(activeHeading)
+  assert(activeHeadingIdx >= 0)
+  const pageHeadings = pageContext.exports.headings || []
+  pageHeadings.forEach((pageHeading, i) => {
+    const title = parseTitle(pageHeading.title)
+    const url = '#' + pageHeading.id
+    assert(
+      pageHeading.headingLevel !== 3,
+      'Wrong page heading level `' +
+        pageHeading.headingLevel +
+        '` (it should be `<h2>`) for sub-heading `' +
+        pageHeading.title +
+        '` of page `' +
+        pageContext.urlOriginal +
+        '`.'
+    )
+    if (pageHeading.headingLevel === 2) {
+      const heading: Heading = {
+        url,
+        title,
+        parentHeadings: [activeHeading, ...activeHeading.parentHeadings],
+        titleInNav: title,
+        level: 3
+      }
+      headingsWithSubHeadings.splice(activeHeadingIdx + 1 + i, 0, heading)
+    }
+  })
+
+  if (activeHeading?.sectionTitles) {
+    activeHeading.sectionTitles.forEach((sectionTitle) => {
+      const pageHeadingTitles = pageHeadings.map((h) => h.title)
+      assert(pageHeadingTitles.includes(sectionTitle), { pageHeadingTitles, sectionTitle })
+    })
+  }
+
+  return headingsWithSubHeadings
+}

package/src/css/button.css

@@ -0,0 +1,7 @@
+button,
+a.button {
+  background-color: #fafafa;
+  border: 1px solid #aaa;
+  border-radius: 5px;
+  cursor: pointer;
+}

package/src/css/code/block.css

@@ -0,0 +1,36 @@
+pre > code {
+  padding: 16px !important;
+}
+@media screen and (max-width: 900px) {
+  pre > code {
+    font-size: 0.7em;
+  }
+}
+pre {
+  display: grid;
+}
+pre > code {
+  padding-right: 0px !important;
+  overflow-x: auto;
+}
+
+@media screen and (max-width: 1139px) {
+  pre > code {
+    font-size: 0.95em;
+  }
+}
+@media screen and (max-width: 1040px) {
+  pre > code {
+    font-size: 0.8em;
+  }
+}
+@media screen and (max-width: 940px) {
+  pre > code {
+    font-size: 0.7em;
+  }
+}
+
+pre > code {
+  display: reset;
+  word-break: reset;
+}

package/src/css/code/inline.css

@@ -0,0 +1,27 @@
+code {
+  padding: 2px 5px;
+}
+
+/*
+ * Line breaks in `<code>`:
+ *  - Avoid them on desktop
+ *  - Allow them on mobile
+ *  - Allo them for `<code long>`
+ */
+code {
+  display: inline-block;
+}
+@media screen and (max-width: 500px) {
+  code {
+    word-break: break-word;
+    display: inline;
+  }
+}
+.inline-code-break code {
+  display: inline;
+  word-break: break-word;
+}
+code.long {
+  word-break: break-word;
+  display: inline;
+}

package/src/css/code.css

@@ -0,0 +1,20 @@
+@import './code/inline.css';
+@import './code/block.css';
+
+code {
+  /*
+  background-color: #f4f4f4;
+  0.043137255 = 1 - (#f4 / #ff)
+  */
+  background-color: rgba(0, 0, 0, 0.043137255);
+  border-radius: 4px;
+}
+
+/* Inline */
+code {
+  font-size: 1.1em;
+}
+/* Block */
+pre > code {
+  font-size: 1em;
+}

package/src/css/colorize-on-hover.css

@@ -0,0 +1,29 @@
+.colorize-on-hover,
+.colorize-on-hover [class^='decolorize-'],
+.colorize-on-hover [class*=' decolorize-'] {
+  transition: filter 0.3s ease-in-out;
+}
+.colorize-on-hover:hover,
+.colorize-on-hover:hover [class^='decolorize-'],
+.colorize-on-hover:hover [class*=' decolorize-'] {
+  filter: grayscale(0) opacity(1) !important;
+}
+
+.decolorize-7 {
+  filter: grayscale(1) opacity(0.7);
+}
+.decolorize-6 {
+  filter: grayscale(1) opacity(0.6);
+}
+.decolorize-5 {
+  filter: grayscale(1) opacity(0.5);
+}
+.decolorize-4 {
+  filter: grayscale(1) opacity(0.4);
+}
+
+/*
+ * Twitter opacity(0.7): #ababab > #868686
+ * == Following computation does NOT work ==
+ * Discord opacity(0.7): #6c6c6c > (0.7 * (#fff - #ababab) = #868686 = x * (#fff - #6c6c6c) <=> x = 0.7 * ((#fff - #ababab) / (#fff - #6c6c6c)) = 0.7 * ((255 - 171) / (255 - 108)) = 0.4)
+ */

package/src/css/font.css

@@ -0,0 +1,19 @@
+body {
+  font-family: 'Inter';
+}
+button {
+  font-family: inherit;
+}
+body {
+  --color-text: #323d48;
+  color: var(--color-text);
+  line-height: 1.5;
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-weight: 100 900;
+  font-stretch: 75% 125%;
+  font-style: oblique 0deg 12deg;
+  src: url('./Inter-Var.ttf') format('truetype-variations');
+}

package/src/css/heading.css

@@ -0,0 +1,25 @@
+.doc-page h2 {
+  margin-top: 50px;
+  margin-bottom: 16px;
+}
+.doc-page h2[id] {
+  cursor: pointer;
+  position: relative;
+  padding-left: 20px;
+  margin-left: -20px;
+}
+.doc-page h2[id]:hover::before {
+  content: '#';
+  position: absolute;
+  left: calc(-1 * (0.75em - 20px));
+  color: #aaa;
+}
+
+.doc-page h1 + h2 {
+  margin-top: 0;
+}
+
+.doc-page h4 {
+  margin-top: 32px;
+  margin-bottom: 16px;
+}

package/src/css/index.css

@@ -0,0 +1,11 @@
+@import './reset.css';
+@import './colorize-on-hover.css';
+@import './heading.css';
+@import './button.css';
+@import './link.css';
+@import './font.css';
+@import './code.css';
+@import './note.css';
+@import './table.css';
+@import './tooltip.css';
+@import '../algolia/DocSearch.css';

package/src/css/link.css

@@ -0,0 +1,17 @@
+/*
+:root {
+  --link-color: #4747ff;
+}
+*/
+
+a {
+  /*
+  color: inherit;
+  color: var(--link-color);
+  */
+  color: #4747ff;
+  text-decoration: none;
+}
+a > button {
+  color: var(--color-text);
+}

package/src/css/note.css

@@ -0,0 +1,26 @@
+blockquote {
+  --color: 0, 0, 0;
+  --color-strengh-bg: 0.7;
+  --color-strengh-border: 1.5;
+  border-left: 8px solid rgba(var(--color), calc(0.06 * var(--color-strengh-border)));
+  background-color: rgba(var(--color), calc(0.03 * var(--color-strengh-bg)));
+  margin-left: 0;
+  padding: 4px 16px;
+}
+blockquote.error {
+  --color-strengh-bg: 1.7;
+  --color-strengh-border: 6;
+  --color: 190, 25, 49;
+}
+blockquote.warning {
+  --color-strengh-bg: 4;
+  --color-strengh-border: 8;
+  --color: 255, 204, 50;
+}
+blockquote > p:first-child::before,
+/* blockquote > p:first-of-type::before, */
+blockquote > div.paragraph:first-child::before {
+  font-family: emoji;
+  content: 'ℹ️';
+  margin-right: 4px;
+}

package/src/css/reset.css

@@ -0,0 +1,12 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+}
+
+/* Avoid tweet embeds to overflow the body width.
+ * Settings `overflow: hidden` to a container doesn't work (This is a CSS bug?) */
+iframe {
+  max-width: 100%;
+}

package/src/css/table.css

@@ -0,0 +1,14 @@
+table th {
+  background-color: #f7f7f7;
+}
+table {
+  border-collapse: collapse;
+}
+table td,
+table th {
+  padding: 8px;
+  border: 1px solid #ccc;
+}
+table th {
+  text-align: left;
+}

package/src/css/tooltip.css

@@ -0,0 +1,11 @@
+@import 'balloon-css';
+
+:root {
+  --balloon-color: #444;
+  --balloon-move: 2px;
+  --balloon-font-size: 14px;
+  --balloon-border-radius: 5px;
+}
+[aria-label][data-balloon-pos]:after {
+  font-family: 'Inter';
+}

package/src/headings.ts

@@ -0,0 +1,200 @@
+import React from 'react'
+import { assert, Emoji, EmojiName  } from './utils/server'
+
+export { getHeadings }
+export { parseTitle }
+
+export type Heading = Omit<HeadingDefinition, 'title' | 'titleInNav'> & {
+  title: JSX.Element
+  titleInNav: JSX.Element
+  parentHeadings: Heading[]
+  // Not sure why this is needed
+  isListTitle?: true
+  sectionTitles?: string[]
+}
+export type HeadingWithoutLink = {
+  url: string
+  title: string | JSX.Element
+}
+export type HeadingDefinition = HeadingBase &
+  (
+    | ({ level: 1; titleEmoji: EmojiName } & HeadingAbstract)
+    | ({ level: 4 } & HeadingAbstract)
+    | {
+        level: 2
+        isListTitle?: true
+        sectionTitles?: string[]
+        url: string
+      }
+    | {
+        level: 3
+        url: string
+      }
+  )
+type HeadingBase = {
+  title: string
+  level: number
+  url?: string
+  titleDocument?: string
+  titleInNav?: string
+  // titleSize?: string
+}
+type HeadingAbstract = {
+  url?: undefined
+  titleDocument?: undefined
+  titleInNav?: undefined
+}
+
+function getHeadings(config: { headings: HeadingDefinition[]; headingsWithoutLink: HeadingWithoutLink[] }): {
+  headings: Heading[]
+  headingsWithoutLink: HeadingWithoutLink[]
+} {
+  const headingsWithoutParent: Omit<Heading, 'parentHeadings'>[] = config.headings.map((heading: HeadingDefinition) => {
+    const titleProcessed: JSX.Element = parseTitle(heading.title)
+
+    const titleInNav = heading.titleInNav || heading.title
+    let titleInNavProcessed: JSX.Element
+    if ('isListTitle' in heading) {
+      assert(heading.isListTitle === true)
+      let titleParsed: JSX.Element = parseTitle(titleInNav)
+      // if (heading.titleSize) {
+      //   titleParsed = React.createElement('span', { style: { fontSize: heading.titleSize } }, titleParsed)
+      // }
+      titleInNavProcessed = React.createElement(React.Fragment, {}, getListPrefix(), titleParsed)
+    } else {
+      titleInNavProcessed = parseTitle(titleInNav)
+    }
+    if ('titleEmoji' in heading) {
+      assert(heading.titleEmoji)
+      titleInNavProcessed = withEmoji(heading.titleEmoji, titleInNavProcessed)
+    }
+
+    const headingProcessed: Omit<Heading, 'parentHeadings'> = {
+      ...heading,
+      title: titleProcessed,
+      titleInNav: titleInNavProcessed
+    }
+    return headingProcessed
+  })
+
+  const headings: Heading[] = []
+  headingsWithoutParent.forEach((heading) => {
+    const parentHeadings = findParentHeadings(heading, headings)
+    headings.push({ ...heading, parentHeadings })
+  })
+
+  const headingsWithoutLink = config.headingsWithoutLink.map((headingsWithoutLink) => {
+    const { url, title } = headingsWithoutLink
+    assert(
+      headings.find((heading) => heading.url === url) === undefined,
+      `remove ${headingsWithoutLink.url} from headingsWithoutLink`
+    )
+    const titleProcessed = typeof title === 'string' ? parseTitle(title) : title
+    return {
+      ...headingsWithoutLink,
+      title: titleProcessed
+    }
+  })
+
+  assertHeadingsUrl([...headings, ...headingsWithoutLink])
+  return { headings, headingsWithoutLink }
+}
+
+function findParentHeadings(heading: Omit<Heading, 'parentHeadings'>, headings: Heading[]) {
+  const parentHeadings: Heading[] = []
+  let levelCurrent = heading.level
+  let listTitleParentFound = false
+  headings
+    .slice()
+    .reverse()
+    .forEach((parentCandidate) => {
+      let isListTitleParent = false
+      if (
+        !listTitleParentFound &&
+        levelCurrent === heading.level &&
+        parentCandidate.level === heading.level &&
+        !parentCandidate.isListTitle &&
+        heading.isListTitle
+      ) {
+        isListTitleParent = true
+        listTitleParentFound = true
+      }
+
+      const isParent = parentCandidate.level < levelCurrent
+
+      if (isParent || isListTitleParent) {
+        levelCurrent = parentCandidate.level
+        parentHeadings.push(parentCandidate)
+      }
+    })
+  return parentHeadings
+}
+
+function assertHeadingsUrl(headings: { url?: string }[]) {
+  const urls: Record<string, true> = {}
+  headings.forEach((heading) => {
+    if (heading.url) {
+      const { url } = heading
+      assert(url.startsWith('/'))
+      assert(!urls[url], { url })
+      urls[url] = true
+    }
+  })
+}
+
+function getListPrefix() {
+  const nonBreakingSpace = String.fromCodePoint(0x00a0)
+  const bulletPoint = String.fromCodePoint(0x2022)
+  return nonBreakingSpace + bulletPoint + nonBreakingSpace
+}
+
+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/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components'
+export * from './utils/server'
+export * from './types'

package/src/installSectionUrlHashs.ts

@@ -0,0 +1,50 @@
+import { assert } from './utils/client'
+
+installSectionUrlHashs()
+/* Let browser restore previous scroll
+jumpToSection()
+*/
+
+function installSectionUrlHashs() {
+  const pageContainer = document.querySelector('.doc-page #page-container')
+  if (!pageContainer) {
+    assert(window.location.pathname === '/')
+    return
+  }
+  const navigationEl = document.getElementById('navigation-content')
+  assert(navigationEl)
+  const docSections = Array.from(document.querySelectorAll('h2'))
+  docSections.forEach((docSection) => {
+    const docTitle = docSection.textContent
+    assert(docTitle)
+    assert(docSection.id, { docSection })
+    const urlHash = '#' + docSection.id
+    assertNavLink(navigationEl, urlHash)
+    docSection.onclick = () => {
+      window.location.hash = urlHash
+      // The browser doesn't jump if hash doesn't change
+      jumpToSection()
+    }
+  })
+}
+
+function assertNavLink(navigationEl: HTMLElement, urlHash: string) {
+  const parentNavLinkMatch = Array.from(navigationEl.querySelectorAll(`a[href="${window.location.pathname}"]`))
+  assert(parentNavLinkMatch.length <= 1)
+  if (parentNavLinkMatch.length === 0) return
+  const navLinks: HTMLElement[] = Array.from(navigationEl.querySelectorAll(`a[href="${urlHash}"]`))
+  assert(navLinks.length === 1, { urlHash })
+}
+
+function jumpToSection() {
+  const { hash } = window.location
+  if (hash === '' || hash === '#') {
+    return
+  }
+  assert(hash.startsWith('#'))
+  const target = document.getElementById(hash.slice(1))
+  if (!target) {
+    return
+  }
+  target.scrollIntoView()
+}