├── static ├── robots.txt └── favicon.ico ├── gatsby-browser.js ├── content ├── assets │ ├── icon.png │ └── profile-pic.jpg └── blog │ └── 2019 │ ├── sup │ ├── subpage.mdx │ ├── components │ │ ├── Glitter.js │ │ └── Glitter.css │ └── index.mdx │ ├── la-earthquake-app │ ├── index.mdx │ └── components │ │ └── Notebook.js │ ├── racist-code │ └── index.mdx │ └── ucsd-fall-career-fair-ice │ └── index.mdx ├── src ├── pages │ ├── BlogIndex.module.css │ ├── 404.js │ └── index.js ├── components │ ├── Footer.js │ ├── Bio.js │ ├── Layout.js │ ├── Seo.js │ ├── Toggle.css │ └── Toggle.js ├── utils │ └── typography.js ├── styles │ └── global.css ├── html.js └── templates │ └── blog-post.js ├── .prettierrc ├── README.md ├── LICENSE ├── .gitignore ├── gatsby-node.js ├── package.json └── gatsby-config.js /static/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | // custom typefaces 2 | import "./src/styles/global.css" 3 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asg017/blogX/master/static/favicon.ico -------------------------------------------------------------------------------- /content/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asg017/blogX/master/content/assets/icon.png -------------------------------------------------------------------------------- /content/assets/profile-pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asg017/blogX/master/content/assets/profile-pic.jpg -------------------------------------------------------------------------------- /src/pages/BlogIndex.module.css: -------------------------------------------------------------------------------- 1 | .postList { 2 | display: grid; 3 | grid-template-columns: 1fr 100px; 4 | grid-column-gap: 5px; 5 | } 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": false, 4 | "singleQuote": false, 5 | "tabWidth": 2, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /content/blog/2019/sup/subpage.mdx: -------------------------------------------------------------------------------- 1 | Importing other markdown files are easy too - this paragraph is another markdown file, imported with: 2 | 3 | ``` 4 | import SubPage from "./subpage.mdx" 5 | 6 | ``` 7 | -------------------------------------------------------------------------------- /content/blog/2019/sup/components/Glitter.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./Glitter.css" 3 | 4 | export class Glitter extends React.Component { 5 | render() { 6 | return {this.props.children} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /content/blog/2019/la-earthquake-app/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: LA Earthquake Alert App 3 | date: "2019-01-11T12:00:00.000Z" 4 | --- 5 | 6 | import Notebook from "./components/Notebook.js" 7 | 8 | Note: This post originally appeared on my [old site](https://iamprettydamn.cool/2019/la-earthquake-app/?notrack=1), 9 | so this is just porting that old post here in it's originality. 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { rhythm } from "../utils/typography" 3 | 4 | const Footer = () => ( 5 |
6 | © {new Date().getFullYear()}, Built with 7 | {` `} 8 | Gatsby, Hosted on{" "} 9 | GitHub 10 |
11 | ) 12 | 13 | export default Footer 14 | -------------------------------------------------------------------------------- /content/blog/2019/sup/components/Glitter.css: -------------------------------------------------------------------------------- 1 | .Glitter { 2 | color: white; 3 | background: -webkit-linear-gradient(transparent, transparent), 4 | url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/blue_glitter.gif) 5 | repeat 100px 20px; 6 | letter-spacing: 1px; 7 | text-decoration: none; 8 | filter: hue-rotate(50deg); 9 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 10 | 1px 1px 0 #000; 11 | padding: 0.2rem; 12 | } 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Blog 2 | 3 | My blog, created with [gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog), with [gatsby-mdx](https://github.com/ChristopherBiscardi/gatsby-mdx) for cooler looking posts. 4 | 5 | All posts are found inside `content/blog//`. 6 | 7 | To play with, do: 8 | 9 | ```shell 10 | git clone https://github.com/asg017/blogX.git 11 | cd blogX/ 12 | yarn 13 | yarn dev 14 | ``` 15 | 16 | Then http://localhost:8000 to see the posts, http://localhost:8000___graphql to play with the data. 17 | -------------------------------------------------------------------------------- /content/blog/2019/la-earthquake-app/components/Notebook.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Runtime, Inspector } from "@observablehq/notebook-runtime" 3 | import notebook from "la-earthquake-app" 4 | 5 | class Notebook extends React.Component { 6 | rootRef = React.createRef() 7 | 8 | componentDidMount() { 9 | Runtime.load(notebook, Inspector.into(this.rootRef.current)) 10 | } 11 | 12 | render() { 13 | return ( 14 |
15 |
16 |
17 | ) 18 | } 19 | } 20 | 21 | export default Notebook 22 | -------------------------------------------------------------------------------- /src/utils/typography.js: -------------------------------------------------------------------------------- 1 | import Typography from "typography" 2 | import Wordpress2016 from "typography-theme-wordpress-2016" 3 | 4 | Wordpress2016.overrideThemeStyles = () => { 5 | return { 6 | "a.gatsby-resp-image-link": { 7 | boxShadow: `none`, 8 | }, 9 | body: { 10 | color: "var(--textNormal)", 11 | }, 12 | } 13 | } 14 | 15 | delete Wordpress2016.googleFonts 16 | 17 | const typography = new Typography(Wordpress2016) 18 | 19 | // Hot reload typography in development. 20 | if (process.env.NODE_ENV !== `production`) { 21 | typography.injectStyles() 22 | } 23 | 24 | export default typography 25 | export const rhythm = typography.rhythm 26 | export const scale = typography.scale 27 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | 4 | import Layout from "../components/Layout" 5 | import SEO from "../components/Seo" 6 | 7 | class NotFoundPage extends React.Component { 8 | render() { 9 | const { data } = this.props 10 | const siteTitle = data.site.siteMetadata.title 11 | 12 | return ( 13 | 14 | 15 |

