Version Packages (#2057 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
⚡ Lazy-loading date-fns: sparer ~10kB first-load (#2058 )
2026-10-15 18:22:02 +00:00 · 2023-06-19 13:02:23 +02:00 · 2023-06-19 12:53:28 +02:00 · 2023-06-19 12:53:08 +02:00 · 2023-06-19 11:48:53 +02:00 · 2023-06-17 10:25:45 +02:00
53 changed files with 958 additions and 944 deletions
@@ -1,5 +1,9 @@
 # @navikt/aksel-icons

+## 4.1.7
+
+## 4.1.6
+
 ## 4.1.5

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "4.1.5",
+  "version": "4.1.7",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint

+## 4.1.7
+
+## 4.1.6
+
 ## 4.1.5

 ## 4.1.4
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "4.1.5",
+  "version": "4.1.7",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^4.1.5",
-    "@navikt/ds-tokens": "^4.1.5",
+    "@navikt/ds-css": "^4.1.7",
+    "@navikt/ds-tokens": "^4.1.7",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,5 +1,19 @@
 # @navikt/aksel

+## 4.1.7
+
+### Patch Changes
+
+- Updated dependencies [[`42b5af64a`](https://github.com/navikt/aksel/commit/42b5af64ab35d0f2d126d41f8fc3e61fe2834b36)]:
+  - @navikt/ds-css@4.1.7
+
+## 4.1.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@4.1.6
+
 ## 4.1.5

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "4.1.5",
+  "version": "4.1.7",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "4.1.5",
+    "@navikt/ds-css": "4.1.7",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,13 @@
 # @navikt/ds-css

+## 4.1.7
+
+### Patch Changes
+
+- [`42b5af64a`](https://github.com/navikt/aksel/commit/42b5af64ab35d0f2d126d41f8fc3e61fe2834b36) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset jsdom-problemer ved rendring av Timeline
+
+## 4.1.6
+
 ## 4.1.5

 ## 4.1.4
@@ -33,7 +33,7 @@

 .navds-help-text__popover.navds-popover {
  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
-  max-width: 65ch;
+  max-width: min(65ch, 90vw);

  --ac-popover-border: var(--a-border-info);
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "4.1.5",
+  "version": "4.1.7",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^4.1.5",
+    "@navikt/ds-tokens": "^4.1.7",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -61,6 +61,10 @@
  list-style-type: none;
 }

+.navds-timeline__row-periods:focus {
+  outline: none;
+}
+
 .navds-timeline__period {
  height: 100%;
  border-radius: var(--a-border-radius-full);
@@ -1,5 +1,25 @@
 # @navikt/ds-react

+## 4.1.7
+
+### Patch Changes
+
+- [`42b5af64a`](https://github.com/navikt/aksel/commit/42b5af64ab35d0f2d126d41f8fc3e61fe2834b36) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset jsdom-problemer ved rendring av Timeline
+
+- [#2056](https://github.com/navikt/aksel/pull/2056) [`dfbbe92a6`](https://github.com/navikt/aksel/commit/dfbbe92a63210278d9dd4d154c01f116ad921fc1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - La til `wrapperClassname`-prop for HelpText
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.1.7
+
+## 4.1.6
+
+### Patch Changes
+
+- [`9a8bb26c3`](https://github.com/navikt/aksel/commit/9a8bb26c36cfbb1a95cf28a043d2df3dbfe7185d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Timeline-period brakk ved bruk av jsdom-tester
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.1.6
+
 ## 4.1.5

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "4.1.5",
+  "version": "4.1.7",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,7 +38,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.1.5",
+    "@navikt/aksel-icons": "^4.1.7",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -29,6 +29,10 @@ export interface HelpTextProps
    | "right-end"
    | "left-start"
    | "left-end";
+  /**
+   * Classname for wrapper
+   */
+  wrapperClassName?: string;
 }

 /**
@@ -53,6 +57,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
      strategy = "absolute",
      title = "hjelp",
      onClick,
+      wrapperClassName,
      ...rest
    },
    ref
@@ -62,7 +67,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
    const [open, setOpen] = useState(false);

    return (
-      <div className="navds-help-text">
+      <div className={cl("navds-help-text", wrapperClassName)}>
        <button
          {...rest}
          ref={mergedRef}
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { HelpText } from "..";
+import { BodyLong, Heading, HelpText } from "..";

 export default {
  title: "ds-react/HelpText",
@@ -65,3 +65,36 @@ export const Open = () => {
    </HelpText>
  );
 };
+
+export const WrapperClassName = {
+  render: () => {
+    return (
+      <div>
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
+          ab quam ea quas?
+        </BodyLong>
+
+        <Heading level="2" size="medium">
+          67 år og 1 måneder øklasdjkl askdak døkasøk daøkdkølasøkld asølkdøka
+          <HelpText wrapperClassName="testClass">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+            perspiciatis vero voluptatum, asperiores cumque, deserunt
+            accusantium ullam ipsa accusamus officia cupiditate quae unde esse
+            culpa, ratione ab quam ea quas?
+          </HelpText>
+          <style>{`.testClass {display: inline-block; margin-left: 0.5rem; vertical-align: middle;}`}</style>
+        </Heading>
+
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
+          ab quam ea quas?
+        </BodyLong>
+      </div>
+    );
+  },
+};
@@ -11,15 +11,9 @@ import {
  useHover,
  useInteractions,
 } from "@floating-ui/react";
-import { useEventListener, mergeRefs } from "../util";
 import { format } from "date-fns";
-import React, {
-  forwardRef,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
+import { mergeRefs } from "../util";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { position } from "./utils/calc";
 import { TimelineComponentTypes } from "./utils/types.internal";
@@ -83,22 +77,6 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
      [ref, refs.setReference]
    );

-    useEventListener(
-      "focusin",
-      useCallback(
-        (e: FocusEvent) => {
-          if (
-            ![refs.domReference.current, refs?.floating?.current].some(
-              (element) => element?.contains(e.target as Node)
-            )
-          ) {
-            open && setOpen(false);
-          }
-        },
-        [open, refs.domReference, refs?.floating]
-      )
-    );
-
    const staticSide = {
      top: "bottom",
      right: "left",
@@ -139,6 +117,10 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
            ref={refs.setFloating}
            {...getFloatingProps({
              tabIndex: -1,
+              onBlur: (e) =>
+                e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
            })}
            style={{
              ...floatingStyles,
@@ -72,6 +72,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
        >
          <ol
            {...rest}
+            tabIndex={-1}
            ref={ref}
            aria-label={
              periods.length === 0
@@ -11,9 +11,9 @@ import {
  useHover,
  useInteractions,
 } from "@floating-ui/react";
-import { useEventListener, mergeRefs } from "../../util";
 import cl from "clsx";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
+import { mergeRefs } from "../../util";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -85,22 +85,6 @@ const ClickablePeriod = React.memo(
      [periodRef, refs.setReference]
    );

-    useEventListener(
-      "focusin",
-      useCallback(
-        (e: FocusEvent) => {
-          if (
-            ![refs.domReference.current, refs?.floating?.current].some(
-              (element) => element?.contains(e.target as Node)
-            )
-          ) {
-            open && setOpen(false);
-          }
-        },
-        [open, refs.domReference, refs?.floating]
-      )
-    );
-
    const staticSide = {
      top: "bottom",
      right: "left",
@@ -165,6 +149,10 @@ const ClickablePeriod = React.memo(
            ref={refs.setFloating}
            {...getFloatingProps({
              tabIndex: -1,
+              onBlur: (e) =>
+                e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
            })}
            style={{
              ...floatingStyles,
@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind

+## 4.1.7
+
+## 4.1.6
+
 ## 4.1.5

 ## 4.1.4
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "4.1.5",
+  "version": "4.1.7",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,7 +22,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^4.1.5",
+    "@navikt/ds-tokens": "^4.1.7",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,9 @@
 # @navikt/ds-tokens

+## 4.1.7
+
+## 4.1.6
+
 ## 4.1.5

 ## 4.1.4
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "4.1.5",
+  "version": "4.1.7",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,21 +1,12 @@
-FROM node:18.1-alpine3.14
-RUN apk add --no-cache libc6-compat
+FROM gcr.io/distroless/nodejs:18 as runtime

 ENV NODE_ENV production

 WORKDIR /app
 COPY aksel.nav.no/website/.next/standalone ./
 COPY aksel.nav.no/website/next-logger.config.js ./
-# COPY aksel.nav.no/website/package.json .
-# COPY aksel.nav.no/website/.next/ .next/
-# COPY aksel.nav.no/website/public/ public
-# COPY aksel.nav.no/website/.env .
-# COPY aksel.nav.no/website/next.config.js .
-# COPY node_modules/ node_modules/
-# COPY @navikt/ @navikt/
-# CMD yarn start

 ENV NODE_OPTIONS '-r next-logger'

 EXPOSE 3000
-CMD ["node", "aksel.nav.no/website/server.js"]
+CMD ["aksel.nav.no/website/server.js"]
@@ -35,3 +35,7 @@ spec:
        - host: cdn.sanity.io
      rules: []
      env:
+  filesFrom:
+    - emptyDir:
+        medium: Memory
+      mountPath: /app/aksel.nav.no/website/.next/cache
@@ -46,3 +46,7 @@ spec:
          age: 7
          numNewerVersions: 3
          withState: ANY
+  filesFrom:
+    - emptyDir:
+        medium: Memory
+      mountPath: /app/aksel.nav.no/website/.next/cache
@@ -15,11 +15,11 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^4.1.5",
-    "@navikt/ds-css": "^4.1.5",
-    "@navikt/ds-react": "^4.1.5",
-    "@navikt/ds-tailwind": "^4.1.5",
-    "@navikt/ds-tokens": "^4.1.5"
+    "@navikt/aksel-icons": "^4.1.7",
+    "@navikt/ds-css": "^4.1.7",
+    "@navikt/ds-react": "^4.1.7",
+    "@navikt/ds-tailwind": "^4.1.7",
+    "@navikt/ds-tokens": "^4.1.7"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -75,7 +75,7 @@ export const WithSidebar = ({
    <>
      <Header />
      <div className="bg-bg-default">
-        <div className="mx-auto mt-6 mb-24 flex w-full max-w-screen-2xl gap-6">
+        <div className="mx-auto mb-24 mt-6 flex w-full max-w-screen-2xl gap-6">
          <Sidebar kategori={pageType.type} links={sidebar} />
          <div className="relative w-full">
            <main
@@ -83,76 +83,80 @@ export const WithSidebar = ({
              id="hovedinnhold"
              className="min-h-screen-header md:max-w-screen-sidebar relative w-full px-4 focus:outline-none sm:pl-6 sm:pr-6 md:pl-0"
            >
-              <div
-                className={cl(
-                  "relative mb-10 min-h-[12.5rem] overflow-hidden rounded-xl pl-6 pr-4 md:pl-10 lg:pr-10",
-                  {
-                    "bg-surface-subtle flex items-center justify-between":
-                      variant === "page",
-                    "bg-deepblue-700 grid py-[4.25rem] pb-6":
-                      variant !== "page",
-                  }
-                )}
-              >
-                <div className="z-[1]">
-                  {variant === "page" && pageProps?.kategori && (
-                    <Detail as="div" className="mb-2">
-                      <NextLink
-                        href={`/${pageType.type.toLowerCase()}`}
-                        passHref
-                        legacyBehavior
-                      >
-                        <Link className="text-text-default">
-                          {capitalize(pageType.type)}
-                        </Link>
-                      </NextLink>{" "}
-                      / {capitalize(pageProps.kategori)}
-                    </Detail>
-                  )}
-
-                  <Heading
-                    level="1"
-                    size="xlarge"
-                    className={cl({
-                      "text-deepblue-800": variant === "page",
-                      "text-text-on-action bg-deepblue-700/80 w-fit":
+              <div className="from-deepblue-700 rounded-xl bg-gradient-to-br via-blue-500 to-violet-700">
+                <div
+                  className={cl(
+                    "relative mb-10 min-h-[12.5rem] overflow-hidden rounded-xl pl-6 pr-4 md:pl-10 lg:pr-10",
+                    {
+                      "bg-surface-subtle flex items-center justify-between":
+                        variant === "page",
+                      "bg-deepblue-700/80 grid py-[4.25rem] pb-6":
                        variant !== "page",
-                    })}
-                  >
-                    {pageType.title}
-                  </Heading>
-                  <div
-                    className={cl({
-                      "bg-deepblue-700/80 w-fit": variant !== "page",
-                    })}
-                  >
-                    {intro && intro}
-                  </div>
-                </div>
-                {variant === "page" && pageProps.status?.bilde && (
-                  <div
-                    className={cl(
-                      "relative hidden aspect-square h-[12.5rem] lg:block xl:mr-40",
-                      {
-                        "hue-rotate-[65deg]": pageProps?.status?.tag === "beta",
-                      }
+                    }
+                  )}
+                >
+                  <div className="z-[1]">
+                    {variant === "page" && pageProps?.kategori && (
+                      <Detail as="div" className="mb-2">
+                        <NextLink
+                          href={`/${pageType.type.toLowerCase()}`}
+                          passHref
+                          legacyBehavior
+                        >
+                          <Link className="text-text-default">
+                            {capitalize(pageType.type)}
+                          </Link>
+                        </NextLink>{" "}
+                        / {capitalize(pageProps.kategori)}
+                      </Detail>
                    )}
-                  >
-                    <Image
-                      src={urlFor(pageProps.status?.bilde).auto("format").url()}
-                      decoding="async"
-                      layout="fill"
-                      objectFit="contain"
-                      aria-hidden
-                      priority
-                    />
+
+                    <Heading
+                      level="1"
+                      size="xlarge"
+                      className={cl({
+                        "text-deepblue-800": variant === "page",
+                        "text-text-on-action  w-fit": variant !== "page",
+                      })}
+                    >
+                      {pageType.title}
+                    </Heading>
+                    <div
+                      className={cl({
+                        " w-fit": variant !== "page",
+                      })}
+                    >
+                      {intro && intro}
+                    </div>
                  </div>
-                )}
-                {variant === "landingPage" && (
-                  <div className="pointer-events-none absolute top-0 right-0 hidden sm:block">
-                    <HeaderCube className="text-deepblue-300 z-0 max-h-full" />
-                  </div>
-                )}
+                  {variant === "page" && pageProps.status?.bilde && (
+                    <div
+                      className={cl(
+                        "relative hidden aspect-square h-[12.5rem] lg:block xl:mr-40",
+                        {
+                          "hue-rotate-[65deg]":
+                            pageProps?.status?.tag === "beta",
+                        }
+                      )}
+                    >
+                      <Image
+                        src={urlFor(pageProps.status?.bilde)
+                          .auto("format")
+                          .url()}
+                        decoding="async"
+                        layout="fill"
+                        objectFit="contain"
+                        aria-hidden
+                        priority
+                      />
+                    </div>
+                  )}
+                  {variant === "landingPage" && (
+                    <div className="pointer-events-none absolute right-0 top-0 hidden sm:block">
+                      <HeaderCube className="text-deepblue-300 z-[-1] max-h-full" />
+                    </div>
+                  )}
+                </div>
              </div>
              <div className={cl("sm:px-6 md:px-10", { flex: withToc })}>
                {withToc && (
@@ -74,7 +74,7 @@ const Element = ({ block }: { block: DoDontT["blokker"][number] }) => {
        )}
        aria-hidden
      >
-        <span className="absolute left-[10px] z-10 translate-y-2">
+        <span className="absolute right-[10px] z-10 translate-y-2">
          {GetIcon(block.variant)}
        </span>
      </div>
@@ -1,14 +1,15 @@
 import { withErrorBoundary } from "@/error-boundary";

 import {
-  ResolveContributorsSingleT,
-  ResolveTemaT,
-  ResolveSlugT,
  AkselGodPraksisDocT,
+  ResolveContributorsSingleT,
+  ResolveSlugT,
+  ResolveTemaT,
 } from "@/types";
 import { BodyShort, Detail, Heading } from "@navikt/ds-react";
+import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextLink from "next/link";
-import { abbrName, dateStr, logNav } from "../..";
+import { abbrName, logNav } from "../..";

 const ArtikkelCard = ({
  slug,
@@ -25,11 +26,9 @@ const ArtikkelCard = ({
 }: ResolveContributorsSingleT<
  ResolveTemaT<ResolveSlugT<AkselGodPraksisDocT>>
 > & { source: string; variant: string; level?: "2" | "3" }) => {
-  const date = (rest as any)?.updateInfo?.lastVerified
-    ? (rest as any)?.updateInfo?.lastVerified
-    : publishedAt
-    ? publishedAt
-    : _updatedAt;
+  const date = useFormatedDate(
+    (rest as any)?.updateInfo?.lastVerified ?? publishedAt ?? _updatedAt
+  );

  return (
    <div className="hover:shadow-small focus-within:ring-border-focus bg-surface-default ring-border-subtle group relative rounded-lg p-3 pb-16 ring-1 focus-within:ring-[3px] sm:p-5 sm:pb-16">
@@ -70,7 +69,7 @@ const ArtikkelCard = ({
            </Detail>
          )}
          <Detail as="span" className="text-text-subtle">
-            {dateStr(date)}
+            {date}
          </Detail>
        </span>
      ) : (
@@ -1,15 +1,16 @@
 import { withErrorBoundary } from "@/error-boundary";
 import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
-import { getAuthors } from "components/website-modules/LatestBloggs";
+import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextLink from "next/link";
-import { dateStr, logNav } from "../..";
+import { getAuthors, logNav } from "@/utils";

 const BloggCard = ({
  blog,
 }: {
  blog: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>;
 }) => {
+  const date = useFormatedDate(blog?.publishedAt ?? blog._createdAt);
  return (
    <li
      key={blog._id}
@@ -38,7 +39,7 @@ const BloggCard = ({
          className="text-text-subtle mt-auto flex gap-2 justify-self-end"
        >
          <span className="font-semibold">{getAuthors(blog)[0]}</span>
-          <span>{dateStr(blog?.publishedAt ?? blog._createdAt)}</span>
+          <span>{date}</span>
        </BodyShort>
      )}
    </li>
@@ -1,13 +1,14 @@
-import { abbrName, dateStr } from "@/utils";
-import { BodyShort, Detail, Heading } from "@navikt/ds-react";
-import { logNav } from "components/website-modules/utils/amplitude";
-import NextLink from "next/link";
-import NextImage from "next/legacy/image";
-import { Tag } from "./Tag";
-import cl from "clsx";
-import { getImage } from "components/website-modules/utils/get-image";
-import { urlFor } from "@/sanity/interface";
 import { withErrorBoundary } from "@/error-boundary";
+import { urlFor } from "@/sanity/interface";
+import { abbrName } from "@/utils";
+import { BodyShort, Detail, Heading } from "@navikt/ds-react";
+import cl from "clsx";
+import { logNav } from "components/website-modules/utils/amplitude";
+import { getImage } from "components/website-modules/utils/get-image";
+import { useFormatedDate } from "components/website-modules/utils/getDate";
+import NextImage from "next/legacy/image";
+import NextLink from "next/link";
+import { Tag } from "./Tag";

 export type ArticleT = {
  _key: string;
@@ -37,7 +38,7 @@ const Card = ({
  visible: boolean;
  index: number;
 }) => {
-  const date = article.publishedAt ? article.publishedAt : article._updatedAt;
+  const date = useFormatedDate(article.publishedAt ?? article._updatedAt);

  const showFooter = ["aksel_artikkel", "aksel_blogg"].includes(article._type);
  const showImage = [
@@ -142,7 +143,7 @@ const Card = ({
                {abbrName(article?.contributors[0]?.title)}
              </Detail>
            )}
-            <Detail as="span">{dateStr(date)}</Detail>
+            <Detail as="span">{date}</Detail>
          </span>
        )}
      </div>
@@ -0,0 +1,111 @@
+import { urlFor } from "@/sanity/interface";
+import { getAuthors, logNav } from "@/utils";
+import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
+import cl from "clsx";
+import { getImage } from "components/website-modules/utils/get-image";
+import { useFormatedDate } from "components/website-modules/utils/getDate";
+import Image from "next/legacy/image";
+import NextLink from "next/link";
+import { ArticleT } from "./Card";
+import { Tag } from "./Tag";
+
+export const Highlight = ({
+  article,
+  compact,
+}: {
+  article: ArticleT;
+  compact: boolean;
+}) => {
+  const showFooter = ["aksel_artikkel", "aksel_blogg"].includes(article._type);
+  const useStatusImage =
+    ["ds_artikkel", "komponent_artikkel"].includes(article._type) &&
+    article.status?.bilde;
+
+  const date = useFormatedDate(article?.publishedAt ?? article._createdAt);
+
+  return (
+    <section
+      aria-label={`Fremhevet artikkel: ${article?.heading}`}
+      className={cl({
+        "grid content-start gap-8 md:grid-cols-2": compact,
+        "grid content-start gap-6": !compact,
+      })}
+    >
+      <div className="relative block aspect-video">
+        {useStatusImage ? (
+          <Image
+            src={urlFor(article.status.bilde).quality(100).auto("format").url()}
+            quality={100}
+            layout="fill"
+            aria-hidden
+            priority
+            className={cl(
+              "bg-deepblue-200 rounded-lg object-cover sm:object-contain",
+              {
+                "hue-rotate-[65deg]": article?.status?.tag === "beta",
+              }
+            )}
+            decoding="sync"
+          />
+        ) : article?.seo?.image ? (
+          <Image
+            src={urlFor(article.seo.image).quality(100).auto("format").url()}
+            quality={100}
+            layout="fill"
+            objectFit="cover"
+            aria-hidden
+            priority
+            className={cl("rounded-lg", {
+              "hue-rotate-[65deg]": article?.status?.tag === "beta",
+            })}
+            decoding="sync"
+          />
+        ) : (
+          <Image
+            src={getImage(article?.heading ?? "", "thumbnail")}
+            layout="fill"
+            objectFit="contain"
+            aria-hidden
+            priority
+            className="rounded-lg"
+            decoding="sync"
+          />
+        )}
+      </div>
+      <div>
+        <Tag
+          type={article._type}
+          text={article.tema ? article.tema[0] : undefined}
+          beta={article?.status?.tag === "beta"}
+        />
+        <NextLink href={`/${article.slug.current}`} passHref legacyBehavior>
+          <Link
+            onClick={(e) =>
+              logNav(
+                "artikkel-kort",
+                window.location.pathname,
+                e.currentTarget.getAttribute("href")
+              )
+            }
+            className="text-text-default mb-5 mt-2 no-underline hover:underline"
+          >
+            <Heading size="large" level="3">
+              {article?.heading}
+            </Heading>
+          </Link>
+        </NextLink>
+        <BodyLong className="mb-4" size="small">
+          {article?.ingress ?? article.seo?.meta}
+        </BodyLong>
+        {showFooter && getAuthors(article as any).length > 0 && (
+          <BodyShort size="small" className="text-text-subtle flex gap-2">
+            <span className="font-semibold">
+              {getAuthors(article as any)[0]}
+            </span>
+            <span>{date}</span>
+          </BodyShort>
+        )}
+      </div>
+    </section>
+  );
+};
@@ -1,16 +1,10 @@
-import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
-import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
 import { withErrorBoundary } from "@/error-boundary";
-import Image from "next/legacy/image";
-import NextLink from "next/link";
-import { getImage } from "components/website-modules/utils/get-image";
-import { getAuthors } from "components/website-modules/LatestBloggs";
-import { dateStr, logNav } from "@/utils";
-import { Tag } from "./Tag";
-import Card, { ArticleT } from "./Card";
+import { Heading } from "@navikt/ds-react";
 import cl from "clsx";
-import { urlFor } from "@/sanity/interface";
 import { useEffect, useRef, useState } from "react";
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
+import Card, { ArticleT } from "./Card";
+import { Highlight } from "./Highlight";

 export type LatestT = {
  _type: "nytt_fra_aksel";
@@ -29,9 +23,12 @@ const Latest = ({ block }: { block: LatestT }) => {
  const section = useRef(null);

  useEffect(() => {
-    const observer = new IntersectionObserver(([entry]) => {
-      entry.isIntersecting && setIntersected(entry.isIntersecting);
-    });
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        entry.isIntersecting && setIntersected(entry.isIntersecting);
+      },
+      { rootMargin: "0px 0px 100px 0px" }
+    );
    observer.observe(section.current);
    return () => observer.disconnect();
  }, []);
@@ -74,99 +71,9 @@ function Highlights({ highlights }: { highlights: ArticleT[] }) {
    <div
      className={cl({ "grid gap-8 md:grid-cols-2": highlights?.length === 2 })}
    >
-      {highlights.map((x, idx) => {
-        const showFooter = ["aksel_artikkel", "aksel_blogg"].includes(x._type);
-        const useStatusImage =
-          ["ds_artikkel", "komponent_artikkel"].includes(x._type) &&
-          x.status?.bilde;
-        return (
-          <section
-            aria-label={`Fremhevet artikkel: ${x?.heading}`}
-            key={idx}
-            className={cl({
-              "grid content-start gap-8 md:grid-cols-2":
-                highlights?.length === 1,
-              "grid content-start gap-6": highlights?.length === 2,
-            })}
-          >
-            <div className="relative block aspect-video">
-              {useStatusImage ? (
-                <Image
-                  src={urlFor(x.status.bilde).quality(100).auto("format").url()}
-                  quality={100}
-                  layout="fill"
-                  aria-hidden
-                  priority
-                  className={cl(
-                    "bg-deepblue-200 rounded-lg object-cover sm:object-contain",
-                    {
-                      "hue-rotate-[65deg]": x?.status?.tag === "beta",
-                    }
-                  )}
-                  decoding="sync"
-                />
-              ) : x?.seo?.image ? (
-                <Image
-                  src={urlFor(x.seo.image).quality(100).auto("format").url()}
-                  quality={100}
-                  layout="fill"
-                  objectFit="cover"
-                  aria-hidden
-                  priority
-                  className={cl("rounded-lg", {
-                    "hue-rotate-[65deg]": x?.status?.tag === "beta",
-                  })}
-                  decoding="sync"
-                />
-              ) : (
-                <Image
-                  src={getImage(x?.heading ?? "", "thumbnail")}
-                  layout="fill"
-                  objectFit="contain"
-                  aria-hidden
-                  priority
-                  className="rounded-lg"
-                  decoding="sync"
-                />
-              )}
-            </div>
-            <div>
-              <Tag
-                type={x._type}
-                text={x.tema ? x.tema[0] : undefined}
-                beta={x?.status?.tag === "beta"}
-              />
-              <NextLink href={`/${x.slug.current}`} passHref legacyBehavior>
-                <Link
-                  onClick={(e) =>
-                    logNav(
-                      "artikkel-kort",
-                      window.location.pathname,
-                      e.currentTarget.getAttribute("href")
-                    )
-                  }
-                  className="text-text-default mb-5 mt-2 no-underline hover:underline"
-                >
-                  <Heading size="large" level="3">
-                    {x?.heading}
-                  </Heading>
-                </Link>
-              </NextLink>
-              <BodyLong className="mb-4" size="small">
-                {x?.ingress ?? x.seo?.meta}
-              </BodyLong>
-              {showFooter && getAuthors(x as any).length > 0 && (
-                <BodyShort size="small" className="text-text-subtle flex gap-2">
-                  <span className="font-semibold">
-                    {getAuthors(x as any)[0]}
-                  </span>
-                  <span>{dateStr(x?.publishedAt ?? x._createdAt)}</span>
-                </BodyShort>
-              )}
-            </div>
-          </section>
-        );
-      })}
+      {highlights.map((x, idx) => (
+        <Highlight article={x} key={idx} compact={highlights.length === 1} />
+      ))}
    </div>
  );
 }
@@ -1,7 +1,11 @@
 export const InlineCode = (props: React.HTMLAttributes<HTMLElement>) => (
  <code className="text-deepblue-800 font-mono text-sm font-semibold leading-normal before:contents">
-    <span aria-hidden>`</span>
+    <span aria-hidden className="inline-code-amp">
+      `
+    </span>
    <span>{props.children}</span>
-    <span aria-hidden>`</span>
+    <span aria-hidden className="inline-code-amp">
+      `
+    </span>
  </code>
 );
@@ -1,270 +0,0 @@
-import { SanityBlockContent } from "@/sanity-block";
-import { urlFor } from "@/sanity/interface";
-import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
-import { dateStr } from "@/utils";
-import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
-import { getImage } from "components/website-modules/utils/get-image";
-import Image from "next/legacy/image";
-import NextLink from "next/link";
-
-export const getAuthors = (
-  blog: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>
-) => (blog?.contributors as any)?.map((x) => x?.title) ?? [];
-
-export const LatestBloggposts = ({
-  bloggs,
-  title,
-  level = "1",
-  intro,
-}: {
-  bloggs: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>[];
-  title: string;
-  level?: "1" | "2";
-  intro?: any[];
-}) => {
-  if (!bloggs || bloggs.length < 3) {
-    return null;
-  }
-
-  return (
-    <div className="mt-20">
-      <Heading
-        level={level}
-        size="xlarge"
-        className="text-deepblue-700 mx-auto w-full text-5xl md:mx-0 md:max-w-none"
-      >
-        {title}
-      </Heading>
-      {intro && (
-        <SanityBlockContent
-          blocks={intro}
-          isIngress
-          noLastMargin
-          className="mt-4"
-        />
-      )}
-      {/* Desktop-view */}
-      <div className="my-12 hidden grid-cols-2 gap-12 md:grid">
-        <div className="col-span-1">
-          <div className="relative mb-10 block aspect-video">
-            {bloggs[0]?.seo?.image ? (
-              <Image
-                src={urlFor(bloggs[0].seo.image)
-                  .quality(100)
-                  .auto("format")
-                  .url()}
-                quality={100}
-                layout="fill"
-                objectFit="cover"
-                aria-hidden
-                priority
-                className="rounded-lg"
-                decoding="sync"
-              />
-            ) : (
-              <Image
-                src={getImage(bloggs[0]?.heading ?? "", "thumbnail")}
-                layout="fill"
-                objectFit="contain"
-                aria-hidden
-                priority
-                className="rounded-lg"
-                decoding="sync"
-              />
-            )}
-          </div>
-          <NextLink href={`/${bloggs[0].slug}`} passHref legacyBehavior>
-            <Link className="text-deepblue-500 no-underline hover:underline">
-              <Heading
-                size="large"
-                level={(Number(level) + 1).toString() as any}
-              >
-                {bloggs[0].heading}
-              </Heading>
-            </Link>
-          </NextLink>
-          <BodyLong className="mt-4" size="small">
-            {bloggs[0]?.ingress}
-          </BodyLong>
-          {getAuthors(bloggs[0]).length > 0 && (
-            <BodyShort
-              size="small"
-              className="text-text-subtle mt-4 flex gap-2"
-            >
-              <span className="font-semibold">{getAuthors(bloggs[0])[0]}</span>
-              <span>
-                {dateStr(bloggs[0]?.publishedAt ?? bloggs[0]._createdAt)}
-              </span>
-            </BodyShort>
-          )}
-        </div>
-        <div className="col-span-1 grid place-content-start gap-12">
-          {bloggs.slice(1, 3).map((blog) => (
-            <div key={blog._id} className="flex gap-6">
-              <div className="relative hidden aspect-square h-[11.75rem] lg:block">
-                {blog?.seo?.image ? (
-                  <Image
-                    src={urlFor(blog.seo.image).auto("format").url()}
-                    layout="fill"
-                    objectFit="cover"
-                    aria-hidden
-                    priority
-                    className="rounded-lg"
-                  />
-                ) : (
-                  <Image
-                    src={getImage(blog?.heading ?? "", "thumbnail")}
-                    layout="fill"
-                    objectFit="cover"
-                    aria-hidden
-                    priority
-                    className="rounded-lg"
-                  />
-                )}
-              </div>
-
-              <div>
-                <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
-                  <Link className="text-deepblue-500 no-underline hover:underline">
-                    <Heading
-                      size="small"
-                      level={(Number(level) + 1).toString() as any}
-                    >
-                      {blog.heading}
-                    </Heading>
-                  </Link>
-                </NextLink>
-                <BodyLong className="mt-4" size="small">
-                  {blog?.ingress}
-                </BodyLong>
-                {getAuthors(blog).length > 0 ? (
-                  <BodyShort
-                    size="small"
-                    className="text-text-subtle mt-4 flex gap-2"
-                  >
-                    <span className="font-semibold">{getAuthors(blog)[0]}</span>
-                    <span>{dateStr(blog?.publishedAt ?? blog._createdAt)}</span>
-                  </BodyShort>
-                ) : (
-                  <BodyShort size="small" className="text-text-subtle mt-4">
-                    <span>{dateStr(blog?.publishedAt ?? blog._createdAt)}</span>
-                  </BodyShort>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Mobile view */}
-      <div className="my-10 mx-auto grid gap-12 md:hidden">
-        <div className="w-full">
-          <div className="relative mb-10 block aspect-video">
-            {bloggs[0]?.seo?.image ? (
-              <Image
-                src={urlFor(bloggs[0].seo.image)
-                  .quality(100)
-                  .auto("format")
-                  .url()}
-                quality={100}
-                layout="fill"
-                objectFit="cover"
-                aria-hidden
-                priority
-                className="rounded-lg"
-              />
-            ) : (
-              <Image
-                src={getImage(bloggs[0]?.heading ?? "", "thumbnail")}
-                layout="fill"
-                objectFit="contain"
-                aria-hidden
-                priority
-                className="rounded-lg"
-              />
-            )}
-          </div>
-          <NextLink href={`/${bloggs[0].slug}`} passHref legacyBehavior>
-            <Link className="text-deepblue-500 no-underline hover:underline">
-              <Heading
-                size="large"
-                level={(Number(level) + 1).toString() as any}
-              >
-                {bloggs[0].heading}
-              </Heading>
-            </Link>
-          </NextLink>
-          <BodyLong className="mt-4" size="small">
-            {bloggs[0]?.ingress}
-          </BodyLong>
-          {getAuthors(bloggs[0]).length > 0 && (
-            <BodyShort
-              size="small"
-              className="text-text-subtle mt-4 flex gap-2"
-            >
-              <span className="font-semibold">{getAuthors(bloggs[0])[0]}</span>
-              <span>
-                {dateStr(bloggs[0]?.publishedAt ?? bloggs[0]._createdAt)}
-              </span>
-            </BodyShort>
-          )}
-        </div>
-        <div className="grid w-full gap-12">
-          {bloggs.slice(1, 3).map((blog) => (
-            <div key={blog._id}>
-              <div className="relative mb-6 block aspect-video">
-                {blog?.seo?.image ? (
-                  <Image
-                    src={urlFor(blog.seo.image).auto("format").url()}
-                    layout="fill"
-                    objectFit="cover"
-                    aria-hidden
-                    priority
-                    className="rounded-lg"
-                  />
-                ) : (
-                  <Image
-                    src={getImage(blog?.heading ?? "", "thumbnail")}
-                    layout="fill"
-                    objectFit="cover"
-                    aria-hidden
-                    priority
-                    className="rounded-lg"
-                  />
-                )}
-              </div>
-              <div>
-                <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
-                  <Link className="text-deepblue-500 no-underline hover:underline">
-                    <Heading
-                      size="small"
-                      level={(Number(level) + 1).toString() as any}
-                    >
-                      {blog.heading}
-                    </Heading>
-                  </Link>
-                </NextLink>
-                <BodyLong className="mt-4" size="small">
-                  {blog?.ingress}
-                </BodyLong>
-                {getAuthors(blog).length > 0 ? (
-                  <BodyShort
-                    size="small"
-                    className="text-text-subtle mt-4 flex gap-2"
-                  >
-                    <span className="font-semibold">{getAuthors(blog)[0]}</span>
-                    <span>{dateStr(blog?.publishedAt ?? blog._createdAt)}</span>
-                  </BodyShort>
-                ) : (
-                  <BodyShort size="small" className="text-text-subtle mt-4">
-                    <span>{dateStr(blog?.publishedAt ?? blog._createdAt)}</span>
-                  </BodyShort>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
@@ -0,0 +1,117 @@
+import { urlFor } from "@/sanity/interface";
+import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
+import { getAuthors } from "@/utils";
+import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
+import { getImage } from "components/website-modules/utils/get-image";
+import { useFormatedDate } from "components/website-modules/utils/getDate";
+import Image from "next/legacy/image";
+import NextLink from "next/link";
+
+export const BloggList = ({
+  blogg,
+}: {
+  blogg: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>;
+}) => {
+  const date = useFormatedDate(blogg?.publishedAt ?? blogg._createdAt);
+  return (
+    <div>
+      <div className="hidden gap-6 md:flex">
+        <div className="relative hidden aspect-square h-[11.75rem] lg:block">
+          {blogg?.seo?.image ? (
+            <Image
+              src={urlFor(blogg.seo.image).auto("format").url()}
+              layout="fill"
+              objectFit="cover"
+              aria-hidden
+              priority
+              className="rounded-lg"
+            />
+          ) : (
+            <Image
+              src={getImage(blogg?.heading ?? "", "thumbnail")}
+              layout="fill"
+              objectFit="cover"
+              aria-hidden
+              priority
+              className="rounded-lg"
+            />
+          )}
+        </div>
+
+        <div>
+          <NextLink href={`/${blogg.slug}`} passHref legacyBehavior>
+            <Link className="text-deepblue-500 no-underline hover:underline">
+              <Heading size="small" level="2">
+                {blogg.heading}
+              </Heading>
+            </Link>
+          </NextLink>
+          <BodyLong className="mt-4" size="small">
+            {blogg?.ingress}
+          </BodyLong>
+          {getAuthors(blogg).length > 0 ? (
+            <BodyShort
+              size="small"
+              className="text-text-subtle mt-4 flex gap-2"
+            >
+              <span className="font-semibold">{getAuthors(blogg)[0]}</span>
+              <span className="animate-fadeIn">{date}</span>
+            </BodyShort>
+          ) : (
+            <BodyShort size="small" className="text-text-subtle mt-4">
+              <span className="animate-fadeIn">{date}</span>
+            </BodyShort>
+          )}
+        </div>
+      </div>
+      <div className="md:hidden">
+        <div className="relative mb-6 block aspect-video">
+          {blogg?.seo?.image ? (
+            <Image
+              src={urlFor(blogg.seo.image).auto("format").url()}
+              layout="fill"
+              objectFit="cover"
+              aria-hidden
+              priority
+              className="rounded-lg"
+            />
+          ) : (
+            <Image
+              src={getImage(blogg?.heading ?? "", "thumbnail")}
+              layout="fill"
+              objectFit="cover"
+              aria-hidden
+              priority
+              className="rounded-lg"
+            />
+          )}
+        </div>
+        <div className="md:hidden">
+          <NextLink href={`/${blogg.slug}`} passHref legacyBehavior>
+            <Link className="text-deepblue-500 no-underline hover:underline">
+              <Heading size="small" level="2">
+                {blogg.heading}
+              </Heading>
+            </Link>
+          </NextLink>
+          <BodyLong className="mt-4" size="small">
+            {blogg?.ingress}
+          </BodyLong>
+          {getAuthors(blogg).length > 0 ? (
+            <BodyShort
+              size="small"
+              className="text-text-subtle mt-4 flex gap-2"
+            >
+              <span className="font-semibold">{getAuthors(blogg)[0]}</span>
+              <span>{date}</span>
+            </BodyShort>
+          ) : (
+            <BodyShort size="small" className="text-text-subtle mt-4">
+              <span>{date}</span>
+            </BodyShort>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,103 @@
+import { urlFor } from "@/sanity/interface";
+import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
+import { getAuthors } from "@/utils";
+import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
+import { getImage } from "components/website-modules/utils/get-image";
+import { useFormatedDate } from "components/website-modules/utils/getDate";
+import Image from "next/legacy/image";
+import NextLink from "next/link";
+
+export const HighlightedBlogg = ({
+  blogg,
+}: {
+  blogg: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>;
+}) => {
+  const date = useFormatedDate(blogg?.publishedAt ?? blogg._createdAt);
+  return (
+    <div>
+      <div className="col-span-1 hidden md:block">
+        <div className="relative mb-10 block aspect-video">
+          {blogg?.seo?.image ? (
+            <Image
+              src={urlFor(blogg.seo.image).quality(100).auto("format").url()}
+              quality={100}
+              layout="fill"
+              objectFit="cover"
+              aria-hidden
+              priority
+              className="rounded-lg"
+              decoding="sync"
+            />
+          ) : (
+            <Image
+              src={getImage(blogg?.heading ?? "", "thumbnail")}
+              layout="fill"
+              objectFit="contain"
+              aria-hidden
+              priority
+              className="rounded-lg"
+              decoding="sync"
+            />
+          )}
+        </div>
+        <NextLink href={`/${blogg.slug}`} passHref legacyBehavior>
+          <Link className="text-deepblue-500 no-underline hover:underline">
+            <Heading size="large" level="2">
+              {blogg.heading}
+            </Heading>
+          </Link>
+        </NextLink>
+        <BodyLong className="mt-4" size="small">
+          {blogg?.ingress}
+        </BodyLong>
+        {getAuthors(blogg).length > 0 && (
+          <BodyShort size="small" className="text-text-subtle mt-4 flex gap-2">
+            <span className="font-semibold">{getAuthors(blogg)[0]}</span>
+            <span>{date}</span>
+          </BodyShort>
+        )}
+      </div>
+      {/* Mobile view */}
+      <div className="w-full md:hidden">
+        <div className="relative mb-10 block aspect-video">
+          {blogg?.seo?.image ? (
+            <Image
+              src={urlFor(blogg.seo.image).quality(100).auto("format").url()}
+              quality={100}
+              layout="fill"
+              objectFit="cover"
+              aria-hidden
+              priority
+              className="rounded-lg"
+            />
+          ) : (
+            <Image
+              src={getImage(blogg?.heading ?? "", "thumbnail")}
+              layout="fill"
+              objectFit="contain"
+              aria-hidden
+              priority
+              className="rounded-lg"
+            />
+          )}
+        </div>
+        <NextLink href={`/${blogg.slug}`} passHref legacyBehavior>
+          <Link className="text-deepblue-500 no-underline hover:underline">
+            <Heading size="large" level="2">
+              {blogg.heading}
+            </Heading>
+          </Link>
+        </NextLink>
+        <BodyLong className="mt-4" size="small">
+          {blogg?.ingress}
+        </BodyLong>
+        {getAuthors(blogg).length > 0 && (
+          <BodyShort size="small" className="text-text-subtle mt-4 flex gap-2">
+            <span className="font-semibold">{getAuthors(blogg)[0]}</span>
+            <span>{date}</span>
+          </BodyShort>
+        )}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,48 @@
+import { SanityBlockContent } from "@/sanity-block";
+import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
+import { Heading } from "@navikt/ds-react";
+import { BloggList } from "./BloggList";
+import { HighlightedBlogg } from "./HighlightedBlogg";
+
+export const LatestBloggposts = ({
+  bloggs,
+  title,
+  intro,
+}: {
+  bloggs: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>[];
+  title: string;
+  intro?: any[];
+}) => {
+  if (!bloggs || bloggs.length < 3) {
+    return null;
+  }
+
+  return (
+    <div className="mt-20">
+      <Heading
+        level="1"
+        size="xlarge"
+        className="text-deepblue-700 mx-auto w-full text-5xl md:mx-0 md:max-w-none"
+      >
+        {title}
+      </Heading>
+      {intro && (
+        <SanityBlockContent
+          blocks={intro}
+          isIngress
+          noLastMargin
+          className="mt-4"
+        />
+      )}
+      {/* Desktop-view */}
+      <div className="mx-auto my-10 grid gap-12 md:my-12 md:grid-cols-2">
+        <HighlightedBlogg blogg={bloggs[0]} />
+        <div className="col-span-1 grid place-content-start gap-12">
+          {bloggs.slice(1, 3).map((blogg) => (
+            <BloggList blogg={blogg} key={blogg._id} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -126,7 +126,7 @@ export const IconPage = ({ name }: { name: string }) => {
                  onSubmit={(e) => e.preventDefault()}
                  className="flex h-fit w-full flex-wrap-reverse items-center gap-4 px-4 py-2"
                >
-                  <div className="min-w-40">
+                  <div className="min-w-[10.25rem]">
                    <ToggleGroup
                      value={toggle}
                      onChange={(v) => setToggle(v as any)}
@@ -137,7 +137,7 @@ export const IconPage = ({ name }: { name: string }) => {
                      <ToggleGroup.Item value="fill">Fill</ToggleGroup.Item>
                    </ToggleGroup>
                  </div>
-                  <div className=" min-w-48 flex w-full items-center gap-2  md:w-fit">
+                  <div className="min-w-48 md:min-w-96 flex w-full items-center gap-2  md:w-fit">
                    <Search
                      variant="simple"
                      label="Ikonsøk"
@@ -209,9 +209,9 @@ export const IconPage = ({ name }: { name: string }) => {
                                          }
                                        }}
                                        className={cl(
-                                          "hover:bg-surface-hover bg-surface-default active:bg-surface-neutral-subtle-hover group relative grid aspect-square w-11 shrink-0 place-items-center rounded focus:outline-none focus:ring-2 focus:ring-blue-800",
+                                          "hover:bg-surface-hover bg-surface-default active:bg-surface-neutral-subtle-hover group relative grid aspect-square w-11 shrink-0 place-items-center rounded focus:outline-none focus:ring-blue-800 focus-visible:ring-2",
                                          {
-                                            "bg-surface-selected ring-border-alt-3 z-10 ring-1":
+                                            "from-surface-selected bg-surface-selected ring-border-alt-3 z-10 bg-gradient-to-br to-teal-50 ring-1":
                                              i.id === name,
                                          }
                                        )}
@@ -184,7 +184,7 @@ export const IconSidebar = ({
            theme={undefined}
          >
            {({ tokens, getLineProps, getTokenProps }) => (
-              <pre className="relative m-0 max-w-[80vw]  overflow-x-auto overflow-y-auto rounded-b-lg p-3 font-mono lg:max-w-[20rem]">
+              <pre className="relative m-0 max-w-[80vw]  overflow-x-auto overflow-y-auto rounded-b-lg p-3 font-mono lg:max-w-sm">
                {tokens.map((line, i) => (
                  <div
                    key={i}
@@ -217,7 +217,7 @@ export const IconSidebar = ({
            theme={undefined}
          >
            {({ tokens, getLineProps, getTokenProps }) => (
-              <pre className="w-text relative m-0 max-w-[80vw] overflow-x-auto overflow-y-auto rounded-b-lg p-3 font-mono lg:w-auto lg:max-w-[20rem]">
+              <pre className="w-text relative m-0 max-w-[80vw] overflow-x-auto overflow-y-auto rounded-b-lg p-3 font-mono lg:w-auto lg:max-w-sm">
                {tokens.map((line, i) => (
                  <div
                    key={i}
@@ -21,12 +21,12 @@ describe("Utils test", () => {
    expect(capitalize(str4)).toEqual("Teststr");
  });

-  test("dateStr", () => {
+  test("dateStr", async () => {
    const date = "2022-06-09T11:05:48Z";
    const date2 = "2021-03-02T12:05:48Z";

-    expect(dateStr(date)).toEqual("9. juni 2022");
-    expect(dateStr(date2)).toEqual("2. mars 2021");
+    expect(await dateStr(date)).toEqual("9. juni 2022");
+    expect(await dateStr(date2)).toEqual("2. mars 2021");
  });

  test("abbrName", () => {
@@ -0,0 +1,5 @@
+export const dateStr = async (date: string) => {
+  const format = (await import("date-fns/format")).default;
+  const locale = (await import("date-fns/locale/nb")).default;
+  return format(new Date(date), "d. MMMM YYY", { locale: locale });
+};
@@ -0,0 +1,12 @@
+import { dateStr } from "components/website-modules/utils/date-string";
+import { useEffect, useState } from "react";
+
+export const useFormatedDate = (date: string) => {
+  const [_date, setDate] = useState(null);
+
+  useEffect(() => {
+    const handleDate = async () => setDate(await dateStr(date));
+    handleDate();
+  }, [date]);
+  return _date;
+};
@@ -1,16 +1,10 @@
-import nbLocale from "date-fns/locale/nb";
-import { format } from "date-fns";
+import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";

 export * from "./util";
 export * from "./amplitude";
 export * from "./hooks";
 export * from "./contexts";
-
-export const dateStr = (date: string) =>
-  format(new Date(date), "d. MMMM YYY", { locale: nbLocale });
-
-export const dateTimeStr = (date: string) =>
-  format(new Date(date), "d-MM-YYY", { locale: nbLocale });
+export * from "./date-string";

 export const isNew = (date: string) => {
  const date1 = new Date(date);
@@ -32,3 +26,7 @@ export const abbrName = (name: string): string => {
    )
    .join(" ");
 };
+
+export const getAuthors = (
+  blog: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>
+) => (blog?.contributors as any)?.map((x) => x?.title) ?? [];
@@ -27,15 +27,15 @@
  },
  "dependencies": {
    "@sanity/block-content-to-react": "^3.0.0",
-    "@sanity/client": "^6.1.2",
+    "@sanity/client": "^6.1.3",
    "@sanity/code-input": "4.1.1",
    "@sanity/color-input": "^3.1.0",
    "@sanity/icons": "2.3.1",
    "@sanity/image-url": "1.0.2",
    "@sanity/preview-kit": "^1.5.4",
    "@sanity/table": "1.0.1",
-    "@sanity/ui": "^1.5.0",
-    "@sanity/vision": "3.12.0",
+    "@sanity/ui": "^1.3.0",
+    "@sanity/vision": "3.12.1",
    "@svgr/webpack": "^5.5.0",
    "amplitude-js": "^8.21.5",
    "boring-avatars": "1.7.0",
@@ -55,7 +55,7 @@
    "react-modal": "3.15.1",
    "react-responsive-masonry": "^2.1.7",
    "recharts": "^2.2.0",
-    "sanity": "3.12.0",
+    "sanity": "3.9.1",
    "sanity-plugin-asset-source-unsplash": "^1.1.0",
    "sanity-plugin-media": "^2.0.5",
    "sharp": "0.31.3",
@@ -37,6 +37,8 @@ type PageProps = NextPageT<{
  page: ResolveContributorsT<
    ResolveTemaT<ResolveSlugT<ResolveRelatedArticlesT<AkselGodPraksisDocT>>>
  >;
+  publishDate: string;
+  verifiedDate: string;
 }>;

 export const query = `{
@@ -99,13 +101,21 @@ export const getStaticProps = async ({
      preview,
      id: page?._id ?? "",
      title: page?.heading ?? "",
+      verifiedDate: await dateStr(
+        page?.updateInfo?.lastVerified ?? page.publishedAt ?? page._updatedAt
+      ),
+      publishDate: await dateStr(page?.publishedAt ?? page?._updatedAt),
    },
    notFound: !page && !preview,
    revalidate: 60,
  };
 };

-const Page = ({ page: data }: PageProps["props"]) => {
+const Page = ({
+  page: data,
+  publishDate,
+  verifiedDate,
+}: PageProps["props"]) => {
  if (!data) {
    return <NotFotfund />;
  }
@@ -119,12 +129,6 @@ const Page = ({ page: data }: PageProps["props"]) => {
    return null;
  }

-  const date = data?.updateInfo?.lastVerified
-    ? data?.updateInfo?.lastVerified
-    : data?.publishedAt
-    ? data.publishedAt
-    : data._updatedAt;
-
  const authors = (data?.contributors as any)?.map((x) => x?.title) ?? [];

  const hasTema = "tema" in data && data.tema && data?.tema.length > 0;
@@ -227,7 +231,7 @@ const Page = ({ page: data }: PageProps["props"]) => {

              <div className="mt-6 inline-flex flex-wrap items-center gap-2 text-base">
                <Detail uppercase as="span">
-                  {dateStr(date)}
+                  {verifiedDate}
                </Detail>
                {authors?.length > 0 && (
                  <>
@@ -297,7 +301,7 @@ const Page = ({ page: data }: PageProps["props"]) => {
                    </BodyShort>
                  )}
                  <BodyShort as="span" className="text-text-subtle">
-                    Publisert: {dateStr(data?.publishedAt ?? data?._updatedAt)}
+                    Publisert: {publishDate}
                  </BodyShort>
                </div>
                <div className="mt-12 md:mt-16">
@@ -25,6 +25,7 @@ type PageProps = NextPageT<{
  sidebar: AkselSidebarT;
  seo: any;
  refs: ArticleListT;
+  publishDate: string;
 }>;

 export const query = `{
@@ -79,23 +80,18 @@ export const getStaticProps = async ({
      title: page?.heading ?? "",
      id: page?._id ?? "",
      refs: [],
+      publishDate: await dateStr(page._updatedAt),
    },
    notFound: !page && !preview,
    revalidate: 60,
  };
 };

-const Page = ({ page, sidebar, seo }: PageProps["props"]) => {
+const Page = ({ page, sidebar, seo, publishDate }: PageProps["props"]) => {
  if (!page) {
    return <NotFotfund />;
  }

-  const date = page?.updateInfo?.lastVerified
-    ? page?.updateInfo?.lastVerified
-    : page?.publishedAt
-    ? page.publishedAt
-    : page._updatedAt;
-
  return (
    <>
      <Head>
@@ -131,7 +127,7 @@ const Page = ({ page, sidebar, seo }: PageProps["props"]) => {
        intro={
          <Detail as="div" className="mt-2 flex items-center gap-3">
            <StatusTag showStable status={page?.status?.tag} />
-            {`OPPDATERT ${dateStr(date)}`}
+            {`OPPDATERT ${publishDate}`}
          </Detail>
        }
        pageProps={page}
@@ -67,6 +67,7 @@ type PageProps = NextPageT<{
  sidebar: AkselSidebarT;
  seo: any;
  refs: ArticleListT;
+  publishDate: string;
 }>;

 /**
@@ -148,25 +149,26 @@ export const getStaticProps = async ({
      preview,
      title: page?.heading ?? "",
      id: page?._id ?? "",
+      publishDate: await dateStr(page._updatedAt),
    },
    notFound: !page && !preview,
    revalidate: 60,
  };
 };

-const Page = ({ page, sidebar, refs, seo }: PageProps["props"]) => {
+const Page = ({
+  page,
+  sidebar,
+  refs,
+  seo,
+  publishDate,
+}: PageProps["props"]) => {
  if (!page) {
    return <NotFotfund />;
  }

  const pack = page?.kodepakker?.length > 0 && kodepakker[page?.kodepakker[0]];

-  const date = page?.updateInfo?.lastVerified
-    ? page?.updateInfo?.lastVerified
-    : page?.publishedAt
-    ? page.publishedAt
-    : page._updatedAt;
-
  const tag =
    page?.status?.tag === "beta"
      ? "komponent-beta"
@@ -220,7 +222,7 @@ const Page = ({ page, sidebar, refs, seo }: PageProps["props"]) => {
          <Detail as="div" className="mt-2 flex items-center gap-3">
            {internal && <StatusTag status="internal" />}
            <StatusTag showStable status={page?.status?.tag} />
-            {`OPPDATERT ${dateStr(date)}`}
+            {`OPPDATERT ${publishDate}`}
          </Detail>
        }
        footer={
@@ -28,6 +28,7 @@ import { contributorsAll, destructureBlocks } from "@/sanity/queries";

 type PageProps = NextPageT<{
  prinsipp: ResolveContributorsT<ResolveSlugT<AkselPrinsippDocT>>;
+  publishDate: string;
 }>;

 export const query = `{
@@ -61,13 +62,14 @@ export const getServerSideProps: GetServerSideProps = async (
      preview: context.preview ?? false,
      id: prinsipp?._id,
      title: prinsipp?.heading ?? "",
+      publishDate: await dateStr(prinsipp?.publishedAt ?? prinsipp._createdAt),
    },
    notFound:
      (!prinsipp && !context.preview) || context.params.prinsipp.length > 2,
  };
 };

-const Page = ({ prinsipp: data }: PageProps["props"]) => {
+const Page = ({ prinsipp: data, publishDate }: PageProps["props"]) => {
  if (!data) {
    return <NotFotfund />;
  }
@@ -155,7 +157,7 @@ const Page = ({ prinsipp: data }: PageProps["props"]) => {
                    as="span"
                    className="text-text-subtle "
                  >
-                    {dateStr(data?._updatedAt)}
+                    {publishDate}
                  </BodyShort>
                  {authors?.length > 0 && (
                    <BodyShort
@@ -214,8 +216,7 @@ const Page = ({ prinsipp: data }: PageProps["props"]) => {
                        </BodyShort>
                      )}
                      <BodyShort as="span" className="text-text-subtle ">
-                        Publisert:{" "}
-                        {dateStr(data?.publishedAt ?? data?._updatedAt)}
+                        Publisert: {publishDate}
                      </BodyShort>
                    </div>
                    <div className="mt-12 md:mt-16">
@@ -28,6 +28,7 @@ import { destructureBlocks, contributorsAll } from "@/sanity/queries";
 type PageProps = NextPageT<{
  blogg: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>;
  morePosts: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>[];
+  publishDate: string;
 }>;

 export const query = `{
@@ -66,12 +67,13 @@ export const getServerSideProps: GetServerSideProps = async (
      preview: context.preview ?? false,
      id: blogg?._id ?? "",
      title: blogg?.heading ?? "",
+      publishDate: await dateStr(blogg?.publishedAt ?? blogg._createdAt),
    },
    notFound: !blogg && !context.preview,
  };
 };

-const Page = ({ blogg, morePosts }: PageProps["props"]) => {
+const Page = ({ blogg, morePosts, publishDate }: PageProps["props"]) => {
  if (!blogg) {
    return <NotFotfund />;
  }
@@ -100,10 +102,7 @@ const Page = ({ blogg, morePosts }: PageProps["props"]) => {
        {authors?.[0] && <meta name="twitter:data1" content={authors?.[0]} />}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:label2" content="Publisert" />
-        <meta
-          name="twitter:data2"
-          content={dateStr(blogg?.publishedAt ?? blogg._createdAt)}
-        />
+        <meta name="twitter:data2" content={publishDate} />
        <meta property="og:type" content="article" />
        <meta
          property="og:image"
@@ -126,7 +125,7 @@ const Page = ({ blogg, morePosts }: PageProps["props"]) => {
      <main
        tabIndex={-1}
        id="hovedinnhold"
-        className="aksel-artikkel overflow-hidden bg-[#FEFCE9] pt-[8vw] pb-16 focus:outline-none sm:pb-32"
+        className="aksel-artikkel overflow-hidden bg-[#FEFCE9] pb-16 pt-[8vw] focus:outline-none sm:pb-32"
      >
        <div className="px-4">
          <div className="dynamic-wrapper-prose text-center">
@@ -144,7 +143,7 @@ const Page = ({ blogg, morePosts }: PageProps["props"]) => {
            )}
            <div className="mt-8 inline-flex flex-wrap items-center gap-2 text-base">
              <Detail uppercase as="span">
-                {dateStr(blogg?.publishedAt ?? blogg._createdAt)}
+                {publishDate}
              </Detail>
              {authors?.[0] && (
                <>
@@ -225,7 +224,7 @@ const Page = ({ blogg, morePosts }: PageProps["props"]) => {
              as="span"
              className="text-text-subtle flex justify-center"
            >
-              Publisert: {dateStr(blogg?.publishedAt ?? blogg?._updatedAt)}
+              Publisert: {publishDate}
            </BodyShort>
          </div>
          {morePosts && (
@@ -233,7 +232,7 @@ const Page = ({ blogg, morePosts }: PageProps["props"]) => {
              <Heading level="2" size="large">
                Flere blogginnlegg
              </Heading>
-              <ul className="mt-12 grid gap-x-6 gap-y-6 md:grid-cols-2 md:gap-y-10 md:gap-x-6 lg:grid-cols-3">
+              <ul className="mt-12 grid gap-x-6 gap-y-6 md:grid-cols-2 md:gap-x-6 md:gap-y-10 lg:grid-cols-3">
                {morePosts.map((post) => (
                  <BloggCard key={post._id} blog={post} />
                ))}
@@ -12,7 +12,7 @@ import { Header } from "components/layout/header/Header";
 import BloggCard from "components/sanity-modules/cards/BloggCard";
 import { BloggAd } from "components/website-modules/BloggAd";
 import { AkselCubeStatic } from "components/website-modules/cube";
-import { LatestBloggposts } from "components/website-modules/LatestBloggs";
+import { LatestBloggposts } from "components/website-modules/blogg-page";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import { lazy } from "react";
@@ -119,7 +119,7 @@ const Page = (props: PageProps["props"]) => {
                <Heading level="2" size="xlarge" className="text-deepblue-800">
                  Flere blogginnlegg
                </Heading>
-                <ul className="mt-12 grid gap-x-3 gap-y-6 md:grid-cols-2 md:gap-y-10 md:gap-x-6 lg:grid-cols-3">
+                <ul className="mt-12 grid gap-x-3 gap-y-6 md:grid-cols-2 md:gap-x-6 md:gap-y-10 lg:grid-cols-3">
                  {remainingPosts.map((blog) => (
                    <BloggCard key={blog._id} blog={blog} />
                  ))}
@@ -73,3 +73,12 @@ p.override-text-no-max {
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
 }
+
+[id] > code {
+  font-size: inherit;
+  color: inherit;
+}
+
+[id] > code > .inline-code-amp {
+  display: none;
+}
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "4.1.5",
-    "@navikt/ds-react": "4.1.5",
+    "@navikt/ds-css": "4.1.7",
+    "@navikt/ds-react": "4.1.7",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	da0fbc3299	Version Packages (#2057 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-19 13:02:23 +02:00
Ken	9f59e67e2a	⚡ Lazy-loading date-fns: sparer ~10kB first-load (#2058 )	2023-06-19 12:53:28 +02:00
Ken	ed7aafcac8	🎨 Oppdatert deploy image (#2059 )	2023-06-19 12:53:08 +02:00
Ken	dfbbe92a63	🎨 Helptext har nå en prop for wrapperClassName (#2056 )	2023-06-19 11:48:53 +02:00
Ken	42b5af64ab	🐛 Timeline Period brakk ved bruk av JSODOM	2023-06-17 10:25:45 +02:00
Ken	329119fa04	💄 DoDont-ikon er nå høyrestilt	2023-06-16 16:21:19 +02:00
Ken	0fc80f45cb	♿ Fikset regression der sanity ikke lengre støttet skjermlesere	2023-06-16 16:07:37 +02:00
Ken	337b9fda13	🐛 Fikset inlinecode bruk i heading	2023-06-16 12:58:26 +02:00
github-actions[bot]andgithub-actions[bot]	659e835da9	Version Packages (#2055 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-15 16:38:08 +02:00
Ken	e10f4375b1	Merge branch 'main' of https://github.com/navikt/aksel	2023-06-15 16:34:25 +02:00
Ken	9a8bb26c36	🐛 Timeline brakk ved bruk av JSDOM-tester	2023-06-15 16:33:40 +02:00