@brillout/docpress 0.0.45

package/src/components/Sponsors.tsx

@@ -0,0 +1,240 @@
+import React from 'react'
+import iconHeart from '../icons/heart.svg'
+import { usePageContext } from '../renderer/usePageContext'
+import { assert } from '../utils'
+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'
+import { Emoji } from '../utils/Emoji'
+
+export { Sponsors }
+
+type Plan = '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: 'platinum',
+    website: 'https://contra.com'
+  },
+  {
+    companyName: 'ccoli',
+    companyLogo: ccoliLogo,
+    plan: 'gold',
+    website: 'https://ccoli.co'
+  },
+  {
+    companyName: 'My Favorite Quilt Store',
+    companyLogo: mfqsLogo,
+    plan: 'silver',
+    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 = ['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') {
+    return { width: 400, height: 150, padding: 95 }
+  }
+  if (plan === 'gold') {
+    return { width: 300, height: 100, padding: 45 }
+  }
+  if (plan === 'silver') {
+    return { width: 200, height: 70, padding: 30 }
+  }
+  if (plan === 'bronze') {
+    return { width: 150, height: 40, padding: 15 }
+  }
+  assert(false)
+}
+
+function capitalizeFirstLetter(word: string): string {
+  return word[0].toUpperCase() + word.slice(1)
+}

package/src/components/TextContactUs.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { usePageContext } from '../renderer/usePageContext'
+
+export { TextContactUs }
+
+function TextContactUs() {
+  const pageContext = usePageContext()
+  const { projectInfo } = pageContext.config
+  return (
+    <>
+      <a href={projectInfo.discordInvite}>Join our Discord</a> or{' '}
+      <a href={projectInfo.githubIssues}>open a GitHub ticket</a>.
+    </>
+  )
+}

package/src/components/features/FeatureList.css

@@ -0,0 +1,117 @@
+@media screen and (min-width: 840px) {
+  .features-row {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .features-row summary:nth-of-type(1) {
+    grid-row: 1;
+    grid-column: 1 / 2;
+  }
+  .features-row summary:nth-of-type(2) {
+    grid-row: 1;
+    grid-column: 2 / 3;
+  }
+  .features-row aside {
+    grid-row: 2;
+    grid-column: 1 / 3;
+  }
+}
+
+@media screen and (min-width: 840px) {
+  .features-row.single-column .feature {
+    grid-column: 1 / span 2 !important;
+    width: 100% !important;
+    max-width: calc(1010px / 2) !important;
+    margin: auto !important;
+  }
+}
+
+#features {
+  margin: auto;
+  margin-top: 0;
+  max-width: 1080px;
+}
+
+#features summary p {
+  margin: 10px 0;
+}
+#features h2 {
+  margin-bottom: 0.7em;
+  margin-top: 0.5em;
+}
+#features .secondary-feature h2 {
+  font-size: 1.1em;
+  margin-bottom: 0.7em;
+}
+.learn-more h3:first-of-type {
+  margin-top: 15px;
+}
+
+.learn-more {
+  border: var(--border-width) solid var(--border-color);
+  padding: 10px 8px;
+}
+@media screen and (min-width: 840px) {
+  .learn-more {
+    max-width: 886px;
+    border-radius: var(--border-radius);
+  }
+}
+aside.learn-more:not(.right-side) {
+  border-top-left-radius: 0;
+}
+aside.learn-more.right-side {
+  border-top-right-radius: 0;
+  justify-self: end;
+  width: 100%;
+}
+@media screen and (max-width: 340px) {
+  .learn-more {
+    padding-right: 5px;
+    padding-left: 5px;
+  }
+}
+.learn-more {
+  display: none;
+}
+.learn-more.selected {
+  display: block;
+}
+#features {
+  --border-radius: 20px;
+  --border-width: 10px;
+  --border-color: #f6f6f6;
+}
+.feature {
+  padding: 8px;
+  border-width: var(--border-width);
+  border-style: solid;
+  border-color: transparent;
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+.selected {
+  border-color: var(--border-color);
+  background-color: #fcfcfc;
+}
+.feature.selected {
+  border-bottom: 0 !important;
+  z-index: 1;
+}
+
+/* Hide top border of .learn-more */
+.learn-more {
+  position: relative;
+  top: calc(-1 * var(--border-width));
+}
+.feature {
+  position: relative;
+  z-index: 1;
+}
+
+.feature .chevron {
+  transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out !important;
+}
+.feature.selected .chevron {
+  transform: rotate(180deg);
+}

package/src/components/features/FeatureList.tsx

@@ -0,0 +1,114 @@
+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/chevron.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg width="512.05" height="292.52" version="1.1" viewBox="0 0 512.05 292.52" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata>
+<g transform="translate(.025 -109.68)">
+	<path fill="#323d48" d="m10.7 172.1 219.4 219.4c6.8 6.8 16.2 10.7 25.9 10.7s19.1-3.9 25.9-10.7l219.4-219.4c14.3-14.3 14.3-37.4 0-51.7s-37.4-14.3-51.7 0l-193.6 193.6-193.6-193.6c-14.3-14.3-37.4-14.3-51.7 0s-14.3 37.5 0 51.7z"/>
+</g>
+</svg>

package/src/components/features/initFeatureList.ts

@@ -0,0 +1,61 @@
+import { assert } from '../../utils'
+
+addTwitterWidgets()
+addFeatureClickHandlers()
+
+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)
+}

package/src/components/index.ts

@@ -0,0 +1,14 @@
+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 './ContactUs'
+export * from './TextContactUs'
+export * from './Sponsors'

package/src/config/Config.ts

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

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