@brillout/docpress 0.5.40 → 0.6.1

package/components/Sponsors.tsx

@@ -0,0 +1,218 @@
+export { Sponsors }
+export type { Sponsor }
+
+import React from 'react'
+import iconHeart from '../icons/heart.svg'
+import { usePageContext } from '../renderer/usePageContext'
+import { assert, Emoji } from '../utils/server'
+import { Supporter, SupporterSection, SectionDescription, Individuals, SupporterImg, CallToAction } from './Supporters'
+import medalGold from './Sponsors/medalGold.svg'
+import medalSilver from './Sponsors/medalSilver.svg'
+import medalBronze from './Sponsors/medalBronze.svg'
+import labelBgImg from './Sponsors/label.svg'
+import { sponsorsList } from '../data/sponsorsList'
+
+type Plan = 'indie' | 'bronze' | 'silver' | 'gold' | 'platinum'
+
+type SponsorCompany = {
+  companyName: string
+  companyLogo: string
+  website: string
+  plan: Plan
+  divSize?: Partial<DivSize>
+  github: string
+}
+type SponsorIndividual = {
+  username: string
+}
+type Sponsor = SponsorCompany | SponsorIndividual
+
+type DivSize = {
+  width: number
+  height: number
+  padding: number
+}
+
+function Sponsors() {
+  const pageContext = usePageContext()
+  const { projectInfo } = pageContext.config
+  const sponsorGithubAccount = pageContext.config.sponsorGithubAccount || 'brillout'
+  const sponsorsCompanies = sponsorsList.filter(isCompany)
+  const sponsorsIndividuals = sponsorsList.filter(isIndividual)
+  return (
+    <SupporterSection>
+      <CallToAction iconUrl={iconHeart} text="Sponsor" href={`https://github.com/sponsors/${sponsorGithubAccount}`} />
+      <div></div>
+      <SectionDescription>
+        {projectInfo.projectName} is free and open source, made possible by wonderful sponsors.
+      </SectionDescription>
+      <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly', alignItems: 'end' }}>
+        {sponsorsCompanies.map((sponsor, i) => (
+          <SponsorDiv sponsor={sponsor} key={i} />
+        ))}
+      </div>
+      <Individuals>
+        {sponsorsIndividuals.map((sponsor, i) => (
+          <SponsorDiv sponsor={sponsor} key={i} />
+        ))}
+      </Individuals>
+    </SupporterSection>
+  )
+}
+
+function SponsorDiv({ sponsor }: { sponsor: Sponsor }) {
+  if (isIndividual(sponsor)) {
+    return <Supporter username={sponsor.username} />
+  }
+  return <CompanyDiv sponsor={sponsor} />
+}
+
+function CompanyDiv({ sponsor }: { sponsor: Sponsor }) {
+  assert(isCompany(sponsor))
+  const imgSrc = sponsor.companyLogo
+  const imgAlt = sponsor.companyName
+  const { width, height, padding } = getSize(sponsor)
+  const marginHeight = 20
+  const marginWidth = 10
+  return (
+    <a
+      href={sponsor.website}
+      style={{
+        margin: `${marginHeight}px ${marginWidth}px`
+      }}
+    >
+      <Label sponsor={sponsor} />
+      <div
+        style={{
+          backgroundColor: '#f0f0f0',
+          borderRadius: 7,
+          overflow: 'hidden',
+          width,
+          maxWidth: `calc(100vw - 2 * var(--main-view-padding) - 2 * ${marginWidth}px)`,
+          height,
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'column',
+          justifyContent: 'center'
+        }}
+      >
+        <SupporterImg {...{ imgSrc, imgAlt, width, height, padding }} />
+      </div>
+    </a>
+  )
+}
+
+function Label({ sponsor }: { sponsor: Sponsor }) {
+  assert(isCompany(sponsor))
+  const labelBg = getLabelBg(sponsor)
+  const labelIcon = getLabelIcon(sponsor)
+  const labelText = getLabelText(sponsor)
+  return (
+    <div
+      style={{
+        top: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+        paddingBottom: 1
+      }}
+    >
+      {labelBg}
+      {labelIcon}
+      {labelText}
+    </div>
+  )
+}
+
+function getLabelBg(sponsor: SponsorCompany) {
+  const height = sponsor.plan === 'platinum' ? 32 : 24
+  return <img src={labelBgImg} style={{ height, position: 'absolute', bottom: 0, zIndex: -1 }} />
+}
+
+function getLabelText(sponsor: SponsorCompany) {
+  if (sponsor.plan === 'platinum') {
+    return <></>
+  }
+  let letterSpacing: number | undefined = undefined
+  if (['bronze', 'silver', 'gold', 'indie'].includes(sponsor.plan)) {
+    letterSpacing = 1
+  }
+  /*
+  if (sponsor.plan === 'indie') {
+    letterSpacing = 2
+  }
+  */
+  return (
+    <>
+      {' '}
+      <span
+        style={{
+          zIndex: 1,
+          fontSize: '0.82em',
+          position: 'relative',
+          top: 0,
+          fontWeight: 500,
+          color: '#666',
+          letterSpacing
+        }}
+      >
+        {capitalizeFirstLetter(sponsor.plan)}
+      </span>
+    </>
+  )
+}
+
+function getLabelIcon(sponsor: SponsorCompany) {
+  let medalSrc: string
+  if (sponsor.plan === 'platinum') {
+    return <Emoji name="trophy" style={{ fontSize: '1.3em' }} />
+  } else if (sponsor.plan === 'indie') {
+    return <Emoji name="ribbon" style={{ fontSize: '0.9em' /*, position: 'relative', top: -1*/ }} />
+  } else if (sponsor.plan === 'gold') {
+    medalSrc = medalGold
+  } else if (sponsor.plan === 'silver') {
+    medalSrc = medalSilver
+  } else if (sponsor.plan === 'bronze') {
+    medalSrc = medalBronze
+  } else {
+    assert(false)
+  }
+  return <img src={medalSrc} style={{ height: 15, zIndex: 1, marginRight: 5 }} />
+}
+
+function getSize(sponsor: SponsorCompany): DivSize {
+  const { plan } = sponsor
+  let divSize: DivSize | undefined
+  if (plan === 'platinum') {
+    divSize = { width: 500, height: 180, padding: 100 }
+  }
+  if (plan === 'gold') {
+    divSize = { width: 400, height: 150, padding: 95 }
+  }
+  if (plan === 'silver') {
+    divSize = { width: 300, height: 100, padding: 45 }
+  }
+  if (plan === 'bronze') {
+    divSize = { width: 200, height: 70, padding: 30 }
+  }
+  if (plan === 'indie') {
+    divSize = { width: 140, height: 50, padding: 20 }
+  }
+  assert(divSize)
+  if (sponsor.divSize) {
+    Object.assign(divSize, sponsor.divSize)
+  }
+  return divSize
+}
+
+function capitalizeFirstLetter(word: string): string {
+  return word[0].toUpperCase() + word.slice(1)
+}
+
+function isCompany(sponsor: Sponsor): sponsor is SponsorCompany {
+  return !isIndividual(sponsor)
+}
+function isIndividual(sponsor: Sponsor): sponsor is SponsorIndividual {
+  return 'username' in sponsor
+}

