🐛 Sourcemap fungerte ikke i Aksel-icons

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/ISSUE_TEMPLATE/new-component.yml

@@ -3,7 +3,7 @@ description: Send et ønske om en eller flere nye komponenter
 title: "[Ny komponent]: "
 labels: ["nytt ✨", "forespørsel 🥰", "komponenter 🧩"]
 assignees:
-  - olejorgenbakken
+  - KenAJoh
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/new-icon.yaml

@@ -3,7 +3,7 @@ description: Send et ønske om et eller flere nye ikoner
 title: "[Nytt ikon]: "
 labels: ["nytt ✨", "ikoner 🖼", "forespørsel 🥰"]
 assignees:
-  - olejorgenbakken
+  - KenAJoh
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/update-component.yml

@@ -3,7 +3,7 @@ description: Send inn innspill til komponent
 title: "[Innspill til komponent]: "
 labels: ["forespørsel 🥰", "komponenter 🧩", "nytt ✨", "beta 🧪"]
 assignees:
-  - olejorgenbakken
+  - KenAJoh
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/update-icon.yml

@@ -3,7 +3,7 @@ description: Send inn innspill til ikon
 title: "[Tilbakemelding på ikon]: "
 labels: ["forespørsel 🥰", "ikoner 🖼️"]
 assignees:
-  - olejorgenbakken
+  - KenAJoh
 body:
   - type: markdown
     attributes:

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/aksel-icons
 
+## 2.8.4
+
+### Patch Changes
+
+- Fikset Sourcemap-bug i Aksel-icons
+
+## 2.8.3
+
 ## 2.8.2
 
 ## 2.8.1

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-icons/tsconfig.esm.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "./dist/react/esm",
     "module": "esnext",
-    "sourceMap": true,
+    "sourceMap": false,
     "declaration": true
   }
 }

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-codemod
 
+## 2.8.4
+
+## 2.8.3
+
 ## 2.8.2
 
 ## 2.8.1

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",

@navikt/community/navno/package.json

@@ -39,8 +39,8 @@
     "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.8.2",
-    "@navikt/ds-react": "^2.8.2",
+    "@navikt/ds-icons": "^2.8.4",
+    "@navikt/ds-react": "^2.8.4",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-css
 
+## 2.8.4
+
+## 2.8.3
+
 ## 2.8.2
 
 ### Patch Changes

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.8.2",
+    "@navikt/ds-tokens": "^2.8.4",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/ds-react
 
+## 2.8.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.4
+  - @navikt/ds-icons@2.8.4
+
+## 2.8.3
+
+### Patch Changes
+
+- [#1875](https://github.com/navikt/aksel/pull/1875) [`f862aa9c2`](https://github.com/navikt/aksel/commit/f862aa9c2ec71ffdb295708dc6dad6b77af9519e) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Textarea har oppdatert counter-tekst + mulighet for lokalisering
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.3
+  - @navikt/ds-icons@2.8.3
+
 ## 2.8.2
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^2.8.2",
-    "@navikt/ds-icons": "^2.8.2",
+    "@navikt/aksel-icons": "^2.8.4",
+    "@navikt/ds-icons": "^2.8.4",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/form/Textarea.tsx

@@ -45,6 +45,15 @@ export interface TextareaProps
    * Enables resizing of field
    */
   resize?: boolean;
+  /**
+   * i18n-translations for counter-text
+   */
+  i18n?: {
+    /** @default Antall tegn igjen */
+    counterLeft?: string;
+    /** @default tegn for mye */
+    counterTooMuch?: string;
+  };
 }
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
@@ -65,6 +74,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       maxLength,
       hideLabel = false,
       resize,
+      i18n,
       ...rest
     } = props;
 
@@ -166,6 +176,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                 maxLength={maxLength}
                 currentLength={props.value?.length ?? controlledValue?.length}
                 size={size}
+                i18n={i18n}
               />
             </>
           )}
@@ -185,7 +196,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   }
 );
 
-export const Counter = ({ maxLength, currentLength, size }) => {
+export const Counter = ({ maxLength, currentLength, size, i18n }) => {
   const difference = maxLength - currentLength;
 
   return (
@@ -197,8 +208,8 @@ export const Counter = ({ maxLength, currentLength, size }) => {
       size={size}
     >
       {difference < 0
-        ? `Antall tegn for mye ${Math.abs(difference)}`
-        : `Antall tegn igjen ${difference}`}
+        ? `${Math.abs(difference)} ${i18n?.counterLeft ?? "tegn for mye"}`
+        : `${difference} ${i18n?.counterTooMuch ?? "tegn igjen"}`}
     </BodyShort>
   );
 };

@navikt/core/react/src/popover/PopoverContent.tsx

@@ -3,9 +3,6 @@ import cl from "clsx";
 
 export interface PopoverContentProps
   extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Modal.Content content
-   */
   children: React.ReactNode;
 }
 

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind
 
+## 2.8.4
+
+## 2.8.3
+
 ## 2.8.2
 
 ## 2.8.1

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "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": "^2.8.2",
+    "@navikt/ds-tokens": "^2.8.4",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tokens
 
+## 2.8.4
+
+## 2.8.3
+
 ## 2.8.2
 
 ## 2.8.1

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-icons
 
+## 2.8.4
+
+## 2.8.3
+
 ## 2.8.2
 
 ## 2.8.1

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-css-internal
 
+## 2.8.4
+
+## 2.8.3
+
 ## 2.8.2
 
 ## 2.8.1

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "CSS for NAV internal Designsystem-components",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/ds-react-internal
 
