Merge branch 'main' into private_http_clone_merged_main

.cspell.json

@@ -7,10 +7,13 @@
     // code
     "go",
     "node",
+    "shell",
     // package names
     "npm"
   ],
   "words": [
+    "woodpeckerci",
+    "riscv",
     "codeberg",
     "editview",
     "forgejo",
@@ -109,7 +112,20 @@
     "mstruebing",
     "davidanson",
     "pipelinecomponents",
-    "corepack"
+    "passwordless",
+    "corepack",
+    "letsencrypt.org",
+    "accounturi",
+    "Ente",
+    "getent",
+    "sealioning",
+    "DNSSEC",
+    "Arminiusstraße",
+    "HELLOTUX",
+    "Merch",
+    "merch",
+    "freewear",
+    "gedankenstuecke"
   ],
   "ignorePaths": [
     "**/node_modules/**/*",

.eleventy.js

@@ -1,85 +0,0 @@
-const navigationPlugin = require('@11ty/eleventy-navigation');
-const syntaxHighlightingPlugin = require('@11ty/eleventy-plugin-syntaxhighlight');
-const markdownIt = require('markdown-it');
-const tableOfContentsPlugin = require('@uncenter/eleventy-plugin-toc');
-const markdownItClass = require('@toycode/markdown-it-class');
-const markdownItAnchor = require('markdown-it-anchor');
-const library = require('@fortawesome/fontawesome-svg-core').library;
-const icon = require('@fortawesome/fontawesome-svg-core').icon;
-const fas = require('@fortawesome/free-solid-svg-icons').fas;
-const { execSync } = require('child_process');
-
-module.exports = function (eleventyConfig) {
-  eleventyConfig.addPlugin(navigationPlugin);
-  eleventyConfig.addPlugin(syntaxHighlightingPlugin);
-
-  eleventyConfig.addPassthroughCopy('assets');
-  eleventyConfig.addPassthroughCopy('fonts');
-
-  // Font Awesome Icons
-  library.add(fas);
-  eleventyConfig.addShortcode('fas_icon', function (args) {
-    var fas_svg = icon({ prefix: 'fas', iconName: args });
-    return `${fas_svg.html}`;
-  });
-
-  const mapping = {
-    h2: 'content-title',
-    h3: 'content-title',
-    h4: 'content-title',
-    h5: 'content-title',
-    h6: 'content-title',
-    table: 'table',
-    blockquote: 'alert',
-  };
-
-  const mdOptions = { linkify: false, html: true };
-  const mdAnchorOpts = {
-    permalink: markdownItAnchor.permalink.headerLink(),
-    permalinkClass: 'ml-5',
-    permalinkSymbol: '#',
-    level: [1, 2, 3, 4],
-  };
-
-  eleventyConfig.setLibrary(
-    'md',
-    markdownIt(mdOptions).use(markdownItClass, mapping).use(markdownItAnchor, mdAnchorOpts),
-  );
-
-  eleventyConfig.addPairedShortcode('admonition', function (content, type, title) {
-    let titleStr = '';
-    if (title) {
-      titleStr = title;
-    } else if (type) {
-      titleStr = type.substring(0, 1).toUpperCase() + type.substring(1).toLowerCase();
-    } else {
-      titleStr = 'Info';
-    }
-
-    return `<div class="admonition${type ? ` ${type.toLowerCase()}` : ''}">
-      <div class="admonition-title">
-        <span class="admonition-icon${type ? ` ${type.toLowerCase()}` : ''}"></span>
-        ${titleStr}
-      </div>
-      <div class="admonition-content">${content}</div>
-    </div>`;
-  });
-
-  eleventyConfig.addPlugin(tableOfContentsPlugin, {
-    tags: ['h2', 'h3'],
-    wrapper: function (toc) {
-      toc = toc.replaceAll('<a', "<a class='sidebar-link'");
-      return `${toc}`;
-    },
-  });
-
-  eleventyConfig.on('eleventy.after', () => {
-    execSync(`npx pagefind`, { encoding: 'utf-8' });
-  });
-
-  return {
-    dir: {
-      input: 'content',
-    },
-  };
-};

.forgejo/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,17 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Ask for help in the Community issue tracker
+    url: https://codeberg.org/Codeberg/Community/issues/
+    about: Get help with using Codeberg from the community and tell us what you think.
+  - name: Ask for help in a chatroom
+    url: https://docs.codeberg.org/contact
+    about: If you need real-time support from the community, join our Matrix or IRC rooms.
+  - name: Woodpecker CI Examples
+    url: https://codeberg.org/Codeberg-CI/examples/
+    about: If you need examples for using Codeberg's Woodpecker CI, click here.
+  - name: Forgejo Documentation
+    url: https://forgejo.org/docs
+    about: Forgejo, which powers codeberg.org, offers its own distinct documentation. Issues discussing subjects that Codeberg's Documentation does not are, of course, still welcome, but this might help.
+  - name: Woodpecker CI Documentation
+    url: https://woodpecker-ci.org/docs/intro
+    about: Similarly, Woodpecker, which powers ci.codeberg.org, also offers its own distinct documentation.

.gitignore

@@ -1,4 +1,25 @@
-node_modules/
+# Project-specific
+## Output of Eleventy site builder
 _site/
-pages.git/
+.cache/
+
+
+# Integrated development environments (IDEs) and text editors
+## JetBrains
 .idea/
+
+## Visual Studio Code
+.vscode/
+
+
+# Package managers
+## npm - Node.js
+node_modules/
+
+## pnpm - Node.js
+.pnpm-store/
+
+
+# Web servers
+## Codeberg Pages
+pages.git/

.lycheeignore

@@ -1,8 +1,12 @@
-http://127.0.0.1:**
+.*%7B%7B%20child.url%20%7D%7D
+http://127.0.0.1:.*
 https://pages.codeberg.org/user.name/
 https://user.name.codeberg.page/
 https://repo.sitory.username.codeberg.page/
-file://** */
 https://codeberg.org/username/repo.git
-https://username.codeberg.page/**
-https://openclipart.org/**
+https://username.codeberg.page/.*
+https://openclipart.org/.*
+https://www.gnu.org/.*
+https://translate.codeberg.org
+https://stackoverflow.com/.*
+https://medium.com/technical-writing-is-easy/screenshots-in-documentation-27b45342aad8

.markdownlint.yaml

@@ -45,7 +45,7 @@ MD012:
 # MD013/line-length - Line length
 MD013:
   # Number of characters
-  line_length: 500
+  line_length: 120
   # Number of characters for headings
   heading_line_length: 100
   # Number of characters for code blocks
@@ -56,8 +56,6 @@ MD013:
   tables: false
   # Include headings
   headings: true
-  # Include headings
-  headers: true
   # Strict length checking
   strict: false
   # Stern length checking
@@ -71,9 +69,7 @@ MD022:
   lines_below: 1
 
 # MD024/no-duplicate-heading/no-duplicate-header - Multiple headings with the same content
-MD024:
-  # Only check sibling headings
-  allow_different_nesting: true
+MD024: false
 
 # MD025/single-title/single-h1 - Multiple top-level headings in the same document
 MD025:
@@ -139,3 +135,9 @@ MD046:
 MD048:
   # Code fence style
   style: 'backtick'
+
+# MD051/link-fragments - Link fragments should be valid
+MD051:
+  # Ignore link fragments ending with simple URL percent-encoding.
+  # For example, to allow targeting headings ending with a question mark ('?').
+  ignored_pattern: "%\\w{2}$"

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "DavidAnson.vscode-markdownlint",
+    "EditorConfig.EditorConfig",
+    "ginfuru.better-nunjucks",
+    "streetsidesoftware.code-spell-checker"
+  ]
+}

