@brillout/docpress 0.5.40 → 0.6.1

package/+config.ts

@@ -0,0 +1,17 @@
+import type { Config } from 'vike/types'
+
+export default {
+  // @ts-expect-error remove this @ts-expect-error once Vike's new version is released
+  name: '@brillout/docpress' ,
+  onRenderHtml: 'import:@brillout/docpress/renderer/onRenderHtml:onRenderHtml',
+  client: 'import:@brillout/docpress/renderer/client:doesNotExist',
+  meta: {
+    Page: {
+      env: { client: false, server: true }
+    },
+    // Vike already defines the setting 'name', but we redundantly define it here for older Vike versions (otherwise older Vike versions will complain that 'name` is an unknown config).
+    name: {
+      env: { config: true }
+    }
+  }
+} satisfies Config

package/MobileHeader.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { usePageContext } from './renderer/usePageContext'
+
+export { MobileHeader }
+
+function MobileHeader() {
+  const pageContext = usePageContext()
+  return (
+    <div
+      id="mobile-header"
+      style={{
+        height: 'var(--mobile-header-height)',
+        width: '100%',
+        position: 'relative'
+      }}
+    >
+      <div
+        style={{
+          position: 'fixed',
+          display: 'flex',
+          alignItems: 'center',
+          background: 'white',
+          zIndex: 99,
+          top: 0,
+          left: 0,
+          height: 'var(--mobile-header-height)',
+          width: '100%',
+          borderBottom: '1px solid #ddd'
+        }}
+      >
+        <MenuToggle />
+        <a
+          href="/"
+          style={{
+            color: 'inherit',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'left',
+            textDecoration: 'none',
+            ...pageContext.config.navHeaderMobileWrapperStyle
+          }}
+        >
+          {pageContext.config.navHeaderMobile}
+        </a>
+      </div>
+    </div>
+  )
+}
+
+function MenuToggle() {
+  return (
+    <div style={{ padding: 20, lineHeight: 0, cursor: 'pointer' }} id="menu-toggle">
+      <svg
+        style={{ width: 20 }}
+        className="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        role="img"
+        viewBox="0 0 448 512"
+      >
+        <path
+          fill="currentColor"
+          d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
+        ></path>
+      </svg>
+    </div>
+  )
+}

package/PageLayout.css

@@ -0,0 +1,42 @@
+.doc-page #page-container {
+  padding-bottom: 100px;
+}
+
+#page-layout {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+#page-layout > #navigation-wrapper,
+#page-layout > #page-wrapper {
+  flex-grow: 1;
+}
+/* Avoid overflow, see https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container/66689926#66689926 */
+#page-layout > #page-wrapper {
+  min-width: 0;
+}
+
+.doc-page #page-wrapper {
+  --main-view-max-width: 800px;
+}
+.landing-page #page-wrapper {
+  --main-view-max-width: 1010px;
+}
+#page-wrapper {
+  max-width: calc(var(--main-view-max-width) + 80px);
+}
+#page-content {
+  box-sizing: content-box;
+  max-width: var(--main-view-max-width);
+  padding: 20px var(--main-view-padding);
+  margin: auto;
+}
+
+#page-content {
+  --main-view-padding: 20px;
+}
+@media screen and (max-width: 1139px) {
+  #page-content {
+    --main-view-padding: 10px;
+  }
+}

package/PageLayout.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Navigation, NavigationMask } from './navigation/Navigation'
+import type { PageContextResolved } from './config/resolvePageContext'
+import { MobileHeader } from './MobileHeader'
+import { EditPageNote } from './components/EditPageNote'
+import { PageContextProvider } from './renderer/usePageContext'
+import './PageLayout.css'
+import { NavigationFullscreenButton } from './navigation/navigation-fullscreen/NavigationFullscreenButton'
+
+export { PageLayout }
+
+function PageLayout({ pageContext, children }: { pageContext: PageContextResolved; children: React.ReactNode }) {
+  const { isLandingPage, pageTitle } = pageContext
+  const { globalNote } = pageContext.config
+  return (
+    <React.StrictMode>
+      <PageContextProvider pageContext={pageContext}>
+        <div id="page-layout" className={isLandingPage ? 'landing-page' : 'doc-page'}>
+          <div id="navigation-wrapper">
+            <Navigation pageContext={pageContext} />
+          </div>
+          <NavigationFullscreenButton />
+          <div id="page-wrapper">
+            <div id="page-container">
+              <MobileHeader />
+              <div id="page-content">
+                {globalNote}
+                {pageTitle && <h1>{pageTitle}</h1>}
+                {children}
+                {!isLandingPage && <EditPageNote pageContext={pageContext} />}
+              </div>
+            </div>
+            <NavigationMask />
+          </div>
+        </div>
+      </PageContextProvider>
+    </React.StrictMode>
+  )
+}

