Browse Source

done with the home page

master
Agastya 2 years ago
parent
commit
5729cee985
19 changed files with 444 additions and 15889 deletions
  1. +4
    -3
      .prettierrc
  2. +17
    -7
      gatsby-config.js
  3. +0
    -15734
      package-lock.json
  4. +4
    -3
      package.json
  5. +44
    -0
      src/components/footer.js
  6. +18
    -11
      src/components/header.js
  7. +0
    -32
      src/components/image.js
  8. +143
    -0
      src/components/indexStyle.js
  9. +32
    -30
      src/components/layout.css
  10. +26
    -20
      src/components/layout.js
  11. +10
    -10
      src/components/seo.js
  12. BIN
      src/images/gatsby-icon.png
  13. BIN
      src/images/sunflower.png
  14. +17
    -0
      src/pages/08-08-2019-zealots-against-zomato/index.md
  15. +5
    -5
      src/pages/404.js
  16. +9
    -0
      src/pages/bar/index.md
  17. +9
    -0
      src/pages/foo/index.md
  18. +106
    -18
      src/pages/index.js
  19. +0
    -16
      src/pages/page-2.js

+ 4
- 3
.prettierrc View File

@ -1,7 +1,8 @@
{
"endOfLine": "lf",
"semi": false,
"singleQuote": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
"trailingComma": "es5",
"useTabs": false
}

+ 17
- 7
gatsby-config.js View File

@ -1,10 +1,20 @@
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
title: `Sanaa’s stories`,
description: `Hi, I am Sanā!`,
author: `@SanaHabeeb4`,
name: `Sanā Habeeb`,
photo: `https://pbs.twimg.com/profile_images/1116312044951744512/z9hsCRB7_400x400.jpg`,
},
plugins: [
`gatsby-transformer-remark`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages`,
},
},
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
@ -21,14 +31,14 @@ module.exports = {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
background_color: `black`,
theme_color: `black`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
icon: `src/images/sunflower.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
};

+ 0
- 15734
package-lock.json
File diff suppressed because it is too large
View File


+ 4
- 3
package.json View File

