[Sanity/Aksel.nav.no] Sanity cleanup (#2499)

* ♻️ Sanity-id ut i const * ⚡ Flyttet sanity apiVersion ut i const * ⚡ Flyttet sanity dataset ut i const * 🏷️ Bedre typer structure * ⚡ La til blur på highlight-bilder * 💄 Cube ligger nå bak innhold på bloggen * 🔥 Fjernet gammel SEO fra sanity * ♻️ SEO og groups import sanity * ♻️ Ryddet opp i metadata * 🎉 Annotering av lenker i sanity * 🎨 Preview av kodemodul * 🎨 Preview for dodont * 🎨 Tips-preview * 🎨 Relatert innhold preview * 🔥 Fjernet console.log * 🐛 Fikset småfeil * 💄 Fikset darkmode-visning for preview
navikt · Nov 22, 2023 · 6ee4aa3 · 6ee4aa3
1 parent bb54661
commit 6ee4aa3
Show file tree

Hide file tree

Showing 58 changed files with 326 additions and 257 deletions.
diff --git a/aksel.nav.no/website/components/layout/header/Header.tsx b/aksel.nav.no/website/components/layout/header/Header.tsx
@@ -40,7 +40,7 @@ const Header = ({
   return (
     <header
       className={cl("z-20", {
-        "bg-[#FEFCE9]": variant === "blogg",
+        "bg-amber-50": variant === "blogg",
         "bg-surface-default": variant === "default",
         "bg-surface-subtle": variant === "subtle",
         "bg-surface-transparent": variant === "transparent",

diff --git a/aksel.nav.no/website/components/sanity-modules/do-dont/DoDont.tsx b/aksel.nav.no/website/components/sanity-modules/do-dont/DoDont.tsx
@@ -27,7 +27,7 @@ const Element = ({ block }: { block: DoDontT["blokker"][number] }) => {
         <BodyShort
           as="span"
           className={cl(
-            "relative z-[-1] flex items-center gap-1 rounded-t-lg px-4 py-2",
+            "text-text-default relative z-[-1] flex items-center gap-1 rounded-t-lg px-4 py-2",
             {
               "bg-surface-success-moderate": block.variant === "do",
               "bg-surface-danger-moderate": block.variant === "dont",

diff --git a/aksel.nav.no/website/components/sanity-modules/frontpage-blocks/latest-articles/Card.tsx b/aksel.nav.no/website/components/sanity-modules/frontpage-blocks/latest-articles/Card.tsx
@@ -1,4 +1,5 @@
 import ErrorBoundary from "@/error-boundary";
+import { useFormatedDate } from "@/hooks/useFormatedDate";
 import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { abbrName, getImage } from "@/utils";
@@ -7,7 +8,6 @@ import cl from "clsx";
 import NextImage from "next/legacy/image";
 import NextLink from "next/link";
 import { Tag } from "./Tag";
-import { useFormatedDate } from "@/hooks/useFormatedDate";
 
 export type ArticleT = {
   _key: string;
@@ -71,7 +71,13 @@ const Card = ({ article, visible, index }: CardProps) => {
           {article.status?.bilde ?? article.seo?.image ? (
             article.status?.bilde ? (
               <NextImage
-                src={urlFor(article.status?.bilde).auto("format").url()}
+                src={urlFor(article.status.bilde).auto("format").url()}
+                blurDataURL={urlFor(article.status.bilde)
+                  .width(24)
+                  .height(24)
+                  .blur(10)
+                  .url()}
+                placeholder="blur"
                 width="200"
                 height="200"
                 alt={article.heading + " thumbnail"}
@@ -81,6 +87,12 @@ const Card = ({ article, visible, index }: CardProps) => {
               <div className="relative h-[200px] w-full">
                 <NextImage
                   src={urlFor(article.seo?.image).auto("format").url()}
+                  blurDataURL={urlFor(article.seo?.image)
+                    .width(24)
+                    .height(24)
+                    .blur(10)
+                    .url()}
+                  placeholder="blur"
                   layout="fill"
                   objectFit="cover"
                   alt={article.heading + " thumbnail"}

diff --git a/...l.nav.no/website/components/sanity-modules/frontpage-blocks/latest-articles/Highlight.tsx b/...l.nav.no/website/components/sanity-modules/frontpage-blocks/latest-articles/Highlight.tsx
@@ -1,3 +1,4 @@
+import { useFormatedDate } from "@/hooks/useFormatedDate";
 import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { getAuthors, getImage } from "@/utils";
@@ -7,7 +8,6 @@ import Image from "next/legacy/image";
 import NextLink from "next/link";
 import { ArticleT } from "./Card";
 import { Tag } from "./Tag";
-import { useFormatedDate } from "@/hooks/useFormatedDate";
 
 export const Highlight = ({
   article,
@@ -35,6 +35,12 @@ export const Highlight = ({
         {useStatusImage ? (
           <Image
             src={urlFor(article.status.bilde).quality(100).auto("format").url()}
+            blurDataURL={urlFor(article.status.bilde)
+              .width(24)
+              .height(24)
+              .blur(10)
+              .url()}
+            placeholder="blur"
             quality={100}
             layout="fill"
             aria-hidden
@@ -49,6 +55,12 @@ export const Highlight = ({
         ) : article?.seo?.image ? (
           <Image
             src={urlFor(article.seo.image).quality(100).auto("format").url()}
+            blurDataURL={urlFor(article.seo.image)
+              .width(24)
+              .height(24)
+              .blur(10)
+              .url()}
+            placeholder="blur"
             quality={100}
             layout="fill"
             objectFit="cover"

diff --git a/aksel.nav.no/website/components/sanity-modules/relatert-innhold/RelatertInnhold.tsx b/aksel.nav.no/website/components/sanity-modules/relatert-innhold/RelatertInnhold.tsx
@@ -18,9 +18,9 @@ const RelatertInnhold = ({ node }: RelatertInnholdProps) => {
     x?.intern ? `/${x.intern_lenke}` : x.ekstern_link;
 
   return (
-    <div className="ring-border-subtle toc-ignore bg-surface-neutral-subtle my-7 max-w-2xl rounded-lg p-4 ring-1 ring-inset sm:p-6">
+    <div className="ring-border-subtle toc-ignore bg-surface-neutral-subtle my-7 max-w-2xl rounded-lg p-4 ring-1 ring-inset dark:bg-gray-800 sm:p-6">
       <Heading
-        className="override-text-no-max text-text-subtle flex items-center gap-2"
+        className="override-text-no-max text-text-subtle dark:text-text-on-inverted flex items-center gap-2"
         size="small"
         as="p"
         spacing
@@ -40,7 +40,7 @@ const RelatertInnhold = ({ node }: RelatertInnholdProps) => {
                   e.currentTarget.getAttribute("href")
                 )
               }
-              className="text-xl font-semibold text-gray-800"
+              className="dark:text-text-on-inverted text-xl font-semibold text-gray-800"
             >
               {x.title}
             </Link>

diff --git a/aksel.nav.no/website/components/sanity-modules/video/Video.stories.tsx b/aksel.nav.no/website/components/sanity-modules/video/Video.stories.tsx
@@ -1,5 +1,6 @@
+import { SANITY_PROJECT_ID } from "@/sanity/config";
+import { AkselTheme, getKey } from "@/sb-util";
 import type { Meta, StoryObj } from "@storybook/react";
-import { getKey, AkselTheme } from "@/sb-util";
 import Video from "./Video";
 
 const meta = {
@@ -18,7 +19,7 @@ const args = {
     caption: "caption-tekst",
     transkripsjon: "Transkripsjonstekst",
     webm: {
-      url: "https://cdn.sanity.io/files/hnbe3yhs/production/274a2ceb69b056e1a7048ad1a5a2f8deff53a2f4.webm",
+      url: `https://cdn.sanity.io/files/${SANITY_PROJECT_ID}/production/274a2ceb69b056e1a7048ad1a5a2f8deff53a2f4.webm`,
       extension: "WEBM",
     },
   },

diff --git a/aksel.nav.no/website/components/website-modules/InlineCode.tsx b/aksel.nav.no/website/components/website-modules/InlineCode.tsx
@@ -1,7 +1,7 @@
 const InlineCode = (
   props: React.HTMLAttributes<HTMLElement> & { noAmps?: boolean }
 ) => (
-  <code className="text-deepblue-800 font-mono text-sm font-semibold leading-normal before:contents">
+  <code className="text-deepblue-800 dark:text-deepblue-300 font-mono text-sm font-semibold leading-normal before:contents">
     {!props?.noAmps && (
       <span aria-hidden className="inline-code-amp">
         `

diff --git a/aksel.nav.no/website/components/website-modules/blogg-page/parts/HighlightedBlogg.tsx b/aksel.nav.no/website/components/website-modules/blogg-page/parts/HighlightedBlogg.tsx
@@ -19,6 +19,12 @@ export const HighlightedBlogg = ({
           {blogg?.seo?.image ? (
             <Image
               src={urlFor(blogg.seo.image).quality(100).auto("format").url()}
+              blurDataURL={urlFor(blogg.seo.image)
+                .width(24)
+                .height(24)
+                .blur(10)
+                .url()}
+              placeholder="blur"
               quality={100}
               layout="fill"
               objectFit="cover"
@@ -62,6 +68,12 @@ export const HighlightedBlogg = ({
           {blogg?.seo?.image ? (
             <Image
               src={urlFor(blogg.seo.image).quality(100).auto("format").url()}
+              blurDataURL={urlFor(blogg.seo.image)
+                .width(24)
+                .height(24)
+                .blur(10)
+                .url()}
+              placeholder="blur"
               quality={100}
               layout="fill"
               objectFit="cover"

diff --git a/aksel.nav.no/website/pages/admin/[[...index]].js b/aksel.nav.no/website/pages/admin/[[...index]].js
@@ -1,3 +1,4 @@
+import cl from "clsx";
 import { NextStudio } from "next-sanity/studio";
 import { useEffect, useState } from "react";
 import { workspaceConfig } from "../../sanity/sanity.config";
@@ -20,7 +21,9 @@ const StudioPage = () => {
   return (
     <div
       data-theme={scheme}
-      className="aksel-admin h-full min-h-screen"
+      className={cl("aksel-admin h-full min-h-screen", {
+        dark: scheme === "dark",
+      })}
       id="sanity-wrapper"
     >
       <NextStudio

diff --git a/aksel.nav.no/website/pages/produktbloggen/[slug].tsx b/aksel.nav.no/website/pages/produktbloggen/[slug].tsx
@@ -94,7 +94,7 @@ const Page = ({ blogg, morePosts, publishDate }: PageProps["props"]) => {
       <main
         tabIndex={-1}
         id="hovedinnhold"
-        className="aksel-artikkel group/aksel overflow-hidden bg-[#FEFCE9] pb-16 pt-[8vw] focus:outline-none sm:pb-32"
+        className="aksel-artikkel group/aksel overflow-hidden bg-amber-50 pb-16 pt-[8vw] focus:outline-none sm:pb-32"
       >
         <div className="px-4">
           <div className="dynamic-wrapper-prose text-center">
@@ -134,6 +134,12 @@ const Page = ({ blogg, morePosts, publishDate }: PageProps["props"]) => {
                   .auto("format")
                   .quality(100)
                   .url()}
+                blurDataURL={urlFor(blogg?.seo?.image)
+                  .width(24)
+                  .height(24)
+                  .blur(10)
+                  .url()}
+                placeholder="blur"
                 decoding="sync"
                 layout="fill"
                 objectFit="cover"
@@ -158,15 +164,15 @@ const Page = ({ blogg, morePosts, publishDate }: PageProps["props"]) => {
           </div>
         </div>
         <div className="relative mt-16">
-          <AkselCubeStatic className="text-[#FFE78A] opacity-20" />
-          <div className="mt-8 px-4">
+          <AkselCubeStatic className="z-0 text-amber-300 opacity-20" />
+          <div className="relative z-10 mt-8 px-4">
             <SanityBlockContent
               className="dynamic-wrapper-prose"
               blocks={blogg?.content ?? []}
             />
           </div>
         </div>
-        <div className="mt-16 px-4">
+        <div className="relative z-10 mt-16 px-4">
           <div className="dynamic-wrapper-prose">
             <div className="bg-deepblue-800 mx-auto mb-10 h-2 w-2 rotate-45 rounded-[1px]" />
             {authors?.length > 0 && (

diff --git a/aksel.nav.no/website/pages/produktbloggen/index.tsx b/aksel.nav.no/website/pages/produktbloggen/index.tsx
@@ -73,7 +73,7 @@ const Page = (props: PageProps["props"]) => {
         image={props?.page?.seo?.image}
       />
 
-      <div className="bg-[#FEFCE9]">
+      <div className="bg-amber-50">
         <Header variant="blogg" />
         <main
           tabIndex={-1}

diff --git a/aksel.nav.no/website/sanity.cli.js → aksel.nav.no/website/sanity.cli.ts b/aksel.nav.no/website/sanity.cli.js → aksel.nav.no/website/sanity.cli.ts
@@ -1,3 +1,4 @@
+import { SANITY_DATASET, SANITY_PROJECT_ID } from "@/sanity/config";
 import { defineCliConfig } from "sanity/cli";
 
 /**
@@ -11,7 +12,7 @@ import { defineCliConfig } from "sanity/cli";
  */
 export default defineCliConfig({
   api: {
-    projectId: "hnbe3yhs",
-    dataset: "production",
+    projectId: SANITY_PROJECT_ID,
+    dataset: SANITY_DATASET,
   },
 });
diff --git a/aksel.nav.no/website/sanity/config.ts b/aksel.nav.no/website/sanity/config.ts
@@ -1,8 +1,12 @@
+export const SANITY_PROJECT_ID = "hnbe3yhs";
+export const SANITY_API_VERSION = "2021-10-21";
+export const SANITY_DATASET = "production";
+
 export const clientConfig = {
-  projectId: "hnbe3yhs",
-  dataset: "production",
+  projectId: SANITY_PROJECT_ID,
+  dataset: SANITY_DATASET,
   useCdn: false,
-  apiVersion: "2021-05-31",
+  apiVersion: SANITY_API_VERSION,
 };
 
 export const allArticleDocuments = [

diff --git a/aksel.nav.no/website/sanity/plugins/publication-flow/actions/focusAction.tsx b/aksel.nav.no/website/sanity/plugins/publication-flow/actions/focusAction.tsx
@@ -1,3 +1,5 @@
+import { SanityBlockContent } from "@/sanity-block";
+import { SANITY_API_VERSION } from "@/sanity/config";
 import { Button } from "@navikt/ds-react";
 import { differenceInMonths, format } from "date-fns";
 import { useState } from "react";
@@ -9,7 +11,6 @@ import {
   useDocumentOperation,
 } from "sanity";
 import useSWR from "swr";
-import { SanityBlockContent } from "@/sanity-block";
 
 export const createWrappedFocusAction = (action: DocumentActionComponent) => {
   const WrappedFocus = (
@@ -157,7 +158,7 @@ interface QualityCheckContentProps {
 }
 
 export const QualityCheckContent = ({ type }: QualityCheckContentProps) => {
-  const client = useClient({ apiVersion: "2021-06-07" });
+  const client = useClient({ apiVersion: SANITY_API_VERSION });
   const { data, error } = useSWR(`*[_id == "publication_flow"][0]`, (query) =>
     client.fetch(query)
   );

diff --git a/aksel.nav.no/website/sanity/plugins/structure/god-praksis.ts b/aksel.nav.no/website/sanity/plugins/structure/god-praksis.ts
@@ -1,9 +1,10 @@
+import { SANITY_API_VERSION } from "@/sanity/config";
 import { FileXMarkIcon, TagIcon } from "@navikt/aksel-icons";
-
 import { StructureBuilder } from "sanity/desk";
+
 /* documentStore is in Alpha, so avoid using for now */
 export const GodPraksisPanes = async (getClient, S: StructureBuilder) => {
-  let tema = await getClient({ apiVersion: "2021-06-07" }).fetch(
+  let tema = await getClient({ apiVersion: SANITY_API_VERSION }).fetch(
     `*[_type == "aksel_tema"]{title,seksjoner, _id}`
   );
   tema = tema
@@ -21,7 +22,7 @@ export const GodPraksisPanes = async (getClient, S: StructureBuilder) => {
         )
     );
 
-  const ids = await getClient({ apiVersion: "2021-06-07" }).fetch(
+  const ids = await getClient({ apiVersion: SANITY_API_VERSION }).fetch(
     `*[_type == "aksel_artikkel"]{_id, tema}`
   );
 

diff --git a/aksel.nav.no/website/sanity/plugins/structure/index.tsx b/aksel.nav.no/website/sanity/plugins/structure/index.tsx
@@ -1,5 +1,5 @@
-import { StructureBuilder } from "sanity/desk";
 import {
+  SANITY_API_VERSION,
   bloggKategorier,
   grunnleggendeKategorier,
   komponentKategorier,
@@ -22,12 +22,16 @@ import {
   TokenIcon,
 } from "@navikt/aksel-icons";
 import differenceInMonths from "date-fns/differenceInMonths";
+import { StructureResolver } from "sanity/desk";
 import { GodPraksisPanes } from "./god-praksis";
 import { Panes } from "./panes";
 
 const isAfter = (date) => differenceInMonths(new Date(), new Date(date)) >= 6;
 
-/* import { WebPreview, JsonView } from './previews' */
+/**
+ * List of document-types added to structure.
+ * If not added to `filtered`, they will be shown as an entry on main studio view
+ */
 const filtered = [
   "ds_artikkel",
   "komponent_artikkel",
@@ -55,11 +59,11 @@ const filtered = [
   "aksel_feedback",
 ];
 
-export const structure = async (
-  S: StructureBuilder,
+export const structure: StructureResolver = async (
+  S,
   { currentUser, getClient }
 ) => {
-  const ids = await getClient({ apiVersion: "2021-06-07" })
+  const ids = await getClient({ apiVersion: SANITY_API_VERSION })
     .fetch(`*[_type == "editor"]{
       _id,
       user_id
@@ -73,12 +77,12 @@ export const structure = async (
     ["developer"].includes(x.name)
   );
 
-  let outdated = await getClient({ apiVersion: "2021-06-07" }).fetch(
-    `*[$id in contributors[]->user_id.current]{_id, updateInfo}`,
-    { id: currentUser?.id }
-  );
-
-  outdated = outdated.filter((x) => isAfter(x.updateInfo?.lastVerified));
+  const outdated = (
+    await getClient({ apiVersion: SANITY_API_VERSION }).fetch(
+      `*[$id in contributors[]->user_id.current]{_id, updateInfo}`,
+      { id: currentUser?.id }
+    )
+  ).filter((x) => isAfter(x.updateInfo?.lastVerified));
 
   return S.list()
     .title("Innholdstyper")