Add markdown for featured and projects

mechakin · Aug 18, 2018 · da71fa0 · da71fa0
1 parent 81284ea
commit da71fa0
Show file tree

Hide file tree

Showing 13 changed files with 200 additions and 116 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -8,6 +8,13 @@ module.exports = {
   plugins: [
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-styled-components`,
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'featured',
+        path: `${__dirname}/src/content/featured`,
+      },
+    },
     {
       resolve: 'gatsby-source-filesystem',
       options: {

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -3,9 +3,3 @@
  *
  * See: https://www.gatsbyjs.org/docs/node-apis/
  */
-
-// exports.onCreateNode = ({ node, boundActionCreators }) => {
-//   const { createNode, createNodeField } = boundActionCreators;
-//   // Transform the new node here and create a new node or
-//   // create a new node field.
-// };
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "develop": "gatsby develop",
     "format": "prettier --write 'src/**/*.js'",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "gatsby develop",
+    "start": "gatsby develop -o",
     "precommit": "pretty-quick --staged && lint-staged"
   },
   "lint-staged": {

diff --git a/src/components/featured.js b/src/components/featured.js
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import { IconGithub, IconExternal } from './icons';
 
@@ -100,7 +101,6 @@ const Links = styled.div`
 `;
 const Project = styled.div`
   ${mixins.flexBetween};
-  align-items: flex-start;
   margin-bottom: 100px;
   text-align: right;
 
@@ -151,42 +151,51 @@ const data = [
   },
 ];
 
-const Featured = () => (
-  <FeaturedContainer>
-    <H3>Some Things I've Built</H3>
-
-    <div className="featured__things">
-      {data &&
-        data.map(project => (
-          <Project key={project.id}>
-            <ImgContainer>
-              <ProjectImg
-                src="https://www.budapest.com/w/respsliders/bpcompromo02_1_2_1_2.jpg"
-                alt=""
-              />
-            </ImgContainer>
-            <ProjectContent>
-              <FeaturedLabel>Featured Project</FeaturedLabel>
-              <ProjectName>{project.name}</ProjectName>
-              <ProjectDescription>{project.description}</ProjectDescription>
-              <TechList>
-                {project.tech.map((tech, i) => (
-                  <li key={i}>{tech}</li>
-                ))}
-              </TechList>
-              <Links>
-                <A href={project.github} target="_blank" rel="noopener">
-                  <IconGithub />
-                </A>
-                <A href={project.external} target="_blank" rel="noopener">
-                  <IconExternal />
-                </A>
-              </Links>
-            </ProjectContent>
-          </Project>
-        ))}
-    </div>
-  </FeaturedContainer>
-);
+class Featured extends Component {
+  static propTypes = {
+    featured: PropTypes.array.isRequired,
+  };
+
+  render() {
+    const { featured } = this.props;
+    return (
+      <FeaturedContainer>
+        <H3>Some Things I've Built</H3>
+
+        <div className="featured__things">
+          {featured &&
+            featured.map((project, i) => (
+              <Project key={i}>
+                <ImgContainer>
+                  <ProjectImg
+                    src="https://www.budapest.com/w/respsliders/bpcompromo02_1_2_1_2.jpg"
+                    alt=""
+                  />
+                </ImgContainer>
+                <ProjectContent>
+                  <FeaturedLabel>Featured Project</FeaturedLabel>
+                  <ProjectName>{project.node.frontmatter.title}</ProjectName>
+                  <ProjectDescription dangerouslySetInnerHTML={{ __html: project.node.html }} />
+                  <TechList>
+                    {project.node.frontmatter.tech.map((tech, i) => (
+                      <li key={i}>{tech}</li>
+                    ))}
+                  </TechList>
+                  <Links>
+                    <A href={project.node.frontmatter.github} target="_blank" rel="noopener">
+                      <IconGithub />
+                    </A>
+                    <A href={project.node.frontmatter.external} target="_blank" rel="noopener">
+                      <IconExternal />
+                    </A>
+                  </Links>
+                </ProjectContent>
+              </Project>
+            ))}
+        </div>
+      </FeaturedContainer>
+    );
+  }
+}
 
 export default Featured;
diff --git a/src/components/projects.js b/src/components/projects.js
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import { IconGithub, IconExternal, IconFolder } from './icons';
 
 import styled from 'styled-components';
-import { theme, mixins, Section, Ul, A, P } from '../style';
+import { theme, mixins, Section, Ul, A } from '../style';
 
 const ProjectsContainer = Section.extend`
   ${mixins.flexCenter};
@@ -39,7 +40,7 @@ const ProjectName = styled.h4`
   margin: 0 0 10px;
   font-size: ${theme.fontSizes.h4};
 `;
-const ProjectDescription = P.extend`
+const ProjectDescription = styled.div`
   font-size: ${theme.fontSizes.medium};
 `;
 const TechList = Ul.extend`
@@ -69,61 +70,44 @@ const IconLink = A.extend`
   }
 `;
 
-const data = [
-  {
-    id: 1,
-    name: 'Project One',
-    github: '#',
-    external: '#',
-    tech: ['thing', 'thing', 'thing'],
-    description: `Gluten-free you probably haven't heard of them jianbing pitchfork pabst. Kombucha occupy iPhone live-edge beard iceland freegan small batch before they sold out DIY marfa chillwave sustainable taiyaki bushwick`,
-  },
-  {
-    id: 2,
-    name: 'Project Two',
-    github: '#',
-    external: '#',
-    tech: ['thing', 'thing', 'thing'],
-    description: `Gluten-free you probably haven't heard of them jianbing pitchfork pabst. Kombucha occupy iPhone live-edge beard iceland freegan small batch before they sold out DIY marfa chillwave sustainable taiyaki bushwick`,
-  },
-  {
-    id: 3,
-    name: 'Project Three',
-    github: '#',
-    external: '#',
-    tech: ['thing', 'thing', 'thing'],
-    description: `Gluten-free you probably haven't heard of them jianbing pitchfork pabst. Kombucha occupy iPhone live-edge beard iceland freegan small batch before they sold out DIY marfa chillwave sustainable taiyaki bushwick`,
-  },
-];
+class Projects extends Component {
+  static propTypes = {
+    projects: PropTypes.array.isRequired,
+  };
 
-const Projects = () => (
-  <ProjectsContainer>
-    <ProjectsGrid>
-      {data &&
-        data.map(project => (
-          <Project key={project.id}>
-            <Folder>
-              <IconFolder />
-            </Folder>
-            <ProjectName>{project.name}</ProjectName>
-            <ProjectDescription>{project.description}</ProjectDescription>
-            <TechList>
-              {project.tech.map((tech, i) => (
-                <li key={i}>{tech}</li>
-              ))}
-            </TechList>
-            <Links>
-              <IconLink href={project.github} target="_blank" rel="noopener">
-                <IconGithub />
-              </IconLink>
-              <IconLink href={project.external} target="_blank" rel="noopener">
-                <IconExternal />
-              </IconLink>
-            </Links>
-          </Project>
-        ))}
-    </ProjectsGrid>
-  </ProjectsContainer>
-);
+  render() {
+    const { projects } = this.props;
+
+    return (
+      <ProjectsContainer>
+        <ProjectsGrid>
+          {projects &&
+            projects.map((project, i) => (
+              <Project key={i}>
+                <Folder>
+                  <IconFolder />
+                </Folder>
+                <ProjectName>{project.node.frontmatter.title}</ProjectName>
+                <ProjectDescription dangerouslySetInnerHTML={{ __html: project.node.html }} />
+                <TechList>
+                  {project.node.frontmatter.tech.map((tech, i) => (
+                    <li key={i}>{tech}</li>
+                  ))}
+                </TechList>
+                <Links>
+                  <IconLink href={project.node.frontmatter.github} target="_blank" rel="noopener">
+                    <IconGithub />
+                  </IconLink>
+                  <IconLink href={project.node.frontmatter.external} target="_blank" rel="noopener">
+                    <IconExternal />
+                  </IconLink>
+                </Links>
+              </Project>
+            ))}
+        </ProjectsGrid>
+      </ProjectsContainer>
+    );
+  }
+}
 
 export default Projects;