.woodpecker/build.yaml

@@ -1,12 +1,11 @@
 when:
-  - event: [pull_request]
   - event: push
     branch:
       - ${CI_REPO_DEFAULT_BRANCH}
 
 steps:
   build:
-    image: codeberg.org/woodpecker-plugins/node-pm:1.3.0
+    image: codeberg.org/woodpecker-plugins/node-pm:1.3.6
     settings:
       run: build
       with: pnpm

.woodpecker/delete-preview.yaml

@@ -0,0 +1,27 @@
+when:
+  - event: pull_request_closed
+
+steps:
+  create-empty-dir:
+    image: alpine
+    commands:
+      - mkdir _empty
+
+  delete-preview:
+    image: codeberg.org/gedankenstuecke/git-pages-woodpecker-plugin@sha256:5257561a95054104f7499838817f3b447049a1edc14e87b99156b1302e0bce36
+    settings:
+      SITE_URL: https://codeberg.codeberg.page/documentation
+      PATH: pull_${CI_COMMIT_PULL_REQUEST}
+      TOKEN:
+        from_secret: surge_forge_token
+      UPLOAD_DIR: _empty
+    depends_on: create-empty-dir
+
+  comment:
+    image: mcs94/gitea-comment@sha256:f1a06366bfa34ff7594f369ebf81cbadd2d4410b7d51c9aa59c0c0264aa5fbd9
+    settings:
+      gitea_address: https://codeberg.org
+      gitea_token:
+        from_secret: surge_forge_token
+      comment: 'Preview deleted.'
+    depends_on: delete-preview

.woodpecker/deploy-preview.yaml

@@ -1,29 +1,37 @@
 when:
-  - event: [pull_request, pull_request_closed]
+  - event: pull_request
 
 steps:
+  change-path:
+    image: alpine
+    commands:
+      - |
+        sed -i.orig -e "s~pathPrefix: '/'~pathPrefix: '/documentation/pull_${CI_COMMIT_PULL_REQUEST}/'~" eleventy.config.mjs
+
   build:
-    image: codeberg.org/woodpecker-plugins/node-pm
+    image: codeberg.org/woodpecker-plugins/node-pm@sha256:bff3ee2d7492e89a0dfbe6ee4c7d5ce636108cd973c0c355269f681e8dd8a196
     settings:
       run: build
       with: pnpm
       frozen_lockfile: true
       ignore_node_modules: true
+    depends_on: change-path
 
   deploy-preview:
-    image: docker.io/woodpeckerci/plugin-surge-preview:1.3.1
+    image: codeberg.org/gedankenstuecke/git-pages-woodpecker-plugin@sha256:5257561a95054104f7499838817f3b447049a1edc14e87b99156b1302e0bce36
     settings:
-      path: '_site/'
-      forge_type: gitea
-      forge_url: https://codeberg.org
-      surge_token:
-        from_secret: surge_token
-      forge_repo_token:
+      SITE_URL: https://codeberg.codeberg.page/documentation
+      PATH: pull_${CI_COMMIT_PULL_REQUEST}
+      TOKEN:
         from_secret: surge_forge_token
