feat: change title

Author: MrSunshyne

all-meetups.json

@@ -71,20 +71,6 @@
     "meetupId": 18,
     "meetupTitle": "Vue / Tailwind / OpenData"
   },
-  {
-    "meetupDate": "2016-07-30",
-    "sessionDetails": [],
-    "sponsorsDetails": [
-      {
-        "logo": "https://directus.frontend.mu/assets/a72a156c-05ba-41ff-8cde-f9c5c99cb98b.png",
-        "name": "Extension Interactive",
-        "darkbg": false,
-        "venue": "Extension Interactive"
-      }
-    ],
-    "meetupId": 19,
-    "meetupTitle": "#1 Front-End Mauritius Meetup July 2016"
-  },
   {
     "meetupDate": "2016-07-30",
     "sessionDetails": [

src/Root.tsx

@@ -4,9 +4,9 @@ import './style.css';
 import allMeetups from '../all-meetups.json';
 
 
-// a function that only allows a-z, A-Z, 0-9, CJK, but no spaces
+// a function that only allows a-z, A-Z, 0-9, CJK, but replace spaces with - and remove multiple - 
 function removeSpecialChars(str:  string) {
-	return str.replace(/[^a-zA-Z0-9\u4E00-\u9FFF]/g, '');
+	return str.replace(/[^a-zA-Z0-9\u4E00-\u9FFF]/g, '-').replace(/-+/g, '-');
 }
 
 export const RemotionRoot: React.FC = () => {
@@ -15,7 +15,7 @@ export const RemotionRoot: React.FC = () => {
 			{allMeetups.map((meetup) => (
 				<Composition
 					key={meetup.meetupId}
-					id={removeSpecialChars(meetup.meetupTitle)}
+					id={removeSpecialChars(meetup.meetupDate + '-' + meetup.meetupTitle)}
 					component={MeetupVideo}
 					defaultProps={
 						{