Commit 5993c752 authored by Ben Hong's avatar Ben Hong

chore: Cleanup old Gatsby files

parent eee6fc6d
import React from 'react'
import Link from 'gatsby-link'
import styled from 'styled-components'
import { headerFontFamily } from '../utils/variables'
import styles from '../styles/button.module.css'
import postStyles from '../styles/blog-post.module.css'
const BlogPostPreview = ({ node }) => {
return (
<ArticleContainer>
<PublishDate>{node.frontmatter.date}</PublishDate>
<Title>
<Link
to={node.fields.slug}
style={{ boxShadow: '0 0', color: '#222' }}
>
{node.frontmatter.title}
</Link>
</Title>
<p>{node.excerpt}</p>
<Link
to={node.fields.slug}
className={styles.button}
style={{ fontFamily: headerFontFamily }}
>
Read More >
</Link>
</ArticleContainer>
)
}
const ArticleContainer = styled.article`margin-bottom: 3.5rem;`
const PublishDate = styled.time`
display: block;
margin-bottom: 0.5rem;
color: #31688f;
font-size: 0.8rem;
font-weight: 600;
font-family: ${headerFontFamily};
line-height: 1;
text-transform: uppercase;
`
const Title = styled.h3`
margin-top: 0;
margin-bottom: 0.75rem;
line-height: 1.4;
`
export default BlogPostPreview
import React from 'react'
import Link from 'gatsby-link'
import styled from 'styled-components'
const Footer = props => {
return (
<FooterContainer>
<p style={{ marginBottom: 0, lineHeight: 1 }}>
&copy; Ben Hong 2018
</p>
<p>
Got a request or bug?{' '}
<a href="https://github.com/bencodezen/bencodezen/issues">
Submit it here!
</a>
</p>
</FooterContainer>
)
}
const FooterContainer = styled.footer`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 0.8rem;
`
export default Footer
import React from 'react'
import Link from 'gatsby-link'
import styled from 'styled-components'
import styles from '../styles/logo.module.css'
const platforms = [
{
name: 'Twitter',
url: 'https://www.twitter.com/bencodezen'
},
{
name: 'CodePen',
url: 'https://www.codepen.io/bencodezen'
},
{
name: 'GitHub',
url: 'https://www.github.com/bencodezen'
},
{
name: 'StackOverflow',
url: 'https://stackoverflow.com/users/5100020/bencodezen'
}
]
const renderPlatforms = list => {
return list.map(item => {
return (
<SocialMediaItem key={`header-${item.name}`}>
<SocialMediaLink href={item.url}>{item.name}</SocialMediaLink>
</SocialMediaItem>
)
})
}
const Header = props => {
return (
<HeaderContainer>
<Link to="/" className={styles.logo}>
<Logo>BenCodeZen</Logo>
</Link>
<SocialMediaList>{renderPlatforms(platforms)}</SocialMediaList>
</HeaderContainer>
)
}
const HeaderContainer = styled.header`
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
background-color: #2a3f4e;
`
const Logo = styled.h1`
margin: 0;
font-size: 14px;
color: #fff;
text-transform: uppercase;
`
const SocialMediaItem = styled.li`
margin: 0;
display: flex;
padding-right: 1rem;
&:hover {
text-decoration: underline;
}
&:last-child {
padding-right: 0;
}
`
const SocialMediaLink = styled.a`
color: #fff;
font-size: 13px;
box-shadow: 0 0;
`
const SocialMediaList = styled.ul`
margin: 0;
list-style-type: none;
display: flex;
`
export default Header
import React from 'react'
export default ({ data }) => {
console.log(data)
return (
<div>
<h1>Amazing Pandas Eating Things</h1>
<h4>{data.allMarkdownRemark.totalCount} Posts</h4>
{data.allMarkdownRemark.edges.map(({ node }) => (
<div key={node.id}>
<h3>
{node.frontmatter.title}{' '}
<span> {node.frontmatter.date}</span>
</h3>
<p>{node.excerpt}</p>
</div>
))}
</div>
)
}
export const query = graphql`
query IndexQuery {
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
totalCount
edges {
node {
id
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
}
excerpt
}
}
}
}
`
import React from 'react'
import Link from 'gatsby-link'
import BlogPostPreview from '../components/BlogPostPreview'
import Footer from '../components/Footer'
import Header from '../components/Header'
export default ({ data }) => (
<div>
<Header />
<main style={{ margin: '3rem auto', padding: '0 2rem', maxWidth: 680 }}>
<div>
<h2>Blog Posts</h2>
{data.allMarkdownRemark.edges.map(({ node }) => (
<BlogPostPreview key={node.id} node={node} />
))}
</div>
</main>
<Footer />
</div>
)
export const query = graphql`
query AboutQuery {
site {
siteMetadata {
title
}
}
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
totalCount
edges {
node {
id
fields {
slug
}
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
}
excerpt
}
}
}
}
`
h1,
h2,
h3,
h4,
h5,
h6 {
color: #444;
}
p,
li,
time {
color: #222;
}
.button {
border: 1px solid #32c8cf;
border-radius: 4px;
color: #32c8cf;
font-size: 0.8rem;
padding: 0.5rem 0.75rem;
text-transform: uppercase;
font-weight: bold;
box-shadow: 0 0;
transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
.button:hover {
background-color: #32c8cf;
color: #fff;
}
import React from 'react'
import Footer from '../components/Footer'
import Header from '../components/Header'
import postStyles from '../styles/blog-post.module.css'
export default ({ data }) => {
const post = data.markdownRemark
return (
<div>
<Header />
<article
style={{
boxSizing: 'border-box',
margin: '3rem auto',
padding: '0 2rem',
maxWidth: 668
}}
>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</article>
<Footer />
</div>
)
}
export const query = graphql`
query BlogPostQuery($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`
import Typography from 'typography'
import parnassusTheme from 'typography-theme-parnassus'
const typography = new Typography(parnassusTheme)
export default typography
export const headerFontFamily = `'Merriweather Sans', sans-serif`
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment