@brillout/docpress 0.5.39 → 0.5.40-commit-1ba896e

package/components/Note.css

@@ -0,0 +1,54 @@
+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;
+  margin-right: 0;
+  padding: 4px 16px;
+}
+blockquote.note-color-red {
+  --color-strengh-bg: 1.7;
+  --color-strengh-border: 6;
+  --color: 190, 25, 49;
+}
+blockquote.note-color-yellow {
+  --color-strengh-bg: 4;
+  --color-strengh-border: 8;
+  --color: 255, 204, 50;
+}
+.blockquote-content {
+  display: inline;
+}
+blockquote.custom-icon > .blockquote-content > :first-child {
+  /* E.g. for <Warning> so that the warning icon is on the same line as the first paragraph.
+   * We assume the second element to have a top margin.
+   */
+  display: inline;
+}
+
+/************************/
+/*** Icon Positioning ***/
+/************************/
+blockquote.type-construction img[src^="https://twemoji."]
+{
+  margin-right: 2px;
+}
+blockquote.type-warning img[src^="https://twemoji."]
+{
+  position: relative;
+  top: -1px;
+  margin-right: 2px;
+}
+blockquote.type-danger img[src^="https://twemoji."]
+{
+  margin-right: 2px;
+}
+blockquote > p:first-child::before,
+/* blockquote > p:first-of-type::before, */
+blockquote > div.paragraph:first-child::before {
+  font-family: emoji;
+  content: 'ℹ️';
+  margin-right: 7px;
+}

package/components/Note.tsx

@@ -0,0 +1,78 @@
+export { Warning }
+export { Construction }
+export { Danger }
+export { NoteWithoutIcon }
+export { NoteWithCustomIcon }
+/* Use markdown instead:
+ * ```diff
+ * - <Note>Some note</Note>
+ * + > Some note
+ * ```
+export { Note }
+*/
+
+import React from 'react'
+import { assert } from '../utils/assert'
+/* Imorted in /src/css/index.css instead
+import './Note.css'
+*/
+
+function Warning({ children }: { children: React.ReactNode }) {
+  return <NoteGeneric type="warning">{children}</NoteGeneric>
+}
+function Construction({ children }: { children: React.ReactNode }) {
+  return <NoteGeneric type="construction">{children}</NoteGeneric>
+}
+function Danger({ children }: { children: React.ReactNode }) {
+  return <NoteGeneric type="danger">{children}</NoteGeneric>
+}
+function NoteWithoutIcon({ children }: { children: React.ReactNode }) {
+  return <NoteGeneric icon={null}>{children}</NoteGeneric>
+}
+type CustomIcon = JSX.Element | string
+function NoteWithCustomIcon({ icon, children }: { children: React.ReactNode; icon: CustomIcon }) {
+  if (!icon) throw new Error(`<NoteWithCustomIcon icon={/*...*/}> property 'icon' is \`${icon}\` which is forbidden`)
+  return <NoteGeneric icon={icon}>{children}</NoteGeneric>
+}
+
+function NoteGeneric({
+  type,
+  icon,
+  children
+}: {
+  icon?: null | CustomIcon
+  type?: 'danger' | 'warning' | 'construction'
+  children: React.ReactNode
+}) {
+  assert(icon === null || icon || type, { icon, type })
+
+  let className = 'custom-icon'
+  if (type) {
+    className = `${className} type-${type}`
+  }
+  if (!icon && type) {
+    let classColor = ''
+    if (type === 'danger') {
+      icon = ':no_entry:'
+      classColor = 'note-color-red'
+    }
+    if (type === 'warning') {
+      icon = ':warning:'
+      classColor = 'note-color-yellow'
+    }
+    if (type === 'construction') {
+      icon = ':construction:'
+      classColor = 'note-color-yellow'
+    }
+    assert(icon)
+    assert(classColor)
+    className = `${className} ${classColor}`
+  }
+  return (
+    <blockquote className={className}>
+      <div style={{ marginBottom: 20 }} />
+      {icon} <div className="blockquote-content">{children}</div>
+      <div style={{ marginTop: 20 }} />
+    </blockquote>
+  )
+}

package/components/P.css

@@ -0,0 +1,8 @@
+/* Copied from Chrome's user agent stylesheet */
+div.paragraph {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}

