From 9db21a214c49a3416df300cf96d7622262b249ed Mon Sep 17 00:00:00 2001
From: xdrm-brackets <xdrm.brackets.dev@gmail.com>
Date: Wed, 26 Oct 2022 10:20:27 +0200
Subject: [PATCH] fix: invalid characters in links

---
 src/components/SkillPicker.vue | 7 ++++++-
 src/components/Timeline.vue    | 8 +++++++-
 src/service/url.ts             | 5 +++++
 3 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 src/service/url.ts

diff --git a/src/components/SkillPicker.vue b/src/components/SkillPicker.vue
index 0130689..56676a7 100644
--- a/src/components/SkillPicker.vue
+++ b/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);
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 3b2322c..cb6f2e8 100644
--- a/src/components/Timeline.vue
+++ b/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>
 
diff --git a/src/service/url.ts b/src/service/url.ts
new file mode 100644
index 0000000..76ec500
--- /dev/null
+++ b/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, '_'));
+}
\ No newline at end of file