├── hugo_src
    ├── themes
    │   └── hugo_theme_robust
    │   │   ├── static
    │   │       ├── css
    │   │       │   ├── custom.css
    │   │       │   └── styles.css
    │   │       └── images
    │   │       │   └── default.jpg
    │   │   ├── images
    │   │       ├── tn.png
    │   │       └── screenshot.png
    │   │   ├── theme.toml
    │   │   ├── layouts
    │   │       ├── partials
    │   │       │   ├── pagination.html
    │   │       │   ├── default_foot.html
    │   │       │   ├── sidebar.html
    │   │       │   └── default_head.html
    │   │       ├── _default
    │   │       │   ├── li.html
    │   │       │   ├── terms.html
    │   │       │   ├── list.html
    │   │       │   └── single.html
    │   │       ├── index.html
    │   │       └── rss.xml
    │   │   ├── LICENSE.md
    │   │   └── README.md
    └── config.toml
├── Webhook.png
├── .gitignore
├── tsconfig.json
├── package.json
├── LICENSE.md
├── docker-compose.yaml
├── modules_src
    ├── hugo.ts
    └── contentful.ts
├── foopipes.yml
└── Readme.md


/hugo_src/themes/hugo_theme_robust/static/css/custom.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Webhook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AreteraAB/Contentful2Hugo/HEAD/Webhook.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | modules/
2 | node_modules/
3 | output/
4 | contentfulkvs/
5 | hugo_src/content/
6 | hugo_src/static/
7 | start.ps1
8 | .vs/
9 | 


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/images/tn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AreteraAB/Contentful2Hugo/HEAD/hugo_src/themes/hugo_theme_robust/images/tn.png


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/images/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AreteraAB/Contentful2Hugo/HEAD/hugo_src/themes/hugo_theme_robust/images/screenshot.png


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/static/images/default.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AreteraAB/Contentful2Hugo/HEAD/hugo_src/themes/hugo_theme_robust/static/images/default.jpg


--------------------------------------------------------------------------------
/hugo_src/config.toml:
--------------------------------------------------------------------------------
 1 | contentdir = "content"
 2 | layoutdir = "layouts"
 3 | publishdir = "public"
 4 | builddrafts = false
 5 | baseurl = "http://yoursite.example.com/"
 6 | canonifyurls = true
 7 | 
 8 | [taxonomies]
 9 |   category = "categories"
10 |   tag = "tags"
11 | 
12 | [params]
13 |   description = "Tesla's Awesome Hugo Site"
14 |   author = "Nikola Tesla"
15 |   


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/theme.toml:
--------------------------------------------------------------------------------
 1 | name = "Robust"
 2 | license = "MIT"
 3 | licenselink = "https://github.com/dim0627/hugo_theme_robust/blob/master/LICENSE.md"
 4 | description = "Robust is blog theme for hugo."
 5 | tags = ["blog"]
 6 | features = ["blog"]
 7 | min_version = 0.15
 8 | 
 9 | [author]
10 |     name = "Daisuke Tsuji"
11 |     homepage = "http://yet.unresolved.xyz/"
12 | 
13 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": true,
 3 |   "compilerOptions": {
 4 |     "target": "es6",
 5 |     "module": "commonjs",
 6 |     "moduleResolution": "node",
 7 |     "noImplicitAny": false,
 8 |     "removeComments": true,
 9 |     "preserveConstEnums": true,
10 |     "sourceMap": true,
11 |     "rootDir": "modules_src",
12 |     "outDir": "modules"
13 |   },
14 |   "exclude": [
15 |     "node_modules"
16 |   ]
17 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Contentful2Hugo",
 3 |   "version": "1.0.0",
 4 |   "description": "Contentful2Hugo using Foopipes",
 5 |   "scripts": {
 6 |     "test": "echo \"Error: no test specified\" && exit 1"
 7 |   },
 8 |   "author": "",
 9 |   "license": "ISC",
