@brillout/docpress 0.10.22 → 0.10.24

package/EditLink.tsx

@@ -0,0 +1,31 @@
+export { EditLink }
+
+import React from 'react'
+import { usePageContext } from './renderer/usePageContext'
+import { iconPencil } from './icons'
+import { getRepoHref } from './components'
+
+function EditLink({ className, style }: { className?: string; style: React.CSSProperties }) {
+  const pageContext = usePageContext()
+  const iconSize = 17
+  const icon = (
+    <img
+      src={iconPencil}
+      width={iconSize}
+      height={iconSize}
+      style={{
+        marginRight: 9,
+        position: 'relative',
+        top: -1,
+      }}
+    />
+  )
+  const { urlPathname } = pageContext
+  const fsPath = urlPathname === '/' ? '/index/+Page.tsx' : `${urlPathname}/+Page.mdx`
+  const editLink = getRepoHref(`/docs/pages${fsPath}`, true)
+  return (
+    <a href={editLink} className={className} style={{ display: 'flex', alignItems: 'center', ...style }}>
+      {icon} Edit this page
+    </a>
+  )
+}

package/{NavSecondaryContent.tsx → ExternalLinks.tsx}

@@ -1,4 +1,4 @@
-export { NavSecondaryContent }
+export { ExternalLinks }
 
 import React from 'react'
 import iconGithub from './icons/github.svg'
@@ -10,7 +10,7 @@ import iconLanguages from './icons/languages.svg'
 import { usePageContext } from './renderer/usePageContext'
 import '@docsearch/css'
 
