first commit

.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+.gatsby-context.js
+.sass-cache/
+.cache/
+.DS_Store
+

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 70,
+}

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 gatsbyjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -0,0 +1,27 @@
+# Gatsby.js MDX Blog Starter Project
+
+A starter project in [Gatsby,js](https://www.gatsbyjs.org/) with [MDX](https://github.com/mdx-js/mdx).
+
+## Features
+
+* MDX: (React) Code in Markdown
+* Prism.js: Syntax Highlighting
+* Pagination
+* Categrories
+* Styled Components
+
+## Setup
+
+* `git clone git@github.com:rwieruch/gatsby-mdx-blog-starter-project.git`
+* `cd gatsby-mdx-blog-starter-project`
+* `npm install`
+* `gatsby develop`
+* visit http://localhost:8000
+
+## Setup via Gatsby CLI
+
+* `gatsby new gatsby-mdx-blog-starter-project git@github.com:rwieruch/gatsby-mdx-blog-starter-project.git`
+* `cd gatsby-mdx-blog-starter-project`
+* `npm install`
+* `gatsby develop`
+* visit http://localhost:8000

content/blog/example/index.md

@@ -0,0 +1,68 @@
+---
+slug: "/mdx-example"
+date: "2017-07-13T03:49:16.408Z"
+title: "MDX Example"
+description: "MDX Example Description ..."
+categories: ["react"]
+keywords: ["react"]
+banner: "./images/banner.jpg"
+---
+
+import Link from "$components/Link";
+import Counter from "$components/Counter";
+
+When we shift gears toward GraphQL on the server side, we will implement a GraphQL API that can eventually be consumed into client-side operations. By the end, you should have a firm grasp about using GraphQL in almost all JavaScript applications. I say 'almost' because there are always new libraries, patterns, and best practices that need to be learned to keep up with emerging technology.
+
+# A React component in Markdown:
+
+<Counter />
+
+## Code Snippet
+
+Code Snippet:
+
+```jsx{1,4-6}
+import React, { Component } from 'react';
+
+class Counter extends Component {
+  state = {
+    counter: 0,
+  };
+
+  onIncrement = () => {
+    this.setState(state => ({ counter: state.counter + 1 }));
+  };
+
+  onDecrement = () => {
+    this.setState(state => ({ counter: state.counter - 1 }));
+  };
+
+  render() {
+    return (
+      <div>
+        {this.state.counter}
+        <button onClick={this.onIncrement} type="button">
+          Increment
+        </button>
+        <button onClick={this.onDecrement} type="button">
+          Decrement
+        </button>
+      </div>
+    );
+  }
+}
+
+export default Counter;
+```
+
+Hello `foo` bar
+
+An external Link:
+
+<Link to="https://roadtoreact.com/">Find out more about it</Link>
+
+An Image:
+
+![Some Cover Image](./images/banner.jpg)
+
+That's it.

content/blog/graphql-book/index.md

@@ -0,0 +1,27 @@
+---
+slug: "/graphql-book"
+date: "2018-07-18T13:35:13.234Z"
+title: "The Road to GraphQL"
+description: "GraphQL Description ..."
+categories: ["graphql", "javascript"]
+keywords: ["graphql", "book"]
+banner: "./images/banner.jpg"
+---
+
+import Link from "$components/Link";
+
+The central theme of this book is GraphQL in modern applications. While GraphQL is only a specification that can be used in many programming languages, this book focuses on GraphQL in JavaScript. Facebook--the company behind the GraphQL--didn't release GraphQL's reference implementation in JavaScript, but it remains one of the more compelling languages for mordern client-server architecture. Using Facebook's specification as their blueprint, other programming languages like Python and Java followed.
+
+<Link to="https://roadtoreact.com/">Find out more about it</Link>
+
+GraphQL a query language that can be used anywhere, but it often bridges the gap between client and server applications. It isn't opionated about which network layer is used, so data can be read and written between client and server applications. It is used to complement the network stack for many libraries and frameworks in JavaScript. The client side takes advancategorye of popular solutions like React, Angular, and Vue, while the server side can use middleware libraries like Express, Koa, and Hapi in a Node.js environment. It is just a matter of sending GraphQL operations with plain HTTP across the wire.
+
+The emergence of GraphQL introduces a new era in web development. RESTful applications were the industry favorite for data transfers between client and server applications, but modern requirements have shifted. Applications have to deal with multiple clients--i.e. desktop, web, mobile, wearables--which are all interested in APIs exposed by server applications. The choice becomes one between using multiple client-specific APIs with REST, or just one API with GraphQL for all client applications, which hardly seems like a choice at all. GraphQL is more than just a unified interface, though; its ecosystem offers powerful capbilities and even more potential as its open source community grows.
+
+For me, it was a lucky coincidence that a former coworker open-sourced the GraphQL implementation for Java. He worked to become one of GraphQL's first open source contributors, eventually creating one of the go-to implementations for Java. The experience shaped my own thinking about GraphQL, which was expanded when my employer evaluated GraphQL for their enterprise application. The glue between our client and server application was largely influenced by REST, but we had API endpoints for all our RESTful resources in place, eventually running into issues like Facebook for API-consuming client-dide applications. The API endpoints were too rigid, so they required aggregations and modifications. An aggregation means putting resources a singular API endpoint, where a modification is to offer variations of an API endpoint to request different representations of a resource. We introduced our own implementation to request resources from the server, and avoided modifying endpoints. But the aggregations were still in place, so we had our own naive implementation of GraphQL, though it was only able to query one resource and didn't understand relationships. From a client-side perspective, only Relay for React was as sophisticated a library in terms of consuming GraphQL APIs, so we invested time in this as well. In the end, GraphQL was too early in its development, so we postponed introducing it to our technology stack. Admittedly, none of us knew it would become so powerful or so popular.
+
+This book starts with GraphQL in client-side applications, so you will use React as a UI library to consume your first third-party GraphQL API, which happens to be GitHub's GraphQL API. It is a popular choice among developers for a couple reasons: GitHub was one of few popular companies to releas a GraphQL API to the public; GitHub's subsequent growth has granted some credibility to GraphQL itself; and a third-party API usually focuses on client-side GraphQL in the beginning. This book teaches how to consume the GraphQL API into a client application without exposing it to the server.
+
+When we shift gears toward GraphQL on the server side, we will implement a GraphQL API that can eventually be consumed into client-side operations. By the end, you should have a firm grasp about using GraphQL in almost all JavaScript applications. I say 'almost' because there are always new libraries, patterns, and best practices that need to be learned to keep up with emerging technology.
+
+I sincerely hope this book provides an optimal learning experience for GraphQL. While you might not use React or Express daily, you should be able to apply these teachings in other solutions like Angular, Vue, Koa, or Hapi.

content/blog/react-book/index.md

@@ -0,0 +1,19 @@
+---
+slug: "/react-book"
+date: "2017-07-14T03:49:16.408Z"
+title: "The Road to learn React"
+description: "The Road to learn React Description ..."
+categories: ["react"]
+keywords: ["react", "book"]
+banner: "./images/banner.jpg"
+---
+
+import Link from "$components/Link";
+
+The Road to learn React teaches the fundamentals of React. You will build a real-world application in plain React without complicated tooling. Everything from project setup to deployment on a server will be explained for you. The book comes with additional referenced reading material and exercises with each chapter. After reading the book, you will be able to build your own applications in React. The material is kept up to date by myself and the community.
+
+In the Road to learn React, I offer a foundation before you dive into the broader React ecosystem. The concepts will have less tooling and less external state management, but a lot of information about React. It explains general concepts, patterns, and best practices in a real world React application.
+
+<Link to="https://roadtoreact.com/">Find out more about it</Link>
+
+Essentially, you will learn to build your own React application from scratch, with features like pagination, client-side caching, and interactions like searching and sorting. Additionally, you will transition from JavaScript ES5 to JavaScript ES6. I hope this book captures my enthusiasm for React and JavaScript, and that it helps you get started with it.

gatsby-config.js

@@ -0,0 +1,65 @@
+module.exports = {
+  pathPrefix: '/',
+  siteMetadata: {
+    siteUrl: 'https://www.robinwieruch.de/',
+    author: 'Robin Wieruch',
+    title: 'Gatsby MDX Starter Project',
+    description: 'My Gatsby MDX Starter Project',
+    keywords: [
+      'Software Engineer',
+      'Web Developer',
+      'Consultant',
+      'Freelancer',
+    ],
+  },
+  plugins: [
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        path: `${__dirname}/content/blog`,
+        name: 'blog',
+      },
+    },
+    {
+      resolve: `gatsby-mdx`,
+      options: {
+        extensions: ['.mdx', '.md'],
+        gatsbyRemarkPlugins: [
+          {
+            resolve: 'gatsby-remark-images',
+            options: {
+              maxWidth: 1035,
+              sizeByPixelDensity: true,
+            },
+          },
+          {
+            resolve: `gatsby-remark-prismjs`,
+            options: {
+              classPrefix: 'language-',
+              inlineCodeMarker: null,
+              aliases: {},
+            },
+          },
+        ],
+      },
+    },
+    'gatsby-plugin-sharp',
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-styled-components',
+    'gatsby-plugin-catch-links',
+    'gatsby-plugin-react-helmet',
+    {
+      resolve: 'gatsby-plugin-manifest',
+      options: {
+        name: 'A learning, teaching and writing software engineer',
+        short_name: 'RWieruch',
+        start_url: '/',
+        background_color: '#fff',
+        theme_color: '#525dce',
+        display: 'standalone',
+        icon: 'assets/logo.png',
+      },
+    },
+    'gatsby-plugin-offline',
+  ],
+};