feat(blog): yep, it's the blog

.env.example

@@ -1,6 +1,17 @@
 # rss feed which should be a link to an xml file
 RSS_FEED_URL=""
+
 # renders all episodes or just "coming soon"
 COMING_SOON_ENABLED="true"
+
 # Adds the DECENTRALIZED banner for funsies
-# DECENTRALIZED="true"
+# DECENTRALIZED="true"
+
+# GraphQL api token
+BLOG_API_TOKEN=""
+
+# defaults to https://api.github.com/graphql
+# BLOG_GRAPHQL_ENDPOINT=""
+
+# Blog github branch to pull content from defaults to "main"
+# BLOG_BRANCH=""

.github/workflows/build-and-deploy.yml

@@ -11,7 +11,10 @@ jobs:
     runs-on: ubuntu-latest
     environment: gh-pages
     steps:
-      - uses: actions/setup-node@v3
+      - name: 'Setup Node'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
       - name: Checkout 🛎️
         uses: actions/checkout@v3
 

.nvmrc

@@ -0,0 +1 @@
+18.5.0

app.config.ts

@@ -4,6 +4,10 @@ export const DECENTRALIZED = process.env.DECENTRALIZED === 'true';
 export const BUILD_TS = process.env.BUILD_TS
   ? new Date(Number(process.env.BUILD_TS) * 1000)
   : new Date();
+export const BLOG_API_TOKEN = process.env.BLOG_API_TOKEN || '';
+export const BLOG_GRAPHQL_ENDPOINT =
+  process.env.BLOG_GRAPHQL_ENDPOINT || 'https://api.github.com/graphql';
+export const BLOG_BRANCH = process.env.BLOG_BRANCH || 'main';
 
 if (!COMING_SOON_ENABLED && !RSS_FEED_URL)
   throw new Error(

package.json

@@ -19,7 +19,10 @@
   "private": true,
   "dependencies": {
     "@types/react": "^17.0.37",
+    "gray-matter": "^4.0.3",
+    "js-yaml": "^4.1.0",
     "next": "^12.0.7",
+    "next-mdx-remote": "^4.0.3",
     "next-sitemap": "^1.6.203",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -30,6 +33,7 @@
   },
   "devDependencies": {
     "@types/node": "^17.0.35",
+    "@types/styled-components": "^5.1.25",
     "serve": "^13.0.2"
   }
 }

components/AudioPlayer/AudioPlayer.styled.tsx → src/components/AudioPlayer/AudioPlayer.styled.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const StyledAudioPlayer = styled.div`
+export const StyledAudioPlayer = styled.div<{ $active: boolean }>`
   width: 100%;
   position: fixed;
   bottom: 0;

src/components/Author/Author.styled.ts

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+export const Avatar = styled.div`
+  padding: 1.6rem;
+  border: 1px solid white;
+  display: flex;
+  align-items: center;
+  img {
+    min-width: 100px;
+    max-width: 100px;
+    height: 100px;
+    margin-right: 1.6rem;
+    border: 1px solid white;
+  }
+  h1,
+  h2 {
+    margin: 0;
+  }
+  h2 {
+    font-weight: 400;
+    font-size: 1.6rem;
+  }
+`;
+
+export const Inner = styled.div`
+  max-width: 500px;
+  min-height: 500px;
+  margin: auto;
+  padding: 2rem 1.6rem 0;
+
+  @media scree and (min-width: 500px) {
+    padding: 2rem 0 0;
+  }
+
+  h3 {
+    padding-top: 1.6rem;
+    margin-bottom: 0.8rem;
+  }
+  ul {
+    padding-left: 1.8rem;
+    margin-top: 0;
+  }
+`;

src/components/Author/Author.tsx

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import { Author as IAuthor, Post } from '../../lib/blog';
+import { blogAssetRoot } from '../../utils/constants';
+import { Avatar, Inner } from './Author.styled';
+import { BreadCrumbs } from '../BreadCrumbs/BreadCrumbs';
+
+interface AuthorProps {
+  author: IAuthor;
+  posts: Post[];
+}
+
+export const Author = (props: AuthorProps) => {
+  const { author, posts } = props;
+  return (
+    <section>
+      <Inner>
+        <BreadCrumbs />
+        <Avatar>
+          <img
+            alt={`${author.name}'s profile picture`}
+            src={`${blogAssetRoot}${author.authorimage}`}
+          />
+          <div>
+            <h1>{author.name}</h1>
+            <h2>
+              {'a.k.a '}
+              {author.title}
+            </h2>
+          </div>
+        </Avatar>
+        <p>{author.shortbio}</p>
+        <h3>Posts by this author</h3>
+        <ul>
+          {posts.map((post) => (
+            <li key={post.slug}>
+              <Link href={`/blog/${post.slug}`}>{post.data.title}</Link>
+            </li>
+          ))}
+        </ul>
+      </Inner>
+    </section>
+  );
+};

src/components/Authors/Authors.styled.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const Inner = styled.div`
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 0 1.6rem;
+  @media screen and (min-width: 500px) {
+    padding: 0;
+  }
+  h1,
+  h2 {
+    text-align: center;
+    font-weight: 400;
+  }
+  h1 {
+    font-size: 5.2rem;
+    margin-bottom: 1.2rem;
+  }
+  h2 {
+    margin-top: 0;
+    font-size: 1.8rem;
+  }
+`;
+
+export const AuthorsList = styled.div`
+  min-height: 500px;
+`;

src/components/Authors/Authors.tsx

