@primer/doctocat-nextjs 0.0.2-rc.de031ea → 0.0.3-rc.4828245

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @primer/doctocat-nextjs
 
+## 0.0.3
+
+### Patch Changes
+
+- [`937f773`](https://github.com/primer/doctocat-nextjs/commit/937f77385bc6c4d2c6289d0a6f12122373789f73) Thanks [@rezrah](https://github.com/rezrah)! - Redesign index pages to match current Doctocat styles
+
+- [`7703a7b`](https://github.com/primer/doctocat-nextjs/commit/7703a7b86bc906ff981a7f864a9916c963a35087) Thanks [@rezrah](https://github.com/rezrah)! - Fixed code bg in dark mode and applied fixed width to toc to prevent layout shift
+
 ## 0.0.2
 
 ### Patch Changes

package/components/layout/index-cards/IndexCards.module.css

@@ -1,5 +1,12 @@
-.IndexCards {
-  --brand-Grid-spacing-margin: 0;
-  --brand-Card-maxWidth: 100%;
-  --brand-Grid-spacing-row: var(--brand-Grid-spacing-column-gap);
+.heading a {
+  color: var(--brand-InlineLink-color-rest);
+  text-decoration: none;
+}
+
+.heading a:hover {
+  text-decoration: underline;
+}
+
+.heading a:active {
+  color: var(--brand-InlineLink-color-pressed);
 }

package/components/layout/index-cards/IndexCards.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import {Card, Grid} from '@primer/react-brand'
+import {Heading, Stack, Text} from '@primer/react-brand'
 import {Folder, MdxFile} from 'nextra'
 
-import styles from './IndexCards.module.css'
 import Link from 'next/link'
+import styles from './IndexCards.module.css'
 
 type IndexCardsProps = {
   route: string
@@ -25,22 +25,22 @@ export function IndexCards({route, folderData}: IndexCardsProps) {
   const filteredData = folderData.filter(item => item.kind === 'MdxPage' && item.route.includes(`${route}/`))
 
   return (
-    <Grid className={styles.IndexCards}>
+    <Stack direction="vertical" padding="none" gap="spacious">
       {filteredData.map((item: DocsItem) => {
-        if (item.kind !== 'MdxPage') return null
+        if (item.kind !== 'MdxPage' || !item.frontMatter) return null
+
         return (
-          <Grid.Column span={{medium: 6}} key={`cell-${item.route}`}>
-            <Link href={item.route} legacyBehavior passHref>
-              <Card href="#" hasBorder style={{width: '100%'}}>
-                {item.frontMatter && <Card.Heading>{item.frontMatter.title}</Card.Heading>}
-                {item.frontMatter && item.frontMatter.description && (
-                  <Card.Description>{item.frontMatter.description}</Card.Description>
-                )}
-              </Card>
-            </Link>
-          </Grid.Column>
+          <Stack direction="vertical" padding="none" gap="condensed" key={item.frontMatter.title}>
+            <Heading as="h2" size="6" className={styles.heading}>
+              <Link href={item.route} legacyBehavior passHref>
+                {item.frontMatter.title}
+              </Link>
+            </Heading>
+
+            {item.frontMatter.description && <Text as="p">{item.frontMatter.description}</Text>}
+          </Stack>
         )
       })}
-    </Grid>
+    </Stack>
   )
 }

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

@@ -1,6 +1,7 @@
 .wrapper {
   position: sticky;
   top: var(--base-size-112);
+  width: 220px;
 }
 
 .heading {

package/components/layout/table-of-contents/TableOfContents.tsx

@@ -54,6 +54,8 @@ export function TableOfContents({headings}: TableOfContentsProps) {
     }
   }, [depth2Headings])
 
+  if (!depth2Headings.length) return null
+
   return (
     <aside className={styles.wrapper}>
       <Text as="p" size="100" variant="muted" weight="normal" className={styles.heading}>

package/css/prose.module.css

@@ -224,6 +224,10 @@
   background-color: var(--base-color-scale-indigo-0);
 }
 
+[data-color-mode='dark'] .Prose code {
+  background-color: var(--base-color-scale-indigo-9);
+}
+
 /* ---------------------------------------------------------- */
 /* 8. Images                                                  */
 /* ---------------------------------------------------------- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.0.2-rc.de031ea",
+  "version": "0.0.3-rc.4828245",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "scripts": {