add frontmatter fields for projects

README.md

@@ -1,35 +1,11 @@
-## 🧐 What's inside?
+1.  **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
 
-A quick look at the top-level files and directories you'll see in a Gatsby project.
+2.  **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
 
-    .
-    ├── node_modules
-    ├── src
-    ├── .gitignore
-    ├── .prettierrc
-    ├── gatsby-browser.js
-    ├── gatsby-config.js
-    ├── gatsby-node.js
-    ├── gatsby-ssr.js
-    ├── LICENSE
-    ├── package-lock.json
-    ├── package.json
-    └── README.md
+3.  **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/gatsby-config/) for more detail).
 
-1.  **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
+4.  **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
 
-2.  **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
+5.  **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
 
-3.  **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
-
-4.  **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
-
-5.  **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
-
-6.  **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/gatsby-config/) for more detail).
-
-7.  **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
-
-8.  **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
-
-9.  **`README.md`**: A text file containing useful reference information about your project.
+6.  **`README.md`**: A text file containing useful reference information about your project.

gatsby-node.js

@@ -108,11 +108,13 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 exports.createSchemaCustomization = ({ actions: { createTypes } }) => {
   createTypes(`
     type Mdx implements Node {
-      frontmatter: MdxFrontmatter
+      frontmatter: CommonFrontmatter
     }
 
-    type MdxFrontmatter {
-      hidden: Boolean
+    type CommonFrontmatter {
+      hidden: Boolean,
+      lang: String,
+      tags: [String]
     }
   `);
 };

package.json

@@ -1,14 +1,13 @@
 {
-  "name": "gatsby-starter-hello-world",
+  "name": "eddie.sh",
   "private": true,
-  "description": "A simplified bare-bones starter for Gatsby",
+  "description": "Personal website",
   "version": "0.1.0",
   "license": "0BSD",
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
-    "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
@@ -40,12 +39,5 @@
     "gatsby-plugin-eslint": "^2.0.8",
     "prettier": "2.1.1",
     "typescript": "^4.0.3"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
-  },
-  "bugs": {
-    "url": "https://github.com/gatsbyjs/gatsby/issues"
   }
 }

src/components/item.tsx

@@ -2,7 +2,13 @@ import React from 'react';
 import style from './item.module.css';
 import { Link } from 'gatsby';
 
-export default (props) => (
+interface ItemProps {
+  to: string;
+  title: string;
+  subtitle?: string;
+}
+
+export default (props: ItemProps): JSX.Element => (
   <Link to={props.to} className={style.projectItem}>
     <h3 className={style.projectTitle}>{props.title}</h3>
     <p className={style.projectSubtitle}>{props.subtitle}</p>

src/components/navbar.tsx

@@ -12,7 +12,7 @@ const ExactLink = (props) => (
   </Link>
 );
 
-export default function Navbar() {
+export default (): JSX.Element => {
   return (
     <nav>
       <h1>
@@ -28,4 +28,4 @@ export default function Navbar() {
       </h3>
     </nav>
   );
-}
+};

src/projects/shlink.mdx

@@ -2,6 +2,7 @@
 path: "shlink"
 date: 2020-01-01
 title: "Shlink"
+lang: "js"
 ---
 
-Hello world
+Hello World

src/templates/projects.tsx

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