Start work on dark-mode, fix heading scroll position

src/components/Shared/NavMenu.vue

@@ -28,3 +28,13 @@
 		</BCollapse>
 	</BNavbar>
 </template>
+
+<style scoped>
+nav {
+	box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .28);
+}
+
+[data-bs-theme=dark] nav {
+	box-shadow: 0 .25rem .5rem rgba(255, 0, 0, .28);
+}
+</style>

src/components/ToggleColorMode.vue

@@ -0,0 +1,23 @@
+<template>
+	<div class="position-fixed corner">
+		<template v-if="store.colorMode === 'dark'">
+			<IFaSolidSun @click="store.toggleColorMode" />
+		</template>
+		<template v-else>
+			<IFaMoonO @click="store.toggleColorMode" />
+		</template>
+	</div>
+</template>
+
+<style scoped>
+.corner {
+	right: 10px;
+	bottom: 10px;
+}
+</style>
+
+<script setup lang="ts">
+import { useStateStore } from "@/stores/stateStore";
+
+const store = useStateStore();
+</script>

src/components/content/ProseH1.vue

@@ -0,0 +1,18 @@
+<template>
+	<h1>
+		<span :id="props.id"></span>
+		<a v-if="props.id && generate" :href="`#${props.id}`">
+			<slot />
+		</a>
+		<slot v-else />
+	</h1>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from "#imports"
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === "boolean" && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === "object" && headings?.anchorLinks?.h1)))
+</script>

src/components/content/ProseH2.vue

@@ -0,0 +1,18 @@
+<template>
+	<h2>
+		<span :id="props.id"></span>
+		<a v-if="props.id && generate" :href="`#${props.id}`">
+			<slot />
+		</a>
+		<slot v-else />
+	</h2>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from "#imports"
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === "boolean" && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === "object" && headings?.anchorLinks?.h2)))
+</script>

src/components/content/ProseH3.vue

@@ -0,0 +1,18 @@
+<template>
+	<h3>
+		<span :id="props.id"></span>
+		<a v-if="props.id && generate" :href="`#${props.id}`">
+			<slot />
+		</a>
+		<slot v-else />
+	</h3>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from "#imports"
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === "boolean" && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === "object" && headings?.anchorLinks?.h3)))
+</script>

src/components/content/ProseH4.vue

@@ -0,0 +1,18 @@
+<template>
+	<h4>
+		<span :id="props.id"></span>
+		<a v-if="props.id && generate" :href="`#${props.id}`">
+			<slot />
+		</a>
+		<slot v-else />
+	</h4>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from "#imports"
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === "boolean" && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === "object" && headings?.anchorLinks?.h4)))
+</script>

src/components/content/ProseH5.vue

@@ -0,0 +1,18 @@
+<template>
+	<h5>
+		<span :id="props.id"></span>
+		<a v-if="props.id && generate" :href="`#${props.id}`">
+			<slot />
+		</a>
+		<slot v-else />
+	</h5>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from "#imports"
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === "boolean" && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === "object" && headings?.anchorLinks?.h5)))
+</script>

src/components/content/ProseH6.vue

@@ -0,0 +1,18 @@
+<template>
+	<h6>
+		<span :id="props.id"></span>
+		<a v-if="props.id && generate" :href="`#${props.id}`">
+			<slot />
+		</a>
+		<slot v-else />
+	</h6>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from "#imports"
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === "boolean" && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === "object" && headings?.anchorLinks?.h6)))
+</script>