Add tags to projects page

Author: kyleect

src/components/tags.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import InlineList from './inline-list';
+
+const TagsStyle = styled(InlineList)`
+  margin-left: 0;
+  padding: 0;
+  margin: 1em 0 2em 0;
+
+  &:before {
+    content: 'Tags:';
+    font-weight: bold;
+    font-size: 0.9em;
+    margin-right: 0em;
+  }
+
+  li {
+    font-size: 0.9em;
+    margin-right: 0;
+    cursor: default;
+  }
+
+  li:before {
+    content: '#';
+  }
+
+  li:after {
+    content: ', ';
+  }
+
+  li:last-child:after {
+    content: '';
+  }
+`;
+
+function Tag({ children }) {
+  return <>{children}</>;
+}
+
+export default function Tags({ children }) {
+  return (
+    <TagsStyle>
+      {children.map((child, i) => (
+        <li key={i}>{child}</li>
+      ))}
+    </TagsStyle>
+  );
+}
+
+Tags.Tag = Tag;

src/pages/projects.js

@@ -2,6 +2,12 @@ import React from 'react';
 import Layout from '../layouts';
 import { OutboundLink } from 'gatsby-plugin-google-analytics';
 import { Helmet } from 'react-helmet';
+import Tags from '../components/tags';
+import styled from 'styled-components';
+
+const Project = styled.section`
+  margin-bottom: 3em;
+`;
 
 export default function Projects({ data }) {
   const { siteMetadata } = data.site;
@@ -19,14 +25,26 @@ export default function Projects({ data }) {
         />
       </Helmet>
 
-      <h2 style={{ fontSize: '2em' }}>Projects</h2>
+      <h2 style={{ fontSize: '2em', marginBottom: '1.5em' }}>Projects</h2>
 
-      <section style={{ marginBottom: '2em' }}>
+      <Project>
         <h3>
           <OutboundLink href="https://github.com/testingrequired/reqlang">
             📄 Request Language (reqlang)
           </OutboundLink>
         </h3>
+
+        <Tags>
+          <Tags.Tag>rust</Tags.Tag>
+          <Tags.Tag>dsl</Tags.Tag>
+          <Tags.Tag>file-specification</Tags.Tag>
+          <Tags.Tag>http-messages</Tags.Tag>
+          <Tags.Tag>language-servers</Tags.Tag>
+          <Tags.Tag>vs-code-extensions</Tags.Tag>
+          <Tags.Tag>developer-tools</Tags.Tag>
+          <Tags.Tag>testing-tools</Tags.Tag>
+        </Tags>
+
         <p>
           A file format specification for defining HTTP requests, response
           assertions, and associated data/configuration in "request files".
@@ -83,28 +101,46 @@ export default function Projects({ data }) {
             A toy transpiler for reqlang-expr to typescript.
           </li>
         </ul>
-      </section>
+      </Project>
 
-      <section>
+      <Project>
         <h3>
           <OutboundLink href="https://github.com/egonlang/egonlang">
             👻 Egon
           </OutboundLink>
         </h3>
 
+        <Tags>
+          <Tags.Tag>rust</Tags.Tag>
+          <Tags.Tag>programming-languages</Tags.Tag>
+          <Tags.Tag>type-systems</Tags.Tag>
+          <Tags.Tag>language-server</Tags.Tag>
+          <Tags.Tag>vs-code-extension</Tags.Tag>
+        </Tags>
+
         <p>
           A (toy) statically typed interpreted language for learning
           type-checking and type inference.
         </p>
-      </section>
+      </Project>
 
-      <section>
+      <Project>
         <h3>
           <OutboundLink href="https://github.com/kyleect/locks">
             🔓 Locks
           </OutboundLink>
         </h3>
 
+        <Tags>
+          <Tags.Tag>rust</Tags.Tag>
+          <Tags.Tag>typescript</Tags.Tag>
+          <Tags.Tag>programming-languages</Tags.Tag>
+          <Tags.Tag>compilers</Tags.Tag>
+          <Tags.Tag>language-server</Tags.Tag>
+          <Tags.Tag>vs-code-extension</Tags.Tag>
+          <Tags.Tag>wasm</Tags.Tag>
+        </Tags>
+
         <p>
           A toy bytecode VM language branched from{' '}
           <a href="https://craftinginterpreters.com/the-lox-language.html">
@@ -169,37 +205,50 @@ export default function Projects({ data }) {
             Include several changes to syntax from the original project.
           </li>
         </ul>
-      </section>
+      </Project>
 
-      <section>
+      <Project>
         <h3>
           <OutboundLink href="https://github.com/testingrequired/attempted">
-            Attempted
+            🧯 Attempted
           </OutboundLink>
         </h3>
 
+        <Tags>
+          <Tags.Tag>typescript</Tags.Tag>
+          <Tags.Tag>library</Tags.Tag>
+          <Tags.Tag>error-handling</Tags.Tag>
+        </Tags>
+
         <p>Typed error handling for function calls in Typescript.</p>
-      </section>
+      </Project>
 
-      <section>
+      <Project>
         <h3>
-          <OutboundLink href="https://github.com/testingrequired/the-testing-book">
-            📕 The Testing Book
+          <OutboundLink href="https://github.com/testingrequired/bespin">
+            🌌 Bespin
           </OutboundLink>
         </h3>
 
-        <p>A (work in progress) software engineering guide to testing.</p>
-      </section>
+        <Tags>
+          <Tags.Tag>typescript</Tags.Tag>
+          <Tags.Tag>framework</Tags.Tag>
+          <Tags.Tag>testing-tools</Tags.Tag>
+          <Tags.Tag>test-frameworks</Tags.Tag>
+        </Tags>
+
+        <p>A framework for implementing test frameworks.</p>
+      </Project>
 
-      <section>
+      <Project>
         <h3>
-          <OutboundLink href="https://github.com/testingrequired/bespin">
-            🌌 bespin
+          <OutboundLink href="https://github.com/testingrequired/the-testing-book">
+            📕 The Testing Book
           </OutboundLink>
         </h3>
 
-        <p>A framework for test frameworks writting in Typescript.</p>
-      </section>
+        <p>A (work in progress) software engineering guide to testing.</p>
+      </Project>
     </Layout>
   );
 }