refactor(storefront): Migrate page to new routing

Migrate all pages to app router Migrate some components to new routing structure Migrated all metadata to new export Removed old Meta component
digdir · Jul 1, 2024 · 6c96429 · 6c96429
1 parent 8eb1d43
commit 6c96429
Show file tree

Hide file tree

Showing 58 changed files with 296 additions and 365 deletions.
diff --git a/apps/storefront/app/(frontpage)/page.mdx b/apps/storefront/app/(frontpage)/page.mdx
@@ -4,16 +4,18 @@ import {
   PersonChatIcon,
 } from '@navikt/aksel-icons';
 
-import { Meta, Section, ImageBanner } from '@components';
+import { Section, ImageBanner } from '@components';
 
 import { BlogCard } from '@blog';
 
 export default ({ children }) => <>{children}</>;
 
-<Meta
-  title='Velkommen'
-  description='Her finner du UI-komponenter, retningslinjer og god praksis for effektiv produktutvikling og helhetlige brukeropplevelser.'
-/>
+export const metadata = {
+  title: 'Velkommen',
+  description:
+    'Her finner du UI-komponenter, retningslinjer og god praksis for effektiv produktutvikling og helhetlige brukeropplevelser.',
+};
+
 <ImageBanner
   title='En felles digital verktøykasse'
   description='Designsystemet er en felles verktøykasse med grunnleggende UI-komponenter, retningslinjer og mønstre, som du kan bruke når du utvikler digitale tjenester. Designsystemet bidrar til effektiv produktutvikling og helhetlige brukeropplevelser.'

diff --git a/apps/storefront/pages/api/tokens.ts → apps/storefront/app/api/tokens/route.ts b/apps/storefront/pages/api/tokens.ts → apps/storefront/app/api/tokens/route.ts
@@ -1,16 +1,13 @@
 import { promises as fs } from 'fs';
 import path from 'path';
 
