news section

This commit is contained in:
Karol Wypchlo 2021-04-01 00:37:02 +02:00
parent 767d0f4479
commit f9aa65e67a
13 changed files with 154 additions and 23 deletions

View File

@ -2,6 +2,8 @@
title: Hello World title: Hello World
date: "2015-05-01T22:12:03.284Z" date: "2015-05-01T22:12:03.284Z"
description: "Hello World" description: "Hello World"
author: Nicole Tay
avatar: ../../team/nicole-tay.png
--- ---
This is my first post on my new fake blog! How exciting! This is my first post on my new fake blog! How exciting!
@ -24,7 +26,7 @@ Oh, and here's a great quote from this Wikipedia on
You can also write code blocks here! You can also write code blocks here!
```js ```js
const saltyDuckEgg = "chinese preserved food product" const saltyDuckEgg = "chinese preserved food product";
``` ```
| Number | Title | Year | | Number | Title | Year |

View File

@ -1,6 +1,9 @@
--- ---
title: My Second Post! title: My Second Post!
date: "2015-05-06T23:46:37.121Z" date: "2015-05-06T23:46:37.121Z"
description: Wow! I love blogging so much already.
author: Daniel Helm
avatar: ../../team/daniel-helm.png
--- ---
Wow! I love blogging so much already. Wow! I love blogging so much already.

View File

@ -2,6 +2,8 @@
title: New Beginnings title: New Beginnings
date: "2015-05-28T22:40:32.169Z" date: "2015-05-28T22:40:32.169Z"
description: This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter. description: This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter.
author: Karol Wypchlo
avatar: ../../team/karol-wypchlo.png
--- ---
Far far away, behind the word mountains, far from the countries Vokalia and Far far away, behind the word mountains, far from the countries Vokalia and

View File

@ -1,7 +1,9 @@
--- ---
title: Skynet Introduces Premium Accounts, Sets the Foundation for New Creator Economies title: Skynet Introduces Premium Accounts, Sets the Foundation for New Creator Economies
date: "2021-04-01T22:12:03.284Z" date: "2021-03-22"
description: "Premium accounts support creators while giving users up to 20 TB of data storage per month and other perks." description: "Premium accounts support creators while giving users up to 20 TB of data storage per month and other perks."
author: Manasi Vora
avatar: ../../team/manasi-vora.png
--- ---
**BOSTON, Massachusetts, March 22, 2021** — Skynet Labs introduces new paid accounts and sets the stage for recursive content monetization. To celebrate, Skynet is giving out premium accounts to the first 100 users who sign up at siasky.net. The giveaway includes 1 TB of storage and 3 months of censorship-resistant file pinning. Skynet is a decentralized CDN and foundation for a new, decentralized internet. It is an open protocol for building decentralized applications, and is built on top of Sia, a decentralized storage network. **BOSTON, Massachusetts, March 22, 2021** — Skynet Labs introduces new paid accounts and sets the stage for recursive content monetization. To celebrate, Skynet is giving out premium accounts to the first 100 users who sign up at siasky.net. The giveaway includes 1 TB of storage and 3 months of censorship-resistant file pinning. Skynet is a decentralized CDN and foundation for a new, decentralized internet. It is an open protocol for building decentralized applications, and is built on top of Sia, a decentralized storage network.

View File

@ -55,7 +55,7 @@ module.exports = {
options: { options: {
classMap: { classMap: {
heading: "font-semibold text-palette-600", heading: "font-semibold text-palette-600",
paragraph: "font-content text-palette-400", paragraph: "font-content text-base text-palette-400",
strong: "font-semibold", strong: "font-semibold",
"heading[depth=1]": "text-4xl", "heading[depth=1]": "text-4xl",
"heading[depth=2]": "text-3xl", "heading[depth=2]": "text-3xl",
@ -115,4 +115,7 @@ module.exports = {
}, },
}, },
], ],
// mapping: {
// "MarkdownRemark.frontmatter.author": `teamYaml`,
// },
}; };

View File