diff --git a/src/content/featured/projectOne/index.md b/src/content/featured/projectOne/index.md
@@ -0,0 +1,13 @@
+---
+date: '2017-04-01'
+title: 'Featured Project One'
+image: ''
+github: 'asdf'
+external: 'asdfg'
+tech:
+  - React
+  - Webpack
+  - Firebase
+---
+
+Gluten-free you probably haven't heard of them jianbing pitchfork pabst. Kombucha occupy iPhone live-edge beard iceland freegan small batch before they sold out DIY marfa chillwave sustainable taiyaki bushwick
diff --git a/src/content/featured/projectThree/index.md b/src/content/featured/projectThree/index.md
@@ -0,0 +1,13 @@
+---
+date: '2017-06-01'
+title: 'Featured Project Three'
+image: ''
+github: 'asdf'
+external: 'asdfg'
+tech:
+  - React
+  - Webpack
+  - Firebase
+---
+
+Gluten-free you probably haven't heard of them jianbing pitchfork pabst. Kombucha occupy iPhone live-edge beard iceland freegan small batch before they sold out DIY marfa chillwave sustainable taiyaki bushwick
diff --git a/src/content/featured/projectTwo/index.md b/src/content/featured/projectTwo/index.md
@@ -0,0 +1,13 @@
+---
+date: '2017-06-01'
+title: 'Featured Project Two'
+image: ''
+github: 'asdf'
+external: 'asdfg'
+tech:
+  - React
+  - Webpack
+  - Firebase
+---
+
+Gluten-free you probably haven't heard of them jianbing pitchfork pabst. Kombucha occupy iPhone live-edge beard iceland freegan small batch before they sold out DIY marfa chillwave sustainable taiyaki bushwick
diff --git a/src/content/projects/projectOne/index.md b/src/content/projects/projectOne/index.md
@@ -1,9 +1,13 @@
 ---
