provide a way to have start steps for guides (#648)

Author: davemooreuws

contentlayer.config.ts

@@ -46,6 +46,10 @@ const Doc = defineDocumentType(() => ({
       },
       description: 'The languages of the content, used by guides',
     },
+    start_steps: {
+      type: 'markdown',
+      description: 'The start steps of the doc, used by guides',
+    },
   },
   computedFields: {
     slug: {

docs/guides/go/realtime-messaging.mdx

@@ -5,6 +5,11 @@ tags:
   - Key Value Store
 languages:
   - go
+start_steps: |
+  git clone --depth 1 https://github.com/nitrictech/examples
+  cd examples/v1/websocket-app
+  go mod tidy
+  nitric start
 ---
 
 # Building a chat app in Go with WebSockets and Nitric

src/app/[[...slug]]/layout.tsx

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button'
 import { GitHubIcon } from '@/components/icons/GitHubIcon'
 import Breadcrumbs from '@/components/Breadcrumbs'
 import FeedbackForm from '@/components/FeedbackForm'
+import { Code } from '@/components/mdx'
 
 export default function DocLayout({
   children,
@@ -22,10 +23,21 @@ export default function DocLayout({
     return <>{children}</>
   }
 
+  const startSteps = doc.start_steps && (
+    <Code
+      hideBashPanel
+      codeblock={{
+        lang: 'bash',
+        meta: '',
+        value: doc.start_steps?.raw,
+      }}
+    />
+  )
+
   return (
     <article className="mx-auto flex h-full max-w-7xl flex-col gap-y-10 px-4 pb-10 pt-16">
       <div className="relative grid grid-cols-1 gap-10 md:grid-cols-12">
-        <div className="w-full flex-auto space-y-20 md:col-span-9">
+        <div className="col-span-8 w-full flex-auto space-y-20 xl:col-span-9">
           <div>
             <Breadcrumbs doc={doc} className="mb-4" />
             <Prose>{children}</Prose>
@@ -55,7 +67,7 @@ export default function DocLayout({
             })}
           </div>
         </div>
-        <DocToc doc={doc} />
+        <DocToc doc={doc} startSteps={startSteps} />
       </div>
     </article>
   )

src/components/code/Code.tsx

@@ -6,9 +6,11 @@ import { highlight } from './highlight'
 
 export async function Code({
   codeblock,
+  hideBashPanel,
 }: {
   codeblock: RawCode
   isPanel?: boolean
+  hideBashPanel?: boolean
 }) {
   const highlighted = await highlight(codeblock)
 
@@ -18,7 +20,11 @@ export async function Code({
 
   return (
     <CodeContainer>
-      <Pre highlighted={highlighted} showPanel={isPanel} />
+      <Pre
+        highlighted={highlighted}
+        showPanel={isPanel}
+        hideBashPanel={hideBashPanel}
+      />
     </CodeContainer>
   )
 }

src/components/code/Pre.tsx

@@ -20,11 +20,13 @@ type Props = {
   highlighted: HighlightedCode
   showPanel?: boolean
   className?: string
+  hideBashPanel?: boolean
 } & HandlerProps
 
 const Pre: React.FC<Props> = ({
   highlighted,
   showPanel,
+  hideBashPanel,
   enableTransitions,
   className,
 }) => {
@@ -40,7 +42,7 @@ const Pre: React.FC<Props> = ({
 
   const showFileNamePanel = showPanel && !!title
 
-  const isBash = highlighted.lang === 'shellscript'
+  const isBash = highlighted.lang === 'shellscript' && !hideBashPanel
 
   return (
     <>

src/components/layout/DocToC.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { Doc } from '@/content'
-import { useRef, useLayoutEffect, useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { DocTracingBeam } from './DocTracingBeam'
 import { Button } from '../ui/button'
@@ -15,7 +15,13 @@ interface Toc {
   depth: number
 }
 
-const DocToC = ({ doc }: { doc: Doc }) => {
+const DocToC = ({
+  doc,
+  startSteps,
+}: {
+  doc: Doc
+  startSteps?: React.JSX.Element | undefined
+}) => {
   const initial = 14
   const sectionSize = 28
   const offset = 10
@@ -58,8 +64,8 @@ const DocToC = ({ doc }: { doc: Doc }) => {
   }, [])
 
   return (
-    <div className="hidden h-full min-w-52 md:block">
-      <aside className="sticky top-[calc(var(--header-height)+1px+2rem)] max-h-[calc(100vh-var(--header-height)-3rem)] min-w-40 space-y-6">
+    <div className="hidden h-full min-w-64 md:block">
+      <aside className="sticky top-[calc(var(--header-height)+1px+2rem)] max-h-[calc(100vh-var(--header-height)-3rem)] space-y-8">
         {doc.toc.length ? (
           <div className="relative flex flex-col">
             <p className="mb-2 font-mono text-sm uppercase dark:text-zinc-300">
@@ -101,6 +107,17 @@ const DocToC = ({ doc }: { doc: Doc }) => {
             </a>
           </Button>
         </div>
+        {startSteps && (
+          <div className="flex flex-col">
+            <p className="mb-2 font-mono text-sm uppercase dark:text-zinc-300">
+              Try this out
+            </p>
+            <p className="mb-2 text-2xs text-muted-foreground">
+              Run these commands in your terminal.
+            </p>
+            {startSteps}
+          </div>
+        )}
       </aside>
     </div>
   )