wip guides

Author: davemooreuws

package.json

@@ -29,6 +29,7 @@
     "@prisma/client": "^5.20.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",

src/app/guides/page.tsx

@@ -0,0 +1,37 @@
+import Breadcrumbs from '@/components/Breadcrumbs'
+import GuideList from '@/components/guides/GuideList'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import { Heading } from '@/components/ui/heading'
+import { allDocs } from '@/content'
+import Link from 'next/link'
+
+export default function GuidesPage() {
+  const allGuides = allDocs.filter((doc) => doc.slug.startsWith('guides/'))
+
+  return (
+    <div className="mx-auto flex h-full max-w-7xl flex-col gap-y-10 px-4 pb-10 pt-16">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href={'/'}>Docs</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Guides</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+      <Heading level={1}>Guides</Heading>
+      <GuideList guides={allGuides} allTags={[]} />
+    </div>
+  )
+}

src/components/guides/GuideItem.tsx

@@ -0,0 +1,43 @@
+import type { Doc } from '@/content'
+import Image from 'next/image'
+import React from 'react'
+import { cn } from '@/lib/utils'
+import Link from 'next/link'
+
+interface Props {
+  guide: Doc
+  featured?: boolean
+}
+
+const guide: React.FC<Props> = ({ guide, featured }) => {
+  return (
+    <Link
+      href={`/${guide.slug}`}
+      className={
+        'group flex overflow-hidden rounded-lg p-3 transition-colors hover:bg-gray-700/30 hover:text-white dark:text-white ' +
+        (featured ? 'flex-col lg:flex-row' : 'flex-col')
+      }
+    >
+      <div>
+        <p
+          className={cn(
+            'font-display text-xl font-semibold',
+            featured ? 'lg:text-2xl xl:text-3xl' : '',
+          )}
+        >
+          {guide.title}
+        </p>
+        <p
+          className={cn(
+            'text-md mt-3 text-base text-foreground-light',
+            featured ? 'lg:text-md' : '',
+          )}
+        >
+          {guide.description}
+        </p>
+      </div>
+    </Link>
+  )
+}
+
+export default guide

src/components/guides/GuideList.tsx

@@ -0,0 +1,51 @@
+import { Doc } from '@/content'
+import React from 'react'
+import { Separator } from '../ui/separator'
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+import { title } from 'radash'
+import GuideItem from './GuideItem'
+import { Checkbox } from '../ui/checkbox'
+
+interface Props {
+  guides: Doc[]
+  allTags: string[]
+}
+
+const GuideList: React.FC<Props> = ({ guides, allTags }) => {
+  allTags = ['python', 'node', 'go']
+
+  return (
+    <div className="mt-10 grid grid-cols-[280px,1fr]">
+      <aside
+        aria-label="Sidebar"
+        className="sticky top-[calc(var(--header-height)+1px+2rem)] max-h-[calc(100vh-var(--header-height)-3rem)] w-80 overflow-y-auto"
+      >
+        <ul className="space-y-4">
+          {allTags.map((tag) => (
+            <li key={tag}>
+              <div className="flex items-center space-x-4">
+                <Checkbox id={tag} />
+                <label
+                  htmlFor={tag}
+                  className="cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  {title(tag)}
+                </label>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </aside>
+      <ul className="space-y-4">
+        {guides.map((guide) => (
+          <li key={guide.title}>
+            <GuideItem guide={guide} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default GuideList

src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from '@radix-ui/react-icons'
+
+import { cn } from '@/lib/utils'
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/config/index.ts

@@ -12,6 +12,10 @@ export const navigation: NavEntry[] = [
     title: 'Introduction',
     href: '/',
   },
+  {
+    title: 'Guides',
+    href: '/guides',
+  },
   {
     title: 'Concepts',
     items: [

yarn.lock

@@ -1264,6 +1264,20 @@
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-checkbox@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.1.2.tgz#6465b800420923ecc39cbeaa8f357b5f09dbfd52"
+  integrity sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+
 "@radix-ui/[email protected]", "@radix-ui/react-collapsible@^1.1.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.1.1.tgz#1382cc9ec48f8b473c14f3779d317f0cdf6da5e9"