docs(www): real about page

lasseschou · Apr 21, 2019 · 3641adf · 3641adf
1 parent d404c2d
commit 3641adf
Show file tree

Hide file tree

Showing 8 changed files with 742 additions and 22 deletions.
diff --git a/www/gatsby-config.js b/www/gatsby-config.js
@@ -19,6 +19,15 @@ module.exports = {
  path: `${__dirname}/src/images`,
  },
  },
+ {
+ resolve: `gatsby-source-filesystem`,
+ options: {
+ name: `markdown`,
+ path: `${__dirname}/../lib/markdown`,
+ include: /\.partial\.md$/,
+ },
+ },
+ 'gatsby-transformer-remark',
  {
  resolve: 'gatsby-plugin-react-svg',
  options: {

diff --git a/www/package.json b/www/package.json
@@ -19,6 +19,7 @@
  "gatsby-plugin-react-svg": "^2.1.1",
  "gatsby-plugin-sharp": "^2.0.32",
  "gatsby-source-filesystem": "^2.0.29",
+ "gatsby-transformer-remark": "^2.3.8",
  "gatsby-transformer-sharp": "^2.1.17",
  "lodash": "^4.17.11",
  "prop-types": "^15.7.2",

diff --git a/www/src/components/layout.css b/www/src/components/layout.css
@@ -4,7 +4,7 @@ body {
  height: 100%;
  margin: 0;
  background: #282828;
- color: hsl(175, 60%, 45%); /* #2eb9aa */
+ color: #aaa;
  font-family: 'Montserrat', 'Open Sans', 'Arial', sans-serif;
 }
 
@@ -22,7 +22,7 @@ body {
 
 a,
 a:visited {
- color: #aaa;
+ color: hsl(175, 60%, 45%); /* #2eb9aa */
  text-decoration: none;
 }
 
@@ -32,7 +32,6 @@ a.active-link:hover {
 }
 
 a.active-link {
- color: hsl(175, 60%, 45%);
  font-weight: 600;
 }
 
@@ -171,6 +170,7 @@ a.active-link {
 }
 
 .footer {
+ font-size: 80%;
  position: absolute;
  bottom: 20px;
  left: 0;

diff --git a/www/src/components/layout.js b/www/src/components/layout.js
@@ -29,7 +29,7 @@ const Layout = ({children}) => {
  <Sidebar siteTitle={data.site.siteMetadata.title} />
  <main className="transparent-container">{children}</main>
  <footer className="footer">
- © {new Date().getFullYear()}{' '}
+ Made with 😅 in Texas, © {new Date().getFullYear()}{' '}
  <a href="https://twitter.com/patrickhulce" target="_blank" rel="noopener">
  @patrickhulce
  </a>

diff --git a/www/src/components/page-content.js b/www/src/components/page-content.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 const PageContent = ({children}) => {
- return <div style={{marginTop: 110, marginLeft: 130}}>{children}</div>
+ return <div style={{margin: '110px auto', maxWidth: 1000}}>{children}</div>
 }
 
 PageContent.propTypes = {

diff --git a/www/src/components/sidebar.js b/www/src/components/sidebar.js
@@ -30,6 +30,13 @@ const Sidebar = ({siteTitle}) => {
  <ul style={{margin: 0, padding: 0}}>
  <NavLink href="/" text="Data" />
  <NavLink href="/about" text="About" />
+ <a
+ href="https://github.com/patrickhulce/third-party-web"
+ target="_blank"
+ rel="noopener"
+ >
+ GitHub
+ </a>
  </ul>
  </nav>
  </aside>

diff --git a/www/src/pages/about.js b/www/src/pages/about.js
@@ -1,16 +1,46 @@
 import React from 'react'
-import {Link} from 'gatsby'
+import {Link, StaticQuery, graphql} from 'gatsby'
 
 import SEO from '../components/seo'
 import PageContent from '../components/page-content'
 
 const SecondPage = () => (
- <PageContent>
- <SEO title="About" />
- <h1>About the Project</h1>
- <p>Welcome to page 2</p>
- <Link to="/">Go back to the homepage</Link>
- </PageContent>
+ <StaticQuery
+ query={graphql`
+ query AboutPageQuery {
+ allMarkdownRemark {
+ edges {
+ node {
+ html
+ frontmatter {
+ name
+ }
+ }
+ }
+ }
+ }
+ `}
+ render={data => {
+ const partials = data.allMarkdownRemark.edges.reduce((map, edge) => {
+ map[edge.node.frontmatter.name] = edge.node.html
+ return map
+ }, {})
+
+ return (
+ <PageContent>
+ <SEO title="About" />
+ <h1>About the Project</h1>
+ <h2>Goals</h2>
+ <div dangerouslySetInnerHTML={{__html: partials.goals}} />
+ <h2>Methodology</h2>
+ <div dangerouslySetInnerHTML={{__html: partials.methodology}} />
+ <h2>FAQs</h2>
+ <div dangerouslySetInnerHTML={{__html: partials.faqs}} />
+ <Link to="/">Get back to the data</Link>
+ </PageContent>
+ )
+ }}
+ />
 )
 
 export default SecondPage