From 284d8b9c0d30325be928c516a7d01f5775b951b3 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 26 Aug 2026 10:36:31 +0200
Subject: [PATCH 1/4] feat: add email signature

---
 .claude/launch.json                           |   5 +-
 .../email-signatur-generator.module.css       |  72 +++++
 .../email-signatur-generator.tsx              | 254 ++++++++++++++++++
 .../signature-config.ts                       |  87 ++++++
 .../signature-template.ts                     |  90 +++++++
 .../mdx-components/mdx-components.tsx         |   2 +
 .../digdir/profilering/epost-signatur.mdx     |  24 ++
 apps/www/public/images/digdir-epost.png       | Bin 0 -> 9212 bytes
 8 files changed, 531 insertions(+), 3 deletions(-)
 create mode 100644 apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css
 create mode 100644 apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx
 create mode 100644 apps/www/app/_components/email-signature-generator/signature-config.ts
 create mode 100644 apps/www/app/_components/email-signature-generator/signature-template.ts
 create mode 100644 apps/www/app/content/digdir/profilering/epost-signatur.mdx
 create mode 100644 apps/www/public/images/digdir-epost.png

diff --git a/.claude/launch.json b/.claude/launch.json
index 6036c12..81f9f0c 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -4,9 +4,8 @@
     {
       "name": "www",
       "runtimeExecutable": "pnpm",
-      "runtimeArgs": ["--filter", "www", "dev", "--port", "4699"],
-      "port": 4699,
-      "autoPort": false
+      "runtimeArgs": ["--filter", "www", "dev"],
+      "port": 5173
     }
   ]
 }
