@brillout/docpress 0.12.5 → 0.13.0

package/Layout.tsx

@@ -342,7 +342,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
             maxWidth: navMaxWidth,
             margin: 'auto',
             height: 'var(--nav-head-height)',
-            fontSize: `min(16.96px, ${isProjectNameShort(projectName) ? '4.8cqw' : '4.5cqw'})`,
+            fontSize: `min(15.2px, ${isProjectNameShort(projectName) ? '4.8cqw' : '4.5cqw'})`,
             color: '#666',
             ['--icon-text-padding']: 'min(8px, 1.8cqw)',
             display: 'flex',
@@ -398,7 +398,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 }
 @container container-nav-head (min-width: ${containerQueryMobileNav + 150}px) {
   .nav-head-content {
-    --padding-side: 35px;
+    --padding-side: 25px;
   }
 }
 @media(max-width: ${containerQueryMobileNav}px) {
@@ -539,7 +539,7 @@ function MenuToggleMain(props: PropsDiv) {
       </span>
       <Style>{css`
 @media(max-width: ${containerQueryMobileNav}px) {
-  .text-docs {
+  .text-docs, .caret-icon {
     display: none !important;
   }
 }
@@ -586,6 +586,14 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
     >
       <Style>{getAnimation()}</Style>
       {props.children}
+      <CaretIcon
+        style={{
+          width: 11,
+          marginLeft: 10,
+          flexShrink: 0,
+          color: '#888',
+        }}
+      />
     </div>
   )
 
@@ -614,15 +622,53 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
     transition: top 0.4s ease !important;
     z-index: -1;
   }
+  & .caret-icon-left,
+  & .caret-icon-right {
+    transition: transform .4s cubic-bezier(.4,0, .2, 1);
+  }
+  & .caret-icon-left {
+    transform-origin: 25% 50%;
+  }
+  & .caret-icon-right {
+    transform-origin: 75% 50%;
+  }
 }
     `
   }
 }
+function CaretIcon({ style }: { style: React.CSSProperties }) {
+  return (
+    // - Inspired by stripe.com
+    // - Alternative caret SVGs: https://gist.github.com/brillout/dbf05e1fb79a34169cc2d0d5eaf58c01
+    // - The rounded caret (`caret.svg`) doesn't look nice when flipped:
+    // -   https://github.com/brillout/docpress/commit/0ff937d8caf5fc439887ef495e2d2a700234dfb1
+    // - https://github.com/brillout/docpress/pull/39
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 9.24 5.858"
+      style={{
+        overflow: 'visible',
+        ...style,
+      }}
+      className="caret-icon"
+    >
+      <g className="caret-icon-left">
+        <path
+          fill="currentColor"
+          d="m4.001 5.24.619.618 1.237-1.237-.618-.619L4 5.241zm-4-4 4 4L5.24 4.001l-4-4L0 1.241z"
+        ></path>
+      </g>
+      <g className="caret-icon-right">
+        <path fill="currentColor" d="m5.239 5.239-.619.618L3.383 4.62l.618-.619L5.24 5.24Zm4-4-4 4L4 4l4-4z"></path>
+      </g>
+    </svg>
+  )
+}
 function DocsIcon() {
   return (
     <img
       src={iconBooks}
-      width={21}
+      width={18}
       style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)' }}
       className="decolorize-5"
     />

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -135,6 +135,12 @@ ${/* Button style */ ''}
     &::before {
       top: 0;
     }
+    & .caret-icon-left {
+      transform: rotate(-90deg);
+    }
+    & .caret-icon-right {
+      transform: rotate(90deg);
+    }
   }
 }
 `

package/components/Link.tsx

@@ -13,12 +13,14 @@ function Link({
   text,
   noBreadcrumb,
   doNotInferSectionTitle,
+  noWarning,
   children,
 }: {
   href: string
   text?: string | React.ReactNode
-  noBreadcrumb?: true
-  doNotInferSectionTitle?: true
+  noBreadcrumb?: boolean
+  doNotInferSectionTitle?: boolean
+  noWarning?: boolean
   children?: React.ReactNode
 }) {
   const pageContext = usePageContext()
@@ -30,15 +32,18 @@ function Link({
   // assertWarning(!text, 'prop `text` is deprecated')
   text = text ?? children
 
-  const linkTextData = getLinkTextData(href, pageContext, doNotInferSectionTitle)
-  if (!linkTextData) {
-    text = 'LINK-TARGET-NOT-FOUND'
-  } else if (!text) {
-    text = getLinkText({
-      noBreadcrumb,
-      ...linkTextData,
-    })
+  const linkTextData = getLinkTextData({ href, pageContext, doNotInferSectionTitle, noWarning })
+  if (!text) {
+    if (linkTextData) {
+      text = getLinkText({
+        noBreadcrumb,
+        ...linkTextData,
+      })
+    } else {
+      text = 'LINK-TARGET-NOT-FOUND'
+    }
   }
+
   return <a href={href}>{text}</a>
 }
 
@@ -48,7 +53,7 @@ function getLinkText({
   sectionTitle,
   isLinkOnSamePage,
 }: {
-  noBreadcrumb: true | undefined
+  noBreadcrumb: boolean | undefined
   linkData: LinkData
   sectionTitle: React.JSX.Element | null
   isLinkOnSamePage: boolean
@@ -78,10 +83,20 @@ function getLinkText({
   )
 }
 
-function getLinkTextData(href: string, pageContext: PageContextResolved, doNotInferSectionTitle?: boolean) {
+function getLinkTextData({
+  href,
+  pageContext,
+  doNotInferSectionTitle,
+  noWarning,
+}: {
+  href: string
+  pageContext: PageContextResolved
+  doNotInferSectionTitle?: boolean
+  noWarning?: boolean
+}) {
   const { hrefPathname, hrefHash } = parseHref(href)
 
-  const linkData = findLinkData(hrefPathname || pageContext.urlPathname, pageContext)
+  const linkData = findLinkData(hrefPathname || pageContext.urlPathname, { pageContext, noWarning })
   if (!linkData) return null
   const isLinkOnSamePage = linkData.url === pageContext.urlPathname
   if (!hrefPathname) assert(isLinkOnSamePage)
@@ -90,7 +105,7 @@ function getLinkTextData(href: string, pageContext: PageContextResolved, doNotIn
   if (hrefHash) {
     assert(!hrefHash.startsWith('#'))
     if (isLinkOnSamePage) {
-      const linkDataPageSection = findLinkData(`#${hrefHash}`, pageContext)
+      const linkDataPageSection = findLinkData(`#${hrefHash}`, { pageContext, noWarning })
       if (!linkDataPageSection) return null
       sectionTitle = parseMarkdownMini(linkDataPageSection.title)
     } else if ('sectionTitles' in linkData && linkData.sectionTitles) {
@@ -121,29 +136,36 @@ type LinkData = {
   linkBreadcrumb: null | string[]
   sectionTitles?: string[]
 }
-function findLinkData(href: string, pageContext: PageContextResolved): LinkData | null {
+function findLinkData(
+  href: string,
+  { pageContext, noWarning }: { pageContext: PageContextResolved; noWarning?: boolean },
+): LinkData | null {
   assert(href.startsWith('/') || href.startsWith('#'))
   const { linksAll } = pageContext
   const linkData = linksAll.find(({ url }) => href === url)
   if (href.startsWith('#')) {
-    assertWarning(linkData, `Couldn't find ${href} in ${pageContext.urlPathname}, does it exist?`)
+    if (!noWarning) {
+      assertWarning(linkData, `Couldn't find ${href} in ${pageContext.urlPathname}, does it exist?`)
+    }
   } else {
-    assertWarning(
-      linkData,
-      [
-        `Couldn't find page with URL ${pc.bold(href)}`,
-        `— did you define it in`,
+    if (!noWarning) {
+      assertWarning(
+        linkData,
         [
-          pc.cyan('docpress.config.js'),
-          pc.dim('#{'),
-          pc.cyan('headings'),
-          pc.dim(','),
-          pc.cyan('headingsDetached'),
-          pc.dim('}'),
-          '?',
-        ].join(''),
-      ].join(' '),
-    )
+          `Couldn't find page with URL ${pc.bold(href)}`,
+          `— did you define it in`,
+          [
+            pc.cyan('docpress.config.js'),
+            pc.dim('#{'),
+            pc.cyan('headings'),
+            pc.dim(','),
+            pc.cyan('headingsDetached'),
+            pc.dim('}'),
+            '?',
+          ].join(''),
+        ].join(' '),
+      )
+    }
   }
   return linkData ?? null
 }

package/dist/components/Link.d.ts

@@ -1,11 +1,12 @@
 export { Link };
 export type { LinkData };
 import React from 'react';
-declare function Link({ href, text, noBreadcrumb, doNotInferSectionTitle, children, }: {
+declare function Link({ href, text, noBreadcrumb, doNotInferSectionTitle, noWarning, children, }: {
     href: string;
     text?: string | React.ReactNode;
-    noBreadcrumb?: true;
-    doNotInferSectionTitle?: true;
+    noBreadcrumb?: boolean;
+    doNotInferSectionTitle?: boolean;
+    noWarning?: boolean;
     children?: React.ReactNode;
 }): React.JSX.Element;
 type LinkData = {

package/dist/components/Link.js

@@ -16,18 +16,20 @@ import { assert, assertUsage, assertWarning, determineSectionTitle, determineSec
 import { parseMarkdownMini } from '../parseMarkdownMini';
 import pc from '@brillout/picocolors';
 function Link(_a) {
-    var href = _a.href, text = _a.text, noBreadcrumb = _a.noBreadcrumb, doNotInferSectionTitle = _a.doNotInferSectionTitle, children = _a.children;
+    var href = _a.href, text = _a.text, noBreadcrumb = _a.noBreadcrumb, doNotInferSectionTitle = _a.doNotInferSectionTitle, noWarning = _a.noWarning, children = _a.children;
     var pageContext = usePageContext();
     assertUsage(href.startsWith('/') || href.startsWith('#'), "<Link href /> prop `href==='".concat(href, "'` but should start with '/' or '#'"));
     assertUsage(!text || !children, 'Cannot use both `text` or `children`');
     // assertWarning(!text, 'prop `text` is deprecated')
     text = text !== null && text !== void 0 ? text : children;
-    var linkTextData = getLinkTextData(href, pageContext, doNotInferSectionTitle);
-    if (!linkTextData) {
-        text = 'LINK-TARGET-NOT-FOUND';
-    }
-    else if (!text) {
-        text = getLinkText(__assign({ noBreadcrumb: noBreadcrumb }, linkTextData));
+    var linkTextData = getLinkTextData({ href: href, pageContext: pageContext, doNotInferSectionTitle: doNotInferSectionTitle, noWarning: noWarning });
+    if (!text) {
+        if (linkTextData) {
+            text = getLinkText(__assign({ noBreadcrumb: noBreadcrumb }, linkTextData));
+        }
+        else {
+            text = 'LINK-TARGET-NOT-FOUND';
+        }
     }
     return React.createElement("a", { href: href }, text);
 }
@@ -51,9 +53,10 @@ function getLinkText(_a) {
             title));
     })));
 }