-    failure: ignore
-    when:
-      event: [pull_request, pull_request_closed]
-      path:
-        - content/**
-        - assets/**
-        - .eleventy.js
+      UPLOAD_DIR: _site
+    depends_on: build
+
+  comment:
+    image: mcs94/gitea-comment@sha256:f1a06366bfa34ff7594f369ebf81cbadd2d4410b7d51c9aa59c0c0264aa5fbd9
+    settings:
+      gitea_address: https://codeberg.org
+      gitea_token:
+        from_secret: surge_forge_token
+      comment: 'Preview ready: https://codeberg.codeberg.page/documentation/pull_${CI_COMMIT_PULL_REQUEST}'
+    depends_on: deploy-preview

.woodpecker/lint.yaml

@@ -6,30 +6,32 @@ when:
 
 steps:
   lint-markdown:
-    image: davidanson/markdownlint-cli2:v0.13.0
+    image: davidanson/markdownlint-cli2:v0.20.0
     commands:
-      - 'markdownlint-cli2 *.{md,markdown}'
+      - 'markdownlint-cli2 **/*.md'
     when:
-      path: '*.{md,markdown}'
+      path:
+        include: ['.woodpecker/*.yaml', '*.{md,markdown}']
 
   editor-config:
-    image: mstruebing/editorconfig-checker:v3.0.3
+    image: mstruebing/editorconfig-checker:v3.6.1
     depends_on: []
 
   prettier:
-    image: docker.io/woodpeckerci/plugin-prettier:0.1.0
+    image: docker.io/woodpeckerci/plugin-prettier:1.4.1
     depends_on: []
     settings:
-      version: 3.2.5
+      # renovate: datasource=npm depName=prettier
+      version: 3.9.4
 
   links:
-    image: lycheeverse/lychee:0.15.1
+    image: lycheeverse/lychee:0.22.0
     depends_on: []
     commands:
-      - lychee -v -t 40 .
+      - lychee -v -t 40 --root-dir $(pwd)/content --fallback-extensions md .
 
   lint-yaml:
-    image: pipelinecomponents/yamllint:0.31.3
+    image: pipelinecomponents/yamllint:0.35.13
     depends_on: []
     commands:
       - yamllint --strict .
@@ -37,8 +39,9 @@ steps:
       path: '*.{yml,yaml}'
 
   spellcheck:
-    image: docker.io/node:22-alpine
+    image: docker.io/node:24-alpine
     depends_on: []
     commands:
+      - npm install -g corepack@latest
       - corepack enable
       - pnpx cspell lint --no-progress --gitignore '{**,.*}/{*,.*}'

Dockerfile

@@ -1,16 +1,21 @@
-FROM node:16.15.1-stretch-slim
+# The main purpose of this Dockerfile is to install the `pnpm` package manager in the official Node.js image
+# and use an init script as the entrypoint of a custom image to build and run the documentation site.
+FROM node:lts-slim@sha256:e8e2e91b1378f83c5b2dd15f0247f34110e2fe895f6ca7719dbb780f929368eb
 
-RUN apt-get update && apt-get -y upgrade
+EXPOSE 8080/tcp
+SHELL [ "bash", "-c" ]
+ENTRYPOINT [ "./container-init.sh" ]
 
-RUN apt-get install -y git curl
-RUN curl -fsSL https://get.pnpm.io/install.sh | sh -
+ENV CI="true"
 
