Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-04 01:05:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
feat: set up typography
This commit is contained in:
Xetera
2019-07-29 11:36:34 -07:00
committed by GitHub
parent 5515ee2172 7e324bff3b
commit 4f1cf7fac9
10 changed files with 408 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gatsby-config.js
+15
View File
@@ -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
Generated
+264
View File
@@ -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
+1
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+22
View File
@@ -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
+70
View File
@@ -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
+13
View File
@@ -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
+17
View File
@@ -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
+2 -1
View File
@@ -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>
)
}