Finish (#31)

* Dockerfile

Add docker file and nginx config

* Add dev script

* Add gatsby as dev dependency

* Upgrade [email protected]

* Updates the README

* Update lock file

* Update about.md

Author: npalm

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+Dockerfile*
+.dockerignore
+.git
+.gitignore

.gitignore

@@ -1,8 +1,7 @@
 node_modules/
-public
+public/
 .gatsby-context.js
 .DS_Store
 .intermediate-representation/
 .cache/
-yarn.lock
 package-lock.json

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:10 AS build
+MAINTAINER Niek Palm <[email protected]>
+
+WORKDIR /app
+ADD . /app
+RUN rm -rf node_modules
+RUN npm install -g [email protected]
+RUN yarn && yarn build
+
+
+FROM nginx:1.15.3
+RUN rm -rf /usr/share/nginx/html
+COPY --from=build /app/public /usr/share/nginx/html
+
+COPY nginx/default.conf /etc/nginx/conf.d/mysite.template
+COPY nginx/start.sh /usr/bin
+
+CMD ["start.sh"]

README.md

@@ -1,9 +1,86 @@
 # 040 code blog
 
+## Purpose
+
+This repo contains the source of the [040 code blog](https://040code.github.io).
+
+## The blog
+
+The 040 code blog is an initiative from Developers that have a relation with the city [Eindhoven](https://www.thisiseindhoven.com/en), in the [Netherlands](https://www.youtube.com/watch?v=eE_IUPInEuc). The name `040` points to area code used at the time we used the old landline for calling our friends and family.
+
+Articles on this blog are our ideas, experiments and opinion. For each blog post we make a nice picture from a place in Eindhoven that we like for some reason.
+
+## Credits
+
+This blog is created with the [Gatsby](https://www.gatsbyjs.org/), an awesome framework to create a static blog using [React](https://reactjs.org/) and [GraphQL](https://graphql.org/). And to get even faster started we have based the blog on the React Starter [gatsby-starter-morning-dew](https://github.com/maxpou/gatsby-starter-morning-dew)
+
+## How to contribute
+
+Fork the repo, do your changes and create a pull request. Everybody is welcome to write an article.
+
+## How to run
+
+```
+yarn
+yarn dev
+```
+
+Visit: [http://localhost:8000](http://localhost:8000)
+Gatsby also delivers a graphiql interface in development mode: [http://localhost:8000/___graphql](http://localhost:8000/___graphql)
 
 ## Writing a post
 
-### asciinema player
+### Directory
+Create a directory with the following format: `YYYY-MM-DD-<slug>` in the `/content/posts/` directory. Simply copy an existing posts directory f.e. [this post](https://github.com/040code/gatsby/tree/master/content/posts/2017-04-20-discovery-agent).
+
+### Post
+Change the `index.md` file. This is basically where you write your post. 
+
+### Images
+Images needed for the post can be stored in the same directory and referred to in the post with: 
+
+```
+<a href="#">
+    <img src="./image-name.png" height="100%" width="100%" alt="alttext">
+</a>
+```
+
+### Frontmatter
+
+A frontmatter is needed for Gatsby to know how to display the post.
+
+Example of a frontmatter:
+
+```
+---
+title:      "Git Bisect"
+slug:       "2019/03/13/git-bisect"
+subtitle:   "Find the bug-introducing commit with Git Bisect"
+date:       2019-03-13
+cover:      "./background.png"
+coverLink:  "https://goo.gl/maps/jSKonnGYR1u"
+coverDescription: "Frits Philipslaan"
+imageFb:    "./2019-03-13-git-bisect-fb.png"
+imageTw:    "./2019-03-13-git-bisect-tw.png"
+asciinema:  true
+type:        post
+tags:
+  - 'git'
+  - 'rust'
+authors:    
+  - jeroen
+---
+```
+
+Most fields are self-explaining. We formatted the `slug` with backslashes so the urls are nice.
+`cover` is the header image.
+`coverLink` and `coverDescription` are optional. When given, a link to google maps is shown in the right bottom corner. 
+`imageFb` and `imageTw` are thumbnails for socialmedia. They can be automatically created by running: `yarn generatePostPreviewImages`.
+`asciinema` can be set to true to use the awesome asciinema player.
+`type` must be set to `post`.
+`authors` must be set to an existing author in the `content/authors` directory. If you're new, feel free to add yourself as an author. 
+
+#### More info on asciinema player
 To add terminal recordings we use [asciinema](https://asciinema.org/docs/usage).
 
 Once you have captured the `json` of you recording add the file to a folder in `static/<slug>`. This folder will be served as static content.
@@ -23,4 +100,10 @@ asciinema:  true
   cols="166" rows="18">
 </asciinema-player>
 
-```
+```
+
+## License
+MIT
+
+## Authors
+[Contributors](./graphs/contributors)

bin/dev.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+docker run -d --rm --name blog -p 8000:8000 -w /app -v $(pwd):/app node:10 /bin/bash -c "npm install && npm install -g gatsby-cli && gatsby develop --host=0.0.0.0"
+
+echo "Waiting blog to launch on 8000..."
+
+waitport() {
+  set -e
+  while ! curl --output /dev/null --silent --head --fail http://localhost:$1; do sleep 1 && echo -n .; done;
+  set +e
+}
+
+waitport 8000
+
+echo "blog launched on http://localhost:8000"
+echo "Have fun!"

content/pages/about/about.md

@@ -9,7 +9,7 @@ type: page
 
 # The blog
 
-The 040 code blog is an initiative from Developers that have a relation with the city [Eindhoven](https://www.thisiseindhoven.com/en), in the [Netherlonds](https://www.youtube.com/watch?v=eE_IUPInEuc). The name `040` points to area code used at the time we used the old landline for calling our friends and family.
+The 040 code blog is an initiative from Developers that have a relation with the city [Eindhoven](https://www.thisiseindhoven.com/en), in the [Netherlands](https://www.youtube.com/watch?v=eE_IUPInEuc). The name `040` points to area code used at the time we used the old landline for calling our friends and family.
 
 Articles on this blog are our ideas, experiments and opinion. For each blog post we make a nice picture from a place in Eindhoven that we like for some reason.
 <p><br></p>

data/siteConfig.js

@@ -1,6 +1,6 @@
 module.exports = {
   siteTitle: '040code',
-  siteDescription: "A developers blog",
+  siteDescription: 'A developers blog',
   authorName: '040 code',
   twitterUsername: 'niekos77',
   authorAvatar: '',
@@ -25,20 +25,20 @@ module.exports = {
     },
     {
       label: 'Niek Palm',
-      url: '/authors/niek'
+      url: '/authors/niek',
     },
     {
       label: 'Maarten Metz',
-      url: '/authors/maarten'
+      url: '/authors/maarten',
     },
     {
       label: 'Jeroen Knoops',
-      url: '/authors/jeroen'
+      url: '/authors/jeroen',
     },
     {
       label: 'Stefan van den Oord',
-      url: '/authors/stefan'
-    }
+      url: '/authors/stefan',
+    },
   ],
   // Footer information (ex: Github, Netlify...)
   footerLinks: [

nginx/default.conf

@@ -0,0 +1,10 @@
+server {
+    listen       ${NGNIX_PORT};
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+    }
+
+}

nginx/start.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+export NGNIX_PORT=${PORT:=80}
+echo nginx will liston on port $NGNIX_PORT
+envsubst < /etc/nginx/conf.d/mysite.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'

package.json

@@ -37,9 +37,10 @@
   "devDependencies": {
     "eslint": "^5.7.0",
     "eslint-plugin-react": "^7.7.0",
+    "gatsby-cli": "^2.5.12",
     "prettier": "^1.12.0",
     "puppeteer": "^1.9.0",
-    "semantic-release": "^15.13.3",
+    "semantic-release": "^15.13.12",
     "yaml": "^1.0.0"
   },
   "homepage": "https://040code.github.io",