package/components/P.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import './P.css'
+
+export { P }
+
+function P(props: React.HTMLProps<HTMLDivElement>) {
+  return <div {...props} className={'paragraph'} />
+}

package/components/ReadingRecommendation.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Link } from './Link'
+
+export { ReadingRecommendation }
+
+function ReadingRecommendation({ tour, links }: { tour?: true; links?: string[] }) {
+  links ??= []
+  if (!links.length) tour = true
+  const multiple = links.length + (tour ? 1 : 0) > 1
+  const intro = <b>Reading Recommendation{multiple ? '.' : ': '}</b>
+  return (
+    <blockquote>
+      {(() => {
+        if (!multiple) {
+          const link = tour ? <TourLink /> : <Link href={links[0]} />
+          return (
+            <p>
+              {intro}
+              {link}
+            </p>
+          )
+        }
+        return (
+          <>
+            <p> {intro}</p>
+            <ul
+              style={{
+                marginLeft: 18,
+                marginTop: 11
+              }}
+            >
+              {tour && (
+                <li>
+                  <TourLink />
+                </li>
+              )}
+              {links.map((link, i) => (
+                <li key={i}>
+                  <Link href={link} />
+                </li>
+              ))}
+            </ul>
+          </>
+        )
+      })()}
+    </blockquote>
+  )
+}
+
+function TourLink() {
+  return (
+    <>
+      <Link href={'/react-tour'} noBreadcrumb={true} /> or <Link href={'/vue-tour'} noBreadcrumb={true} />
+    </>
+  )
+}

package/components/RepoLink.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { assert } from '../utils/server'
+import { usePageContext } from '../renderer/usePageContext'
+
+export { RepoLink }
+export { isRepoLink }
+
+function isRepoLink(href: string) {
+  return ['/examples/', '/docs/', '/boilerplates/', '.github/', '/test/'].some((start) => href.startsWith(start))
+}
+
+function RepoLink({ path, text, editMode }: { path: string; text?: string | JSX.Element; editMode?: true }) {
+  const pageContext = usePageContext()
+  assert(isRepoLink(path), { path })
+  text = text || path
+  if (!path.startsWith('/')) {
+    path = '/' + path
+  }
+  const viewMode = path.endsWith('/') || editMode ? 'tree' : 'blob'
+  const { githubRepository } = pageContext.config.projectInfo
+  assert(githubRepository.startsWith('https://github.com/'))
+  const href = `${githubRepository}/${viewMode}/main${path}`
+  return <a href={href}>{text}</a>
+}

package/components/Sponsors/label.draft.svg

