helper function for card title and description generation

keystonejs · Jul 4, 2024 · f175fea · f175fea
1 parent c841031
commit f175fea
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 24 deletions.
diff --git a/docs/components/docs/WalkthroughsList.tsx b/docs/components/docs/WalkthroughsList.tsx
@@ -4,11 +4,16 @@ import { jsx } from '@emotion/react'
 
 import { Well } from '../primitives/Well'
 import { useMediaQuery } from '../../lib/media'
-import { InlineCode } from '../../components/primitives/Code'
 import { type DocsArray } from '../../pages/docs'
-import { Markdoc } from '../Markdoc'
+import { getDocsPageCardContent } from '../../lib/get-docs-page-card-content'
 
-export function Walkthroughs ({ items }: { items: DocsArray }) {
+export function Walkthroughs ({
+  quickstart,
+  lessons,
+}: {
+  quickstart: DocsArray[number] | undefined
+  lessons: DocsArray
+}) {
   const mq = useMediaQuery()
   return (
     <div>
@@ -20,9 +25,14 @@ export function Walkthroughs ({ items }: { items: DocsArray }) {
           margin: '0 0 var(--space-xlarge) 0',
         })}
       >
-        <Well heading="Keystone Quick Start" href="/docs/getting-started">
-          Take a tour of Keystone in minutes with our CLI starter project
-        </Well>
+        {quickstart && (
+          <Well
+            heading={getDocsPageCardContent(quickstart).title}
+            href={`/docs/${quickstart.slug}`}
+          >
+            {getDocsPageCardContent(quickstart).description}
+          </Well>
+        )}
       </div>
       <div
         css={mq({
@@ -31,18 +41,14 @@ export function Walkthroughs ({ items }: { items: DocsArray }) {
           gap: 'var(--space-xlarge)',
         })}
       >
-        {items.map((item) => (
-          <Well
-            key={item.slug}
-            grad="grad2"
-            heading={item.entry?.cardTitle || item.entry.title}
-            href={`/docs/${item.slug}`}
-          >
-            {item.entry.cardIntro.children?.length
-              ? item.entry.cardIntro.children.map((child, i) => <Markdoc key={i} content={child} />)
-              : item.entry.description}
-          </Well>
-        ))}
+        {lessons.map((lesson) => {
+          const { title, description } = getDocsPageCardContent(lesson)
+          return (
+            <Well key={lesson.slug} grad="grad2" heading={title} href={`/docs/${lesson.slug}`}>
+              {description}
+            </Well>
+          )
+        })}
       </div>
     </div>
   )

diff --git a/docs/lib/get-docs-page-card-content.tsx b/docs/lib/get-docs-page-card-content.tsx
@@ -0,0 +1,11 @@
+import { Markdoc } from '../components/Markdoc'
+import { type DocsArray } from '../pages/docs'
+
+export function getDocsPageCardContent ({ entry }: DocsArray[number]) {
+  let title = entry.cardTitle || entry.title
+  let description = entry.cardIntro.children?.length
+    ? entry.cardIntro.children.map((child, i) => <Markdoc key={i} content={child} />)
+    : entry.description
+
+  return {title, description}
+}
diff --git a/docs/pages/docs/index.tsx b/docs/pages/docs/index.tsx
@@ -262,7 +262,10 @@ export default function Docs ({ docs }: InferGetStaticPropsType<typeof getStatic
         Step-by-step instructions for getting things done with Keystone.
       </Type>
 
-      <Walkthroughs items={docs.filter((doc) => doc.slug.startsWith('walkthroughs'))} />
+      <Walkthroughs
+        quickstart={docs.find(doc => doc.slug === 'getting-started')}
+        lessons={docs.filter(doc => doc.slug.startsWith('walkthroughs'))}
+      />
 
       <Type as="h2" look="heading30" margin="2rem 0 1rem 0">
         Guides
@@ -351,7 +354,10 @@ export default function Docs ({ docs }: InferGetStaticPropsType<typeof getStatic
 
 export type DocsArray = {
   slug: string
-  entry: Omit<EntryWithResolvedLinkedFiles<typeof keystaticConfig['collections']['docs']>, 'cardIntro'> & {
+  entry: Omit<
+    EntryWithResolvedLinkedFiles<typeof keystaticConfig['collections']['docs']>,
+    'cardIntro'
+  > & {
     cardIntro: Tag
   }
 }[]
@@ -361,13 +367,13 @@ export async function getStaticProps (): Promise<
     docs: DocsArray
   }>
 > {
-  const docs = await reader.collections.docs.all({ resolveLinkedFiles: true})
-  const withParsedCardIntro = docs.map(doc => ({
+  const docs = await reader.collections.docs.all({ resolveLinkedFiles: true })
+  const withParsedCardIntro = docs.map((doc) => ({
     ...doc,
     entry: {
       ...doc.entry,
-      cardIntro: transform(doc.entry.cardIntro.node, baseMarkdocConfig)
-    }
+      cardIntro: transform(doc.entry.cardIntro.node, baseMarkdocConfig),
+    },
   }))
 
   return {