From 997065393151f8c6893a5dc6fd4a57f35e0a02f2 Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Thu, 6 Mar 2025 13:58:37 +0100 Subject: [PATCH] docs(apps): create new `CodeBlock` (#3321) * docs(apps): create new `CodeBlock` * remove code snippet imports * add bg to inline code * add supported langs * plaintext white color * literal * comment * get bash support * comment out await --- apps/_components/package.json | 6 +- .../src/CodeBlock/CodeBlock.module.css | 37 +++ apps/_components/src/CodeBlock/CodeBlock.tsx | 92 ++++++ .../src/CodeSnippet/CodeSnippet.module.css | 27 -- .../src/CodeSnippet/CodeSnippet.tsx | 121 ------- apps/_components/src/index.ts | 2 +- .../app/bloggen/2024/v1rc1/page.mdx | 20 +- .../app/bloggen/2024/v1rc2/page.mdx | 1 - .../page.mdx | 1 - .../helptext-blir-fjerna-kva-gjer-du/page.mdx | 13 +- .../designelementer/typografi/page.mdx | 17 +- .../for-utviklere/fargar/page.mdx | 26 +- .../for-utviklere/komposisjon/page.mdx | 96 +++--- .../for-utviklere/storrelsar/page.mdx | 7 +- .../app/monstre/systemvarsler/page.mdx | 19 +- .../MdxContent/MdxContent.module.css | 15 +- apps/storefront/globals.css | 5 - apps/storefront/mdx-components.tsx | 12 + apps/storefront/next.config.mjs | 4 +- apps/storefront/package.json | 1 - apps/storybook/.storybook/preview.tsx | 15 + apps/storybook/docs-components/index.ts | 1 - .../components/TokenModal/TokenModal.tsx | 6 +- packages/react/stories/bruk.mdx | 82 +++-- yarn.lock | 297 +++--------------- 25 files changed, 322 insertions(+), 601 deletions(-) create mode 100644 apps/_components/src/CodeBlock/CodeBlock.module.css create mode 100644 apps/_components/src/CodeBlock/CodeBlock.tsx delete mode 100644 apps/_components/src/CodeSnippet/CodeSnippet.module.css delete mode 100644 apps/_components/src/CodeSnippet/CodeSnippet.tsx diff --git a/apps/_components/package.json b/apps/_components/package.json index 1754d80a3f..fb01b6c96f 100644 --- a/apps/_components/package.json +++ b/apps/_components/package.json @@ -22,11 +22,11 @@ "@digdir/designsystemet": "workspace:^", "@digdir/designsystemet-react": "workspace:^", "@navikt/aksel-icons": "^7.0.0", - "@types/react-syntax-highlighter": "^15.5.13", "clsx": "^2.1.1", "next": "^15.1.5", - "prettier": "^3.3.3", - "react-syntax-highlighter": "^15.6.1" + "prism-react-renderer": "^2.4.1", + "prismjs": "^1.29.0", + "react-code-block": "^1.1.3" }, "devDependencies": { "typescript": "^5.7.3" diff --git a/apps/_components/src/CodeBlock/CodeBlock.module.css b/apps/_components/src/CodeBlock/CodeBlock.module.css new file mode 100644 index 0000000000..830a9ca423 --- /dev/null +++ b/apps/_components/src/CodeBlock/CodeBlock.module.css @@ -0,0 +1,37 @@ +.codeBlock { + max-width: 100%; + overflow-x: auto; + width: auto; + padding: var(--ds-size-5); + border-top-left-radius: var(--ds-border-radius-md); + border-top-left-radius: var(--ds-border-radius-md); + height: fit-content; + font-size: min(0.8em, 14px); + background-color: var(--ds-color-neutral-background-tinted); + font-family: monospace; + margin-bottom: 0; + + & [class~='plain-text'] { + color: var(--ds-color-neutral-text-default); + } +} + +.codeBlockWrapper { + position: relative; +} + +.copyButton { + border-radius: 0; + margin-left: auto; + border-bottom-right-radius: var(--ds-border-radius-md); +} + +.toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: var(--ds-size-4); + background-color: var(--ds-color-neutral-background-tinted); + border-top: 1px solid var(--ds-color-neutral-border-subtle); + border-bottom-right-radius: var(--ds-border-radius-md); + border-bottom-left-radius: var(--ds-border-radius-md); +} diff --git a/apps/_components/src/CodeBlock/CodeBlock.tsx b/apps/_components/src/CodeBlock/CodeBlock.tsx new file mode 100644 index 0000000000..367f9eb800 --- /dev/null +++ b/apps/_components/src/CodeBlock/CodeBlock.tsx @@ -0,0 +1,92 @@ +'use client'; +import { Button } from '@digdir/designsystemet-react'; +import cl from 'clsx/lite'; +import { useState } from 'react'; +import { CodeBlock as ReactCodeBlock } from 'react-code-block'; +import classes from './CodeBlock.module.css'; + +/* (typeof global !== 'undefined' ? global : window).Prism = Prism; */ +/* @ts-ignore - TODO: fix this */ +/* await import('prismjs/components/prism-bash'); */ + +export type CodeBlockProps = { + children: string; + className?: string; + /** + * Language for syntax highlighting. + * Only some languages give syntax highlighting, if the passed language is not supported + * it will default to 'text'. + * + * @todo Extend the language list with prismjs. + */ + language?: + | 'markup' + | 'jsx' + | 'tsx' + | 'swift' + | 'kotlin' + | 'objectivec' + | 'js-extras' + | 'reason' + | 'rust' + | 'graphql' + | 'yaml' + | 'go' + | 'cpp' + | 'markdown' + | 'python' + | 'json' + | 'text' + | 'bash' + | string; +}; + +export const CodeBlock = ({ + children, + className, + language = 'text', +}: CodeBlockProps) => { + return ( + +
+ + + + + +
+ +
+
+ + ); +}; + +const CopyButton = ({ text }: { text: string }) => { + const [toolTipText, setToolTipText] = useState('Kopier'); + + const onButtonClick = () => { + setToolTipText('Kopiert!'); + navigator.clipboard.writeText(text).catch((reason) => { + throw Error(String(reason)); + }); + }; + return ( + <> + {/* @ts-ignore */} + + + ); +}; diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.module.css b/apps/_components/src/CodeSnippet/CodeSnippet.module.css deleted file mode 100644 index 28881edf7b..0000000000 --- a/apps/_components/src/CodeSnippet/CodeSnippet.module.css +++ /dev/null @@ -1,27 +0,0 @@ -.codeSnippet { - position: relative; - max-width: 100%; - overflow-x: auto; - width: 100%; - border-radius: var(--ds-border-radius-md); - height: fit-content; -} - -.codeSnippet > pre { - padding-right: var(--ds-size-18) !important; - background-color: var(--ds-color-neutral-background-tinted) !important; -} - -.codeSnippet > pre > code { - padding: 0; -} - -.codeSnippet > pre > code span:empty { - display: none; -} - -.copyButton { - position: absolute; - top: var(--ds-size-2); - right: var(--ds-size-2); -} diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx deleted file mode 100644 index 3db6718159..0000000000 --- a/apps/_components/src/CodeSnippet/CodeSnippet.tsx +++ /dev/null @@ -1,121 +0,0 @@ -'use client'; - -import { Button, Tooltip } from '@digdir/designsystemet-react'; -import { FilesIcon } from '@navikt/aksel-icons'; -import * as prettierBabel from 'prettier/parser-babel'; -import * as prettierHtml from 'prettier/plugins/html.js'; -import * as prettierMarkdown from 'prettier/plugins/markdown.js'; -import * as prettierCSS from 'prettier/plugins/postcss.js'; -import * as prettierTypescript from 'prettier/plugins/typescript.js'; -import { format } from 'prettier/standalone.js'; -import { useEffect, useState } from 'react'; -import SyntaxHighlighter from 'react-syntax-highlighter'; -import { stackoverflowDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'; - -import classes from './CodeSnippet.module.css'; - -import cl from 'clsx/lite'; - -const plugins = [ - prettierTypescript, - /* prettierEstree, */ - prettierCSS, - prettierMarkdown, - prettierHtml, - prettierBabel, -]; - -type CodeSnippetProps = { - language?: - | 'css' - | 'html' - | 'ts' - | 'markdown' - | 'json' - | 'shell' - | 'tsx' - | 'bash'; - children: string; -} & React.HTMLAttributes; - -const CodeSnippet = ({ - language = 'markdown', - className, - children, - ...rest -}: CodeSnippetProps) => { - const [toolTipText, setToolTipText] = useState('Kopier'); - const [snippet, setSnippet] = useState(''); - - useEffect(() => { - async function formatSnippet( - children: string, - language: CodeSnippetProps['language'], - ) { - try { - const formatted = await format(children, { - parser: - language === 'ts' || language === 'tsx' ? 'babel-ts' : language, - plugins, - }); - setSnippet(formatted); - } catch (error) { - console.error('Failed formatting code snippet:', error); - setSnippet(children); - } - } - void formatSnippet(children, language); - - return () => { - setSnippet(children); - }; - }, [children, language]); - - const onButtonClick = () => { - setToolTipText('Kopiert!'); - navigator.clipboard.writeText(children).catch((reason) => { - throw Error(String(reason)); - }); - }; - - return ( -
- {snippet && ( - <> - - - - {/* @ts-ignore -- This has yet to be updated to use react 19 */} - - {snippet} - - - )} -
- ); -}; - -export { CodeSnippet }; diff --git a/apps/_components/src/index.ts b/apps/_components/src/index.ts index 4c68bda319..1496ff357e 100644 --- a/apps/_components/src/index.ts +++ b/apps/_components/src/index.ts @@ -1,4 +1,3 @@ -export { CodeSnippet } from './CodeSnippet/CodeSnippet'; export { Container } from './Container/Container'; export { ClipboardButton } from './ClipboardButton/ClipboardButton'; export { ColorModal } from './ColorModal/ColorModal'; @@ -8,3 +7,4 @@ export { Github } from './logos/Github'; export { Slack } from './logos/Slack'; export { Footer } from './Footer/Footer'; export { Showcase } from './Showcase/Showcase'; +export { CodeBlock } from './CodeBlock/CodeBlock'; diff --git a/apps/storefront/app/bloggen/2024/v1rc1/page.mdx b/apps/storefront/app/bloggen/2024/v1rc1/page.mdx index 97b5bf2a73..217153590f 100644 --- a/apps/storefront/app/bloggen/2024/v1rc1/page.mdx +++ b/apps/storefront/app/bloggen/2024/v1rc1/page.mdx @@ -2,7 +2,6 @@ import { Link } from '@digdir/designsystemet-react'; import { PostLayout, Contributors } from '../../_components'; import { ResponsiveIframe } from '@components'; -import { CodeSnippet } from '@repo/components'; export default ({ children }) => ( -{`npm i @digdir/designsystemet-react@next +```shell +npm i @digdir/designsystemet-react@next npm i @digdir/designsystemet-theme@next npm i @digdir/designsystemet-css@next -`} - +``` Denne installerer alle tre pakken, og inneholder tokens, CSS og React komponenter. @@ -98,9 +96,9 @@ Denne installerer alle tre pakken, og inneholder tokens, CSS og React komponente Ønsker du å teste `dark`, `light` eller `contrast` modus kan du legge på data-atributtet `data-color-scheme="MODE"`. Denne kan legges hvor som helst, og endrer alle barn til modusen du har valgt. - - {`
...
`} - +```tsx +
...
+``` #### Design-tokens templat @@ -122,9 +120,9 @@ Migreringsscriptet kjører automatisk på alle `.css` filer (inkl. undermapper) _Merk at du må dobbelsjekke koden din etter scriptet har kjørt_ - -{`npx @digdir/designsystemet migrate beta-to-v1`} - +```shell +npx @digdir/designsystemet migrate beta-to-v1 +``` ## Takk for samarbeidet så langt! diff --git a/apps/storefront/app/bloggen/2024/v1rc2/page.mdx b/apps/storefront/app/bloggen/2024/v1rc2/page.mdx index e5aaf0a7c6..23b9d7fd13 100644 --- a/apps/storefront/app/bloggen/2024/v1rc2/page.mdx +++ b/apps/storefront/app/bloggen/2024/v1rc2/page.mdx @@ -2,7 +2,6 @@ import { Link } from '@digdir/designsystemet-react'; import { PostLayout, Contributors } from '../../_components'; import { ResponsiveIframe, Image } from '@components'; -import { CodeSnippet } from '@repo/components'; export default ({ children }) => ( ( ( -{` +```css .ds-helptext { --dsc-helptext-icon-size: 65%; --dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E"); @@ -102,13 +100,11 @@ CSS-snutten inkluderer ikon, klassen legger du på `Popover.Trigger`. display: none; } } -`} - +``` ### Markup - -{` +```tsx export type HelpTextProps = { /** * Required descriptive label for screen readers. @@ -142,8 +138,7 @@ export const HelpText = forwardRef( ); } ); -`} - +``` ### Satt saman diff --git a/apps/storefront/app/grunnleggende/designelementer/typografi/page.mdx b/apps/storefront/app/grunnleggende/designelementer/typografi/page.mdx index 6c6308205d..d25ff3dc1b 100644 --- a/apps/storefront/app/grunnleggende/designelementer/typografi/page.mdx +++ b/apps/storefront/app/grunnleggende/designelementer/typografi/page.mdx @@ -1,7 +1,6 @@ import { TokenIcon } from '@navikt/aksel-icons'; import { MenuPageLayout } from '@layouts'; -import { CodeSnippet } from '@repo/components'; import { Image } from '@components'; export const metadata = { @@ -46,19 +45,19 @@ Fonten er tilgjengelig i Figma uten at du trenger å laste ned og installere den For hosting kan Altinn CDN benyttes: - - {``} - +/> +``` For å aktivere lowercase l with tail, legg til følgende i din CSS: - - {`font-family: 'Inter', sans-serif; -font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */`} - +```css +font-family: 'Inter', sans-serif; +font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */ +``` ## Tekststørrelse diff --git a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx index b41ccfdd8c..9c15c34886 100644 --- a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx +++ b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx @@ -1,7 +1,6 @@ import { CodeIcon } from '@navikt/aksel-icons'; import { MenuPageLayout } from '@layouts'; -import { CodeSnippet } from '@repo/components'; export const metadata = { title: 'Fargar', @@ -33,8 +32,7 @@ Når du skal setje farge på ein komponent, er det to data-attributt som kan nyt Dette data-attributtet blir brukt for å veksle mellom lys, mørk eller andre fargemodusar. Innhald som er barn av dette data-attributtet vil få modusen spesifisert av forelder. Som standard vil lys modus bli nytta. - -{` +```html
@@ -44,8 +42,7 @@ vil få modusen spesifisert av forelder. Som standard vil lys modus bli nytta.
-`} - +``` Du kan endre `data-color-scheme` på heile eller delar av sida og byte mellom ulike fargemodus så ofte du vil. Til dømes kan hovudsida vere lys, men med ei mørk botnlinje (footer). Du kan då setje `data-color-scheme="dark"` på botnlinja. @@ -56,13 +53,11 @@ men med ei mørk botnlinje (footer). Du kan då setje `data-color-scheme="dark"` Dette data-attributtet blir brukt for å endre fargen til ein komponent. Du kan bruke alle fargane som finst i temaet ditt. - -{` +```html
-`} - +``` Nokre komponentar kan arve farge frå næraste overordna element som har `data-color` definert. Dette betyr at du ikkje treng å bruke `data-color` på alle komponentane i eit hierarki, dersom dei skal ha same farge. @@ -93,8 +88,8 @@ Desse brukar alltid `neutral` fargen. Denne gruppa inneheld resten av komponentane, og vil arve farge frå næraste forelder med `data-color` satt. - -{`
+```html +
Denne Chip'en har neutral farge. @@ -109,8 +104,7 @@ Denne gruppa inneheld resten av komponentane, og vil arve farge frå næraste fo Eg har ikkje neutral farge.
-`} - +``` ## Bruk `data-color-scheme` og `data-color` saman @@ -118,8 +112,7 @@ Du kan bruke `data-color-scheme` og `data-color` saman for å endre både fargem `data-color` set variablar som blir resatt av `data-color-scheme`. Dersom du endrar fargemodus, må du setje `data-color` på nytt. - -{` +```html
@@ -133,8 +126,7 @@ Du kan bruke `data-color-scheme` og `data-color` saman for å endre både fargem
-`} - +``` ## Kort oppsummert diff --git a/apps/storefront/app/grunnleggende/for-utviklere/komposisjon/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/komposisjon/page.mdx index 371db753cb..d2ea2714c1 100644 --- a/apps/storefront/app/grunnleggende/for-utviklere/komposisjon/page.mdx +++ b/apps/storefront/app/grunnleggende/for-utviklere/komposisjon/page.mdx @@ -1,7 +1,6 @@ import { PackageIcon } from '@navikt/aksel-icons'; import { MenuPageLayout } from '@layouts'; -import { CodeSnippet } from '@repo/components'; export const metadata = { title: 'Komposisjon', @@ -23,14 +22,13 @@ export default ({ children }) => ( Nokre gonger må du kanskje byte ut ein komponent med ein anna, for eksempel `Button` skulle vore ein `Link`. Det er her `asChild` kjem inn i biletet. - -{` import { Button, Link } from '@digdir/designsystemet-react'; +```tsx +import { Button, Link } from '@digdir/designsystemet-react'; - -`} - + +``` I kodesnutten over vert `Button`-komponenten rendra som ein `Link`-komponent. Når dette skal ut i DOMen, er det kun eit element som vert rendra. Dette skjer ved hjelp av Radix sin `Slot`-komponent. 1 @@ -38,38 +36,35 @@ Dette skjer ved hjelp av Radix sin `Slot`-komponent. 1 `Slot` mergar sine props ned på komponenten som ligg som underordna element. I tilfellet over vert `Button` sine props lagt til på `Link`-komponenten, og ein `a`-tagg vert rendra ut. Når du brukar `asChild` kan du ikkje ha meir enn eit underordna element, men du kan ha så mange du vil inne i det elementet. - -{` <> - /* Dette kaster ein error */ - - - /* Dette går fint */ - - -`} - +```tsx +/* Dette kaster ein error */ + + +/* Dette går fint */ + +``` ## Kvifor bruke asChild? Vi har tidlegare brukt ein `as` prop for å rendre som andre element. Men når du brukar denne, får du ikkje typesafety eller korrekte typar iht. elementet du har endret til med `as`. `Slot` ordnar dette ved at du legg til alle props på det underordna elementet av komponenten, og dermed får typesafety. - -{` `} - +```tsx + +``` Alt av klassenavn, aria-attributt og andre props som `Button` har, vil bli lagt til på `Link`-komponenten. Dette betyr at vi kan tilby god tilgjengelegheit, samtidig som du kan bruke andre komponentar som du ynskjer. @@ -82,18 +77,17 @@ Dette betyr at dersom du stoppar eit event på din komponent, vil eventet på `S Dersom ein av event handlerane er avhengig av `event.defaultPrevented`, så må du passe på at rekkefølgja er rett. 2 - -{` -`} - +```tsx + +``` ## Bruk dine eigne komponentar @@ -103,8 +97,8 @@ Ynskjer du å bruke ein eigen komponent må du passe på å spre alle props, og Komponentane dine vil då sjå slik ut: - -{`// uten props og ref +```tsx +// uten props og ref const MinKnapp = () => -`} - +```tsx + +```
Vil bli til: - - {` - -`} - +```tsx + +```
@@ -66,29 +66,25 @@ som ligger i en klient komponent, som `Details` er. #### I en server komponent: - -{` +```tsx import { Details, DetailsSummary, DetailsContent } from '@digdir/designsystemet-react';
... ...
-`} - +``` #### I en klient komponent: - -{` +```tsx import { Details } from '@digdir/designsystemet-react';
... ...
-`} - +``` ### Komponenter med `.TriggerContext` @@ -114,7 +110,9 @@ Alle våre layers ligger under layer gruppen `ds`. Har du f.eks en css reset, så vil denne overstyre deler av det vi har gjort. Vi anbefaler å legge denne i en layer og sortere denne først. Dette gjør du ved å først legge reseten din i en layer, og så sortere denne layeren først: -{`@layer my-reset, ds;`} +```css +@layer my-reset, ds; +``` ### Data attributter @@ -139,17 +137,13 @@ Hvilken typografi som er tilknyttet `primary` eller `secondary` må defineres i Dersom du skal bruke denne attributten må du huske å definere `font-family` til å bruke `--ds-font-family` CSS variabelen. Dette kan løses ved å f.eks bruke [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) i CSS. - - {` - - - … -
- `} - +```html + + + … +
+``` diff --git a/yarn.lock b/yarn.lock index ae404f2c79..773dddda40 100644 --- a/yarn.lock +++ b/yarn.lock @@ -481,7 +481,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7": +"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7": version: 7.24.5 resolution: "@babel/runtime@npm:7.24.5" dependencies: @@ -2234,11 +2234,11 @@ __metadata: "@digdir/designsystemet": "workspace:^" "@digdir/designsystemet-react": "workspace:^" "@navikt/aksel-icons": "npm:^7.0.0" - "@types/react-syntax-highlighter": "npm:^15.5.13" clsx: "npm:^2.1.1" next: "npm:^15.1.5" - prettier: "npm:^3.3.3" - react-syntax-highlighter: "npm:^15.6.1" + prism-react-renderer: "npm:^2.4.1" + prismjs: "npm:^1.29.0" + react-code-block: "npm:^1.1.3" typescript: "npm:^5.7.3" peerDependencies: react: ">=18.3.1" @@ -3580,15 +3580,6 @@ __metadata: languageName: node linkType: hard -"@types/hast@npm:^2.0.0": - version: 2.3.4 - resolution: "@types/hast@npm:2.3.4" - dependencies: - "@types/unist": "npm:*" - checksum: 10/fff47998f4c11e21a7454b58673f70478740ecdafd95aaf50b70a3daa7da9cdc57315545bf9c039613732c40b7b0e9e49d11d03fe9a4304721cdc3b29a88141e - languageName: node - linkType: hard - "@types/hast@npm:^3.0.0": version: 3.0.3 resolution: "@types/hast@npm:3.0.3" @@ -3702,6 +3693,13 @@ __metadata: languageName: node linkType: hard +"@types/prismjs@npm:^1.26.0": + version: 1.26.5 + resolution: "@types/prismjs@npm:1.26.5" + checksum: 10/617099479db9550119d0f84272dc79d64b2cf3e0d7a17167fe740d55fdf0f155697d935409464392d164e62080c2c88d649cf4bc4fdd30a87127337536657277 + languageName: node + linkType: hard + "@types/ramda@npm:^0.30.2": version: 0.30.2 resolution: "@types/ramda@npm:0.30.2" @@ -3731,15 +3729,6 @@ __metadata: languageName: node linkType: hard -"@types/react-syntax-highlighter@npm:^15.5.13": - version: 15.5.13 - resolution: "@types/react-syntax-highlighter@npm:15.5.13" - dependencies: - "@types/react": "npm:*" - checksum: 10/0cc47785326aea5effac9ee68c263abc6448c63b6a084eec3084fd13c08da93addfdc3102ff919cbe420aa71fbded9bf041cc2c51fe625c6ee0751e8a131bd38 - languageName: node - linkType: hard - "@types/react@npm:*, @types/react@npm:19.0.10, @types/react@npm:^19.0.7, @types/react@npm:^19.0.8": version: 19.0.10 resolution: "@types/react@npm:19.0.10" @@ -4953,13 +4942,6 @@ __metadata: languageName: node linkType: hard -"character-entities-legacy@npm:^1.0.0": - version: 1.1.4 - resolution: "character-entities-legacy@npm:1.1.4" - checksum: 10/fe03a82c154414da3a0c8ab3188e4237ec68006cbcd681cf23c7cfb9502a0e76cd30ab69a2e50857ca10d984d57de3b307680fff5328ccd427f400e559c3a811 - languageName: node - linkType: hard - "character-entities-legacy@npm:^3.0.0": version: 3.0.0 resolution: "character-entities-legacy@npm:3.0.0" @@ -4967,13 +4949,6 @@ __metadata: languageName: node linkType: hard -"character-entities@npm:^1.0.0": - version: 1.2.4 - resolution: "character-entities@npm:1.2.4" - checksum: 10/7c11641c48d1891aaba7bc800d4500804d91a28f46d64e88c001c38e6ab2e7eae28873a77ae16e6c55d24cac35ddfbb15efe56c3012b86684a3c4e95c70216b7 - languageName: node - linkType: hard - "character-entities@npm:^2.0.0": version: 2.0.2 resolution: "character-entities@npm:2.0.2" @@ -4981,13 +4956,6 @@ __metadata: languageName: node linkType: hard -"character-reference-invalid@npm:^1.0.0": - version: 1.1.4 - resolution: "character-reference-invalid@npm:1.1.4" - checksum: 10/812ebc5e6e8d08fd2fa5245ae78c1e1a4bea4692e93749d256a135c4a442daf931ca18e067cc61ff4a58a419eae52677126a0bc4f05a511290427d60d3057805 - languageName: node - linkType: hard - "character-reference-invalid@npm:^2.0.0": version: 2.0.1 resolution: "character-reference-invalid@npm:2.0.1" @@ -5260,13 +5228,6 @@ __metadata: languageName: node linkType: hard -"comma-separated-tokens@npm:^1.0.0": - version: 1.0.8 - resolution: "comma-separated-tokens@npm:1.0.8" - checksum: 10/0adcb07174fa4d08cf0f5c8e3aec40a36b5ff0c2c720e5e23f50fe02e6789d1d00a67036c80e0c1e1539f41d3e7f0101b074039dd833b4e4a59031b659d6ca0d - languageName: node - linkType: hard - "comma-separated-tokens@npm:^2.0.0": version: 2.0.3 resolution: "comma-separated-tokens@npm:2.0.3" @@ -6502,15 +6463,6 @@ __metadata: languageName: node linkType: hard -"fault@npm:^1.0.0": - version: 1.0.4 - resolution: "fault@npm:1.0.4" - dependencies: - format: "npm:^0.2.0" - checksum: 10/5ac610d8b09424e0f2fa8cf913064372f2ee7140a203a79957f73ed557c0e79b1a3d096064d7f40bde8132a69204c1fe25ec23634c05c6da2da2039cff26c4e7 - languageName: node - linkType: hard - "fdir@npm:^6.2.0, fdir@npm:^6.4.3": version: 6.4.3 resolution: "fdir@npm:6.4.3" @@ -6656,13 +6608,6 @@ __metadata: languageName: node linkType: hard -"format@npm:^0.2.0": - version: 0.2.2 - resolution: "format@npm:0.2.2" - checksum: 10/5f878b8fc1a672c8cbefa4f293bdd977c822862577d70d53456a48b4169ec9b51677c0c995bf62c633b4e5cd673624b7c273f57923b28735a6c0c0a72c382a4a - languageName: node - linkType: hard - "fraction.js@npm:^4.3.7": version: 4.3.7 resolution: "fraction.js@npm:4.3.7" @@ -7064,13 +7009,6 @@ __metadata: languageName: node linkType: hard -"hast-util-parse-selector@npm:^2.0.0": - version: 2.2.5 - resolution: "hast-util-parse-selector@npm:2.2.5" - checksum: 10/22ee4afbd11754562144cb3c4f3ec52524dafba4d90ee52512902d17cf11066d83b38f7bdf6ca571bbc2541f07ba30db0d234657b6ecb8ca4631587466459605 - languageName: node - linkType: hard - "hast-util-parse-selector@npm:^4.0.0": version: 4.0.0 resolution: "hast-util-parse-selector@npm:4.0.0" @@ -7136,18 +7074,6 @@ __metadata: languageName: node linkType: hard -"hast-util-to-text@npm:^4.0.0": - version: 4.0.0 - resolution: "hast-util-to-text@npm:4.0.0" - dependencies: - "@types/hast": "npm:^3.0.0" - "@types/unist": "npm:^3.0.0" - hast-util-is-element: "npm:^3.0.0" - unist-util-find-after: "npm:^5.0.0" - checksum: 10/04997674ae74c63c785349e4dc4ffd6cbc32caca80d76dbccde78cd56b25199f6321eb68b9d516fe2ffcc1bc5ea8d24e91f2168afc3d939ddf32b9ac371e1832 - languageName: node - linkType: hard - "hast-util-whitespace@npm:^3.0.0": version: 3.0.0 resolution: "hast-util-whitespace@npm:3.0.0" @@ -7157,19 +7083,6 @@ __metadata: languageName: node linkType: hard -"hastscript@npm:^6.0.0": - version: 6.0.0 - resolution: "hastscript@npm:6.0.0" - dependencies: - "@types/hast": "npm:^2.0.0" - comma-separated-tokens: "npm:^1.0.0" - hast-util-parse-selector: "npm:^2.0.0" - property-information: "npm:^5.0.0" - space-separated-tokens: "npm:^1.0.0" - checksum: 10/78f91b71e50506f7499c8275d67645f9f4f130e6f12b038853261d1fa7393432da4113baf3508c41b79d933f255089d6d593beea9d4cda89dfd34d0a498cf378 - languageName: node - linkType: hard - "hastscript@npm:^9.0.0": version: 9.0.1 resolution: "hastscript@npm:9.0.1" @@ -7190,27 +7103,6 @@ __metadata: languageName: node linkType: hard -"highlight.js@npm:^10.4.1, highlight.js@npm:~10.7.0": - version: 10.7.3 - resolution: "highlight.js@npm:10.7.3" - checksum: 10/db8d10a541936b058e221dbde77869664b2b45bca75d660aa98065be2cd29f3924755fbc7348213f17fd931aefb6e6597448ba6fe82afba6d8313747a91983ee - languageName: node - linkType: hard - -"highlight.js@npm:~11.9.0": - version: 11.9.0 - resolution: "highlight.js@npm:11.9.0" - checksum: 10/44b3e42bc096a2e5207e514826a10ff7671de315a7216ebaeba76593d4f16dfe3f7078390cb5c2b08eae657694fef4fb65d775376db48480c829c83fbc4f157a - languageName: node - linkType: hard - -"highlightjs-vue@npm:^1.0.0": - version: 1.0.0 - resolution: "highlightjs-vue@npm:1.0.0" - checksum: 10/44c9187a19fa3c7eac16bf1d327c03cb07c4b444f744624eaf873eb55e4e449a0bb6573b8ba5982006b65743707d6cad39cfc404f3fe5fb8aeb740a57ff6bc24 - languageName: node - linkType: hard - "hsluv@npm:^0.1.0": version: 0.1.0 resolution: "hsluv@npm:0.1.0" @@ -7454,13 +7346,6 @@ __metadata: languageName: node linkType: hard -"is-alphabetical@npm:^1.0.0": - version: 1.0.4 - resolution: "is-alphabetical@npm:1.0.4" - checksum: 10/6508cce44fd348f06705d377b260974f4ce68c74000e7da4045f0d919e568226dc3ce9685c5a2af272195384df6930f748ce9213fc9f399b5d31b362c66312cb - languageName: node - linkType: hard - "is-alphabetical@npm:^2.0.0": version: 2.0.1 resolution: "is-alphabetical@npm:2.0.1" @@ -7468,16 +7353,6 @@ __metadata: languageName: node linkType: hard -"is-alphanumerical@npm:^1.0.0": - version: 1.0.4 - resolution: "is-alphanumerical@npm:1.0.4" - dependencies: - is-alphabetical: "npm:^1.0.0" - is-decimal: "npm:^1.0.0" - checksum: 10/e2e491acc16fcf5b363f7c726f666a9538dba0a043665740feb45bba1652457a73441e7c5179c6768a638ed396db3437e9905f403644ec7c468fb41f4813d03f - languageName: node - linkType: hard - "is-alphanumerical@npm:^2.0.0": version: 2.0.1 resolution: "is-alphanumerical@npm:2.0.1" @@ -7537,13 +7412,6 @@ __metadata: languageName: node linkType: hard -"is-decimal@npm:^1.0.0": - version: 1.0.4 - resolution: "is-decimal@npm:1.0.4" - checksum: 10/ed483a387517856dc395c68403a10201fddcc1b63dc56513fbe2fe86ab38766120090ecdbfed89223d84ca8b1cd28b0641b93cb6597b6e8f4c097a7c24e3fb96 - languageName: node - linkType: hard - "is-decimal@npm:^2.0.0": version: 2.0.1 resolution: "is-decimal@npm:2.0.1" @@ -7592,13 +7460,6 @@ __metadata: languageName: node linkType: hard -"is-hexadecimal@npm:^1.0.0": - version: 1.0.4 - resolution: "is-hexadecimal@npm:1.0.4" - checksum: 10/a452e047587b6069332d83130f54d30da4faf2f2ebaa2ce6d073c27b5703d030d58ed9e0b729c8e4e5b52c6f1dab26781bb77b7bc6c7805f14f320e328ff8cd5 - languageName: node - linkType: hard - "is-hexadecimal@npm:^2.0.0": version: 2.0.1 resolution: "is-hexadecimal@npm:2.0.1" @@ -8281,27 +8142,6 @@ __metadata: languageName: node linkType: hard -"lowlight@npm:^1.17.0": - version: 1.20.0 - resolution: "lowlight@npm:1.20.0" - dependencies: - fault: "npm:^1.0.0" - highlight.js: "npm:~10.7.0" - checksum: 10/3294677be15bbc256556f097d9b675f23f14309aceeada7880473c57bdbdd7761f200d903fe26d8fa5e82259f70a39465d1d40754c4c049ad2bbd33d77e2c06f - languageName: node - linkType: hard - -"lowlight@npm:^3.0.0": - version: 3.1.0 - resolution: "lowlight@npm:3.1.0" - dependencies: - "@types/hast": "npm:^3.0.0" - devlop: "npm:^1.0.0" - highlight.js: "npm:~11.9.0" - checksum: 10/0d6e5b70ea84828becd5321f2171416fcdc11921bd678e5eb1a05af0fe1c1588500cb24e94c0d6e0f5c67a0093d41d959bfe9f332e0db17b644a452b2983e0b6 - languageName: node - linkType: hard - "lru-cache@npm:^10.2.0": version: 10.3.0 resolution: "lru-cache@npm:10.3.0" @@ -9882,20 +9722,6 @@ __metadata: languageName: node linkType: hard -"parse-entities@npm:^2.0.0": - version: 2.0.0 - resolution: "parse-entities@npm:2.0.0" - dependencies: - character-entities: "npm:^1.0.0" - character-entities-legacy: "npm:^1.0.0" - character-reference-invalid: "npm:^1.0.0" - is-alphanumerical: "npm:^1.0.0" - is-decimal: "npm:^1.0.0" - is-hexadecimal: "npm:^1.0.0" - checksum: 10/feb46b516722474797d72331421f3e62856750cfb4f70ba098b36447bf0b169e819cc4fdee53e022874d5f0c81b605d86e1912b9842a70e59a54de2fee81589d - languageName: node - linkType: hard - "parse-entities@npm:^4.0.0": version: 4.0.0 resolution: "parse-entities@npm:4.0.0" @@ -10738,17 +10564,22 @@ __metadata: languageName: node linkType: hard -"prismjs@npm:^1.27.0": - version: 1.29.0 - resolution: "prismjs@npm:1.29.0" - checksum: 10/2080db382c2dde0cfc7693769e89b501ef1bfc8ff4f8d25c07fd4c37ca31bc443f6133d5b7c145a73309dc396e829ddb7cc18560026d862a887ae08864ef6b07 +"prism-react-renderer@npm:^2.4.1": + version: 2.4.1 + resolution: "prism-react-renderer@npm:2.4.1" + dependencies: + "@types/prismjs": "npm:^1.26.0" + clsx: "npm:^2.0.0" + peerDependencies: + react: ">=16.0.0" + checksum: 10/f76ea89b8b18c477eb74e9ddda2571b5c4d21142731f6733160723aa03567b17df315d7db68ffb1122c199750ece65578ecacb488559229b26db5474d6aae55b languageName: node linkType: hard -"prismjs@npm:~1.27.0": - version: 1.27.0 - resolution: "prismjs@npm:1.27.0" - checksum: 10/dc83e2e09170b53526182f5435fae056fc200b109cac39faa88eb48d992311c7f59b94990318962fa93299190a9b33a404920ed150e5b364ce48c897f2ba1e8e +"prismjs@npm:^1.29.0": + version: 1.29.0 + resolution: "prismjs@npm:1.29.0" + checksum: 10/2080db382c2dde0cfc7693769e89b501ef1bfc8ff4f8d25c07fd4c37ca31bc443f6133d5b7c145a73309dc396e829ddb7cc18560026d862a887ae08864ef6b07 languageName: node linkType: hard @@ -10804,15 +10635,6 @@ __metadata: languageName: node linkType: hard -"property-information@npm:^5.0.0": - version: 5.6.0 - resolution: "property-information@npm:5.6.0" - dependencies: - xtend: "npm:^4.0.0" - checksum: 10/e4f45b100fec5968126b08102f9567f1b5fc3442aecbb5b4cdeca401f1f447672e7638a08c81c05dd3979c62d084e0cc6acbe2d8b053c05280ac5abaaf666a68 - languageName: node - linkType: hard - "property-information@npm:^6.0.0": version: 6.2.0 resolution: "property-information@npm:6.2.0" @@ -10896,6 +10718,17 @@ __metadata: languageName: node linkType: hard +"react-code-block@npm:^1.1.3": + version: 1.1.3 + resolution: "react-code-block@npm:1.1.3" + peerDependencies: + prism-react-renderer: ^2 + react: ">=18.0.0" + react-dom: ">=18.0.0" + checksum: 10/41b61bd3fb68e62b7cc5d14dc9b5f4d9c760347d8879eed0c192523db48d41471dc69e06c64a827643db20233d53b99971b54a81f4ed666774b3a12a3dc9267a + languageName: node + linkType: hard + "react-color-palette@npm:^7.3.0": version: 7.3.0 resolution: "react-color-palette@npm:7.3.0" @@ -11015,22 +10848,6 @@ __metadata: languageName: node linkType: hard -"react-syntax-highlighter@npm:^15.6.1": - version: 15.6.1 - resolution: "react-syntax-highlighter@npm:15.6.1" - dependencies: - "@babel/runtime": "npm:^7.3.1" - highlight.js: "npm:^10.4.1" - highlightjs-vue: "npm:^1.0.0" - lowlight: "npm:^1.17.0" - prismjs: "npm:^1.27.0" - refractor: "npm:^3.6.0" - peerDependencies: - react: ">= 0.14.0" - checksum: 10/9a89c81f7dcc109b038dc2a73189fa1ea916e6485d8a39856ab3d01d2c753449b5ae1c0df9c9ee0ed5c8c9808a68422b19af9a168ec091a274bddc7ad092eb86 - languageName: node - linkType: hard - "react-transition-group@npm:^4.4.5": version: 4.4.5 resolution: "react-transition-group@npm:4.4.5" @@ -11201,17 +11018,6 @@ __metadata: languageName: node linkType: hard -"refractor@npm:^3.6.0": - version: 3.6.0 - resolution: "refractor@npm:3.6.0" - dependencies: - hastscript: "npm:^6.0.0" - parse-entities: "npm:^2.0.0" - prismjs: "npm:~1.27.0" - checksum: 10/671bbcf5ae1b4e207f98b9a3dc2cbae215be30effe9f3bdcfd10f565f45fecfe97334cf38c8e4f52d6cc012ff2ec7fb627d3d5678efc388751c8b1e1f7ca2a6c - languageName: node - linkType: hard - "regenerator-runtime@npm:^0.14.0": version: 0.14.0 resolution: "regenerator-runtime@npm:0.14.0" @@ -11233,19 +11039,6 @@ __metadata: languageName: node linkType: hard -"rehype-highlight@npm:^7.0.1": - version: 7.0.2 - resolution: "rehype-highlight@npm:7.0.2" - dependencies: - "@types/hast": "npm:^3.0.0" - hast-util-to-text: "npm:^4.0.0" - lowlight: "npm:^3.0.0" - unist-util-visit: "npm:^5.0.0" - vfile: "npm:^6.0.0" - checksum: 10/f07c6d40947e7178156ef72b4597f3106d44c150a28c759638d68729a52aa13bc69868540caea3e38841faaf91eef3b9b0999c799c70f5fe05c59f4be15d9c2a - languageName: node - linkType: hard - "rehype-slug@npm:^6.0.0": version: 6.0.0 resolution: "rehype-slug@npm:6.0.0" @@ -11967,13 +11760,6 @@ __metadata: languageName: node linkType: hard -"space-separated-tokens@npm:^1.0.0": - version: 1.1.5 - resolution: "space-separated-tokens@npm:1.1.5" - checksum: 10/8ef68f1cfa8ccad316b7f8d0df0919d0f1f6d32101e8faeee34ea3a923ce8509c1ad562f57388585ee4951e92d27afa211ed0a077d3d5995b5ba9180331be708 - languageName: node - linkType: hard - "space-separated-tokens@npm:^2.0.0": version: 2.0.2 resolution: "space-separated-tokens@npm:2.0.2" @@ -12050,7 +11836,6 @@ __metadata: react: "npm:^19.0.0" react-dom: "npm:^19.0.0" rehype-autolink-headings: "npm:^7.1.0" - rehype-highlight: "npm:^7.0.1" rehype-slug: "npm:^6.0.0" remark-gfm: "npm:^4.0.0" webpack: "npm:^5.97.1" @@ -12944,16 +12729,6 @@ __metadata: languageName: node linkType: hard -"unist-util-find-after@npm:^5.0.0": - version: 5.0.0 - resolution: "unist-util-find-after@npm:5.0.0" - dependencies: - "@types/unist": "npm:^3.0.0" - unist-util-is: "npm:^6.0.0" - checksum: 10/7960f98f99ae3c2585a8e16b23f338e5851b7c0f40c3e82e2aef9ddb4887ae63d4cb3906e793dc8ff8242f252425ef846a4e59afa1d3d91ebf0ac84732df2509 - languageName: node - linkType: hard - "unist-util-is@npm:^6.0.0": version: 6.0.0 resolution: "unist-util-is@npm:6.0.0" @@ -13666,7 +13441,7 @@ __metadata: languageName: node linkType: hard -"xtend@npm:^4.0.0, xtend@npm:~4.0.1": +"xtend@npm:~4.0.1": version: 4.0.2 resolution: "xtend@npm:4.0.2" checksum: 10/ac5dfa738b21f6e7f0dd6e65e1b3155036d68104e67e5d5d1bde74892e327d7e5636a076f625599dc394330a731861e87343ff184b0047fef1360a7ec0a5a36a