move related content location to bottom of page

primer · Jan 17, 2024 · 1ad4bf8 · 1ad4bf8
1 parent fd7f838
commit 1ad4bf8
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 52 deletions.
diff --git a/.changeset/mean-turkeys-hide.md b/.changeset/mean-turkeys-hide.md
@@ -2,7 +2,7 @@
 '@primer/doctocat-nextjs': patch
 ---
 
-Enabled related content navigation using `keywords` field in Markdown frontmatter.
+Enabled related content navigation using `keywords` and `related` properties in Markdown frontmatter.
 
 Example:
 
@@ -21,3 +21,11 @@ keywords: ['keyword', 'another keyword']
 ```
 
 The matching keyword values above across both pages, will enable automatic related content navigation between the two pages.
+
+or using the `related` property:
+
+```
+---
+related: [{title: External link example, href: https://example.com}]
+---
+```
diff --git a/packages/theme/components/layout/related-content-links/RelatedContentLinks.module.css b/packages/theme/components/layout/related-content-links/RelatedContentLinks.module.css
@@ -1,15 +1,4 @@
-.wrapper {
-  width: 220px;
-}
-
-.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-block-end: var(--base-size-4);
-  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
+.list {
+  margin-block: var(--base-size-24);
+  margin-inline-start: 0 !important;
 }
diff --git a/packages/theme/components/layout/related-content-links/RelatedContentLinks.tsx b/packages/theme/components/layout/related-content-links/RelatedContentLinks.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {NavList} from '@primer/react'
-import {Text} from '@primer/react-brand'
+import {Text, Heading, UnorderedList, InlineLink} from '@primer/react-brand'
 import {MdxFile} from 'nextra'
 
 import styles from './RelatedContentLinks.module.css'
@@ -19,37 +19,16 @@ export function RelatedContentLinks({links}: RelatedContentLinksProps) {
   if (!links.length) return null
 
   return (
-    <aside className={styles.wrapper}>
-      <Text as="p" size="100" variant="muted" weight="normal" className={styles.heading}>
-        Related content
-      </Text>
-      <NavList aria-label="Related content">
+    <div className="custom-component">
+      <Heading as="h2">Related content</Heading>
+      <UnorderedList className={styles.list}>
         {links.map(page => (
-          <NavItem
-            className={styles.item}
-            key={page.title}
-            id={`toc-page-${page.route.replace(/\//g, '-')}`}
-            href={page.route}
-          >
-            {page.title}
-          </NavItem>
+          <UnorderedList.Item key={page.route}>
+            <InlineLink href={page.route}>{page.title}</InlineLink>{' '}
+            {page.route.startsWith('http') ? <LinkExternalIcon /> : null}
+          </UnorderedList.Item>
         ))}
-      </NavList>
-    </aside>
-  )
-}
-
-function NavItem({href, children, ...rest}) {
-  return (
-    <Link href={href} legacyBehavior passHref {...rest}>
-      <NavList.Item>
-        {children}{' '}
-        {href.startsWith('http') ? (
-          <NavList.TrailingVisual>
-            <LinkExternalIcon />
-          </NavList.TrailingVisual>
-        ) : null}
-      </NavList.Item>
-    </Link>
+      </UnorderedList>
+    </div>
   )
 }
diff --git a/packages/theme/components/layout/root-layout/Theme.tsx b/packages/theme/components/layout/root-layout/Theme.tsx
@@ -247,7 +247,14 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                               {isIndexPage ? (
                                 <IndexCards folderData={flatDocsDirectories} route={route} />
                               ) : (
-                                <MDXProvider components={getComponents()}>{children}</MDXProvider>
+                                <>
+                                  <MDXProvider components={getComponents()}>{children}</MDXProvider>
+                                  {getRelatedPages().length > 0 && (
+                                    <PRCBox sx={{pt: 5}}>
+                                      <RelatedContentLinks links={getRelatedPages()} />
+                                    </PRCBox>
+                                  )}
+                                </>
                               )}
                             </article>
                             <footer>
@@ -289,11 +296,6 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                             }}
                           >
                             {!isHomePage && headings.length > 0 && <TableOfContents headings={headings} />}
-                            {getRelatedPages().length > 0 && (
-                              <PRCBox sx={{pt: 5}}>
-                                <RelatedContentLinks links={getRelatedPages()} />
-                              </PRCBox>
-                            )}
                           </PRCBox>
                         </PRCBox>
                       </PRCBox>