henter inn mikrotekster fra sanity #136

sanity/deskStructure.ts

@@ -6,6 +6,7 @@ import ForsideSEOPreview from "./previews/ForsideSEOPreview";
 import ForsidePreview from "./previews/ForsidePreview";
 import DemoappPreview from "./previews/DemoappPreview";
 import { DagpengeKalkulatorIkon } from "./schemas/kalkulator/kalkulator";
+import { HistorikkIkon } from "./schemas/infosider/historikk/historikkHjelpetekster";
 
 export default () =>
   S.list()
@@ -24,7 +25,11 @@ export default () =>
               S.view.component(ForsidePreview).title("Forside-preview"),
             ])
         ),
-      ...S.documentTypeListItems().filter((listItem) => !["oppsett", "dagpengekalkulator"].includes(listItem.getId())),
+      S.listItem()
+        .title("Historikk")
+        .icon(HistorikkIkon)
+        .child(S.editor().schemaType("historikkHjelpetekster").documentId("historikkHjelpetekster")),
+      ...S.documentTypeListItems().filter((listItem) => !["oppsett", "dagpengekalkulator", "historikkHjelpetekster"].includes(listItem.getId())),
       S.listItem()
         .title("DagpengerKalkulator")
         .icon(DagpengeKalkulatorIkon)

sanity/schemas/infosider/historikk/historikkHjelpetekster.ts

@@ -0,0 +1,38 @@
+import { FaChurch } from "react-icons/fa";
+
+export const HistorikkIkon = FaChurch;
+
+export default {
+  type: "document",
+  name: "historikkHjelpetekster",
+  title: "Historikk",
+  __experimental_actions: ["update", "publish"], // Har du laget et nytt datasett må du midlertidig fjerne denne for å kunne lage et nytt oppsett-dokument
+  icon: HistorikkIkon,
+  fields: [
+    {
+      type: 'localeString',
+      name: 'title',
+      title: 'Tittel'
+    },
+    {
+      type: 'localeText',
+      name: 'kortInfo'
+    },
+    {
+      type: 'localeHistorikkRichText',
+      name: 'langInfo'
+    },
+    {
+      type: 'localeHistorikkRichText',
+      name: 'deltTekstForklaring'
+    },
+  ],
+  preview: {
+    prepare(selection) {
+      return {
+        title: selection.title,
+        media: HistorikkIkon,
+      };
+    },
+  },
+};

sanity/schemas/infosider/historikk/historikkRichText.tsx

@@ -0,0 +1,18 @@
+import { block, decorators, styles } from "../richText/richText";
+import link from "../richText/annotations/link";
+
+export default {
+  title: "HistorikkRichText",
+  name: "historikkRichText",
+  type: "array",
+  of: [
+    {
+      ...block,
+      styles: [styles.normal, styles.h2, styles.h3],
+      marks: {
+        decorators: [decorators.strong, decorators.em, decorators.utkast, decorators.foreslattStykes],
+        annotations: [link],
+      },
+    },
+  ],
+};

sanity/schemas/infosider/index.ts

@@ -18,6 +18,8 @@ import menyLenkeEkstern from "./oppsett/menylenkeEkstern";
 import tidslinjeRichText from "./tidslinje/tidslinjeRichText";
 import tidslinje from "./tidslinje/tidslinje";
 import localize from "../utils/localize";