package/algolia/DocSearch.css

@@ -0,0 +1,34 @@
+.DocSearch-Button-Keys {
+  margin-left: 6px !important;
+}
+.DocSearch-Search-Icon {
+  margin-right: 0 !important;
+}
+.DocSearch-Button-Placeholder {
+  padding-right: 6px !important;
+}
+
+#docsearch-desktop {
+  max-width: 110px !important;
+}
+#docsearch-desktop .DocSearch-Button-Placeholder,
+#docsearch-desktop .DocSearch-Button-Keys {
+  display: none;
+}
+#docsearch-desktop .DocSearch-Button {
+  background: transparent !important;
+  padding: 0 !important;
+  position: relative;
+  top: -1px;
+  outline: none !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+#docsearch-desktop .DocSearch-Search-Icon {
+  height: 21px !important;
+  width: 21px !important;
+}
+#docsearch-desktop .DocSearch-Button {
+  margin-right: 3px !important;
+  margin-left: 1px !important;
+}

package/algolia/DocSearch.ts

@@ -0,0 +1,62 @@
+export { getDocSearchCSS }
+export { getDocSearchJS }
+
+import { dangerouslySkipEscape, escapeInject } from 'vike/server'
+import { PageContextResolved } from '../config/resolvePageContext'
+/* Imorted in /src/css/index.css instead
+import './DocSearch.css'
+*/
+
+function getDocSearchCSS(pageContext: PageContextResolved) {
+  const docSearchCSS = !pageContext.meta.algolia
+    ? ''
+    : escapeInject`
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
+    `
+  return docSearchCSS
+}
+
+function getDocSearchJS(pageContext: PageContextResolved) {
+  const { algolia } = pageContext.meta
+  // If the docpress website doesn't use algolia => we don't inject the algolia assets => the search icon wrapper stays empty
+  // If algolia is PENDING_APPROVAL => we fill a FAKE API key so that the algolia popup shows (while no results are shown).
+  //  - We show an alert warning users that there aren't any results until algolia's approval is pending (see below).
+  let docSearchJS = !algolia
+    ? ''
+    : escapeInject`
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
+    <script type="text/javascript">
+      const appId = '${algolia.appId || 'FAKE'}';
+      const apiKey = '${algolia.apiKey || 'FAKE'}';
+      const indexName = '${algolia.indexName || 'FAKE'}';
+      const transformItems = ${dangerouslySkipEscape(getTransformItems())};
+      docsearch({
+        container: '#docsearch-desktop',
+        appId, apiKey, indexName, transformItems,
+        insights: true,
+      });
+    </script>
+  `
+  if (algolia?.PENDING_APPROVAL) {
+    docSearchJS = escapeInject`
+    ${docSearchJS}
+    <script>document.getElementById('docsearch-desktop').addEventListener('click', () => window.alert("Algolia approval is pending: the search results may be empty until the approval process is completed."))</script>
+    `
+  }
+  return docSearchJS
+}
+
+// Remove superfluous hash '#page-content' from URLs pointing to whole pages
+//  - https://github.com/algolia/docsearch/issues/1801
+//  - https://discourse.algolia.com/t/how-to-avoid-hash-in-search-result-url/6486
+//  - https://discourse.algolia.com/t/docsearchs-transformdata-function-cannot-remove-hashes-from-result-urls/8487
+function getTransformItems() {
+  return `function(hits) {
+        hits.map(hit => {
+          if (hit.url.indexOf('#page-content') > 0) {
+            hit.url = hit.url.replace('#page-content', '');
+          }
+        });
+        return hits;
+      }`
+}

package/autoScrollNav.ts

@@ -0,0 +1,36 @@
+import { assert } from './utils/client'
+
+autoScrollNav()
+
+function autoScrollNav() {
+  const navigationEl = document.getElementById('navigation-content-main')
+  assert(navigationEl)
+  const href = window.location.pathname
+  const navLinks: HTMLElement[] = Array.from(navigationEl.querySelectorAll(`a[href="${href}"]`))
+  assert(navLinks.length <= 1, { navLinks, href })
+  const navLink = navLinks[0]
+  if (!navLink) return
+
+  /* Doesn't work: the scrolling is off by hundreds of px (I guess because this function runs too early while the page is still rendering)
+  const navigationContainerEl = document.getElementById("navigation-container")
+  const offset = navLink.offsetTop - (window.innerHeight / 2)
+  navigationContainerEl.scrollTop = offset
+  */
+
+  /* Doesn't work: scrollIntoView() still scrolls the main view
+  const overflowOriginal = document.documentElement.style.overflow
+  document.documentElement.style.overflow = 'hidden'
+  ...
+  document.documentElement.style.overflow = overflowOriginal
+  */
+
+  const scrollTopOriginal = document.documentElement.scrollTop
+  navLink.scrollIntoView({
+    // @ts-ignore https://github.com/microsoft/TypeScript/issues/46654
+    behavior: 'instant',
+    block: 'center',
+    inline: 'start'
+  })
+  // Avoid scrollIntoView() from scrolling the main view. Alternatively, we could use scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) which doesn't scroll the main view but Firefox doesn't support it.
+  document.documentElement.scrollTop = scrollTopOriginal
+}

