add dev articles and change facebook icon

packages/website/data/news/hello-world/index.md

@@ -4,6 +4,7 @@ date: "2015-05-01T22:12:03.284Z"
 description: "Hello World"
 author: Nicole Tay
 avatar: ../../team/nicole-tay.png
+hidden: true
 ---
 
 This is my first post on my new fake blog! How exciting!

packages/website/data/news/my-second-post/index.md

@@ -4,6 +4,7 @@ date: "2015-05-06T23:46:37.121Z"
 description: Wow! I love blogging so much already.
 author: Daniel Helm
 avatar: ../../team/daniel-helm.png
+hidden: true
 ---
 
 Wow! I love blogging so much already.

packages/website/data/news/new-beginnings/index.md

@@ -4,6 +4,7 @@ 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
+hidden: true
 ---
 
 Far far away, behind the word mountains, far from the countries Vokalia and

packages/website/gatsby-node.js

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

packages/website/src/components/Icons/FacebookSmall.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill-rule="evenodd">
+        <path d="M17.25 5H6.75C5.785 5 5 5.785 5 6.75v10.5c0 .965.785 1.75 1.75 1.75H12v-4.813h-1.75V12H12v-1.75c0-1.45 1.175-2.625 2.625-2.625h1.75v2.188H15.5c-.483 0-.875-.046-.875.437V12h2.188l-.875 2.188h-1.313V19h2.625c.965 0 1.75-.785 1.75-1.75V6.75C19 5.785 18.215 5 17.25 5z"/>
+    </g>
+</svg>

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

@@ -13,6 +13,7 @@ export { default as DiscordSmallWhite } from "./DiscordSmallWhite.svg";
 export { default as Encryption } from "./Encryption.svg";
 export { default as Error } from "./Error.svg";
 export { default as ExternalLink } from "./ExternalLink.svg";
+export { default as FacebookSmall } from "./FacebookSmall.svg";
 export { default as Fingerprint } from "./Fingerprint.svg";
 export { default as GithubSmall } from "./GithubSmall.svg";
 export { default as GitlabSmall } from "./GitlabSmall.svg";

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 
-export function Aside({ avatar, author, date }) {
+export function NewsSummary({ avatar, author, date }) {
   return (
     <div className="flex space-x-4">
       {avatar && <GatsbyImage image={getImage(avatar)} alt={author || "Skynet Labs Inc"} className="rounded-full" />}

packages/website/src/pages/news.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { graphql } from "gatsby";
 import Layout, { Section } from "../components/Layout";
-import { Aside } from "../components/News";
+import { NewsSummary } from "../components/News";
 import Link from "../components/Link";
 import SEO from "../components/seo";
 
@@ -11,14 +11,23 @@ const NewsCard = ({ ...props }) => {
       <Link to={props.fields.slug}>
         <img src={`https://picsum.photos/320/170?${Math.random()}`} alt={props.frontmatter.title} />
       </Link>
-      <Link to={props.fields.slug} className="text-xl mt-6 hover:text-primary transition-colors duration-200">
+
+      <Link to={props.fields.slug} className="text-xl mt-6">
         {props.frontmatter.title}
       </Link>
+
       {props.frontmatter.description && (
-        <div className="font-content text-palette-400 mt-4">{props.frontmatter.description}</div>
+        <Link to={props.fields.slug} className="font-content text-palette-400 mt-4">
+          {props.frontmatter.description}
+        </Link>
       )}
+
       <div className="mt-6">
-        <Aside avatar={props.frontmatter.avatar} author={props.frontmatter.author} date={props.frontmatter.date} />
+        <NewsSummary
+          avatar={props.frontmatter.avatar}
+          author={props.frontmatter.author}
+          date={props.frontmatter.date}
+        />
       </div>
     </div>
   );
@@ -42,7 +51,10 @@ const NewsPage = ({ data }) => {
 
 export const query = graphql`
   query NewsQuery {
-    allMarkdownRemark(sort: { fields: frontmatter___date, order: DESC }) {
+    allMarkdownRemark(
+      filter: { frontmatter: { hidden: { ne: true } } }
+      sort: { fields: frontmatter___date, order: DESC }
+    ) {
       edges {
         node {
           id

packages/website/src/templates/news-post.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { graphql } from "gatsby";
 import Layout, { Section, SectionTitle } from "../components/Layout";
-import { Aside } from "../components/News";
+import { NewsSummary } from "../components/News";
 import SEO from "../components/seo";
 import { TwitterShareButton, LinkedinShareButton, FacebookShareButton } from "react-share";
-import { TwitterSmall, LinkedinSmall } from "../components/Icons";
+import { TwitterSmall, LinkedinSmall, FacebookSmall } from "../components/Icons";
 
 const BlogPostTemplate = ({ data, location }) => {
   const post = data.markdownRemark;
@@ -24,7 +24,11 @@ const BlogPostTemplate = ({ data, location }) => {
 
           <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} />
+              <NewsSummary
+                avatar={post.frontmatter.avatar}
+                author={post.frontmatter.author}
+                date={post.frontmatter.date}
+              />
 
               <hr className="text-palette-200" />
 
@@ -44,7 +48,7 @@ const BlogPostTemplate = ({ data, location }) => {
                 </LinkedinShareButton>
 
                 <FacebookShareButton url={location.href} quote={post.frontmatter.title}>
-                  <LinkedinSmall className="fill-current hover:text-palette-400 transition-colors duration-200" />
+                  <FacebookSmall className="fill-current hover:text-palette-400 transition-colors duration-200" />
                 </FacebookShareButton>
               </div>
             </aside>