-RUN mkdir /opt/documentation && chown node: /opt/documentation
+# renovate: datasource=npm depName=pnpm
+ENV PNPM_VERSION="11.5.3"
+
+RUN apt-get update \
+&& DEBIAN_FRONTEND=noninteractive apt-get --assume-yes upgrade \
+&& rm --recursive --force /var/lib/apt/lists/*
+
+RUN npm install --global pnpm@${PNPM_VERSION}
 
 USER node
-
-WORKDIR /opt/documentation
-
-RUN pnpm install
-
-CMD [ "pnpm", "run", "serve"]
+WORKDIR /docs

LICENSE.md

@@ -16,4 +16,5 @@ licensed under [multiple licenses](https://fontawesome.com/license/free).
 
 Codeberg and the Codeberg Logo are trademarks of Codeberg e.V.
 
-"Knut the Polar Bear" has been derived from [https://openclipart.org/detail/193243/polar-bear-remix](https://openclipart.org/detail/193243/polar-bear-remix), under CC0 1.0
+"Knut the Polar Bear" has been derived from [https://openclipart.org/detail/193243/polar-bear-remix](https://openclipart.org/detail/193243/polar-bear-remix),
+under CC0 1.0

README.md

@@ -3,18 +3,22 @@
 This repository contains the [documentation for Codeberg](https://docs.codeberg.org/), with some code to build it into
 a static website.
 
-Please have a look into it and consider to help writing the Documentation. This is still very much work-in-progress, the more useful material we collect, the better we can later present it! All contributions are very welcome!
+Please have a look into it and consider to help writing the Documentation.
+This is still very much work-in-progress, the more useful material we collect, the better we can later present it!
+All contributions are very welcome!
 
 For an introduction on contributing to Codeberg Documentation, please have a look
 at [the section on improving the documentation](https://docs.codeberg.org/improving-documentation/).
 
 ## Usage
 
-### Local Development
+### Local Development using nodejs
 
 If you want to work on the documentation, for example by writing your own articles,
 the easiest way to do so is to fork the documentation repository and develop locally.
 
+To learn how to get `pnpm` see the [PNpm website](https://pnpm.io).
+
 First, run
 
 `pnpm install`
@@ -24,7 +28,7 @@ You only have to do this once.
 
 Then run
 
-`pnpm run serve`
+`pnpm run dev`
 
 to start a development web server that by default is listening at `http://localhost:8080`.
 
@@ -44,14 +48,14 @@ You must have a container-engine installed (docker, podman, etc.)
 First build the container image:
 
 ```shell
-docker build -t Codeberg/Documentation-server .
+docker build --tag codeberg-docs:dev .
 ```
 
 You do not have to rebuild the image every time. Once you build the image you can always start the development
 webserver using the container engine:
 
 ```shell
-docker run --rm -v $PWD:/opt/documentation Codeberg/Documentation-server:latest
+docker run --name "codeberg-docs" --rm --tty --interactive --volume "${PWD}:/docs" --publish "127.0.0.1:8080:8080/tcp" codeberg-docs:dev
 ```
 
 Use the "External" URL the container outputs on startup to access your documentation.
@@ -63,9 +67,9 @@ Use `Ctrl-C` to exit / end the container.
 The parameters are:
 
 `--rm` removes the container after it's use
-`-v` mounts the current (documentation repository root) folder to `/opt/documentation` in the container.
+`--volume` mounts the current (documentation repository root) folder to `/docs` in the container.
 
-`Codeberg/Documentation-server:latest` refers to the container image built in the first step (using `docker build`).
+`codeberg-docs:dev` refers to the container image built in the first step (using `docker build`).
 
 ### Build & Deployment
 
@@ -84,6 +88,23 @@ Instead, to directly publish the page to Codeberg pages, you can also run
 
 which includes a call to `pnpm run build`.
 
+### Check and fix formatting errors
+
+Before you create a pull request with your changes, you should check and fix formatting errors.
+Use the following command to fix formatting errors automatically:
+
+`pnpx prettier . -w`
+
+With the following command you can check if there are any formatting errors remaining:
+
+`pnpx prettier . -c`
+
+In addition you should also run the linter which is also used when checking pull requests:
+
+`pnpx cspell lint --no-progress --gitignore '{**,.*}/{*,.*}'`
+
+If this shows any errors, please fix them before committing your changes and creating a pull request.
+
 ### Technical Information
 
 This website uses [Eleventy](https://www.11ty.dev/), a static site generator.
@@ -93,13 +114,18 @@ with `package-lock.json` to try to ensure reproducible builds.
 
 It also uses [PageFind](https://pagefind.app/), a static search library.
 
-Deployment previews are generated for every PR using [Surge.sh](https://surge.sh/) through the corresponding [Woodpecker plugin](https://woodpecker-ci.org/plugins/Surge%20preview%20plugin).
+Deployment previews are generated for every PR using [Surge.sh](https://surge.sh/)
+through the corresponding [Woodpecker plugin](https://woodpecker-ci.org/plugins/surge-preview).
 
 A spellchecker is used to check for spelling errors in the documentation.
 To add exceptions to the spellchecker, add them to the `.cspell.json` file.
 
+This project is deployed to Codeberg via [a cron job](https://codeberg.org/Codeberg-Infrastructure/scripted-configuration/src/branch/main/hosts/static/home/build/build_docs.sh)
+executed on the Codeberg infrastructure.
+
 ## License and Contributors
 
 This website (excluding bundled fonts) is licensed under CC BY-SA 4.0. See the [LICENSE](LICENSE.md) file for details.
 
-Please refer to the [commit log](https://codeberg.org/Codeberg/Documentation/commits/branch/main) for an exhaustive list of contributors to Codeberg Documentation.
+Please refer to the [commit log](https://codeberg.org/Codeberg/Documentation/commits/branch/main)
+for an exhaustive list of contributors to Codeberg Documentation.

assets/css/codeberg-docs.css

@@ -18,6 +18,21 @@
   --admonition-icon--question: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M10.97 8.265a1.45 1.45 0 0 0-.487.57.75.75 0 0 1-1.341-.67c.2-.402.513-.826.997-1.148C10.627 6.69 11.244 6.5 12 6.5c.658 0 1.369.195 1.934.619a2.45 2.45 0 0 1 1.004 2.006c0 1.033-.513 1.72-1.027 2.215-.19.183-.399.358-.579.508l-.147.123a4.329 4.329 0 0 0-.435.409v1.37a.75.75 0 1 1-1.5 0v-1.473c0-.237.067-.504.247-.736.22-.28.486-.517.718-.714l.183-.153.001-.001c.172-.143.324-.27.47-.412.368-.355.569-.676.569-1.136a.953.953 0 0 0-.404-.806C12.766 8.118 12.384 8 12 8c-.494 0-.814.121-1.03.265ZM13 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path><path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"></path></svg>');
 
   --admonition-icon-dimension: 20px;
+
+  --pagefind-ui-text: var(--bs-link-color) !important;
+
+  --color-nav-bg: #2185d0;
+}
+
+.sidebar,
+.navbar-brand {
+  --bs-sidebar-brand-color: var(--bs-white);
+  --bs-navbar-brand-color: var(--bs-white);
+}
+
+.btn-close {
+  filter: var(--bs-btn-close-white-filter);
+  --bs-btn-close-opacity: 1;
 }
 
 .content :not(img, pre) {
@@ -26,12 +41,16 @@
 .content img {
   border: 5px solid rgba(0, 0, 0, 0.2);
   max-width: 100%;
+  height: auto;
 }
 .content blockquote {
   margin: 0;
 }
+
 .content-title {
-  margin-top: 20px !important;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  scroll-margin-block-start: 65px;
 }
 
 .content pre {
@@ -53,11 +72,6 @@
   padding-left: 2em;
 }
 
-.codeberg-design .card,
-.codeberg-design hr {
-  margin-left: 0;
-}
-
 a.header-anchor,
 a.header-anchor:visited {
   color: var(--lm-base-text-color) !important;
@@ -86,14 +100,6 @@ pre:not([class*='language-']) {
   border-radius: 0.3em;
 }
 
-/* Override sidebar link style */
-.codeberg-design .sidebar-title a {
-  color: var(--sidebar-title-text-color);
-}
-.codeberg-design .sidebar-title .dark-mode a {
-  color: var(--dm-sidebar-title-text-color);
-}
-
 /* Apply halfmoon style to inline code */
 code:not(pre > code) {
   font-size: var(--code-font-size);
@@ -113,21 +119,6 @@ code:not(pre > code) {
 
 /* Custom Admonition boxes */
 
-.admonition {
-  background-color: var(--admonition-background-color--info);
-  border: 0.2rem solid var(--admonition-border-color--info);
-  border-radius: 0.3rem;
-
-  border-left-width: 0.5rem;
-
-  padding: 1em 1.5em;
-}
-
-.admonition-title {
-  font-weight: bold;
-  font-size: 1.2em;
-}
-
 .admonition-icon::before {
   content: '';
   background-color: var(--admonition-border-color--info);
@@ -150,23 +141,12 @@ code:not(pre > code) {
   width: 1.5em;
 }
 
-.admonition.note {
-  background-color: var(--admonition-background-color--note);
-  border-color: var(--admonition-border-color--note);
-}
-
 .admonition-icon.note::before {
   background-color: var(--admonition-border-color--note);
 
   mask-image: var(--admonition-icon--note);
   -webkit-mask-image: var(--admonition-icon--note);
 }
-
-.admonition.warning {
-  background-color: var(--admonition-background-color--warning);
-  border-color: var(--admonition-border-color--warning);
-}
-
 .admonition-icon.warning::before {
   background-color: var(--admonition-border-color--warning);
 
@@ -174,11 +154,6 @@ code:not(pre > code) {
   -webkit-mask-image: var(--admonition-icon--warning);
 }
 
-.admonition.tip {
-  background-color: var(--admonition-background-color--tip);
-  border-color: var(--admonition-border-color--tip);
-}
-
 .admonition-icon.tip::before {
   background-color: var(--admonition-border-color--tip);
 
@@ -186,11 +161,6 @@ code:not(pre > code) {
   -webkit-mask-image: var(--admonition-icon--tip);
 }
 
-.admonition.question {
-  background-color: var(--admonition-background-color--question);
-  border-color: var(--admonition-border-color--question);
-}
-
 .admonition-icon.question::before {
   background-color: var(--admonition-border-color--question);
 
@@ -198,10 +168,6 @@ code:not(pre > code) {
   -webkit-mask-image: var(--admonition-icon--question);
 }
 
-.admonition-content > *:last-child {
-  margin-bottom: 0;
-}
-
 #search-results {
   overflow: hidden;
   word-wrap: anywhere;
@@ -231,40 +197,11 @@ code:not(pre > code) {
 }
 
 #toc ol {
-  padding: 5px;
-  margin: 0;
+  padding-left: 1em;
 }
 
 #toc li {
   list-style-type: none;
-  margin-bottom: 0;
-}
-
-#toc a {
-  display: block;
-  height: auto;
-}
-
-#toc-side {
-  margin-top: 50px;
-}
-
-#toc-side span {
-  font-weight: 500;
-  font-size: 1.5rem;
-  margin-bottom: 1rem;
-}
-
-#toc-side ol:first-child {
-  border-left: 1px solid rgba(0, 0, 0, 0.15);
-}
-
-.dark-mode #toc-side ol:first-child {
-  border-left: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-#toc-side a {
-  padding-left: 10px;
 }
 
 a.show-on-focus {
@@ -284,3 +221,47 @@ a.show-on-focus:focus {
   left: 0;
   top: 0;
 }
+
+.docs-navbar {
+  background-color: hsla(var(--bs-body-bg-hsl), 0.75);
+  backdrop-filter: blur(8px);
+}
+
+.sidebar .offcanvas-header,
+.docs-navbar {
+  min-height: 55px;
+  border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);
+  background-color: var(--color-nav-bg);
+}
+
+.filter-docs {
+  background-color: var(--bs-sidebar-bg);
+}
+
+.docs-footer {
+  background-color: var(--bs-secondary-bg);
+  border-top: var(--bs-border-width) solid var(--bs-content-border-color);
+}
+
+.simple-link {
+  color: hsla(var(--bs-emphasis-color-hsl), 0.75);
+  text-decoration: none;
+}
+
+.simple-link:hover {
+  color: hsla(var(--bs-emphasis-color-hsl), 0.9);
+}
+
+.alert-heading {
+  margin-bottom: 0.5rem;
+}
+
+/* fix bottom margin in admonitions and cards */
+
+.alert p:not(ul p):nth-last-child(2),
+.alert p:not(ul p):last-child,
+.alert li:last-child p,
+.alert ul:last-child,
+.card-text p:last-child {
+  margin-bottom: 0;
+}

assets/js/index.js

@@ -0,0 +1,25 @@
+if (localStorage.getItem('theme') === 'light') {
+  document.documentElement.setAttribute('data-bs-theme', 'light');
+}
+
+function toggleDarkMode() {
+  const rootPreference = document.documentElement.getAttribute('data-bs-theme');
+  if (rootPreference === 'light') {
+    document.documentElement.setAttribute('data-bs-theme', 'dark');
+    localStorage.setItem('theme', 'dark');
+  } else {
+    document.documentElement.setAttribute('data-bs-theme', 'light');
+    localStorage.setItem('theme', 'light');
+  }
+}
+
+function toggleSidebar() {
+  const sidebarEl = document.querySelector('.sidebar');
+  if (sidebarEl.classList.contains('show')) {
+    sidebarEl.classList.remove('show');
+    sidebarEl.classList.add('hiding');
+  } else {
+    sidebarEl.classList.remove('hiding');
+    sidebarEl.classList.add('show');
+  }
+}

container-init.sh

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+# This script allows developers to easily build and preview the
+# Codeberg documentation locally when using containers.
+pnpm install
+pnpm run dev

content/_includes/contribution_invitation.njk

@@ -1,11 +1,14 @@
 <div class="card" data-pagefind-ignore="all">
+  <div class="card-body">
+    <h5 class="card-title">Contributing</h5>
+    <div class="card-text">
       <p>Hey there! 👋 Thank you for reading this article!</p>
       <p>
         Is there something missing, or do you have an idea on how to improve the documentation?
         Do you want to write your own article?
       </p>
       <p>
