From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <pve-devel-bounces@lists.proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
by lore.proxmox.com (Postfix) with ESMTPS id 3512C1FF390
for <inbox@lore.proxmox.com>; Fri, 10 May 2024 15:18:18 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id A9F1A1E14B;
Fri, 10 May 2024 15:18:22 +0200 (CEST)
From: Christoph Heiss <c.heiss@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Fri, 10 May 2024 15:16:18 +0200
Message-ID: <20240510131616.1428053-4-c.heiss@proxmox.com>
X-Mailer: git-send-email 2.44.0
MIME-Version: 1.0
X-SPAM-LEVEL: Spam detection results: 0
AWL 0.005 Adjusted score from AWL reputation of From: address
BAYES_00 -1.9 Bayes spam probability is 0 to 1%
DMARC_MISSING 0.1 Missing DMARC policy
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
Subject: [pve-devel] [PATCH docs] asciidoc: add clickable anchor link to all
headings
X-BeenThere: pve-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
Reply-To: Proxmox VE development discussion <pve-devel@lists.proxmox.com>
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit
Errors-To: pve-devel-bounces@lists.proxmox.com
Sender: "pve-devel" <pve-devel-bounces@lists.proxmox.com>
Works the same as in our PBS documentation and is generally common for
documentations.
Very useful for linking specific sections of the documentation in other
places. Previously, this always had to be done by getting the correct
anchor from the HTML directly via e.g. browser devtools.
Signed-off-by: Christoph Heiss <c.heiss@proxmox.com>
---
This patch should also pretty much also apply to pmg-docs, although I
did not explicitly test that yet.
asciidoc/pve-docs.css | 34 ++++++++++++++++++++++++++++++++++
asciidoc/pve-html.conf | 22 +++++++++++++++++-----
2 files changed, 51 insertions(+), 5 deletions(-)
diff --git a/asciidoc/pve-docs.css b/asciidoc/pve-docs.css
index 19c176e..9ddf57c 100644
--- a/asciidoc/pve-docs.css
+++ b/asciidoc/pve-docs.css
@@ -1,6 +1,7 @@
:root {
/* pre-defined colors */
--pdt-grey-950: hsl(0deg, 0%, 95%);
+ --pdt-grey-750: hsl(0deg, 0%, 75%);
--pdt-grey-400: hsl(0deg, 0%, 40%);
--pdt-grey-250: hsl(0deg, 0%, 25%);
--pdt-grey-150: hsl(0deg, 0%, 15%);
@@ -41,6 +42,39 @@ h6 {
font-size: 1.0em;
}
+/* Support for heading anchor links */
+h3 {
+ border-bottom: unset;
+}
+
+h3 > span {
+ display: inline-block;
+ border-bottom: 2px solid silver;
+}
+
+a.headerlink {
+ color: var(--pdt-grey-750);
+ padding: 0 4px;
+ text-decoration: none;
+ visibility: hidden;
+}
+
+/* add it as an pseudo-element, so that it does not show up in the ToC */
+a.headerlink::after {
+ content: '\00b6';
+ text-decoration: none;
+}
+
+h1:hover > a.headerlink,
+h2:hover > a.headerlink,
+h3:hover > a.headerlink,
+h4:hover > a.headerlink,
+h5:hover > a.headerlink,
+h6:hover > a.headerlink {
+ visibility: visible;
+}
+
+/* Dark mode theme */
@media screen and (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
diff --git a/asciidoc/pve-html.conf b/asciidoc/pve-html.conf
index 6e895e6..396a5e7 100644
--- a/asciidoc/pve-html.conf
+++ b/asciidoc/pve-html.conf
@@ -505,7 +505,10 @@ bodydata=<td class="tableblock halign-{colalign=left}">|</td>
[sect1]
<div class="sect1{style? {style}}{role? {role}}">
-<h2{id? id="{id}"}>{numbered?{sectnum} }{title}</h2>
+<h2{id? id="{id}"}>
+{numbered?{sectnum} }{title}
+{id? <a class="headerlink" href="#{id}" title="Permalink to this heading"></a>}
+</h2>
<div class="sectionbody">
|
</div>
@@ -513,25 +516,34 @@ bodydata=<td class="tableblock halign-{colalign=left}">|</td>
[sect2]
<div class="sect2{style? {style}}{role? {role}}">
-<h3{id? id="{id}"}>{numbered?{sectnum} }{title}</h3>
+<h3{id? id="{id}"}>
+<span>{numbered?{sectnum} }{title}</span>
+{id? <a class="headerlink" href="#{id}" title="Permalink to this heading"></a>}
+</h3>
|
</div>
[sect3]
<div class="sect3{style? {style}}{role? {role}}">
-<h4{id? id="{id}"}>{numbered?{sectnum} }{title}</h4>
+<h4{id? id="{id}"}>{numbered?{sectnum} }{title}
+{id? <a class="headerlink" href="#{id}" title="Permalink to this heading"></a>}
+</h4>
|
</div>
[sect4]
<div class="sect4{style? {style}}{role? {role}}">
-<h5{id? id="{id}"}>{title}</h5>
+<h5{id? id="{id}"}>{title}
+{id? <a class="headerlink" href="#{id}" title="Permalink to this heading"></a>}
+</h5>
|
</div>
[sect5]
<div class="sect5{style? {style}}{role? {role}}">
-<h6{id? id="{id}"}>{title}</h6>
+<h6{id? id="{id}"}>{title}
+{id? <a class="headerlink" href="#{id}" title="Permalink to this heading"></a>}
+</h6>
|
</div>
--
2.44.0
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel