From 1e39b1101257d42f5e00ec8e082b50414e09aba7 Mon Sep 17 00:00:00 2001
From: Erik Vattekar <erik.vattekar@nav.no>
Date: Wed, 29 Nov 2023 14:01:08 +0100
Subject: [PATCH] run Starting with Next.js 13, <Link> renders as <a>, so
 attempting to use <a> as a child is invalid.
 https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

---
 components/search/searchResultLink.tsx |   2 +-
 components/stories/story.tsx           | 151 ++++++++++++-------------
 pages/index.tsx                        |  42 +++----
 3 files changed, 99 insertions(+), 96 deletions(-)

diff --git a/components/search/searchResultLink.tsx b/components/search/searchResultLink.tsx
index e50bcf8c..ff4f3091 100644
--- a/components/search/searchResultLink.tsx
+++ b/components/search/searchResultLink.tsx
@@ -171,7 +171,7 @@ export const SearchResultLink = ({
         </div>
       </Link>
     </div>
-  )
+  );
 }
 
 export default SearchResultLink
diff --git a/components/stories/story.tsx b/components/stories/story.tsx
index 23241ceb..4212c245 100644
--- a/components/stories/story.tsx
+++ b/components/stories/story.tsx
@@ -31,86 +31,85 @@ export function Story({
   const Plotly = dynamic(() => import("./plotly"));
 
   return (
-      <div className="flex flex-col items-center">
-        <div className="w-screen">
-        <TopBar type={'Story'} name={story.name}>
-          {!draft && isOwner && (
-            <div>
-              <Link
-                href={`/story/${story.id}/edit`}>
-                <a className="pr-2">Endre</a>
-              </Link>
-              <a className="border-l-[1px] border-border-strong px-2" onClick={() => setShowToken && setShowToken(true)}>Vis token</a>
-              <a
-                className="border-l-[1px] border-border-strong px-2 text-nav-red"
-                onClick={() => setShowDelete && setShowDelete(true)}
-              >
-                Slett
-              </a>
-            </div>
-          )}
-        </TopBar>
+    <div className="flex flex-col items-center">
+      <div className="w-screen">
+      <TopBar type={'Story'} name={story.name}>
+        {!draft && isOwner && (
+          <div>
+            <Link href={`/story/${story.id}/edit`} className="pr-2">
+              Endre
+            </Link>
+            <a className="border-l-[1px] border-border-strong px-2" onClick={() => setShowToken && setShowToken(true)}>Vis token</a>
+            <a
+              className="border-l-[1px] border-border-strong px-2 text-nav-red"
+              onClick={() => setShowDelete && setShowDelete(true)}
+            >
+              Slett
+            </a>
+          </div>
+        )}
+      </TopBar>
 
-        <MetadataTable
-          created={story.created}
-          lastModified={story.lastModified}
-          owner={story.owner}
-          keywords={story.keywords}
-        />
-        </div>
-        <div className="max-w-5xl">
-          <div className="children-fullwidth flex flex-col gap-5 py-4 max-w-5xl">
-            {views.map((view, id) => {
-              if (view.__typename === 'StoryViewHeader') {
-                return <Header key={id} text={view.content} size={view.level} />
-              }
+      <MetadataTable
+        created={story.created}
+        lastModified={story.lastModified}
+        owner={story.owner}
+        keywords={story.keywords}
+      />
+      </div>
+      <div className="max-w-5xl">
+        <div className="children-fullwidth flex flex-col gap-5 py-4 max-w-5xl">
+          {views.map((view, id) => {
+            if (view.__typename === 'StoryViewHeader') {
+              return <Header key={id} text={view.content} size={view.level} />
+            }
 
-              if (view.__typename === 'StoryViewMarkdown') {
-                return (
-                  <ReactMarkdown className="" key={id} remarkPlugins={[remarkGfm]}>
-                    {view.content}
-                  </ReactMarkdown>
-                )
-              }
-              if (view.__typename === 'StoryViewPlotly') {
-                return (
-                  <InView key={id} triggerOnce={true}>
-                    {({ inView, ref }) => {
-                      return inView ? (
-                        <div ref={ref}>
-                          <Plotly id={view.id} />
-                        </div>
-                      ) : (
-                        <div ref={ref}>
-                          <LoaderSpinner />
-                        </div>
-                      )
-                    }}
-                  </InView>
-                )
-              }
-              if (view.__typename === 'StoryViewVega') {
-                return (
-                  <InView key={id} triggerOnce={true}>
-                    {({ inView, ref }) => {
-                      return inView ? (
-                        <div ref={ref}>
-                          <VegaView id={view.id} />
-                        </div>
-                      ) : (
-                        <div ref={ref}>
-                          <LoaderSpinner />
-                        </div>
-                      )
-                    }}
-                  </InView>
-                )
-              }
-            })}
-          </div>
+            if (view.__typename === 'StoryViewMarkdown') {
+              return (
+                <ReactMarkdown className="" key={id} remarkPlugins={[remarkGfm]}>
+                  {view.content}
+                </ReactMarkdown>
+              )
+            }
+            if (view.__typename === 'StoryViewPlotly') {
+              return (
+                <InView key={id} triggerOnce={true}>
+                  {({ inView, ref }) => {
+                    return inView ? (
+                      <div ref={ref}>
+                        <Plotly id={view.id} />
+                      </div>
+                    ) : (
+                      <div ref={ref}>
+                        <LoaderSpinner />
+                      </div>
+                    )
+                  }}
+                </InView>
+              )
+            }
+            if (view.__typename === 'StoryViewVega') {
+              return (
+                <InView key={id} triggerOnce={true}>
+                  {({ inView, ref }) => {
+                    return inView ? (
+                      <div ref={ref}>
+                        <VegaView id={view.id} />
+                      </div>
+                    ) : (
+                      <div ref={ref}>
+                        <LoaderSpinner />
+                      </div>
+                    )
+                  }}
+                </InView>
+              )
+            }
+          })}
         </div>
       </div>
-  )
+    </div>
+  );
 }
 
 export default Story
