Add anchor tags for headers

.eleventy.js

@@ -1,11 +1,21 @@
-module.exports = function(eleventyConfig) {
+const markdownItAnchor = require("markdown-it-anchor");
+
+module.exports = (eleventyConfig) => {
   // Copy files as-is
   eleventyConfig.addPassthroughCopy("img");
   eleventyConfig.addPassthroughCopy("css");
   eleventyConfig.addPassthroughCopy(".htaccess");
   eleventyConfig.addPassthroughCopy("favicon.ico");
   eleventyConfig.addPassthroughCopy("favicon.svg");
 
-  // Ignore files
+  // Ignored files
   eleventyConfig.ignores.add("README.md");
+
+  eleventyConfig.amendLibrary("md", (mdLib) => {
+      // https://github.com/valeriangalliat/markdown-it-anchor#usage
+      const options = {
+        permalink: markdownItAnchor.permalink.headerLink()
+      };
+      mdLib.use(markdownItAnchor, options);
+  });
 };

_site/css/style.css

@@ -72,6 +72,11 @@ h2 {
   margin: 0;
 }
 
+h2 a.header-anchor {
+  color: inherit;
+  text-decoration: none;
+}
+
 h3 {
   /* background-color: #ADD15A; */
   border-bottom: 1px solid #d9dee1;
@@ -84,6 +89,11 @@ h3 {
   margin: 15px 0 10px;
 }
 
+h3 a.header-anchor {
+  color: inherit;
+  text-decoration: none;
+}
+
 img {
   border: 0;
   display: block;

_site/download.html

@@ -51,7 +51,9 @@
               <div class="stretcher" id="StretchHome">
 <h2>Downloads</h2>
 
-<h3>Public Key for PGP Signing</h3>
+<h3 id="pgp">
+  <a class="header-anchor" href="#pgp">Public Key for PGP Signing</a>
+</h3>
 <p>
   Starting from v3.3.4 all source tarballs and binaries are signed.
 </p>
@@ -67,7 +69,9 @@ <h3>Public Key for PGP Signing</h3>
 <br>
 
 
-<h3>Windows 10 / 11</h3>
+<h3 id="windows">
+  <a class="header-anchor" href="#windows">Windows 10 / 11</a>
+</h3>
 <div class="flexbox">
   <div class="box1">
     <img src="img/os/winlogo.webp" alt="Windows icon">
@@ -146,7 +150,9 @@ <h3>Windows 10 / 11</h3>
 <br>
 
 
-<h3>macOS Catalina / Big Sur / Monterey</h3>
+<h3 id="macos">
+  <a class="header-anchor" href="#macos">macOS Catalina / Big Sur / Monterey</a>
+</h3>
 <div class="flexbox">
   <div class="box1">
     <img src="img/os/macoslogo.webp" alt="macOS icon">
@@ -229,7 +235,10 @@ <h3>macOS Catalina / Big Sur / Monterey</h3>
 </div>
 <br>
 
-<h3>Linux</h3>
+
+<h3 id="linux">
+  <a class="header-anchor" href="#linux">Linux</a>
+</h3>
 <div class="flexbox">
   <div class="box1">
     <img src="img/os/tux.svg" alt="linux icon" width="100">
@@ -313,7 +322,9 @@ <h3>Linux</h3>
 <br>
 
 
-<h3>Source Tarball</h3>
+<h3 id="source-tarball">
+  <a class="header-anchor" href="#source-tarball">Source Tarball</a>
+</h3>
 <div class="flexbox">
   <div class="box1">
     <img src="img/tar-logo.svg" alt="tarball icon" width="100">
@@ -379,7 +390,10 @@ <h3>Source Tarball</h3>
 </div>
 <br>
 
-<h3>Other Binary Packages</h3>
+
+<h3 id="other-binary-packages">
+  <a class="header-anchor" href="#other-binary-packages">Other Binary Packages</a>
+</h3>
 <p>
   Select operating system:
   <select id="OSSelect" onchange="showOption(this)">
@@ -570,7 +584,10 @@ <h5>Quick instructions</h5>
 <hr class="invisible clear">
 <br>
 
-<h3>Old Release Archive</h3>
+
+<h3 id="old-release-archive">
+  <a class="header-anchor" href="#old-release-archive">Old Release Archive</a>
+</h3>
 <ul>
   <li><a href="https://www.fosshub.com/qBittorrent-old.html">FossHub</a></li>
   <li><a href="https://sourceforge.net/projects/qbittorrent/files/">SourceForge</a></li>

_site/index.html

@@ -50,17 +50,17 @@
             <div id="content">
               <div class="stretcher" id="StretchHome">
 <!-- ## qBittorrent: An Advanced BitTorrent Client -->
-<h3>About qBittorrent</h3>
+<h3 id="about-qbittorrent" tabindex="-1"><a class="header-anchor" href="#about-qbittorrent">About qBittorrent</a></h3>
 <p><a href="download"><img src="img/QBt-download-150.webp" alt="download link" style="float: left; margin-right: 10px; height: 115px;"></a>
 The qBittorrent project aims to provide an open-source software alternative to µTorrent.</p>
 <p>Additionally, qBittorrent runs and provides the same features on all major platforms (FreeBSD, Linux, macOS, OS/2, Windows).</p>
 <p>qBittorrent is based on the <a href="https://www.qt.io/" target="_blank">Qt</a> toolkit and <a href="https://www.libtorrent.org/" target="_blank">libtorrent-rasterbar</a> library.</p>
-<h3>Help qBittorrent</h3>
+<h3 id="help-qbittorrent" tabindex="-1"><a class="header-anchor" href="#help-qbittorrent">Help qBittorrent</a></h3>
 <p>qBittorrent is developed by <a href="team">volunteers</a> in their spare time.</p>
 <p>If you like this piece of software, please make a donation and help it survive.</p>
 <p>Donation info <a href="donate">here</a>.</p>
 <p>If you want to help in translating qBittorrent, see these <a href="https://wiki.qbittorrent.org/How-to-translate-qBittorrent" target="_blank">instructions</a>.</p>
-<h3>qBittorrent Features</h3>
+<h3 id="qbittorrent-features" tabindex="-1"><a class="header-anchor" href="#qbittorrent-features">qBittorrent Features</a></h3>
 <ul>
 <li>Polished µTorrent-like User Interface</li>
 <li>No Ads</li>