+import historikkHjelpetekster from "./historikk/historikkHjelpetekster";
+import historikkRichText from "./historikk/historikkRichText";
 
 export const infosideSchemas = [
   richText,
@@ -39,6 +41,9 @@ export const infosideSchemas = [
   menyLenkeEkstern,
   tidslinjeRichText,
   tidslinje,
+  historikkHjelpetekster,
+  historikkRichText,
+  localize("historikkRichText"),
   localize("notifikasjonRichText"),
   localize("kortFortaltRichText"),
   localize("richText"),

src/components/faktaside/content/Revisions.tsx

@@ -37,7 +37,7 @@ function Revisions(props: Props) {
             <Link key={rev.id} href={`/historikk/${props.documentId}/${rev.timestamp}`} passHref>
               <StyledLenke current={current} className="lenke">
                 {formaterDato(rev.timestamp)}
-                {current && " (Gjeldende)"}
+                {current && " (Vises nå)"}
               </StyledLenke>
             </Link>
           );

src/components/historikk/DokumentHistorikk.tsx

@@ -16,6 +16,7 @@ import DokumentRekonstruksjon from "./DokumentRekonstruksjon";
 import { HistoriskDokument } from "./api/historikkFetcher";
 import HistoriskDokumentMetadata from "./HistoriskDokumentMetadata";
 import { formaterDato } from "../../utils/formaterDato";
+import BlockContent from "../BlockContent/BlockContent";
 
 const Style = styled.div`
   max-width: 80rem;
@@ -48,23 +49,22 @@ function DokumentHistorikk(props: DokumentHistorikkProps) {
     <Style>
       <Head>
         <meta name="robots" content="none" />
-        <title>Historiske versjoner | www.nav.no</title>
+        <title>{props.tekster?.title} | www.nav.no</title>
       </Head>
       <UnderArbeid />
       <DevKnapper />
       <div>
-        <Sidetittel>Historiske versjoner</Sidetittel>
+        <Sidetittel>{props.tekster?.title}</Sidetittel>
         <SidetittelStyle>{getTitle(localizedDoc)}</SidetittelStyle>
         {localizedDoc && <time>{formaterDato(localizedDoc._updatedAt)}</time>}
         <Revisions revisions={props.revisions} documentId={props.id} currentRevision={localizedDoc?._rev} />
       </div>
 
       <AlertStripeAdvarsel>
-        Dette er en automatisk rekonstruksjon og vil ikke nøyaktig gjenspeile hvordan siden ble opplevd på gjeldende
-        tidspunkt. <Lenke href={`#${infoId}`}>Les mer</Lenke>
+       {props.tekster?.kortInfo} <Lenke href={`#${infoId}`}>Les mer</Lenke>
       </AlertStripeAdvarsel>
 
-      <HistorikkContextProvider timestamp={props.time}>
+      <HistorikkContextProvider timestamp={props.time} tekster={props.tekster}>
         <DokumentRekonstruksjon dokument={localizedDoc} />
       </HistorikkContextProvider>
 
@@ -75,15 +75,7 @@ function DokumentHistorikk(props: DokumentHistorikkProps) {
         <StyledPre>{JSON.stringify(props.response, null, 2)}</StyledPre>
       </details>
       <AlertStripeInfo id={infoId}>
-        <p>Mer informasjon</p>
-        <p>Gammel data, ny kode</p>
-        <p>Info om delte tekster</p>
-        <p>Info om Custom Components</p>
-        <p>Info om G-belløp</p>
-        <p>Info om hvor man kan hente kode</p>
-        <p>Info om å kontakte NAV hvis man trenger nøyaktig gjengivelse</p>
-        <p>Info om at data er korrekt/tidsriktig</p>
-        <p>Oppdateres ca en gang i døgnet</p>
+        <BlockContent blocks={props.tekster?.langInfo} />
       </AlertStripeInfo>
     </Style>
   );

src/components/historikk/HistorikkContext.tsx

@@ -1,7 +1,9 @@
 import { createContext, ReactNode, useContext } from "react";
+import { HistorikkTekster } from "../../pages/historikk/[...slug]";
 
 interface HistorikkContextI {
   timestamp: string | null;
+  tekster?: HistorikkTekster;
 }
 const initialValue: HistorikkContextI = {
   timestamp: "",
@@ -11,5 +13,5 @@ const HistorikkContext = createContext<HistorikkContextI>(initialValue);
 export const useHistorikkContext = () => useContext(HistorikkContext);
 
 export default function HistorikkContextProvider(props: { children: ReactNode } & HistorikkContextI) {
-  return <HistorikkContext.Provider value={{ timestamp: props.timestamp }}>{props.children}</HistorikkContext.Provider>;
+  return <HistorikkContext.Provider value={{ timestamp: props.timestamp, tekster: props.tekster }}>{props.children}</HistorikkContext.Provider>;
 }

src/components/historikk/HistoriskDeltTekst.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import styled from "styled-components";
 import SlideDown from "../SlideDown";
 import { useHistorikkContext } from "./HistorikkContext";
+import BlockContent from "../BlockContent/BlockContent";
 
 const Header = styled.p`
   font-weight: 600;
@@ -12,8 +13,8 @@ const Header = styled.p`
 
 export function HistoriskDeltTekst(props) {
   const documentId = props.node.deltTekst._ref;
-  const timestamp = useHistorikkContext().timestamp || "";
-  const href = `/historikk/${documentId}/${timestamp}`;
+  const historikkContext = useHistorikkContext();
+  const href = `/historikk/${documentId}/${historikkContext.timestamp || ''}`;
 
   return (
     <AlertStripeAdvarsel>
@@ -24,18 +25,7 @@ export function HistoriskDeltTekst(props) {
         </Link>
       </p>
       <SlideDown title="Hvorfor kan dere ikke vise denne teksten?">
-        <p>
-          På informasjonssidene våre har vi en del tekster som går igjen på flere sider. Disse tekstene kaller vi for
-          "delte tekster".
-        </p>
-        <p>
-          På live-sidene våre trekker vi automatisk inn de delte tekstene, og for bruker oppleves det som en
-          sammenhengende side. Da slipper brukeren å navigere mellom flere sider og sy sammen innholdet selv. Dette
-          skjer dessverre ikke når vi viser historiske versjoner av sidene.
-        </p>
-        <p>
-          De delte tekstene blir oppdatert uavhengig av informasjonssidene og har derfor sin egen versjonshistorikk.
-        </p>
+        <BlockContent blocks={historikkContext.tekster?.deltTekstForklaring} />
       </SlideDown>
     </AlertStripeAdvarsel>
   );

src/pages/historikk/[...slug].tsx

@@ -3,6 +3,11 @@ import { Revision, revisionsFetcher } from "../../components/historikk/api/revis
 import withErrorBoundary from "../../components/withErrorBoundary";
 import { historikkFetcher, HistorikkResponse } from "../../components/historikk/api/historikkFetcher";
 import DokumentHistorikk from "../../components/historikk/DokumentHistorikk";
+import { getClient } from "../../sanity/sanity-config";
+import { groq } from "next-sanity";
+import { SanityBlock } from "../../utils/richTextUtils/richTextTypes";
+import localizeSanityContent from "../../i18n/localizeSanityContent";
+import { SupportedLanguage } from "../../i18n/supportedLanguages";
 
 export const getStaticPaths: GetStaticPaths = async (ctx) => {
   return {
@@ -11,11 +16,19 @@ export const getStaticPaths: GetStaticPaths = async (ctx) => {
   };
 };
 
+export interface HistorikkTekster {
+  title: string;
+  kortInfo: string;
+  langInfo: SanityBlock[];
+  deltTekstForklaring: SanityBlock[];
+}
+
 export interface DokumentHistorikkProps {
   revisions: Revision[];
   response: HistorikkResponse | null;
   id: string;
   time: string | null;
+  tekster?: HistorikkTekster;
 }
 
 export const getStaticProps: GetStaticProps<DokumentHistorikkProps> = async (context) => {
@@ -29,13 +42,15 @@ export const getStaticProps: GetStaticProps<DokumentHistorikkProps> = async (con
 
   const revisions = await revisionsFetcher(id);
   const response = time ? await historikkFetcher(id, time) : null;
+  const tekster = await getClient(context.preview).fetch(groq`*[_id == 'historikkHjelpetekster'][0]`);
 
   return {
     props: {
       revisions,
       id,
       time: time || null,
       response,
+      tekster: localizeSanityContent(tekster, context.locale as SupportedLanguage),
     },
     revalidate: 86400, // En gang i døgnet
   };