From 780c6b7e90dd76427156ef9d92ebe22f2e196de5 Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Thu, 8 Apr 2021 17:13:15 +0200
Subject: [PATCH] news

---
 .../src/components/Icons/ArrowUpCircle.svg    |  2 +-
 packages/website/src/pages/about.js           | 27 ++++++++-------
 packages/website/src/pages/developers.js      |  2 +-
 packages/website/src/templates/news-post.js   | 34 +++++++++++++++++--
 4 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/packages/website/src/components/Icons/ArrowUpCircle.svg b/packages/website/src/components/Icons/ArrowUpCircle.svg
index 96b076f7..07422061 100644
--- a/packages/website/src/components/Icons/ArrowUpCircle.svg
+++ b/packages/website/src/components/Icons/ArrowUpCircle.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
-  <path fill="#0D0D0D" d="M20,4 C28.836,4 36,11.164 36,20 C36,28.836 28.836,36 20,36 C11.164,36 4,28.836 4,20 C4,11.164 11.164,4 20,4 Z M20,6 C12.2685695,6 6,12.2685695 6,20 C6,27.7314305 12.2685695,34 20,34 C27.7314305,34 34,27.7314305 34,20 C34,12.2685695 27.7314305,6 20,6 Z M19.4363719,13.4966307 C19.8299265,13.1934645 20.3968364,13.2236414 20.7557217,13.5855059 L20.7557217,13.5855059 L25.7100234,18.5809324 L24.2899766,19.9892886 L21,16.673 L21,26 L19,26 L19,16.733 L15.7038828,20.0000001 L14.2961172,18.5793679 L19.3418155,13.5793679 Z"/>
+  <path fill-rule="evenodd" d="M20,4 C28.836,4 36,11.164 36,20 C36,28.836 28.836,36 20,36 C11.164,36 4,28.836 4,20 C4,11.164 11.164,4 20,4 Z M20,6 C12.2685695,6 6,12.2685695 6,20 C6,27.7314305 12.2685695,34 20,34 C27.7314305,34 34,27.7314305 34,20 C34,12.2685695 27.7314305,6 20,6 Z M19.4363719,13.4966307 C19.8299265,13.1934645 20.3968364,13.2236414 20.7557217,13.5855059 L20.7557217,13.5855059 L25.7100234,18.5809324 L24.2899766,19.9892886 L21,16.673 L21,26 L19,26 L19,16.733 L15.7038828,20.0000001 L14.2961172,18.5793679 L19.3418155,13.5793679 Z"/>
 </svg>
diff --git a/packages/website/src/pages/about.js b/packages/website/src/pages/about.js
index 7929d721..45fd4449 100644
--- a/packages/website/src/pages/about.js
+++ b/packages/website/src/pages/about.js
@@ -61,6 +61,7 @@ const aboutCards = [
   },
 ];
 
+const showCareersCTA = false; // change to true to display the careers CTA section
 const careers = { href: "https://jobs.lever.co/nebulous", target: "_blank", rel: "noopener noreferrer" };
 
 const paginate = (array, size) =>
