feat: Entries index (#372)

Author: abernier

package-lock.json

@@ -9,6 +9,7 @@
   "devDependencies": {
     "@savvywombat/tailwindcss-grid-areas": "^4.0.0",
     "@types/hast": "^3.0.4",
+    "@types/lodash-es": "^4.17.12",
     "@types/minimist": "^1.2.5",
     "@types/node": "^18.19.50",
     "@types/react": "^18.3.5",
@@ -41,6 +42,7 @@
     "cmdk": "^1.0.0",
     "gray-matter": "^4.0.3",
     "image-size": "^1.1.1",
+    "lodash-es": "^4.17.21",
     "match-sorter": "^6.3.4",
     "next": "^14.2.11",
     "next-mdx-remote": "^5.0.0",

package.json

@@ -1,16 +1,25 @@
 import { Img } from '@/components/mdx'
 
 import cn from '@/lib/cn'
+import { ComponentProps } from 'react'
+import { fetchCSB } from './fetchCSB'
 
 export type CSB = {
   id: string
-  title: string
-  screenshot_url: string
-  description: string
-  tags: string[]
+  title?: string
+  screenshot_url?: string
+  description?: string
+  tags?: string[]
 }
 
-export function Codesandbox({
+type Codesandbox0Props = CSB & {
+  hideTitle?: boolean
+  embed?: boolean
+} & ComponentProps<'a'> & {
+    imgProps?: ComponentProps<'img'>
+  }
+
+export function Codesandbox0({
   id,
   title = '',
   description = '',
@@ -19,10 +28,9 @@ export function Codesandbox({
   //
   hideTitle = false,
   embed = false,
-}: CSB & {
-  hideTitle: boolean
-  embed: boolean
-}) {
+  className,
+  imgProps: { className: imgClassName } = {},
+}: Codesandbox0Props) {
   return (
     <>
       {embed ? (
@@ -38,15 +46,15 @@ export function Codesandbox({
           href={`https://codesandbox.io/s/${id}`}
           target="_blank"
           rel="noreferrer"
-          className="mb-2 block"
+          className={cn('mb-2 block', className)}
         >
           {screenshot_url && (
             <Img
               src={screenshot_url}
               alt={title}
               width={1763}
               height={926}
-              className="aspect-[16/9] object-cover"
+              className={cn('aspect-[16/9] object-cover', imgClassName)}
             />
           )}
         </a>
@@ -76,3 +84,20 @@ export function Codesandbox({
     </>
   )
 }
+
+export async function Codesandbox1({ boxes, ...props }: { boxes: string[] } & Codesandbox0Props) {
+  const ids = boxes // populated from 1.
+  // console.log('ids', ids)
+
+  //
+  // Batch fetch all CSBs of the page
+  //
+  const csbs = await fetchCSB(...ids)
+  // console.log('boxes', boxes)
+  const data = csbs[props.id]
+  // console.log('data', data)
+
+  // Merge initial props with data
+  const merged = { ...props, ...data }
+  return <Codesandbox0 {...merged} />
+}

src/components/mdx/Codesandbox/Codesandbox.tsx

@@ -0,0 +1,56 @@
+import { ComponentProps } from 'react'
+
+import { groupBy } from 'lodash-es'
+import { Codesandbox1 } from '../Codesandbox'
+
+type Entry = {
+  title: string
+  url: string
+  slug: string[]
+  boxes: string[]
+}
+
+export async function Entries({
+  items,
+  excludedGroups = ['getting-started'],
+  ...props
+}: { items: Entry[]; excludedGroups?: string[] } & ComponentProps<'div'>) {
+  const groupedEntries = groupBy(items, ({ slug }) => slug[0])
+
+  return (
+    <div className="my-8 columns-2 md:columns-3" {...props}>
+      {Object.entries(groupedEntries)
+        .filter(([group]) => !excludedGroups.includes(group))
+        .map(([group, entries]) => {
+          return (
+            <>
+              <h2 className="my-8 text-xl capitalize first-of-type:mt-0">{group}</h2>
+              <ul className="text-sm">
+                {entries?.map(({ title, url, boxes }) => (
+                  <li key={url} className="flex gap-1">
+                    <a href={url} className="text-primary">
+                      {title}
+                    </a>
+                    <ul className="inline-flex gap-1">
+                      {boxes.map((id) => (
+                        <li key={id}>
+                          <Codesandbox1
+                            key={id}
+                            id={id}
+                            boxes={[id]}
+                            hideTitle
+                            className="inline-block"
+                            imgProps={{ className: 'h-[1em] w-auto rounded-[1px]' }}
+                          />
+                        </li>
+                      ))}
+                    </ul>
+                  </li>
+                ))}
+              </ul>
+            </>
+          )
+        })}
+    </div>
+  )
+}

src/components/mdx/Entries/Entries.tsx

@@ -0,0 +1 @@
+export * from './Entries'

src/components/mdx/Entries/index.ts

@@ -1,6 +1,7 @@
 export * from './Code'
-export * from './Codesandbox'
+// export * from './Codesandbox'
 export * from './Details'
+export * from './Entries'
 export * from './Gha'
 export * from './Grid'
 export * from './Hint'