3 day weekend fun

- PGP signing 🔏
- Some TypeScript ⌨️
- Font tweaks 𝑻
- Windows 98 inspired icon for Dark mode switcher

.vscode/tasks.json

@@ -0,0 +1,23 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "typescript",
+      "tsconfig": "tsconfig.json",
+      "option": "watch",
+      "problemMatcher": ["$tsc-watch"],
+      "group": "build"
+    },
+    {
+      "type": "typescript",
+      "tsconfig": "tsconfig.json",
+      "problemMatcher": ["$tsc"],
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

gatsby-browser.js

@@ -1,7 +1,6 @@
 // custom typefaces
 import 'prismjs/themes/prism-okaidia.css';
-import 'typeface-ibm-plex-serif';
-
+import 'typeface-karla';
 import React from 'react';
 
 import ThemeContext from './src/context/ThemeContext';

package.json

@@ -2,7 +2,7 @@
   "name": "jays-blog",
   "private": true,
   "description": "Jay Hankins's website.",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "author": "Jay Hankins <jay@jayhankins.me>",
   "bugs": {
     "url": "https://github.com/jay-hankins/jayhankins.me/issues"
@@ -37,15 +37,17 @@
     "react-helmet": "^5.2.0",
     "react-transition-group": "^2.5.3",
     "react-typography": "^0.16.13",
-    "typeface-ibm-plex-serif": "^0.0.61",
+    "typeface-karla": "^0.0.54",
     "typography": "^0.16.17",
     "typography-theme-wordpress-2016": "^0.15.10"
   },
   "devDependencies": {
     "eslint": "^4.19.1",
     "eslint-plugin-react": "^7.11.1",
+    "file-system": "^2.2.2",
     "gh-pages": "^2.0.1",
-    "prettier": "^1.14.2"
+    "prettier": "^1.14.2",
+    "typescript": "^3.3.3"
   },
   "homepage": "https://jayhankins.me",
   "keywords": [
@@ -59,13 +61,15 @@
   },
   "scripts": {
     "dev": "gatsby develop",
+    "sign": "node utils/sign-posts.js",
     "lint": "eslint --ext .js,.jsx --ignore-pattern public .",
     "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"",
     "format": "prettier --write 'src/**/*.js' 'src/**/*.md'",
     "develop": "gatsby develop",
     "start": "npm run develop",
     "build": "gatsby build",
     "fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix gatsby-node.js",
-    "deploy": "rm -rf public/ .cache/ && gatsby build && gh-pages -d public -b gh-pages"
+    "deploy": "gatsby build && gh-pages -d public -b gh-pages",
+    "hard-deploy": "rm -rf public/ .cache/ && gatsby build && gh-pages -d public -b gh-pages"
   }
 }

src/components/Layout.js

@@ -4,6 +4,8 @@ import { Link } from 'gatsby';
 import { rhythm, scale } from '../utils/typography';
 import './layout.css';
 import ThemeContext from '../context/ThemeContext';
