Various website improvements

README.md

@@ -0,0 +1,38 @@
+# Storaged Project Website
+
+Source for [storaged.org](https://storaged.org) website.
+
+## Local Development
+
+```bash
+bundle install                 # Install dependencies
+bundle exec jekyll serve       # Dev server at http://localhost:4000
+bundle exec jekyll build       # Build static site to _site/
+```
+
+## Contributing
+
+Blog posts go in `_posts/` as `YYYY-MM-DD-Title.md`.
+
+Each blogpost starts with a metadata block:
+
+```yaml
+---
+layout: post
+title:  "Post Title"
+date:   2026-01-01 10:00:00 +0100
+categories: category
+author: Author Name
+---
+```
+
+Note: Jekyll will exclude posts with a future date from the build so don't forget to adjust the date before merging PR with the new post.
+
+New authors need to be added to `_data/authors.yml` with their name, short bio, and GitHub username:
+
+```yaml
+Author Name:
+  name: Author Name
+  bio: Short description of the author.
+  github: github-username
+```

_config.yml

@@ -6,11 +6,13 @@ description: >-
 theme: minima
 plugins:
   - jekyll-feed
+  - jekyll-sitemap
 
 show_excerpts: true
 
 github_username:  storaged-project
 rss: rss
+goatcounter: storaged
 
 header_pages:
   - blivet/blivet.md
@@ -24,3 +26,7 @@ markdown: kramdown
 include:
   - _static
   - _*.html
+
+exclude:
+  - README.md
+  - vendor

_data/authors.yml

@@ -0,0 +1,11 @@
+Vojtech Trefny:
+  name: Vojtech Trefny
+  bio: Senior Software Engineer at Red Hat working on blivet, libblockdev,
+       storage role and other storaged projects.
+  github: vojtechtrefny
+
+Tomáš Bžatek:
+  name: Tomáš Bžatek
+  bio: Senior Software Engineer at Red Hat working on UDisks, NVMe and other
+       storage tools and technologies.
+  github: tbzatek

_includes/author-bio.html

@@ -0,0 +1,13 @@
+{% if page.author %}
+  {% assign author = site.data.authors[page.author] %}
+  {% if author %}
+  <div class="author-bio">
+    <img class="author-bio-avatar" src="https://github.com/{{ author.github }}.png?size=80" alt="{{ author.name }}" />
+    <div class="author-bio-text">
+      <strong>{{ author.name }}</strong>
+      <p>{{ author.bio }}</p>
+      <a href="https://github.com/{{ author.github }}">GitHub</a>
+    </div>
+  </div>
+  {% endif %}
+{% endif %}

_includes/goatcounter.html

@@ -0,0 +1,4 @@
+{%- if site.goatcounter -%}
+<script data-goatcounter="https://{{ site.goatcounter }}.goatcounter.com/count"
+        async src="//gc.zgo.at/count.js"></script>
+{%- endif -%}

_includes/header.html

@@ -0,0 +1,38 @@
+<header class="site-header" role="banner">
+
+  <div class="wrapper">
+    {%- assign default_paths = site.pages | map: "path" -%}
+    {%- assign page_paths = site.header_pages | default: default_paths -%}
+    <a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
+
+    {%- if page_paths -%}
+      <nav class="site-nav">
+        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+        </label>
+
+        <div class="trigger">
+          <div class="dropdown">
+            <button class="page-link dropdown-toggle" aria-haspopup="true" aria-expanded="false">
+              Projects <span class="dropdown-caret">&#9662;</span>
+            </button>
+            <ul class="dropdown-menu">
+              {%- for path in page_paths -%}
+                {%- assign my_page = site.pages | where: "path", path | first -%}
+                {%- if my_page.title -%}
+                <li><a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a></li>
+                {%- endif -%}
+              {%- endfor -%}
+            </ul>
+          </div>
+          <a class="page-link" href="{{ "/about/" | relative_url }}">About</a>
+        </div>
+      </nav>
+    {%- endif -%}
+  </div>
+</header>

_layouts/default.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {%- include head.html -%}
+
+  <body>
+
+    {%- include header.html -%}
+
+    <main class="page-content" aria-label="Content">
+      <div class="wrapper">
+        {{ content }}
+      </div>
+    </main>
+
+    {%- include footer.html -%}
+
+    {%- include goatcounter.html -%}
+
+  </body>
+
+</html>

_layouts/post.html

@@ -0,0 +1,32 @@
+---
+layout: default
+---
+<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+
+  <header class="post-header">
+    <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
+    <p class="post-meta">
+      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+        {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+        {{ page.date | date: date_format }}
+      </time>
+      {%- if page.author -%}
+        • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
+      {%- endif -%}
+      {%- assign words = content | number_of_words -%}
+      {%- assign minutes = words | divided_by: 200 | plus: 1 -%}
+        • {{ minutes }} min read</p>
+  </header>
+
+  <div class="post-content e-content" itemprop="articleBody">
+    {{ content }}
+  </div>
+
+  {%- include author-bio.html -%}
+
+  {%- if site.disqus.shortname -%}
+    {%- include disqus_comments.html -%}
+  {%- endif -%}
+
+  <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
+</article>

_sass/author-bio.scss

@@ -0,0 +1,29 @@
+.author-bio {
+  display: flex;
+  align-items: flex-start;
+  gap: 15px;
+  margin-top: $spacing-unit;
+  padding: $spacing-unit / 2;
+  border-top: 1px solid $grey-color-light;
+}
+
+.author-bio-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.author-bio-text {
+  font-size: $small-font-size;
+  color: $grey-color-dark;
+
+  strong {
+    font-size: $base-font-size;
+    color: $text-color;
+  }
+
+  p {
+    margin: 4px 0 8px;
+  }
+}

_sass/projects-dropdown.scss

@@ -0,0 +1,90 @@
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+
+.dropdown-caret {
+  font-size: 0.7em;
+  vertical-align: middle;
+}
+
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  margin: 0;
+  padding: 5px 0;
+  list-style: none;
+  background-color: $background-color;
+  border: 1px solid $grey-color-light;
+  border-radius: 5px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  min-width: 160px;
+  z-index: 1000;
+
+  li {
+    margin: 0;
+  }
+
+  .page-link {
+    display: block;
+    padding: 6px 16px;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: lighten($grey-color-light, 5%);
+    }
+  }
+}
+
+// Desktop: show dropdown on hover or focus-within
+.dropdown:hover > .dropdown-menu,
+.dropdown:focus-within > .dropdown-menu {
+  display: block;
+}
+
+// Mobile: integrate with the hamburger menu
+@include media-query($on-palm) {
+  .dropdown {
+    display: block;
+    width: 100%;
+  }
+
+  .dropdown-toggle {
+    display: block;
+    padding: 5px 10px;
+    margin-left: 20px;
+    text-align: right;
+  }
+
+  .dropdown-menu {
+    position: static;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    min-width: 0;
+
+    .page-link {
+      padding: 5px 10px;
+      margin-left: 20px;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  // Always show the dropdown contents inside the hamburger menu
+  .dropdown > .dropdown-menu {
+    display: block;
+  }
+}