project tile as web component

projects/frontend/src/components/web-components/index.ts

@@ -0,0 +1,5 @@
+import { registerProjectTile } from './project-tile'
+
+export const register = () => {
+  registerProjectTile()
+}

projects/frontend/src/components/web-components/project-tile.ts

@@ -0,0 +1,9 @@
+import { defineCustomElement } from 'vue'
+
+import ProjectTileSFC from 'src/views/project/project-tile.vue'
+
+export const ProjectTile = defineCustomElement(ProjectTileSFC)
+
+export const registerProjectTile = () => {
+  customElements.define('project-tile', ProjectTile)
+}

projects/frontend/src/main.ts

@@ -9,6 +9,7 @@ import './main.sass'
 
 import { createRoutes, initializeRouteStore } from './routes'
 import { headingSectionsExtension } from './utilities/marked'
+import { register } from './components/web-components'
 
 marked
 .use(headingSectionsExtension() as any)
@@ -27,6 +28,7 @@ export const createApp = ViteSSG(
   { routes: createRoutes() },
   // function to have custom setups
   ({ app, router, routes, isClient, initialState }) => {
+    register()
     app.use(createPinia())
     initializeRouteStore(routes)
   },

projects/frontend/src/utilities/fetch.ts

@@ -19,6 +19,15 @@ const domPurifyConfig = {
     'src',
     'style',
     'title',
+
+    // project-tile
+    'info',
+    'view-path',
+    'thumbnail-background',
+    'thumbnail-position',
+    'caption',
+    'subtitle',
+    'summary',
   ],
   ALLOWED_TAGS: [
     'a',
@@ -70,6 +79,8 @@ const domPurifyConfig = {
     'dd',
     'dl',
     'dt',
+
+    'project-tile',
   ],
 }
 

projects/frontend/src/views/project/project-list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import type { 
   ProjectList,
   ProjectListingInfo,
@@ -31,6 +31,7 @@ const currentRoute = getCurrentRoute()
 const routeStore = useRouteStore()
 const routeConfig = routeStore._routes[currentRoute.path] as ProjectListDefinition
 const config = ref(null as ProjectList | null)
+const projectViewPath = computed(() => `${currentRoute.path}/view`)
 
 /**
  * Handler for a tag being selected;
@@ -71,9 +72,11 @@ onMounted(async () => {
     )
       ProjectTile(
         v-if='!projects[id].hidden || !config.removeFromView'
+        v-bind='projects[id]'
         :class='{ hidden: projects[id].hidden && !config.removeFromView }'
         :id='id'
-        :info='projects[id]'
+        :viewPath='projectViewPath'
+        :isInternal='true'
       )
   FilterPanel(
     v-if='ready && !!config.tags'

projects/frontend/src/views/project/project-tile.vue

@@ -5,36 +5,43 @@ import type {
   ProjectListingInfo,
 } from '@goldenwere/static-web-templates-types'
 
-import { getCurrentRoute } from 'src/utilities/vuetils'
-
 const props = defineProps<{
-  id: string
-  info: ProjectListingInfo
-}>()
+  id: string,
+  viewPath: string,
+  isInternal: boolean,
+} & ProjectListingInfo>()
 
-const currentRoute = getCurrentRoute()
-
-const { thumbnailBackground, thumbnailBackgroundSize } = props.info
-const caption = computed(() => marked.parse(props.info.caption || ''))
-const summary = computed(() => marked.parse(props.info.summary || ''))
-const title = computed(() => marked.parse(props.info.title || ''))
-const subtitle = computed(() => marked.parse(props.info.subtitle || ''))
+const { thumbnailBackground, thumbnailBackgroundSize } = props
+const caption = computed(() => marked.parse(props.caption || ''))
+const summary = computed(() => marked.parse(props.summary || ''))
+const title = computed(() => marked.parse(props.title || ''))
+const subtitle = computed(() => marked.parse(props.subtitle || ''))
+const href = computed(() => `${props.viewPath}?id=${props.id}`)
 </script>
 
 <template lang="pug">
+mixin embedText
+  .text
+    .title(
+      v-html='title'
+    )
+    .subtitle(
+      v-if='subtitle'
+      v-html='subtitle'
+    )
 .project-embed
-  router-link.link(
-    :to='{ name: `${currentRoute.name}: View Project`, query: { id: id } }'
+  router-link.router-link.link(
+    v-if='isInternal'
+    :to='{ path: viewPath, query: { id: id } }'
     :style='{ background: thumbnailBackground, backgroundSize: thumbnailBackgroundSize }'
   )
-    .text
-      .title(
-        v-html='title'
-      )
-      .subtitle(
-        v-if='subtitle'
-        v-html='subtitle'
-      )
+    +embedText
+  a.link(
+    v-else
+    :href='href'
+    :style='{ background: thumbnailBackground, backgroundSize: thumbnailBackgroundSize }'
+  )
+    +embedText
   .caption(
     v-html='caption'
   )