fix(storefront): use CodeSnippet and move sitemap pkg (#2924)

Steamlines use of `CodeSnippet` on the storefront. Makes sure `next-sitemap` is in the correct package.json
digdir · Dec 20, 2024 · c320eb3 · c320eb3
1 parent eb3f58b
commit c320eb3
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 15 deletions.
diff --git a/apps/storefront/app/bloggen/2024/v1rc1/page.mdx b/apps/storefront/app/bloggen/2024/v1rc1/page.mdx
@@ -84,11 +84,12 @@ Vi kommer til å jobbe kontinuerlig med mindre forbedringer basert på tilbakeme
 
 For å lett komme i gang som utvikler med Release Candidate av Designsystemet kan installerer følgende med ditt pakkesystem:
 
-```bash
-npm i @digdir/designsystemet-react@next
+<CodeSnippet language='shell'>
+{`npm i @digdir/designsystemet-react@next
 npm i @digdir/designsystemet-theme@next
 npm i @digdir/designsystemet-css@next
-```
+`}
+</CodeSnippet>
 
 Denne installerer alle tre pakken, og inneholder tokens, CSS og React komponenter.
 
@@ -97,7 +98,7 @@ 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.
 
-<CodeSnippet language='ts'>
+<CodeSnippet language='html'>
   {`<Details data-color-scheme='dark'>...</Details>`}
 </CodeSnippet>
 
@@ -121,9 +122,9 @@ Migreringsscriptet kjører automatisk på alle `.css` filer (inkl. undermapper)
 
 _Merk at du må dobbelsjekke koden din etter scriptet har kjørt_
 
-```sh
-npx @digdir/designsystemet migrate beta-to-v1
-```
+<CodeSnippet language='shell'>
+{`npx @digdir/designsystemet migrate beta-to-v1`}
+</CodeSnippet>
 
 ## Takk for samarbeidet så langt!
 

diff --git a/apps/storefront/app/monstre/systemvarsler/page.mdx b/apps/storefront/app/monstre/systemvarsler/page.mdx
@@ -3,6 +3,7 @@ import { Card, CardContent, Heading, Paragraph } from '@digdir/designsystemet-re
 import { Image } from '@components';
 import { MenuPageLayout } from '@layouts';
 import { Contributors } from '@blog';
+import { CodeSnippet } from '@repo/components';
 
 export const metadata = {
   title: 'Systemvarsler',
@@ -190,14 +191,16 @@ Varsler som dukker opp etter at siden er lastet, kalles dynamiske varsler. Disse
 
 **Eksempel:**
 
-```
+<CodeSnippet language="html">
+{`
 <div role="alert" id="dynamicAlertContainer"></div>
 
 <script>
   // Når et varsel skal vises
   document.getElementById('dynamicAlertContainer').innerHTML = "<p>Kritisk oppdatering!</p>";
 </script>
-```
+`}
+</CodeSnippet>
 
 Ved å bruke en tom `alert` som kan fylles med innhold dynamisk, sikrer vi at skjermlesere oppfatter varselet så snart det fylles med tekst.
 
@@ -207,10 +210,12 @@ For kritiske varsler som må leses opp umiddelbart, bruk `role="alert"`, som sø
 
 **Eksempel:**
 
-```
+<CodeSnippet language="html">
+{`
 <div role="alert">Kritisk feil oppstod, vennligst prøv igjen.</div>
 <div role="status">Endringen ble lagret.</div>
-```
+`}
+</CodeSnippet>
 
 Les mer på [uu-tilsynet](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152) om hvilke roller du skal bruke på ulike elementer. 
 
@@ -220,7 +225,8 @@ Når en [modal](https://next.storybook.designsystemet.no/?path=/docs/komponenter
 
 **Eksempel:**
 
-```
+<CodeSnippet language="html">
+{`
 <div role="dialog" aria-labelledby="modalHeading">
   <h2 id="modalHeading" tabindex="-1">Systemvarsel</h2>
   <p>Detaljer om systemvarselet.</p>
@@ -229,7 +235,8 @@ Når en [modal](https://next.storybook.designsystemet.no/?path=/docs/komponenter
   // Når modalen åpnes
   document.getElementById('modalHeading').focus();
 </script>
-```
+`}
+</CodeSnippet>
 
 Dette gjør at modaltittelen kan få fokus, selv om den normalt ikke er et interaktivt element. Når modalen lukkes, bør fokuset returnere til en logisk plassering på siden. For eksempel der brukeren var før.
 

diff --git a/apps/storefront/package.json b/apps/storefront/package.json
@@ -24,6 +24,7 @@
     "clsx": "^2.1.1",
     "hastscript": "^9.0.0",
     "next": "^14.2.5",
+    "next-sitemap": "^4.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rehype-autolink-headings": "^7.1.0",

diff --git a/package.json b/package.json
@@ -46,7 +46,6 @@
     "@vitest/expect": "^2.0.5",
     "chromatic": "^11.11.0",
     "copyfiles": "^2.4.1",
-    "next-sitemap": "^4.2.3",
     "storybook-addon-pseudo-states": "^4.0.2",
     "tsconfck": "^3.1.4",
     "typescript": "^5.5.4",

diff --git a/yarn.lock b/yarn.lock
@@ -15849,7 +15849,6 @@ __metadata:
     "@vitest/expect": "npm:^2.0.5"
     chromatic: "npm:^11.11.0"
     copyfiles: "npm:^2.4.1"
-    next-sitemap: "npm:^4.2.3"
     storybook-addon-pseudo-states: "npm:^4.0.2"
     tsconfck: "npm:^3.1.4"
     typescript: "npm:^5.5.4"