b373abf605
Adds descriptions to examples.  They show as a list on the index page, and on individual examples they show in a three-js style sidebar. For now, this is disabled completely on mobile. Examples can still be opened in 'standalone' mode to get rid of the sidebar. Note: the 'view code' link won't work until after these changes are merged. There's a small impact on authoring examples: each one needs to live in a folder with a README.md. At a minimum, the readme needs to look like this: ```md --- title: My Example component: ./MyExample.tsx --- Here is a 1-liner about my example ``` Optionally, you can: - Add `hide: true` to the frontmatter to remove the example from the list (you can skip the description this way) - Add `order: 3` to control the order in which the example appears. They're alphabetical otherwise - Add some more description or links to docs below a `---`. This won't show in the listing, but will be visible on GitHub and on the example page itself. As a follow-up, I'd like to add an 'Open in CodeSandbox' link to each example. These won't work until we've made a release with these examples (as our special examples codesandbox is tied to our release process) but the code is there & ready to go! Have a play, let me know what you think! ### Change Type - [x] `documentation` — Changes to the documentation only[^2] --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
28 lines
617 B
TypeScript
28 lines
617 B
TypeScript
import { ComponentType } from 'react'
|
|
|
|
export type Example = {
|
|
title: string
|
|
description: string
|
|
details: string
|
|
path: string
|
|
codeUrl: string
|
|
hide: boolean
|
|
order: number | null
|
|
componentFile: string
|
|
loadComponent: () => Promise<ComponentType>
|
|
}
|
|
|
|
export const examples = (
|
|
Object.values(import.meta.glob('./examples/*/README.md', { eager: true })) as Example[]
|
|
).sort((a, b) => {
|
|
// sort by order then title:
|
|
if (a.order === b.order) {
|
|
return a.title.localeCompare(b.title)
|
|
} else if (a.order === null) {
|
|
return 1
|
|
} else if (b.order === null) {
|
|
return -1
|
|
} else {
|
|
return a.order - b.order
|
|
}
|
|
})
|