@brillout/docpress 0.7.5 → 0.7.7

package/Layout.css

@@ -22,10 +22,10 @@
 .landing-page .page-wrapper {
   --main-view-max-width: 1010px;
 }
-.page-wrapper {
+.page-layout:not(.noSideNavigation) .page-wrapper {
   max-width: calc(var(--main-view-max-width) + 80px);
 }
-.page-content {
+.page-layout:not(.noSideNavigation) .page-content {
   box-sizing: content-box;
   max-width: var(--main-view-max-width);
   padding: 20px var(--main-view-padding);

package/Layout.tsx

@@ -9,11 +9,13 @@ import { NavigationFullscreenButton } from './navigation/navigation-fullscreen/N
 import { parseTitle } from './parseTitle'
 import { usePageContext, usePageContext2 } from './renderer/usePageContext'
 import { Links } from './navigation/NavigationHeader'
+import { hotkeyLabel } from './navigation/navigation-fullscreen/hotkeyLabel'
 
 function Layout({ children }: { children: React.ReactNode }) {
   const pageContext = usePageContext()
   const pageContext2 = usePageContext2()
-  const { isLandingPage, pageTitle, navigationData, noSideNavigation, topNavigationList } = pageContext
+  const { isLandingPage, pageTitle, navigationData, noSideNavigation, topNavigationList, topNavigationStyle } =
+    pageContext
   const pageTitleParsed = pageTitle && parseTitle(pageTitle)
   const { globalNote } = pageContext.config
   const { NavHeader } = pageContext2.config.NavHeader!
@@ -27,23 +29,28 @@ function Layout({ children }: { children: React.ReactNode }) {
             display: 'flex',
             color: 'inherit',
             alignItems: 'center',
-            justifyContent: 'space-between',
+            justifyContent: noSideNavigation === 'no-logo' ? 'center' : 'space-between',
             textDecoration: 'none',
-            maxWidth: 1024,
-            margin: 'auto',
+            marginBottom: 'var(--block-margin)',
+            backgroundColor: 'var(--bg-color)',
+            ...topNavigationStyle,
           }}
         >
-          <a href="/" style={{ display: 'flex', alignItems: 'center', color: 'inherit' }}>
-            <NavHeader />
-          </a>
+          {noSideNavigation !== 'no-logo' && (
+            <a href="/" style={{ display: 'flex', alignItems: 'center', color: 'inherit' }}>
+              <NavHeader />
+            </a>
+          )}
           <div style={{ display: 'flex', alignItems: 'center' }}>
-            <TopNavigationLink id="doclink">Documentation</TopNavigationLink>
+            <TopNavigationLink id="doclink" aria-label={hotkeyLabel} data-balloon-pos="left">
+              Documentation
+            </TopNavigationLink>
             {topNavigationList.map(({ title, url }) => (
               <TopNavigationLink href={url!} key={url}>
                 {title}
               </TopNavigationLink>
             ))}
-            <Links style={{ display: 'inline-flex', marginLeft: 10 }} />
+            <Links style={{ display: 'inline-flex', marginLeft: 5 }} />
           </div>
         </div>
       )}

package/algolia/DocSearch.css

@@ -14,7 +14,7 @@
 }
 .DocSearch-Button {
   background: transparent !important;
-  padding: 3px !important;
+  padding: 5px !important;
   outline: none !important;
   border: none !important;
   box-shadow: none !important;

package/components/Contributors.tsx

@@ -2,7 +2,7 @@ export { Contributors, Maintainer }
 
 import React from 'react'
 import { usePageContext } from '../renderer/usePageContext'
-import { Supporter, SupporterSection, SectionDescription, Individuals, SupporterImg } from './Supporters'
+import { Supporter, SupporterSection, Individuals, SupporterImg } from './Supporters'
 import { maintainers } from '../data/maintainersList'
 import { contributors } from 'vike-contributors' // sorted by number of contributions
 
@@ -11,9 +11,14 @@ function Contributors() {
   const { projectInfo } = pageContext.config
   return (
     <SupporterSection>
-      <SectionDescription>
+      <p
+        style={{
+          maxWidth: 400,
+          display: 'inline-block',
+        }}
+      >
         {projectInfo.projectName} is built and maintained by passionate contributors.
-      </SectionDescription>
+      </p>
       <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly', alignItems: 'end' }}>
         {maintainers.map((maintainer, i) => (
           <Maintainer maintainer={maintainer} key={i} />

package/components/Sponsors/label.svg

@@ -1,5 +1,5 @@
 <svg width="59.641mm" height="13.076mm" version="1.1" viewBox="0 0 59.641 13.076" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(-91.006 -265.33)">
-  <path d="m103.72 265.33s-2.2571 0.0965-2.6687 0.40101c-0.9913 0.76735-1.5833 2.111-1.5833 2.111l-3.6393 7.2347c-0.28736 0.57132-1.024 2.1272-1.3956 2.4918-0.55117 0.83221-2.8381 0.81625-3.4273 0.83715h59.641c-0.5892-0.0209-2.8761-5e-3 -3.4273-0.83715-0.37156-0.36462-1.1082-1.9205-1.3956-2.4918l-3.6393-7.2347s-0.59202-1.3436-1.5833-2.111c-0.41164-0.30452-2.6683-0.40101-2.6683-0.40101h-28.632z" fill="#f0f0f0"/>
+  <path d="m103.72 265.33s-2.2571 0.0965-2.6687 0.40101c-0.9913 0.76735-1.5833 2.111-1.5833 2.111l-3.6393 7.2347c-0.28736 0.57132-1.024 2.1272-1.3956 2.4918-0.55117 0.83221-2.8381 0.81625-3.4273 0.83715h59.641c-0.5892-0.0209-2.8761-5e-3 -3.4273-0.83715-0.37156-0.36462-1.1082-1.9205-1.3956-2.4918l-3.6393-7.2347s-0.59202-1.3436-1.5833-2.111c-0.41164-0.30452-2.6683-0.40101-2.6683-0.40101h-28.632z" fill="#ebebeb"/>
  </g>
 </svg>

package/components/Sponsors.tsx

@@ -84,7 +84,7 @@ function CompanyDiv({ sponsor }: { sponsor: Sponsor }) {
       <Label sponsor={sponsor} />
       <div
         style={{
-          backgroundColor: '#f0f0f0',
+          backgroundColor: '#ebebeb',
           borderRadius: 7,
           overflow: 'hidden',
           width,
@@ -127,7 +127,7 @@ function Label({ sponsor }: { sponsor: Sponsor }) {
 
 function getLabelBg(sponsor: SponsorCompany) {
   const height = sponsor.plan === 'platinum' ? 32 : 24
-  return <img src={labelBgImg} style={{ height, position: 'absolute', bottom: 0, zIndex: -1 }} />
+  return <img src={labelBgImg} style={{ height, position: 'absolute', bottom: 0 }} />
 }
 
 function getLabelText(sponsor: SponsorCompany) {
@@ -166,9 +166,9 @@ function getLabelText(sponsor: SponsorCompany) {
 function getLabelIcon(sponsor: SponsorCompany) {
   let medalSrc: string
   if (sponsor.plan === 'platinum') {
-    return <Emoji name="trophy" style={{ fontSize: '1.3em' }} />
+    return <Emoji name="trophy" style={{ fontSize: '1.3em', position: 'relative' }} />
   } else if (sponsor.plan === 'indie') {
-    return <Emoji name="ribbon" style={{ fontSize: '0.9em' /*, position: 'relative', top: -1*/ }} />
+    return <Emoji name="ribbon" style={{ fontSize: '0.9em', position: 'relative', top: 1 }} />
   } else if (sponsor.plan === 'gold') {
     medalSrc = medalGold
   } else if (sponsor.plan === 'silver') {

package/components/Supporters.tsx

@@ -11,7 +11,6 @@ function SupporterSection({ children }: { children?: Children }) {
     <div
       style={{
         textAlign: 'center',
-        marginTop: 19,
       }}
     >
       {children}

package/config/resolvePageContext.ts

@@ -23,7 +23,7 @@ function resolvePageContext(pageContext: PageContextOriginal) {
   objectAssign(pageContextResolved, resolveHeadingsData(pageContext))
 
   const config = getConfig()
-  const { faviconUrl, algolia, tagline, twitterHandle, bannerUrl, websiteUrl } = config
+  const { faviconUrl, algolia, tagline, twitterHandle, bannerUrl, websiteUrl, topNavigationStyle } = config
   objectAssign(pageContextResolved, {
     urlPathname: pageContext.urlPathname, // TODO: remove
     meta: {
@@ -34,6 +34,7 @@ function resolvePageContext(pageContext: PageContextOriginal) {
       tagline,
       algolia,
     },
+    topNavigationStyle,
     config,
   })
 

package/css/block-design.css

@@ -0,0 +1,4 @@
+html {
+  --bg-color: #f5f5f7;
+  --block-margin: 5px;
+}

package/css/index.css

@@ -1,4 +1,5 @@
 @import './reset.css';
+@import './block-design.css';
 @import './colorize-on-hover.css';
 @import './heading.css';
 @import './button.css';

package/dist/components/Contributors.js

@@ -1,14 +1,17 @@
 export { Contributors, Maintainer };
 import React from 'react';
 import { usePageContext } from '../renderer/usePageContext';
-import { Supporter, SupporterSection, SectionDescription, Individuals, SupporterImg } from './Supporters';
+import { Supporter, SupporterSection, Individuals, SupporterImg } from './Supporters';
 import { maintainers } from '../data/maintainersList';
 import { contributors } from 'vike-contributors'; // sorted by number of contributions
 function Contributors() {
     var pageContext = usePageContext();
     var projectInfo = pageContext.config.projectInfo;
     return (React.createElement(SupporterSection, null,
-        React.createElement(SectionDescription, null,
+        React.createElement("p", { style: {
+                maxWidth: 400,
+                display: 'inline-block',
+            } },
             projectInfo.projectName,
             " is built and maintained by passionate contributors."),
         React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly', alignItems: 'end' } }, maintainers.map(function (maintainer, i) { return (React.createElement(Maintainer, { maintainer: maintainer, key: i })); })),

package/dist/components/Sponsors.js

@@ -44,7 +44,7 @@ function CompanyDiv(_a) {
         } },
         React.createElement(Label, { sponsor: sponsor }),
         React.createElement("div", { style: {
-                backgroundColor: '#f0f0f0',
+                backgroundColor: '#ebebeb',
                 borderRadius: 7,
                 overflow: 'hidden',
                 width: width,
@@ -77,7 +77,7 @@ function Label(_a) {
 }
 function getLabelBg(sponsor) {
     var height = sponsor.plan === 'platinum' ? 32 : 24;
-    return React.createElement("img", { src: labelBgImg, style: { height: height, position: 'absolute', bottom: 0, zIndex: -1 } });
+    return React.createElement("img", { src: labelBgImg, style: { height: height, position: 'absolute', bottom: 0 } });
 }
 function getLabelText(sponsor) {
     if (sponsor.plan === 'platinum') {
@@ -107,10 +107,10 @@ function getLabelText(sponsor) {
 function getLabelIcon(sponsor) {
     var medalSrc;
     if (sponsor.plan === 'platinum') {
-        return React.createElement(Emoji, { name: "trophy", style: { fontSize: '1.3em' } });
+        return React.createElement(Emoji, { name: "trophy", style: { fontSize: '1.3em', position: 'relative' } });
     }
     else if (sponsor.plan === 'indie') {
-        return React.createElement(Emoji, { name: "ribbon", style: { fontSize: '0.9em' /*, position: 'relative', top: -1*/ } });
+        return React.createElement(Emoji, { name: "ribbon", style: { fontSize: '0.9em', position: 'relative', top: 1 } });
     }
     else if (sponsor.plan === 'gold') {
         medalSrc = medalGold;

package/dist/components/Supporters.js

@@ -5,7 +5,6 @@ function SupporterSection(_a) {
     var children = _a.children;
     return (React.createElement("div", { style: {
             textAlign: 'center',
-            marginTop: 19,
         } }, children));
 }
 function SectionDescription(_a) {

package/dist/config/resolveHeadingsData.d.ts

@@ -13,7 +13,7 @@ declare function resolveHeadingsData(pageContext: PageContextOriginal): {
     isLandingPage: boolean;
     pageTitle: string | null;
     documentTitle: string;
-    noSideNavigation: true | undefined;
+    noSideNavigation: (true | "no-logo") | undefined;
     topNavigationList: {
         title: string;
         url: string | null | undefined;

package/dist/config/resolvePageContext.d.ts

@@ -20,7 +20,7 @@ declare function resolvePageContext(pageContext: PageContextOriginal): {
     isLandingPage: boolean;
     pageTitle: string | null;
     documentTitle: string;
-    noSideNavigation: true | undefined;
+    noSideNavigation: (true | "no-logo") | undefined;
     topNavigationList: {
         title: string;
         url: string | null | undefined;
@@ -39,5 +39,6 @@ declare function resolvePageContext(pageContext: PageContextOriginal): {
             indexName: string;
         } | null;
     };
+    topNavigationStyle: import("react").CSSProperties | undefined;
     config: import("../types/Config").Config;
 };

package/dist/config/resolvePageContext.js

@@ -6,7 +6,7 @@ function resolvePageContext(pageContext) {
     var pageContextResolved = {};
     objectAssign(pageContextResolved, resolveHeadingsData(pageContext));
     var config = getConfig();
-    var faviconUrl = config.faviconUrl, algolia = config.algolia, tagline = config.tagline, twitterHandle = config.twitterHandle, bannerUrl = config.bannerUrl, websiteUrl = config.websiteUrl;
+    var faviconUrl = config.faviconUrl, algolia = config.algolia, tagline = config.tagline, twitterHandle = config.twitterHandle, bannerUrl = config.bannerUrl, websiteUrl = config.websiteUrl, topNavigationStyle = config.topNavigationStyle;
     objectAssign(pageContextResolved, {
         urlPathname: pageContext.urlPathname, // TODO: remove
         meta: {
@@ -17,6 +17,7 @@ function resolvePageContext(pageContext) {
             tagline: tagline,
             algolia: algolia,
         },
+        topNavigationStyle: topNavigationStyle,
         config: config,
     });
     return pageContextResolved;

package/dist/navigation/NavigationHeader.js

@@ -45,10 +45,10 @@ function Links(_a) {
     return (React.createElement("div", { style: __assign({ display: 'flex', alignItems: 'center', paddingTop: 0, justifyContent: 'left' }, style) },
         algolia && (React.createElement("div", { className: "decolorize-6 colorize-on-hover" },
             React.createElement(DocSearch, { appId: algolia.appId, indexName: algolia.indexName, apiKey: algolia.apiKey, insights: true, hitComponent: Hit }))),
-        React.createElement(LinkIcon, { className: "decolorize-4", icon: iconGithub, href: projectInfo.githubRepository }),
+        iconI18n,
         projectInfo.discordInvite && (React.createElement(LinkIcon, { className: "decolorize-6", icon: iconDiscord, href: projectInfo.discordInvite })),
         React.createElement(LinkIcon, { className: "decolorize-4", icon: iconTwitter, href: projectInfo.twitterProfile }),
-        iconI18n,
+        React.createElement(LinkIcon, { className: "decolorize-4", icon: iconGithub, href: projectInfo.githubRepository }),
         React.createElement(ChangelogButton, null)));
 }
 function ChangelogButton() {
@@ -58,7 +58,7 @@ function ChangelogButton() {
             display: 'flex',
             alignItems: 'center',
             padding: '1px 7px',
-            marginLeft: 2,
+            marginLeft: 5,
             fontSize: '0.97em',
             color: 'inherit',
         } },
@@ -70,6 +70,6 @@ function ChangelogButton() {
 function LinkIcon(_a) {
     var className = _a.className, icon = _a.icon, href = _a.href, style = _a.style;
     return (React.createElement(React.Fragment, null,
-        React.createElement("a", { className: 'colorize-on-hover ' + className, href: href, style: { padding: 3, display: 'inline-block', lineHeight: 0 } },
+        React.createElement("a", { className: 'colorize-on-hover ' + className, href: href, style: { padding: 5, display: 'inline-block', lineHeight: 0 } },
             React.createElement("img", { src: icon, height: "20", style: style }))));
 }

package/dist/navigation/navigation-fullscreen/NavigationFullscreenButton.js

@@ -3,6 +3,7 @@ export { NavigationFullscreenClose };
 import React from 'react';
 import './NavigationFullscreenButton.css';
 import closeIcon from './close.svg';
+import { hotkeyLabel } from './hotkeyLabel';
 function NavigationFullscreenButton() {
     return (React.createElement(React.Fragment, null,
         React.createElement("a", { id: "navigation-fullscreen-button" },
@@ -14,9 +15,9 @@ function NavigationFullscreenButton() {
                     overflow: 'hidden',
                 } },
                 React.createElement("div", null)),
-            React.createElement("div", { style: { position: 'fixed', height: '100vh', width: 20 }, "aria-label": "Press <Esc>", "data-balloon-pos": "right" }))));
+            React.createElement("div", { style: { position: 'fixed', height: '100vh', width: 20 }, "aria-label": hotkeyLabel, "data-balloon-pos": "right" }))));
 }
 function NavigationFullscreenClose() {
-    return (React.createElement("a", { id: "navigation-fullscreen-close", style: { position: 'absolute', top: 11, right: 11, zIndex: 10 }, "aria-label": "Press <Esc>", "data-balloon-pos": "left" },
+    return (React.createElement("a", { id: "navigation-fullscreen-close", style: { position: 'absolute', top: 11, right: 11, zIndex: 10 }, "aria-label": hotkeyLabel, "data-balloon-pos": "left" },
         React.createElement("img", { src: closeIcon, height: 50, width: 50, style: { display: 'block' } })));
 }

package/dist/navigation/navigation-fullscreen/hotkeyLabel.d.ts

@@ -0,0 +1 @@
+export declare const hotkeyLabel = "Hotkey <Esc>";

package/dist/navigation/navigation-fullscreen/hotkeyLabel.js

@@ -0,0 +1 @@
+export var hotkeyLabel = 'Hotkey <Esc>';

package/dist/types/Config.d.ts

@@ -18,6 +18,7 @@ type Config = {
     };
     headings: HeadingDefinition[];
     headingsDetached: HeadingDetachedDefinition[];
+    topNavigationStyle?: React.CSSProperties;
     /** Sets `<meta name="description" content="${tagline}" />` */
     tagline: string;
     websiteUrl: string;

package/dist/types/Heading.d.ts

@@ -7,7 +7,7 @@ type HeadingResolved = {
     level: number;
     title: string;
     titleInNav: string;
-    noSideNavigation?: true;
+    noSideNavigation?: NoSideNavigation;
     topNavigation?: true | string;
     linkBreadcrumb: string[];
     sectionTitles?: string[];
@@ -27,7 +27,7 @@ type HeadingDetachedDefinition = HeadingDefinitionCommon & {
 type HeadingDefinition = HeadingDefinitionCommon & {
     url?: null | string;
     titleInNav?: string;
-    noSideNavigation?: true;
+    noSideNavigation?: NoSideNavigation;
 } & HeadingDefinitionLevel & Tmp;
 type IsCategory = {
     url?: undefined;
@@ -47,3 +47,4 @@ type HeadingDefinitionLevel = ({
 type Tmp = {
     titleDocument?: string;
 };
+type NoSideNavigation = true | 'no-logo';

package/navigation/NavigationHeader.tsx

@@ -81,12 +81,12 @@ function Links({ style }: { style?: React.CSSProperties }) {
           />
         </div>
       )}
-      <LinkIcon className="decolorize-4" icon={iconGithub} href={projectInfo.githubRepository} />
+      {iconI18n}
       {projectInfo.discordInvite && (
         <LinkIcon className="decolorize-6" icon={iconDiscord} href={projectInfo.discordInvite} />
       )}
       <LinkIcon className="decolorize-4" icon={iconTwitter} href={projectInfo.twitterProfile} />
-      {iconI18n}
+      <LinkIcon className="decolorize-4" icon={iconGithub} href={projectInfo.githubRepository} />
       <ChangelogButton />
     </div>
   )
@@ -103,7 +103,7 @@ function ChangelogButton() {
         display: 'flex',
         alignItems: 'center',
         padding: '1px 7px',
-        marginLeft: 2,
+        marginLeft: 5,
         fontSize: '0.97em',
         color: 'inherit',
       }}
@@ -122,7 +122,7 @@ function LinkIcon({ className, icon, href, style }: { className: string; icon: s
       <a
         className={'colorize-on-hover ' + className}
         href={href}
-        style={{ padding: 3, display: 'inline-block', lineHeight: 0 }}
+        style={{ padding: 5, display: 'inline-block', lineHeight: 0 }}
       >
         <img src={icon} height="20" style={style} />
       </a>

package/navigation/navigation-fullscreen/NavigationFullscreenButton.tsx

@@ -4,6 +4,7 @@ export { NavigationFullscreenClose }
 import React from 'react'
 import './NavigationFullscreenButton.css'
 import closeIcon from './close.svg'
+import { hotkeyLabel } from './hotkeyLabel'
 
 function NavigationFullscreenButton() {
   return (
@@ -22,7 +23,7 @@ function NavigationFullscreenButton() {
         </div>
         <div
           style={{ position: 'fixed', height: '100vh', width: 20 }}
-          aria-label="Press <Esc>"
+          aria-label={hotkeyLabel}
           data-balloon-pos="right"
         ></div>
       </a>
@@ -35,7 +36,7 @@ function NavigationFullscreenClose() {
     <a
       id="navigation-fullscreen-close"
       style={{ position: 'absolute', top: 11, right: 11, zIndex: 10 }}
-      aria-label="Press <Esc>"
+      aria-label={hotkeyLabel}
       data-balloon-pos="left"
     >
       <img src={closeIcon} height={50} width={50} style={{ display: 'block' }} />

package/navigation/navigation-fullscreen/hotkeyLabel.ts

@@ -0,0 +1 @@
+export const hotkeyLabel = 'Hotkey <Esc>'

package/package.json

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

package/types/Config.ts

@@ -20,6 +20,7 @@ type Config = {
   }
   headings: HeadingDefinition[]
   headingsDetached: HeadingDetachedDefinition[]
+  topNavigationStyle?: React.CSSProperties
 
   /** Sets `<meta name="description" content="${tagline}" />` */
   tagline: string

package/types/Heading.ts

@@ -8,7 +8,7 @@ type HeadingResolved = {
   level: number
   title: string
   titleInNav: string
-  noSideNavigation?: true
+  noSideNavigation?: NoSideNavigation
   topNavigation?: true | string
   linkBreadcrumb: string[]
   sectionTitles?: string[]
@@ -32,7 +32,7 @@ type HeadingDetachedDefinition = HeadingDefinitionCommon & {
 type HeadingDefinition = HeadingDefinitionCommon & {
   url?: null | string
   titleInNav?: string
-  noSideNavigation?: true
+  noSideNavigation?: NoSideNavigation
 } & HeadingDefinitionLevel &
   Tmp
 type IsCategory = {
@@ -54,3 +54,5 @@ type Tmp = {
   // TODO: remove? Both Vike and Telefunc set it to the same value than docpress.config.js#projectInfo.projectName
   titleDocument?: string
 }
+
+type NoSideNavigation = true | 'no-logo'