-function getLinkTextData(href, pageContext, doNotInferSectionTitle) {
-    var _a = parseHref(href), hrefPathname = _a.hrefPathname, hrefHash = _a.hrefHash;
-    var linkData = findLinkData(hrefPathname || pageContext.urlPathname, pageContext);
+function getLinkTextData(_a) {
+    var href = _a.href, pageContext = _a.pageContext, doNotInferSectionTitle = _a.doNotInferSectionTitle, noWarning = _a.noWarning;
+    var _b = parseHref(href), hrefPathname = _b.hrefPathname, hrefHash = _b.hrefHash;
+    var linkData = findLinkData(hrefPathname || pageContext.urlPathname, { pageContext: pageContext, noWarning: noWarning });
     if (!linkData)
         return null;
     var isLinkOnSamePage = linkData.url === pageContext.urlPathname;
@@ -63,7 +66,7 @@ function getLinkTextData(href, pageContext, doNotInferSectionTitle) {
     if (hrefHash) {
         assert(!hrefHash.startsWith('#'));
         if (isLinkOnSamePage) {
-            var linkDataPageSection = findLinkData("#".concat(hrefHash), pageContext);
+            var linkDataPageSection = findLinkData("#".concat(hrefHash), { pageContext: pageContext, noWarning: noWarning });
             if (!linkDataPageSection)
                 return null;
             sectionTitle = parseMarkdownMini(linkDataPageSection.title);
@@ -85,7 +88,8 @@ function getLinkTextData(href, pageContext, doNotInferSectionTitle) {
     }
     return { linkData: linkData, sectionTitle: sectionTitle, isLinkOnSamePage: isLinkOnSamePage };
 }
-function findLinkData(href, pageContext) {
+function findLinkData(href, _a) {
+    var pageContext = _a.pageContext, noWarning = _a.noWarning;
     assert(href.startsWith('/') || href.startsWith('#'));
     var linksAll = pageContext.linksAll;
     var linkData = linksAll.find(function (_a) {
@@ -93,22 +97,26 @@ function findLinkData(href, pageContext) {
         return href === url;
     });
     if (href.startsWith('#')) {
-        assertWarning(linkData, "Couldn't find ".concat(href, " in ").concat(pageContext.urlPathname, ", does it exist?"));
+        if (!noWarning) {
+            assertWarning(linkData, "Couldn't find ".concat(href, " in ").concat(pageContext.urlPathname, ", does it exist?"));
+        }
     }
     else {
-        assertWarning(linkData, [
-            "Couldn't find page with URL ".concat(pc.bold(href)),
-            "\u2014 did you define it in",
-            [
-                pc.cyan('docpress.config.js'),
-                pc.dim('#{'),
-                pc.cyan('headings'),
-                pc.dim(','),
-                pc.cyan('headingsDetached'),
-                pc.dim('}'),
-                '?',
-            ].join(''),
-        ].join(' '));
+        if (!noWarning) {
+            assertWarning(linkData, [
+                "Couldn't find page with URL ".concat(pc.bold(href)),
+                "\u2014 did you define it in",
+                [
+                    pc.cyan('docpress.config.js'),
+                    pc.dim('#{'),
+                    pc.cyan('headings'),
+                    pc.dim(','),
+                    pc.cyan('headingsDetached'),
+                    pc.dim('}'),
+                    '?',
+                ].join(''),
+            ].join(' '));
+        }
     }
     return linkData !== null && linkData !== void 0 ? linkData : null;
 }

package/docsearch/SearchLink.tsx

@@ -32,7 +32,7 @@ function SearchIcon() {
   return (
     <img
       src={iconMagnifyingGlass}
-      width={21}
+      width={18}
       style={{ marginRight: 'var(--icon-text-padding)' }}
       className="decolorize-7"
     />

package/package.json

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