jobber med hash-lenker. Går bort fra å bruke gatsby-Link for hash-len…

…ker da det ga litt rar oppførsel og ikke er anbefalt av gatsby

måtte implementere litt custom greier da dette ikke ser ut til å virke ut av boksen med gatsby
gatsbyjs/gatsby#21120
https://codingcat.dev/blog/anchor-links-from-sanity-in-gatsby/#sanityio
https://stackoverflow.com/questions/24665602/scrollintoview-scrolls-just-too-far

trodde egentlig denne PR'en skulle fikse det, men ser ikke at det funker..?
gatsbyjs/gatsby#24306

.dockerignore

@@ -3,7 +3,7 @@
 !*.json
 !gatsby*.js
 !gatsby*.ts
-!gatsby-node-files
+!gatsby-utils
 !nginx-server-rules.conf
 !plugins
 !src

gatsby-browser.ts

@@ -1,3 +1,15 @@
 import DefaultLayout from './src/utils/wrapPageElement';
+import { GatsbyBrowser } from 'gatsby';
+import { anchorScroll } from './gatsby-utils/anchorScroll';
+
+export const onRouteUpdate: GatsbyBrowser['onRouteUpdate'] = (props) => {
+  anchorScroll(props.location);
+  return true;
+};
+
+export const shouldUpdateScroll: GatsbyBrowser['shouldUpdateScroll'] = (props) => {
+  anchorScroll(props.routerProps.location);
+  return true;
+};
 
 export const wrapPageElement = DefaultLayout;

gatsby-node.ts

@@ -1,6 +1,6 @@
 import { GatsbyNode } from 'gatsby';
