@brillout/docpress 0.14.0 → 0.15.0

package/ExternalLinks.tsx

@@ -12,7 +12,7 @@ import '@docsearch/css'
 
 function ExternalLinks(props: { style?: React.CSSProperties }) {
   const pageContext = usePageContext()
-  const { projectInfo, i18n } = pageContext.globalContext.config.docpress
+  const { github, discord, bluesky, i18n, twitter } = pageContext.globalContext.config.docpress
   const iconI18n = !i18n ? null : (
     <LinkIcon
       className="decolorize-4"
@@ -31,18 +31,10 @@ function ExternalLinks(props: { style?: React.CSSProperties }) {
       }}
     >
       {iconI18n}
-      {projectInfo.discordInvite && (
-        <LinkIcon className="decolorize-6" icon={iconDiscord} href={projectInfo.discordInvite} />
-      )}
-      <LinkIcon className="decolorize-4" icon={iconTwitter} href={projectInfo.twitterProfile} />
-      {projectInfo.blueskyHandle && (
-        <LinkIcon
-          className="decolorize-6"
-          icon={iconBluesky}
-          href={`https://bsky.app/profile/${projectInfo.blueskyHandle}`}
-        />
-      )}
-      <LinkIcon className="decolorize-4" icon={iconGithub} href={projectInfo.githubRepository} />
+      {discord && <LinkIcon className="decolorize-6" icon={iconDiscord} href={discord} />}
+      {twitter && <LinkIcon className="decolorize-4" icon={iconTwitter} href={`https://x.com/${twitter.slice(1)}`} />}
+      {bluesky && <LinkIcon className="decolorize-6" icon={iconBluesky} href={`https://bsky.app/profile/${bluesky}`} />}
+      <LinkIcon className="decolorize-4" icon={iconGithub} href={github} />
       <ChangelogButton />
     </div>
   )
