Add youtube presentation

.vscode/settings.json

@@ -21,6 +21,7 @@
     "utilised",
     "utilising",
     "webm",
-    "webp"
+    "webp",
+    "youtube"
   ]
 }

src/data/sdf2d.ts

@@ -2,7 +2,7 @@ import sdf2dJpeg from '../static/media/sdf2d.png?format=jpg';
 import sdf2dWebP from '../static/media/sdf2d.png?format=webp';
 
 import { Preview } from '../page/basics/preview/preview';
-import { GitHub, Open, NPM } from './shared';
+import { Open, NPM, Youtube } from './shared';
 
 export const sdf2dTimelineElement = {
   title: `2D ray tracing`,
@@ -34,8 +34,8 @@ export const sdf2dTimelineElement = {
     `,
   ],
   links: [
-    new GitHub('https://github.com/schmelczerandras/sdf-2d'),
     new NPM('https://www.npmjs.com/package/sdf-2d'),
+    new Youtube('https://www.youtube.com/watch?v=K3cEtnZUNR0'),
     new Open('https://sdf2d.schmelczer.dev'),
   ],
 };

src/data/shared.ts

@@ -4,8 +4,10 @@ import githubIcon from '../static/icons/github.svg';
 import openIcon from '../static/icons/open.svg';
 import cvIcon from '../static/icons/cv.svg';
 import packageIcon from '../static/icons/package.svg';
+import youtubeIcon from '../static/icons/youtube.svg';
 
 export const GitHub = ImageAnchorFactory(githubIcon, 'Open on GitHub');
 export const NPM = ImageAnchorFactory(packageIcon, 'Open on npm');
 export const Open = ImageAnchorFactory(openIcon, 'Open in new tab');
 export const Thesis = ImageAnchorFactory(cvIcon, 'Download thesis');
+export const Youtube = ImageAnchorFactory(youtubeIcon, 'Open on YouTube');

src/static/icons/youtube.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <rect x="3" y="5" width="18" height="14" rx="4" />
+  <path d="M10 9l5 3l-5 3z" />
+</svg>