-            You're invited to contribute to the Codeberg Documentation at <a href="https://codeberg.org/Codeberg/Documentation">its source code repository</a>,
+        You're invited to contribute to the Codeberg Documentation at <a href="https://codeberg.org/Codeberg/Documentation">its source code repository</a>
         for example, by <a href="/collaborating/pull-requests-and-git-flow">adding a pull request</a>
         or joining in on the discussion in <a href="https://codeberg.org/Codeberg/Documentation/issues">the issue tracker</a>.
       </p>
@@ -14,3 +17,5 @@
         at <a href="https://docs.codeberg.org/improving-codeberg/docs-contributor-faq">the Contributor FAQ</a>.
       </p>
     </div>
+  </div>
+</div>

content/_includes/default_layout.njk

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="codeberg-design">
+<html lang="en" data-bs-theme="dark" data-bs-core="modern">
   <head>
     <title>{% if eleventyNavigation.title %}{{ eleventyNavigation.title }} | {% endif %}Codeberg Documentation</title>
 
@@ -17,14 +17,11 @@
     <link rel="icon" href="https://design.codeberg.org/logo-kit/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="https://design.codeberg.org/logo-kit/apple-touch-icon.png" />
 
-    <link rel="preload" type="text/css" href="/assets/css/codeberg-docs.css" as="style" />
-    <link rel="preload" type="text/css" href="https://design.codeberg.org/design-kit/codeberg.css" as="style" />
     <link rel="preload" href="https://fonts.codeberg.org/dist/inter/Inter%20Web/inter.css" as="style" />
     <link rel="preload" href="https://fonts.codeberg.org/dist/fontawesome6/css/svg-with-js.css" as="style" />
 
-    <!-- Details and License: https://codeberg.org/Codeberg/Design/src/design-kit -->
-    <link rel="stylesheet" href="https://design.codeberg.org/design-kit/codeberg.css" />
-    <script defer src="https://design.codeberg.org/design-kit/codeberg.js"></script>
+    <link rel="stylesheet" type="text/css" href="/assets/css/halfmoon/halfmoon.min.css">
+    <link rel="stylesheet" type="text/css" href="/assets/css/halfmoon/cores/halfmoon.modern.css">
 
     <link rel="stylesheet" type="text/css" href="/assets/css/codeberg-docs.css" />
     <!-- Syntax highlighting -->
@@ -73,64 +70,114 @@
       // @license-end
     </script>
     {% endif %}
+    <script src="/assets/js/index.js"></script>
   </head>
 
-  <body data-set-preferred-mode-onload="true">
-    {% include 'license.njk' %}
-    <div class="with-navbar with-sidebar with-transitions page-wrapper" data-sidebar-type="overlayed-sm-and-down">
-      <div class="sidebar-overlay" onclick="halfmoon.toggleSidebar()"></div>
-      <nav class="navbar">
-        <div class="navbar-content">
-          <button class="btn btn-primary" type="button" onclick="halfmoon.toggleSidebar()">
-            {% fas_icon "bars" %}
-            <span class="sr-only">Toggle sidebar</span>
-          </button>
-        </div>
-        <!-- Navbar brand -->
-        <a href="/" class="navbar-brand" title="Codeberg Docs">
-          <img src="https://design.codeberg.org/logo-kit/icon_inverted.svg" height="22" width="22" alt="Codeberg" />
+  <body class="position-relative ps-lg-sbwidth">
+    <nav class="sidebar offcanvas-start offcanvas-lg">
+      <div class="offcanvas-header position-relative justify-content-start flex-shrink-0 py-0">
+        <a class="sidebar-brand d-flex align-items-center me-auto" href="/">
+          <img
+            src="https://design.codeberg.org/logo-kit/icon_inverted.svg"
+            eleventy:ignore=""
+            class="d-block flex-shrink-0 me-1"
+            height="24"
+            width="24"
+            alt="Codeberg"
+          />
           Docs
         </a>
-        <!-- Navbar nav -->
-        <ul class="d-md-flex ml-auto d-none navbar-nav">
-          <li class="nav-item">
-            <a
-              href="{{ urls.commitHistoryMaster }}/{{ page.inputPath }}"
-              class="nav-link"
-              target="_blank"
-              rel="noreferrer"
+        <button
+          type="button"
+          class="btn btn-secondary btn-square d-none d-lg-inline-block"
+          aria-label="Toggle dark mode"
+          onclick="toggleDarkMode()"
         >
