make headings links, use more tw classes

astro.config.mjs

@@ -1,13 +1,30 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import tailwind from '@astrojs/tailwind';
+import { rehypeHeadingIds } from '@astrojs/markdown-remark';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import starlightLinksValidator from 'starlight-links-validator';
 import { links, } from './src/config';
 
 // https://astro.build/config
 export default defineConfig({
 	site: 'https://starboardbot.github.io',
 	base: '/docs',
+	markdown: {
+		rehypePlugins: [
+			rehypeHeadingIds,
+			[
+				rehypeAutolinkHeadings,
+				{
+					behavior: 'wrap',
+					properties: {
+						tabIndex: -1,
+						class: 'heading-link',
+					},
+				},
+			],
+		],
+	},
 	integrations: [
 		starlight({
 			title: 'Starboard',
@@ -19,7 +36,7 @@ export default defineConfig({
 			},
 			sidebar: [
 				{
-					label: "About",
+					label: 'About',
 					autogenerate: {
 						directory: '/about/',
 					},
@@ -31,7 +48,7 @@ export default defineConfig({
 					},
 				},
 				{
-					label: "Settings",
+					label: 'Settings',
 					autogenerate: {
 						directory: '/settings/',
 					},

package.json

@@ -11,11 +11,13 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.7.0",
+    "@astrojs/markdown-remark": "^5.1.0",
     "@astrojs/starlight": "^0.24.2",
     "@astrojs/starlight-tailwind": "^2.0.3",
     "@astrojs/tailwind": "^5.1.0",
     "@fontsource-variable/lexend": "^5.0.20",
     "astro": "^4.10.2",
+    "rehype-autolink-headings": "^7.1.0",
     "sharp": "^0.32.5",
     "starlight-links-validator": "^0.9.0",
     "tailwindcss": "^3.4.4",

src/tailwind.css

@@ -10,7 +10,7 @@ https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
 /* Fonts */
 :root {
 	--sl-font: Lexend Variable;
-	font-weight: 300;
+	@apply font-light;
 }
 
 :root {
@@ -23,8 +23,7 @@ nav:has(#starlight__on-this-page) ul li {
 }
 
 h1 {
-	font-weight: 700;
-	@apply text-center xl:text-start
+	@apply text-center xl:text-start font-bold
 }
 
 
@@ -33,7 +32,7 @@ h1 {
 }
 
 .content-panel {
-	border: none !important;
+	@apply !border-none
 }
 
 .starlight-aside {
@@ -77,26 +76,34 @@ h1 {
 
 /* Twemoji */
 img.emoji {
-	height: 1.2em;
-	width: 1.2em;
 	margin: 0 .05em 0 .1em !important;
 	vertical-align: -0.1em;
 
-	@apply inline-flex;
+	@apply inline-flex h-[1.2em] w-[1.2em];
  }
 
 #command img.emoji {
-	@apply align-super;
-	height: 1.5em;
-	width: 1.5em;
+	@apply align-super h-5 w-5;
 }
 
 #option img.emoji {
-	margin-top: auto !important;
-	margin-bottom: auto !important;
+	@apply !my-auto;
 }
 
 /* markdown */
 code {
 	@apply rounded-sm
-}
+}
+
+/* heading link styling */
+.heading-link::after {
+	@apply opacity-0 ps-2 transition-all duration-300 content-['#'] text-[color:var(--sl-color-text-accent)];
+}
+
+.heading-link:hover::after {
+	@apply opacity-100;
+}
+
+.heading-link {
+	@apply no-underline !text-[color:var(--sl-color-white)];
+}