fix: anchors

src/components/ReleaseEntry/index.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react'
 
+import useBrokenLinks from '@docusaurus/useBrokenLinks'
+
 import styles from './styles.module.css'
 
 type Patch = {
@@ -16,10 +18,16 @@ type Props = {
 }
 
 export default function ReleaseEntry({ version, date, children, patches, dev }: Props) {
+    const anchor = `v${version.replace(/\./g, '-')}`
+
+    useBrokenLinks().collectAnchor(anchor)
+
     return (
-        <div className={styles.entry}>
+        <div className={styles.entry} id={anchor}>
             <div className={styles.header}>
-                <code className={styles.badge}>{version}</code>
+                <a className={styles.badgeLink} href={`#${anchor}`}>
+                    <code className={styles.badge}>{version}</code>
+                </a>
                 {dev && <span className={`${styles.tag} ${styles.tagTooltip}`}>development</span>}
                 {date && <span className={styles.date}>{date}</span>}
             </div>

src/components/ReleaseEntry/styles.module.css

@@ -1,5 +1,6 @@
 .entry {
     margin-bottom: 2rem;
+    scroll-margin-top: 80px;
 }
 
 .header {
@@ -10,6 +11,15 @@
     margin-bottom: 1rem;
 }
 
+.badgeLink {
+    text-decoration: none !important;
+}
+
+.badgeLink:hover .badge {
+    border-color: rgba(34, 211, 238, 0.6);
+    background: rgba(34, 211, 238, 0.15);
+}
+
 .badge {
     font-family: 'Fira Mono', monospace;
     font-size: 1.1rem;