-function NavSecondaryContent(props: { style?: React.CSSProperties }) {
+function ExternalLinks(props: { style?: React.CSSProperties }) {
   const pageContext = usePageContext()
   const { projectInfo, i18n } = pageContext.config
   const iconI18n = !i18n ? null : (

package/Layout.tsx

@@ -11,7 +11,7 @@ import React from 'react'
 import { getNavItemsWithComputed, NavItem, NavItemComponent } from './NavItemComponent'
 import { parseMarkdownMini } from './parseMarkdownMini'
 import { usePageContext, usePageContext2 } from './renderer/usePageContext'
-import { NavSecondaryContent } from './NavSecondaryContent'
+import { ExternalLinks } from './ExternalLinks'
 import { coseMenuModalOnMouseLeave, openMenuModal, toggleMenuModal } from './MenuModal/toggleMenuModal'
 import { MenuModal } from './MenuModal'
 import { autoScrollNav_SSR } from './autoScrollNav'
@@ -21,8 +21,8 @@ import { css } from './utils/css'
 import { PassThrough } from './utils/PassTrough'
 import { Style } from './utils/Style'
 import { cls } from './utils/cls'
-import { iconBooks, iconPencil } from './icons'
-import { getRepoHref } from './components'
+import { iconBooks } from './icons'
+import { EditLink } from './EditLink'
 
 const blockMargin = 3
 const mainViewPadding = 20
@@ -185,7 +185,7 @@ function PageContent({ children }: { children: React.ReactNode }) {
         {globalNote}
         {pageTitleParsed && (
           <div>
-            <EditPageNote />
+            <EditLink className="show-only-on-desktop" style={{ float: 'right', marginTop: 6, padding: 10 }} />
             <h1 id={`${pageContext.urlPathname.replace('/', '')}`}>{pageTitleParsed}</h1>
           </div>
         )}
@@ -302,7 +302,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
     >
       <TopNavigation />
       {!isNavLeft && <div className="desktop-grow" />}
-      <NavSecondaryContent
+      <ExternalLinks
         style={{
           display: 'inline-flex',
           fontSize: '1.06em',
@@ -640,39 +640,3 @@ 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.tsx

@@ -4,10 +4,11 @@ import React from 'react'
 import { usePageContext } from './renderer/usePageContext'
 import { css } from './utils/css'
 import { containerQueryMobileLayout, containerQueryMobileMenu } from './Layout'
-import { NavSecondaryContent } from './NavSecondaryContent'
+import { ExternalLinks } from './ExternalLinks'
 import { Style } from './utils/Style'
 import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayout'
 import { closeMenuModal, keepMenuModalOpen } from './MenuModal/toggleMenuModal'
+import { EditLink } from './EditLink'
 
 function MenuModal({ isTopNav }: { isTopNav: boolean }) {
   return (
@@ -39,9 +40,20 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
           }}
         >
           <Nav />
-          <NavSecondary className="show-only-for-mobile" />
+          <div className="show-only-on-mobile">
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                marginTop: 10,
+              }}
+            >
+              <ExternalLinks style={{ height: 50 }} />
+            </div>
+            <EditLink style={{ justifyContent: 'center', padding: 10, marginTop: 0, marginBottom: 13 }} />
+          </div>
         </div>
-        <CloseButton className="show-only-for-mobile" />
+        <CloseButton className="show-only-on-mobile" />
         <BorderBottom />
       </div>
     </>
@@ -64,20 +76,6 @@ function Nav() {
   const navItems = pageContext.navItemsAll
   return <NavigationWithColumnLayout navItems={navItems} />
 }
-function NavSecondary({ className }: { className: string }) {
-  return (
-    <div
-      className={className}
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        marginTop: 10,
-      }}
-    >
-      <NavSecondaryContent style={{ height: 70 }} />
-    </div>
-  )
-}
 
 function getStyle() {
   return css`
@@ -97,7 +95,7 @@ function getStyle() {
       pointer-events: none;
     }
   }
-  .show-only-for-mobile {
+  .show-only-on-mobile {
     display: none !important;
   }
 }
@@ -109,7 +107,7 @@ function getStyle() {
     ${/* We use dvh because of mobile */ ''}
     ${/* https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072 */ ''}
     height: calc(100dvh) !important;
-    ${/* Place <NavSecondary /> to the bottom */ ''}
+    ${/* Place <ExternalLinks> and <EditLink> to the bottom */ ''}
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -131,6 +129,9 @@ function getStyle() {
   #menu-navigation-container {
     height: auto !important;
   }
+  .show-only-on-desktop {
+    display: none !important;
+  }
 }
 
 ${/* Hide same-page headings navigation */ ''}

package/components/Link.tsx

@@ -167,5 +167,7 @@ function parseHref(href: string) {
   }
   assert(hrefPathname !== null || hrefHash !== null)
   assert(hrefPathname || hrefHash)
+  // Text highlight links e,g.  #metadata:~:text=global%20or%20local.-,Global%20metadata,-.
+  if (hrefHash) hrefHash = hrefHash.split(':~:text')[0]!
   return { hrefPathname, hrefHash }
 }

package/dist/components/Link.js

@@ -132,5 +132,8 @@ function parseHref(href) {
     }
     assert(hrefPathname !== null || hrefHash !== null);
     assert(hrefPathname || hrefHash);
+    // Text highlight links e,g.  #metadata:~:text=global%20or%20local.-,Global%20metadata,-.
+    if (hrefHash)
+        hrefHash = hrefHash.split(':~:text')[0];
     return { hrefPathname: hrefPathname, hrefHash: hrefHash };
 }

package/installSectionUrlHashs.ts

@@ -31,7 +31,7 @@ function assertNavLink(urlHash: string, heading: HTMLHeadingElement) {
   {
     const { pathname } = window.location
     const parentNavLinkMatch = Array.from(navigationEl.querySelectorAll(`a[href="${pathname}"]`))
-    assert(parentNavLinkMatch.length === 1)
+    assert(parentNavLinkMatch.length === 1, { parentNavLinkMatch, pathname })
   }
   {
     const navLinks: HTMLElement[] = Array.from(navigationEl.querySelectorAll(`a[href="${urlHash}"]`))

package/package.json

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