Merge pull request 'Update design for 2020' (#1) from design-2020 into master

Reviewed-on: #1

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "themes/hugo-coder"]
-	path = themes/hugo-coder
-	url = https://github.com/luizdepra/hugo-coder.git

config.toml

@@ -1,15 +1,16 @@
 baseurl = "https://www.devroom.io"
-title = "Ariejan de Vroom"
+title = "devroom.io"
-theme = "hugo-coder"
+theme = "devroom-2020"
 languagecode = "en"
 defaultcontentlanguage = "en"
 
-copyright = "© 1999-2020 Ariejan de Vroom. All rights reserved."
+copyright = "Copyright © 1999-2020 Ariejan de Vroom &lt;<a href='/contact/'>ariejan@devroom.io</a>&gt;"
 
-paginate = 999
+paginate = 9999
 canonifyurls = true
 
-pygmentsstyle = "solarized-dark256"
+# pygmentsstyle = "solarized-dark256"
+pygmentsstyle = "monokai"
 pygmentscodefences = true
 pygmentscodefencesguesssyntax = true
 
@@ -26,91 +27,56 @@ disqusShortname = ""
 
 [params]
     author = "Ariejan de Vroom"
-    info = "Nerd."
+    info = "Software Engineer, among a truckload of other things"
     description = "Ariejan de Vroom's personal website on software engineering and electronics tinkering"
     keywords = "blog,developer,personal,electronics"
-    avatarurl = "images/avatar.jpg"
 
-    favicon_32 = "/favicon-32x32.png"
+    footerquote = "Live now; make <em>now</em> always the most precious time. <em>Now</em> will never come again.<br>&nbsp;&nbsp;&nbsp;&nbsp;– Jean-Luc Picard"
-    favicon_16 = "/favicon-16x16.png"
+    matomoTrackingUrl = "https://matomo.devroom.io/matomo.php?idsite=2&amp;rec=1"
 
-    footercontent = "Live now; make <em>now</em> always the most precious time. <em>Now</em> will never come again.<br>– Jean-Luc Picard<br><br><small>Copyright © 1999 - 2020 Ariejan de Vroom.<br>All rights reserved.</small><br/><img src='https://matomo.devroom.io/matomo.php?idsite=2&amp;rec=1' style='border:0' alt='' /><script src='https://stats.devroom.io/kis3.js'></script>"
+    mainSections = ["posts", "projects"]
 
-    hidecredits = true
+[[params.skill]]
-    hidecopyright = true
+    content = "Writing rock-solid backend stuff in whatever's hip today"
-
-    colorscheme = "auto"
-
-    rtl = false
-
-    math = true
-    custom_css = ["css/custom.css"]
-    custom_js = ["css/custom.js"]
-
-# Social links
-[[params.social]]
-    name = "Gitea"
-    icon = "fab fa-git-square fa-2x"
     weight = 10
-    url = "https://git.devroom.io/ariejan/"
+[[params.skill]]
-[[params.social]]
+    content = "Automating things that don't really need automating"
-    name = "Github"
-    icon = "fab fa-github fa-2x"
     weight = 20
-    url = "https://github.com/ariejan/"
+[[params.skill]]
-[[params.social]]
+    content = "Writing fiction that I'm too afraid to share with the world"
-    name = "Twitter"
-    icon = "fab fa-twitter fa-2x"
     weight = 30
-    url = "https://twitter.com/ariejan/"
+
-[[params.social]]
+[[params.popular]]    
-    name = "LinkedIn"
+    name = "approved by over 50k Googlers and Stack Overflowers every month!"
-    icon = "fab fa-linkedin-in fa-2x"
+    url = "/tags/git/"
-    weight = 40
+    weight = 10
-    url = "https://twitter.com/ariejan/"
+[[params.popular]]    
-[[params.social]]
+    name = "see how I fix things (even though I have no idea what I'm doing)"
-    name = "Keybase"
+    url = "/tags/repair/"
-    icon = "fab fa-keybase fa-2x"
+    weight = 5    
-    weight = 50
-    url = "https://keybase.com/adevroom/"
-[[params.social]]
-    name = "GPG"
-    icon = "fas fa-user-lock fa-2x"
-    weight = 50
-    url = "/gpg/"    
-[[params.social]]
-    name = "Son en Breugel"
-    icon = "fas fa-map-marker-alt fa-2x"
-    weight = 90
-    url = "https://www.google.com/maps/place/Son+en+Breugel/@51.5249895,3.2434364,7z"
-[[params.social]]
-    name = "Contact"
-    icon = "fas fa-envelope fa-2x"
-    weight = 100
-    url = "/contact/"
 
 # Menu links
 [[menu.main]]
-    name = "Home"
+    name = "devroom.io"
     weight = 1
     url  = "/"
 [[menu.main]]
-    name = "Blog"
+    name = "blog"
     weight = 10
     url  = "/posts/"
 [[menu.main]]
-    name = "Projects"
+    name = "projects"
     weight = 20
     url  = "/projects/"
 [[menu.main]]
-    name = "About"
+    name = "about"
     weight = 40
     url = "/about/"
 [[menu.main]]
-    name = "GPG"
+    name = "gpg"
     weight = 90
     url = "/gpg/"    
 [[menu.main]]
-    name = "Contact"
+    name = "contact"
     weight = 100
     url = "/contact/"

content/about.md

@@ -36,5 +36,4 @@ In 2017 I switched from `https://ariejan.net` to `https://www.devroom.io` as my
 domain name for this blog.
 
 This site is static HTML, generated with [Hugo](http://gohugo.io) via self-hosted versions
-of [Gitea](https://gitea.io) and [Drone](https://drone.io/). I'm currently using the
+of [Gitea](https://gitea.io) and [Drone](https://drone.io/).
-[Hugo Coder](https://github.com/luizdepra/hugo-coder) theme by [Luiz de Prá](https://luizdepra.dev/).

content/contact.md

@@ -13,21 +13,23 @@ to a degree that would make either of us happy. I _can_ refer you to
 [/r/audiorepair](https://www.reddit.com/r/audiorepair/) on Reddit, where many
 helpful (and more knowledgeable) people are ready to help out.
 
-<form name="contact" method="POST" action="https://formspree.io/ariejan@devroom.io">
+<form name="contact" method="POST" class="pure-form pure-form-stacked" action="https://formspree.io/ariejan@devroom.io">
     <fieldset>
-        <p>
+        <div class="pure-control-group">
             <label for="name">Your name:</label>
-            <input type="text" name="name" id="inputName" required>
+            <input type="text" name="name" class="pure-input-1" id="inputName" required>
-        </p>
+        </div>
-        <p>
+        <div class="pure-control-group">
             <label for="email">Your email address:</label>
-            <input type="email" name="email" id="inputEmail" required>
+            <input type="email" name="email" class="pure-input-1" id="inputEmail" required>
-        </p>
+        </div>
-        <p>
+        <div class="pure-control-group">
             <label for="email">Your messages</label>
-            <textarea name="message" id="inputMessage" rows="6" required></textarea>
+            <textarea name="message" class="pure-input-1" id="inputMessage" rows="6" required></textarea>
-        </p>
+        </div>
-        <button type="submit">Ship it</button>
+        <div class="pure-controls">
+            <button class="pure-button pure-button-primary" type="submit">Ship it</button>
+        </div>
     </fieldset>
 </form>
 

content/posts/2007-04-03-tipsnippet-create-a-rss-feed.md

@@ -31,7 +31,7 @@ I assume you render your articles in a layout. The render method here prevents y
 
 Next we create a view. This is not the regular RHTML you're used to but RXML. This enables the XML generator which we'll use to generate the RSS feed. Create `app/views/articles/rss.rxml`
 
-``` text
+``` ruby
 xml.instruct! :xml, :version=>"1.0"
 xml.rss(:version=>"2.0"){
   xml.channel{
@@ -57,7 +57,7 @@ Well, that's it. You now have a working RSS feed!
 
 If you want to enable auto discovery, you should add the following line to the header of your layout. (Auto discovery enables that little RSS icon in the address bar of your browser.)
 
-``` erb
+``` ruby
 <%= auto_discovery_link_tag(:rss, :controller => 'articles', :action => 'rss') %>
 ```
 

themes/devroom-2020/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 YOUR_NAME_HERE
+
+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.

themes/devroom-2020/archetypes/default.md

@@ -0,0 +1,7 @@
++++
+date = {{ .Date }}
+title = "{{ replace .Name "-" " " | title }}"
+draft = true
+tags = []
+description = ""
++++

themes/devroom-2020/assets/scss/devroom.scss

@@ -0,0 +1,135 @@
+@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap&subset=latin-ext');
+
+$font_size: 1rem;
+
+$backdrop: #080808;
+$background: #242424;
+$text: #f7f7f7;
+$links: #6C939F;
+$footer: darken($text, 40%);
+$meta: #AA4A39;
+$header: #9AC361;
+
+html, body {
+    background-color: $backdrop;
+    color: $text;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: $font_size;
+}
+
+pre, code {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: $font_size;
+}
+
+pre {
+    background-color: $background !important;
+    margin-left: 2rem;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+pre code {
+    overflow-wrap: normal;
+    white-space: pre;
+}
+
+.container {
+    background-color: $background;
+    padding: 1rem 1.5rem;
+    margin: 1rem auto;
+    max-width: 900px;
+}
+
+a, a:hover {
+    color: $links;
+}
+
+nav a {
+    font-weight: normal;
+}
+
+h1, h2, h3, h4, h5 {
+    font-size: $font_size;
+    font-weight: normal;
+    color: $header;
+    margin: 0.67rem 0;
+}
+
+h1 {
+    
+    padding-bottom: 0.67rem;
+    border-bottom: 2px dashed $header;
+
+    &::before {
+        content: "# ";
+    }
+}
+
+h2::before {
+    content: "## "
+}
+
+h3::before {
+    content: "### "
+}
+
+h4::before {
+    content: "#### "
+}
+
+h5::before {
+    content: "##### "
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+em {
+    font-style: normal;
+    color: $background;
+    background-color: $text;
+}
+
+blockquote *::before {
+    content: "> ";
+}
+
+img {
+    max-width: 100%;
+}
+
+ol {
+    list-style-position: outside;
+}
+
+ul {
+    list-style-type: "* ";
+    list-style-position: outside;
+}
+
+header {
+    margin-bottom: 1.5rem;
+}
+
+footer {
+    color: $footer;
+    border-top: 2px dashed $footer;
+    margin-top: 1.5rem;
+
+    em {
+        background-color: $background;
+        color: $text;
+    }
+}
+
+small {
+    font-size: 100%;
+    color: $footer;
+}
+
+.meta {
+    color: $meta;
+}

themes/devroom-2020/layouts/_default/baseof.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.Language.Lang }}">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    {{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
+    {{ with .Site.Params.description }}<meta name="description" content="{{ . }}">{{ end }}
+    {{ with .Site.Params.keywords }}<meta name="keywords" content="{{ . }}">{{ end }}
+    {{ if .Permalink }}
+      <base href="{{ .Permalink }}">
+      <link rel="canonical" href="{{ .Permalink }}">
+    {{ end }}
+    <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
+    {{ hugo.Generator }}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/buttons-min.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/forms-min.css" crossorigin="anonymous" />
+    {{ if .Site.IsServer }}
+      {{ $cssOpts := (dict "targetPath" "css/devroom.css" "enableSourceMap" true ) }}
+      {{ $styles := resources.Get "scss/devroom.scss" | resources.ExecuteAsTemplate "style.devroom.css" . | toCSS $cssOpts }}
+      <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
+    {{ else }}
+      {{ $cssOpts := (dict "targetPath" "css/devroom.css" ) }}
+      {{ $styles := resources.Get "scss/devroom.scss" | resources.ExecuteAsTemplate "style.devroom.css" . | toCSS $cssOpts | minify | fingerprint }}
+      <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous" media="screen" />
+    {{ end }}
+    <link rel="alternate" type="application/rss+xml" href="https://www.devroom.io/index.xml" title="Ariejan de Vroom" />
+  </head>
+  <body>
+    <div class="container">
+      {{ partial "header.html" . }}
+      <main>
+        {{ block "content" . }}{{ end }}
+      </main>
+      {{ partial "footer.html" . }}
+    </div>
+  </body>
+</html>

themes/devroom-2020/layouts/_default/list.html

@@ -0,0 +1,11 @@
+{{ define "title" }}
+  {{- if eq .Kind "taxonomy" -}}
+    {{- i18n .Data.Singular | title -}}
+    {{- print "" -}}
+  {{- end -}}
+
+  {{- .Title }} · {{ .Site.Title -}}
+{{ end }}
+{{ define "content" }}
+  {{ partial "list.html" . }}
+{{ end }}

themes/devroom-2020/layouts/_default/rss.xml

@@ -0,0 +1,32 @@
+{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
+{{- $limit := .Site.Config.Services.RSS.Limit -}}
+{{- if ge $limit 1 -}}
+{{- $pages = $pages | first $limit -}}
+{{- end -}}
+{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
+    <link>{{ .Permalink }}</link>
+    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
+    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
+    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
+    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
+    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
+    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
+    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
+    {{ with .OutputFormats.Get "RSS" }}
+	{{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
+    {{ end }}
+    {{ range $pages }}
+    <item>
+      <title>{{ .Title }}</title>
+      <link>{{ .Permalink }}</link>
+      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
+      <guid>{{ .Permalink }}</guid>
+      <description>{{ .Summary | html }}</description>
+    </item>
+    {{ end }}
+  </channel>
+</rss>

themes/devroom-2020/layouts/_default/single.html

@@ -0,0 +1,6 @@
+{{ define "title" }}
+  {{ .Title }} · {{ .Site.Title }}
+{{ end }}
+{{ define "content" }}
+  {{ partial "page.html" . }}
+{{ end }}

themes/devroom-2020/layouts/index.html

@@ -0,0 +1,3 @@
+{{ define "content" }}
+  {{ partial "home.html" . }}
+{{ end }}

themes/devroom-2020/layouts/partials/footer.html

@@ -0,0 +1,21 @@
+<footer>
+    <p>{{ .Site.Copyright | safeHTML }}</p>
+    <p>{{ .Site.Params.footerquote | safeHTML }}<!-- Secure and privacy respecting tracking with no 3rd parties involved. -->
+        <img src='{{ .Site.Params.matomoTrackingUrl }}' style='border:0' alt='' /></p>
+</footer>
+
+<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
+<script>
+    (function(f, a, t, h, o, m){
+        a[h]=a[h]||function(){
+            (a[h].q=a[h].q||[]).push(arguments)
+        };
+        o=f.createElement('script'),
+        m=f.getElementsByTagName('script')[0];
+        o.async=1; o.src=t; o.id='fathom-script';
+        m.parentNode.insertBefore(o,m)
+    })(document, window, 'https://stats.devroom.io/tracker.js', 'fathom');
+    fathom('set', 'siteId', 'GCBEF');
+    fathom('trackPageview');
+</script>
+<!-- / Fathom -->

themes/devroom-2020/layouts/partials/header.html

@@ -0,0 +1,10 @@
+<header>
+    <nav>
+        {{ with .Site.Menus.main}}
+            {{ range $index, $value := sort . }}
+                {{ if (ne $index 0) }} - {{ end }}
+                    <a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
+            {{ end }}
+        {{ end }}
+    </nav>
+</header>

themes/devroom-2020/layouts/partials/home.html

@@ -0,0 +1,33 @@
+<h1>{{ .Site.Params.author }}</h1>
+<h2>{{ .Site.Params.info }}</h2>
+
+<h3>Skills</h3>
+
+{{ with .Site.Params.skill }}
+    <ul>
+    {{ range sort . }}
+        <li>{{ .content }}</li>
+    {{ end }}
+    </ul>
+{{ end }}
+
+
+<h3>Popular stuff</h3>
+
+{{ with .Site.Params.popular }}
+    <ul>
+    {{ range sort . }}
+        <li><a href="{{ .url }}">{{ .url }}</a> {{ .name }}</li>
+    {{ end }}
+    </ul>
+{{ end }}
+
+<h3>Recent things</h3>
+
+{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
+{{ range first 5 $pages }}
+    <span class="date">{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}</span>
+    -
+    <a class="title" href="{{ .Params.ExternalLink | default .RelPermalink }}">{{ .Title }}</a>
+    <br />
+{{ end }}

themes/devroom-2020/layouts/partials/list.html

@@ -0,0 +1,19 @@
+<section class="container list">
+    <h1 class="title">
+      {{- if eq .Kind "taxonomy" -}}
+        {{- i18n .Data.Singular | title -}}
+        {{- print "Tagged " -}}
+      {{- end -}}
+  
+      {{- .Title -}}
+    </h1>
+    <p>
+      {{ range .Paginator.Pages }}
+        <span class="date">{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}</span>
+        -
+        <a class="title" href="{{ .Params.ExternalLink | default .RelPermalink }}">{{ .Title }}</a>
+        <br />
+      {{ end }}
+    </p>
+    
+  </section>

themes/devroom-2020/layouts/partials/page.html

@@ -0,0 +1,4 @@
+<article>
+    <h1>{{ .Title }}</h1>
+    {{ .Content }}
+</article>  

themes/devroom-2020/layouts/partials/post.html

@@ -0,0 +1,16 @@
+<article>
+    <h1>{{ .Title }}</h1>
+    <div class="meta">
+        <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
+            {{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}
+        </time>
+        -
+        tagged
+        {{ with .Page.Params.Tags }}{{ partial "taxonomy/tags.html" . }}{{ end }}
+        -
+        {{ .ReadingTime }}min
+        -
+        {{ .FuzzyWordCount }}wrds
+    </div>
+    {{ .Content }}
+</article>  

themes/devroom-2020/layouts/partials/taxonomy/tags.html

@@ -0,0 +1,6 @@
+{{- range $index, $el := . -}}
+    {{- if gt $index 0 }}
+    <span class="separator"></span>
+    {{- end }}
+    <a href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}">{{ . | lower }}</a>
+{{- end -}}

themes/devroom-2020/layouts/posts/single.html

@@ -0,0 +1,6 @@
+{{ define "title" }}
+  {{ .Title }} · {{ .Site.Title }}
+{{ end }}
+{{ define "content" }}
+  {{ partial "post.html" . }}
+{{ end }}

themes/devroom-2020/layouts/projects/single.html

@@ -0,0 +1,6 @@
+{{ define "title" }}
+  {{ .Title }} · {{ .Site.Title }}
+{{ end }}
+{{ define "content" }}
+  {{ partial "post.html" . }}
+{{ end }}

themes/devroom-2020/theme.toml

@@ -0,0 +1,15 @@
+# theme.toml template for a Hugo theme
+# See https://github.com/gohugoio/hugoThemes#themetoml for an example
+
+name = "de Vroom 2020"
+license = "MIT"
+licenselink = "https://git.devroom.io/ariejan/devroom-2020/blob/master/LICENSE"
+description = ""
+homepage = "https://www.devroom.io"
+tags = []
+features = []
+min_version = "0.41"
+
+[author]
+  name = "Ariejan de Vroom"
+  homepage = "https://www.devroom.io"

themes/hugo-coder

@@ -1 +0,0 @@
-Subproject commit fb2dc89b45b4ba61f6d66cca4c8f3062b4e94314