Not Found

16 |

You just hit a route that doesn't exist... the sadness.

17 |
18 | ) 19 | } 20 | } 21 | 22 | export default NotFoundPage 23 | 24 | export const pageQuery = graphql` 25 | query { 26 | site { 27 | siteMetadata { 28 | title 29 | } 30 | } 31 | } 32 | ` 33 | -------------------------------------------------------------------------------- /src/styles/global.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: var(--bg); 3 | color: var(--textNormal); 4 | transition: color 0.2s ease-out, background 0.2s ease-out; 5 | --blue: #00e0e0; 6 | --orange: #f5ab35; 7 | --darkBlue: #007acc; 8 | min-width: 477px; 9 | } 10 | 11 | body.dark { 12 | --bg: #2b2b2b; 13 | --textNormal: rgba(255, 255, 255, 0.9); 14 | } 15 | 16 | body.light { 17 | --bg: #fff; 18 | --textNormal: #222; 19 | } 20 | 21 | .dark a { 22 | color: var(--blue); 23 | } 24 | .dark a.special { 25 | color: var(--orange); 26 | } 27 | .light a { 28 | color: var(--darkBlue); 29 | } 30 | 31 | .dark hr { 32 | background-color: rgba(255, 255, 255, 0.7); 33 | } 34 | 35 | code { 36 | background-color: #f7f7f9; 37 | color: #222; 38 | padding: 2px 5px; 39 | border-radius: 2px; 40 | } 41 | 42 | pre { 43 | background-color: #f7f7f9; 44 | padding: 12px; 45 | color: #222; 46 | } 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /content/blog/2019/sup/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sup 3 | date: "2019-03-01T08:27:58.908Z" 4 | --- 5 | 6 | import SubPage from "./subpage.mdx" 7 | import { Glitter } from "./components/Glitter.js" 8 | 9 | Hello! This is the (first?) post for my new blog. Like everything I do, I spent 10 | waaaay to much time setting this site up for little added benefit, so the least 11 | I can do is have my first post talk about the technical pieces behind this blog. 12 | 13 | This is a Gatsby site, generated with the [gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog) 14 | recipe. Which is cool, I could just write a simple markdown file and be good to go! 15 | 16 | But, markdown files by themselves are boring. The [internet isn't fun and weird 17 | anymore](https://jarredsumner.com/codeblog/), so I added the [gatsby-mdx](https://github.com/ChristopherBiscardi/gatsby-mdx) 18 | plugin to allow for inline use of whatever React components 19 | that I want. File structure for each post is pretty simple, too - here's the 20 | folder for this post: 21 | 22 | ``` 23 | content/blog/2019/sup/ 24 | ├── components 25 | │   ├── Glitter.js 26 | │   └── Glitter.css 27 | ├── index.mdx 28 | └── test_a.mdx 29 | ``` 30 | 31 | 32 | 33 | 🤠 pretty cool yo 34 | 35 | A lot of the design choices/code comes from Dan Abramov's [overreacted.io blog](https://github.com/gaearon/overreacted.io). 36 | 37 | Basically, this should blog should be easier and more fun than making a blog 38 | post with [Observable notebooks](https://observablehq.com/), but not as cool as 39 | [codeblog.com](http://codeblog.com/) (whenever that is released). 40 | -------------------------------------------------------------------------------- /src/components/Bio.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { StaticQuery, graphql } from "gatsby" 3 | import Image from "gatsby-image" 4 | 5 | import { rhythm } from "../utils/typography" 6 | 7 | function Bio() { 8 | return ( 9 | { 12 | const { author, social } = data.site.siteMetadata 13 | return ( 14 |
20 | {author} 33 |

