Add Table of Contents (TOC) to article pages

src/components/articles/TableOfContents.vue

@@ -0,0 +1,40 @@
+<template>
+	<aside v-if="toc" class="position-fixed toc shadow">
+		<h5 class="text-center">{{ toc.title }}</h5>
+		<ul class="font-smaller mb-0">
+			<li>
+				<a href="#">Overview</a>
+			</li>
+		</ul>
+		<ArticlesTableOfContentsLink :links="toc.links" :first="true" class="font-smaller mb-0" />
+	</aside>
+</template>
+
+<style scoped>
+.toc {
+	display: none;
+}
+
+@media (min-width: 1450px) {
+	.toc {
+		display: block;
+		width: calc((100vw - 960px) / 2 - 35px);
+		max-width: 300px;
+		top: 56px;
+		left: calc(100vw - (100vw - 960px) / 2 + 12px);
+		padding: 20px 5px 20px 0;
+		border-radius: 6px;
+		background-color: #fff;
+	}
+}
+
+.font-smaller {
+	font-size: .8125rem;
+}
+</style>
+
+<script setup lang="ts">
+import type { Toc } from "@nuxtjs/mdc";
+
+defineProps<{ toc?: Toc }>();
+</script>

src/components/articles/TableOfContentsLink.vue

@@ -0,0 +1,18 @@
+<template>
+	<ul>
+		<template v-for="link in links" :key="link.id">
+			<li>
+				<a :href="'#' + link.id">{{ link.text }}</a>
+			</li>
+			<template v-if="link.children && link.children?.length > 0">
+				<ArticlesTableOfContentsLink :links="link.children" :first="false" />
+			</template>
+		</template>
+	</ul>
+</template>
+
+<script setup lang="ts">
+import type { TocLink } from "@nuxtjs/mdc";
+
+defineProps<{ links: TocLink[] }>();
+</script>

src/components/shared/Footer.vue

@@ -6,6 +6,13 @@
 	</footer>
 </template>
 
+<style scoped>
+footer {
+	text-align: center;
+	color: #909090;
+}
+</style>
+
 <script setup lang="ts">
-const year = new Date().getFullYear();
+const year: number = new Date().getFullYear();
 </script>