@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="label.draft.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.9899495"
+     inkscape:cx="461.6406"
+     inkscape:cy="96.846632"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1366"
+     inkscape:window-height="736"
+     inkscape:window-x="0"
+     inkscape:window-y="16"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <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></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 51.40476,117.83928 13.530744,-23.435929 0.01098,0.0063 v 0"
+       id="path815"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 78.309972,119.26576 90.337099,96.280583 h 32.339611"
+       id="path817"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 71.815475,146.56548 H 85.96596 c 0.676332,-0.0209 3.30147,-0.005 3.934153,-0.83721 0.426501,-0.36462 1.272256,-1.92024 1.602106,-2.49156 l 4.177131,-7.23501 c 0,0 0.679705,-1.34341 1.817605,-2.11076 0.472523,-0.30451 3.063205,-0.4009 3.063205,-0.4009 h 13.21067"
+       id="path819"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+    <path
+       sodipodi:nodetypes="cccccccc"
+       inkscape:connector-curvature="0"
+       id="path859"
+       d="m 145.52085,146.56548 h -14.15049 c -0.67633,-0.0209 -3.30147,-0.005 -3.93415,-0.83721 -0.4265,-0.36462 -1.27226,-1.92024 -1.60211,-2.49156 l -4.17713,-7.23501 c 0,0 -0.67971,-1.34341 -1.81761,-2.11076 -0.47252,-0.30451 -3.0632,-0.4009 -3.0632,-0.4009 h -13.21068"
+       style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       sodipodi:nodetypes="ccccccccc"
+       inkscape:connector-curvature="0"
+       id="path967"
+       d="m 118.49554,172.57638 -47.05804,0 h 10.748698 c 0.676332,-0.0209 3.30147,-0.005 3.934153,-0.83721 0.426501,-0.36462 1.272256,-1.92024 1.602106,-2.49156 l 4.177131,-7.23501 c 0,0 0.679705,-1.34341 1.817605,-2.11076 0.472523,-0.30451 3.063205,-0.4009 3.063205,-0.4009 l 22.282102,0"
+       style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       style="fill:#f0f0f0;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+       d="M 365.78516 702.83789 C 365.78516 702.83789 355.99294 703.20261 354.20703 704.35352 C 349.90631 707.25374 347.33789 712.33203 347.33789 712.33203 L 331.54883 739.67578 C 330.30215 741.8351 327.10611 747.71566 325.49414 749.09375 C 323.1029 752.23911 313.18122 752.17882 310.625 752.25781 L 392.14258 752.25781 L 447.85742 752.25781 L 529.375 752.25781 C 526.81879 752.17882 516.89709 752.23911 514.50586 749.09375 C 512.89389 747.71566 509.69785 741.8351 508.45117 739.67578 L 492.66211 712.33203 C 492.66211 712.33203 490.09369 707.25374 485.79297 704.35352 C 484.00707 703.20261 474.2168 702.83789 474.2168 702.83789 L 450 702.83789 L 390 702.83789 L 365.78516 702.83789 z "
+       transform="scale(0.26458333)"
+       id="path977" />
+    <path
+       id="path982"
+       d="m 96.780656,212.41754 c 0,0 -2.590858,0.0965 -3.06338,0.40101 -1.137899,0.76735 -1.81746,2.11098 -1.81746,2.11098 l -4.177523,7.2347 c -0.32985,0.57132 -1.175469,2.12722 -1.60197,2.49184 -0.632682,0.83221 -3.257793,0.81625 -3.934126,0.83715 h 21.568193 30.61622 21.56819 c -0.67633,-0.0209 -3.30145,-0.005 -3.93413,-0.83715 -0.4265,-0.36462 -1.27212,-1.92052 -1.60197,-2.49184 l -4.17752,-7.2347 c 0,0 -0.67956,-1.34363 -1.81746,-2.11098 -0.47252,-0.30452 -3.06286,-0.40101 -3.06286,-0.40101 h -6.40736 -31.75 z"
+       style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccccccccccc" />
+    <path
+       sodipodi:nodetypes="ccccccccccccccccc"
+       inkscape:connector-curvature="0"
+       style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 96.780656,244.16756 c 0,0 -2.590858,0.0965 -3.06338,0.40101 -1.137899,0.76735 -1.81746,2.11098 -1.81746,2.11098 l -4.177523,7.2347 c -0.32985,0.57132 -1.175469,2.12722 -1.60197,2.49184 -0.632682,0.83221 -3.257793,0.81625 -3.934126,0.83715 h 21.568193 25.32455 21.56819 c -0.67633,-0.0209 -3.30145,-0.005 -3.93413,-0.83715 -0.4265,-0.36462 -1.27212,-1.92052 -1.60197,-2.49184 l -4.17752,-7.2347 c 0,0 -0.67956,-1.34363 -1.81746,-2.11098 -0.47252,-0.30452 -3.06286,-0.40101 -3.06286,-0.40101 h -6.40736 -26.45833 z"
+       id="path984" />
+    <path
+       id="path878"
+       d="m 103.72033,265.33423 c 0,0 -2.25707,0.0965 -2.66872,0.40101 -0.9913,0.76735 -1.583315,2.11098 -1.583315,2.11098 l -3.639329,7.2347 c -0.287355,0.57132 -1.024032,2.12722 -1.395586,2.49184 -0.551173,0.83221 -2.838088,0.81625 -3.427289,0.83715 h 18.789539 22.06196 18.78954 c -0.5892,-0.0209 -2.87612,-0.005 -3.42729,-0.83715 -0.37156,-0.36462 -1.10823,-1.92052 -1.39559,-2.49184 l -3.63932,-7.2347 c 0,0 -0.59202,-1.34363 -1.58332,-2.11098 -0.41164,-0.30452 -2.66827,-0.40101 -2.66827,-0.40101 h -5.58189 -23.04968 z"
+       style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.24695262px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccccccccccc" />
+  </g>
+</svg>

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>
+  )
+}