34 | {author} 35 | {` `} 36 | 40 | twitter 41 | 42 |

43 |
44 | ) 45 | }} 46 | /> 47 | ) 48 | } 49 | 50 | const bioQuery = graphql` 51 | query BioQuery { 52 | avatar: file(absolutePath: { regex: "/profile-pic.jpg/" }) { 53 | childImageSharp { 54 | fixed(width: 50, height: 50) { 55 | ...GatsbyImageSharpFixed 56 | } 57 | } 58 | } 59 | site { 60 | siteMetadata { 61 | author 62 | social { 63 | twitter 64 | } 65 | } 66 | } 67 | } 68 | ` 69 | 70 | export default Bio 71 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require(`path`) 2 | const { createFilePath } = require(`gatsby-source-filesystem`) 3 | 4 | exports.createPages = ({ graphql, actions }) => { 5 | const { createPage } = actions 6 | 7 | const blogPost = path.resolve(`./src/templates/blog-post.js`) 8 | return graphql( 9 | ` 10 | { 11 | allMdx( 12 | sort: { fields: [frontmatter___date], order: DESC } 13 | limit: 1000 14 | ) { 15 | edges { 16 | node { 17 | id 18 | tableOfContents 19 | parent { 20 | ... on File { 21 | absolutePath 22 | name 23 | sourceInstanceName 24 | } 25 | } 26 | fields { 27 | slug 28 | } 29 | frontmatter { 30 | title 31 | date 32 | } 33 | fileAbsolutePath 34 | } 35 | } 36 | } 37 | } 38 | ` 39 | ).then(result => { 40 | if (result.errors) { 41 | throw result.errors 42 | } 43 | 44 | // Create blog posts pages. 45 | const posts = result.data.allMdx.edges 46 | 47 | posts.forEach((post, index) => { 48 | const previous = index === posts.length - 1 ? null : posts[index + 1].node 49 | const next = index === 0 ? null : posts[index - 1].node 50 | createPage({ 51 | path: `${post.node.fields.slug}`, 52 | component: blogPost, 53 | context: { 54 | slug: post.node.fields.slug, 55 | previous, 56 | next, 57 | absPath: post.node.parent.absolutePath, 58 | tableOfContents: post.node.tableOfContents, 59 | id: post.node.id, 60 | }, 61 | }) 62 | }) 63 | }) 64 | } 65 | 66 | exports.onCreateNode = ({ node, actions, getNode }) => { 67 | const { createNodeField } = actions 68 | 69 | if (node.internal.type === `Mdx`) { 70 | const value = createFilePath({ node, getNode }) 71 | createNodeField({ 72 | name: `slug`, 73 | node, 74 | value, 75 | }) 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/components/Layout.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import Toggle from "./Toggle" 4 | import Footer from "./Footer" 5 | import { rhythm } from "../utils/typography" 6 | 7 | class Layout extends React.Component { 8 | state = { 9 | theme: null, 10 | } 11 | componentDidMount() { 12 | this.setState({ theme: window.__theme }) 13 | window.__onThemeChange = () => { 14 | this.setState({ theme: window.__theme }) 15 | } 16 | } 17 | renderTopMenu() { 18 | return ( 19 |
20 |
21 | 22 | iamprettydamn.cool blog 23 | 24 |
25 |
26 | 36 | ), 37 | unchecked: ( 38 | sun 45 | ), 46 | }} 47 | checked={this.state.theme === "dark"} 48 | onChange={e => { 49 | window.__setPreferredTheme(e.target.checked ? "dark" : "light") 50 | }} 51 | /> 52 |
53 |
54 | ) 55 | } 56 | render() { 57 | const { children } = this.props 58 | return ( 59 |
68 | {this.renderTopMenu()} 69 |
{children}
70 |
71 |
72 |
73 |
74 | ) 75 | } 76 | } 77 | 78 | export default Layout 79 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alex-garcia-blog", 3 | "private": true, 4 | "description": "A blog to talk about stuff", 5 | "version": "0.1.0", 6 | "author": "Alex Garcia ", 7 | "bugs": { 8 | "url": "https://github.com/asg017/blogX/issues" 9 | }, 10 | "dependencies": { 11 | "@mdx-js/mdx": "^0.17.5", 12 | "@mdx-js/tag": "^0.17.5", 13 | "@observablehq/notebook-runtime": "^2.0.0", 14 | "d3-time-format": "^2.1.3", 15 | "gatsby": "^2.1.17", 16 | "gatsby-image": "^2.0.29", 17 | "gatsby-mdx": "^0.4.0", 18 | "gatsby-plugin-feed": "^2.0.13", 19 | "gatsby-plugin-google-analytics": "^2.0.14", 20 | "gatsby-plugin-manifest": "^2.0.19", 21 | "gatsby-plugin-offline": "^2.0.24", 22 | "gatsby-plugin-react-helmet": "^3.0.6", 23 | "gatsby-plugin-sharp": "^2.0.22", 24 | "gatsby-plugin-typography": "^2.2.7", 25 | "gatsby-remark-copy-linked-files": "^2.0.9", 26 | "gatsby-remark-images": "^2.0.6", 27 | "gatsby-remark-prismjs": "^3.2.4", 28 | "gatsby-remark-responsive-iframe": "^2.0.9", 29 | "gatsby-remark-smartypants": "^2.0.8", 30 | "gatsby-source-filesystem": "^2.0.22", 31 | "gatsby-transformer-remark": "^2.2.6", 32 | "gatsby-transformer-sharp": "^2.1.14", 33 | "la-earthquake-app": "https://api.observablehq.com/@asg017/la-earthquake-app@640.tgz", 34 | "prismjs": "^1.15.0", 35 | "react": "^16.8.3", 36 | "react-dom": "^16.8.3", 37 | "react-helmet": "^5.2.0", 38 | "react-typography": "^0.16.18", 39 | "typeface-merriweather": "0.0.54", 40 | "typeface-montserrat": "0.0.54", 41 | "typography": "^0.16.18", 42 | "typography-theme-wordpress-2016": "^0.16.18" 43 | }, 44 | "devDependencies": { 45 | "gh-pages": "^2.0.1", 46 | "prettier": "^1.16.4" 47 | }, 48 | "homepage": "https://github.com/asg017/blogX", 49 | "keywords": [ 50 | "gatsby" 51 | ], 52 | "license": "MIT", 53 | "main": "n/a", 54 | "repository": { 55 | "type": "git", 56 | "url": "git+https://github.com/asg017/blogX.git" 57 | }, 58 | "scripts": { 59 | "build": "gatsby build", 60 | "deploy": "gatsby build --prefix-paths && gh-pages -d public -b gh-pages", 61 | "dev": "npm run develop", 62 | "develop": "gatsby develop", 63 | "format": "prettier --write src/**/*.{js,jsx}", 64 | "start": "npm run develop", 65 | "serve": "gatsby serve", 66 | "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link, graphql } from "gatsby" 3 | 4 | import Layout from "../components/Layout" 5 | import SEO from "../components/Seo" 6 | import { timeFormat } from "d3-time-format" 7 | import styles from "./BlogIndex.module.css" 8 | import { scale } from "../utils/typography" 9 | 10 | const formatPostDate = d => { 11 | const date = new Date(d) 12 | return timeFormat("%Y-%m-%d")(date) 13 | } 14 | const PostsList = ({ posts }) => ( 15 |
16 | {posts.map(({ node }, i) => { 17 | const title = node.frontmatter.title || node.fields.slug 18 | return ( 19 | 20 |
21 | 22 | {title} 23 | 24 |
25 |
{formatPostDate(node.frontmatter.date)}
26 |
27 | ) 28 | })} 29 |
30 | ) 31 | 32 | const Hi = () => ( 33 |
34 | 35 | 👋🏼 36 | {" "} 37 | I'm Alex, here's some posts I've written. Here's my{" "} 38 | 39 | site 40 | {" "} 41 | with more stuff about me 42 |
43 | ) 44 | class BlogIndex extends React.Component { 45 | render() { 46 | const { data } = this.props 47 | const posts = data.allMdx.edges 48 | return ( 49 | 50 | 51 | 52 | 53 | 54 | ) 55 | } 56 | } 57 | 58 | export default BlogIndex 59 | 60 | export const pageQuery = graphql` 61 | query { 62 | site { 63 | siteMetadata { 64 | title 65 | } 66 | } 67 | allMdx( 68 | filter: { fileAbsolutePath: { regex: "/index.md/" } } 69 | sort: { fields: [frontmatter___date], order: DESC } 70 | ) { 71 | edges { 72 | node { 73 | fileAbsolutePath 74 | parent { 75 | id 76 | } 77 | excerpt 78 | fields { 79 | slug 80 | } 81 | frontmatter { 82 | date 83 | title 84 | } 85 | } 86 | } 87 | } 88 | } 89 | ` 90 | -------------------------------------------------------------------------------- /src/components/Seo.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | import Helmet from "react-helmet" 4 | import { StaticQuery, graphql } from "gatsby" 5 | 6 | function SEO({ description, lang, meta, keywords, title }) { 7 | return ( 8 | { 11 | const metaDescription = 12 | description || data.site.siteMetadata.description 13 | return ( 14 | 0 56 | ? { 57 | name: `keywords`, 58 | content: keywords.join(`, `), 59 | } 60 | : [] 61 | ) 62 | .concat(meta)} 63 | /> 64 | ) 65 | }} 66 | /> 67 | ) 68 | } 69 | 70 | SEO.defaultProps = { 71 | lang: `en`, 72 | meta: [], 73 | keywords: [], 74 | } 75 | 76 | SEO.propTypes = { 77 | description: PropTypes.string, 78 | lang: PropTypes.string, 79 | meta: PropTypes.array, 80 | keywords: PropTypes.arrayOf(PropTypes.string), 81 | title: PropTypes.string.isRequired, 82 | } 83 | 84 | export default SEO 85 | 86 | const detailsQuery = graphql` 87 | query DefaultSEOQuery { 88 | site { 89 | siteMetadata { 90 | title 91 | description 92 | author 93 | } 94 | } 95 | } 96 | ` 97 | -------------------------------------------------------------------------------- /src/html.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | 4 | export default class HTML extends React.Component { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 | 11 | 15 | {this.props.headComponents} 16 | 17 | 18 |