+## 2.8.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.8.4
+  - @navikt/ds-icons@2.8.4
+
+## 2.8.3
+
+### Patch Changes
+
+- Updated dependencies [[`f862aa9c2`](https://github.com/navikt/aksel/commit/f862aa9c2ec71ffdb295708dc6dad6b77af9519e)]:
+  - @navikt/ds-react@2.8.3
+  - @navikt/ds-icons@2.8.3
+
 ## 2.8.2
 
 ### Patch Changes

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "Aksel react components for internal UIs in NAV",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.8.2",
-    "@navikt/ds-react": "^2.8.2",
+    "@navikt/ds-icons": "^2.8.4",
+    "@navikt/ds-react": "^2.8.4",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

aksel.nav.no/package.json

@@ -15,15 +15,15 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^2.8.2",
-    "@navikt/ds-codemod": "^2.8.2",
-    "@navikt/ds-css": "^2.8.2",
-    "@navikt/ds-css-internal": "^2.8.2",
-    "@navikt/ds-icons": "^2.8.2",
-    "@navikt/ds-react": "^2.8.2",
-    "@navikt/ds-react-internal": "^2.8.2",
-    "@navikt/ds-tailwind": "^2.8.2",
-    "@navikt/ds-tokens": "^2.8.2"
+    "@navikt/aksel-icons": "^2.8.4",
+    "@navikt/ds-codemod": "^2.8.4",
+    "@navikt/ds-css": "^2.8.4",
+    "@navikt/ds-css-internal": "^2.8.4",
+    "@navikt/ds-icons": "^2.8.4",
+    "@navikt/ds-react": "^2.8.4",
+    "@navikt/ds-react-internal": "^2.8.4",
+    "@navikt/ds-tailwind": "^2.8.4",
+    "@navikt/ds-tokens": "^2.8.4"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

aksel.nav.no/website/components/layout/footer/Footer.tsx

@@ -52,6 +52,13 @@ function Snarveier() {
         <FooterLink href="/prinsipper/brukeropplevelse">
           Prinsipper for brukeropplevelse
         </FooterLink>
+        <FooterLink href="https://identitet.nav.no/">Identitet</FooterLink>
+        <FooterLink href="https://sikkerhet.nav.no/">
+          Security Playbook
+        </FooterLink>
+        <FooterLink href="https://etterlevelse.intern.nav.no/">
+          Etterlevelse
+        </FooterLink>
       </BodyShort>
     </div>
   );

aksel.nav.no/website/components/sanity-modules/ComponentOverview.tsx

@@ -40,7 +40,7 @@ const ComponentOverview = ({
 
   return (
     <div className="mb-8">
-      <ul className="component-card-grid">
+      <ul className="grid grid-cols-[repeat(auto-fill,_minmax(min(17rem,_100%),_1fr))] gap-6">
         {sorted.map((x) => (
           <li key={x._id}>
             <div className="bg-surface-subtle focus-within:ring-border-focus ring-border-subtle hover:shadow-medium min-h-56 group relative rounded-2xl focus-within:ring-[3px] hover:ring-1">

aksel.nav.no/website/components/sanity-modules/cards/BloggCard.tsx

@@ -1,5 +1,5 @@
 import { withErrorBoundary } from "@/error-boundary";
-import { SanityT } from "@/lib";
+import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
 import { getAuthors } from "components/website-modules/LatestBloggs";
 import NextLink from "next/link";
@@ -8,14 +8,7 @@ import { dateStr, logNav } from "../..";
 const BloggCard = ({
   blog,
 }: {
-  blog: Partial<
-    SanityT.Schema.aksel_blogg & {
-      slug: string;
-      contributors?: {
-        title?: string;
-      }[];
-    }
-  >;
+  blog: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>;
 }) => {
   return (
     <li

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/Card.tsx

@@ -0,0 +1,136 @@
+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 { urlFor } from "lib/sanity/santiy";
+import { getImage } from "components/website-modules/utils/get-image";
+
+export type ArticleT = {
+  _key: string;
+  _type: string;
+  _createdAt: string;
+  _updatedAt: string;
+  _id: string;
+  heading: string;
+  ingress?: string;
+  slug: { current: string };
+  seo?: {
+    meta?: string;
+    image?: any;
+  };
+  tema?: string[];
+  status?: { tag: string; bilde?: any };
+  publishedAt: string;
+  contributors?: { title: string }[];
+};
+
+export const Card = ({ article }: { article: ArticleT }) => {
+  const date = article.publishedAt ? article.publishedAt : article._updatedAt;
+
+  const showFooter = ["aksel_artikkel", "aksel_blogg"].includes(article._type);
+  const showImage = [
+    "ds_artikkel",
+    "komponent_artikkel",
+    "aksel_blogg",
+  ].includes(article._type);
+
+  return (
+    <div
+      className={cl(
+        "bg-surface-default group relative rounded-lg",
+        "focus-within:ring-border-focus ring-border-subtle-hover focus-within:ring-[3px]",
+        "shadow-[0_0_1px_rgb(0_0_0/0.3),0_1px_3px_rgb(0_0_0/0.15)]"
+      )}
+    >
+      {showImage && (
+        <div
+          className={cl(
+            "flex max-h-80 items-center justify-center overflow-hidden rounded-t-lg",
+            "bg-deepblue-200 filter",
+            {
+              "hue-rotate-[65deg]": article?.status?.tag === "beta",
+            }
+          )}
+        >
+          {article.status?.bilde ?? article.seo?.image ? (
+            article.status?.bilde ? (
+              <NextImage
+                src={urlFor(article.status?.bilde).auto("format").url()}
+                width="200"
+                height="200"
+                alt={article.heading + " thumbnail"}
+                aria-hidden
+              />
+            ) : (
+              <div className="relative h-[200px] w-full">
+                <NextImage
+                  src={urlFor(article.seo?.image).auto("format").url()}
+                  layout="fill"
+                  objectFit="cover"
+                  alt={article.heading + " thumbnail"}
+                  aria-hidden
+                  className="rounded-t-lg"
+                />
+              </div>
+            )
+          ) : (
+            <div className="relative h-[200px] w-full">
+              <NextImage
+                layout="fill"
+                objectFit="cover"
+                src={getImage(article?.heading ?? "", "thumbnail")}
+                alt={article.heading + " thumbnail"}
+                aria-hidden
+                className="rounded-t-lg"
+              />
+            </div>
+          )}
+        </div>
+      )}
+      <div className={cl("p-3 sm:p-5", showFooter && "pb-16 sm:pb-16")}>
+        <div className="flex flex-col-reverse">
+          <NextLink
+            href={`/${article.slug}`}
+            passHref
+            className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
+            onClick={(e) =>
+              logNav(
+                "forside-masonary",
+                window.location.pathname,
+                e.currentTarget.getAttribute("href")
+              )
+            }
+          >
+            <Heading level="3" size="small" className="group-hover:underline">
+              {article.heading}
+            </Heading>
+          </NextLink>
+          <Tag
+            type={article._type}
+            text={article.tema ? article.tema[0] : undefined}
+            size="small"
+            beta={article.status?.tag === "beta"}
+          />
+        </div>
+        {article.ingress ? (
+          <BodyShort className="mt-2">{article.ingress}</BodyShort>
+        ) : article.seo.meta ? (
+          <BodyShort className="mt-2">{article.seo.meta}</BodyShort>
+        ) : null}
+        {showFooter && (
+          <span className="text-text-subtle absolute bottom-5 flex gap-2">
+            {article?.contributors && (
+              <Detail as="span" className="font-semibold">
+                {abbrName(article?.contributors[0]?.title)}
+              </Detail>
+            )}
+            <Detail as="span">{dateStr(date)}</Detail>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/FrontpageBlocks.tsx

@@ -0,0 +1,23 @@
+import Latest, { LatestT } from "./Latest";
+import { withErrorBoundary } from "@/error-boundary";
+export type BlocksT = LatestT;
+
+export const FrontpageBlock = ({ blocks }: { blocks: BlocksT[] }) => {
+  if (!blocks || !blocks.length) {
+    return null;
+  }
+  return (
+    <div className="lg:px-18 px-2">
+      {blocks.map((x) => {
+        switch (x._type) {
+          case "nytt_fra_aksel":
+            return <Latest block={x} key={x._key} />;
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+};
+
+export default withErrorBoundary(FrontpageBlock, "FrontpageBlock");

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/Latest.tsx

@@ -0,0 +1,157 @@
+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 { urlFor } from "lib/sanity/santiy";
+import { getImage } from "components/website-modules/utils/get-image";
+import { getAuthors } from "components/website-modules/LatestBloggs";
+import { dateStr } from "@/utils";
+import { Tag } from "./Tag";
+import { Card, ArticleT } from "./Card";
+import cl from "clsx";
+
+export type LatestT = {
+  _type: "nytt_fra_aksel";
+  _key: string;
+  highlights: ArticleT[];
+  curatedResent: {
+    artikler: ArticleT[];
+    bloggposts: ArticleT[];
+    komponenter: ArticleT[];
+  };
+};
+
+const Latest = ({ block }: { block: LatestT }) => {
+  const highlights = block.highlights?.length;
+
+  const articles = getList(block);
+
+  return (
+    <>
+      <Heading level="2" size="xlarge" className="text-deepblue-800 mb-10">
+        Siste fra Aksel
+      </Heading>
+
+      {highlights && <Highlights highlights={block.highlights} />}
+      <section aria-label="Nyeste artikler fra Aksel" className="mt-20">
+        <ResponsiveMasonry
+          columnsCountBreakPoints={{ 480: 1, 768: 2, 1024: 3 }}
+        >
+          <Masonry gutter="1.5rem">
+            {articles.map((x) => (
+              <Card key={x._id} article={x} />
+            ))}
+          </Masonry>
+        </ResponsiveMasonry>
+      </section>
+    </>
+  );
+};
+
+function Highlights({ highlights }: { highlights: ArticleT[] }) {
+  return (
+    <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 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>
+        );
+      })}
+    </div>
+  );
+}
+
+function getList(block: LatestT) {
+  return [
+    ...block.curatedResent.artikler,
+    ...block.curatedResent.bloggposts,
+    ...block.curatedResent.komponenter,
+  ].sort((a, b) => {
+    return (
+      new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()
+    );
+  });
+}
+
+export default withErrorBoundary(Latest, "Latest");

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/Tag.tsx

@@ -0,0 +1,60 @@
+import { Heading, Label, Tag as DsTag } from "@navikt/ds-react";
+import cl from "clsx";
+
+export const Tag = ({
+  type,
+  text,
+  size = "medium",
+  beta = false,
+}: {
+  type: string;
+  text?: string;
+  size?: "medium" | "small";
+  beta?: boolean;
+}) => {
+  const Comp = ({ ...props }: any) =>
+    size === "medium" ? (
+      <Heading {...props} as="div" size="medium" />
+    ) : (
+      <Label
+        {...props}
+        as="div"
+        size="small"
+        className={cl(props?.className, "mb-2")}
+      />
+    );
+
+  switch (type) {
+    case "aksel_artikkel":
+      return (
+        <Comp className="text-teal-600">{text ? text : "God praksis"}</Comp>
+      );
+    case "aksel_blogg":
+      return <Comp className="text-pink-600">Blogg</Comp>;
+    case "komponent_artikkel":
+      return (
+        <Comp className="text-deepblue-600 flex items-center gap-3">
+          Komponent
+          {beta && (
+            <DsTag variant="alt1" size="small">
+              Beta
+            </DsTag>
+          )}
+        </Comp>
+      );
+    case "ds_artikkel":
+      return (
+        <Comp className="text-deepblue-600 flex items-center gap-3">
+          Grunnleggende
+          {beta && (
+            <DsTag variant="alt1" size="small">
+              Beta
+            </DsTag>
+          )}
+        </Comp>
+      );
+
+    default:
+      return null;
+  }
+};

aksel.nav.no/website/components/sanity-modules/token-view/Frame.tsx

@@ -23,7 +23,7 @@ export const Frame = ({
           {hasDescription && <th>Beskrivelse</th>}
         </tr>
       </thead>
-      <tbody className="component-token-grid">
+      <tbody className="component-token-grid grid grid-cols-[repeat(auto-fill,_minmax(min(20rem,_100%),_1fr))] gap-4">
         {tokens.map((c) => (
           <tr
             key={c.name}

aksel.nav.no/website/components/website-modules/BloggAd.tsx

@@ -57,7 +57,7 @@ const CubeSmall = () => (
 
 export const BloggAd = () => {
   return (
-    <div className="full-bleed my-20 flex h-72 items-center bg-[#FBCFE8] px-4 md:rounded-2xl md:px-6 lg:h-80 lg:pl-12">
+    <div className="relative left-1/2 right-1/2 -mx-[50vw] my-20 flex h-72 w-screen items-center bg-[#FBCFE8] px-4 md:left-auto md:right-auto md:mx-auto md:w-full md:max-w-[85%] md:rounded-2xl md:px-6 lg:h-80 lg:pl-12">
       <div className="z-10 max-w-sm text-[#831843]">
         <Heading level="2" size="xlarge" spacing>
           Skriv for bloggen

aksel.nav.no/website/components/website-modules/LatestBloggs.tsx

@@ -1,33 +1,24 @@
-import Image from "next/legacy/image";
-import NextLink from "next/link";
+import { urlFor } from "@/lib";
+import { SanityBlockContent } from "@/sanity-block";
+import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
 import { dateStr } from "@/utils";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
-import { SanityT, urlFor } from "@/lib";
-import cl from "clsx";
 import { getImage } from "components/website-modules/utils/get-image";
-import { SanityBlockContent } from "@/sanity-block";
-import AkselLink from "components/website-modules/AkselLink";
+import Image from "next/legacy/image";
+import NextLink from "next/link";
 
-export type BloggPageT = Partial<
-  SanityT.Schema.aksel_blogg & {
-    slug: string;
-    contributors?: { title?: string }[];
-  }
->;
-
-export const getAuthors = (blog: BloggPageT) =>
-  (blog?.contributors as any)?.map((x) => x?.title) ?? [];
+export const getAuthors = (
+  blog: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>
+) => (blog?.contributors as any)?.map((x) => x?.title) ?? [];
 
 export const LatestBloggposts = ({
   bloggs,
   title,
-  variant = "blogg",
   level = "1",
   intro,
 }: {
-  bloggs: BloggPageT[];
+  bloggs: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>[];
   title: string;
-  variant?: "blogg" | "forside";
   level?: "1" | "2";
   intro?: any[];
 }) => {
@@ -36,18 +27,11 @@ export const LatestBloggposts = ({
   }
 
   return (
-    <div
-      className={cl({
-        "mt-20": variant === "blogg",
-      })}
-    >
+    <div className="mt-20">
       <Heading
         level={level}
         size="xlarge"
-        className={cl(
-          "text-deepblue-700 mx-auto w-full md:mx-0 md:max-w-none",
-          { "text-5xl": variant === "blogg" }
-        )}
+        className="text-deepblue-700 mx-auto w-full text-5xl md:mx-0 md:max-w-none"
       >
         {title}
       </Heading>
@@ -169,11 +153,6 @@ export const LatestBloggposts = ({
               </div>
             </div>
           ))}
-          {variant === "forside" && (
-            <AkselLink href="/produktbloggen" className="h-fit self-end">
-              Les flere blogginnlegg
-            </AkselLink>
-          )}
         </div>
       </div>
 
@@ -284,11 +263,6 @@ export const LatestBloggposts = ({
               </div>
             </div>
           ))}
-          {variant === "forside" && (
-            <AkselLink href="/produktbloggen" className="self-end">
-              Les flere blogginnlegg
-            </AkselLink>
-          )}
         </div>
       </div>
     </div>

aksel.nav.no/website/components/website-modules/icon-page/Page.tsx

@@ -105,7 +105,7 @@ export const IconPage = ({ name }: { name: string }) => {
           id="hovedinnhold"
           className="min-h-[80vh] focus:outline-none"
         >
-          <div className="centered-layout mb-40 grid max-w-screen-2xl pt-20">
+          <div className="mx-auto mb-40 grid w-full max-w-screen-2xl px-4 pt-20 sm:px-6">
             <div>
               <div>
                 <h1 className="text-deepblue-700 my-0 w-fit text-5xl font-bold">

aksel.nav.no/website/components/website-modules/suggestionblock/index.tsx

@@ -133,8 +133,7 @@ export const SuggestionBlock = ({
   );
 };
 
-const issueUrl =
-  "https://github.com/navikt/aksel/issues/new?assignees=olejorgenbakken";
+const issueUrl = "https://github.com/navikt/aksel/issues/new?assignees=KenAJoh";
 
 const options: {
   [key: string]: {

aksel.nav.no/website/lib/sanity/queries.js

@@ -90,13 +90,6 @@ const defaultBlock = `
       ${markDef}
     }
  },
- _type == "expansioncard" =>{
-    ...,
-    body[]{
-      ...,
-      ${markDef}
-    }
- },
  _type == "kode" =>{
     ...,
     "ref": ref->{...},
@@ -120,6 +113,16 @@ const accordionBlock = `_type == "accordion"=>{
       ${defaultBlock}
     }
   }
+}
+`;
+
+const expansionCardBlock = `_type == "expansioncard"=>{
+  ...,
+  body[]{
+    ...,
+    ${markDef},
+    ${defaultBlock}
+  }
 }`;
 
 const spesialSeksjon = `_type == "spesial_seksjon" =>{
@@ -148,7 +151,7 @@ const propsSeksjon = `_type == "props_seksjon" =>{
 
 const tokenRef = `_type == "token_ref"=>@->`;
 
-const deRefs = `
+export const destructureBlocks = `
 ${alert},
 ${tips},
 ${tokenRef},
@@ -161,6 +164,7 @@ ${propsSeksjon},
 ${installSeksjon},
 ${spesialSeksjon},
 ${accordionBlock},
+${expansionCardBlock},
 ${defaultBlock},
 `;
 
@@ -171,7 +175,7 @@ export const akselTema = `*[_type == "godpraksis_landingsside"][0]{
     ...,
     intro[]{
       ...,
-      ${deRefs}
+      ${destructureBlocks}
     }
   },
   "temaer": *[_type == "aksel_tema" && defined(seksjoner[].sider[])]{
@@ -190,7 +194,7 @@ export const akselTema = `*[_type == "godpraksis_landingsside"][0]{
   }
 }`;
 
-const contributorsAll = `contributors[]->{
+export const contributorsAll = `contributors[]->{
   anonym == true => {"title":@.anon_navn.current},
   anonym != true => {"title":@.title}
 }`;
@@ -200,39 +204,61 @@ const contributorsSingle = `contributors[0]->{
   anonym != true => {"title":@.title}
 }`;
 
-export const akselBloggPosts = `*[_type == "blogg_landingsside"][0]{
-  "page": {..., intro[]{...,${deRefs}}},
-  "bloggposts": *[_type == "aksel_blogg"] | order(_createdAt desc){
-    seo,
-    heading,
-    ingress,
-    publishedAt,
-    _createdAt,
-    _id,
-    "slug": slug.current,
-    ${contributorsAll}
-  }
-}`;
-
 export const akselForsideQuery = `*[_type == "aksel_forside"][0]{
   "page": {
     ...,
   },
-  "bloggs": *[_type == "aksel_blogg"] | order(_createdAt desc)[0...4]{
-    ...,
-    "slug": slug.current,
-    ${contributorsAll}
-  },
   "tema": *[_type == "aksel_tema" && defined(seksjoner[].sider[])],
-  "resent": *[_type == "aksel_artikkel" && defined(publishedAt)] | order(publishedAt desc)[0...3]{
-    _id,
-    heading,
-    _createdAt,
-    _updatedAt,
-    publishedAt,
-    "slug": slug.current,
-    "tema": tema[]->title,
-    ingress,
+  blocks[]{
+    ...,
+    _type == "nytt_fra_aksel"=>{
+      highlights[]->{
+        ...,
+        "content": null,
+        ${contributorsAll},
+        "tema": tema[]->title,
+      },
+      "curatedResent": {
+        "bloggposts": *[_type == "aksel_blogg" && !(_id in ^.highlights[]._ref)] | order(_createdAt desc)[0...2]{
+          _type,
+          _id,
+          heading,
+          _createdAt,
+          _updatedAt,
+          publishedAt,
+          "slug": slug.current,
+          ingress,
+          seo,
+          ${contributorsAll}
+        },
+        "artikler": *[_type == "aksel_artikkel" && defined(publishedAt) && !(_id in ^.highlights[]._ref)] | order(publishedAt desc)[0...3]{
+          _type,
+          _id,
+          heading,
+          _createdAt,
+          _updatedAt,
+          publishedAt,
+          "slug": slug.current,
+          "tema": tema[]->title,
+          ingress,
+          seo,
+          ${contributorsAll}
+        },
+        "komponenter": *[_type in ["komponent_artikkel", "ds_artikkel"] && defined(publishedAt) && !(_id in ^.highlights[]._ref)] | order(publishedAt desc)[0...3]{
+          _type,
+          _id,
+          heading,
+          "slug": slug.current,
+          status,
+          kategori,
+          _createdAt,
+          _updatedAt,
+          publishedAt,
+          seo,
+          ${contributorsAll}
+        },
+      },
+    }
   }
 }`;
 
@@ -244,7 +270,7 @@ export const akselPrinsippBySlug = `{
     "content": select(
       $valid == "true" => content[]{
         ...,
-        ${deRefs}
+        ${destructureBlocks}
       },
       $valid != "true" => []
     ),
@@ -259,7 +285,7 @@ export const akselDocumentBySlug = `{
     "slug": slug.current,
     content[]{
       ...,
-      ${deRefs}
+      ${destructureBlocks}
     },
     tema[]->{title, slug, seo},
     ${contributorsAll},
@@ -309,12 +335,12 @@ export const komponentQuery = `{
         ...,
         body[]{
           ...,
-        ${deRefs}
+        ${destructureBlocks}
         }
       },
       content[]{
         ...,
-        ${deRefs}
+        ${destructureBlocks}
       },
   },
   "refs": select(
@@ -337,7 +363,7 @@ export const grunnleggendeQuery = `{
       "slug": slug.current,
       content[]{
         ...,
-        ${deRefs}
+        ${destructureBlocks}
       },
   },
   "seo": *[_type == "komponenter_landingsside"][0].seo.image,
@@ -352,7 +378,7 @@ export const akselTemaDocs = `{
       ...,
       beskrivelse[]{
         ...,
-        ${deRefs}
+        ${destructureBlocks}
       },
       sider[]->{
         _id,
@@ -374,31 +400,6 @@ export const akselTemaDocs = `{
   }
 }`;
 
-export const akselBloggBySlug = `{
-  "blogg": *[slug.current == $slug && _type == "aksel_blogg"] | order(_updatedAt desc)[0]
-  {
-    ...,
-    "slug": slug.current,
-    "content": select(
-      $valid == "true" => content[]{
-        ...,
-        ${deRefs}
-      },
-      $valid != "true" => []
-    ),
-    ${contributorsAll}
-  },
-  "morePosts": *[_type == "aksel_blogg" && slug.current != $slug] | order(publishedAt desc, _updatedAt desc)[0...3] {
-    "slug": slug.current,
-    heading,
-    _createdAt,
-    _id,
-    ingress,
-    ${contributorsAll},
-
-  }
-}`;
-
 const landingsSideQuery = (t) => {
   const kat =
     t === "komponenter"
@@ -409,7 +410,7 @@ const landingsSideQuery = (t) => {
 
   return `"page": *[_type == "${t}_landingsside"][0]{
     ...,
-    ${kat.map((x) => `intro_${x.value}[]{...,${deRefs}}`).join(",")}
+    ${kat.map((x) => `intro_${x.value}[]{...,${destructureBlocks}}`).join(",")}
   }`;
 };
 
@@ -421,18 +422,6 @@ export const grunnleggendeLandingQuery = `{${sidebarQuery}, ${landingsSideQuery(
   "grunnleggende"
 )}, "links": *[_type == "ds_artikkel" && defined(kategori)]{_id,heading,"slug": slug,status,kategori}}`;
 
-export const akselStandaloneBySlug = `{
-  "page": *[slug.current == $slug && _type == "aksel_standalone"] | order(_updatedAt desc)[0]
-  {
-    ...,
-    "slug": slug.current,
-    content[]{
-      ...,
-      ${deRefs}
-    }
-  }
-}`;
-
 export const akselArticleFields = `
     _id,
     heading,

aksel.nav.no/website/lib/ts/index.ts

@@ -0,0 +1,2 @@
+export * from "./schema-types";
+export * from "./next";

aksel.nav.no/website/lib/ts/next.ts

@@ -0,0 +1,10 @@
+export type NextPageT<T> = {
+  props: T & {
+    slug?: string;
+    preview: boolean;
+    id: string;
+    title: string;
+  };
+  notFound: boolean;
+  revalidate?: number;
+};

aksel.nav.no/website/lib/ts/schema-types.ts

@@ -0,0 +1,47 @@
+import { bloggKategorier } from "../../sanity/config";
+
+export type ResolveSlugT<T> = Omit<T, "slug"> & {
+  slug: string;
+};
+
+export type ResolveContributorsT<T> = Omit<T, "contributors"> & {
+  contributors: { title: string }[];
+};
+
+type DocumentT<T> = {
+  _createdAt: string;
+  _updatedAt: string;
+  _id: string;
+  _rev?: string;
+  _type: T;
+};
+
+type ArticleT = {
+  publishedAt?: string;
+  heading: string;
+  slug: {
+    current: string;
+  };
+  contributors: {
+    _ref: string;
+  }[];
+  ingress: string;
+  content: any[];
+  seo?: {
+    meta?: string;
+    image?: any;
+  };
+};
+
+export interface AkselStandaloneDocT
+  extends DocumentT<"aksel_standalone">,
+    Omit<ArticleT, "ingress" | "contributors" | "seo"> {}
+
+export interface AkselBloggFrontpageT extends DocumentT<"blogg_landingsside"> {
+  intro: any[];
+  seo?: ArticleT["seo"];
+}
+
+export interface AkselBloggDocT extends DocumentT<"aksel_blogg">, ArticleT {
+  kategori: typeof bloggKategorier[number]["value"];
+}

aksel.nav.no/website/lib/types/search.ts

@@ -1,11 +1,7 @@
 import { allArticleDocuments } from "../../sanity/config";
 
 export const options: {
-  [K in
-    | typeof allArticleDocuments[number]
-    | "icon"
-    | "aksel_standalone"
-    | "icon_page"]: {
+  [K in typeof allArticleDocuments[number] | "icon" | "icon_page"]: {
     display: string;
     index: number;
     hidden?: boolean;

aksel.nav.no/website/package.json

@@ -52,6 +52,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-modal": "3.15.1",
+    "react-responsive-masonry": "^2.1.7",
     "recharts": "^2.2.0",
     "sanity": "3.7.0",
     "sanity-plugin-asset-source-unsplash": "^1.0.6",

aksel.nav.no/website/pages/_app.tsx

@@ -11,22 +11,6 @@ import { useEffect } from "react";
 import { IdContext } from "../components/website-modules/utils/contexts/id-context";
 import "../styles/index.css";
 
-/*
-** Task Analytics placeholder **
-
-import Script from "next/script";
-{!router.asPath.startsWith("/eksempler") &&
-!router.asPath.startsWith("/admin") && (
-  <>
-    <Script src="https://in2.taskanalytics.com/tm.js"></Script>
-    <Script id="task-analytics" nonce="4e1aa203a32e">
-      {`window.TA = window.TA||function(){(TA.q=TA.q||[]).push(arguments);};
-  window.TA('start', '03346')`}
-    </Script>
-  </>
-)}
-*/
-
 initAmplitude();
 
 function App({

aksel.nav.no/website/pages/api/search/v1/index.ts

@@ -45,7 +45,7 @@ export default async function initialSearch(
       : req.query.doc;
     doc = queryDoc.split(",");
   } else {
-    doc = [...allArticleDocuments, "icon", "aksel_standalone", "icon_page"];
+    doc = [...allArticleDocuments, "icon", "icon_page"];
   }
 
   const query = Array.isArray(req.query.q)
@@ -182,10 +182,9 @@ function formatResults(res: FuseHits[], query: string): SearchHit[] {
 let data = null;
 
 async function searchSanity() {
-  const sanityQueryHttp = `*[_type in [${[
-    ...allArticleDocuments,
-    "aksel_standalone",
-  ].map((x) => `"${x}"`)}] ]{
+  const sanityQueryHttp = `*[_type in [${allArticleDocuments.map(
+    (x) => `"${x}"`
+  )}] ]{
     ${akselArticleFields}
     "intro": pt::text(intro.body),
     "content": content[]{...,

aksel.nav.no/website/pages/api/search/v1/initial.ts

@@ -1,62 +0,0 @@
-import { akselArticleFields } from "@/lib";
-import { getClient } from "@/sanity-client";
-import { NextApiRequest, NextApiResponse } from "next";
-import { allArticleDocuments } from "../../../../sanity/config";
-
-/*
-TODO: nyeste artikler basert på kategori (alle, god praksis, komponenter etc)
-*/
-export default async function initialSearch(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  if (req.method !== "GET") {
-    return res.status(405).json({ message: "Method not allowed" });
-  }
-
-  const query = `*[_type in $types && defined(publishedAt)] | order(publishedAt desc)[0...12] {
-    ${akselArticleFields}
-  }`;
-
-  let doc;
-  if (req.query?.doc) {
-    const queryDoc = Array.isArray(req.query.doc)
-      ? req.query.doc.join("")
-      : req.query.doc;
-    doc = queryDoc.split(",");
-  } else {
-    doc = allArticleDocuments;
-  }
-
-  const payload = [];
-
-  await getClient()
-    .fetch(query, { types: doc })
-    .then((data) => {
-      payload.push(...data);
-      return data;
-    })
-    .catch((err) => {
-      console.log("Error message: ", err.message);
-      return res.status(500).json({ message: "Failed to load data" });
-    });
-
-  return res.status(200).json(payload);
-}
-
-/*
-
-*[_type in [
-  "aksel_artikkel",
-  "komponent_artikkel",
-  "ds_artikkel",
-  "aksel_blogg",
-  "aksel_prinsipp",
-]] | score(
-  boost(heading match $term2, 7),
-  boost(heading match $term, 10),
-  boost(pt::text(content) match $term, 2),
-  boost(ingress match $term2, 2),
-  boost(pt::text(intro_komponent.body) match $term2, 3)
-) [0...10]{heading, _score}
-*/

aksel.nav.no/website/pages/god-praksis/artikler/index.tsx

@@ -57,7 +57,7 @@ const Artikler = ({ articles }: ArtiklerProps) => {
         >
           <div className="relative grid overflow-x-clip pb-40">
             <AkselCubeStatic className="text-deepblue-300 opacity-5 " />
-            <div className="dynamic-wrapper centered-layout">
+            <div className="dynamic-wrapper mx-auto w-full px-4 sm:px-6">
               <Heading
                 level="1"
                 size="xlarge"

aksel.nav.no/website/pages/god-praksis/index.tsx

@@ -8,7 +8,6 @@ import { Header } from "components/layout/header/Header";
 import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
 import GodPraksisCard from "components/sanity-modules/cards/GodPraksisCard";
 import { AkselCubeStatic } from "components/website-modules/cube";
-import { ToolCard } from "components/website-modules/ToolsCard";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import React, { lazy } from "react";
@@ -65,7 +64,7 @@ const Page = ({ temaer, page, resent }: PageProps): JSX.Element => {
           id="hovedinnhold"
           className=" min-h-[80vh]  focus:outline-none"
         >
-          <div className="centered-layout mb-40 grid max-w-screen-2xl pt-20">
+          <div className="mx-auto mb-40 grid w-full max-w-screen-2xl px-4 pt-20 sm:px-6">
             <Heading
               level="1"
               size="xlarge"
@@ -96,7 +95,7 @@ const Page = ({ temaer, page, resent }: PageProps): JSX.Element => {
                 size="medium"
                 className="text-deepblue-800 flex items-center gap-4"
               >
-                <Clock aria-hidden className="shrink-0" /> Nylige artikler
+                <Clock aria-hidden className="shrink-0" /> Nyeste artikler
               </Heading>
               <div className="card-grid-3-1 my-6">
                 {resent.map((art: any) => (
@@ -109,9 +108,6 @@ const Page = ({ temaer, page, resent }: PageProps): JSX.Element => {
                 ))}
               </div>
             </div>
-            <div className="mt-20">
-              <ToolCard />
-            </div>
           </div>
         </main>
         <Footer />

aksel.nav.no/website/pages/index.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import { Footer } from "@/layout";
+
 import { akselForsideQuery, SanityT, urlFor } from "@/lib";
 import { getClient } from "@/sanity-client";
+import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
 import {
   CompassIcon,
   ComponentIcon,
@@ -12,21 +14,20 @@ import {
 import { Heading, Ingress } from "@navikt/ds-react";
 import cl from "clsx";
 import { Header } from "components/layout/header/Header";
-import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
 import GodPraksisCardSimple from "components/sanity-modules/cards/GodPraksisCardSimple";
-import AkselLink from "components/website-modules/AkselLink";
 import { AkselCube } from "components/website-modules/cube";
 import { IntroCards } from "components/website-modules/IntroCards";
-import { LatestBloggposts } from "components/website-modules/LatestBloggs";
-import { ToolCard } from "components/website-modules/ToolsCard";
 import { PrefersReducedMotion } from "components/website-modules/utils/prefers-reduced-motion";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import { lazy, useEffect, useState } from "react";
+import FrontpageBlock, {
+  BlocksT,
+} from "components/sanity-modules/frontpage-blocks/FrontpageBlocks";
 
 const WithPreview = lazy(() => import("../components/WithPreview"));
 
-const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
+const Forside = ({ page, tema, blocks }: PageProps): JSX.Element => {
   const [pause, setPause] = useState(false);
   const [reducedMotion, setReducedMotion] = useState(false);
 
@@ -103,7 +104,7 @@ const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
 
         <main tabIndex={-1} id="hovedinnhold" className="focus:outline-none">
           <div className="z-20 pb-28">
-            <div className="centered-layout relative mb-12 mt-20 grid place-items-center text-center sm:mt-36 sm:max-w-[632px]">
+            <div className="relative mx-auto mb-12 mt-20 grid w-full place-items-center px-4 text-center sm:mt-36 sm:max-w-[632px] sm:px-6">
               <Heading
                 level="1"
                 size="xlarge"
@@ -135,12 +136,13 @@ const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
                   href: "/ikoner",
                 },
               ]}
-              className="centered-layout mb-40 max-w-md grid-cols-1 sm:mb-36 md:max-w-screen-lg md:grid-cols-3"
+              className="mx-auto mb-40 w-full max-w-md grid-cols-1 px-4 sm:mb-36 sm:px-6 md:max-w-screen-lg md:grid-cols-3"
               variant="forside"
             />
           </div>
-          <div className="bg-surface-subtle min-h-96 relative pb-72 md:pb-40">
-            <div className="centered-layout grid max-w-screen-2xl">
+
+          <div className="bg-surface-subtle min-h-96 relative pb-20">
+            <div className="mx-auto grid w-full max-w-screen-2xl px-4 sm:px-6">
               {/* God praksis */}
               <div className="bg-surface-default ring-border-subtle mx-auto w-full -translate-y-48 rounded-2xl px-4 py-12 ring-1 sm:-translate-y-32 sm:px-12 sm:py-20">
                 {!reducedMotion && (
@@ -189,40 +191,11 @@ const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
               </div>
 
               <div className="-mt-24 sm:-mt-12">
-                <Heading level="3" size="medium" className="text-deepblue-800">
-                  Siste fra God praksis
-                </Heading>
-                <div className="card-grid-3-1 my-6">
-                  {resent.map((art: any) => (
-                    <ArtikkelCard
-                      level="4"
-                      variant="tema"
-                      {...art}
-                      key={art._id}
-                    />
-                  ))}
-                </div>
-                <AkselLink href="/god-praksis/artikler">
-                  Utforsk alle artikler i God praksis
-                </AkselLink>
+                <FrontpageBlock blocks={blocks} />
               </div>
             </div>
           </div>
-          <div className="bg-surface-default relative pb-36">
-            <div className="centered-layout -translate-y-1/2">
-              <ToolCard />
-            </div>
-            <div className="centered-layout -mt-16 grid max-w-screen-2xl md:mt-8 ">
-              <LatestBloggposts
-                bloggs={bloggs}
-                title="Siste fra bloggen"
-                variant="forside"
-                level="2"
-              />
-            </div>
-          </div>
         </main>
-
         <Footer />
       </div>
     </>
@@ -243,12 +216,7 @@ const Page = (props: PageProps): JSX.Element => {
 
 interface PageProps {
   tema: SanityT.Schema.aksel_tema[];
-  bloggs: Partial<
-    SanityT.Schema.aksel_blogg & {
-      slug: string;
-      contributors?: { title?: string }[];
-    }
-  >[];
+  bloggs: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>[];
   page: {
     title: string;
     god_praksis_intro: string;
@@ -260,6 +228,7 @@ interface PageProps {
       tema: string[];
       contributors?: { title?: string }[];
     }[];
+  blocks?: BlocksT[];
   slug: string;
   preview: boolean;
 }
@@ -273,17 +242,15 @@ export const getStaticProps = async ({
 
   const {
     page = null,
-    bloggs = null,
     tema = null,
-    resent = null,
+    blocks = null,
   } = await client.fetch(akselForsideQuery);
 
   return {
     props: {
       tema,
-      bloggs,
       page,
-      resent,
+      blocks,
       slug: "/",
       preview,
       id: page?._id ?? "",

aksel.nav.no/website/pages/produktbloggen/[slug].tsx

@@ -1,6 +1,12 @@
-import { akselBloggBySlug, SanityT, urlFor } from "@/lib";
+import { contributorsAll, destructureBlocks, urlFor } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity-client";
+import {
+  AkselBloggDocT,
+  NextPageT,
+  ResolveContributorsT,
+  ResolveSlugT,
+} from "@/types";
 import { abbrName, dateStr } from "@/utils";
 import { BodyShort, Detail, Heading, Ingress } from "@navikt/ds-react";
 import Footer from "components/layout/footer/Footer";
@@ -18,22 +24,53 @@ import { GetServerSideProps } from "next/types";
 import { lazy } from "react";
 import NotFotfund from "../404";
 
-const Page = ({
-  blogg,
-  morePosts,
-}: {
-  slug?: string;
-  blogg: SanityT.Schema.aksel_blogg;
-  morePosts: Partial<
-    SanityT.Schema.aksel_blogg & {
-      slug: string;
-      contributors?: {
-        title?: string;
-      }[];
-    }
-  >[];
-  preview: boolean;
-}): JSX.Element => {
+type PageProps = NextPageT<{
+  blogg: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>;
+  morePosts: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>[];
+}>;
+
+export const query = `{
+  "blogg": *[slug.current == $slug && _type == "aksel_blogg"] | order(_updatedAt desc)[0]
+  {
+    ...,
+    "slug": slug.current,
+    content[]{
+      ...,
+      ${destructureBlocks}
+    },
+    ${contributorsAll}
+  },
+  "morePosts": *[_type == "aksel_blogg" && slug.current != $slug] | order(publishedAt desc, _updatedAt desc)[0...3] {
+    "slug": slug.current,
+    heading,
+    _createdAt,
+    _id,
+    ingress,
+    ${contributorsAll},
+  }
+}`;
+
+export const getServerSideProps: GetServerSideProps = async (
+  context
+): Promise<PageProps> => {
+  const { blogg, morePosts } = await getClient().fetch(query, {
+    slug: `produktbloggen/${context.params.slug}`,
+  });
+
+  return {
+    props: {
+      blogg,
+      morePosts,
+      slug: context.params.slug as string,
+      preview: context.preview ?? false,
+      id: blogg?._id ?? "",
+      title: blogg?.heading ?? "",
+    },
+    notFound: !blogg && !context.preview,
+  };
+};
+
+const Page = ({ blogg, morePosts }: PageProps["props"]) => {
   if (!blogg) {
     return <NotFotfund />;
   }
@@ -95,7 +132,7 @@ const Page = ({
             <Heading
               level="1"
               size="xlarge"
-              className="hyphen text-deepblue-800 mt-1 break-words text-5xl leading-[1.2]"
+              className="text-deepblue-800 mt-1 break-words text-5xl leading-[1.2] [hyphens:_auto]"
             >
               {blogg.heading}
             </Heading>
@@ -224,9 +261,9 @@ const Wrapper = (props: any): JSX.Element => {
       <PreviewSuspense fallback={<Page {...props} />}>
         <WithPreview
           comp={Page}
-          query={akselBloggBySlug}
+          query={query}
           props={props}
-          params={{ slug: `produktbloggen/${props.slug}`, valid: "true" }}
+          params={{ slug: `produktbloggen/${props.slug}` }}
         />
       </PreviewSuspense>
     );
@@ -236,44 +273,3 @@ const Wrapper = (props: any): JSX.Element => {
 };
 
 export default Wrapper;
-
-interface StaticProps {
-  props: {
-    blogg: SanityT.Schema.aksel_blogg;
-    morePosts: Partial<
-      SanityT.Schema.aksel_blogg & {
-        slug: string;
-        contributors?: {
-          title?: string;
-        }[];
-      }
-    >[];
-    slug: string;
-    preview: boolean;
-    validUser?: boolean;
-    id?: string;
-    title: string;
-  };
-  notFound: boolean;
-}
-
-export const getServerSideProps: GetServerSideProps = async (
-  context
-): Promise<StaticProps | { notFound: true }> => {
-  const { blogg, morePosts } = await getClient().fetch(akselBloggBySlug, {
-    slug: `produktbloggen/${context.params.slug}`,
-    valid: "true",
-  });
-
-  return {
-    props: {
-      blogg,
-      morePosts,
-      slug: context.params.slug as string,
-      preview: context.preview ?? false,
-      id: blogg?._id ?? "",
-      title: blogg?.heading ?? "",
-    },
-    notFound: !blogg && !context.preview,
-  };
-};

aksel.nav.no/website/pages/produktbloggen/index.tsx

@@ -1,6 +1,13 @@
 import { Footer } from "@/layout";
-import { akselBloggPosts, SanityT, urlFor } from "@/lib";
+import { contributorsAll, destructureBlocks, urlFor } from "@/lib";
 import { getClient } from "@/sanity-client";
+import {
+  AkselBloggDocT,
+  AkselBloggFrontpageT,
+  NextPageT,
+  ResolveContributorsT,
+  ResolveSlugT,
+} from "@/types";
 import { Heading } from "@navikt/ds-react";
 import { Header } from "components/layout/header/Header";
 import BloggCard from "components/sanity-modules/cards/BloggCard";
@@ -12,7 +19,46 @@ import Head from "next/head";
 import { lazy } from "react";
 import NotFotfund from "../404";
 
-const Page = (props: PageProps): JSX.Element => {
+type PageProps = NextPageT<{
+  page: AkselBloggFrontpageT;
+  bloggposts: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>[];
+}>;
+
+export const query = `*[_type == "blogg_landingsside"][0]{
+  "page": {..., intro[]{...,${destructureBlocks}}},
+  "bloggposts": *[_type == "aksel_blogg"] | order(_createdAt desc){
+    seo,
+    heading,
+    ingress,
+    publishedAt,
+    _createdAt,
+    _id,
+    "slug": slug.current,
+    ${contributorsAll}
+  }
+}`;
+
+export const getStaticProps = async ({
+  preview = false,
+}: {
+  preview?: boolean;
+}): Promise<PageProps> => {
+  const { bloggposts, page } = await getClient().fetch(query);
+
+  return {
+    props: {
+      page,
+      bloggposts,
+      preview,
+      title: "Forside Blogg",
+      id: page?._id ?? "",
+    },
+    notFound: !bloggposts && !preview,
+    revalidate: 60,
+  };
+};
+
+const Page = (props: PageProps["props"]): JSX.Element => {
   if (!props.bloggposts) {
     return <NotFotfund />;
   }
@@ -57,7 +103,7 @@ const Page = (props: PageProps): JSX.Element => {
           className="relative min-h-[80vh] overflow-hidden focus:outline-none"
         >
           <AkselCubeStatic className="text-[#FFE78A] opacity-10" />
-          <div className="centered-layout mb-40 grid max-w-screen-2xl">
+          <div className="mx-auto mb-40 grid w-full max-w-screen-2xl px-4 sm:px-6">
             <LatestBloggposts
               bloggs={props?.bloggposts}
               title="Blogg"
@@ -93,7 +139,7 @@ const Wrapper = (props: any): JSX.Element => {
   if (props?.preview) {
     return (
       <PreviewSuspense fallback={<Page {...props} />}>
-        <WithPreview comp={Page} query={akselBloggPosts} props={props} />
+        <WithPreview comp={Page} query={query} props={props} />
       </PreviewSuspense>
     );
   }
@@ -102,42 +148,3 @@ const Wrapper = (props: any): JSX.Element => {
 };
 
 export default Wrapper;
-
-export type AkselBloggPage = Partial<
-  SanityT.Schema.aksel_blogg & {
-    slug: string;
-    contributors?: { title?: string }[];
-  }
->;
-
-interface PageProps {
-  bloggposts: AkselBloggPage[];
-  page: any;
-  preview: boolean;
-  title: string;
-}
-
-interface StaticProps {
-  props: PageProps;
-  notFound: boolean;
-  revalidate: number;
-}
-
-export const getStaticProps = async ({
-  preview = false,
-}: {
-  preview?: boolean;
-}): Promise<StaticProps | { notFound: true }> => {
-  const { bloggposts, page } = await getClient().fetch(akselBloggPosts);
-
-  return {
-    props: {
-      page,
-      bloggposts,
-      preview,
-      title: "Forside Blogg",
-    },
-    notFound: !bloggposts && !preview,
-    revalidate: 60,
-  };
-};

aksel.nav.no/website/pages/side/[slug].tsx

@@ -1,5 +1,4 @@
 import { TableOfContents } from "@/components";
-import { akselStandaloneBySlug, SanityT } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity-client";
 import { Heading } from "@navikt/ds-react";
@@ -9,15 +8,45 @@ import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import { GetServerSideProps } from "next/types";
 import React, { lazy } from "react";
+import { AkselStandaloneDocT, NextPageT, ResolveSlugT } from "@/types";
 import NotFotfund from "../404";
+import { destructureBlocks } from "lib/sanity/queries";
 
-const Page = ({
-  page,
-}: {
-  slug?: string;
-  page: SanityT.Schema.aksel_standalone;
-  preview: boolean;
-}): JSX.Element => {
+type PageProps = NextPageT<{ page: ResolveSlugT<AkselStandaloneDocT> }>;
+
+export const query = `{
+  "page": *[slug.current == $slug && _type == "aksel_standalone"] | order(_updatedAt desc)[0]
+  {
+    ...,
+    "slug": slug.current,
+    content[]{
+      ...,
+      ${destructureBlocks}
+    }
+  }
+}`;
+
+export const getServerSideProps: GetServerSideProps = async (
+  context
+): Promise<PageProps> => {
+  const { page } = await getClient().fetch(query, {
+    slug: `side/${context.params.slug}`,
+  });
+
+  return {
+    props: {
+      page,
+      slug: context.params.slug as string,
+      preview: context.preview ?? false,
+      id: page?._id ?? "",
+      title: page?.heading ?? "",
+    },
+    notFound: !page && !context.preview,
+  };
+};
+
+/* Standalone-sider */
+const Page = ({ page }: PageProps["props"]) => {
   if (!page) {
     return <NotFotfund />;
   }
@@ -74,7 +103,7 @@ const Wrapper = (props: any): JSX.Element => {
       <PreviewSuspense fallback={<Page {...props} />}>
         <WithPreview
           comp={Page}
-          query={akselStandaloneBySlug}
+          query={query}
           props={props}
           params={{
             slug: `side/${props.slug}`,
@@ -88,34 +117,3 @@ const Wrapper = (props: any): JSX.Element => {
 };
 
 export default Wrapper;
-
-interface StaticProps {
-  props: {
-    page: SanityT.Schema.aksel_standalone;
-    slug: string;
-    preview: boolean;
-    validUser?: boolean;
-    id: string;
-    title: string;
-  };
-  notFound: boolean;
-}
-
-export const getServerSideProps: GetServerSideProps = async (
-  context
-): Promise<StaticProps | { notFound: true }> => {
-  const { page } = await getClient().fetch(akselStandaloneBySlug, {
-    slug: `side/${context.params.slug}`,
-  });
-
-  return {
-    props: {
-      page,
-      slug: context.params.slug as string,
-      preview: context.preview ?? false,
-      id: page?._id ?? "",
-      title: page?.heading ?? "",
-    },
-    notFound: !page && !context.preview,
-  };
-};

aksel.nav.no/website/public/images/navlogo.svg

@@ -1,61 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg
-  width="269px"
-  height="169px"
-  viewBox="0 0 269 169"
-  version="1.1"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
->
-  <title>NAV logo / rød</title>
-  <defs>
-    <polygon
-      id="path-1"
-      points="22.407 43.4168 22.407 0.6878 0.5635 0.6878 0.5635 43.4168 22.407 43.4168"
-    ></polygon>
-  </defs>
-  <g
-    id="Modul-forslag"
-    stroke="none"
-    stroke-width="1"
-    fill="none"
-    fill-rule="evenodd"
-  >
-    <g id="NAV-logo-/-rød">
-      <g id="Page-1-Copy">
-        <path
-          d="M125.3091,168.942 C78.6681,168.942 40.8491,131.125 40.8491,84.477 C40.8491,37.824 78.6681,0 125.3091,0 C171.9671,0 209.7901,37.824 209.7901,84.477 C209.7901,131.125 171.9671,168.942 125.3091,168.942 Z"
-          id="Fill-1"
-          fill="#C30000"
-        ></path>
-        <polygon
-          id="Fill-3"
-          fill="#C30000"
-          points="0 121.3588 17.265 78.6298 33.854 78.6298 16.611 121.3588"
-        ></polygon>
-        <polygon
-          id="Fill-5"
-          fill="#C30000"
-          points="213.044 121.3588 230.088 78.6298 239.132 78.6298 222.089 121.3588"
-        ></polygon>
-        <g id="Group-9" transform="translate(246.000000, 77.942000)">
-          <mask id="mask-2" fill="white">
-            <use xlink:href="#path-1"></use>
-          </mask>
-          <g id="Clip-8"></g>
-          <polygon
-            id="Fill-7"
-            fill="#C30000"
-            mask="url(#mask-2)"
-            points="0.5635 43.4168 17.6045 0.6878 22.4075 0.6878 5.3645 43.4168"
-          ></polygon>
-        </g>
-        <path
-          d="M197.3604,78.6298 L182.3444,78.6298 C182.3444,78.6298 181.3094,78.6298 180.9434,79.5438 L172.6334,104.9828 L164.3304,79.5438 C163.9644,78.6298 162.9234,78.6298 162.9234,78.6298 L134.0514,78.6298 C133.4264,78.6298 132.9024,79.1518 132.9024,79.7728 L132.9024,88.4118 C132.9024,81.5588 125.6104,78.6298 121.3404,78.6298 C111.7784,78.6298 105.3774,84.9278 103.3844,94.5028 C103.2764,88.1508 102.7484,85.8748 101.0374,83.5438 C100.2514,82.4018 99.1154,81.4418 97.8784,80.6478 C95.3314,79.1558 93.0444,78.6298 88.1294,78.6298 L82.3584,78.6298 C82.3584,78.6298 81.3154,78.6298 80.9474,79.5438 L75.6964,92.5568 L75.6964,79.7728 C75.6964,79.1518 75.1764,78.6298 74.5524,78.6298 L61.1984,78.6298 C61.1984,78.6298 60.1674,78.6298 59.7924,79.5438 L54.3334,93.0748 C54.3334,93.0748 53.7884,94.4278 55.0344,94.4278 L60.1674,94.4278 L60.1674,120.2118 C60.1674,120.8518 60.6714,121.3588 61.3144,121.3588 L74.5524,121.3588 C75.1764,121.3588 75.6964,120.8518 75.6964,120.2118 L75.6964,94.4278 L80.8564,94.4278 C83.8174,94.4278 84.4444,94.5088 85.5964,95.0458 C86.2904,95.3078 86.9154,95.8378 87.2564,96.4488 C87.9544,97.7628 88.1294,99.3408 88.1294,103.9938 L88.1294,120.2118 C88.1294,120.8518 88.6434,121.3588 89.2784,121.3588 L101.9664,121.3588 C101.9664,121.3588 103.4004,121.3588 103.9674,119.9428 L106.7794,112.9928 C110.5184,118.2298 116.6724,121.3588 124.3204,121.3588 L125.9914,121.3588 C125.9914,121.3588 127.4344,121.3588 128.0054,119.9428 L132.9024,107.8148 L132.9024,120.2118 C132.9024,120.8518 133.4264,121.3588 134.0514,121.3588 L147.0034,121.3588 C147.0034,121.3588 148.4324,121.3588 149.0064,119.9428 C149.0064,119.9428 154.1864,107.0818 154.2064,106.9848 L154.2144,106.9848 C154.4134,105.9148 153.0614,105.9148 153.0614,105.9148 L148.4384,105.9148 L148.4384,83.8468 L162.9834,119.9428 C163.5514,121.3588 164.9834,121.3588 164.9834,121.3588 L180.2844,121.3588 C180.2844,121.3588 181.7244,121.3588 182.2924,119.9428 L198.4174,80.0138 C198.9754,78.6298 197.3604,78.6298 197.3604,78.6298 L197.3604,78.6298 Z M132.9024,105.9148 L124.2024,105.9148 C120.7394,105.9148 117.9224,103.1108 117.9224,99.6438 C117.9224,96.1828 120.7394,93.3608 124.2024,93.3608 L126.6354,93.3608 C130.0894,93.3608 132.9024,96.1828 132.9024,99.6438 L132.9024,105.9148 Z"
-          id="Fill-10"
-          fill="#FEFEFE"
-        ></path>
-      </g>
-    </g>
-  </g>
-</svg>

aksel.nav.no/website/sanity/config.ts

@@ -4,6 +4,7 @@ export const allArticleDocuments = [
   "aksel_artikkel",
   "aksel_blogg",
   "aksel_prinsipp",
+  "aksel_standalone",
 ] as const;
 
 export const previews = [
@@ -33,7 +34,6 @@ export const komponentKategorier = [
 export const grunnleggendeKategorier = [
   { title: "Styling", value: "styling" },
   { title: "Guider", value: "guider" },
-  { title: "Stæsj", value: "staesj" },
   { title: "Design", value: "design" },
   { title: "Kode", value: "kode" },
   { title: "Nedlastbart", value: "nedlastbart" },
@@ -45,7 +45,7 @@ export const bloggKategorier = [
   { title: "Nytt fra teamene", value: "nytt-fra-teamene" },
   { title: "Da vi gjorde dette", value: "da-vi-gjorde-dette" },
   { title: "På reise", value: "pa-reise" },
-];
+] as const;
 
 export const prinsippKategorier = [
   { title: "Brukeropplevelse", value: "brukeropplevelse" },

aksel.nav.no/website/sanity/plugins/structure/index.tsx

@@ -252,7 +252,7 @@ export const structure = async (
               S.divider(),
               ...(await PanesWithCount(
                 "aksel_blogg",
-                bloggKategorier,
+                [...bloggKategorier],
                 getClient,
                 S
               )),

aksel.nav.no/website/sanity/sanity.config.tsx

@@ -7,15 +7,11 @@ import { createAuthStore, defineConfig } from "sanity";
 import { unsplashImageAsset } from "sanity-plugin-asset-source-unsplash";
 import { media } from "sanity-plugin-media";
 import { deskTool } from "sanity/desk";
-import {
-  defaultDocumentNode,
-  publicationFlow,
-  structure,
-} from "./custom-plugins";
+import { defaultDocumentNode, publicationFlow, structure } from "./plugins";
 
 import { getTemplates } from "./util";
 
-import { DatabaseIcon } from "@sanity/icons";
+import { DatabaseIcon, RemoveCircleIcon } from "@sanity/icons";
 import { allArticleDocuments } from "./config";
 import { schema } from "./schema";
 
@@ -31,8 +27,7 @@ export const workspaceConfig = defineConfig([
     icon: DatabaseIcon,
     auth: authStore("production"),
   },
-  /* https://github.com/sanity-io/sanity/issues/3992 */
-  /* {
+  {
     ...defaultConfig(),
     title: "Aksel Dev-miljø",
     name: "dev",
@@ -40,7 +35,7 @@ export const workspaceConfig = defineConfig([
     basePath: "/admin/dev",
     icon: RemoveCircleIcon,
     auth: authStore("development"),
-  }, */
+  },
 ]);
 
 function defaultConfig() {
@@ -109,18 +104,12 @@ function authStore(dataset: string) {
         name: "saml",
         title: "NAV SSO",
         url: "https://api.sanity.io/v2021-10-01/auth/saml/login/f3270b37",
-        logo: "/images/navlogo.svg",
       },
       {
         name: "github",
         title: "GitHub",
         url: "https://api.sanity.io/v1/auth/login/github",
       },
-      {
-        name: "google",
-        title: "Google",
-        url: "https://api.sanity.io/v1/auth/login/google",
-      },
     ],
   });
 }

aksel.nav.no/website/sanity/schema/custom-components/index.ts

@@ -1,4 +1,4 @@
-export * from "../../custom-plugins/structure/Metrics";
+export * from "../../plugins/structure/Metrics";
 export * from "./InputWithCounter";
 export * from "./updateInfo";
 export * from "./WriteHelp";

aksel.nav.no/website/sanity/schema/documents/forside.tsx

@@ -1,4 +1,5 @@
 import { defineField, defineType } from "sanity";
+import { allArticleDocsRef } from "../../config";
 import { groups } from "./presets";
 import { SEOFields } from "./presets/seo";
 
@@ -14,6 +15,47 @@ export const Forside = defineType({
       type: "text",
       validation: (Rule) => Rule.required(),
     }),
+    defineField({
+      title: "Blokker",
+      name: "blocks",
+      type: "array",
+      of: [
+        defineField({
+          title: "Nytt fra Aksel",
+          name: "nytt_fra_aksel",
+          type: "object",
+          validation: (Rule) => Rule.required(),
+          fields: [
+            defineField({
+              title: "Fremhevet artikkler",
+              name: "highlights",
+              type: "array",
+              validation: (Rule) => Rule.max(2).required(),
+              of: [
+                defineField({
+                  title: "Fremhevet artikkel",
+                  name: "highlight",
+                  type: "reference",
+                  hidden: ({ value }) => !value,
+                  to: [...allArticleDocsRef],
+                  validation: (Rule) => Rule.required(),
+                }),
+              ],
+            }),
+          ],
+          preview: {
+            prepare() {
+              return { title: "Nytt fra Aksel" };
+            },
+          },
+        }),
+      ],
+    }),
     SEOFields,
   ],
+  preview: {
+    prepare() {
+      return { title: "Forside Aksel" };
+    },
+  },
 });

aksel.nav.no/website/sanity/schema/documents/index.ts

@@ -20,4 +20,3 @@ export * from "./publiseringsflyt";
 export * from "./redirects";
 export * from "./skrivehjelp";
 export * from "./standalone-artikkel";
-export * from "./testDoc";

aksel.nav.no/website/sanity/schema/documents/presets/artikkel-preview.tsx

@@ -16,12 +16,9 @@ export const artikkelPreview = (_type: string) => {
       prepare(selection) {
         const { heading, tema, kategori, type, updateInfo } = selection;
         if (
-          [
-            "ds_artikkel",
-            "aksel_artikkel",
-            "komponent_artikkel",
-            "testDoc",
-          ].includes(type) &&
+          ["ds_artikkel", "aksel_artikkel", "komponent_artikkel"].includes(
+            type
+          ) &&
           updateInfo
         ) {
           /* const diff = Math.abs(

aksel.nav.no/website/sanity/schema/documents/testDoc.tsx

@@ -1,36 +0,0 @@
-import { defineField, defineType } from "sanity";
-import { groups } from "./presets";
-import { artikkelPreview } from "./presets/artikkel-preview";
-import { oppdateringsvarsel } from "./presets/oppdateringsvarsel";
-import { SEOFields } from "./presets/seo";
-import { skrivehjelp } from "./presets/skrivehjelp";
-
-export const TestDoc = defineType({
-  title: "Test",
-  name: "testDoc",
-  type: "document",
-  groups,
-  ...artikkelPreview("TestDoc"),
-  fields: [
-    defineField({
-      name: "slug",
-      title: "Slug",
-      type: "slug",
-    }),
-    oppdateringsvarsel,
-    defineField({
-      name: "testInput",
-      title: "Test input",
-      type: "string",
-      validation: (Rule) => Rule.required(),
-      options: {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        //@ts-ignore
-        maxLength: 10,
-      },
-    }),
-    defineField({ type: "riktekst_standard", name: "content" }),
-    SEOFields,
-    skrivehjelp,
-  ],
-});

aksel.nav.no/website/sanity/schema/index.ts

@@ -8,7 +8,6 @@ export const schema: SchemaPluginOptions = {
     document.Editors,
     document.Forside,
     document.Redirect,
-    document.TestDoc,
     document.Skrivehjelp,
     document.Publiseringsflyt,
     document.Feedback,
@@ -63,6 +62,7 @@ export const schema: SchemaPluginOptions = {
     object.RiktekstStandard,
     object.RiktekstPrinsipp,
     object.RiktekstStandalone,
+    object.RiktekstAccordion,
 
     /* Komponentsider */
     object.PropsSeksjon,

aksel.nav.no/website/sanity/schema/objects/shared/expansion-card.tsx

@@ -38,8 +38,10 @@ export const ExpansionCard = defineType({
     }),
     defineField({
       title: "Innhold",
+      description:
+        "Hvis du bruker Heading, husk å dobbelsjekke heading-nivået.",
       name: "body",
-      type: "riktekst_enkel",
+      type: "riktekst_accordion",
       validation: (Rule) =>
         Rule.required().error("ExpansionCard må ha innhold"),
     }),

aksel.nav.no/website/sanity/schema/objects/shared/riktekst.tsx

@@ -123,8 +123,9 @@ const Riktekst = (
     | "prinsipp"
     | "standard"
     | "standalone"
+    | "accordion"
 ) => {
-  const fields: string[] = [];
+  let fields: string[] = [];
   const standard = [
     "relatert_innhold",
     "bilde",
@@ -138,6 +139,17 @@ const Riktekst = (
     "video",
   ];
 
+  const accordion = [
+    "relatert_innhold",
+    "video",
+    "bilde",
+    "kode",
+    "tips",
+    "do_dont",
+    "alert",
+    "tabell_v2",
+  ];
+
   const komponent = [
     "props_seksjon",
     "tastatur_modul",
@@ -162,6 +174,9 @@ const Riktekst = (
     case "standalone":
       fields.push("uufeedback");
       break;
+    case "accordion":
+      fields = [...accordion];
+      break;
     default:
       break;
   }
@@ -217,6 +232,14 @@ export const RiktekstEnkel = {
   icon: FileContent,
 };
 
+export const RiktekstAccordion = {
+  title: "Riktekst",
+  name: "riktekst_accordion",
+  type: "array",
+  of: Riktekst("accordion"),
+  icon: FileContent,
+};
+
 export const RiktekstStandalone = {
   title: "Riktekst",
   name: "riktekst_standalone",

aksel.nav.no/website/scripts/backup.js

@@ -1,4 +1,4 @@
-import sanityClient from "@sanity/client";
+import { createClient } from "@sanity/client";
 import exportDataset from "@sanity/export";
 import { config } from "../lib/sanity/config";
 const sanityToken = process.env.SANITY_PREVIEW_TOKEN;
@@ -7,7 +7,7 @@ if (!sanityToken) {
   throw new Error("Could not find token from SANITY_PREVIEW_TOKEN");
 }
 
-const client = sanityClient({
+const client = createClient({
   ...config,
   dataset: "production",
   token: sanityToken,

aksel.nav.no/website/scripts/examples/update-sanity.tsx

@@ -21,6 +21,7 @@ const main = async () => {
     token
   ).fetch(`*[_type == "kode_eksempler_fil"]`);
 
+  /* Delete fremoved examples */
   for (const doc of docs) {
     if (!examples.some((x) => doc._id === createId(x.path))) {
       transactionClient.delete(doc._id);

aksel.nav.no/website/styles/utilities.css

@@ -22,22 +22,10 @@ p.override-text-no-max {
   @apply mx-auto max-w-prose sm:w-[90%];
 }
 
-.dynamic-wrapper-left {
-  @apply max-w-prose sm:w-[90%];
-}
-
-.dynamic-wrapper-2xl {
-  @apply mx-auto max-w-2xl sm:w-[90%];
-}
-
 .card-grid-3-1 {
   @apply grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3;
 }
 
-.card-grid-2-1 {
-  @apply grid gap-3 md:grid-cols-2 md:gap-6;
-}
-
 .aksel-artikkel .aksel-list-ul li::before {
   content: url("data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxMSIKICBoZWlnaHQ9IjEwIgogIHZpZXdCb3g9IjAgMCAxMSAxMCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxyZWN0CiAgICB5PSI1IgogICAgd2lkdGg9IjgiCiAgICBoZWlnaHQ9IjgiCiAgICByeD0iMiIKICAgIHRyYW5zZm9ybT0icm90YXRlKC00NSAwIDUpIgogICAgZmlsbD0iIzAwNUI4MiIKICAvPgo8L3N2Zz4K");
   position: absolute;
@@ -60,28 +48,14 @@ p.override-text-no-max {
 
 .aksel-artikkel .aksel-list-ol li::before {
   counter-increment: li;
-  content: counter(li) ". ";
+  content: " ." counter(li);
   color: var(--a-deepblue-800);
   display: inline-block;
   width: 1em;
   margin-left: -1em;
-}
-
-.component-card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
-  gap: 1.5rem;
-}
-
-.hyphen {
-  -webkit-hyphens: auto;
-  hyphens: auto;
-}
-
-.component-token-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
-  gap: 1rem;
+  margin-right: 0.5em;
+  text-align: right;
+  direction: rtl;
 }
 
 .component-checkered-bg {
@@ -105,11 +79,3 @@ p.override-text-no-max {
   background-position: 0 0, 10px 10px;
   background-size: 20px 20px;
 }
-
-.full-bleed {
-  @apply relative left-1/2 right-1/2 -mx-[50vw] w-screen md:left-auto md:right-auto md:mx-auto md:w-full md:max-w-[85%];
-}
-
-.centered-layout {
-  @apply mx-auto w-full px-4 sm:px-6;
-}

aksel.nav.no/website/tsconfig.json

@@ -24,6 +24,7 @@
     "baseUrl": ".",
     "paths": {
       "@/components": ["components/index.ts"],
+      "@/types": ["lib/ts/index.ts"],
       "@/lib": ["lib/index.ts"],
       "@/pages/*": ["pages/*"],
       "@/sanity-block": ["components/SanityBlockContent.tsx"],

aksel.nav.no/website/tsconfig.tsnode.json

@@ -5,6 +5,7 @@
     "baseUrl": ".",
     "paths": {
       "@/components": ["components/index.ts"],
+      "@/types": ["lib/ts/index.ts"],
       "@/lib": ["lib/index.ts"],
       "@/pages/*": ["pages/*"],
       "@/sanity-block": ["components/SanityBlockContent.tsx"],

examples/shadow-dom/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "2.8.2",
-    "@navikt/ds-react": "2.8.2",
+    "@navikt/ds-css": "2.8.4",
+    "@navikt/ds-react": "2.8.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

yarn.lock

@@ -20544,6 +20544,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-responsive-masonry@npm:^2.1.7":
+  version: 2.1.7
+  resolution: "react-responsive-masonry@npm:2.1.7"
+  checksum: d8fd1838f73554809ecf2fbb29605abdd40eecaeb09caf549ea674e7e319e02fa7ff7aae978914b16f3a5f802d03a16402765a093e0bbb1d782665fd41632d97
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:^6.3.0":
   version: 6.8.0
   resolution: "react-router-dom@npm:6.8.0"
@@ -24871,6 +24878,7 @@ __metadata:
     react: ^18.0.0
     react-dom: ^18.0.0
     react-modal: 3.15.1
+    react-responsive-masonry: ^2.1.7
     recharts: ^2.2.0
     sanity: 3.7.0
     sanity-plugin-asset-source-unsplash: ^1.0.6