metadata

apps/storefront/app/(frontpage)/layout.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
 import type React from 'react';
 import { Heading } from '@digdir/designsystemet-react';
 import { PaletteIcon, WrenchIcon, ComponentIcon } from '@navikt/aksel-icons';

apps/storefront/app/bloggen/2023/derfor-trenger-vi-et-felles-designsystem/page.mdx

@@ -14,6 +14,16 @@ export default ({ children }) => (
   />
 );
 
+export const metadata = {
+  title: 'Derfor trenger vi et felles designsystem',
+  description:
+    'Høsten 2023 arrangerte vi en åpen presentasjon og mini-workshop om felles designsystem. Over 200 deltok og vi fikk 440 tilbakemeldinger på gevinster og utfordringer.',
+  ogImage: '/img/bloggen/miro.png',
+  ogImageAlt:
+    'Skjermdump fra Miro som viser mange musepekere som legger inn røde og grønne notislapper',
+  twitterImage: '/img/bloggen/miro.png',
+};
+
 Ikke alle klarer å bruke offentlige digitale tjenester på egen hånd. Innsikt fra prosjektet [“Digital hele livet med bedre brukeropplevelse”](https://www.digdir.no/sammenhengende-tjenester/digital-hele-livet-med-bedre-brukeropplevelse/4405) har vist at en av grunnene er at brukskvaliteten i de digitale tjenestene ikke er god nok. Prosjektet var et oppdrag fra regjeringen og ble ledet av Digdir.
 
 ## Høyt engasjement

apps/storefront/app/bloggen/2024/altinn-studio/page.mdx

@@ -16,6 +16,16 @@ export default ({ children }) => (
   />
 );
 
+export const metadata = {
+  title: 'Hvordan Altinn Studio bruker Designsystemet',
+  description:
+    'Altinn Studio benytter seg av Designsystemet ved hjelp av fasademønsteret. Lær mer om hvordan!',
+  ogImage: '/img/bloggen/altinnstudio-16-9.png',
+  ogImageAlt:
+    'Logo og illustustrasjon av Altinn Studio. Viser mennesker som sitter ved datamaskiner i et kontorlandskap.',
+  twitterImage: '/img/bloggen/altinnstudio-16-9.png',
+};
+
 [Altinn Studio](https://altinn.studio/) er et verktøy for å lage digitale tjenester. Bruker du Altinn Studio for å bygge tjenester, bruker du automatisk komponenter fra Designsystemet!
 
 For at Team Altinn Studio skal nå sine mål om å skape et godt verktøy — må et godt designsystem ligge i bunn. Utviklerne i Altinn Studio trenger komponenter som er tilgjengelig for brukerne på en god måte, men samtidig tillater dem å utvide komponentene til det mer komplekse.

apps/storefront/app/bloggen/2024/bachelor-temavelger/page.mdx

@@ -14,6 +14,16 @@ export default ({ children }) => (
   />
 );
 
+export const metadata = {
+  title: 'Temabygger som bacheloroppgave',
+  description:
+    'Hvordan kan vi gjøre det enklere å ta i bruk Designsystemet? Det har blitt utforsket i en bacheloroppgave!',
+  ogImage: '/img/bloggen/temavelger-front.png',
+  ogImageAlt:
+    'Illustrasjon av en lilla fargeskala som går fra 100-900. I midten av skalaen står det "Velg farge"',
+  twitterImage: '/img/bloggen/temavelger-front.png',
+};
+
 Kristian Birkeli, bachelorstudent i Datateknologi ved UiS, har vårsemesteret 2024 gjennomført en bacheloroppgave i samarbeid med Digdir og Designsystemet.
 
 I oppgaven har Birkeli utforsket hvordan det kan bli enklere å adoptere og ta i bruk Designsystemet. Han har gjennomført en rekke intervjuer med brukere og potensielle brukere av Designsystemet. Gjennom intervjuene har vi fått innsikt i hva som i dag er utfordrende med å ta Designsystemet i bruk, samt hvilke forventninger potensielle brukere har.

apps/storefront/app/bloggen/2024/fluid-typography/page.mdx

@@ -14,6 +14,16 @@ export default ({ children }) => (
   />
 );
 
+export const metadata = {
+  title: 'Dynamiske tekst-størrelser og hvorfor vi gikk bort fra det',
+  description:
+    'Det er mulig å bruke dynamiske tekst-størrelser uten breakpoints',
+  ogImage: '/img/bloggen/fluid-front.png',
+  ogImageAlt:
+    'Illustrasjonen viser at en 16px tekststørrelser på små skjermer øker gradvis opp til 18px på store skjermer.',
+  twitterImage: '/img/bloggen/fluid-front.png',
+};
+
 Ved hjelp av “Fluid typography” kan vi skalere tekststørrelsen gradvis mellom en min og maks-bredde, i stedet for at det blir en brå oppskalering på et spesifikt brekkpunkt. Den lineære funksjonen tilnærmer seg ønsket størrelse jevnt over skjermens bredde.
 
 Tekststørrelsene øker gradvis fra viewport-bredde 320px helt til det treffer maksbredden på viewporten som er satt til 1360px. En tekst på 16px vil f.eks øke til 18px på den største viewporten.

apps/storefront/app/bloggen/2024/v1rc1/page.mdx

@@ -16,6 +16,15 @@ export default ({ children }) => (
   />
 );
 
+export const metadata = {
+  title: 'Dette kommer i V1!',
+  description:
+    'Vi nærmer oss den første versjonen av Designsystemet uten betamerke! Versjon 1 skal være mer stabil, mer fleksibel og støtte flerdimensjonal tematisering.',
+  ogImage: '/img/bloggen/v1rc1.png',
+  ogImageAlt: 'Illustrasjon av Designsystemet V1 og emojis som feirer.',
+  twitterImage: '/img/bloggen/v1rc1.png',
+};
+
 Designsystemet har i lengre tid vært i beta. Betaperioden har gitt oss fleksibilitet og mulighet til å eksperimentere, teste den underliggende strukturen og hvordan komponentene fungerer sammen. Samtidig har det vært litt uforutsigbart for dere som har valgt å bruke designsystemet mens det fortsatt var i beta. Nå nærmer vi oss målstreken og har publisert en release candidate av V1!
 
 ## Hva er nytt?

apps/storefront/components/Image/Image.tsx

@@ -1,6 +1,7 @@
 import cl from 'clsx';
 
 import classes from './Image.module.css';
+import { Paragraph } from '@digdir/designsystemet-react';
 
 interface ImageProps {
   alt: string;
@@ -21,7 +22,12 @@ const Image = ({ alt, src, boxShadow, caption, ...rest }: ImageProps) => {
         {...rest}
       ></img>
       {caption && (
-        <figcaption className={classes.caption}>{caption}</figcaption>
+        <Paragraph
+          size='sm'
+          asChild
+        >
+          <figcaption>{caption}</figcaption>
+        </Paragraph>
       )}
     </figure>
   );