This repository has been archived on 2022-10-07. You can view files and clone it, but cannot push or open issues or pull requests.
skynet-webportal/packages/website/src/pages/news.js

106 lines
2.9 KiB
JavaScript
Raw Normal View History

2021-03-28 16:34:52 +00:00
import * as React from "react";
2021-03-31 22:37:02 +00:00
import { graphql } from "gatsby";
2021-04-01 11:25:37 +00:00
import { GatsbyImage, getImage } from "gatsby-plugin-image";
2021-04-01 12:46:00 +00:00
import { Section, Label } from "../components/Layout";
import { NewsSummary } from "../components/News";
2021-03-31 22:37:02 +00:00
import Link from "../components/Link";
2021-04-07 13:18:40 +00:00
import Seo from "../components/seo";
2021-03-31 22:37:02 +00:00
const NewsCard = ({ ...props }) => {
2021-04-07 13:18:40 +00:00
const linkProps = { to: !props.frontmatter.external && props.fields.slug, href: props.frontmatter.external };
2021-03-31 22:37:02 +00:00
return (
<div className="flex flex-col">
2021-04-07 13:30:32 +00:00
<Link {...linkProps} className="flex items-center">
2021-04-01 12:46:00 +00:00
<GatsbyImage image={getImage(props.frontmatter.thumbnail)} alt={props.frontmatter.title} />
2021-03-31 23:25:33 +00:00
</Link>
2021-04-01 11:25:37 +00:00
{props.frontmatter.categories && (
<div className="mt-6">
{props.frontmatter.categories.map((category) => (
<Label key={category}>{category}</Label>
))}
</div>
)}
2021-04-07 13:18:40 +00:00
<Link {...linkProps} className="text-xl mt-6">
2021-03-31 22:37:02 +00:00
{props.frontmatter.title}
</Link>
2021-03-31 22:37:02 +00:00
{props.frontmatter.description && (
2021-04-07 13:18:40 +00:00
<Link {...linkProps} className="font-content text-palette-400 mt-4">
{props.frontmatter.description}
</Link>
2021-03-31 22:37:02 +00:00
)}
2021-03-31 22:37:02 +00:00
<div className="mt-6">
<NewsSummary
avatar={props.frontmatter.avatar}
author={props.frontmatter.author}
date={props.frontmatter.date}
/>
2021-03-31 22:37:02 +00:00
</div>
</div>
);
};
const NewsPage = ({ data }) => {
return (
2021-04-01 12:46:00 +00:00
<>
2021-04-07 13:18:40 +00:00
<Seo title="News" />
2021-03-31 22:37:02 +00:00
<Section className="bg-white" first={true}>
2021-04-08 14:02:01 +00:00
{/* this is the gray box in the top left corner, 400px height is totally arbitrary but it works */}
<div
className="hidden desktop:block bg-white bg-column absolute top-0 left-0 right-0"
style={{ height: "400px" }}
/>
2021-03-31 22:37:02 +00:00
<div className="grid grid-cols-1 desktop:grid-cols-3 gap-x-8 gap-y-24">
{data.allMarkdownRemark.edges.map(({ node }) => (
<NewsCard key={node.id} {...node} />
))}
</div>
</Section>
2021-04-01 12:46:00 +00:00
</>
2021-03-31 22:37:02 +00:00
);
};
export const query = graphql`
query NewsQuery {
allMarkdownRemark(
filter: { frontmatter: { hidden: { ne: true } } }
sort: { fields: frontmatter___date, order: DESC }
) {
2021-03-31 22:37:02 +00:00
edges {
node {
id
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
description
author
2021-04-01 11:25:37 +00:00
categories
2021-04-07 13:18:40 +00:00
external
2021-04-01 11:25:37 +00:00
thumbnail {
childImageSharp {
2021-04-07 13:44:02 +00:00
gatsbyImageData(width: 320, height: 170, placeholder: BLURRED, transformOptions: { cropFocus: CENTER })
2021-04-01 11:25:37 +00:00
}
}
2021-03-31 22:37:02 +00:00
avatar {
childImageSharp {
2021-04-07 13:44:02 +00:00
gatsbyImageData(width: 40, placeholder: BLURRED, transformOptions: { cropFocus: CENTER })
2021-03-31 22:37:02 +00:00
}
}
}
fields {
slug
}
}
}
}
}
`;
2021-03-28 16:34:52 +00:00
export default NewsPage;