fixed the latest news link redirect in the news header

This commit is contained in:
Karol Wypchlo 2021-10-03 01:24:22 +02:00
parent 102239ab84
commit a845ea0f8c
No known key found for this signature in database
GPG Key ID: C92C016317A964D0
2 changed files with 17 additions and 18 deletions

View File

@ -12,6 +12,7 @@ const NewsHeader = () => {
id id
frontmatter { frontmatter {
title title
external
} }
fields { fields {
slug slug
@ -26,8 +27,9 @@ const NewsHeader = () => {
if (!latestNews) return null; // no news if (!latestNews) return null; // no news
const title = latestNews.node.frontmatter.title; const { frontmatter, fields } = latestNews.node;
const link = { to: latestNews.node.fields.slug }; const { title, external } = frontmatter;
const link = external ? { href: external } : { to: fields.slug };
return ( return (
<div className="bg-palette-500 px-8 p-3"> <div className="bg-palette-500 px-8 p-3">

View File

@ -6,39 +6,36 @@ import { NewsSummary } from "../components/News";
import Link from "../components/Link"; import Link from "../components/Link";
import Seo from "../components/seo"; import Seo from "../components/seo";
const NewsCard = ({ ...props }) => { const NewsCard = ({ frontmatter, fields }) => {
const linkProps = { to: !props.frontmatter.external && props.fields.slug, href: props.frontmatter.external }; const { title, external, categories, description, thumbnail, avatar, author, date } = frontmatter;
const link = external ? { href: external } : { to: fields.slug };
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<Link {...linkProps} className="flex items-center"> <Link {...link} className="flex items-center">
<GatsbyImage image={getImage(props.frontmatter.thumbnail)} alt={props.frontmatter.title} /> <GatsbyImage image={getImage(thumbnail)} alt={title} />
</Link> </Link>
{props.frontmatter.categories && ( {categories && (
<div className="mt-6"> <div className="mt-6">
{props.frontmatter.categories.map((category) => ( {categories.map((category) => (
<Label key={category}>{category}</Label> <Label key={category}>{category}</Label>
))} ))}
</div> </div>
)} )}
<Link {...linkProps} className="text-xl mt-6"> <Link {...link} className="text-xl mt-6">
{props.frontmatter.title} {title}
</Link> </Link>
{props.frontmatter.description && ( {description && (
<Link {...linkProps} className="font-content text-palette-400 mt-4"> <Link {...link} className="font-content text-palette-400 mt-4">
{props.frontmatter.description} {description}
</Link> </Link>
)} )}
<div className="mt-6"> <div className="mt-6">
<NewsSummary <NewsSummary avatar={avatar} author={author} date={date} />
avatar={props.frontmatter.avatar}
author={props.frontmatter.author}
date={props.frontmatter.date}
/>
</div> </div>
</div> </div>
); );