polish news

packages/website/data/news/premium-accounts/index.md

@@ -1,9 +1,11 @@
 ---
-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-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
+author: "Manasi Vora"
+categories: ["press release"]
+avatar: "../../team/manasi-vora.png"
+thumbnail: "../images/press-release.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-node.js

@@ -109,6 +109,7 @@ exports.createSchemaCustomization = ({ actions }) => {
       date: Date @dateformat
       author: String
       hidden: Boolean
+      categories: [String]
     }
     type Fields {
       slug: String

packages/website/src/components/Layout/Section.js

@@ -100,9 +100,11 @@ export const CardWithTitle = ({ Icon, title }) => (
   </div>
 );
 
-const Label = ({ children }) => (
-  <span className="inline-flex items-center px-3 leading-5 rounded-full text-xxs bg-palette-200 text-palette-600 lowercase">
-    {children}
+export const Label = ({ children }) => (
+  <span className="inline-flex items-center px-3 h-6 rounded-full text-xxs bg-palette-200 text-palette-600 uppercase">
+    <span className="relative" style={{ top: 1 }}>
+      {children}
+    </span>
   </span>
 );
 

packages/website/src/pages/news.js

@@ -1,17 +1,27 @@
 import * as React from "react";
 import { graphql } from "gatsby";
-import Layout, { Section } from "../components/Layout";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
+import Layout, { Section, Label } from "../components/Layout";
 import { NewsSummary } from "../components/News";
 import Link from "../components/Link";
 import SEO from "../components/seo";
 
 const NewsCard = ({ ...props }) => {
+  console.log(props.frontmatter);
   return (
     <div className="flex flex-col">
       <Link to={props.fields.slug}>
-        <img src={`https://picsum.photos/320/170?${Math.random()}`} alt={props.frontmatter.title} />
+        <GatsbyImage image={getImage(props.frontmatter.thumbnail)} />
       </Link>
 
+      {props.frontmatter.categories && (
+        <div className="mt-6">
+          {props.frontmatter.categories.map((category) => (
+            <Label key={category}>{category}</Label>
+          ))}
+        </div>
+      )}
+
       <Link to={props.fields.slug} className="text-xl mt-6">
         {props.frontmatter.title}
       </Link>
@@ -63,6 +73,12 @@ export const query = graphql`
             date(formatString: "MMMM DD, YYYY")
             description
             author
+            categories
+            thumbnail {
+              childImageSharp {
+                gatsbyImageData(width: 320, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
+              }
+            }
             avatar {
               childImageSharp {
                 gatsbyImageData(width: 40, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])