From f9aa65e67a202f1efc8c749a9c7fee84641a60f6 Mon Sep 17 00:00:00 2001 From: Karol Wypchlo Date: Thu, 1 Apr 2021 00:37:02 +0200 Subject: [PATCH] news section --- .../website/data/news/hello-world/index.md | 4 +- .../website/data/news/my-second-post/index.md | 3 + .../website/data/news/new-beginnings/index.md | 2 + .../data/news/premium-accounts/index.md | 4 +- packages/website/gatsby-config.js | 5 +- packages/website/gatsby-node.js | 3 +- packages/website/package.json | 1 + .../src/components/Carousel/Carousel.js | 4 +- packages/website/src/components/News/News.js | 14 ++++ packages/website/src/components/News/index.js | 1 + .../src/components/NewsHeader/NewsHeader.js | 27 ++++++- packages/website/src/pages/news.js | 70 ++++++++++++++++--- packages/website/src/templates/news-post.js | 39 +++++++++-- 13 files changed, 154 insertions(+), 23 deletions(-) create mode 100644 packages/website/src/components/News/News.js create mode 100644 packages/website/src/components/News/index.js diff --git a/packages/website/data/news/hello-world/index.md b/packages/website/data/news/hello-world/index.md index e30ec3c5..1811f662 100644 --- a/packages/website/data/news/hello-world/index.md +++ b/packages/website/data/news/hello-world/index.md @@ -2,6 +2,8 @@ title: Hello World date: "2015-05-01T22:12:03.284Z" description: "Hello World" +author: Nicole Tay +avatar: ../../team/nicole-tay.png --- 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! ```js -const saltyDuckEgg = "chinese preserved food product" +const saltyDuckEgg = "chinese preserved food product"; ``` | Number | Title | Year | diff --git a/packages/website/data/news/my-second-post/index.md b/packages/website/data/news/my-second-post/index.md index 196dc57b..7dca8309 100644 --- a/packages/website/data/news/my-second-post/index.md +++ b/packages/website/data/news/my-second-post/index.md @@ -1,6 +1,9 @@ --- title: My Second Post! 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. diff --git a/packages/website/data/news/new-beginnings/index.md b/packages/website/data/news/new-beginnings/index.md index 86012ecc..e4e52673 100644 --- a/packages/website/data/news/new-beginnings/index.md +++ b/packages/website/data/news/new-beginnings/index.md @@ -2,6 +2,8 @@ title: New Beginnings 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. +author: Karol Wypchlo +avatar: ../../team/karol-wypchlo.png --- Far far away, behind the word mountains, far from the countries Vokalia and diff --git a/packages/website/data/news/premium-accounts/index.md b/packages/website/data/news/premium-accounts/index.md index 43d17bcc..c8a50d33 100644 --- a/packages/website/data/news/premium-accounts/index.md +++ b/packages/website/data/news/premium-accounts/index.md @@ -1,7 +1,9 @@ --- 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." +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. diff --git a/packages/website/gatsby-config.js b/packages/website/gatsby-config.js index 4b853d55..e789f875 100644 --- a/packages/website/gatsby-config.js +++ b/packages/website/gatsby-config.js @@ -55,7 +55,7 @@ module.exports = { options: { classMap: { heading: "font-semibold text-palette-600", - paragraph: "font-content text-palette-400", + paragraph: "font-content text-base text-palette-400", strong: "font-semibold", "heading[depth=1]": "text-4xl", "heading[depth=2]": "text-3xl", @@ -115,4 +115,7 @@ module.exports = { }, }, ], + // mapping: { + // "MarkdownRemark.frontmatter.author": `teamYaml`, + // }, }; diff --git a/packages/website/gatsby-node.js b/packages/website/gatsby-node.js index 1b3ec920..350b421b 100644 --- a/packages/website/gatsby-node.js +++ b/packages/website/gatsby-node.js @@ -18,7 +18,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => { // Define a template for news post 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( ` { @@ -107,6 +107,7 @@ exports.createSchemaCustomization = ({ actions }) => { title: String description: String date: Date @dateformat + author: String } type Fields { slug: String diff --git a/packages/website/package.json b/packages/website/package.json index a5600054..bcfb29bf 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -54,6 +54,7 @@ "react-dom": "^17.0.2", "react-dropzone": "^11.3.2", "react-helmet": "^6.1.0", + "react-share": "^4.4.0", "react-svg-loader": "^3.0.3", "react-syntax-highlighter": "^13.5.3", "react-use": "^17.2.1", diff --git a/packages/website/src/components/Carousel/Carousel.js b/packages/website/src/components/Carousel/Carousel.js index 5746e7d9..d087a7b1 100644 --- a/packages/website/src/components/Carousel/Carousel.js +++ b/packages/website/src/components/Carousel/Carousel.js @@ -54,8 +54,8 @@ export const Carousel = ({ Component, items }) => {
{items.map((item, index) => ( -
- +
+
))}
diff --git a/packages/website/src/components/News/News.js b/packages/website/src/components/News/News.js new file mode 100644 index 00000000..40bb0665 --- /dev/null +++ b/packages/website/src/components/News/News.js @@ -0,0 +1,14 @@ +import * as React from "react"; +import { GatsbyImage, getImage } from "gatsby-plugin-image"; + +export function Aside({ avatar, author, date }) { + return ( +
+ {avatar && } +
+
{author || "Skynet Labs Inc"}
+ {date &&
{date}
} +
+
+ ); +} diff --git a/packages/website/src/components/News/index.js b/packages/website/src/components/News/index.js new file mode 100644 index 00000000..47bc1306 --- /dev/null +++ b/packages/website/src/components/News/index.js @@ -0,0 +1 @@ +export * from "./News"; diff --git a/packages/website/src/components/NewsHeader/NewsHeader.js b/packages/website/src/components/NewsHeader/NewsHeader.js index 8925af24..92b12714 100644 --- a/packages/website/src/components/NewsHeader/NewsHeader.js +++ b/packages/website/src/components/NewsHeader/NewsHeader.js @@ -1,18 +1,41 @@ import * as React from "react"; +import { useStaticQuery, graphql } from "gatsby"; import Link from "../Link"; import { ArrowRight, DiscordSmallWhite } from "../Icons"; 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 (
- Skynet Announces SkyDB, Unlocking Fully Decentralized Internet + {latestNews.node.frontmatter.title}
diff --git a/packages/website/src/pages/news.js b/packages/website/src/pages/news.js index 83e27b86..d68e5c77 100644 --- a/packages/website/src/pages/news.js +++ b/packages/website/src/pages/news.js @@ -1,14 +1,68 @@ import * as React from "react"; +import { graphql } from "gatsby"; import Layout, { Section, SectionTitle } from "../components/Layout"; +import { Aside } from "../components/News"; +import Link from "../components/Link"; import SEO from "../components/seo"; -const NewsPage = () => ( - - -
- News section coming soon! -
- -); +const NewsCard = ({ ...props }) => { + console.log(props); + return ( +
+ + + {props.frontmatter.title} + + {props.frontmatter.description && ( +
{props.frontmatter.description}
+ )} +
+
+
+ ); +}; + +const NewsPage = ({ data }) => { + return ( + + + +
+
+ {data.allMarkdownRemark.edges.map(({ node }) => ( + + ))} +
+
+ + ); +}; + +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; diff --git a/packages/website/src/templates/news-post.js b/packages/website/src/templates/news-post.js index 82e1fbc6..c084059e 100644 --- a/packages/website/src/templates/news-post.js +++ b/packages/website/src/templates/news-post.js @@ -1,14 +1,18 @@ import * as React from "react"; -import { Link, graphql } from "gatsby"; -import Bio from "../components/bio"; +import { graphql } from "gatsby"; import Layout, { Section, SectionTitle } from "../components/Layout"; +import { Aside } from "../components/News"; import SEO from "../components/seo"; +import { TwitterShareButton, LinkedinShareButton, FacebookShareButton } from "react-share"; +import { TwitterSmall, LinkedinSmall, FacebookSmall } from "../components/Icons"; const BlogPostTemplate = ({ data, location }) => { const post = data.markdownRemark; const siteTitle = data.site.siteMetadata?.title || `Title`; // const { previous, next } = data; + console.log(post); + return ( @@ -18,11 +22,26 @@ const BlogPostTemplate = ({ data, location }) => { {post.frontmatter.title} -
+
+
@@ -46,6 +65,12 @@ export const pageQuery = graphql` title date(formatString: "MMMM DD, YYYY") description + author + avatar { + childImageSharp { + gatsbyImageData(width: 40, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF]) + } + } } } previous: markdownRemark(id: { eq: $previousPostId }) {