diff --git a/pages/index.tsx b/pages/index.tsx
index 22203142..f6f8feeb 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -100,32 +100,36 @@ const LandingPage = () => {
                             }
                         />
                     </form>
-                    <Link href="/search?preferredType=story">
-                        <a className="grid grid-cols-2 items-center no-underline text-text-default border-2 border-border-on-inverted bg-white rounded shadow-sm shadow-border-on-inverted transition-all hover:shadow-lg pr-4">
-                            <div className="flex flex-row items-center gap-2 md:gap-4">
-                                <div className="text-deepblue-500 bg-deepblue-50">
-                                    <StoryLogo className="h-4 w-4 m-4 md:h-6 md:w-6 md:m-4" />
-                                </div>
-                                <p>Fortellinger</p>
+                    <Link
+                        href="/search?preferredType=story"
+                        className="grid grid-cols-2 items-center no-underline text-text-default border-2 border-border-on-inverted bg-white rounded shadow-sm shadow-border-on-inverted transition-all hover:shadow-lg pr-4">
+
+                        <div className="flex flex-row items-center gap-2 md:gap-4">
+                            <div className="text-deepblue-500 bg-deepblue-50">
+                                <StoryLogo className="h-4 w-4 m-4 md:h-6 md:w-6 md:m-4" />
                             </div>
-                            <Next className="justify-self-end md:hidden" />
-                        </a>
+                            <p>Fortellinger</p>
+                        </div>
+                        <Next className="justify-self-end md:hidden" />
+
                     </Link>
-                    <Link href="/search?preferredType=dataproduct">
-                        <a className="grid grid-cols-2 items-center no-underline text-text-default border-2 border-border-on-inverted bg-white rounded shadow-sm shadow-border-on-inverted transition-all hover:shadow-lg pr-4">
-                            <div className="flex flex-row items-center gap-2 md:gap-4">
-                                <div className="text-deepblue-500 bg-deepblue-50">
-                                    <DataproductLogo className="h-4 w-4 m-4 md:h-6 md:w-6 md:m-4" />
-                                </div>
-                                <p>Produkter</p>
+                    <Link
+                        href="/search?preferredType=dataproduct"
+                        className="grid grid-cols-2 items-center no-underline text-text-default border-2 border-border-on-inverted bg-white rounded shadow-sm shadow-border-on-inverted transition-all hover:shadow-lg pr-4">
+
+                        <div className="flex flex-row items-center gap-2 md:gap-4">
+                            <div className="text-deepblue-500 bg-deepblue-50">
+                                <DataproductLogo className="h-4 w-4 m-4 md:h-6 md:w-6 md:m-4" />
                             </div>
-                            <Next className="justify-self-end md:hidden" />
-                        </a>
+                            <p>Produkter</p>
+                        </div>
+                        <Next className="justify-self-end md:hidden" />
+
                     </Link>
                 </div>
             </div>
         </div>
-    )
+    );
 }
 
 export const getServerSideProps: GetServerSideProps = async (context) => {