commit 6e6968b606b06a33aaf52d4339890abf396a993a
parent 856b5ffb0c1748a4449ee036e737d75896c89463
Author: Agastya Chandrakant <me@hanabi.in>
Date: Thu, 5 Sep 2019 02:47:59 +0530
Finishing things up
Diffstat:
9 files changed, 248 insertions(+), 41 deletions(-)
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -6,7 +6,8 @@ module.exports = {
name: `Sanā Habeeb`,
photo: `https://pbs.twimg.com/profile_images/1116312044951744512/z9hsCRB7_400x400.jpg`,
siteUrl: `http://sana137.in`,
- title: `Sanaa’s stories`,
+ title: `Sana’s stories`,
+ homeName: `サナ`,
},
plugins: [
`gatsby-transformer-remark`,
diff --git a/src/components/complexHeader.js b/src/components/complexHeader.js
@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { graphql, useStaticQuery, Link } from 'gatsby';
+
+const ComplexHeader = ({ siteTitle, description, headerImg, hideName }) => {
+ const data = useStaticQuery(graphql`
+ query getHomeNameForComplex {
+ site {
+ siteMetadata {
+ homeName
+ siteUrl
+ }
+ }
+ }
+ `);
+ const { homeName, siteUrl } = data.site.siteMetadata;
+ return (
+ <header
+ style={{
+ backgroundColor: `#86BD26`,
+ backgroundImage: `url(${headerImg})`,
+ }}
+ className={'site-header outer'}
+ >
+ <div className={'inner'}>
+ <TinyHeader homeName={homeName} siteUrl={siteUrl} />
+ <div className={'site-header-content'}>
+ <h1 style={{ margin: 0 }} className={'site-title'}>
+ {siteTitle}
+ </h1>
+ <br />
+ <h2 className={'site-description'}>{description}</h2>
+ {!hideName && <h2>{homeName}</h2>}
+ </div>
+ </div>
+ </header>
+ );
+};
+
+ComplexHeader.propTypes = {
+ siteTitle: PropTypes.string,
+ description: PropTypes.string,
+};
+
+ComplexHeader.defaultProps = {
+ siteTitle: `Sanaa’s stories`,
+ description: `Hi, I am Sanā!`,
+};
+
+export default ComplexHeader;
+
+const TinyHeader = ({ homeName, siteUrl }) => {
+ return (
+ <nav className={'site-nav'}>
+ <div className={'site-nav-left'}>
+ <Link to={'/'} className={'site-nav-logo'}>
+ {homeName}
+ </Link>
+ <ul className="nav" role="menu">
+ <li className="nav-weblog" role="menuitem">
+ <Link to={'/tags'} style={{ textTransform: `upper` }}>
+ #tags
+ </Link>
+ </li>
+ </ul>
+ </div>
+ <div className={'site-nav-right'}>
+ <div className={'social-links'} />
+ <a
+ className={'rss-button'}
+ href={`https://feedly.com/i/subscription/feed/${siteUrl}/rss.xml`}
+ rel="noopener noreferrer"
+ target="_blank"
+ title="RSS"
+ >
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <circle cx="6.18" cy="17.82" r="2.18"></circle>
+ <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"></path>
+ </svg>
+ </a>
+ </div>
+ </nav>
+ );
+};
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -2,29 +2,9 @@ import { Link } from 'gatsby';
import PropTypes from 'prop-types';
import React from 'react';
-const Footer = ({ name, author }) => (
- <footer
- // style={{ background: `#323330` }}
- className={'site-footer outer'}
- >
- <div
- // style={{
- // color: `#fff`,
- // fontSize: '13px',
- // margin: `0 auto`,
- // maxWidth: 960,
- // padding: `1.45rem 1.0875rem`,
- // verticalAlign: `middle`,
- // }}
- // style={{
- // ...siteFooterContent,
- // ...inner,
- // fontSize: '13px',
- // margin: `0 auto`,
- // padding: `1.45rem 0`,
- // }}
- className={'site-footer-content inner'}
- >
+const Footer = ({ author, name, style }) => (
+ <footer className={'site-footer outer'} style={{ ...style }}>
+ <div className={'site-footer-content inner'}>
<section className={'copyright'}>
<a href={`https://www.twitter.com/${author}`}>{name}</a> ©{' '}
{new Date().getFullYear()}
diff --git a/src/components/header.js b/src/components/header.js
@@ -1,11 +1,22 @@
import PropTypes from 'prop-types';
import React from 'react';
+import { graphql, useStaticQuery } from 'gatsby';
-const Header = ({ siteTitle, description, headerImg }) => {
+const Header = ({ siteTitle, description, headerImg, hideName }) => {
+ const data = useStaticQuery(graphql`
+ query getHomeName {
+ site {
+ siteMetadata {
+ homeName
+ }
+ }
+ }
+ `);
+ const { homeName } = data.site.siteMetadata;
return (
<header
style={{
- backgroundColor: `#FFDD3D`,
+ backgroundColor: `#86BD26`,
backgroundImage: `url(${headerImg})`,
}}
className={'site-header outer'}
@@ -17,6 +28,7 @@ const Header = ({ siteTitle, description, headerImg }) => {
</h1>
<br />
<h2 className={'site-description'}>{description}</h2>
+ {!hideName && <h2>{homeName}</h2>}
</div>
</div>
</header>
diff --git a/src/components/tinyHeader.js b/src/components/tinyHeader.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { graphql, useStaticQuery, Link } from 'gatsby';
+
+const TinyHeader = () => {
+ const data = useStaticQuery(graphql`
+ query getSiteUrl {
+ site {
+ siteMetadata {
+ homeName
+ siteUrl
+ }
+ }
+ }
+ `);
+ const { homeName, siteUrl } = data.site.siteMetadata;
+ return (
+ <header className={'site-header outer'}>
+ <div className={'inner'}>
+ <nav className={'site-nav'}>
+ <div className={'site-nav-left'}>
+ <Link to={'/'} className={'site-nav-logo'}>
+ {homeName}
+ </Link>
+ <ul className="nav" role="menu">
+ <li className="nav-weblog" role="menuitem">
+ <Link to={'/tags'} style={{ textTransform: `upper` }}>
+ #tags
+ </Link>
+ </li>
+ </ul>
+ </div>
+ <div className={'site-nav-right'}>
+ <div className={'social-links'}>
+ <a
+ className={'rss-button'}
+ href={`https://feedly.com/i/subscription/feed/${siteUrl}/rss.xml`}
+ rel="noopener noreferrer"
+ target="_blank"
+ title="RSS"
+ >
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <circle cx="6.18" cy="17.82" r="2.18"></circle>
+ <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"></path>
+ </svg>
+ </a>
+ </div>
+ </div>
+ </nav>
+ </div>
+ </header>
+ );
+};
+
+export default TinyHeader;
diff --git a/src/pages/404.js b/src/pages/404.js
@@ -1,14 +1,85 @@
import React from 'react';
-
-import Layout from '../components/layout';
+import { graphql, useStaticQuery, Link } from 'gatsby';
+import Footer from '../components/footer';
import SEO from '../components/seo';
+const cover = `https://solarsystem.nasa.gov/system/downloadable_items/862_PIA21590.jpg`;
-const NotFoundPage = () => (
- <Layout>
- <SEO title="404: Not found" />
- <h1>NOT FOUND</h1>
- <p>You just hit a route that doesn't exist... the sadness.</p>
- </Layout>
-);
+const NotFoundPage = () => {
+ const data = useStaticQuery(graphql`
+ query getHomeName404 {
+ site {
+ siteMetadata {
+ homeName
+ }
+ }
+ }
+ `);
+ const { homeName } = data.site.siteMetadata;
+ return (
+ <div className={'error-template'}>
+ <SEO title="404: Not found" />
+ <div
+ className={'site-wrapper'}
+ style={{
+ backgroundColor: `#000`,
+ backgroundImage: `url(${cover})`,
+ backgroundRepeat: `no-repeat`,
+ backgroundSize: `contain`,
+ }}
+ >
+ <header
+ className={'site-header outer no-cover'}
+ style={{ background: `transparent` }}
+ >
+ <div className={'inner'}>
+ <nav className={'site-nav-center'}>
+ <Link to={'/'} className={'site-nav-logo'}>
+ {homeName}
+ </Link>
+ </nav>
+ </div>
+ </header>
+ <main id={'site-main'} className={'site-main outer'}>
+ <div className={'inner'}>
+ <section className={'error-message'}>
+ <h1
+ className={'error-code'}
+ style={{
+ color: `rgb(240, 237, 200)`,
+ opacity: 0.9,
+ }}
+ >
+ 404
+ </h1>
+ <br />
+ <p
+ className={'error-description'}
+ style={{ color: `rgb(240, 237, 200)`, opacity: 0.9 }}
+ >
+ It was quite lonely and cold here, far away from the Sun.
+ <br />
+ Thanks for stopping by!
+ </p>
+ <br />
+ <Link
+ to={'/'}
+ className={'error-link'}
+ style={{
+ border: `1px solid rgb(240, 237, 200)`,
+ borderRadius: `20px`,
+ color: `rgb(240, 237, 200)`,
+ padding: `9px 16px`,
+ }}
+ >
+ Land on the home page.
+ </Link>
+ </section>
+ </div>
+ </main>
+ <Footer style={{ background: `transparent` }} />
+ </div>
+ </div>
+ );
+};
export default NotFoundPage;
diff --git a/src/templates/allTagsIndex.js b/src/templates/allTagsIndex.js
@@ -1,14 +1,14 @@
import React from 'react';
import { Link } from 'gatsby';
import Footer from '../components/footer';
-import Header from '../components/header';
+import TinyHeader from '../components/tinyHeader';
const AllTagsTemplate = ({ data, pageContext }) => {
const { tags } = pageContext;
return (
<div className={'page-template page-tag'}>
<div className={'site-wrapper'}>
- <Header />
+ <TinyHeader />
<main id={'site-main'} className={'site-main outer'}>
<div className={'inner'}>
<article className={'post-full post page no-image'}>
@@ -17,6 +17,7 @@ const AllTagsTemplate = ({ data, pageContext }) => {
</header>
<section className={'post-full-content'}>
<div className={'post-content'}>
+ <p>List of (almost) all the tags.</p>
<ol>
{tags.map(tag => (
<li style={{ textTransform: `capitalize` }} key={tag}>
diff --git a/src/templates/blogPost.js b/src/templates/blogPost.js
@@ -1,7 +1,7 @@
import React from 'react';
import { graphql, Link } from 'gatsby';
import Footer from '../components/footer';
-import Header from '../components/header';
+import TinyHeader from '../components/tinyHeader';
const BlogPostTemplate = ({ data, pageContext }) => {
const {
@@ -41,7 +41,7 @@ const BlogPostTemplate = ({ data, pageContext }) => {
return (
<div className={'post-template'}>
<div className={'site-wrapper'}>
- <Header />
+ <TinyHeader />
<main id={'site-main'} className={'site-main outer'}>
<div className={'inner'}>
<article className={'post-full post'}>
diff --git a/src/templates/singleTagIndex.js b/src/templates/singleTagIndex.js
@@ -1,6 +1,6 @@
import React from 'react';
import { Link } from 'gatsby';
-import Header from '../components/header';
+import ComplexHeader from '../components/complexHeader';
import Footer from '../components/footer';
const AllTagsTemplate = ({ data, pageContext }) => {
@@ -9,7 +9,11 @@ const AllTagsTemplate = ({ data, pageContext }) => {
return (
<div className={'tag-template tag-movie-reviews'}>
<div className={'site-wrapper'}>
- <Header siteTitle={tag.toUpperCase()} description={desc} />
+ <ComplexHeader
+ siteTitle={tag.toUpperCase()}
+ description={desc}
+ hideName={true}
+ />
<main id={'site-main'} className={'site-main outer'}>
<div className={'inner'}>
<div className={'post-feed'}>