-import type { NextApiRequest, NextApiResponse } from 'next';
+import { NextResponse } from 'next/server';
 
 type outputObjType = {
   [key: string]: string;
 };
 
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse,
-) {
+export async function GET() {
   //Read the json data file data.json
   const tokensDirectory = path.join(process.cwd(), 'tokens');
   const fileContents = await fs.readFile(
@@ -27,5 +24,8 @@ export default async function handler(
     const itemArr = fileContentsArr[i].split(':');
     outputObj[itemArr[0].replace('\n  --', '')] = itemArr[1];
   }
-  res.status(200).json(outputObj);
+  return NextResponse.json({
+    status: 200,
+    body: outputObj
+  });
 }
diff --git a/apps/storefront/app/bloggen/(frontpage)/layout.tsx b/apps/storefront/app/bloggen/(frontpage)/layout.tsx
@@ -6,7 +6,7 @@ import {
   Banner,
   BannerIcon,
   BannerHeading,
-} from 'components/SubPages/Banner/Banner';
+} from 'components/Banner/Banner';
 
 import classes from './layout.module.css';
 

diff --git a/apps/storefront/app/bloggen/(frontpage)/page.mdx b/apps/storefront/app/bloggen/(frontpage)/page.mdx
@@ -1,14 +1,13 @@
 import { PencilIcon } from '@navikt/aksel-icons';
 
-import { Meta } from '@components';
 import { BlogCard } from '../_components';
 
 export default ({ children }) => <>{children}</>;
 
-<Meta
-  title='Bloggen'
-  description='Beskrivelse'
-/>
+export const metadata = {
+  title: 'Bloggen',
+  description: 'Beskrivelse',
+};
 
 <BlogCard
   title='Dette kommer i V1! 🎉'

diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
@@ -1,7 +1,7 @@
 import type * as React from 'react';
 import { Heading, Ingress, Paragraph } from '@digdir/designsystemet-react';
 
-import { Container, MdxContent, Image, Meta } from '../../../../components';
+import { Container, MdxContent, Image } from '../../../../components';
 import { Link } from '../../../../components/Link/Link';
 import { Figures } from '../Figures';
 
@@ -34,11 +34,6 @@ function PostLayout({
 }: BlogArticleLayoutProps) {
   return (
     <div className={classes.wrapper}>
-      <Meta
-        title={heading}
-        description={ingress}
-        image={imageSrc}
-      />
       <Container className={classes.page}>
         {Array.from({ length: figureCount }).map((_, index) => (
           <Figures

diff --git a/...brukergrupper-som-er-digitalt-sarbare.mdx → ...rgrupper-som-er-digitalt-sarbare/page.mdx b/...brukergrupper-som-er-digitalt-sarbare.mdx → ...rgrupper-som-er-digitalt-sarbare/page.mdx
@@ -1,10 +1,10 @@
 import { PageLayout } from '@layouts';
-import { Meta } from '@components';
 
-<Meta
-  title='Brukergrupper som er digitalt sårbare'
-  description='Vi har beskrevet seks brukergrupper som er digitalt sårbare. Disse kan brukes som et verktøy i utviklingen av digitale tjenester.'
-/>
+export const metadata = {
+  title: 'Brukergrupper som er digitalt sårbare',
+  description:
+    'Vi har beskrevet seks brukergrupper som er digitalt sårbare. Disse kan brukes som et verktøy i utviklingen av digitale tjenester.',
+};
 
 export default ({ children }) => (
   <PageLayout

diff --git a/...rinnsikt/brukerreise-for-din-tjeneste.mdx → ...ikt/brukerreise-for-din-tjeneste/page.mdx b/...rinnsikt/brukerreise-for-din-tjeneste.mdx → ...ikt/brukerreise-for-din-tjeneste/page.mdx
@@ -1,10 +1,10 @@
 import { PageLayout } from '@layouts';
-import { Meta } from '@components';
 
-<Meta
-  title='Brukerreise for din tjeneste'
-  description='Tegn opp en brukerreise for de ulike karakterene i møte med virksomheten, før-under-etter.'
-/>
+export const metadata = {
+  title: 'Brukerreise for din tjeneste',
+  description:
+    'Tegn opp en brukerreise for de ulike karakterene i møte med virksomheten, før-under-etter.',
+};
 
 export default ({ children }) => (
   <PageLayout

diff --git a/...sis/brukerinnsikt/felles-innsiktsbase.mdx → ...rukerinnsikt/felles-innsiktsbase/page.mdx b/...sis/brukerinnsikt/felles-innsiktsbase.mdx → ...rukerinnsikt/felles-innsiktsbase/page.mdx
@@ -1,10 +1,9 @@
 import { PageLayout } from '@layouts';
-import { Meta } from '@components';
 
-<Meta
-  title='Felles innsiktsbibliotek'
-  description='Åpent innsiktsarbeid på tvers av det offentlige'
-/>
+export const metadata = {
+  title: 'Felles innsiktsbibliotek',
+  description: 'Åpent innsiktsarbeid på tvers av det offentlige',
+};
 
 export default ({ children }) => (
   <PageLayout

diff --git a/.../brukerinnsikt/i-innbyggeren-sine-sko.mdx → ...erinnsikt/i-innbyggeren-sine-sko/page.mdx b/.../brukerinnsikt/i-innbyggeren-sine-sko.mdx → ...erinnsikt/i-innbyggeren-sine-sko/page.mdx
@@ -1,10 +1,10 @@
 import { PageLayout } from '@layouts';
-import { Meta } from '@components';
 
-<Meta
-  title='I innbyggeren sine sko'
-  description='Sett deg inn i innbyggeren sine opplevelser og situasjon ved å spille ut personaen gjennom et gruppearbeid'
-/>
+export const metadata = {
+  title: 'I innbyggeren sine sko',
+  description:
+    'Sett deg inn i innbyggeren sine opplevelser og situasjon ved å spille ut personaen gjennom et gruppearbeid',
+};
 
 export default ({ children }) => (
   <PageLayout

diff --git a/...raksis/innholdsarbeid/andre-ressurser.mdx → ...s/innholdsarbeid/andre-ressurser/page.mdx b/...raksis/innholdsarbeid/andre-ressurser.mdx → ...s/innholdsarbeid/andre-ressurser/page.mdx
@@ -1,10 +1,9 @@
 import { MenuPageLayout } from '@layouts';
-import { Meta } from '@components';
 
-<Meta
-  title='Andre gode språkressurser'
-  description='Her har vi samlet noen andre gode artikler som angår innhold.'
-/>
+export const metadata = {
+  title: 'Andre gode språkressurser',
+  description: 'Her har vi samlet noen andre gode artikler som angår innhold.',
+};
 
 export default ({ children }) => (
   <MenuPageLayout

diff --git a/.../god-praksis/innholdsarbeid/skriverad.mdx → ...praksis/innholdsarbeid/skriverad/page.mdx b/.../god-praksis/innholdsarbeid/skriverad.mdx → ...praksis/innholdsarbeid/skriverad/page.mdx
@@ -1,10 +1,10 @@
 import { PageLayout } from '@layouts';
-import { Meta } from '@components';
 
-<Meta
-  title='Slik skriver du kort og tydelig'
-  description='Retningslinjene skal hjelpe oss til å skrive brukertilpasset, klart og helhetlig.'
-/>
+export const metadata = {
+  title: 'Slik skriver du kort og tydelig',
+  description:
+    'Retningslinjene skal hjelpe oss til å skrive brukertilpasset, klart og helhetlig.',
+};
 
 export default ({ children }) => (
   <PageLayout

diff --git a/...god-praksis/innholdsarbeid/skumlesing.mdx → ...raksis/innholdsarbeid/skumlesing/page.mdx b/...god-praksis/innholdsarbeid/skumlesing.mdx → ...raksis/innholdsarbeid/skumlesing/page.mdx
@@ -1,10 +1,9 @@
 import { PageLayout } from '@layouts';
-import { Meta } from '@components';
 
-<Meta
-  title='Skumlesing'
-  description='Slik skriver du tekster som er lette å skumlese'
-/>
+export const metadata = {
+  title: 'Skumlesing',
+  description: 'Slik skriver du tekster som er lette å skumlese',
+};
 
 export default ({ children }) => (
   <PageLayout

diff --git a/apps/storefront/pages/god-praksis/index.mdx → apps/storefront/app/god-praksis/page.mdx b/apps/storefront/pages/god-praksis/index.mdx → apps/storefront/app/god-praksis/page.mdx
@@ -1,7 +1,7 @@
 import { HandShakeHeartIcon } from '@navikt/aksel-icons';
 
 import { NavPageLayout } from '@layouts';
-import { Meta, Grid, TeaserCard } from '@components';
+import { Grid, TeaserCard } from '@components';
 
 export default ({ children }) => (
   <NavPageLayout
@@ -16,10 +16,11 @@ export default ({ children }) => (
   />
 );
 
-<Meta
-  title='God Praksis'
-  description='Råd og veiledning som kan bidra til å lage bedre helhetlige tjenester samles her.'
-/>
+export const metadata = {
+  title: 'God Praksis',
+  description:
+    'Råd og veiledning som kan bidra til å lage bedre helhetlige tjenester samles her.',
+};
 
 ## Brukerinnsikt
 

diff --git a/...ilgjengelighet/forsta-synsnedsettelse.mdx → ...ngelighet/forsta-synsnedsettelse/page.mdx b/...ilgjengelighet/forsta-synsnedsettelse.mdx → ...ngelighet/forsta-synsnedsettelse/page.mdx
@@ -1,10 +1,11 @@
 import { PageLayout } from '@layouts';
-import { Meta, ResponsiveIframe } from '@components';
+import { ResponsiveIframe } from '@components';
 
-<Meta
-  title='Forstå synsnedsettelse'
-  description='Brønnøysundregistrene har undersøkt hvordan mennesker med synsnedsettelser opplever å bruke digitale produkter.'
-/>
+export const metadata = {
+  title: 'Forstå synsnedsettelse',
+  description:
+    'Brønnøysundregistrene har undersøkt hvordan mennesker med synsnedsettelser opplever å bruke digitale produkter.',
+};
 
 export default ({ children }) => (
   <PageLayout