fix breadcrum base path, added index cards and removed index pages fr…

…om sidebar
primer · Dec 3, 2023 · 77c0315 · 77c0315
1 parent d3266ea
commit 77c0315
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 62 deletions.
diff --git a/packages/site/pages/subfolders/index.mdx b/packages/site/pages/subfolders/index.mdx
@@ -2,14 +2,3 @@
 title: Subfolders
 description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, voluptatibus.
 ---
-
-import Link from 'next/link'
-
-<ul>
-  <li>
-    <Link href="/subfolders/example">Subpage example</Link>
-  </li>
-  <li>
-    <Link href="/subfolders/example-2">Subpage example 2</Link>
-  </li>
-</ul>
diff --git a/packages/site/pages/subfolders/tabs-example/index.mdx b/packages/site/pages/subfolders/tabs-example/index.mdx
@@ -3,14 +3,3 @@ title: Tabs example
 description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, voluptatibus.
 show-tabs: true
 ---
-
-import Link from 'next/link'
-
-<ul>
-  <li>
-    <Link href="/tabs-example/alternative-tab">Alternative tab 1</Link>
-  </li>
-  <li>
-    <Link href="/tabs-example/alternative-tab-2">Alternative tab 2</Link>
-  </li>
-</ul>
diff --git a/packages/theme/components/layout/header/Header.tsx b/packages/theme/components/layout/header/Header.tsx
@@ -83,9 +83,10 @@ export function Header({colorModes, pageMap, docsDirectories, siteTitle}: Header
         .flat()
         .filter(Boolean)
         .map(({frontMatter, route}: MdxFile) => {
+          if (!frontMatter) return null
           const result = {
-            title: frontMatter.title,
-            description: frontMatter.description,
+            title: frontMatter.title ? frontMatter.title : '',
+            description: frontMatter.description ? frontMatter.description : '',
             url: route,
           }
           return result
@@ -104,6 +105,8 @@ export function Header({colorModes, pageMap, docsDirectories, siteTitle}: Header
     if (inputRef.current.value.length > 2) {
       const searchTerm = inputRef.current.value.toLowerCase()
       const results = searchData.filter(data => {
+        if (!data) return false
+        if (!data.title) return false
         const title = data.title.toLowerCase()
         const description = data.description.toLowerCase()
         let searchIndex = 0

diff --git a/packages/theme/components/layout/index-cards/IndexCards.module.css b/packages/theme/components/layout/index-cards/IndexCards.module.css
@@ -0,0 +1,3 @@
+.IndexCards {
+  --brand-Card-maxWidth: 100%;
+}
diff --git a/packages/theme/components/layout/index-cards/IndexCards.tsx b/packages/theme/components/layout/index-cards/IndexCards.tsx
@@ -0,0 +1,37 @@
+import {Card, Grid} from '@primer/react-brand'
+import {MdxFile} from 'nextra'
+
+import styles from './IndexCards.module.css'
+
+type IndexCardsProps = {
+  route: string
+  folderData: DocsItem[]
+}
+
+type DocsItem = MdxFile & {
+  title: string
+  type: string
+  children?: DocsItem[]
+  firstChildRoute?: string
+  withIndexPage?: boolean
+  isUnderCurrentDocsTree?: boolean
+}
+
+export function IndexCards({route, folderData}: IndexCardsProps) {
+  const filteredData = folderData.filter(item => item.kind === 'MdxPage' && item.route.includes(`${route}/`))
+
+  return (
+    <Grid className={styles.IndexCards}>
+      {filteredData.map((item: DocsItem, index) => {
+        return (
+          <Grid.Column span={{medium: 6}} key={`cell-${item.route}`}>
+            <Card href={item.route} hasBorder style={{width: '100%'}}>
+              <Card.Heading>{item.frontMatter.title}</Card.Heading>
+              <Card.Description>{item.frontMatter.description}</Card.Description>
+            </Card>
+          </Grid.Column>
+        )
+      })}
+    </Grid>
+  )
+}
diff --git a/packages/theme/components/layout/sidebar/Sidebar.tsx b/packages/theme/components/layout/sidebar/Sidebar.tsx
@@ -104,6 +104,10 @@ export function Sidebar({pageMap}: SidebarProps) {
             <NavList.Group title={subNavName} key={item.name} sx={{mb: 24}}>
               {item.children
                 .sort((a, b) => (a.name === 'index' ? -1 : b.name === 'index' ? 1 : 0)) // puts index page first
+                .filter(
+                  child =>
+                    child.name !== 'index' || (child.name === 'index' && (child as MdxFile).frontMatter['show-tabs']),
+                ) // only show index page if it has show-tabs
                 .map((child: DocsItem) => {
                   if ((child as MdxFile).kind === 'MdxPage') {
                     return (

diff --git a/packages/theme/index.tsx b/packages/theme/index.tsx
@@ -30,6 +30,7 @@ import {normalizePages} from 'nextra/normalize-pages'
 import {Header} from './components/layout/header/Header'
 import {TableOfContents} from './components/layout/table-of-contents/TableOfContents'
 import bodyStyles from './css/prose.module.css'
+import {IndexCards} from './components/layout/index-cards/IndexCards'
 
 const {publicRuntimeConfig} = getConfig()
 
@@ -42,6 +43,7 @@ const {publicRuntimeConfig} = getConfig()
 export default function Layout({children, pageOpts}: NextraThemeLayoutProps) {
   const {title, frontMatter, headings, filePath, pageMap, route} = pageOpts
   const {locale = 'en-US', defaultLocale, basePath} = useRouter()
+  console.log(basePath)
   const fsPath = useFSRoute()
   const [colorMode, setColorMode] = React.useState<'light' | 'dark'>('light')
   const {
@@ -67,6 +69,7 @@ export default function Layout({children, pageOpts}: NextraThemeLayoutProps) {
 
   const {siteTitle} = publicRuntimeConfig
   const isHomePage = route === '/'
+  const isIndexPage = filePath.endsWith('index.mdx') && !isHomePage && !frontMatter['show-tabs']
 
   const data = !isHomePage && activePath[activePath.length - 2]
   const filteredTabData: MdxFile[] =
@@ -112,7 +115,7 @@ export default function Layout({children, pageOpts}: NextraThemeLayoutProps) {
                               <Breadcrumbs>
                                 {siteTitle && (
                                   <Breadcrumbs.Item
-                                    href={basePath}
+                                    href={basePath || '/'}
                                     sx={{
                                       color: 'var(--brand-InlineLink-color-rest)',
                                     }}
@@ -135,42 +138,46 @@ export default function Layout({children, pageOpts}: NextraThemeLayoutProps) {
                               </Breadcrumbs>
                             )}
 
-                            <Box marginBlockEnd={24}>
-                              <Stack direction="vertical" padding="none" gap={12} alignItems="flex-start">
-                                {frontMatter.image && (
-                                  <Box paddingBlockEnd={24}>
-                                    <Hero.Image src={frontMatter.image} alt={frontMatter['image-alt']} />
-                                  </Box>
-                                )}
-                                {frontMatter.title && (
-                                  <Heading as="h1" size="3">
-                                    {frontMatter.title}
-                                  </Heading>
-                                )}
-                                {frontMatter.description && (
-                                  <Text as="p" variant="muted" size="300">
-                                    {frontMatter.description}
-                                  </Text>
-                                )}
-                                {frontMatter['action-1-text'] && ['action-1-link'] && (
-                                  <Box paddingBlockStart={24}>
-                                    <ButtonGroup>
-                                      <Button as="a">{frontMatter['action-1-text']}</Button>
-                                      {frontMatter['action-2-text'] && ['action-2-link'] && (
-                                        <Button as="a" variant="secondary">
-                                          {frontMatter['action-2-text']}
-                                        </Button>
-                                      )}
-                                    </ButtonGroup>
-                                  </Box>
-                                )}
-                              </Stack>
-                            </Box>
+                            {frontMatter && (
+                              <Box marginBlockEnd={24}>
+                                <Stack direction="vertical" padding="none" gap={12} alignItems="flex-start">
+                                  {frontMatter.image && (
+                                    <Box paddingBlockEnd={24}>
+                                      <Hero.Image src={frontMatter.image} alt={frontMatter['image-alt']} />
+                                    </Box>
+                                  )}
+                                  {frontMatter.title && (
+                                    <Heading as="h1" size="3">
+                                      {frontMatter.title}
+                                    </Heading>
+                                  )}
+                                  {frontMatter.description && (
+                                    <Text as="p" variant="muted" size="300">
+                                      {frontMatter.description}
+                                    </Text>
+                                  )}
+                                  {frontMatter['action-1-text'] && ['action-1-link'] && (
+                                    <Box paddingBlockStart={24}>
+                                      <ButtonGroup>
+                                        <Button as="a">{frontMatter['action-1-text']}</Button>
+                                        {frontMatter['action-2-text'] && ['action-2-link'] && (
+                                          <Button as="a" variant="secondary">
+                                            {frontMatter['action-2-text']}
+                                          </Button>
+                                        )}
+                                      </ButtonGroup>
+                                    </Box>
+                                  )}
+                                </Stack>
+                              </Box>
+                            )}
                             {Boolean(frontMatter['show-tabs']) && <UnderlineNav tabData={filteredTabData} />}
                           </>
                         )}
 
-                        <article className={route != '/' ? bodyStyles.Prose : ''}>{children}</article>
+                        <article className={route != '/' && !isIndexPage ? bodyStyles.Prose : ''}>
+                          {isIndexPage ? <IndexCards folderData={flatDocsDirectories} route={route} /> : children}
+                        </article>
                         <footer>
                           <Box marginBlockStart={64}>
                             <Stack direction="vertical" padding="none" gap={16}>

diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -10,26 +10,26 @@
   "license": "MIT",
   "peerDependencies": {
     "next": "^14.0.3",
-    "nextra": "^2.13.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@primer/octicons-react": "^19.8.0",
     "@primer/react": "^36.2.0",
     "@primer/react-brand": "^0.29.1",
-    "next-transpile-modules": "^10.0.1"
+    "next-transpile-modules": "^10.0.1",
+    "framer-motion": "^10.16.12",
+    "lodash.debounce": "^4.0.8",
+    "react-focus-on": "^3.9.1",
+    "nextra": "^2.13.2"
   },
   "devDependencies": {
     "@github/prettier-config": "^0.0.6",
     "@types/node": "18.11.10",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
     "clsx": "^2.0.0",
-    "framer-motion": "^10.16.12",
-    "lodash.debounce": "^4.0.8",
     "next": "^14.0.3",
-    "react-focus-on": "^3.9.1",
     "styled-components": "^6.1.1",
     "typescript": "^5.3.2"
   }