diff --git a/gatsby-config.js b/gatsby-config.js index 6bedde0..aa4d43e 100644 --- a/gatsby-config.js +++ b/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`], diff --git a/package-lock.json b/package-lock.json index 3903ddb..7990f84 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index fb8d4c7..fce6078 100644 --- a/package.json +++ b/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", diff --git a/src/components/DocsLayout/index.tsx b/src/components/DocsLayout/index.tsx index 119dd2e..edf4529 100644 --- a/src/components/DocsLayout/index.tsx +++ b/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 (
+ diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index bd7c76f..2a3ba6c 100644 --- a/src/components/Layout/index.tsx +++ b/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 ( +
diff --git a/src/components/Markdown/index.tsx b/src/components/Markdown/index.tsx new file mode 100644 index 0000000..43038a4 --- /dev/null +++ b/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 ( + + ) +} diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx new file mode 100644 index 0000000..7a62343 --- /dev/null +++ b/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)}; + } +` diff --git a/src/design/typography.ts b/src/design/typography.ts new file mode 100644 index 0000000..f91a1d6 --- /dev/null +++ b/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 diff --git a/src/globalStyles.tsx b/src/globalStyles.tsx new file mode 100644 index 0000000..8cf7c9b --- /dev/null +++ b/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; + } +` diff --git a/src/templates/languagePost.tsx b/src/templates/languagePost.tsx index 8689af2..599af62 100644 --- a/src/templates/languagePost.tsx +++ b/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 ( -
+ ) }