@brillout/docpress 0.1.20 → 0.2.1

package/src/components/features/FeatureList.tsx

@@ -1,114 +0,0 @@
-import React from 'react'
-import './FeatureList.css'
-import iconChevron from './chevron.svg'
-
-export { FeatureList }
-
-type FeatureProps = {
-  title: React.ReactNode
-  desc: React.ReactNode
-  learnMore?: React.ReactNode
-  isSecondaryFeature?: true
-}
-
-function FeatureList({ features }: { features: FeatureProps[] }) {
-  const numberOfFeatures = features.length
-  const numberOfRows = Math.ceil(numberOfFeatures / 2)
-  return (
-    <div id="features">
-      {Array.from({ length: numberOfRows }, (_, i) => {
-        const feature1Id = 2 * i + 0
-        const feature2Id = 2 * i + 1
-        const feature1 = features[feature1Id]
-        const feature2 = features[feature2Id]
-        const className = ['features-row', feature2 ? '' : 'single-column'].filter(Boolean).join(' ')
-        return (
-          <div className={className} key={i}>
-            <Feature {...{ ...feature1, featureId: feature1Id }} />
-            {feature2 && <Feature {...{ ...feature2, featureId: feature2Id }} />}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-function Feature({ title, desc, learnMore, isSecondaryFeature, featureId }: FeatureProps & { featureId: number }) {
-  const name = `feature-${featureId}`
-  const rightSide = featureId % 2 === 1
-  return (
-    <>
-      <FeatureHead name={name} hasLearnMore={!!learnMore} isSecondaryFeature={isSecondaryFeature}>
-        {' '}
-        <h2>{title}</h2>
-        {desc}
-      </FeatureHead>
-      {!!learnMore && (
-        <LearnMore name={name} rightSide={rightSide}>
-          {learnMore}
-        </LearnMore>
-      )}
-    </>
-  )
-}
-
-function FeatureHead({
-  children,
-  name,
-  hasLearnMore,
-  isSecondaryFeature,
-  className = ''
-}: {
-  className?: string
-  name?: string
-  hasLearnMore?: boolean
-  isSecondaryFeature?: true
-  children: any
-}) {
-  return (
-    <summary
-      className={[
-        className,
-        'feature',
-        'colorize-on-hover',
-        hasLearnMore && 'has-learn-more',
-        isSecondaryFeature && 'secondary-feature'
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      id={name && `feature-${name}`}
-      style={{ cursor: (hasLearnMore && 'pointer') || undefined }}
-    >
-      {children}
-      {hasLearnMore && (
-        <div style={{ textAlign: 'center', marginTop: '1em' }}>
-          <button
-            type="button"
-            style={{
-              textAlign: 'center',
-              padding: '0 7px',
-              paddingTop: 3,
-              paddingBottom: 1,
-              display: 'inline-block',
-              fontSize: '10px',
-              textTransform: 'uppercase',
-              letterSpacing: '1px',
-              fontWeight: 600
-            }}
-          >
-            <span className="decolorize-5">Learn more</span>
-            <br />
-            <img className="decolorize-4 chevron" src={iconChevron} height="7" style={{ marginTop: 2 }} />
-          </button>
-        </div>
-      )}
-    </summary>
-  )
-}
-function LearnMore({ children, name, rightSide }: { name: string; children: any; rightSide: boolean }) {
-  return (
-    <aside className={'learn-more ' + (rightSide ? 'right-side' : '')} id={`learn-more-${name}`}>
-      {children}
-    </aside>
-  )
-}

package/src/components/features/initFeatureList.ts

@@ -1,66 +0,0 @@
-import { assert } from '../../utils/client'
-
-addTwitterWidgets()
-addFeatureClickHandlers()
-window.__docpress_hydrationFinished = true
-
-function addTwitterWidgets() {
-  loadScript('https://platform.twitter.com/widgets.js')
-}
-
-function addFeatureClickHandlers() {
-  const featureEls: HTMLElement[] = Array.from(
-    document.getElementById('features')!.querySelectorAll('.feature.has-learn-more')
-  )
-  featureEls.forEach((featureEl) => {
-    featureEl.onclick = () => {
-      expandLearnMore(featureEl)
-    }
-  })
-}
-
-function expandLearnMore(featureEl: HTMLElement) {
-  const featureId = featureEl.id
-  assert(featureId.startsWith('feature-'), { featureId })
-  const featureName = featureId.slice('feature-'.length)
-
-  const selectedClass = 'selected'
-  const learnId = 'learn-more-' + featureName
-  const learnEl = document.getElementById(learnId)
-  assert(learnEl, { learnId })
-
-  const isExpanded = featureEl.classList.contains(selectedClass)
-
-  if (!isExpanded) {
-    const rowEl = featureEl.parentNode as HTMLElement
-    if (getComputedStyle(rowEl, 'display') === 'grid') {
-      ;[
-        ...(rowEl.querySelectorAll('.learn-more') as any as HTMLElement[]),
-        ...(rowEl.querySelectorAll('.feature') as any as HTMLElement[])
-      ].forEach((el) => {
-        el.classList.remove(selectedClass)
-      })
-    }
-  }
-
-  ;[featureEl, learnEl].forEach((el) => {
-    el.classList.toggle(selectedClass)
-  })
-}
-
-function loadScript(scriptUrl: string): void {
-  assert(scriptUrl.startsWith('https://'))
-  const scriptEl = document.createElement('script')
-  scriptEl.src = scriptUrl
-  scriptEl.async = true
-  scriptEl.setAttribute('charset', 'utf-8')
-  document.getElementsByTagName('head')[0].appendChild(scriptEl)
-}
-
-function getComputedStyle(el: HTMLElement, styleProp: string) {
-  return window.document.defaultView!.getComputedStyle(el).getPropertyValue(styleProp)
-}
-
-declare global {
-  var __docpress_hydrationFinished: undefined | true
-}

package/src/components/index.ts

@@ -1,13 +0,0 @@
-export * from '../utils/Emoji'
-export * from './Link'
-export * from './DocLink'
-export * from './RepoLink'
-export * from './P'
-export * from './Info'
-export * from './ReadingRecommendation'
-export * from './Note'
-export * from './ImportMeta'
-export * from './features/FeatureList'
-export * from './HorizontalLine'
-export * from './Sponsors'
-export * from './CodeBlock'

package/src/config/Config.ts

@@ -1,30 +0,0 @@
-export type { Config }
-
-import type { HeadingDefinition, HeadingWithoutLink } from '../headings'
-
-type Config = {
-  projectInfo: {
-    githubRepository: string
-    githubIssues: string
-    projectName: string
-    projectNameJsx?: JSX.Element
-    projectVersion: string
-    discordInvite: string
-    twitterProfile: string
-  }
-  faviconUrl: string
-  algolia: null | {
-    appId: string
-    apiKey: string
-    indexName: string
-  }
-  headings: HeadingDefinition[]
-  headingsWithoutLink: HeadingWithoutLink[]
-  navHeaderMobile: React.ReactNode
-  navHeader: React.ReactNode
-  titleNormalCase: boolean
-  tagline: string
-  websiteUrl: string
-  bannerUrl?: string
-  twitterHandle: string
-}

package/src/config/getConfig.ts

@@ -1,18 +0,0 @@
-export { getConfig }
-import { assert, assertUsage } from '../utils/server'
-import { Config } from './Config'
-
-function getConfig(): Config {
-  // We use `@ts-ignore` because the DocPress user most likely didn't add `vite/client` in his `tsconfig.json`.
-  // @ts-ignore
-  const globResult = import.meta.glob('/**/docpress.config.*([a-zA-Z0-9])', { eager: true })
-  const files = Object.keys(globResult)
-  assertUsage(files.length >= 1, 'No DocPress config file found `docpress.config.(js|ts|tsx|...)`')
-  assertUsage(
-    files.length === 1,
-    `Found multiple \`docpress.config.js\` files: ${files.map((f) => `\`${f}\``).join(', ')}. Define only one instead.`
-  )
-  const config = (Object.values(globResult)[0] as any).default as Config
-  assert(config)
-  return config
-}

package/src/config/resolvePageContext.ts

@@ -1,157 +0,0 @@
-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

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

package/src/css/code/block.css

@@ -1,36 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,20 +0,0 @@
-@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

@@ -1,29 +0,0 @@
-.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

@@ -1,19 +0,0 @@
-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

@@ -1,25 +0,0 @@
-.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

@@ -1,11 +0,0 @@
-@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

@@ -1,17 +0,0 @@
-/*
-: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

@@ -1,26 +0,0 @@
-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

@@ -1,12 +0,0 @@
-* {
-  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

@@ -1,14 +0,0 @@
-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

@@ -1,11 +0,0 @@
-@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';
-}