Initial 2024 design

2024-01-24 11:48:34 +01:00 · 2024-01-24 11:48:34 +01:00 · eac3ec09c9
commit eac3ec09c9
parent 6d92ca4ae7
21 changed files with 692 additions and 74 deletions
--- a/config.toml
+++ b/config.toml
@ -1,6 +1,6 @@
 baseurl = "https://www.devroom.io"
 title = "devroom.io"
-theme = "devroom-2020"
+theme = "devroom-2024"
 languagecode = "en"
 defaultcontentlanguage = "en"

@ -36,76 +36,3 @@ enableGitInfo = true
    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"

    mainSections = ["posts", "projects"]
-
-[[params.skill]]
-    content = "Software Engineer, consultant and architect at <a href='https://www.kabisa.nl'>Kabisa</a>"
-    weight = 10
-[[params.skill]]
-    content = "Fanatical homelab admin (<a href='/2020/02/28/building-a-diy-home-server-with-freenas/'>read more</a>)"
-    weight = 20
-[[params.skill]]
-    content = "Bass guitar player, piano player, and music producer"
-    weight = 30
-[[params.skill]]
-    content = "Drive-way home-wrencher (not a car mechanic); current project: <a href='/projects/volkswagen-golf-iii-cabrio-1994/'>Volkswagen Golf 3 Cabrio</a>"
-    weight = 40    
-
-[[params.popular]]    
-    name = "Volkswagen Golf III Cabrio (1994)"
-    url = "/projects/volkswagen-golf-iii-cabrio-1994/"
-    weight = 150
-[[params.popular]]    
-    name = "Cherry-Picking specific commits from another branch"
-    url = "/2010/06/10/cherry-picking-specific-commits-from-another-branch/"
-    weight = 100
-[[params.popular]]    
-    name = "Installing Node.js and NPM on Ubuntu/Debian"
-    url = "/2011/10/24/installing-node-js-and-npm-on-ubuntu-debian/"
-    weight = 100    
-[[params.popular]]    
-    name = "How to create and apply a patch with Git"
-    url = "/2009/10/26/how-to-create-and-apply-a-patch-with-git/"
-    weight = 100
-[[params.popular]]    
-    name = "Git: Squash your latests commits into one"
-    url = "/2011/07/05/git-squash-your-latests-commits-into-one/"
-    weight = 50    
-[[params.popular]]    
-    name = "Building a DIY Home Server with FreeNAS"
-    url = "/2020/02/28/building-a-diy-home-server-with-freenas/"
-    weight = 50   
-[[params.popular]]    
-    name = "How to create and apply a patch with Subversion"
-    url = "/2007/07/03/how-to-create-and-apply-a-patch-with-subversion/"
-    weight = 50    
-[[params.popular]]    
-    name = "Repair: Philips 42\" 3D LED TV with Ambilight"
-    url = "/projects/repair-philips-42pfl6057h-12/"
-    weight = 50   
-
-
-# Menu links
-[[menu.main]]
-    name = "devroom.io"
-    weight = 1
-    url  = "/"
-[[menu.main]]
-    name = "blog"
-    weight = 10
-    url  = "/posts/"
-[[menu.main]]
-    name = "projects"
-    weight = 20
-    url  = "/projects/"
-[[menu.main]]
-    name = "about"
-    weight = 40
-    url = "/about/"
-[[menu.main]]
-    name = "gpg"
-    weight = 90
-    url = "/gpg/"    
-[[menu.main]]
-    name = "contact"
-    weight = 100
-    url = "/contact/"
--- a/themes/devroom-2024/LICENSE
+++ b/themes/devroom-2024/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.
--- a/themes/devroom-2024/archetypes/default.md
+++ b/themes/devroom-2024/archetypes/default.md
@ -0,0 +1,7 @@
+++
+date = {{ .Date }}
+title = "{{ replace .Name "-" " " | title }}"
+draft = true
+tags = []
+description = ""
+++
--- a/themes/devroom-2024/assets/scss/devroom.scss
+++ b/themes/devroom-2024/assets/scss/devroom.scss
@ -0,0 +1,396 @@
+@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
+
+$h1_font_size: 2.0rem;
+$h2_font_size: 1.7rem;
+$header_size: 1.2rem;
+
+$font_size: 16px;
+$code_font_size: 16px;
+$code_line_height: 17px;
+$line-height: 1.6;
+
+$accent: rgb(90, 126, 193);
+$background: rgb(40, 44, 53);
+$backdrop: $background;
+$text: rgb(226, 226, 226);
+$subtext: #868686;
+$links: $accent;
+$footer: $text;
+$meta: $text;
+$header: $text;
+$highlight: $links;
+$code_background: $background;
+$code_border_color: $background;
+$code: #ff9327;
+$separator: darken(desaturate($accent, 20%), 20%);
+
+html, body {
+    background-color: $backdrop;
+    color: $text;
+    font-family: "Mulish", sans-serif;
+    font-size: $font_size;
+    line-height: $line-height;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code, pre {
+    font-family: monospace;
+}
+
+.important {
+  width: 100%;
+  display: block;
+  font-style: italic;
+}
+
+.important::before {
+    content: '\f0a4';
+    font-family: "Font Awesome 6 Free";
+    font-size: 1rem;
+    margin-right: 0.7rem;
+}
+
+.container {
+    background-color: $background;
+    padding: 1rem 1.5rem;
+    margin: 1rem auto;
+    max-width: 1200px;
+    min-height: 100vh;
+}
+
+a, a:hover {
+    color: $links;
+    text-decoration: none;
+}
+
+nav {
+    margin-bottom: 2rem;
+    text-align: right;
+    vertical-align: bottom;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    a.brand {
+        text-align: left;
+        flex: 1;
+        display: block;
+        color: $text;
+        font-weight: 800;
+        font-size: 1.6rem;
+    }
+    
+    .menu {
+        flex: 2;
+
+        display: flex;
+        gap: 0.8rem;
+        justify-content: flex-end;
+
+        a {
+            color: $text;
+            font-weight: 700;
+
+        }
+    }
+}
+
+
+h1, h2, h3, h4, h5 {
+    font-family: "Mulish", sans-serif;
+    font-size: $header_size;
+    font-weight: 900;
+    line-height: $header_size * 1.9;
+    color: $header;
+    margin: 0.67rem 0;
+}
+
+h1 {
+    font-size: $h1_font_size;
+    color: $text;
+    margin-bottom: 1.6rem;
+}
+
+h2 {
+    font-size: $h2_font_size;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+blockquote {
+    border-left: 5px solid $code_border_color;
+    padding-left: 1rem;
+}
+
+.auto-width img {
+    width: auto;
+}
+
+img {
+    width: 98%;
+    border-radius: 1.6rem;
+    margin: 0 auto;
+    display: block;
+}
+
+.img--caption {
+    display: block;
+    font-style: italic;
+    font-size: 0.92rem;
+    text-align: center;
+}
+
+.gallery-view {
+    display: flex;
+    flex-flow: row wrap;
+
+    figure {
+        max-width: 48%;
+        min-width: 48%;
+        margin: 0.5rem 0;
+        flex: 1;
+
+        img {
+            width: 90%;
+        }
+
+        .img--caption {
+            margin: 0 auto;
+            padding-top: 0.5rem;
+            max-width: 80%;
+            line-height: 1.1rem;
+        }
+    }
+
+}
+
+ol {
+    list-style-position: outside;
+}
+
+ul {
+    list-style-position: outside;
+}
+
+span.begin-task-list + ul {
+    list-style-type: none;
+    padding-left: 1rem;
+    
+    input[type="checkbox"] {
+        margin-right: 0.4rem;
+        list-style-image:url("/images/unchecked.png");
+    }
+
+    input[type="checkbox"]:checked {
+        list-style-image:url("/images/checked.png");
+    }
+}
+
+header {
+    margin-bottom: 1.5rem;
+}
+
+footer {
+    color: $footer;
+    border-top: 1px solid $footer;
+    margin-top: 1.5rem;
+
+    em {
+        background-color: $background;
+        color: $text;
+    }
+}
+
+small {
+    font-size: 100%;
+    color: $footer;
+}
+
+.meta {
+    color: $meta;
+    font-weight: normal;
+}
+
+code {
+    color: $code;
+}
+
+
+pre, code {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: $code_font_size;
+    line-height: $code_line_height;
+}
+
+pre > code {
+    overflow-wrap: normal;
+    white-space: pre;
+    color: $text;
+    background-color: $background !important;
+}
+
+pre {
+    background-color: $code_background !important;
+    padding: 1rem 1rem 1rem 2.5rem;
+    overflow-x: auto;
+    overflow-y: hidden;
+    line-height: $line-height;
+    border: 2px solid $code_border_color;
+}
+
+table td, table th {
+    padding: 0.2rem 1rem;
+}
+
+img.about-avatar {
+    width: 16rem;
+    float: right;
+    border-radius: 50%;
+    margin-left: 1rem;
+    margin-bottom: 1rem;
+}
+
+.fi {
+    font-size: $font_size * 1.2;
+    padding-top: 0.5rem;
+}
+
+// bootstrap SVG-Icons
+.bi {
+    display: inline-block;
+    vertical-align: middle;
+    padding-bottom: 0.25rem;
+  }
+
+  .bi-link {
+    width: 1.4rem;
+    height: 1.4rem;
+    color: $links;
+  }
+  
+// Front-page post feed
+
+.main-page {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.narrow {
+    max-width: 780px;
+    margin: 0 auto;
+}
+
+article.post {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    overflow: hidden;
+    position: relative;
+    padding: 0.1rem 0;
+
+    &+article.post {
+        border-top: 1px solid $separator;
+    }
+
+    .calendar {
+        text-transform: uppercase;
+        color: $links;
+        font-size: 12px;
+        font-weight: 600;
+        margin-right: 1.5rem;
+        min-width: 50px;
+    }
+
+    .title {
+        flex-grow: 1;
+        font-size: $font-size;
+        font-weight: normal;
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-right: 1rem;
+        white-space: nowrap;
+    }
+
+    .actions {
+        font-size: 14px;
+        white-space: nowrap;
+
+        @media (max-width: 600px) {
+            display: none;
+        }
+    }
+
+    .permalink {
+        bottom: 0;
+        left: 0;
+        outline: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 50;
+    }
+}
+
+article.full {
+    .created_on, .updated_on {
+        color: $subtext;
+        text-align: center;
+        text-transform: uppercase;
+        font-size: 13px;
+        font-weight: 600;
+    }
+
+    .updated_on {
+        display: none;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    .article-head {
+        margin: 5rem 0;
+    }
+}
+
+a.tag {
+    background-color: $accent;
+    color: $text;
+    padding: 2px 8px 4px;
+    margin: 0 2px;
+    border-radius: 6px;
+    font-size: 13px;
+    text-transform: lowercase;
+}
+
+.article-about {
+    margin: 4rem 0;
+    display: flex;
+    flex-direction: row;
+
+    & > * {
+        flex: 1;
+    }
+
+    .previous-article, .next-article {
+        font-size: 48px;
+    }
+
+    .article-author {
+        flex: 4;
+        flex-grow: 999;
+
+        text-align: center;
+
+        img {
+            max-width: 64px;
+            border-radius: 50%;
+        }
+    }
+}
--- a/themes/devroom-2024/layouts/404.html
+++ b/themes/devroom-2024/layouts/404.html
--- a/themes/devroom-2024/layouts/_default/_markup/render-heading.html
+++ b/themes/devroom-2024/layouts/_default/_markup/render-heading.html
@ -0,0 +1,8 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} 
+  <a href="#{{ .Anchor | safeURL }}">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link" viewBox="0 0 16 16">
+      <path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/>
+      <path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/>
+    </svg>
+  </a>
+</h{{ .Level }}>
--- a/themes/devroom-2024/layouts/_default/baseof.html
+++ b/themes/devroom-2024/layouts/_default/baseof.html
@ -0,0 +1,53 @@
+<!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="/css/lightbox.min.css" />
+    {{ 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"
+    />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+  </head>
+  <body>
+    <div class="container">
+      {{ partial "header.html" . }}
+      <div class="main-page">{{ block "content" . }}{{ end }}</div>
+      {{ partial "footer.html" . }}
+    </div>
+    <script src="/js/lightbox-plus-jquery.min.js"></script>
+  </body>
+</html>
--- a/themes/devroom-2024/layouts/_default/list.html
+++ b/themes/devroom-2024/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 }}
--- a/themes/devroom-2024/layouts/_default/rss.xml
+++ b/themes/devroom-2024/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>
--- a/themes/devroom-2024/layouts/_default/single.html
+++ b/themes/devroom-2024/layouts/_default/single.html
@ -0,0 +1,6 @@
+{{ define "title" }}
+  {{ .Title }} · {{ .Site.Title }}
+{{ end }}
+{{ define "content" }}
+  {{ partial "page.html" . }}
+{{ end }}
--- a/themes/devroom-2024/layouts/index.html
+++ b/themes/devroom-2024/layouts/index.html
@ -0,0 +1,3 @@
+{{ define "content" }}
+  {{ partial "home.html" . }}
+{{ end }}
--- a/themes/devroom-2024/layouts/partials/footer.html
+++ b/themes/devroom-2024/layouts/partials/footer.html
@ -0,0 +1,25 @@
+<footer>
+    <p>
+        {{ .Site.Copyright | safeHTML }}
+        <br />
+        This site is free of ads. Statistics are tracked respecting your privacy with <a href="https://usefathom.com/">Fathom</a>.
+        <br />
+        Was this post helpful to you? Why not <a class="buymeacoffee" target="_blank" href="https://www.buymeacoffee.com/ariejan">☕ Buy me a coffee</a>
+    </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 -->
--- a/themes/devroom-2024/layouts/partials/header.html
+++ b/themes/devroom-2024/layouts/partials/header.html
@ -0,0 +1,12 @@
+<header>
+  <nav>
+    <a href="/" class="brand">devroom.io</a>
+    <div class="menu">
+      <a href="/" class="menu-item">Blog</a>
+      <a href="/projects/" class="menu-item">Projects</a>
+      <a href="/about/" class="menu-item">About</a>
+      <a href="/gpg/" class="menu-item">GPG</a>
+      <a href="/contact/" class="menu-item">Contact</a>
+    </div>
+  </nav>
+</header>
--- a/themes/devroom-2024/layouts/partials/home.html
+++ b/themes/devroom-2024/layouts/partials/home.html
@ -0,0 +1,24 @@
+{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
+
+<div class="narrow">
+    <p>{{ .Site.Params.info }}</p>
+
+    <p><a href="/about">Read more about me &raquo;</a></p>
+</div>
+
+<div class="narrow">
+{{ range $pages.GroupByDate "2006" }}
+    <h2 class="year">{{ .Key }}</h2>
+
+    <div class="post-feed">
+    {{ range .Pages }}
+        <article class="post">
+            <div class="calendar">{{ time.Format "02 Jan" .Date }}</div>
+            <h2 class="title">{{ .Title }}</h2>
+            <div class="actions">{{ .ReadingTime }} min read &raquo;</div>
+            <a class="permalink" href="{{ .Params.ExternalLink | default .RelPermalink }}"></a>
+        </article>
+    {{ end }}
+    </div>
+{{ end }}
+</div>
--- a/themes/devroom-2024/layouts/partials/list.html
+++ b/themes/devroom-2024/layouts/partials/list.html
@ -0,0 +1,16 @@
+<section class="container list">
+    <h1 class="title">
+      {{- if eq .Kind "taxonomy" -}}
+        {{- i18n .Data.Singular | title -}}
+        {{- print "Tagged " -}}
+      {{- end -}}
+  
+      {{- .Title -}}
+    </h1>
+    <ul>
+      {{ range .Paginator.Pages }}
+      <li>{{ .Title }}<br/><a href="{{ .Params.ExternalLink | default .RelPermalink }}">{{ .Params.ExternalLink | default .RelPermalink }}</a></li>
+      {{ end }}
+    </ul>
+    
+  </section>
--- a/themes/devroom-2024/layouts/partials/page.html
+++ b/themes/devroom-2024/layouts/partials/page.html
@ -0,0 +1,4 @@
+<article>
+    <h1>{{ .Title }}</h1>
+    {{ .Content }}
+</article>  
--- a/themes/devroom-2024/layouts/partials/post.html
+++ b/themes/devroom-2024/layouts/partials/post.html
@ -0,0 +1,41 @@
+{{ $lastmod := .Lastmod.Format "2006-01-02" }}
+{{ $date := .Date.Format "2006-01-02" }}
+
+<article class="full">
+    <div class="article-head">
+        <div class="created_on"><time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>{{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006" ) }}</time></div>
+        {{ if not (eq $lastmod $date) }}
+        <div class="updated_on">Last updated <time datetime='{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}'>{{ .Lastmod.Format (.Site.Params.dateFormat | default "2 January 2006" ) }}</time></div>
+        {{ end }}
+        
+        <h1>{{ .Title }}</h1>
+    </div>
+
+    <article class="content">
+        <div class="narrow">
+            {{ .Content }}
+        </div>
+    </article>
+
+    <div class="narrow">
+        <div class="tags">Tags: 
+            {{ range .Params.tags }}
+            <a class="tag" href="/tags/{{ . | urlize }}">{{ . }}</a>
+            {{ end }}
+        </div>
+    </div>
+
+    <div class="narrow">
+        <div class="article-about">
+            <div class="article-author">
+                <div class="author-avatar">
+                    Written by
+                    <a href="/about/">
+                        <img src="/images/avatar.jpg" alt="Ariejan de Vroom" />
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</article>
--- a/themes/devroom-2024/layouts/partials/taxonomy/tags.html
+++ b/themes/devroom-2024/layouts/partials/taxonomy/tags.html
@ -0,0 +1,6 @@
+{{- range $index, $el := . -}}
+    {{- if gt $index 0 }}
+    <span class="separator">&bull;</span>
+    {{- end }}
+    <a href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}">{{ . | lower }}</a>
+{{- end -}}
--- a/themes/devroom-2024/layouts/posts/single.html
+++ b/themes/devroom-2024/layouts/posts/single.html
@ -0,0 +1,6 @@
+{{ define "title" }}
+  {{ .Title }} · {{ .Site.Title }}
+{{ end }}
+{{ define "content" }}
+  {{ partial "post.html" . }}
+{{ end }}
--- a/themes/devroom-2024/layouts/projects/single.html
+++ b/themes/devroom-2024/layouts/projects/single.html
@ -0,0 +1,6 @@
+{{ define "title" }}
+  {{ .Title }} · {{ .Site.Title }}
+{{ end }}
+{{ define "content" }}
+  {{ partial "post.html" . }}
+{{ end }}
--- a/themes/devroom-2024/theme.toml
+++ b/themes/devroom-2024/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 2024"
+license = "MIT"
+licenselink = "https://git.devroom.io/ariejan/devroom-2020/blob/master/LICENSE"
+description = ""
+homepage = "https://www.devroom.io"
+tags = []
+features = []
+min_version = "0.120"
+
+[author]
+  name = "Ariejan de Vroom"
+  homepage = "https://www.devroom.io"