Skip to content

Commit 76a8f7e

Browse files
npalmnpalm
authored
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
1 parent 8ec413b commit 76a8f7e

21 files changed

+245
-87
lines changed

‎.dockerignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
Dockerfile*
3+
.dockerignore
4+
.git
5+
.gitignore

‎.gitignore

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
node_modules/
2-
public
2+
public/
33
.gatsby-context.js
44
.DS_Store
55
.intermediate-representation/
66
.cache/
7-
yarn.lock
87
package-lock.json

‎Dockerfile

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
FROM node:10 AS build
2+
MAINTAINER Niek Palm <[email protected]>
3+
4+
WORKDIR /app
5+
ADD . /app
6+
RUN rm -rf node_modules
7+
RUN npm install -g [email protected]
8+
RUN yarn && yarn build
9+
10+
11+
FROM nginx:1.15.3
12+
RUN rm -rf /usr/share/nginx/html
13+
COPY --from=build /app/public /usr/share/nginx/html
14+
15+
COPY nginx/default.conf /etc/nginx/conf.d/mysite.template
16+
COPY nginx/start.sh /usr/bin
17+
18+
CMD ["start.sh"]

‎README.md

Lines changed: 85 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,86 @@
11
# 040 code blog
22

3+
## Purpose
4+
5+
This repo contains the source of the [040 code blog](https://040code.github.io).
6+
7+
## The blog
8+
9+
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.
10+
11+
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.
12+
13+
## Credits
14+
15+
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)
16+
17+
## How to contribute
18+
19+
Fork the repo, do your changes and create a pull request. Everybody is welcome to write an article.
20+
21+
## How to run
22+
23+
```
24+
yarn
25+
yarn dev
26+
```
27+
28+
Visit: [http://localhost:8000](http://localhost:8000)
29+
Gatsby also delivers a graphiql interface in development mode: [http://localhost:8000/___graphql](http://localhost:8000/___graphql)
330

431
## Writing a post
532

6-
### asciinema player
33+
### Directory
34+
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).
35+
36+
### Post
37+
Change the `index.md` file. This is basically where you write your post.
38+
39+
### Images
40+
Images needed for the post can be stored in the same directory and referred to in the post with:
41+
42+
```
43+
<a href="#">
44+
<img src="./image-name.png" height="100%" width="100%" alt="alttext">
45+
</a>
46+
```
47+
48+
### Frontmatter
49+
50+
A frontmatter is needed for Gatsby to know how to display the post.
51+
52+
Example of a frontmatter:
53+
54+
```
55+
---
56+
title: "Git Bisect"
57+
slug: "2019/03/13/git-bisect"
58+
subtitle: "Find the bug-introducing commit with Git Bisect"
59+
date: 2019-03-13
60+
cover: "./background.png"
61+
coverLink: "https://goo.gl/maps/jSKonnGYR1u"
62+
coverDescription: "Frits Philipslaan"
63+
imageFb: "./2019-03-13-git-bisect-fb.png"
64+
imageTw: "./2019-03-13-git-bisect-tw.png"
65+
asciinema: true
66+
type: post
67+
tags:
68+
- 'git'
69+
- 'rust'
70+
authors:
71+
- jeroen
72+
---
73+
```
74+
75+
Most fields are self-explaining. We formatted the `slug` with backslashes so the urls are nice.
76+
`cover` is the header image.
77+
`coverLink` and `coverDescription` are optional. When given, a link to google maps is shown in the right bottom corner.
78+
`imageFb` and `imageTw` are thumbnails for socialmedia. They can be automatically created by running: `yarn generatePostPreviewImages`.
79+
`asciinema` can be set to true to use the awesome asciinema player.
80+
`type` must be set to `post`.
81+
`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.
82+
83+
#### More info on asciinema player
784
To add terminal recordings we use [asciinema](https://asciinema.org/docs/usage).
885

986
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
23100
cols="166" rows="18">
24101
</asciinema-player>
25102
26-
```
103+
```
104+
105+
## License
106+
MIT
107+
108+
## Authors
109+
[Contributors](./graphs/contributors)

‎bin/dev.sh

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
#!/bin/bash
2+
3+
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"
4+
5+
echo "Waiting blog to launch on 8000..."
6+
7+
waitport() {
8+
set -e
9+
while ! curl --output /dev/null --silent --head --fail http://localhost:$1; do sleep 1 && echo -n .; done;
10+
set +e
11+
}
12+
13+
waitport 8000
14+
15+
echo "blog launched on http://localhost:8000"
16+
echo "Have fun!"

‎content/pages/about/about.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ type: page
99

1010
# The blog
1111

12-
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.
12+
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.
1313

1414
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.
1515
<p><br></p>

‎data/siteConfig.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22
siteTitle: '040code',
3-
siteDescription: "A developers blog",
3+
siteDescription: 'A developers blog',
44
authorName: '040 code',
55
twitterUsername: 'niekos77',
66
authorAvatar: '',
@@ -25,20 +25,20 @@ module.exports = {
2525
},
2626
{
2727
label: 'Niek Palm',
28-
url: '/authors/niek'
28+
url: '/authors/niek',
2929
},
3030
{
3131
label: 'Maarten Metz',
32-
url: '/authors/maarten'
32+
url: '/authors/maarten',
3333
},
3434
{
3535
label: 'Jeroen Knoops',
36-
url: '/authors/jeroen'
36+
url: '/authors/jeroen',
3737
},
3838
{
3939
label: 'Stefan van den Oord',
40-
url: '/authors/stefan'
41-
}
40+
url: '/authors/stefan',
41+
},
4242
],
4343
// Footer information (ex: Github, Netlify...)
4444
footerLinks: [

‎nginx/default.conf

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
server {
2+
listen ${NGNIX_PORT};
3+
server_name localhost;
4+
5+
location / {
6+
root /usr/share/nginx/html;
7+
index index.html index.htm;
8+
}
9+
10+
}

‎nginx/start.sh

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#!/bin/bash
2+
3+
export NGNIX_PORT=${PORT:=80}
4+
echo nginx will liston on port $NGNIX_PORT
5+
envsubst < /etc/nginx/conf.d/mysite.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,10 @@
3737
"devDependencies": {
3838
"eslint": "^5.7.0",
3939
"eslint-plugin-react": "^7.7.0",
40+
"gatsby-cli": "^2.5.12",
4041
"prettier": "^1.12.0",
4142
"puppeteer": "^1.9.0",
42-
"semantic-release": "^15.13.3",
43+
"semantic-release": "^15.13.12",
4344
"yaml": "^1.0.0"
4445
},
4546
"homepage": "https://040code.github.io",

‎src/components/Article.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,7 @@ class Article extends React.Component {
1616

1717
return (
1818
<ArticleWrapper>
19-
<Content
20-
content={post.html}
21-
tags={post.frontmatter.tags}
22-
/>
19+
<Content content={post.html} tags={post.frontmatter.tags} />
2320
</ArticleWrapper>
2421
)
2522
}

‎src/components/AuthorBio.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,15 @@ class AuthorBio extends React.Component {
1717

1818
return (
1919
<Fragment>
20-
<AuthorAvatar style={{ backgroundImage: `url("${author.frontmatter.avatar.publicURL}")` }} />
21-
<AuthorHandles author={author}/>
22-
<Content
23-
content={author.html}
20+
<AuthorAvatar
21+
style={{
22+
backgroundImage: `url("${author.frontmatter.avatar.publicURL}")`,
23+
}}
2424
/>
25+
<AuthorHandles author={author} />
26+
<Content content={author.html} />
2527
</Fragment>
2628
)
2729
}
2830
}
29-
export default AuthorBio
31+
export default AuthorBio

‎src/components/AuthorHandles.js

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,14 @@ const SocialWrapper = styled.div`
1515
color: #ffffff;
1616
font-size: 2em;
1717
}
18-
`
18+
`
1919
class AuthorHandles extends React.Component {
20-
21-
2220
render() {
2321
const { github, linkedin, twitter, email } = this.props.author.frontmatter
24-
22+
2523
const TwitterLink = ({ handle }) => {
2624
return (
27-
<span className="social-item" >
25+
<span className="social-item">
2826
<a className="social-link" href={`https://twitter.com/${handle}`}>
2927
<FaTwitter />
3028
</a>
@@ -34,7 +32,7 @@ class AuthorHandles extends React.Component {
3432

3533
const GithubLink = ({ handle }) => {
3634
return (
37-
<span className="social-item" >
35+
<span className="social-item">
3836
<a className="social-link" href={`https://github.com/${handle}`}>
3937
<FaGithub />
4038
</a>
@@ -44,8 +42,11 @@ class AuthorHandles extends React.Component {
4442

4543
const LinkedinLink = ({ handle }) => {
4644
return (
47-
<span className="social-item" >
48-
<a className="social-link" href={`https://www.linkedin.com/in/${handle}`}>
45+
<span className="social-item">
46+
<a
47+
className="social-link"
48+
href={`https://www.linkedin.com/in/${handle}`}
49+
>
4950
<FaLinkedin />
5051
</a>
5152
</span>
@@ -54,7 +55,7 @@ class AuthorHandles extends React.Component {
5455

5556
const EmailLink = ({ handle }) => {
5657
return (
57-
<span className="social-item" >
58+
<span className="social-item">
5859
<a className="social-link" href={`mailto:${handle}`}>
5960
<FaEnvelope />
6061
</a>
@@ -64,12 +65,12 @@ class AuthorHandles extends React.Component {
6465

6566
return (
6667
<SocialWrapper>
67-
<TwitterLink handle={twitter} />
68-
<GithubLink handle={github} />
69-
<LinkedinLink handle={linkedin} />
70-
<EmailLink handle={email} />
68+
<TwitterLink handle={twitter} />
69+
<GithubLink handle={github} />
70+
<LinkedinLink handle={linkedin} />
71+
<EmailLink handle={email} />
7172
</SocialWrapper>
7273
)
7374
}
7475
}
75-
export default AuthorHandles
76+
export default AuthorHandles

‎src/components/Content.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const ContentBody = styled.div`
66
line-height: 1.6;
77
88
& > h2:first-of-type {
9-
padding-top: 0;
9+
padding-top: 0;
1010
}
1111
1212
& > h2 {
@@ -16,7 +16,7 @@ const ContentBody = styled.div`
1616
}
1717
1818
& > h3:first-of-type {
19-
padding-top: 0;
19+
padding-top: 0;
2020
}
2121
2222
& > h3 {
@@ -77,8 +77,8 @@ const ContentBody = styled.div`
7777
margin-right: -1em;
7878
margin-left: -1em;
7979
padding-right: 1em;
80-
padding-left: .75em;
81-
border-left: .25em solid #ffa7c4;
80+
padding-left: 0.75em;
81+
border-left: 0.25em solid #ffa7c4;
8282
}
8383
8484
& p > code.language-text,
@@ -111,7 +111,7 @@ class Content extends React.Component {
111111

112112
return (
113113
<section>
114-
{(tags) && <ContentHeader tags={tags} />}
114+
{tags && <ContentHeader tags={tags} />}
115115
<ContentBody dangerouslySetInnerHTML={{ __html: content }} />
116116
</section>
117117
)

0 commit comments

Comments
 (0)