news section

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 |

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.

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

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.

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`,
+  // },
 };

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

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",

packages/website/src/components/Carousel/Carousel.js

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

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 (
+    <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>
+  );
+}

packages/website/src/components/News/index.js

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

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 (
     <div className="bg-palette-500 px-8 p-3">
       <div className="max-w-layout mx-auto">
         <div className="flex justify-between">
           <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"
           >
             <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>
 
           <div className="ml-auto items-center pl-8 hidden desktop:block">

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 = () => (
-  <Layout>
-    <SEO title="News" />
 
-    <Section className="bg-white" first={true}>
-      <SectionTitle className="text-center py-48">News section coming soon!</SectionTitle>
-    </Section>
-  </Layout>
-);
+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>
+      <SEO title="News" />
+
+      <Section className="bg-white" first={true}>
+        <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>
+    </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;

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 (
     <Layout location={location} title={siteTitle}>
       <SEO title={post.frontmatter.title} description={post.frontmatter.description || post.excerpt} />
@@ -18,11 +22,26 @@ const BlogPostTemplate = ({ data, location }) => {
             {post.frontmatter.title}
           </SectionTitle>
 
-          <section
-            dangerouslySetInnerHTML={{ __html: post.html }}
-            itemProp="articleBody"
-            className="max-w-tablet ml-auto"
-          />
+          <div className="grid grid-cols-3 gap-8">
+            <aside className="space-y-5">
+              <Aside avatar={post.frontmatter.avatar} author={post.frontmatter.author} date={post.frontmatter.date} />
+
+              <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>
       </Section>
     </Layout>
@@ -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 }) {