package/components/CodeBlockTransformer.css

@@ -0,0 +1,9 @@
+.with-line-break_white-space code,
+.with-line-break_break-word code {
+  white-space: break-spaces;
+  padding-right: 16px !important;
+}
+.with-line-break_break-word code {
+  word-wrap: break-word;
+  word-break: break-all;
+}

package/components/CodeBlockTransformer.tsx

@@ -0,0 +1,18 @@
+export { CodeBlockTransformer }
+
+import React from 'react'
+import { assert } from '../utils/server'
+/* Imorted in /src/css/index.css instead
+import './CodeBlockTransformer.css'
+*/
+
+type LineBreak = 'white-space' | 'break-word'
+
+function CodeBlockTransformer({ children, lineBreak }: { children: React.ReactNode; lineBreak: LineBreak }) {
+  assert(
+    lineBreak === 'white-space' || lineBreak === 'break-word',
+    '`lineBreak` is currently the only use case for <CodeBlockTransformer>'
+  )
+  const className = `with-line-break_${lineBreak}` as const
+  return <div className={className}>{children}</div>
+}

package/components/Comment.tsx

@@ -0,0 +1,7 @@
+export { Comment }
+
+import React from 'react'
+
+function Comment({ children }: { children: React.ReactNode }) {
+  return <></>
+}

package/components/Consulting.tsx

@@ -0,0 +1,47 @@
+export { Consulting, Consultants }
+
+import React from 'react'
+import iconPeople from '../icons/people.svg'
+import { usePageContext } from '../renderer/usePageContext'
+import { SupporterSection, SectionDescription, CallToAction } from './Supporters'
+import { Maintainer } from './Contributors'
+import { maintainers } from '../data/maintainersList'
+import { Link } from './Link'
+const consultingPageHref = '/consulting'
+
+function Consulting() {
+  const pageContext = usePageContext()
+  const { projectInfo } = pageContext.config
+  const { projectName } = projectInfo
+  return (
+    <SupporterSection>
+      <CallToAction iconUrl={iconPeople} text="Consulting" href={consultingPageHref} />
+      <div></div>
+      <SectionDescription>
+        For questions and issues related to {projectName}, open a{' '}
+        <a href={projectInfo.githubDiscussions || projectInfo.githubIssues}>GitHub Discussion</a>. For advanced help or
+        help not directly related to {projectName}, the {projectName} team offers{' '}
+        <Link href={consultingPageHref} noBreadcrumb>
+          consulting
+        </Link>
+        .
+      </SectionDescription>
+    </SupporterSection>
+  )
+}
+
+function Consultants() {
+  return (
+    <SupporterSection>
+      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'end' }}>
+        {maintainers
+          .filter((maintainer) => {
+            return !!maintainer.consultingUrl
+          })
+          .map((maintainer, i) => (
+            <Maintainer maintainer={maintainer} key={i} />
+          ))}
+      </div>
+    </SupporterSection>
+  )
+}

package/components/Contributors.tsx