-              {% fas_icon "history" %} &nbsp; View History
-            </a>
-          </li>
-          <li class="nav-item">
-            <a
-              href="{{ urls.docsSourcesMaster }}/{{ page.inputPath }}"
-              class="nav-link"
-              target="_blank"
-              rel="noreferrer"
-            >
-              {% fas_icon "code" %} &nbsp; View Source
-            </a>
-          </li>
-          {#
-          <li class="nav-item">
-            <a href="javascript:;" onclick="document.body.classList.toggle('dark-mode')" class="nav-link">
-              {% fas_icon "moon" %} &nbsp; Toggle Dark Mode
-            </a>
-          </li>
-          #}
-        </ul>
-        <!-- Navbar content (dropdown menu) -->
-        <div class="ml-auto d-md-none navbar-content">
-          <div class="with-arrow dropdown">
-            <button class="btn" data-toggle="dropdown" type="button" id="navbar-dropdown-toggle-btn-1">
-              Menu {% fas_icon "angle-down" %}
+          {% fas_icon "moon" %}
         </button>
-            <div class="dropdown-menu-right w-200 dropdown-menu" aria-labelledby="navbar-dropdown-toggle-btn-1">
+        <button type="button" class="btn-close d-lg-none ms-1" aria-label="Close" onclick="toggleSidebar()"></button>
+      </div>
+      <div class="offcanvas-body position-relative p-0">
+        <div class="filter-docs sticky-top p-3">
+          <input
+            id="search-input"
+            type="text"
+            class="form-control search"
+            placeholder="Filter docs"
+            aria-label="Filter docs"
+          />
+          <div class="mt-1">
+            <small
+              >Press
+              <kbd class="text-body" style="font-size: 10px; background-color: hsla(var(--bs-emphasis-color-hsl), 0.1)"
+                >/</kbd
+              >
+              to focus</small
+            >
+          </div>
+        </div>
+        <div class="p-3 pt-0">
+          <div id="search-results"></div>
+          <ul class="sidebar-nav list">
+          {% for entry in collections.all | eleventyNavigation %} {% set active = entry.url == page.url or entry.key ==
+          eleventyNavigation.parent %} {% if (not entry.draft) or active %}
+          <li class="position-relative mt-4 mb-1">
+            <h5 class="sidebar-header {% if active %} active{% endif %}">
+              <a class="text-decoration-none link-white" href="{{ entry.url }}" id="{{ entry.key }}"
+                >{% fas_icon entry.icon | default("caret-right") %} {{ entry.title }}</a
+              >
+            </h5>
+          </li>
+          {% if entry.children.length > 0 %} {% for child in entry.children %} {% set child_active = child.url ==
+          page.url %} {% if child_active or not child.draft %}
+          <li class="nav-item">
+            <a
+              href="{{ child.url }}"
+              class="nav-link {% if child_active %} active{% endif %}"
+              id="sidebar-{{ child.key }}"
+            >
+              <span class="name">{{ child.title }}</span>
+            </a>
+          </li>
+          {% endif %} {% endfor %} {% endif %} {% endif %} {%- endfor %}
+        </ul>
+      </div>
+    </nav>
+
+    <nav class="navbar navbar-expand-md docs-navbar sticky-top">
+      <div class="container-md px-3 px-sm-4 px-xl-5 py-1 justify-content-start">
+        <div class="btn-group me-3 d-lg-none">
+          <button type="button" class="btn btn-secondary btn-square" aria-label="Toggle sidebar" onclick="toggleSidebar()">
+            {% fas_icon "bars" %}
+          </button>
+          <button type="button" class="btn btn-secondary btn-square" aria-label="Toggle dark mode" onclick="toggleDarkMode()">
+            {% fas_icon "moon" %}
+          </button>
+        </div>
+        <a class="navbar-brand d-flex align-items-center d-lg-none ms-auto ms-md-0" href="/">
+          <img
+            src="https://design.codeberg.org/logo-kit/icon_inverted.svg"
+            class="d-block flex-shrink-0 me-1"
+            eleventy:ignore=""
+            height="24"
+            width="24"
+            alt="Codeberg"
+          />
+          Docs
+        </a>
+        <div class="btn-group ms-auto d-md-none">
+          <a href="{{ urls.commitHistoryMaster }}/{{ page.inputPath }}" class="btn btn-secondary btn-square" target="_blank" rel="noreferrer">
+            {% fas_icon "history" %}
+          </a>
+          <a href="{{ urls.docsSourcesMaster }}/{{ page.inputPath }}" class="btn btn-secondary btn-square" target="_blank" rel="noreferrer">
+            {% fas_icon "code" %}
+          </a>
+        </div>
+        <div class="collapse navbar-collapse" id="docs-navbar-collapse">
+          <div class="d-flex align-items-center justify-content-center ms-auto gap-2">
             <a
               href="{{ urls.commitHistoryMaster }}/{{ page.inputPath }}"
-                class="dropdown-item"
+              class="btn btn-secondary flex-grow-1 d-flex align-items-center flex-nowrap text-start position-relative"
               target="_blank"
               rel="noreferrer"
             >
@@ -138,73 +185,45 @@
             </a>
             <a
               href="{{ urls.docsSourcesMaster }}/{{ page.inputPath }}"
-                class="dropdown-item"
+              class="btn btn-secondary flex-grow-1 d-flex align-items-center flex-nowrap text-start position-relative"
               target="_blank"
               rel="noreferrer"
             >
               {% fas_icon "code" %} &nbsp; View Source
             </a>
-              {#
-              <a href="javascript:;" onclick="document.body.classList.toggle('dark-mode')" class="dropdown-item">
-                {% fas_icon "moon" %} &nbsp; Toggle Dark Mode
-              </a>
-              #}
-              <div class="mt-5 dropdown-divider"></div>
           </div>
         </div>
       </div>
     </nav>
 
-      <div class="sidebar">
-        <div class="sidebar-menu">
-          <!-- Sidebar content with the search box -->
-          <div class="sidebar-content">
-            <input type="text" class="form-control" placeholder="Filter Docs" id="search-input" />
-            <div class="mt-10 font-size-12">Press <kbd>/</kbd> to focus</div>
-            <div id="search-results"></div>
-          </div>
-
-          {% for entry in collections.all | eleventyNavigation %} {% set active = entry.url == page.url or entry.key ==
-          eleventyNavigation.parent %} {% if (not entry.draft) or active %}
-          <h5 class="sidebar-title {% if active %} active{% endif %}">
-            <a href="{{ entry.url }}" id="{{ entry.key }}"
-              >{% fas_icon entry.icon | default("caret-right") %} {{ entry.title }}</a
-            >
-          </h5>
-          <div class="sidebar-divider"></div>
-          {% if entry.children.length > 0 %} {% for child in entry.children %} {% set child_active = child.url ==
-          page.url %} {% if child_active or not child.draft %}
-          <a href="{{ child.url }}" class="sidebar-link{% if child_active %} active{% endif %}" id="{{ child.key }}">
-            <span class="name">{{ child.title }}</span>
-          </a>
-          {% endif %} {% endfor %} {% endif %} {% endif %}
-          <br />
-          {%- endfor %}
-        </div>
-      </div>
-
-      <div class="content-wrapper">
-        <div class="container-fluid">
+    <div class="container-md px-3 px-sm-4 px-xl-5">
       <div class="row">
-            <div class="col-xl-8 content" data-pagefind-body>
+        <main class="col-xl-9 py-3 py-sm-4" data-pagefind-body>
           {% if eleventyNavigation.title %}
-              <h1 class="content-title font-size-24">{{ eleventyNavigation.title }}</h1>
+          <h1 id="top" class="lh-base mb-1 content-title font-size-24">{{ eleventyNavigation.title }}</h1>
           {% endif %} {% if eleventyNavigation.draft %}
           <strong data-pagefind-ignore="all"
             >Please note that this article is still a draft and might not have any contents yet.</strong
           >
-              {% endif %} {% include 'toc-collapse.njk' %}
+          {% endif %}
+
+          <div class="content">
+            {% include 'toc-collapse.njk' %}
             {{ content | safe }}
-              <hr class="mb-20" />
-              {% if page.url != '/' %} {% include 'contribution_invitation.njk' %} {% endif %}
-              <div class="text-right font-size-16" data-pagefind-ignore="all">
-                <p>&copy; Codeberg Docs Contributors. See <a href="#modal-1" role="button">LICENSE</a></p>
-              </div>
           </div>
+          {% include 'contribution_invitation.njk' %}
+        </main>
         {% include 'toc-side.njk' %}
       </div>
     </div>
+
+    <footer class="docs-footer" data-pagefind-ignore="all">
+      <div class="container-md px-3 px-sm-4 px-xl-5 py-3">
+        <p>
+          &copy; Codeberg Docs Contributors. See
+          <a href="https://codeberg.org/Codeberg/Documentation/src/branch/main/LICENSE.md">LICENSE</a>
+        </p>
       </div>
-    </div>
+    </footer>
   </body>
 </html>

content/_includes/license.njk

@@ -1,36 +0,0 @@
-<div class="modal" id="modal-1" tabindex="-1" role="dialog">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <h5 class="modal-title">LICENSE</h5>
-      <p>
-        The
-        <span
-          xmlns:dct="http://purl.org/dc/terms/"
-          href="http://purl.org/dc/dcmitype/Text"
-          property="dct:title"
-          rel="dct:type"
-        >
-          Codeberg Documentation website</span
-        >
-        is licensed under a
-        <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"
-          >Creative Commons Attribution-ShareAlike 4.0 International License</a
-        >.
-      </p>
-      <p>
-        It bundles third-party font software licensed under a different license. Please look at
-        <a href="{{ urls.docsSourcesMaster }}/LICENSE.md">the LICENSE file</a> for details.
-      </p>
-      <p>
-        Changes to the original versions of the article as well as its individual authors can be looked up in
-        <a href="{{ urls.commitHistoryMaster }}/{{ page.inputPath }}" target="_blank" rel="noreferrer"
-          >this article's commit history</a
-        >
-      </p>
-      <p>Codeberg and the Codeberg Logo are trademarks of Codeberg e.V.</p>
-      <div class="text-right mt-20">
-        <a href="#" class="mr-5 btn" role="button">Close</a>
-      </div>
-    </div>
-  </div>
-</div>

content/_includes/toc-collapse.njk

@@ -1,10 +1,11 @@
 {% if content | toc %}
 <nav class="mb-3 d-xl-none" data-pagefind-ignore="all">
   <details class="collapse-panel">
-    <summary class="d-block d-flex justify-content-between align-items-center py-2 w-full collapse-header">
+    <summary class="btn btn-secondary d-block w-100 py-2 d-flex align-items-center justify-content-between">
       <span class="antialiased">On this page</span>
+      {% fas_icon "angle-down" %}
     </summary>
-    <div id="toc" class="collapse-content">
+    <div id="toc" class="border rounded mt-2">
       {{ content | toc | safe }}
     </div>
   </details>

content/_includes/toc-side.njk

@@ -1,8 +1,8 @@
 {% if content | toc %}
 <nav class="col-xl-3 position-relative d-none d-xl-block" id="toc-side" data-pagefind-ignore="all">
-  <div class="position-fixed  mr-20">
-    <span>On this page</span>
-    <div id="toc" class="overflow-y-auto" style="max-height: 43.75rem;">
+  <div class="position-sticky start-0 py-3 py-sm-4 ps-4" style="top: 63px;">
+    <span class="h4 lh-base">On this page</span>
+    <div id="toc" class="overflow-y-auto pe-2" style="max-height: 43.75rem;">
       {{ content | toc | safe }}
     </div>
   </div>