pages content

src/utils/config.js → content/meta/config.js

@@ -1,4 +1,4 @@
-const colors = require("../styles/colors");
+const colors = require("../../src/styles/colors");
 
 module.exports = {
   pathPrefix: "",

content/pages/1--about/index.md

@@ -0,0 +1,41 @@
+---
+title: About
+---
+
+This is a demo site of the [Personal**Blog**](https://github.com/greglobinski/gatsby-starter-personal-blog) [GatsbyJs](https://www.gatsbyjs.org/) starter.
+
+The starter is a ready to use, easy to customize 'like theme' starter. It has everything what blog should have and some more.
+
+### Standard features:
+
+* Easy editable content in **Markdown** files (posts, pages and parts)
+* **SEO** (sitemap generation, robot.txt, meta and OpenGraph Tags)
+* **Social** sharing (Twitter, Facebook, Google, LinkedIn)
+* **Comments** (Facebook)
+* **Images** lazy loading and `webp` support (gatsby-image)
+* Post **categories** (post list filtering)
+* Full text **searching** (Algolia)
+* **Contact** form (Netlify form handling)
+* **RSS** feed
+* **PWA** (manifes.json, offline support, favicons)
+* Google **Analytics**
+* **Favicons** generator (node script)
+* **Material UI** (@next)
+
+### Advanced features:
+
+* Easy customizable base **styles** via `theme` object (fonts, colors, sizes)
+* **Components** leazy loading (social sharing, comments)
+* **ESLint** (google config)
+* **Prettier** code styling
+* Custom webpack `CommonsChunkPlugin` settings
+* Webpack `BundleAnalyzerPlugin`
+* Contact **form validation** (react-material-ui-form-validator)
+
+## About me
+
+My name is **Greg**. I am a front-end web developer. I love working with [GatsbyJs](https://www.gatsbyjs.org/). I love the UX it delivers out of the box for the end users and DX it provides to me as a developer. I decided to share the love by contributing in this way, sharing my code as starters. I hope somebody find that useful.
+
+For sure it's not my last [Gatsby starter](/starters). If you want to be in touch follow my on Twitter [@greglobinski](https://twitter.com/greglobinski)
+
+PS: Please be understanding. The English language is not my native language. If you find any bug or not clear words you can always do PR to [gatsby-starter-personal-blog](https://github.com/greglobinski/gatsby-starter-personal-blog), the repo contains the actual code of this demo.

content/pages/2--starters/index.md

@@ -0,0 +1,20 @@
+---
+title: Other GatsbyJs starters
+menuTitle: My starters
+---
+
+[Personal**Blog**](https://github.com/greglobinski/gatsby-starter-personal-blog) is not my first [GatsbyJs](https://www.gatsbyjs.org/) starter.
+
+![Simple**Landing**](./gatsby-starter-simple-landing.png)
+
+### SimpleLanding
+
+As the name says, it is a simple landing page.
+[Demo](gssl.greglobinski.com) | [Github repo](https://github.com/greglobinski/gatsby-starter-simple-landing)
+
+![Styled**Blog**](./gatsby-styled-blog-starter.jpg)
+
+### StyledBlog
+
+That is my first Gatsby starter. It is a forefather of the starter's demo you are looking at now. It will not be develop or update any longer.
+[Demo](gsbs.greglobinski.com) | [Github repo](https://github.com/greglobinski/gatsby-styled-blog-starter)

src/content/posts/2017-10-03--be-who-you-are/index.md → content/posts/2017-10-03--be-who-you-are/index.md

@@ -8,9 +8,13 @@ cover: photo-1489824904134-891ab64532f1-cover.jpg
 
 Proin suscipit luctus orci placerat fringilla. Donec hendrerit laoreet risus eget adipiscing. [Suspendisse](http://google.com) in urna ligula, a volutpat mauris. Sed enim mi, bibendum eu pulvinar vel, sodales vitae dui. Pellentesque sed sapien lorem, at lacinia urna. In hac habitasse platea dictumst. Vivamus vel justo in leo laoreet ullamcorper non vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ullamcorper rutrum.
 
-### Vestibulum orci tortor, sollicitudin ac euismod non, placerat ac augue.
+## H2 Vestibulum orci tortor, sollicitudin ac euismod non, placerat ac augue.
 
-Fusce a metus eu diam varius congue nec nec sapien. Nunc convallis accumsan justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada vehicula lectus, viverra sodales ipsum gravida nec. Integer gravida nisi ut magna mollis molestie. Nullam pharetra accumsan sagittis. Proin tristique rhoncus orci, eget vulputate nisi sollicitudin et. Quisque lacus augue, mollis non mollis et, ullamcorper in purus. Morbi et sem orci.
+Fusce a metus eu diam varius congue nec nec sapien. Nunc convallis accumsan justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada vehicula lectus.
+
+### H3 Vestibulum orci tortor, sollicitudin ac euismod non, placerat ac augue.
+
+Rviverra sodales ipsum gravida nec. Integer gravida nisi ut magna mollis molestie. Nullam pharetra accumsan sagittis. Proin tristique rhoncus orci, eget vulputate nisi sollicitudin et. Quisque lacus augue, mollis non mollis et, ullamcorper in purus. Morbi et sem orci.
 
 Praesent accumsan odio in ante ullamcorper id pellentesque mauris rhoncus. Duis vitae neque dolor. Duis sed purus at eros bibendum cursus nec a nulla. Donec turpis quam, ultricies id pretium sit amet, gravida eget leo.
 

gatsby-config.js

@@ -1,5 +1,5 @@
 require("dotenv").config();
-const config = require("./src/utils/config");
+const config = require("./content/meta/config");
 
 const query = `{
   allMarkdownRemark(filter: { id: { regex: "//posts|pages//" } }) {
@@ -53,22 +53,22 @@ module.exports = {
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        path: `${__dirname}/src/content/posts/`,
+        path: `${__dirname}/content/posts/`,
         name: "posts"
       }
     },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        path: `${__dirname}/src/content/pages/`,
+        path: `${__dirname}/content/pages/`,
         name: "pages"
       }
     },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `parts`,
-        path: `${__dirname}/src/content/parts/`
+        path: `${__dirname}/content/parts/`
       }
     },
     {

package.json

@@ -37,6 +37,7 @@
     "babel-eslint": "^8.2.1",
     "babel-plugin-dynamic-import-webpack": "^1.0.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "desvg-loader": "^0.1.0",
     "dotenv": "^5.0.0",
     "eslint": "^4.17.0",
     "eslint-config-google": "^0.9.1",
@@ -48,6 +49,7 @@
     "eslint-plugin-react": "^7.6.1",
     "prettier": "^1.10.2",
     "sharp-cli": "^1.6.0",
+    "svg-loader": "^0.0.2",
     "webpack-bundle-analyzer": "^2.10.0"
   },
   "dependencies": {
@@ -89,6 +91,7 @@
     "react-obfuscate": "^1.3.0",
     "react-redux": "^5.0.6",
     "react-share": "^2.0.0",
+    "react-svg": "^2.2.13",
     "redux": "^3.7.2",
     "redux-devtools-extension": "^2.13.2"
   }

src/components/ContactForm/ContactForm.js

@@ -5,8 +5,6 @@ import Button from "material-ui/Button";
 import { navigateTo } from "gatsby-link";
 import { TextValidator, ValidatorForm } from "react-material-ui-form-validator";
 
-//import { encode } from "../../utils/helpers";
-
 function encode(data) {
   return Object.keys(data)
     .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))

src/components/Disqus/Disqus.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import ReactDisqusComments from "react-disqus-comments";
 import PropTypes from "prop-types";
 
-import config from "../../utils/config";
+import config from "../../../component/meta/config";
 
 class Disqus extends Component {
   constructor(props) {

src/components/Info/Info.js

@@ -12,7 +12,9 @@ import { Manager, Target, Popper } from "react-popper";
 import ClickAwayListener from "material-ui/utils/ClickAwayListener";
 import Grow from "material-ui/transitions/Grow";
 import Paper from "material-ui/Paper";
-import classNames from "classnames";
+import classNames from "classnames"; 
+
+import StackIcons from "./StackIcons";
 
 import {
   setNavigatorIsAside,
@@ -390,6 +392,8 @@ class Info extends React.Component {
             </Popper>
           </Manager>
         </nav>
+
+        <StackIcons />
       </aside>
     );
   }

src/components/Info/StackIcons.js

@@ -0,0 +1,72 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import ReactSVG from "react-svg";
+import Link from "gatsby-link";
+
+const styles = theme => ({
+  wrapper: {
+    position: "absolute",
+    left: 0,
+    bottom: "60px",
+    width: "100%",
+    padding: "1em 2em"
+  },
+  box: {
+    display: "flex",
+    justifyContent: "center",
+    flexWrap: "wrap"
+  },
+  link: {
+    display: "inline-block",
+    padding: "8px"
+  },
+  svg: {
+    width: "24px",
+    height: "24px"
+  },
+  header: {
+    textAlign: "center",
+    fontSize: ".85em",
+    letterSpacing: ".3em",
+    width: "100%",
+    margin: "0 0 .8em 0",
+    fontWeight: 300
+  }
+});
+
+const StackIcons = props => {
+  const { classes } = props;
+
+  const items = [
+    { name: "gatsby", url: "https://www.gatsbyjs.org/" },
+    { name: "react", url: "https://reactjs.org/" },
+    { name: "graphql", url: "http://graphql.org/" },
+    { name: "jss", url: "http://cssinjs.org/" },
+    { name: "material-ui", url: "https://reactjs.org" },
+    { name: "redux", url: "https://redux.js.org/" },
+    { name: "algolia", url: "https://www.algolia.com/" },
+    { name: "webpack", url: "https://webpack.js.org/" },
+    { name: "babel", url: "https://babeljs.io/" },
+    { name: "netlify", url: "https://www.netlify.com/" }
+  ];
+
+  return (
+    <div className={classes.wrapper}>
+      <h5 className={classes.header}>built with:</h5>
+      <div className={classes.box}>
+        {items.map(item => (
+          <Link to={item.url} key={item.name} className={classes.link}>
+            <ReactSVG path={`/svg/${item.name}.svg`} className={classes.svg} />
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+StackIcons.propTypes = {
+  classes: PropTypes.object.isRequired
+};
+
+export default injectSheet(styles)(StackIcons);

src/components/Navigator/Posts.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import injectSheet from "react-jss";
 import { Scrollbars } from "react-custom-scrollbars";
 
-import config from "../../utils/config";
+import config from "../../../content/meta/config";
 
 const styles = theme => ({
   posts: {

src/components/Share/Share.js

@@ -15,7 +15,7 @@ import {
   LinkedinIcon
 } from "react-share";
 
-import config from "../../utils/config";
+import config from "../../../content/meta/config";
 
 const styles = theme => ({
   share: {

src/components/common/Avatar/Avatar.js

@@ -4,7 +4,7 @@ import injectSheet from "react-jss";
 import Avatar from "material-ui/Avatar";
 
 import avatar from "../../../images/avatar.jpg";
-import config from "../../../utils/config";
+import config from "../../../../content/meta/config";
 
 const styles = theme => ({
   avatar: {

src/components/common/Seo/Seo.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Helmet from "react-helmet";
-import config from "../../../utils/config";
+import config from "../../../../content/meta/config";
 
 const Seo = () => {
   const title = config.siteTitle;

src/components/common/Svg/SvgEl.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const SvgEl = props => {
+  return (
+    <svg
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox={props.svg.attributes.viewBox}
+      width="100%"
+      height="100%"
+    >
+      {props.svg.content}
+    </svg>
+  );
+};
+
+SvgEl.propTypes = {
+  svg: PropTypes.shape({
+    attributes: PropTypes.object,
+    content: PropTypes.node
+  }).isRequired
+};
+
+export default SvgEl;

src/styles/theme.js

@@ -90,8 +90,8 @@ const theme = createMuiTheme({
         lineHeight: 1.6
       },
       contentHeading: {
-        h2Size: 1.4,
-        h3Size: 1.2,
+        h2Size: 1.5,
+        h3Size: 1.3,
         weight: 600,
         lineHeight: 1.3
       },

src/utils/helpers.js

@@ -1,5 +0,0 @@
-export const encode = data => {
-  return Object.keys(data)
-    .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
-    .join("&");
-};

static/robots.txt

@@ -1 +1,3 @@
+User-agent: *
 
+sitemap: https://gatsby-starter-personal-blog/sitemap.xml