commit b715d5bde795b766fe10ddaaf05f48bb94f23319
Author: Agastya Chandrakant <me@hanabi.in>
Date: Wed, 4 Mar 2020 23:19:53 +0530
initial commit
Diffstat:
39 files changed, 3517 insertions(+), 0 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,74 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env*
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+yarn.lock
+
+# Yarn Integrity file
+.yarn-integrity
+
+# VS Code
+.vscode/
+\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+.cache
+package.json
+package-lock.json
+public
+*.md
+\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,9 @@
+{
+ "endOfLine": "lf",
+ "printWidth": 80,
+ "semi": true,
+ "singleQuote": true,
+ "tabWidth": 2,
+ "trailingComma": "es5",
+ "useTabs": false
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2020, Agastya Chandrakant
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+ list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+ contributors may be used to endorse or promote products derived from
+ this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/LICENSE-css b/LICENSE-css
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Munif Tanjim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+\ No newline at end of file
diff --git a/LICENSE-website b/LICENSE-website
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 gatsbyjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
diff --git a/README.md b/README.md
@@ -0,0 +1,219 @@
+## Table of Contents
++ [Agastya's website](#Agastya's-website)
+ + [Conventions](#Conventions)
+ + [Code snippets](#Code-snippets)
+ + [Tags and categories](#Tags-and-categories)
+ + [Content](#Content)
+ + [Frontmatter](#Frontmatter)
+ + [Using plugins](#using-plugins)
+ + [Abbreviations](#Abbreviations)
+ + [Embedder](#Embedder)
+ + [Feed](#Feed)
+ + [Footnotes](#Footnotes)
+ + [Image](#Image)
+ + [KaTeX](#KaTeX)
+ + [MDX](#MDX)
+ + [Mermaid: to add flowcharts](#Mermaid-to-add-flowcharts)
+ + [PrismJS: to add codeblocks](#PrismJS-to-add-codeblocks)
+ + [Twitter embed](#twitter-embed)
+
+# Agastya's website
+
+My personal blog. Forked from [Gatsby blog starter](https://github.com/gatsbyjs/gatsby-starter-blog). Syntax theme based on [Sarah Drasner's Night Owl](https://github.com/sdras/night-owl-vscode-theme/) with small tweaks. [Minimo theme](https://themes.gohugo.io//theme/minimo/) for [Hugo](https://gohugo.io/) by [Munif Tanjim](https://github.com/MunifTanjim).
+
+To run locally, follow these steps:
+
+```bash
+yarn
+yarn start
+```
+Then open [http://0.0.0.0:8000](http://0.0.0.0:8000).
+
+## Conventions
+
+### Code snippets
+
+In a code snippet of a prompt:
+1. `john@doe λ ` represents a non-superuser.
+1. `root@doe # ` represents a superuser.
+1. If the username is omitted, it represents non-superuser. Unless otherwise stated, the user does not represent a superuser.
+
+### Tags and categories
+
+Per [Yoast.com](https://yoast.com/tags-and-categories-difference/ "SEO basics: What is the difference between tags and categories?") ([Archived link](http://web.archive.org/web/20200115221505/https://yoast.com/tags-and-categories-difference/))
+
+1. Categories allowed for a broad grouping of post topics.
+1. Tags are used to describe your post in more detail.
+
+### Content
+
+1. The blog posts are located at `src/posts`.
+1. Images are located at `src/images`.
+
+### Frontmatter
+
+This is how the frontmatter must appear
+
+```markdown
+---
+categories: Array<String>!
+date: Date(yyyy-mm-dd)!
+draft: Boolean!
+excerpt: String!
+lang: String(ISO 639-1)!
+path: unique(String!)
+tags: Array<String>!
+title: String!
+
+---
+
+```
+
+## Using plugins
+
+### Abbreviations
+
+Abbreviations can be added as follows:
+
+```diff
+The HTML specification
+is maintained by the W3C.
+
++*[HTML]: Hyper Text Markup Language
++*[W3C]: World Wide Web Consortium
+```
+
+### Embedder
+
+The following services are supported as of January 15, 2020.
+1. CodePen
+2. CodeSandbox
+3. Slides
+4. SoundCloud
+5. Spotify
+6. Streamable
+7. Twitter
+8. YouTube
+
+To add an embedd, do it as follows:
+
+```md
+...
+
+https://codepen.io/team/codepen/pen/PNaGbb
+
+...
+```
+
+### Feed
+
+RSS feed is available at `/posts/rss.xml`.
+
+### Footnotes
+
+Footnotes can be added as follows:
+
+```md
+This is normal body copy.[^also] It includes a couple footnotes.[^thing]
+
+[^also]:
+ This is a footnote.
+
+[^thing]:
+ This is another footnote.
+```
+
+### Image
+
+Use `.mdx` instead of `.md` for the blogpost. In the same directory, create `Image.js`. In the `.mdx` file write the following code.
+
+```diff
++import Image from './Image.js'
++<Image />
+```
+
+In `Image.js`, copy the content of `src/components/image.js`
+
+Make the following change:
+
+```diff
+...
++placeholderImage: file(relativePath: { eq: "filename.ext" }) {
+...
+```
+
+Note: The file should be located in `src/images`
+
+### KaTeX
+
+KaTeX can be used as:
+
+```md
+$\KaTeX$
+```
+```md
+$$
+\alpha^2 + \beta^2 = \omega^2
+$$
+```
+
+### MDX
+
+In the directory `src/posts`, each post is located in a subdirectory as a `.md` or `.mdx` file.
+`gatsby-plugin-mdx` is configured to support both the file extensions.
+
+### Mermaid: to add flowcharts
+
+Flowcharts can be added using MermaidJS. See [examples](https://mermaid-js.github.io/mermaid/#/examples) ([Archived link](http://web.archive.org/web/20200114175304/https://mermaid-js.github.io/mermaid/#/))
+
+```diff
++```mermaid
++graph LR
++install[Install Plugin]
++install --> configure[Configure Plugin]
++configure --> draw[Draw Fancy Diagrams]
++```
+```
+
+### PrismJS: to add codeblocks
+
+To have syntax highlighting in a code block follow the following method:
+
+```diff
++```language
++const foo = 5;
++const bar = 2;
++```
+```
+
+For highlighiting a line:
+
+```diff
++```c{5,7-9}
+```
+
+For shell prompt:
+
+```diff
++```bash{promptUser: alice}{promptHost: dev.localhost}
+```
+
+For inline:
+
+```diff
++I can highlight `css›.some-class { background-color: red }` with CSS syntax.
+```
+
+**Note:** Line number is disabled as of January 15, 2020
+
+### Twitter embed
+
+To embed Tweets, add the tweet link with a blank line at the top and the bottom of the link. For example:
+
+```md
+...
+
+https://twitter.com/devangishere/status/1115831423963947009
+
+...
+```
+\ No newline at end of file
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -0,0 +1,3 @@
+require('./src/components/minimo.css');
+require('./src/components/custom.css');
+// require('prismjs/plugins/line-numbers/prism-line-numbers.css');
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -0,0 +1,53 @@
+const path = require('path');
+
+module.exports = {
+ siteMetadata: {
+ author: 'Agastya Chandrakant',
+ description: 'Some of my favourite quotes',
+ email: 'acagastya@outlook.com',
+ github: 'acagastya',
+ instagram: 'acagastya',
+ siteName: 'Quotes',
+ siteUrl: 'https://acagastya.github.io/quotes',
+ title: 'Quotes',
+ twitter: '@acagastya',
+ username: 'acagastya',
+ },
+ plugins: [
+ {
+ resolve: 'gatsby-source-filesystem',
+ options: {
+ name: 'posts',
+ path: path.join(__dirname, 'posts'),
+ },
+ },
+ {
+ resolve: 'gatsby-transformer-remark',
+ options: {
+ plugins: ['gatsby-remark-abbr'],
+ },
+ },
+ 'gatsby-plugin-react-helmet',
+ {
+ resolve: 'gatsby-source-filesystem',
+ options: {
+ name: 'images',
+ path: path.join(__dirname, 'src', 'images'),
+ },
+ },
+ 'gatsby-transformer-sharp',
+ 'gatsby-plugin-sharp',
+ {
+ resolve: 'gatsby-plugin-manifest',
+ options: {
+ name: 'Quotes',
+ short_name: `My favourite quotes`,
+ start_url: '/',
+ background_color: '#324996',
+ theme_color: '#298BCC',
+ display: 'minimal-ui',
+ icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
+ },
+ },
+ ],
+};
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -0,0 +1,131 @@
+const path = require('path');
+
+const createTagPages = function(createPage, posts) {
+ const allTagsTemplate = path.resolve(
+ 'src',
+ 'templates',
+ 'allTagsTemplate.js'
+ );
+ const singleTagTemplate = path.resolve(
+ 'src',
+ 'templates',
+ 'singleTagTemplate.js'
+ );
+ const postsByTag = {};
+ posts.forEach(({ node }) => {
+ if (node.frontmatter.tags) {
+ node.frontmatter.tags.forEach(tag => {
+ if (!postsByTag[tag]) postsByTag[tag] = [];
+ postsByTag[tag].push(node);
+ });
+ }
+ });
+ const tags = Object.keys(postsByTag);
+
+ createPage({
+ path: '/tags',
+ component: allTagsTemplate,
+ context: { tags, postsByTag },
+ });
+
+ tags.forEach(tag => {
+ const posts = postsByTag[tag];
+ createPage({
+ path: `/tags/${tag}`,
+ component: singleTagTemplate,
+ context: {
+ posts,
+ tag,
+ },
+ });
+ });
+};
+
+const createCatPages = function(createPage, posts) {
+ const allCatsTemplate = path.resolve(
+ 'src',
+ 'templates',
+ 'allCatsTemplate.js'
+ );
+ const singleCatTemplate = path.resolve(
+ 'src',
+ 'templates',
+ 'singleCatTemplate.js'
+ );
+ const postsByCat = {};
+ posts.forEach(({ node }) => {
+ if (node.frontmatter.categories) {
+ node.frontmatter.categories.forEach(cat => {
+ if (!postsByCat[cat]) postsByCat[cat] = [];
+ postsByCat[cat].push(node);
+ });
+ }
+ });
+ const cats = Object.keys(postsByCat);
+
+ createPage({
+ path: '/authors',
+ component: allCatsTemplate,
+ context: { cats, postsByCat },
+ });
+
+ cats.forEach(cat => {
+ const posts = postsByCat[cat];
+ createPage({
+ path: `/authors/${cat}`,
+ component: singleCatTemplate,
+ context: {
+ cat,
+ posts,
+ },
+ });
+ });
+};
+
+exports.createPages = function({ graphql, actions }) {
+ const { createPage } = actions;
+
+ return new Promise(function(resolve, reject) {
+ const blogPostTemplate = path.resolve('src', 'templates', 'blogPost.js');
+ resolve(
+ graphql(
+ `
+ query {
+ allMarkdownRemark(
+ sort: { order: DESC, fields: [frontmatter___date] }
+ filter: { frontmatter: { draft: { ne: true } } }
+ ) {
+ edges {
+ node {
+ frontmatter {
+ author
+ categories
+ path
+ tags
+ title
+ }
+ }
+ }
+ }
+ }
+ `
+ ).then(function(result) {
+ const posts = result.data.allMarkdownRemark.edges;
+ createTagPages(createPage, posts);
+ createCatPages(createPage, posts);
+ posts.forEach(function({ node }, index) {
+ createPage({
+ path: 'post' + node.frontmatter.path,
+ component: blogPostTemplate,
+ context: {
+ pathSlug: node.frontmatter.path,
+ next: index == posts.length - 1 ? null : posts[index + 1].node,
+ prev: index == 0 ? null : posts[index - 1].node,
+ },
+ });
+ resolve();
+ });
+ })
+ );
+ });
+};
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -0,0 +1,7 @@
+/**
+ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/ssr-apis/
+ */
+
+// You can delete this file if you're not using it
diff --git a/package.json b/package.json
@@ -0,0 +1,53 @@
+{
+ "author": {
+ "email": "acagastya@outlook.com",
+ "name": "Agastya",
+ "url": "http://hanabi.in"
+ },
+ "bugs": {
+ "url": "https://github.com/acagastya/quotes/issues"
+ },
+ "dependencies": {
+ "gatsby": "^2.18.4",
+ "gatsby-image": "^2.2.34",
+ "gatsby-plugin-manifest": "^2.2.30",
+ "gatsby-plugin-offline": "^3.0.24",
+ "gatsby-plugin-react-helmet": "^3.1.16",
+ "gatsby-plugin-sharp": "^2.3.4",
+ "gatsby-remark-abbr": "^2.0.0",
+ "gatsby-source-filesystem": "^2.1.39",
+ "gatsby-transformer-remark": "^2.6.45",
+ "gatsby-transformer-sharp": "^2.3.6",
+ "moment": "^2.24.0",
+ "prop-types": "^15.7.2",
+ "react": "^16.12.0",
+ "react-dom": "^16.12.0",
+ "react-helmet": "^5.2.1",
+ "remark-abbr": "^1.3.2"
+ },
+ "description": "My favourite quotes",
+ "devDependencies": {
+ "prettier": "^1.19.1"
+ },
+ "keywords": [
+ "quotes"
+ ],
+ "license": "BSD-3-Clause",
+ "name": "quotes",
+ "private": true,
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/acagastya/quotes"
+ },
+ "scripts": {
+ "build": "gatsby clean && gatsby build",
+ "clean": "gatsby clean",
+ "develop": "gatsby clean && gatsby develop",
+ "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
+ "ps": "gatsby clean && gatsby build && gatsby serve",
+ "serve": "gatsby serve",
+ "start": "gatsby clean && gatsby develop",
+ "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+ },
+ "version": "0.0.1"
+}
diff --git a/posts/Dear Tecrübe,/Dear Tecrübe,.md b/posts/Dear Tecrübe,/Dear Tecrübe,.md
@@ -0,0 +1,13 @@
+---
+categories: ['Imam Bayhaqi']
+date: 'March 2, 2020'
+draft: false
+lang: 'en'
+path: '/dear-tecrube'
+tags: ['Patience', 'Friendship', 'Understanding']
+title: 'If a friend among your friends errs, make seventy excuses for them.'
+author: 'Imam Bayhaqi'
+---
+
+# *If a friend among your friends errs, make seventy excuses for them.*
+— Imam Bayhaqi, Shu`ab Al-Iman, 7.522
+\ No newline at end of file
diff --git a/posts/Dear Tecrübe,/index.js b/posts/Dear Tecrübe,/index.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useStaticQuery, graphql } from 'gatsby';
+import Img from 'gatsby-image';
+
+/*
+ * This component is built using `gatsby-image` to automatically serve optimized
+ * images with lazy loading and reduced file sizes. The image is loaded using a
+ * `useStaticQuery`, which allows us to load the image from directly within this
+ * component, rather than having to pass the image data down from pages.
+ *
+ * For more information, see the docs:
+ * - `gatsby-image`: https://gatsby.dev/gatsby-image
+ * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+
+export function I() {
+ const data = useStaticQuery(graphql`
+ query {
+ placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+ childImageSharp {
+ fluid(maxWidth: 300) {
+ ...GatsbyImageSharpFluid
+ }
+ }
+ }
+ }
+ `);
+ return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
+}
+
+export function Test({ foo }) {
+ return <button>{foo}</button>;
+}
diff --git a/posts/Deservance/Deservance.md b/posts/Deservance/Deservance.md
@@ -0,0 +1,13 @@
+---
+categories: ['Christopher Hitchens']
+date: 'March 2, 2020'
+draft: false
+lang: 'en'
+path: '/2'
+tags: ['Logic', 'Assertion', 'Reasoning']
+title: 'What can be asserted without evidence can be dismissed without evidence.'
+author: 'Christopher Hitchens'
+---
+
+# *What can be asserted without evidence can be dismissed without evidence.*
+— Christopher Hitchens
+\ No newline at end of file
diff --git a/posts/Education/Education.md b/posts/Education/Education.md
@@ -0,0 +1,13 @@
+---
+categories: ['Lawrence M. Krauss']
+date: 'March 2, 2020'
+draft: false
+lang: 'en'
+path: '/3'
+tags: ['Logic', 'Assertion', 'Reasoning', 'Religion', 'Ignorance']
+title: "The lack of understanding of something is not evidence for God. It's evidence for lack of understanding"
+author: 'Lawrence M. Krauss'
+---
+
+# *The lack of understanding of something is not evidence for God. It's evidence for lack of understanding*
+— Lawrence M. Krauss
+\ No newline at end of file
diff --git a/src/components/code-highlight.css b/src/components/code-highlight.css
@@ -0,0 +1,204 @@
+code[class*='language-'],
+pre[class*='language-'] {
+ color: white;
+ background: none;
+ font-family: Menlo, Monaco, source-code-pro, Courier New, monospace;
+ font-feature-settings: normal;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+ margin-bottom: 0;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+ overflow: auto;
+ padding: 1.3125rem;
+}
+
+pre[class*='language-']::-moz-selection {
+ /* Firefox */
+ background: hsl(207, 4%, 16%);
+}
+
+pre[class*='language-']::selection {
+ /* Safari */
+ background: hsl(207, 4%, 16%);
+}
+
+/* Text Selection colour */
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection {
+ text-shadow: none;
+ background: hsla(0, 0%, 100%, 0.15);
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection {
+ text-shadow: none;
+ background: hsla(0, 0%, 100%, 0.15);
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+ border-radius: 0.3em;
+ background: var(--inlineCode-bg);
+ color: var(--inlineCode-text);
+ padding: 0.15em 0.2em 0.05em;
+ white-space: normal;
+}
+
+.token.attr-name {
+ color: rgb(173, 219, 103);
+ font-style: italic;
+}
+
+.token.comment {
+ color: rgb(128, 147, 147);
+}
+
+.token.string,
+.token.url {
+ color: rgb(173, 219, 103);
+}
+
+.token.variable {
+ color: rgb(214, 222, 235);
+}
+
+.token.number {
+ color: rgb(247, 140, 108);
+}
+
+.token.builtin,
+.token.char,
+.token.constant,
+.token.function {
+ color: rgb(130, 170, 255);
+}
+
+.token.punctuation {
+ color: rgb(199, 146, 234);
+}
+
+.token.selector,
+.token.doctype {
+ color: rgb(199, 146, 234);
+ font-style: 'italic';
+}
+
+.token.class-name {
+ color: rgb(255, 203, 139);
+}
+
+.token.tag,
+.token.operator,
+.token.keyword {
+ color: #ffa7c4;
+}
+
+.token.boolean {
+ color: rgb(255, 88, 116);
+}
+
+.token.property {
+ color: rgb(128, 203, 196);
+}
+
+.token.namespace {
+ color: rgb(178, 204, 214);
+}
+
+pre[data-line] {
+ padding: 1em 0 1em 3em;
+ position: relative;
+}
+
+.gatsby-highlight-code-line {
+ background-color: hsla(207, 95%, 15%, 1);
+ display: block;
+ margin-right: -1.3125rem;
+ margin-left: -1.3125rem;
+ padding-right: 1em;
+ padding-left: 1.25em;
+ border-left: 0.25em solid #ffa7c4;
+}
+
+.gatsby-highlight {
+ margin-bottom: 1.75rem;
+ margin-left: -1.3125rem;
+ margin-right: -1.3125rem;
+ border-radius: 10px;
+ background: #011627;
+ -webkit-overflow-scrolling: touch;
+ overflow: auto;
+}
+
+@media (max-width: 672px) {
+ .gatsby-highlight {
+ border-radius: 0;
+ }
+}
+
+.gatsby-highlight pre[class*='language-'] {
+ float: left;
+ min-width: 100%;
+}
+
+.command-line-prompt {
+ border-right: 1px solid #999;
+ display: block;
+ float: left;
+ font-size: 100%;
+ letter-spacing: -1px;
+ margin-right: 1em;
+ pointer-events: none;
+
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.command-line-prompt > span:before {
+ color: #999;
+ content: ' ';
+ display: block;
+ padding-right: 0.8em;
+}
+
+.command-line-prompt > span[data-user]:before {
+ color: #44c5cb;
+ content: attr(data-user) '@' attr(data-host) ' λ';
+}
+
+.command-line-prompt > span[data-user='root']:before {
+ content: '[' attr(data-user) '@' attr(data-host) '] #';
+}
+
+.command-line-prompt > span[data-prompt]:before {
+ content: attr(data-prompt);
+}
+/* .gatsby-highlight {
+ margin: 0.5em 0;
+ padding: 1em;
+ overflow: auto;
+}
+
+.gatsby-highlight pre[class*='language-'].line-numbers {
+ padding: 0;
+ padding-left: 2.8em;
+ overflow: initial;
+} */
diff --git a/src/components/custom.css b/src/components/custom.css
@@ -0,0 +1,44 @@
+figure figcaption {
+ text-align: center;
+ font-size: 0.7em;
+}
+
+details {
+ border: 1px solid #aaa;
+ border-radius: 4px;
+ padding: 0.5em 0.5em 0;
+}
+
+summary {
+ font-weight: bold;
+ margin: -0.5em -0.5em 0;
+ padding: 0.5em;
+ cursor: pointer;
+ display: list-item;
+}
+
+details[open] {
+ padding: 0.5em;
+}
+
+details[open] summary {
+ border-bottom: 1px solid #aaa;
+ margin-bottom: 0.5em;
+}
+
+.autolink-header-anchor {
+ border-bottom: none !important;
+ margin-left: -22px;
+ margin-right: 6px;
+ fill: #324996;
+ opacity: 0.3;
+}
+
+h1:hover > .autolink-header-anchor,
+h2:hover > .autolink-header-anchor,
+h3:hover > .autolink-header-anchor,
+h4:hover > .autolink-header-anchor,
+h5:hover > .autolink-header-anchor,
+h6:hover > .autolink-header-anchor {
+ opacity: 0.5;
+}
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from './partials/Icon';
+import {
+ EmailSVG,
+ GitHubSVG,
+ InstagramSVG,
+ TwitterSVG,
+} from './partials/SVGIcon';
+
+function Footer({ author, email, username }) {
+ const currentYear = new Date().getFullYear();
+ return (
+ <footer id="footer" className="footer-container">
+ <div className="footer">
+ <div className="social-menu-container">
+ <nav aria-label="Social Menu">
+ <ul className="social-menu">
+ <li>
+ <Icon
+ link={`mailto:${email}`}
+ text="Contact via Email"
+ SVG={EmailSVG}
+ />
+ </li>
+ <li>
+ <Icon
+ link={`https://twitter.com/${username}`}
+ text="Open Twitter account in new tab"
+ SVG={TwitterSVG}
+ />
+ </li>
+ <li>
+ <Icon
+ link={`https://instagram.com/${username}`}
+ text="Open Instagram account in new tab"
+ SVG={InstagramSVG}
+ />
+ </li>
+ <li>
+ <Icon
+ link={`https://github.com/${username}`}
+ text="Open GitHub account in new tab"
+ SVG={GitHubSVG}
+ />
+ </li>
+ </ul>
+ </nav>
+ </div>
+ <div className="copyright">
+ <p>
+ © {currentYear} {author}
+ </p>
+ </div>
+ </div>
+ </footer>
+ );
+}
+
+Footer.propTypes = {
+ author: PropTypes.string,
+ email: PropTypes.string,
+ username: PropTypes.string,
+};
+
+Footer.defaultProps = {
+ author: '',
+ email: '',
+ username: '',
+};
+
+export default Footer;
diff --git a/src/components/header.js b/src/components/header.js
@@ -0,0 +1,61 @@
+/* eslint-disable eqeqeq */
+
+import { Link } from 'gatsby';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function Header({ description, link = '/', showHeader, siteTitle, slug }) {
+ return (
+ <header id="header" className="header-container">
+ <div className="header site-header">
+ <nav
+ id="main-menu"
+ className="main-menu-container"
+ aria-label="Main Menu"
+ >
+ <ul className="main-menu">
+ <li>
+ {slug == 'post' ? (
+ <BoldEntry text="Quotes" />
+ ) : (
+ <Link to="/post">Quotes</Link>
+ )}
+ </li>
+ <li>
+ {slug == 'about' ? (
+ <BoldEntry text="About" />
+ ) : (
+ <Link to="/about">About</Link>
+ )}
+ </li>
+ </ul>
+ </nav>
+
+ {showHeader && (
+ <div className="header-info">
+ <p className="site-title title">
+ <Link to={link}>{siteTitle}</Link>
+ </p>
+ {siteTitle == 'Quotes' && (
+ <p className="site-description subtitle">{description}</p>
+ )}
+ </div>
+ )}
+ </div>
+ </header>
+ );
+}
+
+Header.propTypes = {
+ siteTitle: PropTypes.string,
+};
+
+Header.defaultProps = {
+ siteTitle: '',
+};
+
+function BoldEntry({ text = '' }) {
+ return <span style={{ fontWeight: 700, cursor: 'default' }}>{text}</span>;
+}
+
+export default Header;
diff --git a/src/components/image.js b/src/components/image.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useStaticQuery, graphql } from 'gatsby';
+import Img from 'gatsby-image';
+
+/*
+ * This component is built using `gatsby-image` to automatically serve optimized
+ * images with lazy loading and reduced file sizes. The image is loaded using a
+ * `useStaticQuery`, which allows us to load the image from directly within this
+ * component, rather than having to pass the image data down from pages.
+ *
+ * For more information, see the docs:
+ * - `gatsby-image`: https://gatsby.dev/gatsby-image
+ * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+
+function Image() {
+ const data = useStaticQuery(graphql`
+ query {
+ placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+ childImageSharp {
+ fluid(maxWidth: 300) {
+ ...GatsbyImageSharpFluid
+ }
+ }
+ }
+ }
+ `);
+ return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
+}
+
+export default Image;
diff --git a/src/components/layout.css b/src/components/layout.css
@@ -0,0 +1,622 @@
+html {
+ font-family: sans-serif;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+}
+body {
+ margin: 0;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+audio,
+canvas,
+progress,
+video {
+ display: inline-block;
+}
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+progress {
+ vertical-align: baseline;
+}
+[hidden],
+template {
+ display: none;
+}
+a {
+ background-color: transparent;
+ -webkit-text-decoration-skip: objects;
+}
+a:active,
+a:hover {
+ outline-width: 0;
+}
+abbr[title] {
+ border-bottom: none;
+ text-decoration: underline;
+ text-decoration: underline dotted;
+}
+b,
+strong {
+ font-weight: inherit;
+ font-weight: bolder;
+}
+dfn {
+ font-style: italic;
+}
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+mark {
+ background-color: #ff0;
+ color: #000;
+}
+small {
+ font-size: 80%;
+}
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sub {
+ bottom: -0.25em;
+}
+sup {
+ top: -0.5em;
+}
+img {
+ border-style: none;
+}
+svg:not(:root) {
+ overflow: hidden;
+}
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+figure {
+ margin: 1em 40px;
+}
+hr {
+ box-sizing: content-box;
+ height: 0;
+ overflow: visible;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+ font: inherit;
+ margin: 0;
+}
+optgroup {
+ font-weight: 700;
+}
+button,
+input {
+ overflow: visible;
+}
+button,
+select {
+ text-transform: none;
+}
+[type='reset'],
+[type='submit'],
+button,
+html [type='button'] {
+ -webkit-appearance: button;
+}
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner,
+button::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring,
+button:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+fieldset {
+ border: 1px solid silver;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+legend {
+ box-sizing: border-box;
+ color: inherit;
+ display: table;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal;
+}
+textarea {
+ overflow: auto;
+}
+[type='checkbox'],
+[type='radio'] {
+ box-sizing: border-box;
+ padding: 0;
+}
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+ height: auto;
+}
+[type='search'] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px;
+}
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+::-webkit-input-placeholder {
+ color: inherit;
+ opacity: 0.54;
+}
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit;
+}
+html {
+ font: 112.5%/1.45em georgia, serif;
+ box-sizing: border-box;
+ overflow-y: scroll;
+}
+* {
+ box-sizing: inherit;
+}
+*:before {
+ box-sizing: inherit;
+}
+*:after {
+ box-sizing: inherit;
+}
+body {
+ color: hsla(0, 0%, 0%, 0.8);
+ font-family: georgia, serif;
+ font-weight: normal;
+ word-wrap: break-word;
+ font-kerning: normal;
+ -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+ -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+ -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+ font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+}
+img {
+ max-width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+h1 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 2.25rem;
+ line-height: 1.1;
+}
+h2 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 1.62671rem;
+ line-height: 1.1;
+}
+h3 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 1.38316rem;
+ line-height: 1.1;
+}
+h4 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 1rem;
+ line-height: 1.1;
+}
+h5 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 0.85028rem;
+ line-height: 1.1;
+}
+h6 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 0.78405rem;
+ line-height: 1.1;
+}
+hgroup {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+ul {
+ margin-left: 1.45rem;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ list-style-position: outside;
+ list-style-image: none;
+}
+ol {
+ margin-left: 1.45rem;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ list-style-position: outside;
+ list-style-image: none;
+}
+dl {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+dd {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+p {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+figure {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+pre {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ margin-bottom: 1.45rem;
+ font-size: 0.85rem;
+ line-height: 1.42;
+ background: hsla(0, 0%, 0%, 0.04);
+ border-radius: 3px;
+ overflow: auto;
+ word-wrap: normal;
+ padding: 1.45rem;
+}
+table {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ font-size: 1rem;
+ line-height: 1.45rem;
+ border-collapse: collapse;
+ width: 100%;
+}
+fieldset {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+blockquote {
+ margin-left: 1.45rem;
+ margin-right: 1.45rem;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+form {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+noscript {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+iframe {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+hr {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: calc(1.45rem - 1px);
+ background: hsla(0, 0%, 0%, 0.2);
+ border: none;
+ height: 1px;
+}
+address {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+b {
+ font-weight: bold;
+}
+strong {
+ font-weight: bold;
+}
+dt {
+ font-weight: bold;
+}
+th {
+ font-weight: bold;
+}
+li {
+ margin-bottom: calc(1.45rem / 2);
+}
+ol li {
+ padding-left: 0;
+}
+ul li {
+ padding-left: 0;
+}
+li > ol {
+ margin-left: 1.45rem;
+ margin-bottom: calc(1.45rem / 2);
+ margin-top: calc(1.45rem / 2);
+}
+li > ul {
+ margin-left: 1.45rem;
+ margin-bottom: calc(1.45rem / 2);
+ margin-top: calc(1.45rem / 2);
+}
+blockquote *:last-child {
+ margin-bottom: 0;
+}
+li *:last-child {
+ margin-bottom: 0;
+}
+p *:last-child {
+ margin-bottom: 0;
+}
+li > p {
+ margin-bottom: calc(1.45rem / 2);
+}
+code {
+ font-size: 0.85rem;
+ line-height: 1.45rem;
+}
+kbd {
+ font-size: 0.85rem;
+ line-height: 1.45rem;
+}
+samp {
+ font-size: 0.85rem;
+ line-height: 1.45rem;
+}
+abbr {
+ border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+ cursor: alias;
+}
+acronym {
+ border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+ cursor: alias;
+}
+abbr[title] {
+ border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+ cursor: alias;
+ text-decoration: none;
+}
+thead {
+ text-align: left;
+}
+td,
+th {
+ text-align: left;
+ border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
+ font-feature-settings: 'tnum';
+ -moz-font-feature-settings: 'tnum';
+ -ms-font-feature-settings: 'tnum';
+ -webkit-font-feature-settings: 'tnum';
+ padding-left: 0.96667rem;
+ padding-right: 0.96667rem;
+ padding-top: 0.725rem;
+ padding-bottom: calc(0.725rem - 1px);
+}
+th:first-child,
+td:first-child {
+ padding-left: 0;
+}
+th:last-child,
+td:last-child {
+ padding-right: 0;
+}
+tt,
+code {
+ background-color: hsla(0, 0%, 0%, 0.04);
+ border-radius: 3px;
+ font-family: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Droid Sans Mono',
+ 'Liberation Mono', Menlo, Courier, monospace;
+ padding: 0;
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+}
+pre code {
+ background: none;
+ line-height: 1.42;
+}
+code:before,
+code:after,
+tt:before,
+tt:after {
+ letter-spacing: -0.2em;
+ content: ' ';
+}
+pre code:before,
+pre code:after,
+pre tt:before,
+pre tt:after {
+ content: '';
+}
+@media only screen and (max-width: 480px) {
+ html {
+ font-size: 100%;
+ }
+}
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { graphql, useStaticQuery } from 'gatsby';
+
+import Header from './header';
+import Footer from './footer';
+
+function Layout({
+ children,
+ heading = undefined,
+ link,
+ showHeader = true,
+ slug = undefined,
+}) {
+ const data = useStaticQuery(graphql`
+ query SiteTitleQuery {
+ site {
+ siteMetadata {
+ author
+ description
+ email
+ username
+ title
+ }
+ }
+ }
+ `);
+ const {
+ author,
+ description,
+ email,
+ title,
+ username,
+ } = data.site.siteMetadata;
+
+ return (
+ <div className="site">
+ <a href="#main" className="screen-reader">
+ Skip to Content
+ </a>
+ <Header
+ description={description}
+ link={link}
+ showHeader={showHeader}
+ siteTitle={heading || title}
+ slug={slug}
+ />
+ <main className="main" id="main">
+ {children}
+ </main>
+ <Footer author={author} email={email} username={username} />
+ </div>
+ );
+}
+
+Layout.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+export default Layout;
diff --git a/src/components/minimo.css b/src/components/minimo.css
@@ -0,0 +1,959 @@
+.comments-container #disqus_thread:before,
+.entry + .home-sections-container .home-sections:before,
+.entry-nav:before,
+.footer:before,
+.header:after,
+.prev-entry ~ .next-entry:before {
+ content: '';
+ display: block;
+ border-bottom: 0.125em solid #ffcd00;
+ width: 4em;
+}
+.header:after {
+ margin-top: 2em;
+ margin-bottom: 2.5em;
+}
+.comments-container #disqus_thread:before,
+.entry + .home-sections-container .home-sections:before,
+.entry-nav:before,
+.footer:before,
+.prev-entry ~ .next-entry:before {
+ margin-top: 2.5em;
+ margin-bottom: 2em;
+}
+.comments-container,
+.entry,
+.entry-cover-container,
+.entry-footer-container,
+.entry-nav-container,
+.footer-container,
+.header-container,
+.home-sections-container,
+.list-container,
+.main,
+.site,
+.term-cloud-container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column nowrap;
+ flex-flow: column nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ width: 100%;
+}
+.comments-container #disqus_thread,
+.entry-content,
+.entry-cover,
+.entry-cover figcaption,
+.entry-footer,
+.entry-nav,
+.entry-toc,
+.footer,
+.header,
+.home-sections,
+.list,
+.pagination,
+.term-cloud {
+ width: 100%;
+ max-width: 740px;
+ padding-left: 20px;
+ padding-right: 20px;
+}
+.icon {
+ display: inline-block;
+ height: 1em;
+ width: 1em;
+}
+/*!
+ * Theme Name: Minimo
+ * Author: Munif Tanjim
+ */
+html {
+ line-height: 1.15;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+}
+body {
+ margin: 0;
+}
+article,
+aside,
+footer,
+header,
+nav,
+section {
+ display: block;
+}
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+figcaption,
+figure,
+main {
+ display: block;
+}
+figure {
+ margin: 1em 40px;
+}
+hr {
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+ overflow: visible;
+}
+pre {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+a {
+ background-color: transparent;
+ -webkit-text-decoration-skip: objects;
+}
+abbr[title] {
+ border-bottom: none;
+ text-decoration: underline;
+ text-decoration: underline dotted;
+}
+b,
+strong {
+ font-weight: inherit;
+ font-weight: bolder;
+}
+code,
+kbd,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+dfn {
+ font-style: italic;
+}
+mark {
+ background-color: #ff0;
+ color: #000;
+}
+small {
+ font-size: 80%;
+}
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sub {
+ bottom: -0.25em;
+}
+sup {
+ top: -0.5em;
+}
+audio,
+video {
+ display: inline-block;
+}
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+img {
+ border-style: none;
+}
+svg:not(:root) {
+ overflow: hidden;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: sans-serif;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
+}
+button,
+input {
+ overflow: visible;
+}
+button,
+select {
+ text-transform: none;
+}
+[type='reset'],
+[type='submit'],
+button,
+html [type='button'] {
+ -webkit-appearance: button;
+}
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner,
+button::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring,
+button:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+legend {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ color: inherit;
+ display: table;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal;
+}
+progress {
+ display: inline-block;
+ vertical-align: baseline;
+}
+textarea {
+ overflow: auto;
+}
+[type='checkbox'],
+[type='radio'] {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 0;
+}
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+ height: auto;
+}
+[type='search'] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px;
+}
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit;
+}
+details,
+menu {
+ display: block;
+}
+summary {
+ display: list-item;
+}
+canvas {
+ display: inline-block;
+}
+[hidden],
+template {
+ display: none;
+}
+body,
+button,
+input,
+select,
+textarea {
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans,
+ Ubuntu, Cantarell, Helvetica Neue, Siyam Rupali, sans-serif;
+ font-size: 1em;
+ line-height: 1.5;
+ color: #37474f;
+ word-wrap: break-word;
+}
+@media screen and (min-width: 480px) {
+ body,
+ button,
+ input,
+ select,
+ textarea {
+ font-size: 1.125em;
+ }
+}
+.title,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans,
+ Ubuntu, Cantarell, Helvetica Neue, Siyam Rupali, sans-serif;
+ font-weight: 700;
+ line-height: 1.2;
+ color: #263238;
+ margin: 0 0 0.625em;
+}
+.entry-content h2,
+.entry-content h3,
+.entry-content h4,
+.entry-content h5,
+.entry-content h6 {
+ margin-top: 1.5em;
+}
+.entry-content h2:first-child,
+.entry-content h3:first-child,
+.entry-content h4:first-child,
+.entry-content h5:first-child,
+.entry-content h6:first-child {
+ margin-top: 0;
+}
+.site-title,
+h1 {
+ font-size: 2em;
+}
+h2 {
+ font-size: 1.75em;
+}
+h3 {
+ font-size: 1.5em;
+}
+.home-section-title,
+h4 {
+ font-size: 1.375em;
+}
+h5 {
+ font-size: 1.25em;
+}
+h6 {
+ font-size: 1.125em;
+}
+p {
+ margin: 0 0 1.5em;
+}
+cite,
+dfn,
+em,
+i {
+ font-style: italic;
+}
+blockquote {
+ margin: 0 1.5em;
+}
+address {
+ margin: 0 0 1.5em;
+}
+pre {
+ font-size: 0.875em;
+ background: #212121;
+ color: #fafafa;
+ text-align: initial;
+ max-width: 100%;
+ padding: 1em 1.5em;
+ margin-bottom: 1.725em;
+ overflow: auto;
+ word-wrap: normal;
+}
+code,
+kbd,
+pre,
+tt,
+var {
+ font-family: Ubuntu Mono, Consolas, Monaco, Andale Mono, monospace;
+}
+abbr,
+acronym {
+ border-bottom: 1px dotted #212121;
+ cursor: alias;
+}
+ins,
+mark {
+ background: #212121;
+ text-decoration: none;
+}
+big {
+ font-size: 125%;
+}
+html {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+*,
+:after,
+:before {
+ -webkit-box-sizing: inherit;
+ box-sizing: inherit;
+}
+blockquote,
+q {
+ quotes: '' '';
+}
+blockquote:after,
+blockquote:before,
+q:after,
+q:before {
+ content: '';
+}
+blockquote :last-child,
+q :last-child {
+ margin-bottom: 0;
+}
+blockquote {
+ font-size: 1.125em;
+ font-style: italic;
+ margin: 0 0 1.5em;
+ padding-left: 1em;
+ border-left: 0.2em solid #bdbdbd;
+}
+hr {
+ border: 0;
+ height: 1px;
+ margin: 2em 0;
+ background-color: #bdbdbd;
+}
+img {
+ max-width: 100%;
+ height: auto;
+}
+figure {
+ margin: 1em 0;
+}
+a {
+ color: #212121;
+ text-decoration: none;
+ -webkit-transition: color 0.1s ease-in-out;
+ transition: color 0.1s ease-in-out;
+}
+a:focus {
+ outline-color: #ffcd00;
+}
+a:active,
+a:hover {
+ outline: 0;
+}
+a:active,
+a:focus,
+a:hover {
+ color: #37474f;
+}
+ol,
+ul {
+ padding: 0;
+ margin: 0 0 1.5em 2em;
+}
+ul {
+ list-style: disc;
+}
+ol {
+ list-style: decimal;
+}
+li > ol,
+li > ul {
+ padding-left: 1.5em;
+ margin-bottom: 0;
+ margin-left: 0.5em;
+}
+dt {
+ font-weight: 700;
+}
+dd {
+ margin: 0 1.5em 1.5em;
+}
+table,
+td,
+th {
+ border: 1px solid #bdbdbd;
+}
+table {
+ width: 100%;
+ margin: 0 0 1.5em;
+ table-layout: fixed;
+ border-collapse: separate;
+ border-spacing: 0;
+ border-width: 1px 0 0 1px;
+}
+caption,
+td,
+th {
+ font-weight: 400;
+ text-align: left;
+}
+th {
+ font-weight: 700;
+}
+td,
+th {
+ border-width: 0 1px 1px 0;
+}
+td,
+th {
+ padding: 0.375em;
+}
+button,
+input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+ border: none;
+ padding: 0.625em 0.875em;
+ line-height: 1;
+ font-weight: 700;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ color: #212121;
+ background: #ffcd00;
+ -webkit-transition: 0.1s ease-in-out;
+ transition: 0.1s ease-in-out;
+}
+button:focus,
+input[type='button']:focus,
+input[type='reset']:focus,
+input[type='submit']:focus {
+ outline-color: #ffcd00;
+}
+button:active,
+button:hover,
+input[type='button']:active,
+input[type='button']:hover,
+input[type='reset']:active,
+input[type='reset']:hover,
+input[type='submit']:active,
+input[type='submit']:hover {
+ outline: 0;
+}
+button:active,
+button:focus,
+button:hover,
+input[type='button']:active,
+input[type='button']:focus,
+input[type='button']:hover,
+input[type='reset']:active,
+input[type='reset']:focus,
+input[type='reset']:hover,
+input[type='submit']:active,
+input[type='submit']:focus,
+input[type='submit']:hover {
+ background: #212121;
+ color: #ffcd00;
+}
+label {
+ font-weight: 700;
+ letter-spacing: 1px;
+}
+input[type='color'],
+input[type='date'],
+input[type='datetime-local'],
+input[type='datetime'],
+input[type='email'],
+input[type='month'],
+input[type='number'],
+input[type='password'],
+input[type='range'],
+input[type='search'],
+input[type='tel'],
+input[type='text'],
+input[type='time'],
+input[type='url'],
+input[type='week'],
+select,
+textarea {
+ width: 100%;
+ padding: 0.625em 0.875em;
+ border: 1px solid #bdbdbd;
+ color: #37474f;
+ -webkit-transition: 0.1s ease-in-out;
+ transition: 0.1s ease-in-out;
+}
+input[type='color']:focus,
+input[type='date']:focus,
+input[type='datetime-local']:focus,
+input[type='datetime']:focus,
+input[type='email']:focus,
+input[type='month']:focus,
+input[type='number']:focus,
+input[type='password']:focus,
+input[type='range']:focus,
+input[type='search']:focus,
+input[type='tel']:focus,
+input[type='text']:focus,
+input[type='time']:focus,
+input[type='url']:focus,
+input[type='week']:focus,
+select:focus,
+textarea:focus {
+ border-color: #212121;
+ outline-color: #ffcd00;
+ outline: 0;
+}
+.entry-nav:before {
+ border-bottom-color: #bdbdbd;
+}
+.entry-nav > div a {
+ display: block;
+ font-style: italic;
+}
+.entry-nav > div span {
+ display: block;
+ font-style: normal;
+ font-size: 0.875em;
+}
+.prev-entry ~ .next-entry:before {
+ border-bottom-color: #bdbdbd;
+ width: 2em;
+ margin: 1em 0;
+}
+.main-menu-container {
+ margin-top: 2em;
+}
+.main-menu {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+.main-menu li {
+ display: inline-block;
+ text-transform: uppercase;
+ margin-right: 0.625em;
+}
+.main-menu li:last-of-type {
+ margin-right: 0;
+}
+.main-menu a.current {
+ font-weight: 700;
+ pointer-events: none;
+}
+.social-menu {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+.social-menu li {
+ display: inline-block;
+ margin-right: 0.625em;
+}
+.social-menu li:last-child {
+ margin-right: 0;
+}
+.social-menu li a {
+ font-size: 1.125em;
+}
+.main-menu a,
+.social-menu a {
+ color: #455a64;
+}
+.main-menu a:hover,
+.social-menu a:hover {
+ color: #263238;
+}
+.page-links {
+ margin-top: 2em;
+}
+.page-link {
+ display: inline-block;
+ padding: 0.25em 0.625em;
+}
+.page-link:first-child {
+ padding-left: 0;
+}
+.page-link:last-child {
+ padding-right: 0;
+}
+.page-link.current {
+ font-weight: 700;
+}
+.page-link.dots {
+ padding: 0;
+}
+.hasCover .header:after {
+ display: none;
+}
+.header-info {
+ margin-top: 1.5em;
+}
+.header-info .title {
+ margin-bottom: 0;
+ text-transform: uppercase;
+}
+.header-info .subtitle {
+ margin: 0.5em 0 0;
+ font-style: italic;
+}
+.header-info .taxonomy-type {
+ font-size: 0.875em;
+ margin-right: 0.25em;
+ font-style: italic;
+}
+.page .site-header .header-info,
+.page .site-header:after,
+.section .site-header .header-info,
+.section .site-header:after,
+.taxonomy .site-header .header-info,
+.taxonomy .site-header:after,
+.taxonomyTerm .site-header .header-info,
+.taxonomyTerm .site-header:after {
+ display: none;
+}
+.list {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column nowrap;
+ flex-flow: column nowrap;
+ margin: 0;
+ list-style: none;
+}
+.entry + .list-container .list {
+ margin-top: 2.5em;
+}
+.list-item {
+ margin-top: 1em;
+}
+.list-item:first-of-type {
+ margin-top: 0;
+}
+.list-item article {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+.list-item .meta {
+ -ms-flex-preferred-size: 6em;
+ flex-basis: 6em;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+}
+.list-item .meta span {
+ font-size: 0.875em;
+}
+.list-item .list-item-title {
+ font-size: 1em;
+ font-weight: 400;
+ margin-bottom: 0;
+}
+.list-item .icon {
+ margin-right: 0.25em;
+}
+.term-cloud {
+ list-style: none;
+ margin: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.term-cloud li {
+ padding: 0 1.5em 0.5em 0;
+}
+.entry .meta {
+ margin-top: 0.75em;
+}
+.entry .meta span {
+ font-size: 0.9375em;
+ margin-right: 0.75em;
+ font-style: italic;
+}
+.entry .meta .icon {
+ margin-right: 0.25em;
+}
+.entry-cover {
+ margin-top: 1.5em;
+ margin-bottom: 2.5em;
+}
+.entry-cover.cover-wide {
+ padding: 0;
+ max-width: 1080px;
+}
+.entry-cover.cover-full {
+ padding: 0;
+ max-width: 100%;
+}
+.entry-cover.cover-full img {
+ width: 100%;
+}
+.entry-cover img {
+ display: block;
+}
+.entry-cover figcaption {
+ margin: 0.25em auto 0;
+ text-align: center;
+}
+.entry-cover figcaption span {
+ font-size: 0.875em;
+}
+details,
+summary {
+ display: block;
+}
+.no-details details summary {
+ cursor: pointer;
+}
+.no-details details:not([open]) > :not(summary) {
+ display: none;
+}
+.no-details details > summary:before {
+ content: '\25BC';
+ display: inline-block;
+ margin-right: 0.25em;
+ -webkit-transition: 0.1s;
+ transition: 0.1s;
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+.no-details details[open] > summary:before {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+}
+.entry-toc {
+ margin-bottom: 2em;
+}
+.entry-toc .toc-title {
+ font-weight: 700;
+}
+.entry-toc nav {
+ margin-top: 0.25em;
+}
+.entry-toc ul {
+ list-style: none;
+ margin: 0;
+}
+.entry-content > :last-child,
+.entry-content > :last-child > :last-child {
+ margin-bottom: 0;
+}
+.entry-content a {
+ border-bottom: 0.125em dashed #bdbdbd;
+}
+.entry-content a:active,
+.entry-content a:focus,
+.entry-content a:hover {
+ border-bottom-color: #ffcd00;
+}
+.entry-content a.footnote-return {
+ border-bottom: none;
+}
+.entry-footer > div {
+ margin-top: 0.5em;
+}
+.entry-footer > div:first-child {
+ margin-top: 2.5em;
+}
+.entry-footer .taxonomyTerm-icon {
+ margin-right: 0.375em;
+}
+.comments-container #disqus_thread:before {
+ border-bottom-color: #bdbdbd;
+}
+._404 .gopher {
+ margin: 0;
+}
+._404 .gopher img {
+ width: 17.5em;
+ margin-bottom: 1.5em;
+}
+._404 .gopher a {
+ border: 0;
+}
+._404 .gopher .title {
+ margin-bottom: 0;
+}
+.entry + .home-sections-container .home-sections:before {
+ border-bottom-color: #bdbdbd;
+}
+.home-section .list {
+ padding: 0;
+}
+.home-section-title {
+ margin-bottom: 1em;
+}
+.footer a {
+ font-style: italic;
+}
+.footer > div {
+ width: 100%;
+ margin-top: 1em;
+}
+.footer > div:first-child {
+ margin-top: 0;
+}
+.footer > div:last-child {
+ margin-bottom: 2em;
+}
+.icon {
+ stroke: currentColor;
+ fill: none;
+ position: relative;
+ top: 2px;
+}
+.align-center {
+ text-align: center;
+}
+.align-center > blockquote {
+ display: inline-block;
+}
+.align-center > ol,
+.align-center > ul {
+ display: inline-block;
+ text-align: initial;
+}
+.align-center li {
+ word-wrap: normal;
+}
+.text-shortcode * {
+ color: inherit;
+ font-size: 1em;
+}
+.screen-reader {
+ clip: rect(1px, 1px, 1px, 1px);
+ width: 1px;
+ height: 1px;
+ overflow: hidden !important;
+ position: fixed !important;
+ white-space: nowrap !important;
+ word-wrap: normal !important;
+}
+.screen-reader:focus {
+ clip: auto !important;
+ width: auto;
+ height: auto;
+ display: block !important;
+ top: 0.5em;
+ left: 0.5em;
+ font-weight: 700 !important;
+ line-height: normal !important;
+ text-decoration: none !important;
+ border-radius: 0.25em !important;
+ padding: 1em !important;
+ color: #fafafa !important;
+ background-color: #212121 !important;
+ z-index: 99999;
+}
+.entry-content ol li {
+ margin: 0.5em 0em;
+}
+
+.author-container::before {
+ content: '— ';
+}
+
+.author-container {
+ text-decoration: underline;
+ text-decoration-style: dashed;
+}
+
+.author:hover,
+.tag:hover {
+ text-decoration: underline;
+ text-decoration-style: dashed;
+}
diff --git a/src/components/partials/Icon.js b/src/components/partials/Icon.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+function Icon({ link, SVG, text }) {
+ return (
+ <a href={link} target="_blank" rel="noopener noreferrer">
+ <span className="screen-reader">{text}</span>
+ <SVG />
+ </a>
+ );
+}
+
+export default Icon;
diff --git a/src/components/partials/SVGIcon.js b/src/components/partials/SVGIcon.js
@@ -0,0 +1,145 @@
+import React from 'react';
+
+export function CalendarSVG() {
+ return (
+ <svg
+ className="icon"
+ viewBox="0 0 24 24"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ aria-hidden="true"
+ >
+ <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+ <line x1="16" y1="2" x2="16" y2="6"></line>
+ <line x1="8" y1="2" x2="8" y2="6"></line>
+ <line x1="3" y1="10" x2="21" y2="10"></line>
+ </svg>
+ );
+}
+
+export function CategorySVG() {
+ return (
+ <svg
+ className="icon"
+ viewBox="0 0 24 24"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ aria-hidden="true"
+ >
+ <path d="M22,19a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V5A2,2,0,0,1,4,3H9l2,3h9a2,2,0,0,1,2,2Z"></path>
+ </svg>
+ );
+}
+
+export function EmailSVG() {
+ return (
+ <svg
+ className="icon"
+ viewBox="0 0 24 24"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ aria-hidden="true"
+ >
+ <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+ <polyline points="22,6 12,13 2,6"></polyline>
+ </svg>
+ );
+}
+
+export function GitHubSVG() {
+ return (
+ <svg
+ className="icon"
+ viewBox="0 0 24 24"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ aria-hidden="true"
+ >
+ <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+ </svg>
+ );
+}
+
+export function InstagramSVG() {
+ return (
+ <svg
+ className="icon"
+ viewBox="0 0 24 24"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ aria-hidden="true"
+ >
+ <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
+ <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
+ <line x1="17.5" y1="6.5" x2="17.5" y2="6.5"></line>
+ </svg>
+ );
+}
+
+export function NextSVG() {
+ return (
+ <svg
+ className="icon"
+ viewBox="0 0 24 24"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ aria-hidden="true"
+ >
+ <line x1="4" y1="12" x2="20" y2="12"></line>
+ <polyline points="14 6 20 12 14 18"></polyline>
+ </svg>
+ );
+}
+
+export function PrevSVG() {
+ return (
+ <svg
+ className="icon"
+ viewBox="0 0 24 24"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ aria-hidden="true"
+ >
+ <line x1="20" y1="12" x2="4" y2="12"></line>
+ <polyline points="10 18 4 12 10 6"></polyline>
+ </svg>
+ );
+}
+
+export function TagSVG() {
+ return (
+ <svg
+ className="icon"
+ viewBox="0 0 24 24"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ aria-hidden="true"
+ >
+ <path d="M20.59,13.41l-7.17,7.17a2,2,0,0,1-2.83,0L2,12V2H12l8.59,8.59A2,2,0,0,1,20.59,13.41Z"></path>
+ <line x1="7" y1="7" x2="7" y2="7"></line>
+ </svg>
+ );
+}
+
+export function TwitterSVG() {
+ return (
+ <svg
+ className="icon"
+ viewBox="0 0 24 24"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ aria-hidden="true"
+ >
+ <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
+ </svg>
+ );
+}
diff --git a/src/components/seo.js b/src/components/seo.js
@@ -0,0 +1,95 @@
+/**
+ * SEO component that queries for data with
+ * Gatsby's useStaticQuery React hook
+ *
+ * See: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+/* eslint-disable eqeqeq */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import { useStaticQuery, graphql } from 'gatsby';
+
+function SEO({ blog = false, description, lang, path, tags, title }) {
+ const { site } = useStaticQuery(
+ graphql`
+ query {
+ site {
+ siteMetadata {
+ author
+ description
+ siteName
+ siteUrl
+ title
+ username
+ }
+ }
+ }
+ `
+ );
+
+ const metaDescription = description || site.siteMetadata.description;
+ const type = blog ? 'article' : 'website';
+ return (
+ <Helmet
+ htmlAttributes={{
+ lang,
+ }}
+ title={title}
+ titleTemplate={`%s • ${site.siteMetadata.title}`}
+ >
+ <meta name="description" content={metaDescription} />
+ <meta property="og:site_name" content={site.siteMetadata.siteName} />
+ <meta property="og:type" content={type} />
+ <meta property="og:title" content={title} />
+ <meta property="og:description" content={metaDescription} />
+ {blog && path ? (
+ <meta
+ property="og:url"
+ content={`${site.siteMetadata.siteUrl}/post${path}`}
+ />
+ ) : (
+ <meta property="og:url" content={`${site.siteMetadata.siteUrl}`} />
+ )}
+ {blog &&
+ tags.length &&
+ tags.map(tag => (
+ <meta property="article:tag" content={tag} key={tag} />
+ ))}
+ <meta name="twitter:title" content={title} />
+ <meta name="twitter:description" content={metaDescription} />
+ {path ? (
+ <meta
+ name="twitter:url"
+ content={`${site.siteMetadata.siteUrl}/post${path}`}
+ />
+ ) : (
+ <meta name="twitter:url" content={`${site.siteMetadata.siteUrl}`} />
+ )}
+ {blog && <meta name="twitter:label1" content="Written by" />}
+ {blog && <meta name="twitter:data1" content={site.siteMetadata.author} />}
+ {blog && tags.length && (
+ <meta name="twitter:label2" content="Filed under" />
+ )}
+ {blog && tags.length && (
+ <meta name="twitter:data2" content={tags.join(', ')} />
+ )}
+ </Helmet>
+ );
+}
+
+SEO.defaultProps = {
+ lang: 'en',
+ meta: [],
+ description: '',
+};
+
+SEO.propTypes = {
+ description: PropTypes.string,
+ lang: PropTypes.string,
+ meta: PropTypes.arrayOf(PropTypes.object),
+ title: PropTypes.string.isRequired,
+};
+
+export default SEO;
diff --git a/src/images/gatsby-icon.png b/src/images/gatsby-icon.png
Binary files differ.
diff --git a/src/pages/404.js b/src/pages/404.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+function NotFoundPage() {
+ return (
+ <Layout heading="404: Not found. Ok">
+ <SEO title="404: Not found" />
+ <article class="entry" lang="en">
+ <div className="entry-content">
+ <blockquote>
+ <em>
+ <p>
+ [The roads] moved with the land, you know? It rose, it fell, it
+ curved.
+ <br />
+ Cars didn't drive on it to make great time.
+ <br />
+ They drove on it to have a great time.
+ </p>
+ </em>
+ </blockquote>
+ — Sally Carrera, <em>Cars (2006)</em>
+ </div>
+ </article>
+ </Layout>
+ );
+}
+
+export default NotFoundPage;
diff --git a/src/pages/about.js b/src/pages/about.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+function About() {
+ return (
+ <Layout heading="About" slug="about">
+ <SEO title="About" />
+ <article class="entry" lang="en">
+ <div className="entry-content">
+ <p>
+ Hi, I’m Agastya. I go by the name <em>acagastya</em> across the
+ internet.
+ </p>
+ <p>
+ I remember vividly how deeply quotes would affect me during my
+ teenage life. As the life priorities changed, I couldn't remember
+ most of it, but it is awe-inspiring for me. And here is my pick!
+ </p>
+ </div>
+ </article>
+ </Layout>
+ );
+}
+
+export default About;
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Link, graphql } from 'gatsby';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+function IndexPage({ data }) {
+ const { edges } = data.allMarkdownRemark;
+ return (
+ <Layout>
+ <SEO title="Home" />
+ <div className="home-sections-container">
+ <div className="home-sections">
+ <section id="recent-posts" className="home-section">
+ <header>
+ <h2 className="home-section-title title">Quotes</h2>
+ </header>
+ <div className="list-container">
+ <ul className="list">
+ {edges.map(edge => {
+ const { author, path, title } = edge.node.frontmatter;
+ return (
+ <li className="list-item" key={path}>
+ <article>
+ <div className="meta">
+ <span>
+ <span className="screen-reader">Quote by </span>
+ <span>
+ <Link to={`/authors/${author}`}>{author}</Link>
+ </span>
+ </span>
+ </div>
+ <header className="list-item-header">
+ <h3 className="list-item-title">
+ <Link to={'/post/' + path}>{title}</Link>
+ </h3>
+ </header>
+ </article>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ </section>
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+export const query = graphql`
+ query HomePageQuery {
+ allMarkdownRemark(
+ sort: { order: DESC, fields: [frontmatter___date] }
+ filter: { frontmatter: { draft: { ne: true } } }
+ ) {
+ edges {
+ node {
+ frontmatter {
+ author
+ path
+ title
+ }
+ }
+ }
+ }
+ }
+`;
+
+export default IndexPage;
diff --git a/src/pages/post.js b/src/pages/post.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Link, graphql } from 'gatsby';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+function Blog({ data }) {
+ const { edges } = data.allMarkdownRemark;
+ return (
+ <Layout heading="Quotes" slug="post">
+ <SEO title="Quotes" />
+ <div className="home-sections-container">
+ <div className="home-sections">
+ <section id="recent-posts" className="home-section">
+ <div className="list-container">
+ <ul className="list">
+ {edges.map(edge => {
+ const { author, path, title } = edge.node.frontmatter;
+ return (
+ <li className="list-item" key={path}>
+ <article>
+ <div className="meta">
+ <span>
+ <span className="screen-reader">Quote by </span>
+ <Link to={`/authors/${author}`}>{author}</Link>
+ </span>
+ </div>
+ <header className="list-item-header">
+ <h3 className="list-item-title">
+ <Link to={'/post/' + path}>{title}</Link>
+ </h3>
+ </header>
+ </article>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ </section>
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+export const query = graphql`
+ query {
+ allMarkdownRemark(
+ sort: { order: DESC, fields: [frontmatter___date] }
+ filter: { frontmatter: { draft: { ne: true } } }
+ ) {
+ edges {
+ node {
+ frontmatter {
+ author
+ path
+ title
+ }
+ }
+ }
+ }
+ }
+`;
+
+export default Blog;
diff --git a/src/pages/random.js b/src/pages/random.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Link, graphql } from 'gatsby';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+function RandomQuotePage({ data }) {
+ const { edges } = data.allMarkdownRemark;
+ const rnd = Math.floor(Math.random() * edges.length);
+ const { author, path, title } = edges[rnd].node.frontmatter;
+
+ return (
+ <Layout>
+ <SEO title="Random Quote" />
+ <div className="home-sections-container">
+ <div className="home-sections">
+ <section id="recent-posts" className="home-section">
+ <header>
+ <h2 className="home-section-title title">Random Quote</h2>
+ </header>
+ <div className="list-container">
+ <ul className="list">
+ <article>
+ <header className="list-item-header">
+ <h3 className="list-item-title">
+ <em>
+ <Link to={'/post/' + path}>{title}</Link>
+ </em>
+ </h3>
+ <div className="meta">
+ <span>
+ <span className="screen-reader">Quote by </span>
+ <span className="author-container">
+ <Link to={`/author/${author}`}>{author}</Link>
+ </span>
+ </span>
+ </div>
+ </header>
+ </article>
+ </ul>
+ </div>
+ </section>
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+export const query = graphql`
+ query RandomQuoteQuery {
+ allMarkdownRemark(
+ sort: { order: DESC, fields: [frontmatter___date] }
+ filter: { frontmatter: { draft: { ne: true } } }
+ ) {
+ edges {
+ node {
+ frontmatter {
+ author
+ path
+ title
+ }
+ }
+ }
+ }
+ }
+`;
+
+export default RandomQuotePage;
diff --git a/src/templates/SingleCatTemplate.js b/src/templates/SingleCatTemplate.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+function SingleCatTemplate({ pageContext }) {
+ const { posts, cat } = pageContext;
+ return (
+ <Layout heading={`Author: ${cat}`} link="/authors" slug="authors">
+ <SEO title={`Author: ${cat}`} />
+ <div className="list-container">
+ <ul className="list">
+ {posts.map(post => {
+ const { author, path, title } = post.frontmatter;
+ return (
+ <li key={path} className="list-item">
+ <article>
+ <div className="meta">
+ <span>
+ <span className="screen-reader">Quote by </span>
+ <span>
+ <Link to={`/authors/${author}`}>{author}</Link>
+ </span>
+ </span>
+ </div>
+ <header className="list-item-header">
+ <h3 className="list-item-title">
+ <Link to={`/post/${path}`}>{title}</Link>
+ </h3>
+ </header>
+ </article>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ </Layout>
+ );
+}
+
+export default SingleCatTemplate;
diff --git a/src/templates/allCatsTemplate.js b/src/templates/allCatsTemplate.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+function AllCatsTemplate({ pageContext }) {
+ const { postsByCat, cats } = pageContext;
+ const count = Object.values(postsByCat).map(el => el.length);
+ const [max, min] = [Math.max(...count), Math.min(...count)];
+ return (
+ <Layout heading="Authors" slug="authors">
+ <SEO title="Authors" />
+ <div className="term-cloud-container">
+ <ul className="term-cloud">
+ {cats.map(cat => {
+ const numerator = postsByCat[cat].length - min;
+ const denominator = max - min;
+ const num = denominator ? numerator / denominator : 1;
+ const weight = 100 * Math.round((2 * numerator) / denominator + 3);
+ return (
+ <li key={cat}>
+ <Link
+ to={`/authors/${cat}`}
+ style={{ fontSize: `${1 + num}em`, fontWeight: `${weight}` }}
+ >
+ {cat}
+ </Link>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ </Layout>
+ );
+}
+
+export default AllCatsTemplate;
diff --git a/src/templates/allTagsTemplate.js b/src/templates/allTagsTemplate.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+function AllTagsTemplate({ pageContext }) {
+ const { postsByTag, tags } = pageContext;
+ const count = Object.values(postsByTag).map(el => el.length);
+ const [max, min] = [Math.max(...count), Math.min(...count)];
+ return (
+ <Layout heading="Tags" slug="tags">
+ <SEO title="Tags" />
+ <div className="term-cloud-container">
+ <ul className="term-cloud">
+ {tags.map(tag => {
+ const numerator = postsByTag[tag].length - min;
+ const denominator = max - min;
+ const num = denominator ? numerator / denominator : 1;
+ const weight = 100 * Math.round((2 * numerator) / denominator + 3);
+ return (
+ <li key={tag}>
+ <Link
+ to={`/tags/${tag}`}
+ style={{ fontSize: `${1 + num}em`, fontWeight: `${weight}` }}
+ >
+ {tag}
+ </Link>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ </Layout>
+ );
+}
+
+export default AllTagsTemplate;
diff --git a/src/templates/blogPost.js b/src/templates/blogPost.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import { graphql, Link } from 'gatsby';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+import { CategorySVG, TagSVG } from '../components/partials/SVGIcon';
+
+function Template({ data }) {
+ const { markdownRemark } = data;
+ const { frontmatter, html } = markdownRemark;
+ const { author, lang = 'en', path, tags, title } = frontmatter;
+ return (
+ <Layout showHeader={false} heading={title}>
+ <SEO blog={true} path={path} tags={tags} title={title} />
+ <Article
+ author={author}
+ html={html}
+ lang={lang}
+ tags={tags}
+ title={title}
+ />
+ </Layout>
+ );
+}
+
+export const query = graphql`
+ query($pathSlug: String!) {
+ markdownRemark(frontmatter: { path: { eq: $pathSlug } }) {
+ html
+ frontmatter {
+ author
+ lang
+ path
+ tags
+ title
+ }
+ }
+ }
+`;
+
+function Article({ author, html, lang, tags }) {
+ return (
+ <article lang={lang} className="entry">
+ <div
+ className="entry-content"
+ dangerouslySetInnerHTML={{ __html: html }}
+ />
+ <Footer author={author} tags={tags} />
+ </article>
+ );
+}
+
+function Footer({ author, tags }) {
+ return (
+ <footer className="entry-footer-container">
+ <div className="entry-footer">
+ <div className="categories">
+ <span className="taxonomyTerm-icon">
+ <CategorySVG />
+ </span>
+ <span className="screen-reader">Author: </span>
+ <Link className="author" to={`/authors/${author}`}>
+ {author}
+ </Link>
+ </div>
+ {tags.length ? (
+ <div className="tags">
+ <span className="taxonomyTerm-icon">
+ <TagSVG />
+ </span>
+ <span className="screen-reader">Tags: </span>
+ {tags.map((tag, index) => {
+ return (
+ <React.Fragment key={tag}>
+ <Link className="tag" to={`/tags/${tag}`}>
+ {tag}
+ </Link>
+ {index < tags.length - 1 ? ', ' : ' '}
+ </React.Fragment>
+ );
+ })}
+ </div>
+ ) : null}
+ </div>
+ </footer>
+ );
+}
+
+export default Template;
diff --git a/src/templates/singleTagTemplate.js b/src/templates/singleTagTemplate.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+function SingleTagTemplate({ pageContext }) {
+ const { posts, tag } = pageContext;
+ return (
+ <Layout heading={`Tag: ${tag}`} link="/tags" slug="tag">
+ <SEO title={`Tag: ${tag}`} />
+ <div className="list-container">
+ <ul className="list">
+ {posts.map(post => {
+ const { author, path, title } = post.frontmatter;
+ return (
+ <li key={path} className="list-item">
+ <article>
+ <div className="meta">
+ <span>
+ <span className="screen-reader">Quote by </span>
+ <span>
+ <Link to={`/authors/${author}`}>{author}</Link>
+ </span>
+ </span>
+ </div>
+ <header className="list-item-header">
+ <h3 className="list-item-title">
+ <Link to={`/post/${path}`}>{title}</Link>
+ </h3>
+ </header>
+ </article>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ </Layout>
+ );
+}
+
+export default SingleTagTemplate;
diff --git a/todo b/todo
@@ -0,0 +1,5 @@
+IEEE 754
+Scaling
+Birthday problem
+Eight ball problem
+Vertex cover
+\ No newline at end of file
