@brillout/docpress 0.10.2 → 0.10.4

package/Layout.tsx

@@ -9,7 +9,6 @@ export { blockMargin }
 
 import React from 'react'
 import { getNavItemsWithComputed, NavItem, NavItemComponent } from './NavItemComponent'
-import { EditPageNote } from './components/EditPageNote'
 import { parseTitle } from './parseTitle'
 import { usePageContext, usePageContext2 } from './renderer/usePageContext'
 import { NavSecondaryContent } from './NavSecondaryContent'
@@ -22,7 +21,8 @@ import { css } from './utils/css'
 import { PassThrough } from './utils/PassTrough'
 import { Style } from './utils/Style'
 import { cls } from './utils/cls'
-import { iconBooks } from './icons'
+import { iconBooks, iconPencil } from './icons'
+import { getRepoHref, RepoLink } from './components'
 
 const blockMargin = 3
 const mainViewPadding = 20
@@ -87,7 +87,7 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
   const hideNavLeftAlways = pageContext.navItemsDetached && pageContext.navItemsDetached.length <= 1
   return (
     <>
-      <style>{getStyle()}</style>
+      <Style>{getStyle()}</Style>
       <div style={{ display: 'flex', ...whitespaceBuster2 }}>
         <NavLeft />
         <div
@@ -182,9 +182,13 @@ function PageContent({ children }: { children: React.ReactNode }) {
         }}
       >
         {globalNote}
-        {pageTitleParsed && <h1 id={`${pageContext.urlPathname.replace('/', '')}`}>{pageTitleParsed}</h1>}
+        {pageTitleParsed && (
+          <div>
+            <EditPageNote />
+            <h1 id={`${pageContext.urlPathname.replace('/', '')}`}>{pageTitleParsed}</h1>
+          </div>
+        )}
         {children}
-        {!isLandingPage && <EditPageNote pageContext={pageContext} />}
       </div>
     </div>
   )
@@ -349,7 +353,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
           {navSecondaryContent}
         </div>
       </div>
-      {getStyle()}
+      <Style>{getStyle()}</Style>
     </div>
   )
 
@@ -395,13 +399,6 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   .desktop-grow {
     flex-grow: 1;
   }
-  .desktop-fade {
-    transition: opacity 0.4s ease-in-out;
-  }
-  html:not(.menu-modal-show) .nav-head-top:not(:hover) .desktop-fade {
-    transition: opacity 0.3s ease-in-out !important;
-    opacity: 0.5;
-  }
 }
 `
     }
@@ -429,7 +426,7 @@ html:not(.unexpand-nav).menu-modal-show .show-on-nav-hover {
 }
 `
     }
-    return <Style>{style}</Style>
+    return style
   }
 }
 function unexpandNav() {
@@ -608,7 +605,7 @@ function DocsIcon() {
       src={iconBooks}
       width={21}
       style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)' }}
-      className="decolorize-5 desktop-fade"
+      className="decolorize-5"
     />
   )
 }
@@ -616,7 +613,7 @@ function MenuIcon() {
   return (
     <svg
       style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)', verticalAlign: 'top', width: '1.3em' }}
-      className="decolorize-6 desktop-fade"
+      className="decolorize-6"
       viewBox="0 0 448 512"
     >
       <path
@@ -626,3 +623,39 @@ function MenuIcon() {
     </svg>
   )
 }
+
+function EditPageNote() {
+  const pageContext = usePageContext()
+  const iconSize = 17
+  const icon = (
+    <img
+      src={iconPencil}
+      width={iconSize}
+      height={iconSize}
+      style={{
+        marginRight: 9,
+        position: 'relative',
+        top: -1,
+      }}
+    />
+  )
+  const editLink = getRepoHref('/docs/pages' + pageContext.urlPathname + '/+Page.mdx', true)
+  return (
+    <a
+      href={editLink}
+      id="edit-link"
+      style={{ float: 'right', marginTop: 6, padding: 10, display: 'flex', alignItems: 'center' }}
+    >
+      {icon} Edit this page
+      <Style>{getStyle()}</Style>
+    </a>
+  )
+  function getStyle() {
+    return css`
+@container container-viewport (max-width: 800px) {
+  #edit-link {
+    display: none !important;
+  }
+}`
+  }
+}

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -12,7 +12,7 @@ import './NavigationWithColumnLayout.css'
 import { Style } from '../utils/Style'
 import { css } from '../utils/css'
 
-const marginBottomOnExpand = 30
+const marginBottomOnExpand = 20
 function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
   const pageContext = usePageContext()
   const navItemsWithComputed = getNavItemsWithComputed(props.navItems, pageContext.urlPathname)
@@ -31,7 +31,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
           <div
             id={`menu-navigation-${i}`}
             className="menu-navigation-content"