@@ -50,10 +42,10 @@ function ExternalLinks(props: { style?: React.CSSProperties }) {
 
 function ChangelogButton() {
   const pageContext = usePageContext()
-  const { projectInfo } = pageContext.globalContext.config.docpress
+  const { version, github } = pageContext.globalContext.config.docpress
   return (
     <a
-      href={`${projectInfo.githubRepository}/blob/main/CHANGELOG.md`}
+      href={`${github}/blob/main/CHANGELOG.md`}
       className="colorize-on-hover"
       style={{
         display: 'flex',
@@ -72,7 +64,7 @@ function ChangelogButton() {
         }}
       >
         <span id="version-number" className="decolorize-7">
-          v{projectInfo.projectVersion}
+          v{version}
         </span>
         <img className="decolorize-6" src={iconChangelog} height={16} style={{ marginLeft: 6 }} />
       </div>

package/Layout.tsx

@@ -282,10 +282,7 @@ const menuLinkStyle: React.CSSProperties = {
 function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   const pageContext = usePageContext()
   const { isLandingPage } = pageContext.conf
-  const {
-    navMaxWidth,
-    projectInfo: { projectName },
-  } = pageContext.globalContext.config.docpress
+  const { navMaxWidth, name } = pageContext.globalContext.config.docpress
 
   const navSecondaryContent = (
     <div
@@ -345,7 +342,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
             maxWidth: navMaxWidth,
             margin: 'auto',
             height: 'var(--nav-head-height)',
-            fontSize: `min(15.2px, ${isProjectNameShort(projectName) ? '4.8cqw' : '4.5cqw'})`,
+            fontSize: `min(15.2px, ${isProjectNameShort(name) ? '4.8cqw' : '4.5cqw'})`,
             color: '#666',
             ['--icon-text-padding']: 'min(8px, 1.8cqw)',
             display: 'flex',
@@ -487,7 +484,7 @@ function NavHeaderLeftFullWidthBackground() {
 function NavLogo({ className }: { className: string }) {
   const pageContext = usePageContext()
   const iconSize = pageContext.globalContext.config.docpress.navLogoSize ?? 39
-  const { projectName } = pageContext.globalContext.config.docpress.projectInfo
+  const { name } = pageContext.globalContext.config.docpress
   return (
     <a
       className={cls(['nav-logo', className])}
@@ -500,7 +497,7 @@ function NavLogo({ className }: { className: string }) {
       href="/"
     >
       <img
-        src={pageContext.globalContext.config.docpress.logoUrl}
+        src={pageContext.globalContext.config.docpress.logo}
         style={{
           height: iconSize,
           width: iconSize,
@@ -516,17 +513,17 @@ function NavLogo({ className }: { className: string }) {
       <span
         style={{
           marginLeft: `calc(var(--icon-text-padding) + 2px)`,
-          fontSize: isProjectNameShort(projectName) ? '1.65em' : '1.3em',
+          fontSize: isProjectNameShort(name) ? '1.65em' : '1.3em',
           ...pageContext.globalContext.config.docpress.navLogoTextStyle,
         }}
       >
-        {projectName}
+        {name}
       </span>
     </a>
   )
 }
-function isProjectNameShort(projectName: string) {
-  return projectName.length <= 4
+function isProjectNameShort(name: string) {
+  return name.length <= 4
 }
 
 let onMouseIgnore: ReturnType<typeof setTimeout> | undefined

package/components/RepoLink.tsx

@@ -24,9 +24,8 @@ function getRepoHref(path: string, editMode = false) {
     path = '/' + path
   }
   const viewMode = path.endsWith('/') && !editMode ? 'tree' : 'blob'
-  const { githubRepository } = pageContext.globalContext.config.docpress.projectInfo
-  assert(githubRepository.startsWith('https://github.com/'))
-  let href = `${githubRepository}/${viewMode}/main${path}`
+  const { github } = pageContext.globalContext.config.docpress
+  let href = `${github}/${viewMode}/main${path}`
   if (editMode) href += '?plain=1'
   return href
 }

package/dist/components/RepoLink.js

@@ -22,9 +22,8 @@ function getRepoHref(path, editMode) {
         path = '/' + path;
     }
     var viewMode = path.endsWith('/') && !editMode ? 'tree' : 'blob';
-    var githubRepository = pageContext.globalContext.config.docpress.projectInfo.githubRepository;
-    assert(githubRepository.startsWith('https://github.com/'));
-    var href = "".concat(githubRepository, "/").concat(viewMode, "/main").concat(path);
+    var github = pageContext.globalContext.config.docpress.github;
+    var href = "".concat(github, "/").concat(viewMode, "/main").concat(path);
     if (editMode)
         href += '?plain=1';
     return href;

package/dist/resolveConf.js

@@ -114,7 +114,7 @@ function getTitles(activeHeading, urlPathname, config) {
     var pageTitle = isLandingPage ? null : title;
     var documentTitle = activeHeading.titleDocument || jsxToTextContent(parseMarkdownMini(title));
     if (!isLandingPage) {
-        documentTitle += ' | ' + config.projectInfo.projectName;
+        documentTitle += ' | ' + config.name;
     }
     if (isLandingPage) {
         pageTitle = null;

package/dist/types/Config.d.ts

@@ -1,37 +1,31 @@
 export type { Config };
 import type { HeadingDefinition, HeadingDetachedDefinition } from './Heading';
 type Config = {
-    projectInfo: {
-        githubRepository: string;
-        githubIssues: string;
-        githubDiscussions?: string;
-        projectName: string;
-        projectVersion: string;
-        discordInvite?: string;
-        twitterProfile: string;
-        blueskyHandle?: string;
-    };
-    docsDir?: string;
-    logoUrl?: string;
-    faviconUrl?: string;
-    algolia: null | {
+    name: string;
+    version: string;
+    url: string;
+    /** Sets `<meta name="description" content="${tagline}" />` */
+    tagline: string;
+    logo: string;
+    favicon?: string;
+    banner?: string;
+    github: string;
+    discord?: string;
+    twitter?: string;
+    bluesky?: string;
+    headings: HeadingDefinition[];
+    headingsDetached: HeadingDetachedDefinition[];
+    categories?: Category[];
+    algolia?: {
         appId: string;
         apiKey: string;
         indexName: string;
     };
-    headings: HeadingDefinition[];
-    headingsDetached: HeadingDetachedDefinition[];
-    categories?: Category[];
-    /** Sets `<meta name="description" content="${tagline}" />` */
-    tagline: string;
-    websiteUrl: string;
-    bannerUrl?: string;
-    twitterHandle: string;
-    globalNote?: React.ReactNode;
-    topNavigation?: React.ReactNode;
     i18n?: true;
     pressKit?: true;
-    sponsorGithubAccount?: string;
+    docsDir?: string;
+    globalNote?: React.ReactNode;
+    topNavigation?: React.ReactNode;
     navMaxWidth?: number;
     navLogoSize?: number;
     navLogoStyle?: React.CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/renderer/onRenderHtml.tsx

@@ -2,9 +2,10 @@ export { onRenderHtml }
 
 import ReactDOMServer from 'react-dom/server'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
-import { assert } from '../utils/server'
+import { assert, assertUsage } from '../utils/server'
 import { getPageElement } from './getPageElement'
 import type { PageContextServer } from 'vike/types'
+import type { Config } from '../types/Config'
 
 async function onRenderHtml(pageContext: PageContextServer): Promise<any> {
   const page = getPageElement(pageContext)
@@ -17,8 +18,7 @@ async function onRenderHtml(pageContext: PageContextServer): Promise<any> {
 
   const pageHtml = ReactDOMServer.renderToString(page)
 
-  const faviconUrl =
-    pageContext.globalContext.config.docpress.faviconUrl ?? pageContext.globalContext.config.docpress.logoUrl
+  const faviconUrl = pageContext.globalContext.config.docpress.favicon ?? pageContext.globalContext.config.docpress.logo
   assert(faviconUrl)
 
   const { documentTitle } = pageContext.conf
@@ -72,24 +72,21 @@ function getActiveCategory(pageContext: PageContextServer) {
   return activeCategory
 }
 
-function getOpenGraphTags(
-  url: string,
-  documentTitle: string,
-  meta: { tagline: string; websiteUrl: string; twitterHandle: string; bannerUrl?: string },
-) {
-  const { tagline, websiteUrl, twitterHandle, bannerUrl } = meta
+function getOpenGraphTags(url: string, documentTitle: string, config: Config) {
+  const { tagline, url: websiteUrl, twitter, banner } = config
   assert(url.startsWith('/'))
+  assertUsage(!twitter || twitter.startsWith('@'), `twitter handle must start with @`)
 
-  const metaBanner = !bannerUrl
+  const metaBanner = !banner
     ? ''
     : escapeInject`
-    <meta property="og:image" content="${bannerUrl}">
+    <meta property="og:image" content="${banner}">
     <meta name="twitter:card" content="summary_large_image">
   `
-  const metaTwitter = !twitterHandle
+  const metaTwitter = !twitter
     ? ''
     : escapeInject`
-    <meta name="twitter:site" content="${twitterHandle}">
+    <meta name="twitter:site" content="${twitter}">
   `
   // See view-source:https://vitejs.dev/
   return escapeInject`

package/resolveConf.ts

@@ -133,7 +133,7 @@ function getTitles(activeHeading: HeadingResolved | HeadingDetachedResolved, url
   let documentTitle = activeHeading.titleDocument || jsxToTextContent(parseMarkdownMini(title))
 
   if (!isLandingPage) {
-    documentTitle += ' | ' + config.projectInfo.projectName
+    documentTitle += ' | ' + config.name
   }
 
   if (isLandingPage) {

package/types/Config.ts

@@ -3,37 +3,36 @@ export type { Config }
 import type { HeadingDefinition, HeadingDetachedDefinition } from './Heading'
 
 type Config = {
-  projectInfo: {
-    githubRepository: string
-    githubIssues: string
-    githubDiscussions?: string
-    projectName: string
-    projectVersion: string
-    discordInvite?: string
-    twitterProfile: string
-    blueskyHandle?: string
-  }
-  docsDir?: string
-  logoUrl?: string
-  faviconUrl?: string
-  algolia: null | {
+  name: string
+  version: string
+  url: string
+  /** Sets `<meta name="description" content="${tagline}" />` */
+  tagline: string
+  logo: string
+  favicon?: string
+  banner?: string
+
+  github: string
+  discord?: string
+  twitter?: string
+  bluesky?: string
+
+  headings: HeadingDefinition[]
+  headingsDetached: HeadingDetachedDefinition[]
+  categories?: Category[]
+
+  algolia?: {
     appId: string
     apiKey: string
     indexName: string
   }
-  headings: HeadingDefinition[]
-  headingsDetached: HeadingDetachedDefinition[]
-  categories?: Category[]
-  /** Sets `<meta name="description" content="${tagline}" />` */
-  tagline: string
-  websiteUrl: string
-  bannerUrl?: string
-  twitterHandle: string
-  globalNote?: React.ReactNode
-  topNavigation?: React.ReactNode
+
   i18n?: true
   pressKit?: true
-  sponsorGithubAccount?: string
+  docsDir?: string
+
+  globalNote?: React.ReactNode
+  topNavigation?: React.ReactNode
   navMaxWidth?: number
   navLogoSize?: number
   navLogoStyle?: React.CSSProperties