diff --git a/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css b/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css
new file mode 100644
index 0000000..10cad69
--- /dev/null
+++ b/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css
@@ -0,0 +1,72 @@
+.container {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--ds-size-8);
+  align-items: start;
+  max-width: var(--long-content-width);
+  margin-block: var(--ds-size-8);
+
+  @media (max-width: 900px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-6);
+}
+
+.preview {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-4);
+  padding: var(--ds-size-6);
+  border: 1px solid var(--ds-color-neutral-border-subtle);
+  border-radius: var(--ds-border-radius-lg);
+  background-color: var(--ds-color-neutral-background-tinted);
+
+  /*
+   * Keep the preview – and the copy button with it – in view while the form is
+   * filled in. Picking all three languages makes the signature taller than the
+   * viewport, so the card is capped and the signature itself scrolls; without
+   * the cap the button would sit below the fold exactly when it is needed.
+   */
+  @media (min-width: 901px) {
+    position: sticky;
+    top: calc(var(--header-height) + var(--ds-size-4));
+    max-height: calc(100dvh - var(--header-height) - var(--ds-size-8));
+  }
+}
+
+/*
+ * The signature carries its own inline styling, so it must render on a white
+ * ground in both colour schemes – it is a picture of the finished e-mail, not
+ * part of the surrounding page.
+ */
+.signature {
+  padding: var(--ds-size-5);
+  background-color: #fff;
+  border-radius: var(--ds-border-radius-md);
+  overflow: auto;
+  /* Let the flex item shrink below its content height so the cap above bites. */
+  min-height: 0;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-2);
+  align-items: start;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
diff --git a/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx b/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx
new file mode 100644
index 0000000..3c39c32
--- /dev/null
+++ b/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx
@@ -0,0 +1,254 @@
+import {
+  Button,
+  Checkbox,
+  Fieldset,
+  Heading,
+  Paragraph,
+  Radio,
+  Textfield,
+  ValidationMessage,
+} from '@digdir/designsystemet-react';
+import { CheckmarkIcon, FilesIcon } from '@navikt/aksel-icons';
+import { useEffect, useId, useMemo, useState } from 'react';
+import classes from './email-signatur-generator.module.css';
+import {
+  getLanguages,
+  getOffice,
+  type LanguageCode,
+  LOGO_PATH,
+  languages,
+  type OfficeId,
+  offices,
+} from './signature-config';
+import {
+  buildSignatureHtml,
+  buildSignatureText,
+  type SignatureData,
+} from './signature-template';
+
+type CopyState = 'idle' | 'copied' | 'error';
+
+/**
+ * Copy both flavours in one go, so the receiving client can pick the rich one
+ * and fall back to plain text. `ClipboardItem` is the only API that carries
+ * `text/html`; older browsers get the `execCommand` route below.
+ */
+const copySignature = async (html: string, text: string) => {
+  if (typeof ClipboardItem !== 'undefined' && navigator.clipboard?.write) {
+    try {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'text/html': new Blob([html], { type: 'text/html' }),
+          'text/plain': new Blob([text], { type: 'text/plain' }),
+        }),
+      ]);
+      return;
+    } catch {
+      // Having the API is no guarantee of being allowed to use it – Firefox and
+      // managed-browser policies both refuse `clipboard-write` for pages they
+      // are happy to run. Fall through rather than give up.
+    }
+  }
+
+  // Fallback: select a detached copy of the markup and let the browser convert
+  // the selection to rich text itself.
+  const holder = document.createElement('div');
+  holder.setAttribute('contenteditable', 'true');
+  holder.innerHTML = html;
+  holder.style.position = 'fixed';
+  holder.style.left = '-9999px';
+  document.body.appendChild(holder);
+
+  try {
+    const range = document.createRange();
+    range.selectNodeContents(holder);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+
+    if (!document.execCommand('copy')) {
+      throw new Error('execCommand("copy") was rejected');
+    }
+    selection?.removeAllRanges();
+  } finally {
+    holder.remove();
+  }
+};
+
+export const EmailSignatureGenerator = () => {
+  const previewId = useId();
+
+  const [name, setName] = useState('');
+  const [role, setRole] = useState('');
+  const [phone, setPhone] = useState('');
+  const [office, setOffice] = useState<OfficeId>('leikanger');
+  const [selectedLanguages, setSelectedLanguages] = useState<LanguageCode[]>([
+    'nb',
+  ]);
+  const [copyState, setCopyState] = useState<CopyState>('idle');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  const noLanguage = selectedLanguages.length === 0;
+
+  const input: SignatureData = useMemo(
+    () => ({
+      name,
+      role,
+      phone,
+      office: getOffice(office),
+      languages: getLanguages(selectedLanguages),
+    }),
+    [name, role, phone, office, selectedLanguages],
+  );
+
+  // Root-relative for the preview; the copy swaps in an absolute URL, which is
+  // the only kind a mail client can resolve.
+  const previewHtml = useMemo(
+    () => buildSignatureHtml({ ...input, logoSrc: LOGO_PATH }),
+    [input],
+  );
+
+  const toggleLanguage = (code: LanguageCode, checked: boolean) => {
+    setSelectedLanguages((current) =>
+      checked
+        ? [...current, code]
+        : current.filter((language) => language !== code),
+    );
+  };
+
+  const onCopy = async () => {
+    const html = buildSignatureHtml({
+      ...input,
+      logoSrc: new URL(LOGO_PATH, window.location.origin).href,
+    });
+
+    try {
+      await copySignature(html, buildSignatureText(input));
+      setCopyState('copied');
+    } catch {
+      setCopyState('error');
+    }
+  };
+
+  // Let the "Kopiert!" confirmation fade back to the default label.
+  useEffect(() => {
+    if (copyState !== 'copied') return;
+    const timer = window.setTimeout(() => setCopyState('idle'), 2500);
+    return () => window.clearTimeout(timer);
+  }, [copyState]);
+
+  // Render nothing until mounted. `ds-field` / `ds-fieldset` hand out ids from a
+  // module-level counter on the server but from `window.dsUseId` in the browser
+  // (see @digdir/designsystemet-web `useId`), so the two can never agree and
+  // every SSR-ed Field logs a hydration mismatch. Nothing is lost by skipping
+  // the server pass: this is a clipboard tool, and the prerendered markup would
+  // only ever be an empty form.
+  if (!mounted) {
+    return <div className={classes.container} aria-hidden='true' />;
+  }
+
+  return (
+    <div className={classes.container}>
+      <form
+        className={classes.form}
+        onSubmit={(event) => event.preventDefault()}
+      >
+        <Textfield
+          label='Navn'
+          value={name}
+          autoComplete='name'
+          onChange={(event) => setName(event.target.value)}
+        />
+        <Textfield
+          label='Rolle'
+          description='Stillingstittelen din, slik den står i personalsystemet.'
+          value={role}
+          autoComplete='organization-title'
+          onChange={(event) => setRole(event.target.value)}
+        />
+        <Textfield
+          label='Telefonnummer'
+          type='tel'
+          value={phone}
+          autoComplete='tel'
+          onChange={(event) => setPhone(event.target.value)}
+        />
+
+        <Fieldset>
+          <Fieldset.Legend>Kontorsted</Fieldset.Legend>
+          {offices.map((item) => (
+            <Radio
+              key={item.id}
+              name='office'
+              label={item.label}
+              description={item.address}
+              value={item.id}
+              checked={office === item.id}
+              onChange={() => setOffice(item.id)}
+            />
+          ))}
+        </Fieldset>
+
+        <Fieldset>
+          <Fieldset.Legend>Språk</Fieldset.Legend>
+          <Fieldset.Description>
+            Velg ett eller flere. Signaturen får én bolk per språk.
+          </Fieldset.Description>
+          {languages.map((language) => (
+            <Checkbox
+              key={language.code}
+              name='language'
+              label={language.label}
+              value={language.code}
+              checked={selectedLanguages.includes(language.code)}
+              onChange={(event) =>
+                toggleLanguage(language.code, event.target.checked)
+              }
+            />
+          ))}
+          {noLanguage && (
+            <ValidationMessage>Velg minst ett språk.</ValidationMessage>
+          )}
+        </Fieldset>
+      </form>
+
+      <section
+        className={classes.preview}
+        aria-labelledby={`${previewId}-heading`}
+      >
+        <Heading level={2} data-size='2xs' id={`${previewId}-heading`}>
+          Forhåndsvisning
+        </Heading>
+
+        <div
+          className={classes.signature}
+          // The markup is built by `signature-template.ts` from escaped input –
+          // rendering it here is what keeps preview and clipboard identical.
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: see above
+          dangerouslySetInnerHTML={{ __html: previewHtml }}
+        />
+
+        <div className={classes.actions}>
+          <Button type='button' onClick={onCopy} disabled={noLanguage}>
+            {copyState === 'copied' ? (
+              <CheckmarkIcon aria-hidden />
+            ) : (
+              <FilesIcon aria-hidden />
+            )}
+            {copyState === 'copied' ? 'Kopiert!' : 'Kopier signatur'}
+          </Button>
+          {copyState === 'error' && (
+            <ValidationMessage>
+              Kopieringen feilet. Marker signaturen over og kopier den manuelt.
+            </ValidationMessage>
+          )}
+        </div>
+        <Paragraph data-size='sm' aria-live='polite' className={classes.srOnly}>
+          {copyState === 'copied' ? 'Signaturen er kopiert.' : ''}
+        </Paragraph>
+      </section>
+    </div>
+  );
+};
diff --git a/apps/www/app/_components/email-signature-generator/signature-config.ts b/apps/www/app/_components/email-signature-generator/signature-config.ts
new file mode 100644
index 0000000..ddeb352
--- /dev/null
+++ b/apps/www/app/_components/email-signature-generator/signature-config.ts
@@ -0,0 +1,87 @@
+/**
+ * Data that drives the e-mail signature generator.
+ *
+ * Everything a signature can say lives here – the component only reads from
+ * these lists, so adding an office or a language is a one-object change.
+ */
+
+export type LanguageCode = 'nb' | 'nn' | 'en';
+export type OfficeId = 'leikanger' | 'oslo' | 'bronnoysund';
+
+export type Office = {
+  id: OfficeId;
+  /** Label shown in the radio group. */
+  label: string;
+  /** Visiting address, printed verbatim in the signature. */
+  address: string;
+};
+
+export type Language = {
+  code: LanguageCode;
+  /** Label shown in the checkbox group. */
+  label: string;
+  /** `lang` attribute on the language block. */
+  htmlLang: string;
+  greeting: string;
+  phoneLabel: string;
+};
+
+// TODO: bekreft besøksadressene før siden publiseres.
+export const offices: Office[] = [
+  {
+    id: 'leikanger',
+    label: 'Leikanger',
+    address: 'Askedalen 4, 6863 Leikanger, NO',
+  },
+  {
+    id: 'oslo',
+    label: 'Oslo',
+    address: 'Grev Wedels plass 9, 0151 Oslo, NO',
+  },
+  {
+    id: 'bronnoysund',
+    label: 'Brønnøysund',
+    address: 'Havnegata 48, 8900 Brønnøysund, NO',
+  },
+];
+
+export const languages: Language[] = [
+  {
+    code: 'nb',
+    label: 'Bokmål',
+    htmlLang: 'nb-NO',
+    greeting: 'Vennlig hilsen',
+    phoneLabel: 'Mob',
+  },
+  {
+    code: 'nn',
+    label: 'Nynorsk',
+    htmlLang: 'nn-NO',
+    greeting: 'Venleg helsing',
+    phoneLabel: 'Mob',
+  },
+  {
+    code: 'en',
+    label: 'Engelsk',
+    htmlLang: 'en',
+    greeting: 'Kind regards',
+    phoneLabel: 'Phone',
+  },
+];
+
+export const getOffice = (id: OfficeId): Office =>
+  offices.find((office) => office.id === id) ?? offices[0];
+
+/** Languages in the order they are declared above, not the order they were ticked. */
+export const getLanguages = (codes: LanguageCode[]): Language[] =>
+  languages.filter((language) => codes.includes(language.code));
+
+/** Printed once, under the logo – the same for every office and language. */
+export const POSTAL_ADDRESS = 'Postboks 1382 Vika, 0114 Oslo, NO';
+
+export const WEBSITE = { label: 'digdir.no', href: 'https://www.digdir.no' };
+
+/** Path to the logo used in the signature, relative to the site root. */
+export const LOGO_PATH = '/images/digdir-epost.png';
+export const LOGO_ALT = 'Digdir';
+export const LOGO_WIDTH = 130;
diff --git a/apps/www/app/_components/email-signature-generator/signature-template.ts b/apps/www/app/_components/email-signature-generator/signature-template.ts
new file mode 100644
index 0000000..446c6d5
--- /dev/null
+++ b/apps/www/app/_components/email-signature-generator/signature-template.ts
@@ -0,0 +1,90 @@
+import {
+  type Language,
+  LOGO_ALT,
+  LOGO_WIDTH,
+  type Office,
+  POSTAL_ADDRESS,
+  WEBSITE,
+} from './signature-config';
+
+/** Everything the signature says, except how to reach the logo. */
+export type SignatureData = {
+  name: string;
+  role: string;
+  phone: string;
+  office: Office;
+  /** One block is rendered per language, in the order given. */
+  languages: Language[];
+};
+
+export type SignatureInput = SignatureData & {
+  /**
+   * `src` for the logo. The preview passes a root-relative path; the copy
+   * passes an absolute URL, since a relative one cannot resolve in a mail client.
+   */
+  logoSrc: string;
+};
+
+const FONT_STACK =
+  "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif";
+const TEXT_COLOR = '#1E2B3C';
+const RULE_COLOR = '#D3D9E1';
+
+const escapeHtml = (value: string) =>
+  value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+
+/** Placeholders keep the preview readable before the form is filled in. */
+const or = (value: string, fallback: string) => value.trim() || fallback;
+
+const line = `margin:0;font-family:${FONT_STACK};font-size:14px;line-height:20px;color:${TEXT_COLOR};`;
+const digdir_hex = '#C2132C';
+/** Closes a group – the blank line the format calls for. */
+const gap = 'margin:0 0 20px;';
+
+const buildLanguageBlock = (
+  language: Language,
+  { name, role, phone, office }: SignatureData,
+) => `<div lang="${language.htmlLang}" style="${line}">
+  <p style="${line}${gap}">${escapeHtml(language.greeting)}</p>
+  <p style="${line}"><strong>${escapeHtml(or(name, 'Navn Navnesen'))}</strong></p>
+  <p style="${line}${gap}"><em style="font-style:italic;">${escapeHtml(or(role, 'stilling'))}</em></p>
+  <p style="${line}${gap}">${escapeHtml(language.phoneLabel)}: ${escapeHtml(or(phone, 'XXX XX XXX'))}</p>
+  <p style="${line}${gap}">${escapeHtml(office.address)}</p>
+</div>`;
+
+export const buildSignatureHtml = (input: SignatureInput): string => {
+  const separator = `<div style="border-top:1px solid ${RULE_COLOR};margin:0 0 20px;font-size:0;line-height:0;">&nbsp;</div>`;
+
+  const blocks = input.languages
+    .map((language) => buildLanguageBlock(language, input))
+    .join(`\n  ${separator}\n  `);
+
+  return `<div style="${line}">
+  ${blocks}
+  <img src="${input.logoSrc}" alt="${LOGO_ALT}" width="${LOGO_WIDTH}" style="display:block;border:0;margin:0 0 20px;width:${LOGO_WIDTH}px;height:auto;" />
+  <p style="${line}">${escapeHtml(POSTAL_ADDRESS)}</p>
+  <p style="${line}"><a href="${WEBSITE.href}" style="color:${digdir_hex};text-decoration:underline;">${escapeHtml(WEBSITE.label)}</a></p>
+</div>`;
+};
+
+/** Plain-text flavour, for clients and paste targets that reject HTML. */
+export const buildSignatureText = (input: SignatureData): string =>
+  [
+    ...input.languages.map((language) =>
+      [
+        language.greeting,
+        '',
+        or(input.name, 'Navn Navnesen'),
+        or(input.role, 'stilling'),
+        '',
+        `${language.phoneLabel}: ${or(input.phone, 'XXX XX XXX')}`,
+        '',
+        input.office.address,
+      ].join('\n'),
+    ),
+    [POSTAL_ADDRESS, WEBSITE.href].join('\n'),
+  ].join('\n\n');
diff --git a/apps/www/app/_components/mdx-components/mdx-components.tsx b/apps/www/app/_components/mdx-components/mdx-components.tsx
index c3b0fa9..bf19158 100644
--- a/apps/www/app/_components/mdx-components/mdx-components.tsx
+++ b/apps/www/app/_components/mdx-components/mdx-components.tsx
@@ -29,6 +29,7 @@ import {
 import { getMDXComponent } from 'mdx-bundler/dist/client';
 import { type ComponentType, type JSX, useMemo } from 'react';
 import { Link as RRLink } from 'react-router';
+import { EmailSignatureGenerator } from '../email-signature-generator/email-signatur-generator';
 import ExpandableImage from '../expandable-image/expandable-image';
 import classes from './mdx-components.module.css';
 
@@ -60,6 +61,7 @@ const defaultComponents = {
   DetailsContent,
   DetailsSummary,
   Divider,
+  EmailSignatureGenerator,
   h1: (props: HeadingProps) => (
     <Heading className={classes.heading} level={1} data-size='xl' {...props} />
   ),
diff --git a/apps/www/app/content/digdir/profilering/epost-signatur.mdx b/apps/www/app/content/digdir/profilering/epost-signatur.mdx
new file mode 100644
index 0000000..0572cce
--- /dev/null
+++ b/apps/www/app/content/digdir/profilering/epost-signatur.mdx
@@ -0,0 +1,24 @@
+---
+title: Epost-signatur
+sidebar_title: Epost-signatur
+description: Generer epost-signatur.
+category: Profilering
+order: 10
+published: true
+---
+
+Sett opp e-postsignaturen i tråd med Digdir sin visuelle identitet:
+
+1. Fyll ut skjemaet under.
+2. Trykk **Kopier signatur**.
+3. Åpne innstillingene for e-postsignatur i e-postklienten din.
+4. Fyll inn signaturnavn: `Standard`.
+5. Lim inn i signaturfeltet.
+6. Velg `Standard` for nye meldinger.
+7. Trykk **Lagre**.
+
+<Alert data-color='info'>
+  Noen e-postklienter endrer litt på formateringen, så for eksempel lenker kan bli blå.
+</Alert>
+
+<EmailSignatureGenerator />
diff --git a/apps/www/public/images/digdir-epost.png b/apps/www/public/images/digdir-epost.png
new file mode 100644
index 0000000000000000000000000000000000000000..23c2105884c9b5332113eeac6211b5814652c87a
GIT binary patch
literal 9212
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
CG(WTe

literal 0
HcmV?d00001


From 117c5481b47e3a2189ce0f2cffc280f0f80b3096 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 26 Aug 2026 10:39:36 +0200
Subject: [PATCH 2/4] proper address

---
 .../signature-config.ts                       |  2 +-
 .../signature-template.ts                     |  7 +++-
 apps/www/app/content/digdir/kom-i-gang.mdx    | 41 -------------------
 apps/www/app/content/digdir/komponenter.mdx   | 28 -------------
 4 files changed, 6 insertions(+), 72 deletions(-)
 delete mode 100644 apps/www/app/content/digdir/kom-i-gang.mdx
 delete mode 100644 apps/www/app/content/digdir/komponenter.mdx

diff --git a/apps/www/app/_components/email-signature-generator/signature-config.ts b/apps/www/app/_components/email-signature-generator/signature-config.ts
index ddeb352..2f4894e 100644
--- a/apps/www/app/_components/email-signature-generator/signature-config.ts
+++ b/apps/www/app/_components/email-signature-generator/signature-config.ts
@@ -36,7 +36,7 @@ export const offices: Office[] = [
   {
     id: 'oslo',
     label: 'Oslo',
-    address: 'Grev Wedels plass 9, 0151 Oslo, NO',
+    address: 'Lørenfaret 1 C, 0585 Oslo, NO',
   },
   {
     id: 'bronnoysund',
diff --git a/apps/www/app/_components/email-signature-generator/signature-template.ts b/apps/www/app/_components/email-signature-generator/signature-template.ts
index 446c6d5..9e2cab0 100644
--- a/apps/www/app/_components/email-signature-generator/signature-template.ts
+++ b/apps/www/app/_components/email-signature-generator/signature-template.ts
@@ -45,6 +45,9 @@ const digdir_hex = '#C2132C';
 /** Closes a group – the blank line the format calls for. */
 const gap = 'margin:0 0 20px;';
 
+/* Split phone number into XX XX XX XX */
+const formatPhone = (phone: string) => phone.replace(/(\d{2})(?=\d)/g, '$1 ');
+
 const buildLanguageBlock = (
   language: Language,
   { name, role, phone, office }: SignatureData,
@@ -52,7 +55,7 @@ const buildLanguageBlock = (
   <p style="${line}${gap}">${escapeHtml(language.greeting)}</p>
   <p style="${line}"><strong>${escapeHtml(or(name, 'Navn Navnesen'))}</strong></p>
   <p style="${line}${gap}"><em style="font-style:italic;">${escapeHtml(or(role, 'stilling'))}</em></p>
-  <p style="${line}${gap}">${escapeHtml(language.phoneLabel)}: ${escapeHtml(or(phone, 'XXX XX XXX'))}</p>
+  <p style="${line}${gap}">${escapeHtml(language.phoneLabel)}: ${escapeHtml(or(formatPhone(phone), 'XXX XX XXX'))}</p>
   <p style="${line}${gap}">${escapeHtml(office.address)}</p>
 </div>`;
 
@@ -81,7 +84,7 @@ export const buildSignatureText = (input: SignatureData): string =>
         or(input.name, 'Navn Navnesen'),
         or(input.role, 'stilling'),
         '',
-        `${language.phoneLabel}: ${or(input.phone, 'XXX XX XXX')}`,
+        `${language.phoneLabel}: ${or(formatPhone(input.phone), 'XXX XX XXX')}`,
         '',
         input.office.address,
       ].join('\n'),
diff --git a/apps/www/app/content/digdir/kom-i-gang.mdx b/apps/www/app/content/digdir/kom-i-gang.mdx
deleted file mode 100644
index 0e89a64..0000000
--- a/apps/www/app/content/digdir/kom-i-gang.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Kom i gang
-sidebar_title: Kom i gang
-description: Slik tar du i bruk Digdir-profilen i prosjektet ditt.
-category: Introduksjon
-order: 1
-published: true
----
-
-Velkommen til dokumentasjonen for **Digdir**-profilen. Denne siden er skrevet i
-MDX og rendres gjennom det samme systemet som designsystemet.no.
-
-## Installasjon
-
-Installer pakkene du trenger:
-
-```bash
-pnpm add @digdir/designsystemet-react @digdir/designsystemet-css
-```
-
-## Bruk en komponent
-
-Importer og bruk komponenter slik:
-
-```tsx
-import { Button } from '@digdir/designsystemet-react';
-
-export function Example() {
-  return <Button>Trykk her</Button>;
-}
-```
-
-<Alert data-color='info'>
-  Tips: alle sider får automatisk en innholdsfortegnelse basert på
-  overskriftene dine.
-</Alert>
-
-## Neste steg
-
-Se [fargene](/digdir/colors) og [komponentene](/digdir/components) for mer
-informasjon.
diff --git a/apps/www/app/content/digdir/komponenter.mdx b/apps/www/app/content/digdir/komponenter.mdx
deleted file mode 100644
index 561f83f..0000000
--- a/apps/www/app/content/digdir/komponenter.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Komponenter
-sidebar_title: Komponenter
-description: Oversikt over komponenter i Digdir-profilen.
-category: Styling
-order: 2
-published: true
----
-
-Komponentene kommer fra `@digdir/designsystemet-react` og styles av profilens
-tema.
-
-## Varsler
-
-Bruk `Alert` for å fremheve viktig informasjon:
-
-<Alert data-color='warning'>
-  Husk å teste komponentene med tastatur og skjermleser.
-</Alert>
-
-## Merkelapper
-
-Du kan bruke `Badge` for å vise status eller antall.
-
-## Mer
-
-Dette er kun eksempelinnhold – legg til dine egne MDX-filer under
-`app/content/digdir/` for å utvide dokumentasjonen.

From 4383e4c2298b7d551814004b6c1b885738eff187 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 26 Aug 2026 10:42:33 +0200
Subject: [PATCH 3/4] clean code

---
 .../email-signatur-generator.module.css       | 12 ----------
 .../email-signatur-generator.tsx              | 22 +------------------
 .../signature-config.ts                       |  7 ------
 .../signature-template.ts                     |  4 ++--
 4 files changed, 3 insertions(+), 42 deletions(-)

diff --git a/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css b/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css
index 10cad69..3368fb3 100644
--- a/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css
+++ b/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css
@@ -26,12 +26,6 @@
   border-radius: var(--ds-border-radius-lg);
   background-color: var(--ds-color-neutral-background-tinted);
 
-  /*
-   * Keep the preview – and the copy button with it – in view while the form is
-   * filled in. Picking all three languages makes the signature taller than the
-   * viewport, so the card is capped and the signature itself scrolls; without
-   * the cap the button would sit below the fold exactly when it is needed.
-   */
   @media (min-width: 901px) {
     position: sticky;
     top: calc(var(--header-height) + var(--ds-size-4));
@@ -39,17 +33,11 @@
   }
 }
 
-/*
- * The signature carries its own inline styling, so it must render on a white
- * ground in both colour schemes – it is a picture of the finished e-mail, not
- * part of the surrounding page.
- */
 .signature {
   padding: var(--ds-size-5);
   background-color: #fff;
   border-radius: var(--ds-border-radius-md);
   overflow: auto;
-  /* Let the flex item shrink below its content height so the cap above bites. */
   min-height: 0;
 }
 
diff --git a/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx b/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx
index 3c39c32..5fdf6d7 100644
--- a/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx
+++ b/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx
@@ -28,11 +28,6 @@ import {
 
 type CopyState = 'idle' | 'copied' | 'error';
 
-/**
- * Copy both flavours in one go, so the receiving client can pick the rich one
- * and fall back to plain text. `ClipboardItem` is the only API that carries
- * `text/html`; older browsers get the `execCommand` route below.
- */
 const copySignature = async (html: string, text: string) => {
   if (typeof ClipboardItem !== 'undefined' && navigator.clipboard?.write) {
     try {
@@ -43,15 +38,9 @@ const copySignature = async (html: string, text: string) => {
         }),
       ]);
       return;
-    } catch {
-      // Having the API is no guarantee of being allowed to use it – Firefox and
-      // managed-browser policies both refuse `clipboard-write` for pages they
-      // are happy to run. Fall through rather than give up.
-    }
+    } catch {}
   }
 
-  // Fallback: select a detached copy of the markup and let the browser convert
-  // the selection to rich text itself.
   const holder = document.createElement('div');
   holder.setAttribute('contenteditable', 'true');
   holder.innerHTML = html;
@@ -103,8 +92,6 @@ export const EmailSignatureGenerator = () => {
     [name, role, phone, office, selectedLanguages],
   );
 
-  // Root-relative for the preview; the copy swaps in an absolute URL, which is
-  // the only kind a mail client can resolve.
   const previewHtml = useMemo(
     () => buildSignatureHtml({ ...input, logoSrc: LOGO_PATH }),
     [input],
@@ -132,19 +119,12 @@ export const EmailSignatureGenerator = () => {
     }
   };
 
-  // Let the "Kopiert!" confirmation fade back to the default label.
   useEffect(() => {
     if (copyState !== 'copied') return;
     const timer = window.setTimeout(() => setCopyState('idle'), 2500);
     return () => window.clearTimeout(timer);
   }, [copyState]);
 
-  // Render nothing until mounted. `ds-field` / `ds-fieldset` hand out ids from a
-  // module-level counter on the server but from `window.dsUseId` in the browser
-  // (see @digdir/designsystemet-web `useId`), so the two can never agree and
-  // every SSR-ed Field logs a hydration mismatch. Nothing is lost by skipping
-  // the server pass: this is a clipboard tool, and the prerendered markup would
-  // only ever be an empty form.
   if (!mounted) {
     return <div className={classes.container} aria-hidden='true' />;
   }
diff --git a/apps/www/app/_components/email-signature-generator/signature-config.ts b/apps/www/app/_components/email-signature-generator/signature-config.ts
index 2f4894e..e0f55c5 100644
--- a/apps/www/app/_components/email-signature-generator/signature-config.ts
+++ b/apps/www/app/_components/email-signature-generator/signature-config.ts
@@ -1,10 +1,3 @@
-/**
- * Data that drives the e-mail signature generator.
- *
- * Everything a signature can say lives here – the component only reads from
- * these lists, so adding an office or a language is a one-object change.
- */
-
 export type LanguageCode = 'nb' | 'nn' | 'en';
 export type OfficeId = 'leikanger' | 'oslo' | 'bronnoysund';
 
diff --git a/apps/www/app/_components/email-signature-generator/signature-template.ts b/apps/www/app/_components/email-signature-generator/signature-template.ts
index 9e2cab0..4716748 100644
--- a/apps/www/app/_components/email-signature-generator/signature-template.ts
+++ b/apps/www/app/_components/email-signature-generator/signature-template.ts
@@ -55,7 +55,7 @@ const buildLanguageBlock = (
   <p style="${line}${gap}">${escapeHtml(language.greeting)}</p>
   <p style="${line}"><strong>${escapeHtml(or(name, 'Navn Navnesen'))}</strong></p>
   <p style="${line}${gap}"><em style="font-style:italic;">${escapeHtml(or(role, 'stilling'))}</em></p>
-  <p style="${line}${gap}">${escapeHtml(language.phoneLabel)}: ${escapeHtml(or(formatPhone(phone), 'XXX XX XXX'))}</p>
+  <p style="${line}${gap}">${escapeHtml(language.phoneLabel)}: ${escapeHtml(or(formatPhone(phone), 'XX XX XX XX'))}</p>
   <p style="${line}${gap}">${escapeHtml(office.address)}</p>
 </div>`;
 
@@ -84,7 +84,7 @@ export const buildSignatureText = (input: SignatureData): string =>
         or(input.name, 'Navn Navnesen'),
         or(input.role, 'stilling'),
         '',
-        `${language.phoneLabel}: ${or(formatPhone(input.phone), 'XXX XX XXX')}`,
+        `${language.phoneLabel}: ${or(formatPhone(input.phone), 'XX XX XX XX')}`,
         '',
         input.office.address,
       ].join('\n'),

From 6fdb5c29906e5446007d268cc74d473a85294aa9 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 26 Aug 2026 10:45:18 +0200
Subject: [PATCH 4/4] make full widt

---
 .../email-signatur-generator.module.css                       | 4 ++--
 .../email-signature-generator/email-signatur-generator.tsx    | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css b/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css
index 3368fb3..d742370 100644
--- a/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css
+++ b/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css
@@ -1,9 +1,9 @@
 .container {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
   gap: var(--ds-size-8);
   align-items: start;
-  max-width: var(--long-content-width);
+  max-width: 100%;
   margin-block: var(--ds-size-8);
 
   @media (max-width: 900px) {
diff --git a/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx b/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx
index 5fdf6d7..773d383 100644
--- a/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx
+++ b/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx
@@ -143,7 +143,6 @@ export const EmailSignatureGenerator = () => {
         />
         <Textfield
           label='Rolle'
-          description='Stillingstittelen din, slik den står i personalsystemet.'
           value={role}
           autoComplete='organization-title'
           onChange={(event) => setRole(event.target.value)}