@@ -253,18 +254,20 @@ const AboutPage = ({ ...props }) => {
             <Carousel Component={TeamCardPage} items={teamCardsPaginated} fullWidth={true} />
           </div>
 
-          <div className="desktop:col-span-2 flex flex-col desktop:flex-row items-center desktop:space-x-8 space-y-8 desktop:space-y-0 hidden">
-            <Link className="flex-shrink-0 hidden desktop:inline-block" {...careers}>
-              <Join />
-            </Link>
-            <p className="font-light text-lg text-center desktop:text-left">
-              Join us! We're looking for talented &amp; passionate individuals to join our team. Check out our job
-              postings today.
-            </p>
-            <Link className="flex-shrink-0 desktop:hidden" {...careers}>
-              <Join />
-            </Link>
-          </div>
+          {showCareersCTA && (
+            <div className="desktop:col-span-2 flex flex-col desktop:flex-row items-center desktop:space-x-8 space-y-8 desktop:space-y-0">
+              <Link className="flex-shrink-0 hidden desktop:inline-block" {...careers}>
+                <Join />
+              </Link>
+              <p className="font-light text-lg text-center desktop:text-left">
+                Join us! We're looking for talented &amp; passionate individuals to join our team. Check out our job
+                postings today.
+              </p>
+              <Link className="flex-shrink-0 desktop:hidden" {...careers}>
+                <Join />
+              </Link>
+            </div>
+          )}
         </div>
       </Section>
 
diff --git a/packages/website/src/pages/developers.js b/packages/website/src/pages/developers.js
index 93425d8c..924f4001 100644
--- a/packages/website/src/pages/developers.js
+++ b/packages/website/src/pages/developers.js
@@ -151,7 +151,7 @@ const DevelopersPage = () => (
     <Section className="bg-white">
       <SectionTitle className="text-center mb-20">Join a community of builders already using Skynet</SectionTitle>
 
-      <div className="grid grid-cols-1 gap-x-32 gap-y-10 desktop:grid-cols-3">
+      <div className="grid grid-cols-1 desktop:gap-x-8 gap-y-10 desktop:grid-cols-3">
         <div className="space-y-8">
           <DevBig width="170" viewBox="90 0 170 142" />
 
diff --git a/packages/website/src/templates/news-post.js b/packages/website/src/templates/news-post.js
index 37b00e2d..6df9c9c3 100644
--- a/packages/website/src/templates/news-post.js
+++ b/packages/website/src/templates/news-post.js
@@ -1,10 +1,11 @@
 import * as React from "react";
 import { graphql } from "gatsby";
-import { Section, SectionTitle } from "../components/Layout";
+import { Section, SectionTitle, Label } from "../components/Layout";
 import { NewsSummary } from "../components/News";
 import Seo from "../components/seo";
+import Link from "../components/Link";
 import { TwitterShareButton, LinkedinShareButton, FacebookShareButton } from "react-share";
-import { TwitterSmall, LinkedinSmall, FacebookSmall } from "../components/Icons";
+import { TwitterSmall, LinkedinSmall, FacebookSmall, ArrowUpCircle } from "../components/Icons";
 
 const BlogPostTemplate = ({ data, location }) => {
   const post = data.markdownRemark;
@@ -17,7 +18,25 @@ const BlogPostTemplate = ({ data, location }) => {
     <>
       <Seo title={post.frontmatter.title} description={post.frontmatter.description || post.excerpt} />
       <Section className="bg-white desktop:bg-column" first={true}>
+        <Link
+          to="/news"
+          className="flex items-center space-x-2 relative -top-6 desktop:-top-10 hover:text-primary transition-colors duration-200"
+        >
+          <ArrowUpCircle className="transform -rotate-90 fill-current" />
+          <span className="relative text-lg font-semibold" style={{ top: 1 }}>
+            Go back
+          </span>
+        </Link>
+
         <article className="blog-post" itemScope itemType="http://schema.org/Article">
+          {post.frontmatter.categories && (
+            <div className="mb-4">
+              {post.frontmatter.categories.map((category) => (
+                <Label key={category}>{category}</Label>
+              ))}
+            </div>
+          )}
+
           <SectionTitle itemProp="headline" className="mb-16">
             {post.frontmatter.title}
           </SectionTitle>
@@ -59,6 +78,16 @@ const BlogPostTemplate = ({ data, location }) => {
             </div>
           </div>
         </article>
+
+        <Link
+          to="/news"
+          className="flex items-center space-x-2 relative hover:text-primary transition-colors duration-200 mt-12 desktop:mt-0 desktop:-bottom-12"
+        >
+          <ArrowUpCircle className="transform -rotate-90 fill-current" />
+          <span className="relative text-lg font-semibold" style={{ top: 1 }}>
+            Go back
+          </span>
+        </Link>
       </Section>
     </>
   );
@@ -81,6 +110,7 @@ export const pageQuery = graphql`
         title
         date(formatString: "MMMM DD, YYYY")
         description
+        categories
         author
         avatar {
           childImageSharp {