-import { createFaktasider } from './gatsby-node-files/createFaktasider';
-import { createRedirectsFraGamleSider } from './gatsby-node-files/createRedirectsFraGamleSider';
+import { createFaktasider } from './gatsby-utils/createFaktasider';
+import { createRedirectsFraGamleSider } from './gatsby-utils/createRedirectsFraGamleSider';
 
 export const createPages: GatsbyNode['createPages'] = async (props) => {
   props.reporter.info(`🛠 Lager redirect fra /admin til https://dagpenger.sanity.studio/`);

gatsby-utils/anchorScroll.ts

@@ -0,0 +1,7 @@
+export function anchorScroll(location: Location) {
+  setTimeout(() => {
+    const hash = location.hash.replace('#', '');
+    const element = document.getElementById(hash);
+    element?.scrollIntoView();
+  }, 0);
+}

src/components/BlockContent/BlockContent.tsx

@@ -10,7 +10,7 @@ import { ParsedRichText } from '../../utils/richTextUtils/parser/parseRichText';
 import FremhevetTekst from './FremhevetTekst';
 import { UtkastInline } from './Utkast';
 import VisForAnnotation from './VisFor/VisForAnnotation';
-import GroupMarkup from './GroupMarkup';
+import GroupMarkup from './GroupMarkup/GroupMarkup';
 
 interface Props {
   blocks: ParsedRichText;

src/components/BlockContent/GroupMarkup.tsx → src/components/BlockContent/GroupMarkup/GroupMarkup.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { Group } from '../../utils/richTextUtils/richTextTypes';
-import Utkast from './Utkast';
+import { Group } from '../../../utils/richTextUtils/richTextTypes';
+import Utkast from '../Utkast';
 import H2GroupMarkup from './H2GroupMarkup';
 import H3GroupMarkup from './H3GroupMarkup';
 import H4GroupMarkup from './H4GroupMarkup';
-import VisFor from './VisFor/VisFor';
-import { ConditionalWrapper } from '../ConditionalWrapper';
+import VisFor from '../VisFor/VisFor';
+import { ConditionalWrapper } from '../../ConditionalWrapper';
 
 interface Props {
   node: Group;

src/components/BlockContent/H2GroupMarkup.tsx → src/components/BlockContent/GroupMarkup/H2GroupMarkup.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import BlockContent from './BlockContent';
+import BlockContent from '../BlockContent';
 import styled, { css } from 'styled-components/macro';
-import { Group, isH3Group } from '../../utils/richTextUtils/richTextTypes';
-import { theme } from '../../styles/theme';
+import { Group, isH3Group } from '../../../utils/richTextUtils/richTextTypes';
+import { theme } from '../../../styles/theme';
 import { Systemtittel } from 'nav-frontend-typografi';
 import H2GroupMenu from './H2GroupMenu';
-import withErrorBoundary from '../withErrorBoundary';
+import withErrorBoundary from '../../withErrorBoundary';
+import { useGroupMarkupAriaProps } from './useGroupMarkupAriaProps';
 
 const StyledArticle = styled.article<{ background: boolean }>`
   ${(props) =>
@@ -28,9 +29,6 @@ const StyledSystemtittel = styled(Systemtittel)`
   position: sticky !important;
   top: 0;
   z-index: 10;
-  &:target {
-    top: -2rem;
-  }
 `;
 
 const BackgroundColor = styled.div<{ noBackground?: boolean }>`
@@ -43,14 +41,13 @@ const ContentStyle = styled.div`
 `;
 
 function H2GroupMarkup(props: Group) {
-  const id = props.blockConfig?.id;
-  const headerId = id + '-header';
+  const { regionProps, headerProps } = useGroupMarkupAriaProps(props);
   const noBackground = props.blockConfig?.noBackground;
   const underGrupper = props.children.filter(isH3Group);
 
   const content = (
-    <StyledArticle background={!noBackground} aria-labelledby={headerId} id={id} tabIndex={-1}>
-      <StyledSystemtittel tag="h2" id={headerId}>
+    <StyledArticle background={!noBackground} {...regionProps}>
+      <StyledSystemtittel tag="h2" {...headerProps}>
         <BackgroundColor noBackground={noBackground}>{props.title}</BackgroundColor>
       </StyledSystemtittel>
       {props.blockConfig?.meny && <H2GroupMenu underGrupper={underGrupper} />}

src/components/BlockContent/H2GroupMenu.tsx → src/components/BlockContent/GroupMarkup/H2GroupMenu.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components/macro';
-import useSmoothscrollOnClick from '../../hooks/useSmoothscrollOnClick';
-import { LinkUtenUnderstrek } from '../../utils/common-styled-components';
-import { Group } from '../../utils/richTextUtils/richTextTypes';
+import useSmoothscrollOnClick from '../../../hooks/useSmoothscrollOnClick';
+import { LenkeUtenUnderstrek } from '../../../utils/common-styled-components';
+import { Group } from '../../../utils/richTextUtils/richTextTypes';
 
 interface Props {
   underGrupper: Group[];
@@ -26,9 +26,9 @@ function H2GroupMenu(props: Props) {
       <StyledUl>
         {props.underGrupper.map((underGruppe) => (
           <StyledLi key={underGruppe.blockConfig?.id}>
-            <LinkUtenUnderstrek onClick={activateSmoothScroll} to={'#' + underGruppe.blockConfig?.id}>
+            <LenkeUtenUnderstrek onClick={activateSmoothScroll} href={'#' + underGruppe.blockConfig?.id}>
               {underGruppe.title}
-            </LinkUtenUnderstrek>
+            </LenkeUtenUnderstrek>
           </StyledLi>
         ))}
       </StyledUl>

src/components/BlockContent/H3GroupMarkup.tsx → src/components/BlockContent/GroupMarkup/H3GroupMarkup.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import BlockContent from './BlockContent';
+import BlockContent from '../BlockContent';
 import styled from 'styled-components';
 import { Ingress } from 'nav-frontend-typografi';
-import { Group } from '../../utils/richTextUtils/richTextTypes';
+import { Group } from '../../../utils/richTextUtils/richTextTypes';
+import { useGroupMarkupAriaProps } from './useGroupMarkupAriaProps';
 
 const StyledSection = styled.section`
   margin: 3rem 0 2rem;
@@ -14,11 +15,11 @@ const StyledIngress = styled(Ingress)`
 `;
 
 function H3GroupMarkup(props: Group) {
-  const id = props.blockConfig?.id;
+  const { regionProps, headerProps } = useGroupMarkupAriaProps(props);
 
   return (
-    <StyledSection aria-labelledby={id}>
-      <StyledIngress tag="h3" id={id} tabIndex={-1}>
+    <StyledSection {...regionProps}>
+      <StyledIngress tag="h3" {...headerProps}>
         {props.title}
       </StyledIngress>
       <BlockContent blocks={props.children} />

src/components/BlockContent/H4GroupMarkup.tsx → src/components/BlockContent/GroupMarkup/H4GroupMarkup.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import BlockContent from './BlockContent';
+import BlockContent from '../BlockContent';
 import styled from 'styled-components';
 import { Element } from 'nav-frontend-typografi';
-import { Group } from '../../utils/richTextUtils/richTextTypes';
+import { Group } from '../../../utils/richTextUtils/richTextTypes';
+import { useGroupMarkupAriaProps } from './useGroupMarkupAriaProps';
 
 const StyledSection = styled.section`
   margin: 3rem 0 2rem;
@@ -14,11 +15,11 @@ const StyledElement = styled(Element)`
 `;
 
 function H4GroupMarkup(props: Group) {
-  const id = props.blockConfig?.id;
+  const { regionProps, headerProps } = useGroupMarkupAriaProps(props);
 
   return (
-    <StyledSection aria-labelledby={id}>
-      <StyledElement tag="h4" id={id} tabIndex={-1}>
+    <StyledSection {...regionProps}>
+      <StyledElement tag="h4" {...headerProps}>
         {props.title}
       </StyledElement>
       <BlockContent blocks={props.children} />

src/components/BlockContent/GroupMarkup/useGroupMarkupAriaProps.ts

@@ -0,0 +1,17 @@
+import { Group } from '../../../utils/richTextUtils/richTextTypes';
+
+export function useGroupMarkupAriaProps(group: Group) {
+  const id = group.blockConfig?.id;
+  const headerId = id + '-header';
+
+  return {
+    regionProps: {
+      id: id,
+      tabIndex: -1,
+      'aria-labelledby': headerId,
+    },
+    headerProps: {
+      id: headerId,
+    },
+  };
+}

src/styles/GlobalStyling.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { theme } from './theme';
 import './index.less';
-import { useDekoratorPopdownOffset } from '../templates/faktaside/Navigasjonsmeny/useDekoratorPopdownOffset';
 
-const Styling = createGlobalStyle<{ dekoratorOffset: number }>`
+const Styling = createGlobalStyle`
     * {
         box-sizing: border-box;
     }
@@ -18,13 +17,6 @@ const Styling = createGlobalStyle<{ dekoratorOffset: number }>`
 
     // :target = valgt i url (url-fragment), sørger for at header ikke ligger klint oppi toppen ved bruk av interne url'er https://css-tricks.com/hash-tag-links-padding/
     :target, .internUrl {
-      --offset-top: calc(2rem + ${(props) => props.dekoratorOffset}px);
-        &::before {
-            content: "";
-            display: block;
-            height: var(--offset-top);
-            margin-top: calc(var(--offset-top) * -1);
-        }
         position: relative;
         &:focus {
         outline: none;
@@ -35,9 +27,10 @@ const Styling = createGlobalStyle<{ dekoratorOffset: number }>`
               bottom: 0;
               left: 0;
               width: 100%;
-              height: calc(100% - var(--offset-top));
+              height: 100%;
               ${theme.focus};
               border-radius: .2rem;
+              pointer-events: none;
             }
         }
     }
@@ -48,8 +41,7 @@ const Styling = createGlobalStyle<{ dekoratorOffset: number }>`
 `;
 
 export function GlobalStyling() {
-  const offset = useDekoratorPopdownOffset();
-  return <Styling dekoratorOffset={offset} />;
+  return <Styling />;
 }
 
 /* Scoper denne stylingen så den ikke overskriver styling i Meny/Dekorator */

src/templates/faktaside/FaktaSide.tsx

@@ -9,7 +9,7 @@ import IkkeOversatt from './IkkeOversatt';
 import { SistOppdatert } from './SistOppdatert';
 import RelatertInformasjon from './RelatertInformasjon';
 import { FaktasideProvider } from './FaktaSideContext';
-import { FaktasideContext } from '../../../gatsby-node-files/createFaktasider';
+import { FaktasideContext } from '../../../gatsby-utils/createFaktasider';
 
 export interface FaktaSideProps extends PageProps<{}, FaktasideContext> {
   errors: any;

src/templates/faktaside/FaktaSideContext.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, ReactNode, useContext } from 'react';
-import { FaktasideContext } from '../../../gatsby-node-files/createFaktasider';
+import { FaktasideContext } from '../../../gatsby-utils/createFaktasider';
 
 const inital: FaktasideContext = {
   lang: 'no',

src/templates/faktaside/InnholdsMeny/InnholdsListe.tsx

@@ -5,9 +5,9 @@ import styled, { css } from 'styled-components/macro';
 import useSmoothscrollOnClick from '../../../hooks/useSmoothscrollOnClick';
 import { Group } from '../../../utils/richTextUtils/richTextTypes';
 import { useInnholdsListe } from './useInnholdsListe';
-import { LinkUtenUnderstrek } from '../../../utils/common-styled-components';
+import { LenkeUtenUnderstrek } from '../../../utils/common-styled-components';
 
-const StyledLenke = styled(LinkUtenUnderstrek)<{ erValgt: boolean }>`
+const StyledLenke = styled(LenkeUtenUnderstrek)<{ erValgt: boolean }>`
   display: block;
   padding: 0.25rem 0;
   ${(props) =>
@@ -45,7 +45,7 @@ function MenuItem(props: { item: Group; current: boolean }) {
   return (
     <li key={props.item.blockConfig?.id} onClick={activateSmoothScroll}>
       <SmoothScroll />
-      <StyledLenke erValgt={props.current} to={`#${props.item.blockConfig?.id}`}>
+      <StyledLenke erValgt={props.current} href={`#${props.item.blockConfig?.id}`}>
         {props.item.title}
       </StyledLenke>
     </li>

src/templates/faktaside/RelatertInformasjon.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Block, Group } from '../../utils/richTextUtils/richTextTypes';
-import H2GroupMarkup from '../../components/BlockContent/H2GroupMarkup';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { theme } from '../../styles/theme';
 import { idFromString } from '../../utils/idFromString';
+import H2GroupMarkup from '../../components/BlockContent/GroupMarkup/H2GroupMarkup';
 
 interface Props {
   blocks?: Block[];

src/utils/common-styled-components.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components/macro';
 import 'nav-frontend-knapper-style/src/index.less';
 import { Element } from 'nav-frontend-typografi';
-import { Link } from 'gatsby';
+import Lenke from 'nav-frontend-lenker';
 
 export const LenkeKnapp = styled.button.attrs({ className: 'lenke' })`
   border: none;
@@ -48,7 +48,7 @@ export const H4 = styled(Element).attrs({ tag: 'h4' })`
   margin-bottom: 1rem !important;
 `;
 
-export const LinkUtenUnderstrek = styled(Link).attrs({ className: 'lenke' })`
+export const LenkeUtenUnderstrek = styled(Lenke).attrs({ className: 'lenke' })`
   text-decoration: none !important;
   &:hover {
     text-decoration: underline !important;