@ -18,7 +18,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
// Define a template for news post // Define a template for news post
const PostTemplate = path.resolve(`./src/templates/news-post.js`); const PostTemplate = path.resolve(`./src/templates/news-post.js`);
// Get all markdown news posts sorted by date // Get all markdown news posts sorted by date and all possible authors
const result = await graphql( const result = await graphql(
` `
{ {
@ -107,6 +107,7 @@ exports.createSchemaCustomization = ({ actions }) => {
title: String title: String
description: String description: String
date: Date @dateformat date: Date @dateformat
author: String
} }
type Fields { type Fields {
slug: String slug: String

View File

@ -54,6 +54,7 @@
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-dropzone": "^11.3.2", "react-dropzone": "^11.3.2",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-share": "^4.4.0",
"react-svg-loader": "^3.0.3", "react-svg-loader": "^3.0.3",
"react-syntax-highlighter": "^13.5.3", "react-syntax-highlighter": "^13.5.3",
"react-use": "^17.2.1", "react-use": "^17.2.1",

View File

@ -54,8 +54,8 @@ export const Carousel = ({ Component, items }) => {
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
<div className="opacity-0 flex flex-row"> <div className="opacity-0 flex flex-row">
{items.map((item, index) => ( {items.map((item, index) => (
<div className="flex-shrink-0 w-screen"> <div key={index} className="flex-shrink-0 w-screen">
<Component key={index} {...item} /> <Component {...item} />
</div> </div>
))} ))}
</div> </div>

View File

@ -0,0 +1,14 @@
import * as React from "react";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
export function Aside({ avatar, author, date }) {
return (
<div className="flex space-x-4">
{avatar && <GatsbyImage image={getImage(avatar)} alt={author || "Skynet Labs Inc"} className="rounded-full" />}
<div className="flex flex-col text-xs justify-around h-10">
<div className="text-palette-600">{author || "Skynet Labs Inc"}</div>
{date && <div className="text-palette-400">{date}</div>}
</div>
</div>
);
}

View File

@ -0,0 +1 @@
export * from "./News";

View File

@ -1,18 +1,41 @@
import * as React from "react"; import * as React from "react";
import { useStaticQuery, graphql } from "gatsby";
import Link from "../Link"; import Link from "../Link";
import { ArrowRight, DiscordSmallWhite } from "../Icons"; import { ArrowRight, DiscordSmallWhite } from "../Icons";
const NewsHeader = () => { const NewsHeader = () => {
const { allMarkdownRemark } = useStaticQuery(graphql`
query LatestNewsQuery {
allMarkdownRemark(sort: { fields: frontmatter___date, order: DESC }, limit: 1) {
edges {
node {
id
frontmatter {
title
}
fields {
slug
}
}
}
}
}
`);
const [latestNews] = allMarkdownRemark.edges;
if (!latestNews) return null; // no news
return ( return (
<div className="bg-palette-500 px-8 p-3"> <div className="bg-palette-500 px-8 p-3">
<div className="max-w-layout mx-auto"> <div className="max-w-layout mx-auto">
<div className="flex justify-between"> <div className="flex justify-between">
<Link <Link
to="/news" to={latestNews.node.fields.slug}
className="text-palette-300 font-content leading-8 flex items-center overflow-hidden text-base hover:text-primary transition-colors duration-200" className="text-palette-300 font-content leading-8 flex items-center overflow-hidden text-base hover:text-primary transition-colors duration-200"
> >
<ArrowRight className="mr-2 flex-shrink-0 fill-current text-primary" /> <ArrowRight className="mr-2 flex-shrink-0 fill-current text-primary" />
<span className="truncate">Skynet Announces SkyDB, Unlocking Fully Decentralized Internet</span> <span className="truncate">{latestNews.node.frontmatter.title}</span>
</Link> </Link>
<div className="ml-auto items-center pl-8 hidden desktop:block"> <div className="ml-auto items-center pl-8 hidden desktop:block">

View File

@ -1,14 +1,68 @@
import * as React from "react"; import * as React from "react";
import { graphql } from "gatsby";
import Layout, { Section, SectionTitle } from "../components/Layout"; import Layout, { Section, SectionTitle } from "../components/Layout";
import { Aside } from "../components/News";
import Link from "../components/Link";
import SEO from "../components/seo"; import SEO from "../components/seo";
const NewsPage = () => (
const NewsCard = ({ ...props }) => {
console.log(props);
return (
<div className="flex flex-col">
<img src="https://placekitten.com/320/170" />
<Link to={props.fields.slug} className="text-xl mt-6 hover:text-primary transition-colors duration-200">
{props.frontmatter.title}
</Link>
{props.frontmatter.description && (
<div className="font-content text-palette-400 mt-4">{props.frontmatter.description}</div>
)}
<div className="mt-6">
<Aside avatar={props.frontmatter.avatar} author={props.frontmatter.author} date={props.frontmatter.date} />
</div>
</div>
);
};
const NewsPage = ({ data }) => {
return (
<Layout> <Layout>
<SEO title="News" /> <SEO title="News" />
<Section className="bg-white" first={true}> <Section className="bg-white" first={true}>
<SectionTitle className="text-center py-48">News section coming soon!</SectionTitle> <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> </Section>
</Layout> </Layout>
); );
};
export const query = graphql`
query NewsQuery {
allMarkdownRemark(sort: { fields: frontmatter___date, order: DESC }) {
edges {
node {
id
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
description
author
avatar {
childImageSharp {
gatsbyImageData(width: 40, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
}
}
}
fields {
slug
}
}
}
}
}
`;
export default NewsPage; export default NewsPage;

View File

@ -1,14 +1,18 @@
import * as React from "react"; import * as React from "react";
import { Link, graphql } from "gatsby"; import { graphql } from "gatsby";
import Bio from "../components/bio";
import Layout, { Section, SectionTitle } from "../components/Layout"; import Layout, { Section, SectionTitle } from "../components/Layout";
import { Aside } from "../components/News";
import SEO from "../components/seo"; import SEO from "../components/seo";
import { TwitterShareButton, LinkedinShareButton, FacebookShareButton } from "react-share";
import { TwitterSmall, LinkedinSmall, FacebookSmall } from "../components/Icons";
const BlogPostTemplate = ({ data, location }) => { const BlogPostTemplate = ({ data, location }) => {
const post = data.markdownRemark; const post = data.markdownRemark;
const siteTitle = data.site.siteMetadata?.title || `Title`; const siteTitle = data.site.siteMetadata?.title || `Title`;
// const { previous, next } = data; // const { previous, next } = data;
console.log(post);
return ( return (
<Layout location={location} title={siteTitle}> <Layout location={location} title={siteTitle}>
<SEO title={post.frontmatter.title} description={post.frontmatter.description || post.excerpt} /> <SEO title={post.frontmatter.title} description={post.frontmatter.description || post.excerpt} />
@ -18,11 +22,26 @@ const BlogPostTemplate = ({ data, location }) => {
{post.frontmatter.title} {post.frontmatter.title}
</SectionTitle> </SectionTitle>
<section <div className="grid grid-cols-3 gap-8">
dangerouslySetInnerHTML={{ __html: post.html }} <aside className="space-y-5">
itemProp="articleBody" <Aside avatar={post.frontmatter.avatar} author={post.frontmatter.author} date={post.frontmatter.date} />
className="max-w-tablet ml-auto"
/> <hr className="text-palette-200" />
<div className="flex items-center">
<div class="text-xs uppercase mr-4">Share</div>
<TwitterShareButton url={location.href} title={post.frontmatter.title}>
<TwitterSmall />
</TwitterShareButton>
<LinkedinShareButton url={location.href} title={post.frontmatter.title}>
<LinkedinSmall />
</LinkedinShareButton>
</div>
</aside>
<section dangerouslySetInnerHTML={{ __html: post.html }} itemProp="articleBody" className="col-span-2" />
</div>
</article> </article>
</Section> </Section>
</Layout> </Layout>
@ -46,6 +65,12 @@ export const pageQuery = graphql`
title title
date(formatString: "MMMM DD, YYYY") date(formatString: "MMMM DD, YYYY")
description description
author
avatar {
childImageSharp {
gatsbyImageData(width: 40, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
}
}
} }
} }
previous: markdownRemark(id: { eq: $previousPostId }) { previous: markdownRemark(id: { eq: $previousPostId }) {