@ -1,9 +1,8 @@
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"description": "Sanā's blog",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"author": "Agastya <me@hanabi.in>",
"dependencies": {
"gatsby": "^2.13.73",
"gatsby-image": "^2.2.10",
@ -12,6 +11,7 @@
"gatsby-plugin-react-helmet": "^3.1.4",
"gatsby-plugin-sharp": "^2.2.13",
"gatsby-source-filesystem": "^2.1.11",
"gatsby-transformer-remark": "^2.6.19",
"gatsby-transformer-sharp": "^2.2.7",
"prop-types": "^15.7.2",
"react": "^16.9.0",
@ -27,6 +27,7 @@
"license": "MIT",
"scripts": {
"build": "gatsby build",
"dev": "gatsby develop",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "npm run develop",


+ 44
- 0
src/components/footer.js View File

@ -0,0 +1,44 @@
import { Link } from 'gatsby';
import PropTypes from 'prop-types';
import React from 'react';
const Footer = ({ name }) => (
<footer
style={{
background: `#323330`,
marginTop: `1.45rem`,
}}
>
<div
style={{
color: `#fff`,
fontSize: '20px',
margin: `0 auto`,
maxWidth: 960,
padding: `1.45rem 1.0875rem`,
verticalAlign: `middle`,
}}
>
<Link
to="/"
style={{
color: `#fff`,
textDecoration: `none`,
}}
>
{name}
</Link>{' '}
© {new Date().getFullYear()}
</div>
</footer>
);
Footer.propTypes = {
name: PropTypes.string,
};
Footer.defaultProps = {
name: `Sanā Habeeb`,
};
export default Footer;

+ 18
- 11
src/components/header.js View File

@ -1,11 +1,12 @@
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import { Link } from 'gatsby';
import PropTypes from 'prop-types';
import React from 'react';
const Header = ({ siteTitle }) => (
const Header = ({ siteTitle, description }) => (
<header
style={{
background: `rebeccapurple`,
background: `#F0DB4F`,
// boxShadow: `0 0 8px #323330`,
marginBottom: `1.45rem`,
}}
>
@ -20,23 +21,29 @@ const Header = ({ siteTitle }) => (
<Link
to="/"
style={{
color: `white`,
color: `#323330`,
textDecoration: `none`,
}}
>
{siteTitle}
</Link>
</h1>
<br />
<h4 style={{ color: 'rgba(0, 0, 0, 0.7)', marginBottom: 0 }}>
{description}
</h4>
</div>
</header>
)
);
Header.propTypes = {
siteTitle: PropTypes.string,
}
description: PropTypes.string,
};
Header.defaultProps = {
siteTitle: ``,
}
siteTitle: `Sanaa’s stories`,
description: `Hi, I am Sanā!`,
};
export default Header
export default Header;

+ 0
- 32
src/components/image.js View File

@ -1,32 +0,0 @@
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/
*/
const 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

+ 143
- 0
src/components/indexStyle.js View File

@ -0,0 +1,143 @@
const authorList = {
display: `flex`,
flexWrap: `wrap-reverse`,
listStyle: `none`,
margin: 0,
padding: 0,
};
const authorListItem = {
flexShrink: 0,
margin: 0,
padding: 0,
position: `relative`,
};
const avatarWrapper = {
background: `#e3e9ed`,
borderRadius: `100%`,
display: `block`,
height: `100%`,
objectFit: `cover`,
width: `100%`,
};
const Excerpt = {
fontSize: `18px`,
fontStretch: `100%`,
lineHeight: `28px`,
marginBlockEnd: `27px`,
marginBottom: `22.5px`,
};
const postCard = {
background: `#f7f7f7 center center`,
backgroundSize: `cover`,
borderRadius: `10px`,
boxShadow: `0 20px 25px 0 rgba(50, 50, 50, 0.2)`,
display: `flex`,
flex: `1 1 300px`,
flexDirection: `column`,
margin: `0 20px 40px`,
minHeight: `300px`,
overflow: `hidden`,
};
const postCardContent = {
display: `flex`,
flexDirection: `column`,
flexGrow: 1,
justifyContent: `space-between`,
};
const postCardContentLink = {
color: `#454545`,
display: `block`,
flexGrow: 1,
padding: `25px 25px 0`,
position: `relative`,
textDecoration: `none`,
};
const postCardImage = {
background: `#c5d2d9 no-repeat 50%`,
backgroundSize: `cover`,
height: `200px`,
width: `auto`,
};
const postCardImageLink = {
borderRadius: `5px 5px 0 0`,
display: `block`,
overflow: `hidden`,
position: `relative`,
};
const postCardMeta = {
alignItems: `flex-end`,
display: `flex`,
justifyContent: `space-between`,
padding: `0 25px 25px`,
};
const postCardTags = {
color: `#434343`,
display: `block`,
fontSize: `12px`,
fontWeight: `bolder`,
letterSpacing: `0.5px`,
lineHeight: `14px`,
marginBottom: `4px`,
textTransform: `uppercase`,
};
const postCardTitle = {
marginTop: 0,
};
const postFeed = {
display: `flex`,
flexWrap: `wrap`,
margin: `0 -20px`,
padding: `40px 0 0 0`,
position: `relative`,
};
const readingTime = {
color: `#a6aaa9`,
flexShrink: 0,
fontSize: `12px`,
fontWeight: `bolder`,
letterSpacing: `0.5px`,
lineHeight: `33px`,
marginLeft: `20px`,
textTransform: `uppercase`,
};
const staticAvatar = {
border: `#e0e0e0 2px solid`,
borderRadius: `100%`,
display: `block`,
height: `34px`,
margin: `0 -5px`,
overflow: `hidden`,
width: `34px`,
};
module.exports = {
authorList,
authorListItem,
avatarWrapper,
Excerpt,
postCard,
postCardContent,
postCardContentLink,
postCardImage,
postCardImageLink,
postCardMeta,
postCardTags,
postCardTitle,
postFeed,
readingTime,
staticAvatar,
};

+ 32
- 30
src/components/layout.css View File

@ -124,22 +124,22 @@ button,
select {
text-transform: none;
}
[type="reset"],
[type="submit"],
[type='reset'],
[type='submit'],
button,
html [type="button"] {
html [type='button'] {
-webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
[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,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
@ -159,21 +159,21 @@ legend {
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
[type='checkbox'],
[type='radio'] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
[type='search'] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-input-placeholder {
@ -185,7 +185,7 @@ textarea {
font: inherit;
}
html {
font: 112.5%/1.45em georgia, serif;
font-size: 112.5%/1.45em;
box-sizing: border-box;
overflow-y: scroll;
}
@ -200,14 +200,16 @@ html {
}
body {
color: hsla(0, 0%, 0%, 0.8);
font-family: georgia, serif;
/* 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";
-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%;
@ -571,10 +573,10 @@ 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";
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;
@ -592,8 +594,8 @@ 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;
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;
@ -607,13 +609,13 @@ code:after,
tt:before,
tt:after {
letter-spacing: -0.2em;
content: " ";
content: ' ';
}
pre code:before,
pre code:after,
pre tt:before,
pre tt:after {
content: "";
content: '';
}
@media only screen and (max-width: 480px) {
html {


+ 26
- 20
src/components/layout.js View File

@ -5,48 +5,54 @@
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Header from "./header"
import "./layout.css"
import React from 'react';
import PropTypes from 'prop-types';
import { useStaticQuery, graphql } from 'gatsby';
import Header from './header';
import Footer from './footer';
import './layout.css';
const Layout = ({ children }) => {
const data = useStaticQuery(graphql`
const { site } = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
description
name
title
}
}
}
`)
`);
return (
<>
<Header siteTitle={data.site.siteMetadata.title} />
<div
style={{
background: `#f1f1f1`,
}}
>
<Header
siteTitle={site.siteMetadata.title}
description={site.siteMetadata.description}
/>
<div
style={{
margin: `0 auto`,
maxWidth: 960,
minHeight: `80vh`,
padding: `0px 1.0875rem 1.45rem`,
paddingTop: 0,
}}
>
<main>{children}</main>
<footer>
© {new Date().getFullYear()}, Built with
{` `}
<a href="https://www.gatsbyjs.org">Gatsby</a>
</footer>
</div>
</>
)
}
<Footer name={site.siteMetadata.name} />
</div>
);
};
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
};
export default Layout
export default Layout;

+ 10
- 10
src/components/seo.js View File

@ -5,10 +5,10 @@
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react"
import PropTypes from "prop-types"
import Helmet from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import { useStaticQuery, graphql } from 'gatsby';
function SEO({ description, lang, meta, title }) {
const { site } = useStaticQuery(
@ -23,9 +23,9 @@ function SEO({ description, lang, meta, title }) {
}
}
`
)
);
const metaDescription = description || site.siteMetadata.description
const metaDescription = description || site.siteMetadata.description;
return (
<Helmet
@ -69,20 +69,20 @@ function SEO({ description, lang, meta, title }) {
},
].concat(meta)}
/>
)
);
}
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
export default SEO;

BIN
src/images/gatsby-icon.png View File

Before After
Width: 512  |  Height: 512  |  Size: 21 KiB

BIN
src/images/sunflower.png View File

Before After
Width: 160  |  Height: 160  |  Size: 29 KiB

+ 17
- 0
src/pages/08-08-2019-zealots-against-zomato/index.md View File

@ -0,0 +1,17 @@
---
path: '/zealots-against-zomato'
date: '08-08-2019'
title: 'Zealots against Zomato'
tags: ['religion', 'food', 'discrimination', 'zomato', 'faith']
cover: 'https://images.unsplash.com/photo-1526367790999-0150786686a2'
---
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.
Ordering food home and having a problem with the delivery boy because of his faith makes no sense, just like not wanting to go to an office where there is no picture of God put up.
But if I have to guess why he might have done that, maybe ignorance, he probably thought that the driver would chant a prayer for him and package to be delivered safely and that way his food is getting effected in a way that he did not expect.
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.

+ 5
- 5
src/pages/404.js View File

@ -1,7 +1,7 @@
import React from "react"
import React from 'react';
import Layout from "../components/layout"
import SEO from "../components/seo"
import Layout from '../components/layout';
import SEO from '../components/seo';
const NotFoundPage = () => (
<Layout>
@ -9,6 +9,6 @@ const NotFoundPage = () => (
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
</Layout>
)
);
export default NotFoundPage
export default NotFoundPage;

+ 9
- 0
src/pages/bar/index.md View File

@ -0,0 +1,9 @@
---
path: '/bar'
date: '07-07-2019'
title: 'bar bar bar'
tags: ['religion', 'bar', 'foo']
cover: 'https://images.unsplash.com/photo-1495298885678-3158c444c6b5'
---
bar bar bar

+ 9
- 0
src/pages/foo/index.md View File

@ -0,0 +1,9 @@
---
path: '/foo'
date: '08-07-2019'
title: 'foo foo foo'
tags: ['religion', 'food', 'zomato', 'foo']
cover: 'https://images.unsplash.com/photo-1520520544506-d06b4b9dfd93'
---
foo foo foo

+ 106
- 18
src/pages/index.js View File

@ -1,21 +1,109 @@
import React from "react"
import { Link } from "gatsby"
import React from 'react';
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import Layout from '../components/layout';
import SEO from '../components/seo';
import {
authorList,
authorListItem,
avatarWrapper,
Excerpt,
postCard,
postCardContent,
postCardContentLink,
postCardImage,
postCardImageLink,
postCardMeta,
postCardTags,
postCardTitle,
postFeed,
readingTime,
staticAvatar,
} from '../components/indexStyle';
import { graphql, Link } from 'gatsby';
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link>
</Layout>
)
export const query = graphql`
query BlogPostList {
site {
siteMetadata {
author
name
photo
}
}
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
nodes {
excerpt
timeToRead
}
edges {
node {
frontmatter {
cover
date
path
tags
title
}
}
}
}
}
`;
export default IndexPage
export default function IndexPage(props) {
const { edges, nodes } = props.data.allMarkdownRemark;
const { author: twitterHandle, name, photo } = props.data.site.siteMetadata;
return (
<Layout>
<SEO title="Home" />
<div style={postFeed}>
{edges.map((edge, index) => {
const { frontmatter } = edge.node;
const publishDate = new Date(frontmatter.date).toDateString();
const cover = frontmatter.cover;
return (
<article style={postCard} key={frontmatter.path}>
<Link to={frontmatter.path} style={postCardImageLink}>
<div
style={{
...postCardImage,
backgroundImage: `url("${cover}")`,
}}
></div>
</Link>
<div style={postCardContent}>
<Link to={frontmatter.path} style={postCardContentLink}>
<header className="postCardHeader">
<span style={postCardTags}>
{frontmatter.tags ? frontmatter.tags[0] + `` : ``}{' '}
{publishDate}
</span>
<h2 style={postCardTitle}>{frontmatter.title}</h2>
</header>
<section className="postCardExcerpt">
<p style={Excerpt}>{nodes[index].excerpt}</p>
</section>
</Link>
<footer style={postCardMeta}>
<ul style={authorList}>
<li style={authorListItem}>
<a
href={`https://www.twitter.com/${twitterHandle}`}
style={staticAvatar}
>
<img src={photo} style={avatarWrapper} alt={name} />
</a>
</li>
</ul>
<span style={readingTime}>
{nodes[index].timeToRead} min read
</span>
</footer>
</div>
</article>
);
})}
</div>
</Layout>
);
}

+ 0
- 16
src/pages/page-2.js View File

@ -1,16 +0,0 @@
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
const SecondPage = () => (
<Layout>
<SEO title="Page two" />
<h1>Hi from the second page</h1>
<p>Welcome to page 2</p>
<Link to="/">Go back to the homepage</Link>
</Layout>
)
export default SecondPage

Loading…
Cancel
Save