create a link embed

- proof of concept of a separate web components package
- link embed has icon/title/subtitle
- web components are registered just before app mounts, making them available in the markdown as well as the app

projects/frontend/package.json

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@goldenwere/static-web-templates-types": "*",
+    "@goldenwere/static-web-templates-embeds": "*",
     "@types/dompurify": "3.0.5",
     "@types/js-yaml": "4.0.9",
     "@types/node": "18.16.x",

projects/frontend/src/main.ts

@@ -4,6 +4,8 @@ import hljs from 'highlight.js'
 import { marked } from 'marked'
 import { markedHighlight } from 'marked-highlight'
 
+import { registerLinkEmbed } from '@goldenwere/static-web-templates-embeds'
+
 import main from './main.vue'
 import './main.sass'
 
@@ -27,6 +29,8 @@ export const createApp = ViteSSG(
   { routes: createRoutes() },
   // function to have custom setups
   ({ app, router, routes, isClient, initialState }) => {
+    registerLinkEmbed()
+
     app.use(createPinia())
     initializeRouteStore(routes)
   },

projects/frontend/src/utilities/fetch.ts

@@ -19,15 +19,11 @@ const domPurifyConfig = {
     'src',
     'style',
     'title',
+    'target',
 
-    // project-tile
-    'info',
-    'view-path',
-    'thumbnail-background',
-    'thumbnail-position',
-    'caption',
+    // embeds
     'subtitle',
-    'summary',
+    'icon',
   ],
   ALLOWED_TAGS: [
     'a',
@@ -80,7 +76,7 @@ const domPurifyConfig = {
     'dl',
     'dt',
 
-    'project-tile',
+    'link-embed',
   ],
 }