diff --git a/themes/powershell-community/layouts/_default/baseof.html b/themes/powershell-community/layouts/_default/baseof.html
index 1a2bb90aa..9e5211d20 100644
--- a/themes/powershell-community/layouts/_default/baseof.html
+++ b/themes/powershell-community/layouts/_default/baseof.html
@@ -111,7 +111,8 @@
{{- $asyncCSS := slice
"https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css"
"/css/alerts.css"
- "/css/code-copy.css" -}}
+ "/css/code-copy.css"
+ "/css/heading-anchors.css" -}}
{{- with .Site.Params.algolia }}{{ $asyncCSS = $asyncCSS | append "https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" }}{{ end -}}
{{ range $asyncCSS }}
diff --git a/themes/powershell-community/layouts/_default/single.html b/themes/powershell-community/layouts/_default/single.html
index 0a0b22c5b..70075db00 100644
--- a/themes/powershell-community/layouts/_default/single.html
+++ b/themes/powershell-community/layouts/_default/single.html
@@ -207,13 +207,16 @@
});
}
- // Smooth scrolling for anchor links within the article
+ // Smooth scrolling for anchor links within the article. Also update the
+ // URL hash so a linked section is shareable/copyable from the address bar.
document.querySelectorAll('.prose a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
- e.preventDefault();
- const target = document.querySelector(this.getAttribute('href'));
+ const hash = this.getAttribute('href');
+ const target = document.querySelector(hash);
if (target) {
+ e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ history.pushState(null, '', hash);
}
});
});
diff --git a/themes/powershell-community/layouts/_markup/render-heading.html b/themes/powershell-community/layouts/_markup/render-heading.html
new file mode 100644
index 000000000..852cf2df4
--- /dev/null
+++ b/themes/powershell-community/layouts/_markup/render-heading.html
@@ -0,0 +1,14 @@
+{{- /* Heading render hook: makes article headings directly linkable.
+ Renders the heading with its auto-generated id (from .Anchor, i.e.
+ Goldmark's autoHeadingID) plus a hover-revealed anchor link, so any
+ section can be linked to and shared. Because the id still comes from
+ .Anchor, pre-existing `#section` links keep resolving unchanged.
+ The `{.class}` attribute authors add (e.g. .wp-block-heading) is
+ preserved. Styling lives in static/css/heading-anchors.css. */ -}}
+{{- $id := .Anchor -}}
+{{- $class := "ps-heading" -}}
+{{- with .Attributes.class }}{{ $class = printf "%s %s" $class . }}{{ end -}}
+
+ {{- .Text | safeHTML -}}
+
+
diff --git a/themes/powershell-community/static/css/heading-anchors.css b/themes/powershell-community/static/css/heading-anchors.css
new file mode 100644
index 000000000..dfb7fa5e7
--- /dev/null
+++ b/themes/powershell-community/static/css/heading-anchors.css
@@ -0,0 +1,35 @@
+/* Linkable article headings — a hover-revealed anchor link next to each
+ heading. Rendered by layouts/_markup/render-heading.html. */
+
+.ps-heading {
+ position: relative;
+ /* Clear the sticky site header (bg-white shadow-lg sticky top-0) when
+ jumping to an anchor so the heading isn't hidden underneath it. */
+ scroll-margin-top: 5.5rem;
+}
+
+.ps-heading-anchor {
+ opacity: 0;
+ margin-left: 0.4em;
+ font-size: 0.7em;
+ color: #9ca3af;
+ text-decoration: none;
+ vertical-align: middle;
+ transition: opacity 0.15s ease, color 0.15s ease;
+}
+
+.ps-heading:hover .ps-heading-anchor,
+.ps-heading-anchor:focus-visible {
+ opacity: 1;
+}
+
+.ps-heading-anchor:hover {
+ color: #2563eb;
+}
+
+/* Touch devices can't hover — keep the anchor discoverable but subtle. */
+@media (hover: none) {
+ .ps-heading-anchor {
+ opacity: 0.5;
+ }
+}