feat: set up basic typography system for Markdown content

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,68 @@
+import styled, { css } from "styled-components"
+
+const BASE_FONT_SIZE = 18
+const BASE_LINE_HEIGHT = 26
+const MODULAR_SCALE = 1.1487
+
+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: "Montserrat";
+    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/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>
   )
 }