@@ -0,0 +1,113 @@
+export { Contributors, Maintainer }
+
+import React from 'react'
+import { usePageContext } from '../renderer/usePageContext'
+import { Supporter, SupporterSection, SectionDescription, Individuals, SupporterImg } from './Supporters'
+import { maintainers } from '../data/maintainersList'
+import { contributors } from 'vike-contributors' // sorted by number of contributions
+
+function Contributors() {
+  const pageContext = usePageContext()
+  const { projectInfo } = pageContext.config
+  return (
+    <SupporterSection>
+      <SectionDescription>
+        {projectInfo.projectName} is built and maintained by passionate contributors.
+      </SectionDescription>
+      <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly', alignItems: 'end' }}>
+        {maintainers.map((maintainer, i) => (
+          <Maintainer maintainer={maintainer} key={i} />
+        ))}
+      </div>
+      <Individuals>
+        {contributors
+          .filter((contributor) => {
+            return (
+              !contributor.login.includes('[bot]') && !maintainers.map((m) => m.username).includes(contributor.login)
+            )
+          })
+          .map((contributor, i) => (
+            <Supporter username={contributor.login} avatarUrl={contributor.avatarUrl} key={i} />
+          ))}
+      </Individuals>
+    </SupporterSection>
+  )
+}
+
+function Maintainer({ maintainer }: { maintainer: (typeof maintainers)[0] }) {
+  const marginHeight = 20
+  const marginWidth = 10
+  const imgSize = 50
+  const githubUrl = `https://github.com/${maintainer.username}`
+  return (
+    <div
+      style={{
+        borderRadius: 7,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: '#e0e0e0',
+        overflow: 'hidden',
+        width: 430,
+        maxWidth: `calc(100vw - 2 * var(--main-view-padding) - 2 * ${marginWidth}px)`,
+        margin: `${marginHeight}px ${marginWidth}px`,
+        display: 'flex',
+        flexWrap: 'wrap',
+        padding: 20,
+        gap: 20,
+        textAlign: 'left'
+      }}
+    >
+      <a href={githubUrl}>
+        <div style={{ width: imgSize, height: imgSize, borderRadius: imgSize / 2, overflow: 'hidden' }}>
+          <SupporterImg
+            username={maintainer.username}
+            avatarUrl={getAvatarUrl(maintainer)}
+            imgAlt={maintainer.firstName}
+            width={imgSize}
+            height={imgSize}
+          />
+        </div>
+      </a>
+      <div>
+        <b>{maintainer.firstName}</b> ·{' '}
+        <a href={githubUrl}>
+          <i style={{ fontSize: '.9em', color: '#505050' }}>{maintainer.username}</i>
+        </a>
+        {maintainer.consultingUrl ? (
+          <>
+            {' '}
+            ·{' '}
+            <a href={maintainer.consultingUrl}>
+              <b
+                style={{
+                  fontSize: '.7em',
+                  color: 'white',
+                  backgroundColor: '#305090',
+                  padding: '1px 5px 2px 5px',
+                  verticalAlign: 'text-top',
+                  borderRadius: 3
+                }}
+              >
+                consulting
+              </b>
+            </a>
+          </>
+        ) : null}
+        <ul style={{ fontSize: '.8em', paddingLeft: 15, marginTop: 5, marginBottom: 0 }}>
+          {maintainer.roles.map((role, i) => (
+            <li key={i}>{role}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+function getAvatarUrl(maintainer: (typeof maintainers)[0]) {
+  for (const contributor of contributors) {
+    if (maintainer.username === contributor.login) {
+      return contributor.avatarUrl
+    }
+  }
+  throw new Error(`Maintainer ${maintainer.username} not found in contributors' list.`)
+}

package/components/EditPageNote.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { RepoLink } from './RepoLink'
+import { Emoji } from '../utils/server'
+
+export { EditPageNote }
+
+function EditPageNote({ pageContext }: { pageContext: { urlPathname: string } }) {
+  const text = (
+    <>
+      <Emoji name="writing-hang" /> Edit this page
+    </>
+  )
+  return (
+    <div style={{ marginTop: 50 }}>
+      <RepoLink path={'/docs/pages' + pageContext.urlPathname + '/+Page.mdx'} text={text} editMode={true} />
+    </div>
+  )
+}

package/components/FeatureList/FeatureList.client.ts

@@ -0,0 +1,66 @@
+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/{dist/components/features → components/FeatureList}/FeatureList.css

@@ -1,4 +1,3 @@
-/* src/components/features/FeatureList.css */
 @media screen and (min-width: 840px) {
   .features-row {
     display: grid;
@@ -17,6 +16,7 @@
     grid-column: 1 / 3;
   }
 }
+
 @media screen and (min-width: 840px) {
   .features-row.single-column .feature {
     grid-column: 1 / span 2 !important;
@@ -25,11 +25,13 @@
     margin: auto !important;
   }
 }
+
 #features {
   margin: auto;
   margin-top: 0;
   max-width: 1080px;
 }
+
 #features summary p {
   margin: 10px 0;
 }
@@ -44,6 +46,7 @@
 .learn-more h3:first-of-type {
   margin-top: 15px;
 }
+
 .learn-more {
   border: var(--border-width) solid var(--border-color);
   padding: 10px 8px;
@@ -95,6 +98,8 @@ aside.learn-more.right-side {
   border-bottom: 0 !important;
   z-index: 1;
 }
+
+/* Hide top border of .learn-more */
 .learn-more {
   position: relative;
   top: calc(-1 * var(--border-width));
@@ -103,8 +108,11 @@ aside.learn-more.right-side {
   position: relative;
   z-index: 1;
 }
+
 .feature .chevron {
-  transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out !important;
+  transition:
+    filter 0.3s ease-in-out,
+    transform 0.3s ease-in-out !important;
 }
 .feature.selected .chevron {
   transform: rotate(180deg);