Revamp website

content/about.md

@@ -0,0 +1,32 @@
++++
+title = 'About me'
++++
+
+I'm **Victor Mignot** aka *dala*.
+
+I spend most of my time trying to acquire knowledge on computer science through small projects.
+All of them are licensed under free and open-source licenses and are available on [my personal Forgejo instance](https://git.dalaran.fr).
+I don't consider myself as a FOSS developer, as most of my projects are just small experiments or piece of software.
+I've still not engaged myself in any notable FOSS project, but I would be glad to.
+I also tend to self-host various services, and maintaining a small infrastructure at home.
+
+My goal behind this blog is to share my personal experiments and projects.
+I'm not an expert in any particular domain.
+As such, and even if I try to check every piece of information I share, I might utter false or approximate statements.
+I'll gladly fix it if you find some.
+
+My technical interests are:
+- embedded development
+- the mobile Linux ecosystem
+- the NixOS ecosystem (I use [Lix](https://lix.systems/) though)
+- open-hardware
+- trying to repair computers and mobile devices
+
+Here is the list of projects I would like to try to implement myself in the future
+(I'll try to keep it updated on the future):
+- A package manager.
+- A trivial implementation of a Linux init program.
+- Improve my current incomplete implementation of a [RISC-V hart emulator](https://git.dalaran.fr/dala/dremu).
+- A KeePass-based password manager for Linux Mobile (as the KeePassXC interface does not scale on mobile screen).
+
+Avatar by: https://x.com/MaewenMitzuki

content/posts/nixos-bpi-r4/2024-10-05-uboot-console.md

@@ -28,7 +28,6 @@ with a single command.
 It would make even more sense too cross-compile my router configuration from my PC with its Ryzen 7 5800X and deploy it on the BPI-R4.
 
 However, there are three caveats with this choice:
-
 - The Nix store usually takes some place on storage devices, so the embedded 8 GB eMMC might not be enough.
   But, since the BPI R4 has an integrated slot for a NVMe SSD and I have an empty 500 GB SSD available,
   it is way more than enough.
@@ -95,7 +94,9 @@ Once again, nixpkgs make it fairly easy with its embedded cross-compilation syst
 For example, if we want to build any aarch64 package from any architecture (like `hello`), we can just run:
 
 ```bash
-nix-build '<nixpkgs>' --arg crossSystem '(import <nixpkgs/lib>).systems.examples.aarch64-multiplatform' -A hello
+nix-build '<nixpkgs>' \
+          --arg crossSystem '(import <nixpkgs/lib>).systems.examples.aarch64-multiplatform' \
+          -A hello
 ```
 
 It is possible, because as any package in nixpkgs, `hello` is declared through a Nix recipe (a callPackage derivation) that

default.nix

@@ -1,4 +1,4 @@
-{ stdenv, lib, hugo, ... }:
+{ stdenv, lib, hugo, dart-sass, ... }:
 stdenv.mkDerivation {
   name = "dalaran.fr";
 
@@ -6,6 +6,7 @@ stdenv.mkDerivation {
 
   nativeBuildInputs = [
     hugo
+    dart-sass
   ];
 
   buildPhase = ''

hugo.toml

@@ -6,15 +6,14 @@ copyright = "CC BY-SA 4.0"
 
 [markup]
   [markup.highlight]
-    style = "tango"
+    noClasses = false
 
 [params]
-  introduction = "Just experimenting computer stuff and sharing it."
   mail = "dala@dalaran.fr"
-  forge_url = "git.dalaran.fr"
+  forge_url = "https://git.dalaran.fr"
   fediverse_id = "@dala@dalaran.fr"
-  fediverse_url = "https://gts.dalaran.fr"
+  fediverse_url = "https://gts.dalaran.fr/dala"
   source_code = "https://git.dalaran.fr/dala/dalaran.fr"
 
 [permalinks]
-  posts = "/:year/:month/:day/:filename"
+  posts = ":year/:month/:day/:filename"

layouts/partials/introduction.html

@@ -0,0 +1,14 @@
+<div style="display: flex; flex-direction:row; align-items:center;">
+  <img src="{{ .Site.BaseURL }}/logo.png" width="200" />
+  <p style="margin-left: 30px;">
+  Hi, I'm Victor Mignot and welcome to this blog ! <br/>
+  I'm a software developer and FOSS enthusiast.
+  I spend most of my free time on small computer science experiments and projects. <br/>
+  This blog is to share what I understood and learned along the way.
+  As such, don't expect from me any form of expertise on stuff I'll talk about.
+  If you find any mistake or false statement, don't hesitate to <a href="mailto:{{ .Site.Params.mail }}">join me</a>, and I'll gladly fix it ! <br />
+
+  You can find me on the Fediverse at <a href="{{ .Site.Params.fediverse_url }}">{{ .Site.Params.fediverse_id }}</a>
+  and my projects on <a href="{{ .Site.Params.forge_url }}">my personal Forgejo instance</a>.
+  </p>
+</div>

shell.nix

@@ -12,5 +12,6 @@ pkgs.mkShell {
 
   nativeBuildInputs = with pkgs; [
     hugo
+    dart-sass
   ];
 }

themes/dalaran/assets/css/code.scss

@@ -0,0 +1,129 @@
+@use 'palette';
+@use 'font';
+
+/* Background */
+.bg {
+  color: palette.$nord4;
+  background-color: #ffffff;
+}
+
+/* PreWrapper */
+.chroma {
+  padding: 10px;
+  border-radius: 5px;
+  font-family: font.$code;
+  color: palette.$nord0;
+  background-color: palette.$nord6;
+  overflow: scroll;
+}
+
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color:palette.$nord11 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
+/* LineHighlight */ .chroma .hl { background-color:#424853 }
+/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6c6f74 }
+/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6c6f74 }
+/* Line */ .chroma .line { display:flex; }
+/* Keyword */ .chroma .k { color:palette.$nord9;font-weight:bold }
+/* KeywordConstant */ .chroma .kc { color:palette.$nord9;font-weight:bold }
+/* KeywordDeclaration */ .chroma .kd { color:palette.$nord9;font-weight:bold }
+/* KeywordNamespace */ .chroma .kn { color:palette.$nord9;font-weight:bold }
+/* KeywordPseudo */ .chroma .kp { color:palette.$nord9 }
+/* KeywordReserved */ .chroma .kr { color:palette.$nord9;font-weight:bold }
+/* KeywordType */ .chroma .kt { color:palette.$nord9 }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color:palette.$nord7 }
+/* NameBuiltin */ .chroma .nb { color:palette.$nord9 }
+/* NameBuiltinPseudo */ .chroma .bp {  }
+/* NameClass */ .chroma .nc { color:palette.$nord7 }
+/* NameConstant */ .chroma .no { color:palette.$nord7 }
+/* NameDecorator */ .chroma .nd { color:palette.$nord12 }
+/* NameEntity */ .chroma .ni { color:palette.$nord12 }
+/* NameException */ .chroma .ne { color:palette.$nord11 }
+/* NameFunction */ .chroma .nf { color:palette.$nord8 }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color:palette.$nord7 }
+/* NameNamespace */ .chroma .nn { color:palette.$nord7 }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py { color:palette.$nord7 }
+/* NameTag */ .chroma .nt { color:palette.$nord9 }
+/* NameVariable */ .chroma .nv {  }
+/* NameVariableClass */ .chroma .vc {  }
+/* NameVariableGlobal */ .chroma .vg {  }
+/* NameVariableInstance */ .chroma .vi {  }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color:palette.$nord14 }
+/* LiteralStringAffix */ .chroma .sa { color:palette.$nord14 }
+/* LiteralStringBacktick */ .chroma .sb { color:palette.$nord14 }
+/* LiteralStringChar */ .chroma .sc { color:palette.$nord14 }
+/* LiteralStringDelimiter */ .chroma .dl { color:palette.$nord14 }
+/* LiteralStringDoc */ .chroma .sd { color:#616e87 }
+
+/* LiteralStringDouble */
+.chroma .s2 {
+  color: palette.$nord14;
+  font-weight: bold;
+}
+
+/* LiteralStringEscape */ .chroma .se { color:palette.$nord13 }
+/* LiteralStringHeredoc */ .chroma .sh { color:palette.$nord14 }
+/* LiteralStringInterpol */ .chroma .si { color:palette.$nord14 }
+/* LiteralStringOther */ .chroma .sx { color:palette.$nord14 }
+
+/* LiteralStringRegex */
+.chroma .sr {
+  color: palette.$nord12;
+}
+
+/* LiteralStringSingle */
+.chroma .s1 {
+  color: palette.$nord14;
+  font-weight: bold;
+}
+
+/* LiteralStringSymbol */ .chroma .ss { color:palette.$nord14 }
+/* LiteralNumber */ .chroma .m { color:palette.$nord15 }
+/* LiteralNumberBin */ .chroma .mb { color:palette.$nord15 }
+/* LiteralNumberFloat */ .chroma .mf { color:palette.$nord15 }
+/* LiteralNumberHex */ .chroma .mh { color:palette.$nord15 }
+/* LiteralNumberInteger */ .chroma .mi { color:palette.$nord15 }
+/* LiteralNumberIntegerLong */ .chroma .il { color:palette.$nord15 }
+/* LiteralNumberOct */ .chroma .mo { color:palette.$nord15 }
+
+/* Operator */
+.chroma .o {
+  color: palette.$nord9;
+}
+
+/* OperatorWord */ .chroma .ow { color:palette.$nord9;font-weight:bold }
+
+/* Punctuation */
+.chroma .p {
+  color: palette.$nord3;
+}
+
+/* Comment */ .chroma .c { color:#616e87;font-style:italic }
+/* CommentHashbang */ .chroma .ch { color:#616e87;font-style:italic }
+/* CommentMultiline */ .chroma .cm { color:#616e87;font-style:italic }
+/* CommentSingle */ .chroma .c1 { color:#616e87;font-style:italic }
+/* CommentSpecial */ .chroma .cs { color:#616e87;font-style:italic }
+/* CommentPreproc */ .chroma .cp { color:palette.$nord10;font-style:italic }
+/* CommentPreprocFile */ .chroma .cpf { color:palette.$nord10;font-style:italic }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color:palette.$nord11 }
+/* GenericEmph */ .chroma .ge { font-style:italic }
+/* GenericError */ .chroma .gr { color:palette.$nord11 }
+/* GenericHeading */ .chroma .gh { color:palette.$nord8;font-weight:bold }
+/* GenericInserted */ .chroma .gi { color:palette.$nord14 }
+/* GenericOutput */ .chroma .go {  }
+/* GenericPrompt */ .chroma .gp { color:palette.$nord3;font-weight:bold }
+/* GenericStrong */ .chroma .gs { font-weight:bold }
+/* GenericSubheading */ .chroma .gu { color:palette.$nord8;font-weight:bold }
+/* GenericTraceback */ .chroma .gt { color:palette.$nord11 }
+/* GenericUnderline */ .chroma .gl {  }
+/* TextWhitespace */ .chroma .w {  }

themes/dalaran/assets/css/font.scss

@@ -0,0 +1,2 @@
+$default: sans-serif;
+$code: $default;

themes/dalaran/assets/css/main.scss

@@ -1,58 +1,122 @@
-$font: "JetBrains Mono";
+@use 'palette';
-$nord-blue: #2e3440;
+@use 'font';
-$nord-frost: #5e81ac;
+@use 'code';
 
-@font-face {
+$header_height: 60px;
-  font-family: $font;
-  font-style: normal;
-  src: local(''),
-       url(../fonts/JetBrainsMono-Medium.woff2) format('woff2');
-}
 
 html {
   display: flex;
   justify-content: center;
-  font-family: $font, sans-serif;
+  font-family: font.$default;
-  color: $nord-blue;
+  color: palette.$nord3;
+  background-color: palette.$nord6;
+}
+
+header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: palette.$nord1;
+  padding: 5px 50px;
+  width: calc(100vw - 75px);
+  height: $header_height;
+  align-items: center;
+
+  a {
+    text-decoration: none;
+    color: palette.$nord5;
+  }
+
+  .title {
+    margin: 0px;
+  }
+
+  nav {
+    display: flex;
+    justify-content: space-evenly;
+    font-size: 1.2em;
+    font-weight: bold;
+    width: 200px;
+
+    a {
+      padding: 10px;
+      border-radius: 5px;
+    }
+
+    a:hover {
+      background-color: palette.$nord3;
+    };
+  }
 }
 
 body {
-  max-width: 1000px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
+  width: 100%;
 }
 
 a {
-  color: $nord-frost;
+  color: palette.$nord10;
+}
+
+main {
+  max-width: 1000px;
+  margin: 10px 50px;
+  font-size: 1.1em;
 }
 
 footer {
   display: flex;
-  margin-top: 50px;
   flex-direction: column;
   justify-content: center;
+
+  a {
+    text-decoration: none;
+  }
 }
 
-.article-header {
+article {
-  margin-bottom: 40px;
+  background-color: #ffffff;
+  padding: 40px 100px;
+  border-radius: 5px;
+
+  h1:nth-of-type(1) {
+    margin-top: 0px;
+  }
 }
 
-.article-title {
+.article-head {
-  margin-bottom: 0;
+  margin: 50px 0px;
+  text-align: center;
 }
 
 .articles-list {
   margin-top: 20px;
+
+  h1 {
+    font-size: 2.1rem;
+    border-bottom: 1px solid palette.$nord4;
+    margin-bottom: 15px;
+  }
+
+  h2 {
+    margin: 3px 0px;
+  }
+
+  time {
+    color: palette.$nord9;
+  }
+
+  a {
+    text-decoration: none;
+    color: #7b88a1;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
 }
 
-.articles-header {
-  display: flex;
-  margin-bottom: 20px;
-  align-items: baseline;
-}
-
-.articles-header h2 {
-  margin: 0 5px 0 0;
-}
-
-.articles-list time {
-  color: #88c0d0;
-}

themes/dalaran/assets/css/palette.scss

@@ -0,0 +1,27 @@
+/*
+ * This is the whole Nord palette as defined in https://www.nordtheme.com/docs/colors-and-palettes
+ */
+
+/* Polar Night palette */
+$nord0: #2e3440;
+$nord1: #3b4252;
+$nord2: #434c5e;
+$nord3: #4c566a;
+
+/* Snow Storm palette */
+$nord4: #d8dee9;
+$nord5: #e5e9f0;
+$nord6: #eceff4;
+
+/* Frost palette */
+$nord7: #8fbcbb;
+$nord8: #88c0d0;
+$nord9: #81a1c1;
+$nord10: #5e81ac;
+
+/* Aurora palette */
+$nord11: #bf616a;
+$nord12: #d08770;
+$nord13: #ebcb8b;
+$nord14: #a3be8c;
+$nord15: #b48ead;

themes/dalaran/layouts/_default/single.html

@@ -1,12 +1,15 @@
-{{ partial "head.html" . }}
+{{ partial "header.html" . }}
-{{ partial "nav.html" . }}
-<header class="article-header">
-  <h1 class="article-title">{{ .Title }}</h1>
-  <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
-    <b>{{ .Date.Format "2006-01-02" }}</b>
-  </time>
-</header>
 <main>
+  <div class="article-head">
+    <h1>{{ .Title }}</h1>
+    {{ if not .Date.IsZero }}
+    <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
+        <b>{{ .Date | time.Format ":date_medium" }}</b>
+        -
+        {{ .ReadingTime }} minutes read
+    </time>
+    {{ end }}
+  </div>
   <article>
     {{ .Content }}
   </article>

themes/dalaran/layouts/index.html

@@ -1,17 +1,20 @@
 {{ partial "header.html" . }}
-{{ partial "profile.html" . }}
 <main>
+  {{ partial "introduction.html" . }}
   <section class="articles-list">
-    <div class="articles-header">
+    <h1>Posts</h1>
-      <h2>Posts</h2>
-      <small>
-        <a href="index.xml">[RSS]</a>
-      </small>
-    </div>
     {{ range (where .Site.RegularPages "Section" "posts") }}
-    <div class="article">
+    <div>
-      <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">[{{ .Date.Format "2006-01-02" }}]</time>
+      <a href="{{ .Permalink }}">
-      <a href="{{ .Permalink }}">{{ .Title }}</a>
+        <h2>{{ .Title }}</h2>
+      </a>
+      <div class="article-info">
+        <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
+          {{ .Date | time.Format ":date_medium" }}
+        </time>
+        -
+        {{ .ReadingTime }} minutes read
+      </div>
     </div>
     {{ end }}
   </section>

themes/dalaran/layouts/partials/footer.html

@@ -1,3 +1,4 @@
+{{ if eq .Section "posts" }}
 <footer>
   <small>
     <p xmlns:cc="http://creativecommons.org/ns#">
@@ -12,4 +13,5 @@
     </p>
   </small>
 </footer>
+{{ end }}
 </html>

themes/dalaran/layouts/partials/head.html

@@ -1,9 +1,10 @@
+{{ $sass_opts := dict "transpiler" "dartsass" }}
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>
   <title>{{ .Title }}</title>
   <link rel="alternate" type="application/rss+xml" title="RSS" href="index.xml"/>
-  {{ $style := resources.Get "css/main.scss" | toCSS | minify | fingerprint }}
+  {{ $style := resources.Get "css/main.scss" | toCSS $sass_opts | minify | fingerprint }}
   <link rel="stylesheet" href="{{ $style.RelPermalink }}"/>
 </head>

themes/dalaran/layouts/partials/header.html

@@ -1,2 +1,5 @@
 {{ partial "head.html" . }}
-<h1>{{ .Site.Title }}</h1>
+<header>
+  <a href="{{ .Site.BaseURL }}"><h1 class="title">{{ .Site.Title }}</h1></a>
+  {{ partial "nav.html" . }}
+</header>

themes/dalaran/layouts/partials/nav.html

@@ -1,3 +1,4 @@
 <nav>
-  <a href="{{ .Site.BaseURL }}"><~ Home</a>
+  <a href="{{ .Site.BaseURL }}/about">About</a>
+  <a href="{{ .Site.BaseURL }}/index.xml">RSS</a>
 </nav>

themes/dalaran/layouts/partials/profile.html

@@ -1,38 +0,0 @@
-{{ with .Site.Params }}
-<aside class="profile">
-  {{ if .introduction }}
-    <div>{{ .introduction }}</div>
-  {{ end }}
-
-  {{ if (isset . "mail") }}
-  <div class="profile-entry">
-    <span class="profile-key">
-      Mail:
-    </span>
-    <span class="profile-value">
-      <a href="mailto:{{ .mail }}">{{ .mail }}</a>
-    </span>
-  </div>
-  {{ end }}
-  {{ if (isset . "forge_url") }}
-  <div class="profile-entry">
-    <span class="profile-key">
-      Forge:
-    </span>
-    <span class="profile-value">
-      <a href="https://{{ .forge_url  }}">{{ .forge_url }}</a>
-    </span>
-  </div>
-  {{ end }}
-  {{ if and (isset . "fediverse_id") (isset . "fediverse_url") }}
-  <div class="profile-entry">
-    <span class="profile-key">
-      Fediverse:
-    </span>
-    <span class="profile-value">
-      <a rel="me" href="{{ .fediverse_url }}">{{ .fediverse_id }}</a>
-    </span>
-  </div>
-  {{ end }}
-</aside>
-{{ end }}