Skip to content

Commit

Permalink
feat: Entries index (#372)
Browse files Browse the repository at this point in the history
  • Loading branch information
abernier authored Nov 24, 2024
1 parent 8dd8580 commit 23e018a
Show file tree
Hide file tree
Showing 7 changed files with 258 additions and 121 deletions.
20 changes: 19 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
47 changes: 36 additions & 11 deletions src/components/mdx/Codesandbox/Codesandbox.tsx
Original file line number Diff line number Diff line change
@@ -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 = '',
Expand All @@ -19,10 +28,9 @@ export function Codesandbox({
//
hideTitle = false,
embed = false,
}: CSB & {
hideTitle: boolean
embed: boolean
}) {
className,
imgProps: { className: imgClassName } = {},
}: Codesandbox0Props) {
return (
<>
{embed ? (
Expand All @@ -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>
Expand Down Expand Up @@ -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} />
}
56 changes: 56 additions & 0 deletions src/components/mdx/Entries/Entries.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
1 change: 1 addition & 0 deletions src/components/mdx/Entries/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Entries'
3 changes: 2 additions & 1 deletion src/components/mdx/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
Loading

0 comments on commit 23e018a

Please sign in to comment.