-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Wat is nieuw:
- we halen aliases, anatomie afbeelding en anatomie legenda op uit de
candidate repo en tonen ze
Aanpak:
- los component voor anatomie (met <ComponentAnatomy
name={NAAM_VAN_HET_COMPONENT} /> tonen we die dan zodat de logica en
locatie van het ophalen lekker op 1 plek kan staan en we mapnamen later
nog kunnen wijzigen, of per estafettestatus anders kunnen doen)
- los component voor aliases (same-ish)
- de h1's in de Markdowns negeren we en tonen we niet, yay `omitH1`
- SVGs importeren we op de pagina van het component, zodat we
Docusaurus' loader voor SVGs kunnen gebruiken ipv eigen magic
- we halen de informatie op uit de `candidate` repo
Known issues (will fix als de aanpak verder ok is):
- [x] ~het `React.lazy()` truucje werkte niet precies hetzelfde als het
binnen te halen component SVG is (Docusaurus kan een SVG die lokaal
staat wel inlinen, dus lijkt erop dat deze specifieke manier van ophalen
niet goed samenwerkt met die magie)~
- [x] ~de link naar candidate is nu ff lokaal, daarom failt de build bij
Vercel, lokaal kun je evt een lokale `nl-design-system/candidate` pnpm
adden zodat de link werkt~
---------
Signed-off-by: Hidde de Vries <[email protected]>- Loading branch information
Showing
10 changed files
with
161 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { Markdown } from '@site/src/components/Markdown'; | ||
| import React, { type PropsWithChildren, Suspense } from 'react'; | ||
| import { toKebabCase } from '../utils'; | ||
| import type { CleanComponentProgress as ComponentProgressObject } from '@nl-design-system/component-progress/dist/utils'; | ||
|
|
||
| interface ComponentAliasesProps { | ||
| component?: ComponentProgressObject; | ||
| } | ||
|
|
||
| export const ComponentAliases = ({ component }: PropsWithChildren<ComponentAliasesProps>) => { | ||
| const { title } = component; | ||
| const slug = toKebabCase(title); | ||
| const Aliases = React.lazy(() => | ||
| import(`@nl-design-system-candidate/${slug}-docs/docs/aliases.md`).catch(() => { | ||
| return { default: () => null }; | ||
| }), | ||
| ); | ||
|
|
||
| return ( | ||
| <Suspense fallback={null}> | ||
| <Markdown omitH1 headingLevel={1}> | ||
| <Aliases /> | ||
| </Markdown> | ||
| </Suspense> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| .component-anatomy { | ||
| margin: 0; | ||
| } | ||
| .component-anatomy__illustration { | ||
| max-width: 100%; | ||
| height: auto; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { Markdown } from '@site/src/components/Markdown'; | ||
| import clsx from 'clsx'; | ||
| import React, { type PropsWithChildren, Suspense } from 'react'; | ||
| import { toKebabCase } from '../utils'; | ||
| import './ComponentAnatomy.css'; | ||
| import type { CleanComponentProgress as ComponentProgressObject } from '@nl-design-system/component-progress/dist/utils'; | ||
|
|
||
| interface IllustrationProps { | ||
| className?: string; | ||
| height?: boolean; | ||
| } | ||
|
|
||
| interface ComponentAnatomyProps { | ||
| component?: ComponentProgressObject; | ||
| illustration?: React.ComponentType<IllustrationProps>; | ||
| } | ||
|
|
||
| export const ComponentAnatomy = ({ | ||
| component, | ||
| illustration: AnatomyIllustration, | ||
| }: PropsWithChildren<ComponentAnatomyProps>) => { | ||
| const { title } = component; | ||
| const slug = toKebabCase(title); | ||
| const AnatomyLegend = React.lazy(() => | ||
| import(`@nl-design-system-candidate/${slug}-docs/docs/anatomy/anatomy.md`).catch(() => { | ||
| return { default: () => null }; | ||
| }), | ||
| ); | ||
|
|
||
| return ( | ||
| <Suspense fallback={null}> | ||
| <figure className={clsx('component-anatomy')}> | ||
| {AnatomyIllustration && ( | ||
| <AnatomyIllustration height={null} className={clsx('component-anatomy__illustration')} /> | ||
| )} | ||
| {AnatomyIllustration && AnatomyLegend && ( | ||
| <figcaption> | ||
| <Markdown omitH1 headingLevel={1}> | ||
| <AnatomyLegend /> | ||
| </Markdown> | ||
| </figcaption> | ||
| )} | ||
| </figure> | ||
| </Suspense> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters