fix: invalid characters in links

src/components/SkillPicker.vue

@@ -27,7 +27,7 @@
 					<h2>{{ $t('skills.featured-before') }} <b>{{ details.projects.length }}</b> {{ details.projects.length > 1 ? $t('skills.featured-after-n') : $t('skills.featured-after-1') }}</h2>
 					<h3>
 						<template v-for='(proj) of details.projects'>
-							<a :key='"pick-" + proj.name' href @click='$event.preventDefault(); scroll(proj.name.replaceAll(" ", "_"));'>
+							<a :key='"pick-" + proj.name' :href='"#" + sanitize(proj.name)' @click='$event.preventDefault(); scroll(sanitize(proj.name));'>
 								{{ proj.name }}
 							</a>
 							<span :key='proj.name'>, </span>
@@ -59,6 +59,7 @@ import { Project } from '@/model/projects';
 import * as skills from '@/service/skills';
 import * as projects from '@/service/projects';
 import { go } from '@/service/scroller';
+import * as url from '@/service/url';
 import { Locales } from '@/locales';
 
 interface Details {
@@ -115,6 +116,10 @@ export default class SkillPicker extends Vue {
 		this.$emit('pick', id);
 	}
 
+	protected sanitize(raw: string): string {
+		return url.sanitize(raw);
+	}
+
 	// returns the label for a tag
 	protected tagLabel(t: tTag): string {
 		return tagLabel(t);

src/components/Timeline.vue

@@ -15,7 +15,7 @@
 			<div :key="'spacer-'+proj.name" class='spacer' />
 
 			<!-- id is used for navigation -->
-			<div :key="'start-'+proj.name" class='start' :id='"project-" + proj.name.replaceAll(" ", "_")'>
+			<div :key="'start-'+proj.name" class='start' :id='"project-" + sanitize(proj.name)'>
 				{{ short_date(proj.started_at) }}
 			</div>
 
@@ -90,6 +90,7 @@ import { Project } from '../model/projects';
 import { tID } from '../model/skills';
 import * as projects from '../service/projects';
 import * as scroller from '../service/scroller';
+import * as url from '../service/url';
 
 interface TimeDiff {
 	diff: number;
@@ -227,6 +228,11 @@ export default class Timeline extends Vue {
 			header.classList.remove('fixed');
 		}
 	}
+
+	protected sanitize(raw: string): string {
+		return url.sanitize(raw);
+	}
+
 }
 </script>
 

src/service/url.ts

@@ -0,0 +1,5 @@
+// sanitizes an url
+export function sanitize(raw: string): string {
+	const invalid = /[\*\s\(\)]/g
+	return encodeURIComponent(raw.replaceAll(invalid, '_'));
+}