10 |   "dependencies": {
11 |     "foopipes": "^0.6.2",
12 |     "contentful": "^3.7.0"
13 |   },
14 |   "devDependencies": {
15 |     "@types/node": "^6.0.45",
16 |     "typescript": "next"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/layouts/partials/pagination.html:
--------------------------------------------------------------------------------
 1 | {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
 2 | <nav class="paging">
 3 |   {{ if .Paginator.HasPrev }}
 4 |   <a href="{{ .URL }}page/{{ .Paginator.Prev.PageNumber }}" class="left" rel="prev">PREV</a>
 5 |   {{ end }}
 6 | 
 7 |   {{ if .Paginator.HasNext }}
 8 |   <a href="{{ .URL }}page/{{ .Paginator.Next.PageNumber }}" class="right" rel="next">NEXT</a>
 9 |   {{ end }}
10 | </nav>
11 | {{ end }}
12 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright 2017 Aretera AB
2 | 
3 | Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
4 | 
5 | http://www.apache.org/licenses/LICENSE-2.0
6 | 
7 | Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/layouts/_default/li.html:
--------------------------------------------------------------------------------
 1 | <article class="li">
 2 |   <a href="{{ .Permalink }}" class="clearfix">
 3 |     <div class="image" style="background-image: url({{ $.Site.BaseURL }}images/{{ with .Params.image }}{{ . }}{{ else }}default.jpg{{ end }});"></div>
 4 |     <div class="detail">
 5 |       <time>{{ with .Site.Params.DateForm }}{{ $.Date.Format . }}{{ else }}{{ $.Date.Format "Mon, Jan 2, 2006" }}{{ end }}</time>
 6 |       <h2 class="title">{{ .Title }}</h2>
 7 |       <div class="summary">{{ .Summary }}</div>
 8 |     </div>
 9 |   </a>
10 | </article>
11 | 


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/layouts/_default/terms.html:
--------------------------------------------------------------------------------
 1 | <div class="list">
 2 |   {{ partial "default_head.html" . }}
 3 |   <div class="row">
 4 |     <div class="col-sm-9">
 5 | 
 6 |       <header class="title"><h1>{{ .Title }}</h1></header>
 7 | 
 8 |       {{ range $key, $value := .Data.Terms }}
 9 |       <a href="/{{ $.Data.Plural }}/{{ $key | urlize }}/" class="{{ $.Data.Singular }}">{{ $key }}</a>
10 |       {{ end }}
11 | 
12 |     </div>
13 | 
14 |     <div class="col-sm-3">
15 |       {{ partial "sidebar.html" . }}
16 |     </div>
17 | 
18 |   </div>
19 |   {{ partial "default_foot.html" . }}
20 | </div>
21 | 


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/layouts/index.html:
--------------------------------------------------------------------------------
 1 | <div class="index">
 2 |   {{ partial "default_head.html" . }}
 3 |   <div class="row">
 4 |     <div class="col-sm-9">
 5 | 
 6 |       <div class="articles">
 7 |         <div class="row">
 8 |           {{ range $key, $value := .Paginator.Pages }}
 9 |           <div class="col-sm-{{ if lt $key 4 }}6{{ else }}4{{ end }}">
10 |             {{ .Render "li" }}
11 |           </div>
12 |           {{ end }}
13 |         </div>
14 |       </div>
15 | 
16 |       {{ partial "pagination.html" . }}
17 | 
18 |     </div>
19 | 
20 |     <div class="col-sm-3">
21 |       {{ partial "sidebar.html" . }}
22 |     </div>
23 | 
24 |   </div>
25 |   {{ partial "default_foot.html" . }}
26 | </div>
27 | 


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/layouts/_default/list.html:
--------------------------------------------------------------------------------
 1 | <div class="list">
 2 |   {{ partial "default_head.html" . }}
 3 |   <div class="row">
 4 |     <div class="col-sm-9">
 5 | 
 6 |       <header class="title"><h1>{{ .Title }}</h1></header>
 7 | 
 8 |       <div class="articles">
 9 |         <div class="row">
10 |           {{ range (.Paginate .Data.Pages).Pages }}
11 |           <div class="col-sm-4">
12 |             {{ .Render "li" }}
13 |           </div>
14 |           {{ end }}
15 |         </div>
16 |       </div>
17 | 
18 |       {{ partial "pagination.html" . }}
19 | 
20 |     </div>
21 | 
22 |     <div class="col-sm-3">
23 |       {{ partial "sidebar.html" . }}
24 |     </div>
25 | 
26 |   </div>
27 |   {{ partial "default_foot.html" . }}
28 | </div>
29 | 


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/layouts/rss.xml:
--------------------------------------------------------------------------------
 1 | <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
 2 |   <channel>
 3 |     <title>{{ .Site.Title }} </title>
 4 |     <link>{{ .Permalink }}</link>
 5 |     <language>en-us</language>
 6 |     <author>{{ .Site.Params.Author }}</author>
 7 |     <rights>(C) {{ .Site.LastChange.Year }}</rights>
 8 |     <updated>{{ .Date }}</updated>
 9 | 
10 |     {{ range .Data.Pages }}
11 |       {{ if eq .Type "post"}}
12 |         <item>
13 |           <title>{{ .Title }}</title>
14 |           <link>{{ .Permalink }}</link>
15 |           <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 MST" }}</pubDate>
16 |           <author>{{ .Site.Params.Author }}</author>
17 |           <guid>{{ .Permalink }}</guid>
18 |           <description>{{ .Content | html }}</description>
19 |         </item>
20 |       {{ end }}
21 |     {{ end }}
22 | 
23 |   </channel>
24 | </rss>
25 | 


--------------------------------------------------------------------------------
/docker-compose.yaml:
--------------------------------------------------------------------------------
 1 | version: '2'
 2 | services:
 3 |   hugo:
 4 |     image: jojomi/hugo
 5 |     volumes:
 6 |      - ./hugo_src:/src
 7 |      - ./output/:/output
 8 |     environment:
 9 |      - HUGO_WATCH=True
10 |      - HUGO_THEME=hugo_theme_robust
11 |      - HUGO_BASEURL=localhost
12 |     command: ["/run.sh", "--appendPort=false"]
13 | 
14 |   foopipes:
15 |     image: aretera/foopipes:latest-sdk
16 |     volumes:
17 |      - .:/project
18 |      - ./hugo_src/content:/var/output
19 |      - ./hugo_src/static/images/:/var/images
20 |     ports:
21 |      - 5000:80
22 |     environment:
23 |      - spaceId=${spaceId}
24 |      - accessToken=${accessToken}
25 | 
26 |   web:
27 |      image: jojomi/nginx-static
28 |      volumes:
29 |       - ./output:/var/www
30 |      environment:
31 |       - VIRTUAL_HOST=localhost
32 |      ports:
33 |       - 80:80
34 |      restart: always
35 |   ngrok:
36 |      image: wernight/ngrok
37 |      links: 
38 |       - foopipes
39 |      ports:
40 |       - 4040:4040
41 |      command: ["ngrok", "http", "foopipes:5000"]
42 |    


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Daisuke Tsuji.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/README.md:
--------------------------------------------------------------------------------
 1 | ![screenshot](https://raw.githubusercontent.com/dim0627/hugo_theme_robust/master/images/screenshot.png)
 2 | 
 3 | # Features
 4 | 
 5 | * Google Analytics
 6 | * Disqus
 7 | * Share Buttons(fb, twitter, google+, pocket)
 8 | * Eye-catching Image
 9 | * MicroData
10 | * Readable text(Customized Vertical Rhythm).
11 | 
12 | # Installation
13 | 
14 | [hugoThemes#Installing Themes](https://github.com/spf13/hugoThemes#installing-themes).
15 | 
16 | # Configuration
17 | 
18 | **config.yaml**
19 | 
20 | ``` toml
21 | baseurl = "http://hugo.spf13.com/"
22 | title = "Hugo Themes"
23 | author = "Steve Francia"
24 | copyright = "Copyright (c) 2008 - 2014, Steve Francia; all rights reserved."
25 | canonifyurls = true
26 | paginate = 3
27 | 
28 | [params]
29 |   disqusShortname = "your disqus id." # optional
30 | ```
31 | 
32 | **example post**
33 | 
34 | ``` toml
35 | +++
36 | title = "Getting Started with Hugo"
37 | description = ""
38 | tags = [
39 |     "go",
40 |     "golang",
41 |     "hugo",
42 |     "development",
43 | ]
44 | date = "2014-04-02"
45 | categories = [
46 |     "Development",
47 |     "golang",
48 | ]
49 | 
50 | image = "image.jpg" # optional
51 | toc = false # optional, When set to FALSE this parameter, table of contents not appears in only this article.
52 | +++
53 | 
54 | Contents here
55 | ```
56 | 
57 | # Contact us
58 | 
59 | Please mail to `dim0627@gmail.com` or SNS.
60 | 
61 | [https://www.facebook.com/daisuke.tsuji.735](https://www.facebook.com/daisuke.tsuji.735)
62 | 
63 | 


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/layouts/partials/default_foot.html:
--------------------------------------------------------------------------------
 1 |     </div>
 2 | 
 3 |     <footer class="site">
 4 |       <p>{{ with .Site.Copyright | safeHTML }}{{ . }}{{ else }}&copy; {{ $.Site.LastChange.Year }} {{ if isset $.Site.Params "Author" }}{{ $.Site.Params.Author }}{{ else }}{{ .Site.Title }}{{ end }}{{ end }}</p>
 5 |       <p>Powered by <a href="http://gohugo.io" target="_blank" rel="nofollow">Hugo</a>, Theme <a href="https://github.com/dim0627/hugo_theme_robust" target="_blank" rel="nofollow">robust</a> designed by <a href="http://yet.unresolved.xyz" target="_blank" rel="nofollow">Daisuke Tsuji</a></p>
 6 |     </footer>
 7 | 
 8 |     <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
 9 |     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
10 |     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
11 |     <script>hljs.initHighlightingOnLoad();</script>
12 | 
13 |     {{ with .Site.Params.GoogleAnalyticsUserID }}
14 |     <script>
15 |     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
16 |       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
17 |     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
18 |     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
19 |     ga('create', '{{ . }}', 'auto');
20 |     ga('send', 'pageview');
21 |     </script>
22 |     {{ end }}
23 | 
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/layouts/partials/sidebar.html:
--------------------------------------------------------------------------------
 1 | <aside class="site">
 2 | 
 3 |   {{ if and .IsPage (ne .Params.toc false) }}
 4 |   <div class="section">
 5 |     <header><div class="title">TableOfContents</div></header>
 6 |     <div class="list-default">{{ .TableOfContents }}</div>
 7 |   </div>
 8 |   {{ end }}
 9 | 
10 |   {{ if ne (len .Site.Menus) 0 }}
11 |   <div class="section menu">
12 |     <header><div class="title">Menu</div></header>
13 | 
14 |     {{ range .Site.Menus }}
15 |     <ul>
16 |       {{ range . }}
17 |       <li>
18 |         {{ if .HasChildren }}
19 |         <a href="#">{{ .Pre }} {{ .Name }}</a>
20 |         <ul>
21 |           {{ range .Children }}
22 |           <li><a href="{{ .URL }}">{{ .Name }}</a></li>
23 |           {{ end }}
24 |         </ul>
25 |       </li>
26 |       {{ else }}
27 |       <li><a href="{{ .URL }}">{{ .Pre }} {{ .Name }}</a></li>
28 |       {{ end }}
29 |       {{end}}
30 |     </ul>
31 |     {{end}}
32 | 
33 |   </div>
34 |   {{ end }}
35 | 
36 |   <div class="section">
37 |     <header><div class="title">LatestPosts</div></header>
38 |     <div class="content">
39 |       {{ range first 10 .Site.Pages }}
40 |       <div class="sm">{{ .Render "li" }}</div>
41 |       {{ end }}
42 |     </div>
43 |   </div>
44 | 
45 |   {{ range $key, $value := .Site.Taxonomies }}
46 |   <div class="section taxonomies">
47 |     <header><div class="title">{{ $key | singularize }}</div></header>
48 |     <div class="content">
49 |       {{ range first 10 $value.ByCount }}<a href="{{ $.Site.BaseURL}}{{ $key }}/{{ .Name | urlize }}">{{ .Name }}</a>{{ end }}
50 |     </div>
51 |   </div>
52 |   {{ end }}
53 | 
54 | </aside>
55 | 


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/layouts/partials/default_head.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     {{ .Hugo.Generator }}
 6 | 
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
 8 |     <link rel='stylesheet' href='//fonts.googleapis.com/css?family=Open+Sans|Marcellus+SC'>
 9 |     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
10 |     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
11 |     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/{{ with .Site.Params.SyntaxHighlightTheme }}{{ . }}{{ else  }}solarized_dark.min.css{{ end }}">
12 |     <link rel="stylesheet" href="{{ .Site.BaseURL }}css/styles.css">
13 |     <link rel="stylesheet" href="{{ .Site.BaseURL }}css/custom.css">
14 |     <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ .Site.BaseURL }}/index.xml">
15 | 
16 |     {{ if eq .URL "/" }}
17 |     <title>{{ .Title }}</title>
18 |     <meta property='og:title' content="{{ .Title }}">
19 |     <meta property="og:type" content="website">
20 |     {{ else }}
21 |     <title>{{ .Title }} - {{ .Site.Title }}</title>
22 |     <meta property='og:title' content="{{ .Title }} - {{ .Site.Title }}">
23 |     <meta property="og:type" content="article">
24 |     {{ end }}
25 | 
26 |     <meta property="og:url" content="{{ .Permalink }}">
27 |     {{ with .Description }}<meta name="description" content="{{ . }}">{{ end }}
28 |     {{ with .Params.image }}<meta property="og:image" content="{{ $.Site.BaseURL }}images/{{ . }}">{{ end }}
29 | 
30 |   </head>
31 | 
32 |   <body>
33 | 
34 |     <header class="site">
35 |       <div class="title"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></div>
36 |     </header>
37 | 
38 |     <div class="container site">
39 | 
40 | 


--------------------------------------------------------------------------------
/modules_src/hugo.ts:
--------------------------------------------------------------------------------
 1 | import * as foopipes from "foopipes";
 2 | 
 3 | export async function formatEntry(data: any, context: foopipes.ICallContext) : Promise<foopipes.IResult>
 4 | {
 5 |     const r = new foopipes.ProcessStreamResult(context);
 6 | 
 7 |     var key = data.key;
 8 |     var entry = await foopipes.load(context, "content", "entries", "", key);
 9 |     await foopipes.setValue(context, "metadata:filename", entry.sys.id + ".md");
10 | 
11 |     r.stream.write(JSON.stringify(entry, null, "\t"));
12 |     r.stream.write("\n");
13 | 
14 |     const contentType = entry.sys.contentType.sys.id;
15 |     if (formatters[contentType]) {
16 |         await formatters[contentType](entry, r.stream, context);
17 |     } else {
18 |         await formatters["default"](entry, r.stream, context);
19 |     }
20 |     return r;
21 | };
22 | 
23 | 
24 | /**
25 |  * ** Markdown formatters **
26 |  */
27 | 
28 | async function formatImage(context: foopipes.ICallContext, field, locale) {
29 |     var key = field.sys.id + "_" + locale;
30 |     var asset = await foopipes.load(context, "content", "assets", "", key);
31 | 
32 |     return `![${asset.fields.description}](/images/${asset.fields.file.fileName})\n`;
33 | }
34 | 
35 | var formatters = {
36 |     "default"(data, stream, context) {
37 |         stream.write(`# ${data.sys.id} #\n`);
38 |         stream.write(`This content is of type \`${data.sys.contentType.sys.id}\`\n`);
39 | 
40 |         for (let property in data.fields) {
41 |             if (data.fields.hasOwnProperty(property)) {
42 |                 stream.write(`* data.fields.${property} = ${data.fields[property]}\n`);
43 |             }
44 |         }
45 |     },
46 | 
47 |     "cat"(data, stream) {
48 |         stream.write(`# ${data.fields.name} #\n`);
49 |         stream.write(`This is a cat named ${data.fields.name}.\n` );
50 |     },
51 |     "startPage"(data, stream) {
52 |         stream.write(`# ${data.fields.headline} #\n`);
53 |         stream.write(`${data.fields.preamble}\n` );
54 |     },
55 |     "article"(data, stream) {
56 |         stream.write(`# ${data.fields.headline} #\n`);
57 |         stream.write(`${data.fields.preamble}\n` );
58 |     },
59 |     "section": async function (data, stream, context) : Promise<void> {
60 |         stream.write(`# ${data.fields.headline} #\n`);
61 |         stream.write(await formatImage(context, data.fields.imageUrl, data.locale));
62 |         stream.write(`_${data.fields.preamble}_\n`);
63 |         stream.write("\n");
64 |         stream.write(`${data.fields.mainBody}\n` );
65 |     }
66 | }


--------------------------------------------------------------------------------
/foopipes.yml:
--------------------------------------------------------------------------------
  1 | plugins: 
  2 | services: 
  3 |  scheduler: 
  4 |   type: scheduler
  5 |   interval: "00:01:00"
  6 |  contentfulWebhook: 
  7 |   type: httplistener
  8 |   path: contentfulwebhook
  9 |  content: 
 10 |   type: file
 11 |   path: contentfulkvs
 12 |   createMissingFolders: true
 13 |  markdownoutput:
 14 |   type: file
 15 |   path: /var/output
 16 |   createMissingFolders: true
 17 | 
 18 | pipelines: 
 19 |  # Pipeline for scheduled polling of Contentful's Sync api 
 20 |  -
 21 |   id: poll_contentful
 22 |   when: 
 23 |    - {service: scheduler}
 24 |    - {service: queue, topic: contentful_fetchupdates }
 25 |    - {service: queue, topic: contentful_fetchupdates_nextpage }
 26 |   from:
 27 |    - {task: module, module: contentful, function: fetchUpdates, spaceId: "${spaceId:-cfexampleapi}", accessToken: "${accessToken:-b4c0n73n7fu1}" }
 28 |   do: 
 29 |    - {task: select, path: "assets[*]", publish: contentful_asset, await: true, keepResult: false }
 30 |    - {task: select, path: "entries[*]" }
 31 |    - {task: module, module: contentful, function: createNewEntryPerLocale }
 32 |   to: 
 33 |    - {task: store, service: content, key: "#{sys.id}_#{locale}", index: entries }
 34 |  
 35 |  # A set of pipelines for updates received from a webhook calls to http://.../contentfulwebhook 
 36 |  # Handle publish of Entries
 37 |  -
 38 |   id: publish_entry_webhook 
 39 |   when: 
 40 |    - {service: contentfulWebhook }
 41 |   do: 
 42 |    - {task: where, path: "headers.X-Contentful-Topic", equal: "ContentManagement.Entry.publish" }
 43 |    - {task: select, path: body }
 44 |    - {task: module, module: contentful, function: createNewEntryPerLocale }
 45 |   to: 
 46 |    - {task: store, service: content, key: "#{sys.id}_#{locale}", index: entries }
 47 |   then: 
 48 |    - {task: queue, topic: contentful_all_content_fetched, empty: false }
 49 |  
 50 |  # Handle publish of Assets
 51 |  - 
 52 |   id: publish_asset_webhook 
 53 |   when: 
 54 |    - {service: contentfulWebhook }
 55 |   do: 
 56 |    - {task: where, path: "headers.X-Contentful-Topic", equal: "ContentManagement.Asset.publish" }
 57 |    - {task: select, path: body }
 58 |   to: 
 59 |    - {task: queue, topic: contentful_asset }
 60 |   then: 
 61 |    - {task: queue, topic: contentful_all_content_fetched, empty: false }
 62 |  
 63 |  # Handle deletion of Entries
 64 |  - 
 65 |   id: unpublish_entry_webhook 
 66 |   when: 
 67 |    - {service: contentfulWebhook}
 68 |   do: 
 69 |    - {task: where, path: "headers.X-Contentful-Topic", equal: "ContentManagement.Entry.unpublish"}
 70 |    - {task: select, path: body}
 71 |    - {task: delete, service: content, key: "#{sys.id}_sv", index: entries }
 72 |    - {task: delete, service: markdownoutput, key: "#{sys.id}.md" }
 73 |   then: 
 74 |    - {task: queue, topic: contentful_all_content_fetched, empty: false}
 75 |  
 76 |  # Pipeline for download and storage of image assets
 77 |  -
 78 |   id: asset  
 79 |   when: 
 80 |    - {service: queue, topic: contentful_asset}
 81 |   do: 
 82 |    - {task: module, module: contentful, function: createNewEntryPerLocale}
 83 |    - {task: store, service: content, key: "#{sys.id}_#{locale}", index: assets}
 84 |    - {task: where, path: "fields.file.url", isnull: false }
 85 |    - {task: httpget, url: "http:#{fields.file.url}", format: binary }
 86 |   to: 
 87 |    - {task: file, path: "/var/images", filename: "#{fields.file.fileName}"}
 88 |  
 89 |  # Pipeline for conversion to markdown
 90 |  -
 91 |   id: markdown 
 92 |   semaphore: 1
 93 |   when: 
 94 |    - {service: queue, topic: contentful_all_content_fetched }
 95 |   from: 
 96 |    - {task: enumkeys, service: content, index: entries }
 97 |   do:
 98 |    - {task: module, module: hugo, function: formatEntry }
 99 |   to: 
100 |    - {task: store, service: markdownoutput, key: "#{metadata:filename}" }
101 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
  1 | # Contentful to Hugo #
  2 | 
  3 | This is a example of how to use Foopipes to create a static but automatically updated website by using Contentful together with Hugo.
  4 | 
  5 | Read more about Contentful CMS: http://contentful.com/
  6 | 
  7 | Read more about Hugo static website generator: http://gohugo.io/
  8 | 
  9 | Read more about Foopipes: http://foopipes.com/
 10 | 
 11 | ## Quick start ##
 12 | 
 13 | Prerequisite: Install Docker https://www.docker.com/
 14 | 
 15 | From Powershell:
 16 | ```
 17 | $env:spaceId="<contentful_space_id>"
 18 | $env:accessToken="<contentful_acessToken>"
 19 | docker-compose up
 20 | ```
 21 | 
 22 | Bash:
 23 | ```
 24 | export spaceId=<contentful_space_id>
 25 | export accessToken=<contentful_acessToken>
 26 | docker-compose up
 27 | ```
 28 | 
 29 | Wait a moment and then browse to http://localhost/
 30 | 
 31 | Or in more detail how to start the Foopipes container manually:
 32 | 
 33 | ```
 34 | docker run --rm -it -v ${Pwd}:/project -v ${Pwd}/hugo_src/content:/var/output ${Pwd}/hugo_src/static/images/:/var/images -p 80 -e "spaceId=<contentful_space_id>" -e "accessToken=<contentful_acessToken>" --name contentful2hugo aretera/foopipes:latest-sdk --verbose=off
 35 | ```
 36 | 
 37 | * ```--rm``` - Remove container when finished
 38 | * ```-it``` - Interactive
 39 | * ```-v``` - Mount volume
 40 | * ```-e``` - Set environment variable
 41 | * ```-p``` - Expose port to host
 42 | * ```--name``` - Set container name
 43 | 
 44 | ## Modifying Markdown output ##
 45 | Foopipes generates markdown from the content found in Contentful CMS.
 46 | You can easily change how the markdown is generated for different content types by modifying the Typescript file ```./modules_src/hugo.ts```.
 47 | 
 48 | No need to rebuild or compile, just restart the Foopipes Docker container. (ctrl-c then `docker-compose up`)
 49 | 
 50 | ## How does it work? ##
 51 | 
 52 | Foopipes uses the configuration in ```foopipes.yml``` to fetch and process the content from Contentful. 
 53 | It then invokes the Node module hugo to convert it markdown and then stores it to disk. Images (assets) are downloaded.
 54 | 
 55 | Hugo watches for changes and generates html files from the markdown.
 56 | 
 57 | ## Contentful webhooks ##
 58 | To avoid delays when editing in Contentful you can use Webhooks for immediate publish of changes.
 59 | In Contentful, configure a webhook endpoint to `/contentfulwebhook` in the Foopipes container port 80. (see below)
 60 | 
 61 | ## Contentful webhooks using ngrok ##
 62 | A helpful tool to allow incoming trafic through firewalls etc is https://ngrok.com/ which can be run inside a Docker container.
 63 | 
 64 | ```
 65 | docker run -d -p 4040:4040 --link contentful2hugo --name contentful2hugo_ngrok wernight/ngrok ngrok http contentful2hugo:80
 66 | ```
 67 | Find the ngrok public url by either browsing to http://localhost:4040/status or 
 68 | ```
 69 | curl localhost:4040/api/tunnels
 70 | ```
 71 | 
 72 | In Contentful admin, under Settings -> Webhooks add a new Webhook with the ngrok public url with the path /contentfulwebhook
 73 | 
 74 | ![Contentful webhook screen](Webhook.png)
 75 | 
 76 | For more information about running ngrok in Docker check out https://github.com/wernight/docker-ngrok
 77 | 
 78 | ## Docker compose ##
 79 | 
 80 | A Docker Compose configuration file is ready for use in this repository. It configured to run Hugo, Foopipes, ngrok and a nginx webserver.
 81 | 
 82 | Just start it with 
 83 | 
 84 | Powershell:
 85 | ```
 86 | $env:spaceId="<contentful_space_id>"
 87 | $env:accessToken="<contentful_acessToken>"
 88 | docker-compose up
 89 | ```
 90 | 
 91 | Bash:
 92 | ```
 93 | export spaceId=<contentful_space_id>
 94 | export accessToken=<contentful_acessToken>
 95 | docker-compose up
 96 | ```
 97 | ## Important note about security ##
 98 | 
 99 | The webhook endpoint is not access restricted and open for anyone. If you exposed it to the internet, either directly or via ngrok, you must
100 | consider the security issues that araises. It is recommended that you use some kind of proxy in front of the exposed endpoint to 
101 | limit access.
102 | 
103 | ## Questions? ##
104 | 
105 | Feel free to send me a message!
106 | 


--------------------------------------------------------------------------------
/modules_src/contentful.ts:
--------------------------------------------------------------------------------
  1 | import * as foopipes from "foopipes";
  2 | var contentful = require('contentful'); 
  3 | 
  4 | function getClient(context: foopipes.ICallContext) {
  5 |     // Get args from the task 
  6 |     const spaceId = context.args["spaceId"];
  7 |     const accessToken = context.args["accessToken"];
  8 | 
  9 |     // Create Contentful client
 10 |     const client = contentful.createClient({        
 11 |         space: spaceId, // This is the space ID. A space is like a project folder in Contentful terms        
 12 |         accessToken: accessToken // This is the access token for this space. Normally you get both ID and the token in the Contentful web app
 13 |     });
 14 |     return client;
 15 | }
 16 | 
 17 | /**
 18 |  * 
 19 |  * Uses the Contentful sync api to fetch updated entities and assets.
 20 |  * If no sync token is present, it makes an "initial" sync.
 21 |  * When no more entities is received it fires the "contentful_all_content_fetched" event.
 22 |  */
 23 | export async function fetchUpdates(event: Object, context: foopipes.ICallContext): Promise<foopipes.IResult>{
 24 |     const client = getClient(context);
 25 | 
 26 |     const synctoken = await foopipes.bindValue(context, "#{content:ContentfulSyncToken}");
 27 |     let syncResponse;
 28 |     if (synctoken == null || synctoken.length === 0) {
 29 |         console.log("Initial sync");
 30 |         syncResponse = await client.sync({
 31 |             "initial": true,
 32 |             "resolveLinks": false
 33 |         });
 34 |     } else {
 35 |         console.log(`Using synctoken ${synctoken}`);
 36 |         syncResponse = await client.sync({
 37 |             "nextSyncToken": synctoken,
 38 |             "resolveLinks": false
 39 |         });
 40 |     }
 41 |     console.log(`Got ${syncResponse.entries.length} entries, ${syncResponse.assets.length} assets, and nextSyncToken is ${syncResponse.nextSyncToken}`);
 42 | 
 43 |     await foopipes.setValue(context, "content:ContentfulSyncToken", syncResponse.nextSyncToken);
 44 | 
 45 |     if (syncResponse.entries.length > 0 || syncResponse.assets.length > 0) {
 46 |         await foopipes.publish(context, "contentful_fetchupdates_nextpage", {});
 47 |     } else if(context.topic==='contentful_fetchupdates_nextpage'){
 48 |         await foopipes.publish(context, "contentful_all_content_fetched", {});        
 49 |     }
 50 |     return syncResponse;
 51 | }
 52 | 
 53 | /** 
 54 |  * Removes locale information for all fields in an Contentful entry
 55 |  * and returns an array with one entry per found locale
 56 |  *
 57 |  * {
 58 |  *  "sys": {
 59 |  *      "id": "1234"
 60 |  *  },
 61 |  *  "fields": {
 62 |  *      "headline": {
 63 |  *          "en-US": "Hello world"
 64 |  *          "sv": "Hej världen"
 65 |  *      }
 66 |  *  }
 67 |  * }
 68 |  * Becomes an array with:
 69 |  * {
 70 |  *  "sys": {
 71 |  *      "id":"1234"
 72 |  *  },
 73 |  *  "fields": {
 74 |  *      "headline": "Hello world"      
 75 |  *  }
 76 |  *  "locale":"en-us"
 77 |  * },
 78 |  * 
 79 |  * {
 80 |  *  "sys": {
 81 |  *      "id": "1234"
 82 |  *  },
 83 |  *  "fields": {
 84 |  *      "headline": "Hej världen"
 85 |  *  },
 86 |  *  "locale": "sv"
 87 |  * }
 88 |  */
 89 | export function createNewEntryPerLocale(entryOrAsset: any, context: foopipes.ICallContext) {
 90 |     const entry = <EntryWithLocale>entryOrAsset;
 91 |     const arrayOfEntries = doCreateNewEntryPerLocale(entry);
 92 |     return new foopipes.ProcessJsonArrayResult(arrayOfEntries);
 93 | }
 94 | 
 95 | class EntryWithLocale
 96 | {
 97 |     sys:any;
 98 |     fields:{[locale: string]:any};
 99 | }
100 | class EntryWithoutLocale
101 | {
102 |     locale: string;
103 |     sys:any;
104 |     fields:any;
105 | }
106 | 
107 | function doCreateNewEntryPerLocale(entryWithLocale:EntryWithLocale) : EntryWithoutLocale[]
108 | {
109 |     const locales: {[locale: string]:EntryWithoutLocale;} = {};
110 |     const fields = entryWithLocale.fields;
111 |     for(var field in fields)
112 |     {
113 |         for (var localeName in fields[field]) {
114 |             if(locales[localeName]==null){
115 |                 const newEntry = locales[localeName] = new EntryWithoutLocale();
116 |                 newEntry.sys = entryWithLocale.sys;
117 |                 newEntry.fields = {};
118 |                 newEntry.locale = localeName.toLowerCase();
119 |                 locales[localeName] = newEntry;
120 |             }
121 |             const entry = locales[localeName];
122 |             entry.fields[field] = fields[field][localeName];
123 |         }
124 |     }
125 |     return Object.keys(locales).map(l=>locales[l]);
126 | }
127 | 


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/layouts/_default/single.html:
--------------------------------------------------------------------------------
 1 | <div class="single">
 2 |   {{ partial "default_head.html" . }}
 3 | 
 4 |   <div class="row">
 5 |     <div class="col-sm-9">
 6 | 
 7 |       <article class="single" itemscope="itemscope" itemtype="http://schema.org/Article">
 8 | 
 9 |         <meta itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" content="{{ .Site.BaseURL }}"/>
10 |         <meta itemprop="dateModified" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" }}">
11 |         <meta itemprop="headline" content="{{ .Title }}">
12 |         <meta itemprop="description" content="{{ .Summary }}">
13 |         <meta itemprop="url" content="{{ .Permalink }}">
14 |         <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
15 |           <meta itemprop="url" content="{{ $.Site.BaseURL }}images/{{ with .Params.image }}{{ . }}{{ else }}default.jpg{{ end }}" />
16 |           <meta itemprop="width" content="800">
17 |           <meta itemprop="height" content="800">
18 |         </div>
19 |         <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
20 |           <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
21 |             <meta itemprop="url" content="{{ .Site.BaseURL }}images/logo.jpg">
22 |             <meta itemprop="width" content="100">
23 |             <meta itemprop="height" content="100">
24 |           </div>
25 |           <meta itemprop="name" content="{{ .Site.Title }}">
26 |         </div>
27 |         <div itemprop="author" itemscope itemtype="https://schema.org/Person">
28 |           <meta itemprop="name" content="{{ .Site.Params.Author }}">
29 |         </div>
30 | 
31 |         <div class="image" style="background-image: url({{ $.Site.BaseURL }}images/{{ with .Params.image }}{{ . }}{{ else }}default.jpg{{ end }});"></div>
32 | 
33 |         <header class="article-header">
34 |           <time itemprop="datePublished" pubdate="pubdate" datetime="{{ .Date.Format "2006-01-02T15:04:05-07:00" }}">{{ with .Site.Params.DateForm }}{{ $.Date.Format . }}{{ else }}{{ $.Date.Format "Mon, Jan 2, 2006" }}{{ end }}</time>
35 |           <h1 class="article-title">{{ .Title }}</h1>
36 |         </header>
37 | 
38 |         <div class="article-body" itemprop="articleBody">
39 |           {{ .Content }}
40 |         </div>
41 | 
42 | 
43 |         <aside>
44 |           {{ with .Params.tags }}<div class="section">{{ range . }}<a href="{{ $.Site.BaseURL}}tags/{{ . }}" class="tag">{{ . }}</a> {{ end }}</div>{{ end }}
45 | 
46 |           <div class="section share">
47 |             <a href="http://www.facebook.com/sharer.php?src=bm&u={{ .Permalink }}&t={{ .Title }}" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-facebook"></i></a>
48 |             <a href="http://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}&tw_p=tweetbutton" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-twitter"></i></a>
49 |             <a href="https://plus.google.com/share?url={{ .Permalink }}" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-google-plus"></i></a>
50 |             <a href="http://getpocket.com/edit?url={{ .Permalink }}&title={{ .Title }}" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-get-pocket"></i></a>
51 |           </div>
52 | 
53 |           {{ if and (ne .Site.Params.comment false) (ne .Params.comment false) }}
54 |           {{ with .Site.Params.disqusShortname }}
55 |           <div id="disqus_thread"></div>
56 |           <script type="text/javascript">
57 | (function() {
58 |   var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
59 |   var disqus_shortname = '{{ . }}';
60 |   dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
61 |   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
62 | })();
63 |           </script>
64 |           <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
65 |           <a href="http://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
66 |           {{ end }}
67 |           {{ end }}
68 |         </aside>
69 | 
70 |       </article>
71 |     </div>
72 | 
73 |     <div class="col-sm-3">
74 |       {{ partial "sidebar.html" . }}
75 |     </div>
76 | 
77 |   </div>
78 | 
79 |   {{ partial "default_foot.html" . }}
80 | </div>
81 | 


--------------------------------------------------------------------------------
/hugo_src/themes/hugo_theme_robust/static/css/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-size: 16px;
  3 | }
  4 | 
  5 | body {
  6 |   font-family: 'Open Sans', "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  7 |   -webkit-font-smoothing: antialiased;
  8 |   font-size: inherit;
  9 |   color: #000;
 10 |   background-color: #fafafa;
 11 | }
 12 | 
 13 | @media (max-width: 768px) {
 14 |   html {
 15 |     font-size: 14px;
 16 |   }
 17 | }
 18 | 
 19 | html,
 20 | body {
 21 |   margin: 0;
 22 | }
 23 | 
 24 | a {
 25 |   transition-duration: .2s;
 26 |   color: #000;
 27 |   text-decoration: underline;
 28 | }
 29 | 
 30 | a:hover,
 31 | a:focus,
 32 | a:active {
 33 |   color: #000;
 34 |   outline: none;
 35 |   box-shadow: none;
 36 | }
 37 | 
 38 | a.tag {
 39 |   font-size: .8rem;
 40 |   line-height: 1rem;
 41 |   color: #999;
 42 | }
 43 | 
 44 | a.tag:hover {
 45 |   color: #333;
 46 | }
 47 | 
 48 | code:not(.hljs) {
 49 |   background-color: #f5f5f5;
 50 |   border-bottom: 1px solid #ddd;
 51 |   color: #000;
 52 |   font-size: .8rem;
 53 |   border-radius: 2px;
 54 | }
 55 | 
 56 | code, pre {
 57 |   font-size: .8rem;
 58 |   line-height: 1rem;
 59 | }
 60 | 
 61 | img {
 62 |   width: 100%;
 63 | }
 64 | 
 65 | h1, h2, h3, h4, h5 ,h6 { margin: 0; }
 66 | h1 { font-size: 1.6rem; line-height: 2rem; }
 67 | h2 { font-size: 1.4rem; line-height: 2rem; }
 68 | h3 { font-size: 1.1rem; line-height: 2rem; }
 69 | h4 { font-size: 1rem; line-height: 1rem; }
 70 | h5 { font-size: 1rem; line-height: 1rem; }
 71 | 
 72 | header.site {
 73 |   padding: 2rem 0;
 74 |   text-align: center;
 75 |   background-color: #fff;
 76 |   margin-bottom: 2rem;
 77 | }
 78 | 
 79 | header.site .title {
 80 |   font-family: 'Marcellus SC', cursive;
 81 |   font-size: 2rem;
 82 | }
 83 | 
 84 | header.site .title a {
 85 |   text-decoration: none;
 86 | }
 87 | 
 88 | footer.site {
 89 |   padding: 3rem 0;
 90 |   text-align: center;
 91 | }
 92 | 
 93 | footer.site p {
 94 |   font-size: .8rem;
 95 |   margin-bottom: .5rem;
 96 |   color: #999;
 97 | }
 98 | 
 99 | @media (max-width: 768px) {
100 |   aside.site {
101 |     margin-top: 3rem;
102 |   }
103 | }
104 | 
105 | aside.site .section {
106 |   margin-bottom: 1.5rem;
107 | }
108 | 
109 | aside.site .section header {
110 |   box-shadow: 0 -1px 0 #eee inset;
111 |   margin-bottom: 1rem;
112 | }
113 | 
114 | aside.site .section header .title {
115 |   position: relative;
116 |   display: inline-block;
117 |   border-bottom: 1px solid #000;
118 |   padding: .5rem 0;
119 |   padding-right: 1rem;
120 | }
121 | 
122 | aside.site .section header .title:before {
123 |   position: absolute;
124 |   left: 10px;
125 |   bottom: -11px;
126 |   content: '';
127 |   border-top: 5px solid #000;
128 |   border-right: 5px solid transparent;
129 |   border-bottom: 5px solid transparent;
130 |   border-left: 5px solid transparent;
131 | }
132 | 
133 | div.list header.title {
134 |   margin-bottom: 2rem;
135 | }
136 | 
137 | article.li {
138 |   margin-bottom: 2rem;
139 |   background-color: #fff;
140 | }
141 | 
142 | article.li .detail {
143 |   padding: 1rem;
144 | }
145 | 
146 | article.li a {
147 |   position: relative;
148 |   text-decoration: none;
149 |   display: block;
150 | }
151 | 
152 | article.li .image {
153 |   height: 12rem;
154 |   background-color: #eee;
155 |   background-position: center;
156 |   background-size: cover;
157 | }
158 | 
159 | article.li time {
160 |   position: absolute;
161 |   top: -5px;
162 |   left: 15px;
163 |   display: block;
164 |   z-index: 1;
165 |   white-space: nowrap;
166 |   padding: 3px 7px;
167 |   color: #fff;
168 |   background-color: #333;
169 |   border-bottom: 2px solid #000;
170 |   font-size: .7rem;
171 |   line-height: 1rem;
172 | }
173 | 
174 | article.li .title {
175 |   white-space: nowrap;
176 |   text-overflow: ellipsis;
177 |   overflow: hidden;
178 | }
179 | 
180 | article.li .summary {
181 |   word-break: break-all;
182 |   height: 5rem;
183 |   overflow: hidden;
184 |   color: #999;
185 |   font-size: .8rem;
186 |   line-height: 1rem;
187 | }
188 | 
189 | @media (min-width: 767px) {
190 |   .articles .col-sm-4 article.li .image {
191 |     height: 10rem;
192 |   }
193 | 
194 |   .articles .col-sm-4 article.li .title {
195 |     font-size: 1.2rem;
196 |   }
197 | 
198 |   .articles .col-sm-4 article.li .detail {
199 |     padding: .5rem;
200 |   }
201 | }
202 | 
203 | .sm article.li {
204 |   margin-bottom: .5rem;
205 |   background-color: transparent;
206 | }
207 | 
208 | .sm article.li .detail {
209 |   display: table-cell;
210 |   padding: 0;
211 |   padding-left: .5rem;
212 |   height: 50px;
213 |   vertical-align: middle;
214 | }
215 | 
216 | .sm article.li .title {
217 |   white-space: normal;
218 | }
219 | 
220 | .sm article.li .image {
221 |   float: left;
222 |   width: 50px;
223 |   height: 50px;
224 | }
225 | 
226 | .sm article.li time {
227 |   position: relative;
228 |   display: block;
229 |   top: auto;
230 |   left: auto;
231 |   padding: 0;
232 |   background-color: transparent;
233 |   color: #999;
234 |   line-height: 1rem;
235 |   font-size: .8rem;
236 |   border-bottom: none;
237 | }
238 | 
239 | .sm article.li .title {
240 |   line-height: 1rem;
241 |   font-size: .8rem;
242 | }
243 | 
244 | .sm article.li .summary {
245 |   display: none;
246 | }
247 | 
248 | article.single {
249 |   background-color: #fff;
250 | }
251 | 
252 | article.single .article-header {
253 |   padding: 2rem;
254 | }
255 | 
256 | @media (max-width: 768px) {
257 |   article.single .article-header {
258 |     padding: 1rem;
259 |     padding-bottom: 2rem;
260 |   }
261 | }
262 | 
263 | article.single .image {
264 |   height: 24rem;
265 |   background-color: #eee;
266 |   background-position: center;
267 |   background-size: cover;
268 | }
269 | 
270 | @media (max-width: 768px) {
271 |   article.single .image {
272 |     height: 12rem;
273 |   }
274 | }
275 | 
276 | article.single .article-body {
277 |   max-width: 650px;
278 |   margin: 0 auto;
279 |   padding: 0 1rem;
280 | }
281 | 
282 | article.single .article-body h1,
283 | article.single .article-body h2,
284 | article.single .article-body h3,
285 | article.single .article-body h4,
286 | article.single .article-body h5,
287 | article.single .article-body h6 {
288 |   word-break: break-all;
289 | }
290 | 
291 | article.single .article-body h1:first-child,
292 | article.single .article-body h2:first-child,
293 | article.single .article-body h3:first-child,
294 | article.single .article-body h4:first-child,
295 | article.single .article-body h5:first-child,
296 | article.single .article-body h6:first-child {
297 |   margin-top: 0;
298 | }
299 | 
300 | article.single .article-body h1 {
301 |   margin-top: 4rem;
302 |   margin-bottom: 1rem;
303 |   font-weight: 900;
304 | }
305 | 
306 | article.single .article-body h2 {
307 |   margin-top: 3rem;
308 |   margin-bottom: 1rem;
309 | }
310 | 
311 | article.single .article-body h3 {
312 |   margin-top: 2rem;
313 |   margin-bottom: 1rem;
314 |   font-weight: 900;
315 | }
316 | 
317 | article.single .article-body h3,
318 | article.single .article-body h4,
319 | article.single .article-body h5,
320 | article.single .article-body h6 {
321 |   margin-top: 2rem;
322 |   margin-bottom: .5rem;
323 | }
324 | 
325 | article.single .article-body p {
326 |   line-height: 1.5rem;
327 |   margin-bottom: 1rem;
328 |   word-break: break-word;
329 | }
330 | 
331 | article.single .article-body ul,
332 | article.single .article-body ol {
333 |   padding-left: 1.5rem;
334 | }
335 | 
336 | article.single .article-body blockquote {
337 |   padding: .5rem;
338 |   border-left: none;
339 |   background-color: #eee;
340 |   font-size: .8rem;
341 | }
342 | 
343 | article.single .article-body blockquote p {
344 |   line-height: 1rem;
345 | }
346 | 
347 | article.single .article-body blockquote p:last-child {
348 |   margin-bottom: 0;
349 | }
350 | 
351 | article.single .article-body pre {
352 |   padding: 0;
353 |   border: none;
354 |   border-radius: 0;
355 | }
356 | 
357 | article.single .article-body pre code {
358 |   font-size: .8rem;
359 |   line-height: 1rem;
360 |   padding: 1rem;
361 | }
362 | 
363 | #TableOfContents {
364 |   font-size: .8rem;
365 |   line-height: 1.5rem;
366 | }
367 | 
368 | #TableOfContents a {
369 |   display: block;
370 | }
371 | 
372 | #TableOfContents ul ul a {
373 |   text-decoration: none;
374 | }
375 | 
376 | #TableOfContents>ul {
377 |   padding-left: 0;
378 |   list-style: none;
379 | }
380 | 
381 | #TableOfContents>ul>li {
382 |   font-weight: 900;
383 |   margin-bottom: 1rem;
384 | }
385 | 
386 | #TableOfContents>ul ul {
387 |   padding-left: 0;
388 |   font-weight: normal;
389 |   list-style: none;
390 | }
391 | 
392 | #TableOfContents>ul ul ul {
393 |   padding-left: 1rem;
394 |   list-style: none;
395 | }
396 | 
397 | .section.menu {
398 |   line-height: 1.5rem;
399 | }
400 | 
401 | .section.menu a {
402 |   display: block;
403 | }
404 | 
405 | .section.menu ul {
406 |   font-size: .8rem;
407 |   list-style: none;
408 |   padding-left: 0;
409 | }
410 | 
411 | .section.menu ul a {
412 |   text-decoration: none;
413 | }
414 | 
415 | .section.menu ul ul {
416 |   padding-left: 1rem;
417 | }
418 | 
419 | .section.taxonomies a {
420 |   display: block;
421 |   font-size: .8rem;
422 |   text-decoration: none;
423 |   line-height: 1.5rem;
424 | }
425 | 
426 | .section.taxonomies a:before {
427 |   content: '\f105';
428 |   font-family: 'Fontawesome';
429 |   margin-right: 5px;
430 | }
431 | 
432 | article.single aside {
433 |   padding: 2rem;
434 | }
435 | 
436 | @media (max-width: 768px) {
437 |   article.single aside {
438 |     padding: 1rem;
439 |   }
440 | }
441 | 
442 | article.single aside .section {
443 |   margin-bottom: 2rem;
444 | }
445 | 
446 | nav.paging {
447 |   position: relative;
448 |   min-height: 5rem;
449 | }
450 | 
451 | nav.paging a {
452 |   text-decoration: none;
453 |   display: inline-block;
454 |   padding: 5px 10px;
455 |   background-color: #333;
456 |   border-bottom: 2px solid #000;
457 |   color: #fff;
458 | }
459 | 
460 | nav.paging .left,
461 | nav.paging .right {
462 |   position: absolute;
463 | }
464 | 
465 | nav.paging .right {
466 |   right: 0;
467 | }
468 | 
469 | .share {
470 |   text-align: right;
471 | }
472 | 
473 | .share a {
474 |   display: inline-block;
475 |   color: #999;
476 |   padding: 0 .5rem;
477 | }
478 | 
479 | 


--------------------------------------------------------------------------------