+import standby from '../../content/assets/standby.png';
+import Bio from '../components/Bio';
 
 class Layout extends React.Component {
   render() {
@@ -77,13 +79,16 @@ class Layout extends React.Component {
                 ) : (
                   <div>
                     <span className="darkmode-label">Dark mode</span>
-                    <span className="emoji">️🌙</span>
+                    <span className="emoji">
+                      ️<img src={standby} alt="Windows 98 Standby Icon" />
+                    </span>
                   </div>
                 )}
               </button>
               {children}
               <hr />
               <footer>
+                <Bio />
                 <p>© {new Date().getFullYear()} Jay Hankins</p>
                 <p>
                   Except where otherwise noted, content on this site is licensed

src/components/Menu.js

@@ -1,22 +1,20 @@
 import React from 'react';
-import { Link, graphql } from 'gatsby';
-
-// import resumePdf from '../../content/resume.pdf';
+import { Link } from 'gatsby';
 
 import { rhythm } from '../utils/typography';
 
 const links = [{ title: 'Resume', path: '/resume.pdf', type: 'a' }];
 
 const Menu = () => (
-  <nav class="menu">
-    <ul style={{ listStyle: 'none' }} id="menu" class="menu">
+  <nav className="menu">
+    <ul style={{ listStyle: 'none' }} id="menu" className="menu">
       {links.map(link =>
         link.type === 'a' ? (
-          <li class="navItem">
+          <li className="navItem">
             <a href={link.path}>{link.title}</a>
           </li>
         ) : (
-          <li class="navItem">
+          <li className="navItem">
             <Link
               style={{
                 boxShadow: `none`,

src/components/PGPInfo.jsx

@@ -0,0 +1,30 @@
+//@ts-check
+import React from 'react';
+import { Link } from 'gatsby';
+
+import { rhythm } from '../utils/typography';
+
+const rawGithubPrefixUrl =
+  'https://raw.githubusercontent.com/jay-hankins/jayhankins.me/master/content/blog/';
+
+const githubPrefixUrl =
+  'https://github.com/jay-hankins/jayhankins.me/tree/master/content/blog';
+
+const PGPInfo = ({ slug }) => {
+  return (
+    <div className="PGPInfo">
+      <ul>
+        <li>
+          <a href={`${githubPrefixUrl}${slug}`}>View Post Source</a>
+        </li>
+        <li>
+          <a href={`${githubPrefixUrl}${slug}index.md.asc`}>
+            View PGP Signature
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default PGPInfo;

src/components/layout.css

@@ -2,6 +2,33 @@
   padding-left: 8px;
 }
 
+.emoji > img {
+  height: 28px;
+  width: 28px;
+  display: inline-block;
+  margin: 0;
+  vertical-align: top;
+}
+
+.PGPInfo {
+  letter-spacing: -0.3pt;
+  font-size: smaller;
+}
+
+.PGPInfo ul {
+  list-style: none;
+}
+
+.PGPInfo > ul > li {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.PGPInfo a {
+  /* box-shadow: none; */
+  color: #505050;
+}
+
 .darkmode-label {
   font-size: smaller;
   vertical-align: top;

src/templates/blog-post.js

@@ -6,6 +6,7 @@ import hash from 'hash-sum';
 import Bio from '../components/Bio';
 import Layout from '../components/Layout';
 import SEO from '../components/seo';
+import PGPInfo from '../components/PGPInfo';
 import { rhythm, scale } from '../utils/typography';
 import ThemeContext from '../context/ThemeContext';
 import ReactCSSTransitionReplace from 'react-css-transition-replace';
@@ -57,7 +58,8 @@ class BlogPostTemplate extends React.Component {
             marginBottom: rhythm(1),
           }}
         />
-        <Bio />
+        <PGPInfo slug={post.fields.slug} />
+        {/* <Bio /> */}
 
         <ul
           style={{
@@ -102,6 +104,9 @@ export const pageQuery = graphql`
       id
       excerpt(pruneLength: 160)
       html
+      fields {
+        slug
+      }
       frontmatter {
         title
         date(formatString: "MMMM DD, YYYY")

src/utils/typography.js

@@ -15,8 +15,8 @@ const systemFontStack = [
   'Segoe UI Symbol',
   'Noto Color Emoji',
 ];
-const bodyFontStack = [...systemFontStack];
-const headerFontStack = bodyFontStack;
+const bodyFontStack = ['Karla', ...systemFontStack];
+const headerFontStack = [...bodyFontStack];
 
 Wordpress2016.overrideThemeStyles = () => {
   return {
@@ -26,12 +26,18 @@ Wordpress2016.overrideThemeStyles = () => {
     h1: {
       fontFamily: headerFontStack.join(','),
       fontWeight: 600,
+      letterSpacing: '-1.0pt',
     },
     h2: {
-      fontWeight: 600,
+      // fontWeight: 600,
+      letterSpacing: '-0.5pt',
     },
     h3: {
-      fontWeight: 600,
+      // fontWeight: 600,
+      letterSpacing: '-0.5pt',
+    },
+    p: {
+      letterSpacing: '-0.2pt',
     },
   };
 };

tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "jsx": "preserve",
+    "outDir": "utils/"
+  },
+  "exclude": ["node_modules", "**/node_modules/*"],
+  "include": ["utils/src/*"]
+}

utils/sign-posts.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var fs = require("file-system");
+var child_process_1 = require("child_process");
+function spawnGPG(filePath) {
+    console.log("Signing " + filePath);
+    var options = ['--armor', '--batch', '--sign'];
+    var childProc = child_process_1.spawn('gpg', options.concat([filePath]));
+    childProc.on('exit', function (code) {
+        code !== 0 ? console.log("GPG error code: " + code) : null;
+    });
+}
+function signOrSkipFile(filePath) {
+    fs.access(filePath + ".asc", fs.constants.F_OK, function (err) {
+        if (err && err.code === 'ENOENT') {
+            spawnGPG(filePath);
+        }
+    });
+}
+function signFolder(folderPath) {
+    fs.recurse(folderPath, ['**/*.md'], function (filePath, relative, fileName) {
+        if (fileName) {
+            signOrSkipFile(filePath);
+        }
+    });
+}
+signFolder('content/blog');

utils/src/.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  env: {
+    node: true,
+    es6: true,
+  },
+  parserOptions: {
+    sourceType: 'module',
+  },
+};

utils/src/sign-posts.ts

@@ -0,0 +1,34 @@
+import * as fs from 'file-system';
+import { spawn } from 'child_process';
+
+function spawnGPG(filePath: string): void {
+  console.log(`Signing ${filePath}`);
+
+  const options: Array<string> = ['--armor', '--batch', '--sign'];
+  const childProc = spawn('gpg', [...options, filePath]);
+  childProc.on('exit', code => {
+    code !== 0 ? console.log(`GPG error code: ${code}`) : null;
+  });
+}
+
+function signOrSkipFile(filePath: string): void {
+  fs.access(`${filePath}.asc`, fs.constants.F_OK, err => {
+    if (err && err.code === 'ENOENT') {
+      spawnGPG(filePath);
+    }
+  });
+}
+
+function signFolder(folderPath: string): void {
+  fs.recurse(
+    folderPath,
+    ['**/*.md'],
+    (filePath: string, relative: string, fileName: string) => {
+      if (fileName) {
+        signOrSkipFile(filePath);
+      }
+    }
+  );
+}
+
+signFolder('content/blog');