update .ignores, projects work

.eslintignore

@@ -1,6 +1,5 @@
-# don't ever lint node_modules
+node_modules/
-node_modules
+public/
-# don't lint build output (make sure it's set to your correct build folder name)
+.cache/
-dist
 # don't lint nyc coverage output
 coverage

.prettierignore

@@ -1,4 +1,5 @@
-.cache
+.cache/
 package.json
 package-lock.json
-public
+public/
+node_modules/

gatsby-node.js

@@ -92,7 +92,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     '**/src/notes/*',
     '/notes',
     './src/templates/notes.tsx',
-    './src/templates/note.tsx'
+    './src/templates/note.tsx',
   );
   await generatePages(
     createPage,
@@ -101,7 +101,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     '**/src/projects/*',
     '/projects',
     './src/templates/projects.tsx',
-    './src/templates/note.tsx'
+    './src/templates/project.tsx',
   );
 };
 
@@ -114,7 +114,8 @@ exports.createSchemaCustomization = ({ actions: { createTypes } }) => {
     type CommonFrontmatter {
       hidden: Boolean,
       lang: String,
-      tags: [String]
+      tags: [String],
+      subtitle: String,
     }
   `);
 };

src/components/item.module.css

@@ -1,6 +1,7 @@
 .project-item {
   display: flex;
   align-items: baseline;
+  justify-content: space-between;
 }
 
 .project-title {

src/components/item.tsx

@@ -9,8 +9,10 @@ interface ItemProps {
 }
 
 export default (props: ItemProps): JSX.Element => (
-  <Link to={props.to} className={style.projectItem}>
+  <article className={style.projectItem}>
-    <h3 className={style.projectTitle}>{props.title}</h3>
+    <Link to={props.to}>
+      <h3 className={style.projectTitle}>{props.title}</h3>
+    </Link>
     <p className={style.projectSubtitle}>{props.subtitle}</p>
-  </Link>
+  </article>
 );

src/projects/bunbun.mdx

@@ -0,0 +1,50 @@
+---
+title: "Bunbun"
+subtitle: "Cross-browser search commands"
+path: "bunbun"
+date: 2020-01-01
+lang: "rust"
+tags: []
+---
+
+[Bunbun][1] is a search delegation service and my first project in Rust. It's a
+implementation of [bunny1][bunny1] that offers a simple config file as well as
+an extensible plugin system.
+
+An interesting note about the project is that [I've submitted a patch][hotwatch]
+to an library to fix a bug where the file descriptor for watching the config
+file would get stale.
+
+For me, it solves a lot of problems I have, particularly in the sense that it
+lets me write shortcuts that I know will always work, instead of relying on
+browsers to remember for me.
+
+Yes, existing solutions exist, such as DuckDuckGo's [bang!][ddg-bangs] as well
+as FireFox's shortcuts, but I believe this has a niche particularly for
+self-hosted or enterprise environments. As it allows for plugins to run, it can
+offer a uniform experience for employees or users to access common resources.
+
+Honestly, this idea didn't sell me at first, but after using a similar variant
+at my past work, I was completely dependent on it in only 12 weeks.
+
+I've been living on this project for months now, so I can guarantee that it
+works. From a privacy and security perspective, I find it to be satisfactory for
+my needs:
+1. It only logs to `stdout` with the option to completely disable logging.
+2. It's built in Rust without any `unsafe` usage, which guarantees that my code
+should be sound.
+3. It uses `actix`, a well respected HTTP server library that is relatively
+receptive of security concerns.
+4. Its plugin system is as private and secure as the host it's running on, and
+fails safe on improperly defined inputs.
+5. It has meaningful tests!
+
+_Caveat emptor_[^1], of course. You should audit the code yourself, but I'm
+happy with the work I've made (and always receptive of feedback).
+
+[1]: https://github.com/edward-shen/bunbun
+[bunny1]: http://www.bunny1.org/
+[hotwatch]: https://github.com/francesca64/hotwatch/pull/4
+[ddg-bangs]: https://duckduckgo.com/bang
+
+[^1]: https://en.wikipedia.org/wiki/Caveat_emptor

src/projects/shlink.mdx

@@ -1,8 +1,10 @@
 ---
+title: "Shlink"
+subtitle: "1-click link shortening"
 path: "shlink"
 date: 2020-01-01
-title: "Shlink"
 lang: "js"
+tags: []
 ---
 
-Hello World
+Shlink

src/templates/note.tsx

@@ -4,8 +4,7 @@ import { graphql } from 'gatsby';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 
 export default ({ data }) => {
-  const { frontmatter, body } = data.mdx;
+  const { frontmatter, tableOfContents, body } = data.mdx;
-
   return (
     <>
       <Navbar />

src/templates/project.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Navbar from '../components/navbar';
+import { graphql } from 'gatsby';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
+
+export default ({ data }) => {
+  const { frontmatter, body } = data.mdx;
+  return (
+    <>
+      <Navbar />
+      <main>
+        <h1>{frontmatter.title}</h1>
+        <h5>{frontmatter.subtitle}</h5>
+        <MDXRenderer>{body}</MDXRenderer>
+      </main>
+    </>
+  );
+};
+
+export const query = graphql`
+  query ProjectsItemQuery($id: String!) {
+    mdx(id: { eq: $id }) {
+      frontmatter {
+        title
+        subtitle
+      }
+      tableOfContents
+      body
+    }
+  }
+`;

src/templates/projects.tsx

@@ -11,14 +11,14 @@ export default ({ data, pageContext }): JSX.Element => {
   return (
     <>
       <Navbar />
-      {posts.map(({ node }) => {
+      {posts.map(({ node: { id, frontmatter } }) => {
-        const frontmatter = node.frontmatter;
         return (
           <Item
+            key={id}
             title={frontmatter.title}
-            subtitle={frontmatter.lang}
+            subtitle={frontmatter.subtitle}
             to={rootPath + '/' + frontmatter.path}
-          ></Item>
+          />
         );
       })}
       <PaginationNav
@@ -48,7 +48,7 @@ export const query = graphql`
             title
             date(formatString: "YYYY-MM-DD")
             path
-            lang
+            subtitle
           }
           id
         }