-image: ''
-date: '2017-12-01'
+date: '2017-04-01'
 title: 'Project One'
+image: ''
+github: 'asdf'
+external: 'asdfg'
 tech:
   - React
   - Webpack
   - Firebase
 ---
+
+Gluten-free you probably haven't heard of them jianbing pitchfork pabst. Kombucha occupy iPhone live-edge beard iceland freegan small batch before they sold out DIY marfa chillwave sustainable taiyaki bushwick
diff --git a/src/content/projects/projectThree/index.md b/src/content/projects/projectThree/index.md
@@ -0,0 +1,13 @@
+---
+date: '2017-06-01'
+title: 'Project Three'
+image: ''
+github: 'asdf'
+external: 'asdfg'
+tech:
+  - React
+  - Webpack
+  - Firebase
+---
+
+Gluten-free you probably haven't heard of them jianbing pitchfork pabst. Kombucha occupy iPhone live-edge beard iceland freegan small batch before they sold out DIY marfa chillwave sustainable taiyaki bushwick
diff --git a/src/content/projects/projectTwo/index.md b/src/content/projects/projectTwo/index.md
@@ -0,0 +1,13 @@
+---
+date: '2017-06-01'
+title: 'Project Two'
+image: ''
+github: 'asdf'
+external: 'asdfg'
+tech:
+  - React
+  - Webpack
+  - Firebase
+---
+
+Gluten-free you probably haven't heard of them jianbing pitchfork pabst. Kombucha occupy iPhone live-edge beard iceland freegan small batch before they sold out DIY marfa chillwave sustainable taiyaki bushwick