-            style={{ paddingTop: 10, transition: 'none 0.2s ease-in-out', transitionProperty: 'opacity, transform' }}
+            style={{ transition: 'none 0.2s ease-in-out', transitionProperty: 'opacity, transform' }}
             key={i}
           >
             {columnLayout.isFullWidthCategory ? (
@@ -119,7 +119,6 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
 .menu-toggle-${i} {
   html.menu-modal-show.menu-modal-show-${i} & {
     color: black !important;
-    cursor: default !important;
     [class^='decolorize-'],
     [class*=' decolorize-'] {
       filter: grayscale(0) opacity(1) !important;
@@ -128,6 +127,9 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
       top: 0;
     }
   }
+  html.menu-modal-show & {
+    cursor: default !important;
+  }
 }
 `
    })

package/MenuModal.tsx

@@ -44,6 +44,8 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
           id="menu-modal-scroll-container"
           style={{
             overflowY: 'scroll',
+            // Workaround for bug with Firefox 128.1.0
+            overflowX: 'hidden',
             // We don't set `container` to the parent #menu-modal-wrapper beacuse of a Chrome bug (showing a blank <MenuModal>). Edit: IIRC because #menu-modal-wrapper has `position: fixed`.
             container: 'container-viewport / inline-size',
           }}

package/NavSecondaryContent.tsx

@@ -28,7 +28,6 @@ function NavSecondaryContent(props: { style?: React.CSSProperties }) {
         alignItems: 'center',
         ...props.style,
       }}
-      className="desktop-fade"
     >
       {iconI18n}
       {projectInfo.discordInvite && (

package/components/RepoLink.tsx

@@ -4,15 +4,21 @@ import { usePageContext } from '../renderer/usePageContext'
 
 export { RepoLink }
 export { isRepoLink }
+export { getRepoHref }
 
 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 }) {
+  text = text || path
+  const href = getRepoHref(path, editMode)
+  return <a href={href}>{text}</a>
+}
+
+function getRepoHref(path: string, editMode?: true) {
   const pageContext = usePageContext()
   assert(isRepoLink(path), { path })
-  text = text || path
   if (!path.startsWith('/')) {
     path = '/' + path
   }
@@ -21,5 +27,5 @@ function RepoLink({ path, text, editMode }: { path: string; text?: string | JSX.
   assert(githubRepository.startsWith('https://github.com/'))
   let href = `${githubRepository}/${viewMode}/main${path}`
   if (editMode) href += '?plain=1'
-  return <a href={href}>{text}</a>
+  return href
 }

package/dist/components/RepoLink.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 export { RepoLink };
 export { isRepoLink };
+export { getRepoHref };
 declare function isRepoLink(href: string): boolean;
 declare function RepoLink({ path, text, editMode }: {
     path: string;
     text?: string | JSX.Element;
     editMode?: true;
 }): React.JSX.Element;
+declare function getRepoHref(path: string, editMode?: true): string;

package/dist/components/RepoLink.js

@@ -3,14 +3,19 @@ import { assert } from '../utils/server';
 import { usePageContext } from '../renderer/usePageContext';
 export { RepoLink };
 export { isRepoLink };
+export { getRepoHref };
 function isRepoLink(href) {
     return ['/examples/', '/docs/', '/boilerplates/', '.github/', '/test/'].some(function (start) { return href.startsWith(start); });
 }
 function RepoLink(_a) {
     var path = _a.path, text = _a.text, editMode = _a.editMode;
+    text = text || path;
+    var href = getRepoHref(path, editMode);
+    return React.createElement("a", { href: href }, text);
+}
+function getRepoHref(path, editMode) {
     var pageContext = usePageContext();
     assert(isRepoLink(path), { path: path });
-    text = text || path;
     if (!path.startsWith('/')) {
         path = '/' + path;
     }
@@ -20,5 +25,5 @@ function RepoLink(_a) {
     var href = "".concat(githubRepository, "/").concat(viewMode, "/main").concat(path);
     if (editMode)
         href += '?plain=1';
-    return React.createElement("a", { href: href }, text);
+    return href;
 }

package/docsearch/SearchLink.tsx

@@ -34,7 +34,7 @@ function SearchIcon() {
       src={iconMagnifyingGlass}
       width={21}
       style={{ marginRight: 'var(--icon-text-padding)' }}
-      className="decolorize-7 desktop-fade"
+      className="decolorize-7"
     />
   )
 }

package/icons/index.ts

@@ -3,3 +3,4 @@ export { default as iconGear } from './gear.svg'
 export { default as iconBooks } from './books.svg'
 export { default as iconSeedling } from './seedling.svg'
 export { default as iconMagnifyingGlass } from './magnifying-glass.svg'
+export { default as iconPencil } from './pencil.svg'

package/icons/pencil.svg

@@ -0,0 +1,21 @@
+<svg id="Layer_1_copy" width="120.14" height="120.14" version="1.1" viewBox="0 0 120.14 120.14" xmlns="http://www.w3.org/2000/svg">
+<g transform="matrix(-1 0 0 1 124.07 -3.9276)">
+<path d="m123.87 118.8-6.18-16.49-4.25-11.35c-0.96-2.93-1.14-4.14-2.77-5.77l-11.82-11.82-25.46 25.46 11.83 11.83c0.97 0.97 2.83 1.8 5.76 2.76l11.35 4.25 16.49 6.18c3.11 1.01 6.06-1.94 5.05-5.05z" fill="#ffecb3"/>
+<g fill="none">
+<path d="m85.65 106.83-0.03-0.03z"/>
+<path d="m106.8 85.6 0.21 0.21c-0.07-0.07-0.12-0.16-0.19-0.23z"/>
+</g>
+<path d="m118.82 123.85-13.66-5.12s5.64-0.32 9.45-4.13 4.14-9.46 4.14-9.46l5.12 13.66c1.01 3.11-1.94 6.06-5.05 5.05z" fill="#616161"/>
+<path d="m43.18 17.71-5.41 19.29-20.04 6.16-11.32-11.31c-3.12-3.12-4.6-9.34 3.67-17.61l4.99-4.99c7.15-7.15 13.68-5.98 16.8-2.86z" fill="#ef5350"/>
+<path d="m34.27 44.64 10.37-10.37 60.23 60.23s1.23 5.12-1.9 8.25-8.47 2.12-8.47 2.12z" fill="#ffc107"/>
+<path d="m26.73 52.18 58.58 58.58c9.46 2.06 9.05-6.03 9.05-6.03l-60.09-60.09z" fill="#ffa000"/>
+<path d="m44.65 34.26 60.09 60.09s10.82 0 5.87-9.21l-58.42-58.42z" fill="#fdd835"/>
+<polygon points="33.66 45.43 35.07 44.02 96.07 105.02 94.5 104.86 94.27 106.04" fill="#d1762c"/>
+<polygon points="40.15 31.19 41.57 29.78 106.04 94.25 104.87 94.49 105.11 96.15" fill="#f19534"/>
+<path d="m52.19 26.72s-5.47 8.09-10 12.67c-8.67 8.74-15.46 12.79-15.46 12.79l1.75 1.75c2.49-0.97 8.86-3.88 15.22-10.23 6.4-6.4 9.42-12.65 10.43-15.04z" fill="#4e342e" opacity=".2"/>
+<path d="m23.49 51.9c0.56 0.56 1.35 0.81 2.13 0.68 0 0 8.19-2.5 16.33-10.64s10.83-16.07 10.83-16.07c0.13-0.78-0.12-1.58-0.68-2.14l-8.58-8.58c-0.36-0.36-0.86-0.55-1.36-0.49-0.17 0.02-0.34 0.04-0.52 0.07-0.68 0.1-1.22 0.6-1.41 1.26 0 0-3.92 7.6-10.38 14.05s-14.34 10.21-14.34 10.21c-0.66 0.18-1.17 0.71-1.27 1.39v0.02c-0.08 0.54 0.1 1.08 0.48 1.46z" fill="#94d1e0"/>
+<ellipse transform="matrix(.7071 -.7071 .7071 .7071 -6.2293 15.05)" cx="15.05" cy="15.04" rx="15.03" ry="4.45" fill="#ff8383"/>
+<path d="m41.61 21.74c-3.29 6.3-8.7 11.47-15.14 14.46-0.42 0.19-1.01 0.33-1.26-0.05-0.19-0.3-0.02-0.68 0.17-0.98 0.84-1.3 2-2.35 3.12-3.42 2.92-2.8 5.6-5.84 8.01-9.08 1.23-1.65 2.38-3.35 3.46-5.1 0.6-0.96 1.67-2.99 3.04-1.56 1.19 1.23-0.77 4.52-1.4 5.73z" fill="#b9e4ea"/>
+<path d="m37.88 33.47c-0.26 0.27-0.53 0.54-0.66 0.89s-0.08 0.8 0.22 1.02c0.25 0.19 0.59 0.17 0.9 0.12 1.73-0.27 3.26-1.25 4.61-2.35 2.95-2.39 5.45-5.71 5.69-9.5 0.03-0.45 0.02-0.92-0.18-1.32-1.27-2.51-3.96 3.1-4.49 3.89-1.77 2.63-3.88 4.99-6.09 7.25z" fill="#b9e4ea"/>
+</g>
+</svg>

package/package.json

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

package/components/EditPageNote.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { RepoLink } from './RepoLink'
-
-export { EditPageNote }
-
-function EditPageNote({ pageContext }: { pageContext: { urlPathname: string } }) {
-  const text = (
-    <>
-      <span style={{ fontFamily: 'emoji' }}>✍</span> Edit this page
-    </>
-  )
-  return (
-    <div style={{ marginTop: 50 }}>
-      <RepoLink path={'/docs/pages' + pageContext.urlPathname + '/+Page.mdx'} text={text} editMode={true} />
-    </div>
-  )
-}