Added rudimentary timeline to display tag chapters.

assets/components/releases/chapters.vue

@@ -1,5 +1,26 @@
 <template>
-	<ul class="chapters nolist">
+	<div
+		v-if="timeline"
+		class="timeline"
+	>
+		<ul class="timeline-items nolist">
+			<li
+				v-for="chapter in timeline"
+				:key="`chapter-${chapter.id}`"
+				:style="{ left: `${(chapter.time / duration) * 100}%` }"
+				:title="formatDuration(chapter.time)"
+				class="timeline-item"
+			><router-link
+				:to="`/tag/${chapter.tags[0].slug}`"
+				class="link"
+			>{{ chapter.tags[0]?.name || '&nbsp;' }}</router-link></li>
+		</ul>
+	</div>
+
+	<ul
+		v-else
+		class="chapters nolist"
+	>
 		<li
 			v-for="chapter in chapters"
 			:key="`chapter-${chapter.id}`"
@@ -55,6 +76,14 @@
 <script>
 import Tags from './tags.vue';
 
+function timeline() {
+	if (this.chapters.every(chapter => chapter.time)) {
+		return this.chapters.filter(chapter => chapter.tags?.length > 0);
+	}
+
+	return null;
+}
+
 export default {
 	components: {
 		Tags,
@@ -65,6 +94,16 @@ export default {
 			default: () => [],
 		},
 	},
+	data() {
+		const lastChapter = this.chapters[this.chapters.length - 1];
+
+		return {
+			duration: lastChapter.time + lastChapter.duration,
+		};
+	},
+	computed: {
+		timeline,
+	},
 };
 </script>
 
@@ -153,6 +192,41 @@ export default {
 	line-height: 1.5;
 }
 
+.timeline-items {
+	position: relative;
+	height: 5rem;
+	border-bottom: solid 1px var(--shadow-weak);
+}
+
+.timeline-item {
+	position: absolute;
+	bottom: -.25rem;
+	padding: .1rem .5rem;
+	border-radius: .6rem;
+	color: var(--primary);
+	background: var(--background);
+	transform: rotate(-60deg);
+	transform-origin: 0 50%;
+	box-shadow: 0 0 3px var(--shadow-weak);
+	font-size: .8rem;
+	font-weight: bold;
+
+	.link {
+		color: inherit;
+	}
+
+	&:before {
+		content: '';
+		display: inline-block;
+		width: 1rem;
+		height: 2px;
+		position: absolute;
+		left: calc(-1rem + 1px);
+		margin: .3rem .5rem 0 0;
+		background: var(--primary);
+	}
+}
+
 @media(max-width: $breakpoint-micro) {
 	.chapters {
 		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));