package/components/Supporters.tsx

@@ -0,0 +1,136 @@
+// supporters = sponsors + contributors
+
+export { Supporter, SupporterSection, SectionDescription, Individuals, SupporterImg, CallToAction }
+
+import React from 'react'
+
+type Children = (string | JSX.Element) | (string | JSX.Element)[]
+
+function SupporterSection({ children }: { children?: Children }) {
+  return (
+    <div
+      style={{
+        textAlign: 'center',
+        marginTop: 19
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function SectionDescription({ children }: { children?: Children }) {
+  return (
+    <div
+      style={{
+        maxWidth: 400,
+        display: 'inline-block',
+        marginTop: 12,
+        marginBottom: 12
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Individuals({ children }: { children?: Children }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'end',
+        margin: '17px auto',
+        maxWidth: 700
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Individual sponsor or small contributor
+function Supporter({ username, avatarUrl }: { username: string; avatarUrl?: string }) {
+  const website = `https://github.com/${username}`
+  const width = 30
+  const height = 30
+  const marginWidth = 5
+  const marginHeight = 5
+  return (
+    <a
+      href={website}
+      style={{
+        margin: `${marginHeight}px ${marginWidth}px`
+      }}
+    >
+      <div
+        style={{
+          borderRadius: 7,
+          overflow: 'hidden',
+          width,
+          height,
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'column',
+          justifyContent: 'center'
+        }}
+      >
+        <SupporterImg {...{ username, avatarUrl, width, height }} />
+      </div>
+    </a>
+  )
+}
+
+function SupporterImg({
+  imgSrc, // has precedence over avatarUrl
+  avatarUrl, // has precedence over username
+  username,
+  imgAlt,
+  width,
+  height,
+  padding = 0
+}: {
+  imgSrc?: string
+  avatarUrl?: string
+  username?: string
+  imgAlt?: string
+  width: number
+  height: number
+  padding?: number
+}) {
+  const size = Math.max(width, height)
+  if (avatarUrl) {
+    imgSrc = imgSrc || `${avatarUrl}&size=${size}`
+  }
+  if (username) {
+    imgSrc = imgSrc || `https://github.com/${username}.png?size=${size}`
+    imgAlt = imgAlt || username
+  }
+  return (
+    <img
+      style={{ width: `calc(100% - ${padding}px)`, height: height - padding, zIndex: 2, objectFit: 'contain' }}
+      src={imgSrc}
+      alt={imgAlt}
+    />
+  )
+}
+
+function CallToAction({ iconUrl, text, href }: { iconUrl: string; text: string; href: string }) {
+  return (
+    <a
+      className="button"
+      style={{
+        color: 'inherit',
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '5px 10px',
+        marginBottom: 10
+      }}
+      href={href}
+    >
+      <img src={iconUrl} height={22} /> <span style={{ marginLeft: 7, fontSize: '1.07em' }}>{text}</span>
+    </a>
+  )
+}

package/components/index.ts

@@ -0,0 +1,14 @@
+export * from '../utils/Emoji'
+export * from './Link'
+export * from './RepoLink'
+export * from './P'
+export * from './ReadingRecommendation'
+export * from './Note'
+export * from './ImportMeta'
+export * from './HorizontalLine'
+export * from './Supporters'
+export * from './Sponsors'
+export * from './Contributors'
+export * from './Consulting'
+export * from './CodeBlockTransformer'
+export * from './Comment'

package/config/getConfig.ts

@@ -0,0 +1,18 @@
+export { getConfig }
+import { assert, assertUsage } from '../utils/server'
+import { Config } from '../types/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/config/resolvePageContext.ts

@@ -0,0 +1,186 @@
+import { assert, jsxToTextContent, objectAssign } from '../utils/server'
+import type { Heading, HeadingDetached } from '../types/Heading'
+import type { PageContextBuiltInServer } from 'vike/types'
+import type { MarkdownHeading } from '../markdownHeadingsVitePlugin'
+import type { Config } from '../types/Config'
+import { getConfig } from './getConfig'
+import { getHeadingsWithProcessedTitle, parseTitle } from '../parseTitle'
+
+export { resolvePageContext }
+export type { PageContextOriginal }
+export type { PageContextResolved }
+export type { Heading }
+
+type ReactComponent = () => JSX.Element
+type Exports = {
+  headings?: MarkdownHeading[]
+}
+type PageContextOriginal = PageContextBuiltInServer & {
+  Page: ReactComponent
+  exports: Exports
+}
+type PageContextResolved = ReturnType<typeof resolvePageContext>
+
+function resolvePageContext(pageContext: PageContextOriginal) {
+  const config = getConfig()
+  const processed = getHeadingsWithProcessedTitle(config)
+  const { headingsDetachedProcessed } = processed
+  let { headingsProcessed } = processed
+  const { activeHeading, activeNavigationHeading } = findHeading(
+    headingsProcessed,
+    headingsDetachedProcessed,
+    pageContext
+  )
+  let headingsOfDetachedPage: null | (Heading | HeadingDetached)[] = null
+  let headingsAll = [...headingsProcessed, ...headingsDetachedProcessed]
+  headingsAll = getHeadingsAll(headingsAll, pageContext, activeHeading)
+  if (activeNavigationHeading) {
+    headingsProcessed = getHeadingsAll(headingsProcessed, pageContext, activeNavigationHeading)
+  } else {
+    headingsOfDetachedPage = [activeHeading, ...getHeadingsOfTheCurrentPage(pageContext, activeHeading)]
+  }
+  const { title, isLandingPage, pageTitle } = getMetaData(
+    headingsDetachedProcessed,
+    activeNavigationHeading,
+    pageContext,
+    config
+  )
+  const { faviconUrl, algolia, tagline, twitterHandle, bannerUrl, websiteUrl } = config
+  const pageContextResolved = {}
+  objectAssign(pageContextResolved, {
+    ...pageContext,
+    meta: {
+      title,
+      faviconUrl,
+      twitterHandle,
+      bannerUrl,
+      websiteUrl,
+      tagline,
+      algolia
+    },
+    activeHeading,
+    headingsAll,
+    headingsProcessed,
+    headingsDetachedProcessed,
+    headingsOfDetachedPage,
+    isLandingPage,
+    pageTitle,
+    config
+  })
+  return pageContextResolved
+}
+
+function getMetaData(
+  headingsDetachedProcessed: HeadingDetached[],
+  activeNavigationHeading: Heading | null,
+  pageContext: { urlOriginal: string; exports: Exports },
+  config: Config
+) {
+  const url = pageContext.urlOriginal
+
+  let title: string
+  let pageTitle: string | JSX.Element | null
+  if (activeNavigationHeading) {
+    title = activeNavigationHeading.titleDocument || jsxToTextContent(activeNavigationHeading.title)
+    pageTitle = activeNavigationHeading.title
+  } else {
+    pageTitle = headingsDetachedProcessed.find((h) => h.url === url)!.title
+    title = jsxToTextContent(pageTitle)
+  }
+
+  const isLandingPage = url === '/'
+  if (!isLandingPage) {
+    title += ' | ' + config.projectInfo.projectName
+  }
+
+  if (isLandingPage) {
+    pageTitle = null
+  }
+
+  return { title, isLandingPage, pageTitle }
+}
+
+function findHeading(
+  headingsProcessed: Heading[],
+  headingsDetachedProcessed: HeadingDetached[],
+  pageContext: { urlOriginal: string; exports: Exports }
+): { activeHeading: Heading | HeadingDetached; activeNavigationHeading: Heading | null } {
+  let activeNavigationHeading: Heading | null = null
+  let activeHeading: Heading | HeadingDetached | null = null
+  assert(pageContext.urlOriginal)
+  const pageUrl = pageContext.urlOriginal
+  headingsProcessed.forEach((heading) => {
+    if (heading.url === pageUrl) {
+      activeNavigationHeading = heading
+      activeHeading = heading
+      assert(heading.level === 2, { pageUrl, heading })
+    }
+  })
+  if (!activeHeading) {
+    activeHeading = headingsDetachedProcessed.find(({ url }) => pageUrl === url) ?? null
+  }
+  if (!activeHeading) {
+    throw new Error(
+      [
+        `Heading not found for URL '${pageUrl}'`,
+        'Heading is defined for following URLs:',
+        ...headingsProcessed
+          .map((h) => `  ${h.url}`)
+          .filter(Boolean)
+          .sort()
+      ].join('\n')
+    )
+  }
+  return { activeHeading, activeNavigationHeading }
+}
+
+function getHeadingsAll<T extends Heading | HeadingDetached>(
+  headingsProcessed: T[],
+  pageContext: { exports: Exports; urlOriginal: string },
+  activeHeading: T
+): T[] {
+  const headingsAll = headingsProcessed.slice()
+
+  const headingsOfTheCurrentPage = getHeadingsOfTheCurrentPage(pageContext, activeHeading)
+
+  const activeHeadingIdx = headingsAll.indexOf(activeHeading)
+  assert(activeHeadingIdx >= 0)
+  headingsOfTheCurrentPage.forEach((pageHeading, i) => {
+    headingsAll.splice(activeHeadingIdx + 1 + i, 0, pageHeading as T)
+  })
+
+  return headingsAll
+}
+
+function getHeadingsOfTheCurrentPage(
+  pageContext: { exports: Exports; urlOriginal: string },
+  currentHeading: Heading | HeadingDetached
+) {
+  const headingsOfCurrentPage: Heading[] = []
+
+  const headingsExport = pageContext.exports.headings ?? []
+
+  headingsExport.forEach((markdownHeading) => {
+    const title = parseTitle(markdownHeading.title)
+    const url: null | string = markdownHeading.headingId && '#' + markdownHeading.headingId
+    if (markdownHeading.headingLevel === 2) {
+      const heading: Heading = {
+        url,
+        title,
+        headingsBreadcrumb: [currentHeading, ...(currentHeading.headingsBreadcrumb ?? [])],
+        titleInNav: title,
+        level: 3
+      }
+      headingsOfCurrentPage.push(heading)
+    }
+  })
+
+  if (currentHeading?.sectionTitles) {
+    currentHeading.sectionTitles.forEach((sectionTitle) => {
+      const pageHeadingTitles = headingsExport.map((h) => h.title)
+      assert(pageHeadingTitles.includes(sectionTitle), { pageHeadingTitles, sectionTitle })
+    })
+  }
+
+  return headingsOfCurrentPage
+}

package/css/button.css

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

package/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/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/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/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)
+ */