@@ -0,0 +1,28 @@
+import Link from 'next/link';
+import { Author } from '../../lib/blog';
+import { Inner, AuthorsList } from './Authors.styled';
+import { BreadCrumbs } from '../BreadCrumbs/BreadCrumbs';
+
+interface AuthorsProps {
+  authors: Author[];
+}
+
+export const Authors = (props: AuthorsProps) => {
+  const { authors } = props;
+  return (
+    <section>
+      <Inner>
+        <BreadCrumbs />
+        <h1>Authors</h1>
+        <h2>Can't live with 'em, can't live without 'em</h2>
+        <AuthorsList>
+          {authors.map((author) => (
+            <p key={author.slug}>
+              <Link href={`/blog/authors/${author.slug}`}>{author.name}</Link>
+            </p>
+          ))}
+        </AuthorsList>
+      </Inner>
+    </section>
+  );
+};

src/components/Blog/Blog.styled.ts

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+
+export const StyledBlog = styled.section`
+  background-color: ${(p) => p.theme.background};
+  font-family: ${(p) => p.theme.ffJetbrainsMono};
+  padding: 0 1.6rem;
+  @media screen and (min-width: 500px) {
+    padding: 0 2.4rem;
+  }
+`;
+
+export const Hero = styled.div`
+  h1,
+  h2,
+  h3,
+  h5 {
+    margin: 0;
+  }
+
+  h1 {
+    text-indent: -999999px;
+    font-size: 0.2rem;
+    padding-bottom: 0.8rem;
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  h2 {
+    font-size: 1.6rem;
+    @media screen and (min-width: 500px) {
+      font-size: 2.4rem;
+    }
+  }
+
+  h2,
+  h3 {
+    text-align: center;
+    font-weight: 400;
+  }
+  h3 {
+    font-size: 1.2rem;
+    padding: 1.6rem 0 3.2rem;
+  }
+`;
+
+export const Inner = styled.div`
+  max-width: 700px;
+  margin: 0 auto;
+  padding: 1.6rem 0;
+`;
+
+export const ArticleLink = styled.a`
+  text-decoration: unset;
+`;
+
+export const Article = styled.article`
+  h3,
+  h5 {
+    font-weight: 400;
+  }
+  h3 {
+    margin: 0;
+    font-size: 3.2rem;
+    font-style: italic;
+    text-transform: UPPERCASE;
+    color: white;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  h5 {
+    margin: 0;
+  }
+  border: 1px solid white;
+  margin-bottom: 1.6rem;
+  padding: 0.8rem;
+`;

src/components/Blog/Blog.tsx

@@ -0,0 +1,92 @@
+import Link from 'next/link';
+import { Post, Author } from '../../lib/blog';
+import { StyledBlog, Inner, Article, ArticleLink } from './Blog.styled';
+import { Hero } from './Blog.styled';
+import caveImgPng from './hero-images/chad-syntax-blog-cave.png';
+import caveImgPng2x from './hero-images/chad-syntax-blog-cave@2x.png';
+import caveImgWebp from './hero-images/chad-syntax-blog-cave.webp';
+import caveImgWebp2x from './hero-images/chad-syntax-blog-cave@2x.png';
+import { BreadCrumbs } from '../BreadCrumbs/BreadCrumbs';
+import { useMemo } from 'react';
+
+interface BlogProps {
+  posts: Post[];
+  authors: Author[];
+}
+
+const maxDescCharCount = 275;
+
+export const Blog = (props: BlogProps) => {
+  const { posts, authors } = props;
+
+  const authorsMap = useMemo(() => {
+    const map = new Map();
+    for (const author of authors) {
+      map.set(author.slug, author);
+    }
+    return map;
+  }, [authors]);
+
+  return (
+    <StyledBlog>
+      <Inner>
+        <BreadCrumbs />
+        <Hero>
+          <h1>
+            Chad $yntax's Blog of infinite Wonders!
+            <picture>
+              <source
+                srcSet={`${caveImgPng.src}, ${caveImgPng2x.src} 2x`}
+                type="image/png"
+              />
+              <source
+                srcSet={`${caveImgWebp.src}, ${caveImgWebp2x.src} 2x`}
+                type="image/webp"
+              />
+              <img
+                src={caveImgWebp.src}
+                alt="Chad $yntax's Blog of infinite Wonders Logo!"
+              />
+            </picture>
+          </h1>
+          <h2>
+            A Blog of posts. Posts about software engineering, web development,
+            and whatever else.
+          </h2>
+          <h3>
+            *Disclaimer: Wonders non-transferrable, see fine print for details.
+          </h3>
+        </Hero>
+        {posts.length === 0 && <p>The cave is... empty? Wtf.</p>}
+        <div>
+          {posts.map((post) => {
+            const { title, author } = post.data;
+            const targetAuthor = authorsMap.get(author);
+            let description = post.data.description ?? '';
+            if (description.length > maxDescCharCount) {
+              description = `${description
+                .slice(0, maxDescCharCount)
+                .trim()}...`;
+            }
+            return (
+              <Link key={title} href={`/blog/${post.slug}`} passHref>
+                <ArticleLink>
+                  <Article>
+                    <h3>{post.data.title}</h3>
+                    <h5>
+                      By&nbsp;
+                      <Link href={`/blog/authors/${targetAuthor.slug}`}>
+                        <a>{targetAuthor.name}</a>
+                      </Link>
+                    </h5>
+                    <p>{description}</p>
+                  </Article>
+                </ArticleLink>
+              </Link>
+            );
+          })}
+        </div>
+      </Inner>
+    </StyledBlog>
+  );
+};