support internal links with vue-router outside vue context

libs/embeds/src/link.ts

@@ -1,7 +1,11 @@
+import type { RoutedWindow } from '@goldenwere/static-web-templates-types'
+
 import type { AttributeObserver } from './observer'
 
 export type LinkEmbedAttributes = typeof LinkEmbed.observedAttributes[number]
 
+declare const window: RoutedWindow
+
 /**
  * A link embed is a link with a title and an optional icon + subtitle
  */
@@ -23,11 +27,19 @@ export class LinkEmbed extends HTMLElement {
 
     const _link = ownerDocument.createElement('a')
     _link.setAttribute('rel', 'noreferrer noopener')
+    _link.addEventListener('click', (e) => {
+      if (_link.dataset?.href?.startsWith('/') && !!window.router) {
+        e.preventDefault()
+        const route = window.router.resolve({ path: _link.dataset.href })
+        window.router.push(route)
+      }
+    })
     this._observers.href = {
       element: _link,
-      observer: (oldVal, newVal) => {
+      observer: (oldVal, newVal: string) => {
         const { element } = this._observers.href
         element!.setAttribute('href', newVal)
+        element!.dataset.href = newVal
       },
     }
     this._observers.target = {

libs/types/src/config/routing.d.ts

@@ -1,7 +1,9 @@
+import { Router } from 'vue-router'
+import { GalleryEntry } from '../content/templates/gallery-list'
+import { ProjectListingInfo } from '../content/templates/project-list'
 import { TemplateType } from '../content/templates/templateType'
 import { WarningModal } from './warnings'
 
-
 /**
  * Defines the shared options for a route
  */
@@ -69,8 +71,16 @@ export type RouteDefinition =
  */
 export type RouteCollection = { [key: string]: RouteDefinition }
 
+/**
+ * Defines {@link Window} globals
+ */
 export interface RoutedWindow extends Window {
+  /** refers to a template's primary route config; may briefly refer to sub config until a view is fully resolved */
   routeConfig: RouteDefinition
+  /** refers to a template's sub config in the case of child routes under a template (e.g. project-view under project-list) */
   routeSubConfig: any
+  /** refers to content config for various view routes (e.g. {@link GalleryEntry}, {@link ProjectListingInfo}, etc.) */
   routeContentConfig: any
+  /** vue-router instance */
+  router?: Router
 }