sana137.in

Sana's gatsbyjs-based blog
git clone http://git.hanabi.in/repos/sana137.in.git
Log | Files | Refs | README | LICENSE

commit 856b5ffb0c1748a4449ee036e737d75896c89463
parent c57b5e0d5ab65181b8338608873c1195b7b4f619
Author: Agastya Chandrakant <me@hanabi.in>
Date:   Wed,  4 Sep 2019 05:31:07 +0530

All but tiny headers are done

Diffstat:
Mgatsby-config.js | 66++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
Mgatsby-node.js | 83+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----
Mpackage.json | 1+
Msrc/blogs/08-08-2019-zealots-against-zomato/index.md | 4+++-
Msrc/blogs/bar/index.md | 3++-
Asrc/blogs/baz/index.md | 10++++++++++
Msrc/blogs/foo/index.md | 1+
Dsrc/components/blogPost.js | 8--------
Msrc/components/footer.js | 58+++++++++++++++++-----------------------------------------
Msrc/components/hanabi.screen.css | 8++++----
Msrc/components/header.js | 44++++++++++++++++++--------------------------
Msrc/components/layout.css | 625+------------------------------------------------------------------------------
Msrc/components/layout.js | 62+++++++++++++++++---------------------------------------------
Dsrc/images/gatsby-astronaut.png | 0
Msrc/pages/index.js | 116++++++++++++++++++++++++++++++++++++++++---------------------------------------
Asrc/templates/allTagsIndex.js | 38++++++++++++++++++++++++++++++++++++++
Asrc/templates/blogPost.js | 183+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/templates/singleTagIndex.js | 62++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
18 files changed, 559 insertions(+), 813 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js @@ -1,10 +1,12 @@ module.exports = { siteMetadata: { - title: `Sanaa’s stories`, - description: `Hi, I am Sanā!`, author: `@SanaHabeeb4`, + description: `Hi, I am Sanā!`, + headerImg: `https://images.unsplash.com/photo-1536633125620-8a3245c11ffa`, name: `Sanā Habeeb`, photo: `https://pbs.twimg.com/profile_images/1116312044951744512/z9hsCRB7_400x400.jpg`, + siteUrl: `http://sana137.in`, + title: `Sanaa’s stories`, }, plugins: [ `gatsby-transformer-remark`, @@ -37,6 +39,66 @@ module.exports = { icon: `src/images/sunflower.png`, // This path is relative to the root of the site. }, }, + // rss + { + resolve: `gatsby-plugin-feed`, + options: { + query: ` + { + site { + siteMetadata { + title + description + siteUrl + site_url: siteUrl + } + } + } + `, + feeds: [ + { + serialize: ({ query: { site, allMarkdownRemark } }) => { + return allMarkdownRemark.edges.map(edge => { + return Object.assign({}, edge.node.frontmatter, { + description: edge.node.frontmatter.excerpt, + date: edge.node.frontmatter.date, + url: site.siteMetadata.siteUrl + edge.node.frontmatter.path, + guid: site.siteMetadata.siteUrl + edge.node.frontmatter.path, + custom_elements: [{ 'content:encoded': edge.node.html }], + }); + }); + }, + query: ` + { + allMarkdownRemark( + sort: { order: DESC, fields: [frontmatter___date] }, + ) { + edges { + node { + html + frontmatter { + date + excerpt + path + title + } + } + } + } + } + `, + output: '/rss.xml', + title: "Your Site's RSS Feed", + // optional configuration to insert feed reference in pages: + // if `string` is used, it will be used to create RegExp and then test if pathname of + // current page satisfied this regular expression; + // if not provided or `undefined`, all pages will have feed reference inserted + match: '^/blog/', + }, + ], + }, + }, + // rss end // this (optional) plugin enables Progressive Web App + Offline functionality // To learn more, visit: https://gatsby.dev/offline // `gatsby-plugin-offline`, diff --git a/gatsby-node.js b/gatsby-node.js @@ -1,18 +1,75 @@ const path = require('path'); +const createTagPages = (createPage, posts) => { + const allTagsIndexTemplate = path.resolve('src/templates/allTagsIndex.js'); + const singleTagIndexTemplate = path.resolve( + 'src/templates/singleTagIndex.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: allTagsIndexTemplate, + context: { + tags: tags.sort(), + }, + }); + + tags.forEach(tag => { + const posts = postsByTag[tag]; + + createPage({ + path: `/tags/${tag}`, + component: singleTagIndexTemplate, + context: { + posts, + tag, + }, + }); + }); +}; + exports.createPages = ({ graphql, actions }) => { const { createPage } = actions; return new Promise((resolve, reject) => { - const BlogPostTemplate = path.resolve('src/components/blogPost.js'); + const BlogPostTemplate = path.resolve('src/templates/blogPost.js'); resolve( graphql( ` query { - allMarkdownRemark { + site { + siteMetadata { + author + description + name + photo + } + } + allMarkdownRemark( + sort: { order: ASC, fields: [frontmatter___date] } + ) { edges { node { frontmatter { + cover + date + excerpt path + tags + title } } } @@ -20,15 +77,33 @@ exports.createPages = ({ graphql, actions }) => { } ` ).then(result => { - result.data.allMarkdownRemark.edges.forEach(({ node }) => { + const { + author, + description, + name, + photo, + } = result.data.site.siteMetadata; + const posts = result.data.allMarkdownRemark.edges; + createTagPages(createPage, posts); + + posts.forEach(({ node }, index) => { createPage({ path: node.frontmatter.path, component: BlogPostTemplate, context: { + author, + cover: node.frontmatter.cover, + date: node.frontmatter.date, + description, + name, + next: index === posts.length - 1 ? null : posts[index + 1].node, pathSlug: node.frontmatter.path, + photo, + prev: index === 0 ? null : posts[index - 1].node, + tags: node.frontmatter.tags, }, }); - resolve; + resolve(); }); }) ); diff --git a/package.json b/package.json @@ -6,6 +6,7 @@ "dependencies": { "gatsby": "^2.13.73", "gatsby-image": "^2.2.10", + "gatsby-plugin-feed": "^2.3.11", "gatsby-plugin-manifest": "^2.2.6", "gatsby-plugin-offline": "^2.2.7", "gatsby-plugin-react-helmet": "^3.1.4", diff --git a/src/blogs/08-08-2019-zealots-against-zomato/index.md b/src/blogs/08-08-2019-zealots-against-zomato/index.md @@ -4,7 +4,7 @@ date: '2019-08-08' title: 'Zealots against Zomato' tags: ['religion', 'food', 'discrimination', 'zomato', 'faith'] cover: 'https://images.unsplash.com/photo-1526367790999-0150786686a2' -excerpt: 'Zeal' +excerpt: "I can't justify someone's request to not have a particular person as the SPL because she is of a particular religion. Judging here on the..." --- I can't justify someone's request to not have a particular person as the SPL because she is of a particular religion. Judging here on the basis of the faith they hold is not the right criterion because that will have no effect on what services you expect from them. Just like letting someone not be a doctor because they are fat, or not hiring a driver who wakes up in the middle of the night, strap up for a while and goes back to sleep. @@ -16,3 +16,5 @@ But if I have to guess why he might have done that, maybe ignorance, he probably Or maybe he dislikes the practices that a general Muslim would do and thus, was not ready to accept services from them, but maybe ignore or not make an effort to know if the other services that he had been getting are from a Muslim. But none of the guesses that I made are valid enough for him to put up a request like that. + +--- diff --git a/src/blogs/bar/index.md b/src/blogs/bar/index.md @@ -4,6 +4,7 @@ date: '2019-07-07' title: 'bar bar bar' tags: ['religion', 'bar', 'foo'] cover: 'https://upload.wikimedia.org/wikipedia/commons/f/f9/深圳公交M375路K9.jpg' +excerpt: 'Once there was a bar' --- -bar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar bar +bar diff --git a/src/blogs/baz/index.md b/src/blogs/baz/index.md @@ -0,0 +1,10 @@ +--- +path: '/baz' +date: '2019-06-08' +title: 'baz baz baz' +tags: ['zomato', 'foo'] +cover: 'https://upload.wikimedia.org/wikipedia/commons/e/e2/F-22_Raptor_edit1.jpg' +excerpt: 'Do you know what a "baz" is?' +--- + +baz baz baz diff --git a/src/blogs/foo/index.md b/src/blogs/foo/index.md @@ -4,6 +4,7 @@ date: '2019-07-08' title: 'foo foo foo' tags: ['religion', 'food', 'zomato', 'foo'] cover: 'https://upload.wikimedia.org/wikipedia/commons/e/e2/F-22_Raptor_edit1.jpg' +excerpt: 'Foo fighters! Rawr!' --- foo foo foo diff --git a/src/components/blogPost.js b/src/components/blogPost.js @@ -1,8 +0,0 @@ -import React from 'react'; -// import { graphql } from 'gatsby'; - -const BlogPostTemplate = props => { - return <div>foo bar</div>; -}; - -export default BlogPostTemplate; diff --git a/src/components/footer.js b/src/components/footer.js @@ -3,7 +3,10 @@ import PropTypes from 'prop-types'; import React from 'react'; const Footer = ({ name, author }) => ( - <footer style={{ background: `#323330` }}> + <footer + // style={{ background: `#323330` }} + className={'site-footer outer'} + > <div // style={{ // color: `#fff`, @@ -13,24 +16,21 @@ const Footer = ({ name, author }) => ( // padding: `1.45rem 1.0875rem`, // verticalAlign: `middle`, // }} - style={{ - ...siteFooterContent, - ...inner, - fontSize: '13px', - margin: `0 auto`, - padding: `1.45rem 0`, - }} + // style={{ + // ...siteFooterContent, + // ...inner, + // fontSize: '13px', + // margin: `0 auto`, + // padding: `1.45rem 0`, + // }} + className={'site-footer-content inner'} > - <section className="copyright"> - <a href={`https://www.twitter.com/${author}`} style={links}> - {name} - </a>{' '} - © {new Date().getFullYear()} + <section className={'copyright'}> + <a href={`https://www.twitter.com/${author}`}>{name}</a> ©{' '} + {new Date().getFullYear()} </section> - <nav style={siteFooterNav}> - <Link style={links} to="/"> - Latest Posts - </Link> + <nav className={'site-footer-nav'}> + <Link to="/">Latest Posts</Link> </nav> </div> </footer> @@ -47,27 +47,3 @@ Footer.defaultProps = { }; export default Footer; - -const inner = { - margin: `0 auto`, - maxWidth: `960px`, - width: `100%`, -}; - -const siteFooterContent = { - alignItems: `center`, - color: `rgba(255, 255, 255, 0.7)`, - display: `flex`, - flexWrap: `wrap`, - fontSize: `1.3rem`, - justifyContent: `space-between`, -}; - -const siteFooterNav = { - display: `flex`, -}; - -const links = { - color: `#fff`, - textDecoration: `none`, -}; diff --git a/src/components/hanabi.screen.css b/src/components/hanabi.screen.css @@ -110,7 +110,7 @@ body { padding-top: 12px; padding-bottom: 12px; color: #fff; - background: color(var(--darkgrey) l(-5%)) no-repeat center center; + background: #090a0b no-repeat 50%; background-size: cover; } @@ -1356,7 +1356,7 @@ Usage (In Ghost editor): .author-card-button { display: block; padding: 9px 16px; - border: color(var(--midgrey) l(+20%)) 1px solid; + border: #aebbc1 1px solid; color: var(--midgrey); font-size: 1.2rem; line-height: 1; @@ -1879,7 +1879,7 @@ Usage (In Ghost editor): } .post-template .post-content > p:first-child { - font-size: 1.25em; + /* font-size: 1.25em; */ line-height: 1.5em; } @@ -2257,7 +2257,7 @@ Usage (In Ghost editor): padding-top: 20px; padding-bottom: 60px; color: #fff; - background: color(var(--darkgrey) l(-15%)); + background: #000; } .site-footer-content { diff --git a/src/components/header.js b/src/components/header.js @@ -1,35 +1,27 @@ -import { Link } from 'gatsby'; import PropTypes from 'prop-types'; import React from 'react'; -const Header = ({ siteTitle, description }) => ( - <header style={{ background: `#F0DB4F`, marginBottom: `1.45rem` }}> - <div +const Header = ({ siteTitle, description, headerImg }) => { + return ( + <header style={{ - margin: `0 auto`, - maxWidth: 960, - // padding: `1.45rem 1.0875rem`, - padding: `1.45rem 0`, + backgroundColor: `#FFDD3D`, + backgroundImage: `url(${headerImg})`, }} + className={'site-header outer'} > - <h1 style={{ margin: 0 }}> - <Link - to="/" - style={{ - color: `#323330`, - textDecoration: `none`, - }} - > - {siteTitle} - </Link> - </h1> - <br /> - <h4 style={{ color: 'rgba(0, 0, 0, 0.7)', marginBottom: 0 }}> - {description} - </h4> - </div> - </header> -); + <div className={'inner'}> + <div className={'site-header-content'}> + <h1 style={{ margin: 0 }} className={'site-title'}> + {siteTitle} + </h1> + <br /> + <h2 className={'site-description'}>{description}</h2> + </div> + </div> + </header> + ); +}; Header.propTypes = { siteTitle: PropTypes.string, diff --git a/src/components/layout.css b/src/components/layout.css @@ -1,624 +1 @@ -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-size: 112.5%/1.45em; - 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-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-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: help; -} -acronym { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; -} -abbr[title] { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; - 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%; - } -} +@import 'hanabi.screen.css'; diff --git a/src/components/layout.js b/src/components/layout.js @@ -12,6 +12,7 @@ import { useStaticQuery, graphql } from 'gatsby'; import Header from './header'; import Footer from './footer'; import './layout.css'; + const Layout = ({ children }) => { const { site } = useStaticQuery(graphql` query SiteTitleQuery { @@ -19,6 +20,7 @@ const Layout = ({ children }) => { siteMetadata { author description + headerImg name title } @@ -27,29 +29,22 @@ const Layout = ({ children }) => { `); return ( - <div - style={{ - background: `#f1f1f1`, - }} - > - <Header - siteTitle={site.siteMetadata.title} - description={site.siteMetadata.description} - /> - <div - style={{ - ...siteMain, - ...outer, - minHeight: `75vh`, - }} - > - <main style={inner}>{children}</main> + <div className={'home-template'}> + <div className={'site-wrapper'}> + <Header + siteTitle={site.siteMetadata.title} + description={site.siteMetadata.description} + headerImg={site.siteMetadata.headerImg} + /> + <main className={'site-main outer'} id={'site-main'}> + {children} + </main> + <Footer + author={site.siteMetadata.author} + name={site.siteMetadata.name} + className={'site-footer outer'} + /> </div> - <Footer - author={site.siteMetadata.author} - name={site.siteMetadata.name} - style={{ ...siteFooter, ...outer }} - /> </div> ); }; @@ -59,26 +54,3 @@ Layout.propTypes = { }; export default Layout; - -const inner = { - margin: `0 auto`, - maxWidth: `960px`, - width: `100%`, -}; - -const outer = { - padding: `0 4vw`, - position: `relative`, -}; - -const siteFooter = { - color: `white`, - paddingBottom: `60px`, - paddingTop: `20px`, - position: `relative`, -}; - -const siteMain = { - flexGrow: `1`, - zIndex: `100`, -}; diff --git a/src/images/gatsby-astronaut.png b/src/images/gatsby-astronaut.png Binary files differ. diff --git a/src/pages/index.js b/src/pages/index.js @@ -4,9 +4,6 @@ import Layout from '../components/layout'; import SEO from '../components/seo'; import { graphql, Link } from 'gatsby'; -import '../components/hanabi.global.css'; -import '../components/hanabi.screen.css'; - export const query = graphql` query BlogPostList { site { @@ -18,7 +15,6 @@ export const query = graphql` } allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) { nodes { - excerpt timeToRead } edges { @@ -26,6 +22,7 @@ export const query = graphql` frontmatter { cover date + excerpt path tags title @@ -44,60 +41,65 @@ export default function IndexPage(props) { return ( <Layout> <SEO title="Home" /> - <div className={'post-feed'}> - {edges.map((edge, index) => { - const { frontmatter } = edge.node; - const publishDate = new Date(frontmatter.date).toDateString(); - const cover = frontmatter.cover; - return ( - <article className={'post-card'} key={frontmatter.path}> - <Link to={frontmatter.path} className={'post-card-image-link'}> - <div - className={'post-card-image'} - style={{ - backgroundImage: `url("${cover}")`, - }} - ></div> - </Link> - <div className={'post-card-content'}> - <Link - to={frontmatter.path} - className={'post-card-content-link'} - > - <header className="postCardHeader"> - <span className={'post-card-tags'}> - {frontmatter.tags ? frontmatter.tags[0] + ` • ` : ``}{' '} - {publishDate} - </span> - <h2 className={'post-card-title'}>{frontmatter.title}</h2> - </header> - <section className="postCardExcerpt"> - <p className={'excerpt'}>{edges[index].excerpt}</p> - </section> + <div className={'inner'}> + <div className={'post-feed'}> + {edges.map((edge, index) => { + const { frontmatter } = edge.node; + const publishDate = new Date(frontmatter.date).toDateString(); + const cover = frontmatter.cover; + return ( + <article className={'post-card'} key={frontmatter.path}> + <Link to={frontmatter.path} className={'post-card-image-link'}> + <div + className={'post-card-image'} + style={{ + backgroundImage: `url("${cover}")`, + }} + ></div> </Link> - <footer className={'post-card-meta'}> - <ul className={'author-list'}> - <li className={'author-list-item'}> - <a - href={`https://www.twitter.com/${twitterHandle}`} - className={'static-avatar'} - > - <img - src={photo} - className={'avatar-wrapper'} - alt={name} - /> - </a> - </li> - </ul> - <span className={'reading-time'}> - {edges[index].timeToRead} min read - </span> - </footer> - </div> - </article> - ); - })} + <div className={'post-card-content'}> + <Link + to={frontmatter.path} + className={'post-card-content-link'} + > + <header className="postCardHeader"> + <span className={'post-card-tags'}> + {frontmatter.tags ? frontmatter.tags[0] + ` • ` : ``}{' '} + {publishDate} + </span> + <h2 className={'post-card-title'}>{frontmatter.title}</h2> + </header> + <section className="postCardExcerpt"> + <p className={'excerpt'}> + {edges[index].node.frontmatter.excerpt} + </p> + </section> + </Link> + <footer className={'post-card-meta'}> + <ul className={'author-list'}> + <li className={'author-list-item'}> + <div className={'author-name-tooltip'}>{name}</div> + <a + href={`https://www.twitter.com/${twitterHandle}`} + className={'static-avatar'} + > + <img + src={photo} + className={'avatar-wrapper'} + alt={name} + /> + </a> + </li> + </ul> + <span className={'reading-time'}> + {edges[index].timeToRead} min read + </span> + </footer> + </div> + </article> + ); + })} + </div> </div> </Layout> ); diff --git a/src/templates/allTagsIndex.js b/src/templates/allTagsIndex.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { Link } from 'gatsby'; +import Footer from '../components/footer'; +import Header from '../components/header'; + +const AllTagsTemplate = ({ data, pageContext }) => { + const { tags } = pageContext; + return ( + <div className={'page-template page-tag'}> + <div className={'site-wrapper'}> + <Header /> + <main id={'site-main'} className={'site-main outer'}> + <div className={'inner'}> + <article className={'post-full post page no-image'}> + <header className={'post-full-header'}> + <h1 className={'post-full-title'}>#Tags</h1> + </header> + <section className={'post-full-content'}> + <div className={'post-content'}> + <ol> + {tags.map(tag => ( + <li style={{ textTransform: `capitalize` }} key={tag}> + <Link to={`/tags/${tag}`}>{tag.toLowerCase()}</Link> + </li> + ))} + </ol> + </div> + </section> + </article> + </div> + </main> + <Footer /> + </div> + </div> + ); +}; + +export default AllTagsTemplate; diff --git a/src/templates/blogPost.js b/src/templates/blogPost.js @@ -0,0 +1,183 @@ +import React from 'react'; +import { graphql, Link } from 'gatsby'; +import Footer from '../components/footer'; +import Header from '../components/header'; + +const BlogPostTemplate = ({ data, pageContext }) => { + const { + cover, + date, + description, + next, + prev, + tags, + author: twitterHandle, + name, + photo, + } = pageContext; + const tempTags = [...tags]; + const newTags = []; + while (tempTags.length > 1) { + let tag = tempTags.shift().toLowerCase(); + newTags.push( + <Link + to={`/tags/${tag}`} + style={{ textTransform: `capitalize` }} + key={tag} + > + {tag} + </Link> + ); + newTags.push(' • '); + } + let tag = tempTags.shift().toLowerCase(); + newTags.push( + <Link to={`/tags/${tag}`} style={{ textTransform: `capitalize` }} key={tag}> + {tag} + </Link> + ); + const title = data.markdownRemark.frontmatter.title; + const html = data.markdownRemark.html; + return ( + <div className={'post-template'}> + <div className={'site-wrapper'}> + <Header /> + <main id={'site-main'} className={'site-main outer'}> + <div className={'inner'}> + <article className={'post-full post'}> + <header className={'post-full-header'}> + <section className={'post-full-meta'}> + <time className={'post-full-meta-date'} dateTime={date}> + {new Date(date).toDateString()} + </time> + </section> + <h1 className={'post-full-title'}>{title}</h1> + <span>{newTags}</span> + </header> + <figure + className={'post-full-image'} + style={{ backgroundImage: `url(${cover})` }} + /> + <section className={'post-full-content'}> + <div + className={'post-content'} + dangerouslySetInnerHTML={{ __html: html }} + /> + </section> + <footer className={'post-full-footer'}> + <section className={'author-card'}> + <a + href={`https://www.twitter.com/${twitterHandle}`} + className={'author-profile-image'} + > + <img src={photo} className={'avatar-wrapper'} alt={name} /> + </a> + <section className={'author-card-content'}> + <h4 className={'author-card-name'}>{name}</h4> + <p>{description}</p> + </section> + </section> + <div className={'post-full-footer-right'}> + <Link to={'/'} className={'author-card-button'}> + Read More + </Link> + </div> + </footer> + </article> + </div> + </main> + <aside className={'read-next outer'}> + <div className={'inner'}> + <div className={'read-next-feed'}> + {next && ( + <article className={'post-card post'}> + <Link + className={'post-card-image-link'} + to={next.frontmatter.path} + > + <div + className={'post-card-image'} + style={{ + backgroundImage: `url(${next.frontmatter.cover})`, + }} + /> + </Link> + <div className={'post-card-content'}> + <Link + className={'post-card-content-link'} + to={next.frontmatter.path} + > + <header className={'post-card-header'}> + <span className={'post-card-tags'}> + {next.frontmatter.tags + ? next.frontmatter.tags[0] + ' • ' + : ''} + {new Date(next.frontmatter.date).toDateString()} + </span> + <h2 className={'post-card-title'}> + {next.frontmatter.title} + </h2> + </header> + <section className={'post-card-excerpt'}> + <p>{next.frontmatter.excerpt}</p> + </section> + </Link> + </div> + </article> + )} + {prev && ( + <article className={'post-card post'}> + <Link + className={'post-card-image-link'} + to={prev.frontmatter.path} + > + <div + className={'post-card-image'} + style={{ + backgroundImage: `url(${prev.frontmatter.cover})`, + }} + /> + </Link> + <div className={'post-card-content'}> + <Link + className={'post-card-content-link'} + to={prev.frontmatter.path} + > + <header className={'post-card-header'}> + <span className={'post-card-tags'}> + {prev.frontmatter.tags + ? prev.frontmatter.tags[0] + ' • ' + : ''} + {new Date(prev.frontmatter.date).toDateString()} + </span> + <h2 className={'post-card-title'}> + {prev.frontmatter.title} + </h2> + </header> + <section className={'post-card-excerpt'}> + <p>{prev.frontmatter.excerpt}</p> + </section> + </Link> + </div> + </article> + )} + </div> + </div> + </aside> + <Footer /> + </div> + </div> + ); +}; + +export const query = graphql` + query($pathSlug: String!) { + markdownRemark(frontmatter: { path: { eq: $pathSlug } }) { + html + frontmatter { + title + } + } + } +`; +export default BlogPostTemplate; diff --git a/src/templates/singleTagIndex.js b/src/templates/singleTagIndex.js @@ -0,0 +1,62 @@ +import React from 'react'; +import { Link } from 'gatsby'; +import Header from '../components/header'; +import Footer from '../components/footer'; + +const AllTagsTemplate = ({ data, pageContext }) => { + const { posts, tag } = pageContext; + const desc = `Essay${posts.length > 1 ? 's' : ''} about ${tag}.`; + return ( + <div className={'tag-template tag-movie-reviews'}> + <div className={'site-wrapper'}> + <Header siteTitle={tag.toUpperCase()} description={desc} /> + <main id={'site-main'} className={'site-main outer'}> + <div className={'inner'}> + <div className={'post-feed'}> + {posts.map(post => ( + <article + className={'post-card post'} + key={post.frontmatter.path} + > + <Link + to={post.frontmatter.path} + className={'post-card-image-link'} + > + <div + className={'post-card-image'} + style={{ + backgroundImage: `url(${post.frontmatter.cover})`, + }} + /> + </Link> + <div className={'post-card-content'}> + <Link + to={post.frontmatter.path} + className={'post-card-content-link'} + > + <header className={'post-card-header'}> + <span className={'post-card-tags'}> + {tag} •{' '} + {new Date(post.frontmatter.date).toDateString()} + </span> + <h2 className={'post-card-title'}> + {post.frontmatter.title} + </h2> + </header> + <section className={'post-card-excerpt'}> + <p>{post.frontmatter.excerpt}</p> + </section> + </Link> + </div> + </article> + ))} + </div> + </div> + </main> + <Footer /> + </div> + </div> + ); +}; + +export default AllTagsTemplate;