@primer/doctocat-nextjs 0.5.0-rc.6ee882c → 0.5.0-rc.d69336a

package/CHANGELOG.md

@@ -29,6 +29,17 @@
     + <Theme sidebarLinks={sidebarLinks} {...rest} />
     ```
 
+### Patch Changes
+
+- [#34](https://github.com/primer/doctocat-nextjs/pull/34) [`ccf198c`](https://github.com/primer/doctocat-nextjs/commit/ccf198cca25b1f021c5ae78b8e2760c141a77dcc) Thanks [@rezrah](https://github.com/rezrah)! - Collection of UI bugfixes:
+
+  - Sidebar offset added to prevent links being trapped under fixed header
+  - Narrow viewport overflow bug fixed
+  - Table of contents presentation fixed on narrow viewport, and has improved presentation on wider breakpoints.
+  - Frontmatter metadata presentation now fixed on narrow viewport
+  - OS scrollbar in dark color mode now respects color scheme
+  - Inverted margin spacing in markdown content to use `margin-block-end` instead of `margin-block-start` to fix inconsistent spacing
+
 ## 0.4.1
 
 ### Patch Changes

package/components/index.ts

@@ -10,3 +10,4 @@ export {Article} from './layout/article/Article'
 export {HeadingLink} from './layout/heading-link/HeadingLinks'
 export {CodeBlock} from './layout/code-block/CodeBlock'
 export {PropTableValues} from './layout/prop-values/PropValues'
+export {TableWrapper} from './table-wrapper/TableWrapper'

package/components/layout/article/Article.module.css

@@ -14,7 +14,14 @@
   order: 0;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (max-width: 48rem) {
+  .Article--withToc {
+    display: flex; /* Prevents column overflow */
+    flex-direction: column;
+  }
+}
+
+@media screen and (min-width: 1023px) {
   .main {
     order: 0;
   }
@@ -27,3 +34,9 @@
     grid-template-columns: 1fr 200px;
   }
 }
+
+@media screen and (min-width: 2048px) {
+  .Article--withToc {
+    grid-template-columns: 1fr;
+  }
+}

package/components/layout/article/Article.tsx

@@ -35,7 +35,11 @@ export function Article({children, toc, metadata}: PropsWithChildren<Props>) {
         <div className={styles.main}>
           {hasMetadata ? (
             <Box marginBlockEnd={48}>
-              <Stack padding="none" direction="horizontal" justifyContent="space-between">
+              <Stack
+                padding="none"
+                direction={{narrow: 'vertical', regular: 'horizontal'}}
+                justifyContent="space-between"
+              >
                 {metadata.ready || metadata.a11yReviewed ? (
                   <Stack direction="horizontal" gap={8} padding="none">
                     {metadata.ready === true && <ReadinessLabel />}

package/components/layout/header/Header.module.css

@@ -117,12 +117,22 @@
 .Header__links {
   display: none;
   margin-inline: var(--base-size-24);
+  margin-block: 0;
+  padding: 0;
+  list-style: none;
+  gap: var(--base-size-2);
 }
 
 .Header__link {
   text-decoration: none;
   font-size: var(--base-font-size-16);
   font-weight: var(--base-font-weight-500);
+  padding: var(--base-size-6) var(--base-size-12);
+  border-radius: var(--brand-borderRadius-small);
+}
+
+.Header__link:hover {
+  background-color: var(--brand-color-canvas-subtle);
 }
 
 .Header__externalLinkIcon {

package/components/layout/header/Header.tsx

@@ -60,7 +60,7 @@ export function Header({siteTitle, flatDocsDirectories, pageMap}: HeaderProps) {
       <div className={styles.Header__start}>
         <Link href="/" className={styles.Header__siteTitle}>
           <MarkGithubIcon size={24} />
-          <Text className={styles.Header__siteTitleText} as="p" size="300" weight="semibold">
+          <Text className={styles.Header__siteTitleText} as="p" size="200" weight="semibold">
             {siteTitle}
           </Text>
         </Link>
@@ -70,28 +70,33 @@ export function Header({siteTitle, flatDocsDirectories, pageMap}: HeaderProps) {
         {headerLinks.length > 0 && <LinksDropdown className={styles.Header__linksDropdown} items={headerLinks} />}
       </div>
       <div className={styles.Header__end}>
-        <Stack className={styles.Header__links} direction="horizontal" padding="none" gap={24}>
+        <ul className={styles.Header__links}>
           {headerLinks.map(link => (
-            <Link
-              key={link.href}
-              className={styles.Header__link}
-              href={link.href}
-              aria-current={link.isActive ? 'page' : undefined}
-              {...(link.isExternal && {target: '_blank', rel: 'noopener noreferrer'})}
-            >
-              <Text
-                size="200"
-                variant={link.isActive ? 'default' : 'muted'}
-                weight={link.isActive ? 'semibold' : 'normal'}
+            <li key={link.href}>
+              <Link
+                className={styles.Header__link}
+                href={link.href}
+                aria-current={link.isActive ? 'page' : undefined}
+                {...(link.isExternal && {target: '_blank', rel: 'noopener noreferrer'})}
               >
-                {link.title}
-                {link.isExternal && (
-                  <ArrowUpRightIcon className={styles.Header__externalLinkIcon} size={10} aria-label="External link" />
-                )}
-              </Text>
-            </Link>
+                <Text
+                  size="200"
+                  variant={link.isActive ? 'default' : 'muted'}
+                  weight={link.isActive ? 'semibold' : 'normal'}
+                >
+                  {link.title}
+                  {link.isExternal && (
+                    <ArrowUpRightIcon
+                      className={styles.Header__externalLinkIcon}
+                      size={10}
+                      aria-label="External link"
+                    />
+                  )}
+                </Text>
+              </Link>
+            </li>
           ))}
-        </Stack>
+        </ul>
         <div className={clsx(styles.Header__searchArea, isSearchOpen && styles['Header__searchArea--open'])}>
           <FocusOn enabled={isSearchOpen} onEscapeKey={closeSearch} onClickOutside={closeSearch}>
             <GlobalSearch

package/components/layout/root-layout/Theme.tsx

@@ -219,6 +219,7 @@ export function Theme({pageMap, children}: ThemeProps) {
                   aria-label="Side navigation"
                   width="small"
                   sticky
+                  offsetHeader={65}
                   padding="none"
                   position="start"
                   hidden={{narrow: true}}

package/components/layout/table-of-contents/TableOfContents.module.css

@@ -1,16 +1,17 @@
 .wrapper {
   position: sticky;
-  top: 0;
+  top: 140px;
+  scroll-margin-top: 140px;
 }
 
 .heading {
   font-size: var(--base-size-12);
-  padding-inline-start: var(--base-size-16);
   margin-block-end: var(--base-size-8);
   text-transform: uppercase;
 }
 
 .item {
+  margin-inline-start: 0 !important;
   margin-block-end: var(--base-size-4);
   transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
 }
@@ -18,3 +19,18 @@
 .item[aria-current='location'] {
   transform: translateX(var(--base-size-4));
 }
+
+@media screen and (min-width: 2048px) {
+  .wrapper {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    min-width: 280px;
+    right: 0;
+    overflow: auto;
+    padding: var(--base-size-40) var(--base-size-40) var(--base-size-40) 0;
+    top: 65px;
+    max-height: calc(100vh - 65px);
+    width: 220px;
+  }
+}

package/components/table-wrapper/TableWrapper.module.css

@@ -0,0 +1,4 @@
+.wrapper {
+  position: relative;
+  overflow: auto;
+}

package/components/table-wrapper/TableWrapper.tsx

@@ -0,0 +1,6 @@
+import React, {PropsWithChildren} from 'react'
+import styles from './TableWrapper.module.css'
+
+export function TableWrapper({children}: PropsWithChildren) {
+  return <div className={styles.wrapper}>{children}</div>
+}

package/css/global.css

@@ -9,6 +9,10 @@ body {
     'Segoe UI Emoji';
 }
 
+[data-color-mode='dark'] {
+  color-scheme: dark;
+}
+
 .exclude-from-prose,
 .exclude-from-prose * + * {
   margin-block-start: 0 !important;

package/css/prose.module.css

@@ -33,11 +33,11 @@
 /* ---------------------------------------------------------- */
 
 .Prose
-  :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, hr, table, pre, dl):not(
-    :first-child,
-    :global(.custom-component) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, hr, table, pre, dl)
+  :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, hr, table, pre, dl, :global(.custom-component)):not(
+    :global(.custom-component)
+      :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, hr, table, pre, dl, :global(.custom-component))
   ) {
-  margin-block-start: var(--spacing, 1em);
+  margin-block-end: var(--spacing, 1em);
 }
 
 /* ---------------------------------------------------------- */
@@ -235,7 +235,7 @@
   display: block;
   max-width: 100%;
   height: auto;
-  margin-block-start: var(--spacing);
+  margin-block-end: var(--spacing);
 }
 
 /* ---------------------------------------------------------- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.5.0-rc.6ee882c",
+  "version": "0.5.0-rc.d69336a",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",