benjaminramey/benramey.com-gatsby.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home page working, etc

Browse Source
This commit is contained in:
Benjamin Ramey
2020-09-24 09:56:56 -05:00
parent f8842bd7c7
commit a80ae21fd2
8 changed files with 136 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
gatsby-config.js
View File

@@ -6,6 +6,10 @@
module.exports = {
/* Your site config here */
siteMetadata: {
title: `Ben Ramey's Blog`,
tagline: `Scripture, programming problems, solutions and stories.`
},
plugins: [
`gatsby-plugin-sass`,
{

1
src/components/footer.js
View File

@@ -8,6 +8,7 @@ export default function Footer() {
return (
<footer className="footer">
<div className="container">
<hr />
<small>
&copy; <time dateTime={timestamp}>{year}</time>.
All rights reserved.

36
src/components/header.js
View File

@@ -1,20 +1,20 @@
import React from "react";
export default function Header() {
return (
<header>
<div className="container">
<div className="d-flex justify-content-between align-item-center">
<a href="/" className="d-flex justify-content-start align-items-center mr-2" title="Home">
<img src="https://en.gravatar.com/userimage/738990/32d8e61848233a67f5e02dcc43be0ff8.jpeg"
alt="Gravatar" />
<span className="ml-2">Ben Ramey's Blog</span>
</a>
<div className="d-none d-sm-flex flex-column justify-content-around ml-2">
<small>Scripture, programming problems, solutions and stories.</small>
</div>
</div>
</div>
</header>
);
}
export default function Header({ title, tagline }) {
return (
<header>
<div className="container">
<div className="d-flex justify-content-between align-item-center">
<a href="/" className="d-flex justify-content-start align-items-center mr-2" title="Home">
<img src="https://en.gravatar.com/userimage/738990/32d8e61848233a67f5e02dcc43be0ff8.jpeg"
alt="Gravatar" />
<span className="ml-2">{title}</span>
</a>
<div className="d-none d-sm-flex flex-column justify-content-around ml-2">
<small>{tagline}</small>
</div>
</div>
</div>
</header>
);
}

4
src/components/layout.js
View File

@@ -3,10 +3,10 @@ import Header from './header';
import Footer from './footer';
import Nav from './nav';
export default function Layout({ children }) {
export default function Layout({ title, tagline, children }) {
return (
<div>
<Header />
<Header title={title} tagline={tagline} />
<Nav />
<main>
<div className="container">

2
src/pages/404.js
View File

@@ -3,7 +3,7 @@ import Page from "../templates/page";
export default function NotFound() {
return (
<Page title="404 : Page not found">
<Page pageTitle="404 : Page not found">
<p>
Sorry, we've misplaced that URL or it's pointing
to something that doesn't exist.

71
src/pages/index.js
View File

@@ -1,12 +1,67 @@
import React from "react";
import { graphql } from "gatsby";
import Page from "../templates/page";
export default function Home() {
return (
<Page title="home page">
<div>
this is the home page
</div>
</Page>
);
export default function Home({ data }) {
console.log(data);
const post = data.allMarkdownRemark.edges[0].node;
const siteMetadata = data.site.siteMetadata;
return (
<Page title={siteMetadata.title} tagline={siteMetadata.tagline}>
<article className="post">
<h1 className="post-title">{post.frontmatter.title}</h1>
<div className="post-info d-flex justify-content-start">
<time dateTime={post.frontmatter.isoDate} className="post-date">
{post.frontmatter.formattedDate}, {post.frontmatter.fromNowDate}
</time>
<nav className="post-tags">
</nav>
<nav className="post-categories">
<span>posted in:</span>
</nav>
</div>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</article>
<section>
<a href={post.fields.slug + "#comments-section"}>
See comments
</a>
</section>
</Page>
);
}
export const query = graphql`
query {
allMarkdownRemark(limit: 1, sort: {fields: frontmatter___date, order: DESC}) {
edges {
node {
html
frontmatter {
title
formattedDate: date(formatString: "ddd MMM Do YYYY")
isoDate: date(formatString: "")
fromNowDate:date(fromNow:true)
categories
tags
}
fields {
slug
}
}
}
}
site {
siteMetadata {
title
tagline
}
}
sitePage {
path
}
}
`

6
src/templates/page.js
View File

@@ -1,11 +1,11 @@
import React from "react";
import Layout from "../components/layout"
export default function Page({ title, children }) {
export default function Page({ title, tagline, pageTitle, children }) {
return (
<Layout>
<Layout title={title} tagline={tagline}>
<article className="page">
<h1 className="page-title">{title}</h1>
<h1 className="page-title">{pageTitle}</h1>
{children}
</article>
</Layout>

79
src/templates/post.js
View File

@@ -4,46 +4,47 @@ import Layout from "../components/layout";
import { DiscussionEmbed } from 'disqus-react';
export default function Post({ data }) {
const post = data.markdownRemark;
const post = data.markdownRemark;
const siteMetadata = data.site.siteMetadata;
var tags = post.frontmatter.tags.map((tag) => {
return (<a key={tag} href={'/tags/' + tag }>#{tag}</a>);
});
var categories = post.frontmatter.categories.map((category) => {
return (<a key={category} href={'/categories/' + category }>#{category}</a>);
});
var tags = post.frontmatter.tags.map((tag) => {
return (<a key={tag} href={'/tags/' + tag}>#{tag}</a>);
});
var categories = post.frontmatter.categories.map((category) => {
return (<a key={category} href={'/categories/' + category}>#{category}</a>);
});
return (
<Layout>
<article className="post">
<h1 className="post-title">{post.frontmatter.title}</h1>
<div className="post-info d-flex justify-content-start">
<time dateTime={post.frontmatter.isoDate} className="post-date">
{post.frontmatter.formattedDate}, {post.frontmatter.fromNowDate}
</time>
<nav className="post-tags">
{tags}
</nav>
<nav className="post-categories">
<span>posted in:</span>
{categories}
</nav>
</div>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</article>
return (
<Layout title={siteMetadata.title} tagline={siteMetadata.tagline}>
<article className="post">
<h1 className="post-title">{post.frontmatter.title}</h1>
<div className="post-info d-flex justify-content-start">
<time dateTime={post.frontmatter.isoDate} className="post-date">
{post.frontmatter.formattedDate}, {post.frontmatter.fromNowDate}
</time>
<nav className="post-tags">
{tags}
</nav>
<nav className="post-categories">
<span>posted in:</span>
{categories}
</nav>
</div>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</article>
<DiscussionEmbed
shortname='fishybusiness'
config={
{
url: "https://" + data.site.host + data.sitePage.path,
identifier: post.slug,
title: post.frontmatter.title,
language: 'en_US'
}
}/>
</Layout>
)
<DiscussionEmbed
shortname='fishybusiness'
config={
{
url: "https://" + data.site.host + data.sitePage.path,
identifier: post.slug,
title: post.frontmatter.title,
language: 'en_US'
}
} />
</Layout>
)
}
export const query = graphql`
@@ -63,6 +64,10 @@ export const query = graphql`
site {
host
port
siteMetadata {
title
tagline
}
}
sitePage {
path