Merge pull request #24 from the-programmers-hangout/feat-set-up-typography

feat: set up typography

gatsby-config.js

@@ -8,6 +8,21 @@ module.exports = {
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-typescript`,
     `gatsby-plugin-styled-components`,
+    {
+      resolve: `gatsby-plugin-prefetch-google-fonts`,
+      options: {
+        fonts: [
+          {
+            family: `Oxygen`,
+            variants: [`400`, `700`],
+          },
+          {
+            family: `Montserrat`,
+            variants: [`400`, `700`],
+          },
+        ],
+      },
+    },
     {
       resolve: `gatsby-transformer-remark`,
       plugins: [`gatsby-remark-prismjs`],

package-lock.json

@@ -3883,6 +3883,21 @@
         }
       }
     },
+    "clean-css": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
+      "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==",
+      "requires": {
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
     "clean-stack": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.1.0.tgz",
@@ -7924,6 +7939,147 @@
         "micromatch": "^3.1.10"
       }
     },
+    "gatsby-plugin-prefetch-google-fonts": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-prefetch-google-fonts/-/gatsby-plugin-prefetch-google-fonts-1.4.2.tgz",
+      "integrity": "sha512-aeeWsXAZtgvj3SfFa22tVFbki12W9df4xVWaQ/SEV2FKGve9sMaInWIRtUBgJZ7kPl8JBuhzcNz69XitxC0WqQ==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "clean-css": "^4.2.1",
+        "download": "^7.1.0",
+        "fs-extra": "^7.0.0",
+        "get-urls": "^8.0.0",
+        "globby": "^8.0.1",
+        "google-fonts-plugin": "2.0.2",
+        "object-hash": "^1.3.0"
+      },
+      "dependencies": {
+        "download": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/download/-/download-7.1.0.tgz",
+          "integrity": "sha512-xqnBTVd/E+GxJVrX5/eUJiLYjCGPwMpdL+jGhGU57BvtcA7wwhtHVbXBeUk51kOpW3S7Jn3BQbN9Q1R1Km2qDQ==",
+          "requires": {
+            "archive-type": "^4.0.0",
+            "caw": "^2.0.1",
+            "content-disposition": "^0.5.2",
+            "decompress": "^4.2.0",
+            "ext-name": "^5.0.0",
+            "file-type": "^8.1.0",
+            "filenamify": "^2.0.0",
+            "get-stream": "^3.0.0",
+            "got": "^8.3.1",
+            "make-dir": "^1.2.0",
+            "p-event": "^2.1.0",
+            "pify": "^3.0.0"
+          }
+        },
+        "file-type": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz",
+          "integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ=="
+        },
+        "fs-extra": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+          "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "globby": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.2.tgz",
+          "integrity": "sha512-yTzMmKygLp8RUpG1Ymu2VXPSJQZjNAZPD4ywgYEaG7e4tBJeUQBO8OpXrf1RCNcEs5alsoJYPAMiIHP0cmeC7w==",
+          "requires": {
+            "array-union": "^1.0.1",
+            "dir-glob": "2.0.0",
+            "fast-glob": "^2.0.2",
+            "glob": "^7.1.2",
+            "ignore": "^3.3.5",
+            "pify": "^3.0.0",
+            "slash": "^1.0.0"
+          }
+        },
+        "got": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
+          "integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==",
+          "requires": {
+            "@sindresorhus/is": "^0.7.0",
+            "cacheable-request": "^2.1.1",
+            "decompress-response": "^3.3.0",
+            "duplexer3": "^0.1.4",
+            "get-stream": "^3.0.0",
+            "into-stream": "^3.1.0",
+            "is-retry-allowed": "^1.1.0",
+            "isurl": "^1.0.0-alpha5",
+            "lowercase-keys": "^1.0.0",
+            "mimic-response": "^1.0.0",
+            "p-cancelable": "^0.4.0",
+            "p-timeout": "^2.0.1",
+            "pify": "^3.0.0",
+            "safe-buffer": "^5.1.1",
+            "timed-out": "^4.0.1",
+            "url-parse-lax": "^3.0.0",
+            "url-to-options": "^1.0.1"
+          }
+        },
+        "ignore": {
+          "version": "3.3.10",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
+          "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug=="
+        },
+        "make-dir": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
+          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
+          "requires": {
+            "pify": "^3.0.0"
+          }
+        },
+        "p-cancelable": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
+          "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ=="
+        },
+        "p-event": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/p-event/-/p-event-2.3.1.tgz",
+          "integrity": "sha512-NQCqOFhbpVTMX4qMe8PF8lbGtzZ+LCiN7pcNrb/413Na7+TRoe1xkKUzuWa/YEJdGQ0FvKtj35EEbDoVPO2kbA==",
+          "requires": {
+            "p-timeout": "^2.0.1"
+          }
+        },
+        "p-timeout": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz",
+          "integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==",
+          "requires": {
+            "p-finally": "^1.0.0"
+          }
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
+        },
+        "prepend-http": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
+          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
+        },
+        "url-parse-lax": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+          "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+          "requires": {
+            "prepend-http": "^2.0.0"
+          }
+        }
+      }
+    },
     "gatsby-plugin-react-helmet": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.1.2.tgz",
@@ -8341,6 +8497,15 @@
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
     },
+    "get-urls": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/get-urls/-/get-urls-8.0.0.tgz",
+      "integrity": "sha512-9c6aVD6HqnpFjqWSoRzSGNo69hNnSa8EevNFVeIRSLYqYlIJNvtHgrqiQ1sUjHwbZPBY5gO1FMlVjmElfdneqw==",
+      "requires": {
+        "normalize-url": "^3.3.0",
+        "url-regex": "^4.0.0"
+      }
+    },
     "get-value": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
@@ -8495,6 +8660,55 @@
         "delegate": "^3.1.2"
       }
     },
+    "google-fonts-plugin": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/google-fonts-plugin/-/google-fonts-plugin-2.0.2.tgz",
+      "integrity": "sha512-pWYFe6zoLA6uIUpSr/pkakf3DwA2fYgpStfe54AmkiKTHMCUILvtqihHaS2f4SqbTpdpEUYVTMMgvs2ur1ge8g==",
+      "requires": {
+        "axios": "^0.18.0",
+        "cssnano": "^4.0.5",
+        "mkdirp": "^0.5.1",
+        "neon-js": "^1.1.2",
+        "path": "^0.12.7"
+      },
+      "dependencies": {
+        "axios": {
+          "version": "0.18.1",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz",
+          "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
+          "requires": {
+            "follow-redirects": "1.5.10",
+            "is-buffer": "^2.0.2"
+          }
+        },
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "is-buffer": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
+          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "got": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/got/-/got-8.0.0.tgz",
@@ -11645,6 +11859,11 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw=="
     },
+    "neon-js": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/neon-js/-/neon-js-1.1.2.tgz",
+      "integrity": "sha1-r4XY4ruAmc/H9v4laolqVGSwBiM="
+    },
     "next-tick": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
@@ -12568,6 +12787,30 @@
       "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
       "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
     },
+    "path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
+      "requires": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        },
+        "util": {
+          "version": "0.10.4",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+          "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        }
+      }
+    },
     "path-browserify": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
@@ -16631,6 +16874,11 @@
         "upper-case": "^1.0.3"
       }
     },
+    "tlds": {
+      "version": "1.203.1",
+      "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.203.1.tgz",
+      "integrity": "sha512-7MUlYyGJ6rSitEZ3r1Q1QNV8uSIzapS8SmmhSusBuIc7uIxPPwsKllEP0GRp1NS6Ik6F+fRZvnjDWm3ecv2hDw=="
+    },
     "tmp": {
       "version": "0.0.31",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.31.tgz",
@@ -17316,6 +17564,22 @@
         "prepend-http": "^1.0.1"
       }
     },
+    "url-regex": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/url-regex/-/url-regex-4.1.1.tgz",
+      "integrity": "sha512-ViSDgDPNKkrQHI81GLCjdDN+Rsk3tAW/uLXlBOJxtcHzWZjta58Z0APXhfXzS89YszsheMnEvXeDXsWUB53wwA==",
+      "requires": {
+        "ip-regex": "^1.0.1",
+        "tlds": "^1.187.0"
+      },
+      "dependencies": {
+        "ip-regex": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-1.0.3.tgz",
+          "integrity": "sha1-3FiQdvZZ9BnCIgOaMzFvHHOH7/0="
+        }
+      }
+    },
     "url-to-options": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "gatsby-plugin-manifest": "^2.2.4",
     "gatsby-plugin-mdx": "^1.0.17",
     "gatsby-plugin-offline": "^2.2.4",
+    "gatsby-plugin-prefetch-google-fonts": "^1.4.2",
     "gatsby-plugin-react-helmet": "^3.1.2",
     "gatsby-plugin-react-svg": "^2.1.1",
     "gatsby-plugin-sass": "^2.1.3",

src/components/DocsLayout/index.tsx

@@ -8,6 +8,7 @@
 import React, { PropsWithChildren } from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
+import { GlobalStyles } from "../../globalStyles"
 import { DocsSidebar } from "../DocsSidebar"
 import { Footer } from "../Footer"
 import * as SC from "./styles"
@@ -25,6 +26,7 @@ export function DocsLayout({ children }: PropsWithChildren<{}>) {
 
   return (
     <div>
+      <GlobalStyles />
       <SC.Main>
         <DocsSidebar />
         <SC.MainContent>

src/components/Layout/index.tsx

@@ -11,6 +11,7 @@ import { useStaticQuery, graphql } from "gatsby"
 import { Container } from "../Container"
 import { Footer } from "../Footer"
 import { Header } from "../Header"
+import { GlobalStyles } from "../../globalStyles"
 import "./layout.scss"
 import * as SC from "./styles"
 import Scrollbar from "react-perfect-scrollbar"
@@ -29,6 +30,7 @@ export function Layout({ children }: PropsWithChildren<{}>) {
 
   return (
     <Scrollbar>
+      <GlobalStyles />
       <SC.Main>
         <Header />
         <SC.MainContent>

src/components/Markdown/index.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import * as SC from "./styles"
+
+interface MarkdownProps {
+  content: string
+}
+
+/*
+  This component is used as a wrapper around Markdown generated content,
+  mainly to provide styles to the html generated.
+*/
+export function Markdown({
+  content,
+  ...restProps
+}: MarkdownProps): JSX.Element {
+  return (
+    <SC.MarkdownWrapper
+      dangerouslySetInnerHTML={{ __html: content }}
+      {...restProps}
+    />
+  )
+}

src/components/Markdown/styles.tsx

@@ -0,0 +1,70 @@
+import styled, { css } from "styled-components"
+import {
+  BASE_FONT_SIZE,
+  BASE_LINE_HEIGHT,
+  MODULAR_SCALE,
+  fontFamily,
+} from "../../design/typography"
+
+function modularFontSize(power: number) {
+  return BASE_FONT_SIZE * Math.pow(MODULAR_SCALE, power)
+}
+
+function modularScale(power: number) {
+  const fontSize = modularFontSize(power)
+
+  // attempt to fit line-height a little larger than font-size
+  const paddedLineHeight = fontSize * 1.1
+  const lineHeight =
+    paddedLineHeight - (paddedLineHeight % BASE_LINE_HEIGHT) + BASE_LINE_HEIGHT
+
+  return css`
+    font-size: ${fontSize}px;
+    line-height: ${lineHeight}px;
+  `
+}
+
+export const MarkdownWrapper = styled.div`
+  font-size: ${BASE_FONT_SIZE}px;
+  line-height: ${BASE_LINE_HEIGHT}px;
+
+  p {
+    margin: ${BASE_LINE_HEIGHT}px 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: ${fontFamily.header};
+    letter-spacing: -1.75px;
+    margin-top: ${BASE_LINE_HEIGHT * 2}px;
+    margin-bottom: ${BASE_LINE_HEIGHT}px;
+  }
+
+  h1 {
+    ${modularScale(6)};
+  }
+
+  h2 {
+    ${modularScale(5)};
+  }
+
+  h3 {
+    ${modularScale(4)};
+  }
+
+  h4 {
+    ${modularScale(3)};
+  }
+
+  h5 {
+    ${modularScale(2)};
+  }
+
+  h6 {
+    ${modularScale(1)};
+  }
+`

src/design/typography.ts

@@ -0,0 +1,13 @@
+const FONT_OXYGEN = "Oxygen, sans-serif"
+const FONT_MONTSERRAT = "Montserrat, sans-serif"
+
+export const BASE_FONT_SIZE = 18
+export const BASE_LINE_HEIGHT = 25
+export const MODULAR_SCALE = 1.1487
+
+export const fontFamily = {
+  header: FONT_MONTSERRAT,
+  body: FONT_OXYGEN,
+}
+
+export default fontFamily

src/globalStyles.tsx

@@ -0,0 +1,17 @@
+import { createGlobalStyle } from "styled-components"
+import {
+  BASE_FONT_SIZE,
+  BASE_LINE_HEIGHT,
+  fontFamily,
+} from "./design/typography"
+
+export const GlobalStyles = createGlobalStyle`
+  html {
+    font-family: ${fontFamily.body};
+  }
+
+  body {
+    font-size: ${BASE_FONT_SIZE}px;
+    line-height: ${BASE_LINE_HEIGHT}px;
+  }
+`

src/templates/languagePost.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { graphql } from "gatsby"
+import { Markdown } from "../components/Markdown"
 import { SEO } from "../components/SEO"
 import { DocsLayout } from "../components/DocsLayout"
 
@@ -10,7 +11,7 @@ function LanguagePost({ data }: any) {
   return (
     <DocsLayout>
       <SEO title={frontmatter.title} />
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <Markdown content={html} />
     </DocsLayout>
   )
 }