@brillout/docpress 0.1.17 → 0.2.0

package/src/components/Sponsors.tsx

@@ -1,242 +0,0 @@
-import React from 'react'
-import iconHeart from '../icons/heart.svg'
-import { usePageContext } from '../renderer/usePageContext'
-import { assert, Emoji } from '../utils/server'
-import ccoliLogo from './Sponsors/companyLogos/ccoli.svg'
-import contraLogo from './Sponsors/companyLogos/contra.svg'
-import mfqsLogo from './Sponsors/companyLogos/mfqs.svg'
-import medalGold from './Sponsors/medalGold.svg'
-import medalSilver from './Sponsors/medalSilver.svg'
-import medalBronze from './Sponsors/medalBronze.svg'
-import labelBgImg from './Sponsors/label.svg'
-
-export { Sponsors }
-
-type Plan = 'FREE_SLOT' | 'bronze' | 'silver' | 'gold' | 'platinum'
-
-type SponsorCompany = {
-  companyName: string
-  companyLogo: string
-  website: string
-  plan: Plan
-}
-type SponsorIndividual = {
-  username: string
-}
-type Sponsor = SponsorCompany | SponsorIndividual
-
-const sponsors: Sponsor[] = [
-  {
-    companyName: 'Contra',
-    companyLogo: contraLogo,
-    plan: 'gold',
-    website: 'https://contra.com'
-  },
-  {
-    companyName: 'ccoli',
-    companyLogo: ccoliLogo,
-    plan: 'silver',
-    website: 'https://ccoli.co'
-  },
-  {
-    companyName: 'My Favorite Quilt Store',
-    companyLogo: mfqsLogo,
-    plan: 'bronze',
-    website: 'https://myfavoritequiltstore.com'
-  },
-  {
-    username: 'spacedawwwg'
-  },
-  {
-    username: 'codthing'
-  },
-  {
-    username: 'Junaidhkn'
-  },
-  {
-    username: 'zgfdev'
-  }
-]
-
-function Sponsors() {
-  const pageContext = usePageContext()
-  const { projectInfo } = pageContext.config
-  return (
-    <div style={{ textAlign: 'center', marginTop: 19 }}>
-      <a
-        className="button"
-        href="https://github.com/sponsors/brillout"
-        style={{
-          color: 'inherit',
-          display: 'inline-flex',
-          alignItems: 'center',
-          padding: '5px 10px',
-          marginBottom: 10
-        }}
-      >
-        <img src={iconHeart} height={22} /> <span style={{ marginLeft: 7, fontSize: '1.07em' }}>Sponsor</span>
-      </a>
-      <div></div>
-      <div style={{ maxWidth: 400, display: 'inline-block', marginTop: 12, marginBottom: 12 }}>
-        {projectInfo.projectNameJsx || projectInfo.projectName} is free and open source, made possible by wonderful
-        sponsors.
-      </div>
-      <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'end' }}>
-        {sponsors.map((sponsor, i) => (
-          <SponsorDiv sponsor={sponsor} key={i} />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function SponsorDiv({ sponsor }: { sponsor: Sponsor }) {
-  let imgSrc: string
-  let imgAlt: string | undefined
-  let width: number
-  let height: number
-  let website: string
-  let padding: number
-  let backgroundColor = '#f0f0f0'
-  let label: null | JSX.Element = null
-  if ('username' in sponsor) {
-    website = `https://github.com/${sponsor.username}`
-    imgSrc = `https://github.com/${sponsor.username}.png?size=30`
-    width = 30
-    height = 30
-    padding = 0
-    backgroundColor = 'none'
-  } else {
-    imgSrc = sponsor.companyLogo
-    website = sponsor.website
-    const size = getSize(sponsor.plan)
-    width = size.width
-    height = size.height
-    padding = size.padding
-    imgAlt = sponsor.companyName
-    label = <Label sponsor={sponsor} />
-  }
-  const marginWidth = 5
-  return (
-    <a
-      href={website}
-      style={{
-        margin: `10px ${marginWidth}px`
-      }}
-    >
-      {label}
-      <div
-        style={{
-          backgroundColor,
-          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'
-        }}
-      >
-        <img
-          style={{ width: `calc(100% - ${padding}px)`, height: height - padding, zIndex: 2 }}
-          src={imgSrc}
-          alt={imgAlt}
-        />
-      </div>
-    </a>
-  )
-}
-
-function Label({ sponsor }: { sponsor: Sponsor }) {
-  assert(!('username' in 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 <></>
-  }
-  const letterSpacing = ['bronze', 'silver', 'gold'].includes(sponsor.plan) ? 1 : undefined
-  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 === '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(plan: Plan) {
-  if (plan === 'platinum') {
-    assert(false)
-  }
-  if (plan === 'gold') {
-    return { width: 400, height: 150, padding: 95 }
-  }
-  if (plan === 'silver') {
-    return { width: 300, height: 100, padding: 45 }
-  }
-  if (plan === 'bronze') {
-    return { width: 200, height: 70, padding: 30 }
-  }
-  if (plan === 'FREE_SLOT') {
-    return { width: 150, height: 40, padding: 15 }
-  }
-  assert(false)
-}
-
-function capitalizeFirstLetter(word: string): string {
-  return word[0].toUpperCase() + word.slice(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;
-}