Skip to content
This repository has been archived by the owner on Nov 1, 2024. It is now read-only.

Commit

Permalink
run Starting with Next.js 13, <Link> renders as <a>, so attempting to…
Browse files Browse the repository at this point in the history 
… use <a> as a child is invalid. https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor
  • Loading branch information
@erikvatt
erikvatt committed Nov 29, 2023
1 parent c6cf3a8 commit 1e39b11
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 96 deletions.
2 changes: 1 addition & 1 deletion components/search/searchResultLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export const SearchResultLink = ({
</div>
</Link>
</div>
)
);
}

export default SearchResultLink
151 changes: 75 additions & 76 deletions components/stories/story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
42 changes: 23 additions & 19 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down

0 comments on commit 1e39b11

Please sign in to comment.