From e7b56b7b2a3faa135fad2815ba0d06ad72277b15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Weckm=C3=BCller?=
<47481567+do-me@users.noreply.github.com>
Date: Mon, 14 Oct 2024 20:58:23 +0200
Subject: [PATCH] docs: add permanent link chain icon to headings without
impacting SEO (#1746)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
I noted that there are no permanent links in the docs. Adapted the
current best solution from
https://github.com/squidfunk/mkdocs-material/discussions/3535. It adds a
GitHub-like chain icon to the left of each heading (right on mobile) and
does not impact SEO unlike the default solution with pilcrow char `ΒΆ`
that might show up on google search results.
---
docs/mkdocs.yml | 3 +++
docs/src/styles/extra.css | 44 ++++++++++++++++++++++++++++++++++++++-
2 files changed, 46 insertions(+), 1 deletion(-)
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
index 5abf132e..ddfa66b0 100644
--- a/docs/mkdocs.yml
+++ b/docs/mkdocs.yml
@@ -90,6 +90,9 @@ markdown_extensions:
- pymdownx.emoji:
emoji_index: !!python/name:material.extensions.emoji.twemoji
emoji_generator: !!python/name:material.extensions.emoji.to_svg
+ - markdown.extensions.toc:
+ baselevel: 1
+ permalink: ""
nav:
- Home:
diff --git a/docs/src/styles/extra.css b/docs/src/styles/extra.css
index 1075e4d6..913c2e35 100644
--- a/docs/src/styles/extra.css
+++ b/docs/src/styles/extra.css
@@ -39,4 +39,46 @@
height: 1.2rem;
margin-top: -.1rem;
}
- }
\ No newline at end of file
+ }
+
+/* remove pilcrow as permanent link and add chain icon similar to github https://github.com/squidfunk/mkdocs-material/discussions/3535 */
+
+.headerlink {
+ --permalink-size: 16px; /* for font-relative sizes, 0.6em is a good choice */
+ --permalink-spacing: 4px;
+
+ width: calc(var(--permalink-size) + var(--permalink-spacing));
+ height: var(--permalink-size);
+ vertical-align: middle;
+ background-color: var(--md-default-fg-color--lighter);
+ background-size: var(--permalink-size);
+ mask-size: var(--permalink-size);
+ -webkit-mask-size: var(--permalink-size);
+ mask-repeat: no-repeat;
+ -webkit-mask-repeat: no-repeat;
+ visibility: visible;
+ mask-image: url('data:image/svg+xml;utf8,');
+ -webkit-mask-image: url('data:image/svg+xml;utf8,');
+}
+
+[id]:target .headerlink {
+ background-color: var(--md-typeset-a-color);
+}
+
+.headerlink:hover {
+ background-color: var(--md-accent-fg-color) !important;
+}
+
+@media screen and (min-width: 76.25em) {
+ h1, h2, h3, h4, h5, h6 {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ column-gap: 0.2em; /* fixes spaces in titles */
+ }
+
+ .headerlink {
+ order: -1;
+ margin-left: calc(var(--permalink-size) * -1 - var(--permalink-spacing)) !important;
+ }
+}