feat: add page /projects-by-tech/{tech}

Author: ansidev

demo/content/projects-by-tech/[slug].md

@@ -0,0 +1,15 @@
+---
+home: true
+layout: home
+---
+
+<script setup>
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+import { useSlugFilter } from '../../composables'
+import { data as projects } from '../../loaders/project.data'
+
+const { params } = useData()
+</script>
+
+<ProjectsPage :projects="projects" :technology="params.slug" />

demo/content/projects-by-tech/[slug].paths.ts

@@ -0,0 +1,4 @@
+import { useMarkdownFrontmatterRoute } from 'vitepress-theme-ansidev/composables'
+
+// projects-by-tech/[slug].paths.js
+export default useMarkdownFrontmatterRoute('demo/content/projects/**/!(index).md', 'techs')

src/vitepress/pages/ProjectsPage.vue

@@ -2,32 +2,44 @@
 import type { PropType } from 'vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useUrlSearchParams } from '@vueuse/core'
 import type { Project } from '../../core/types'
 import ProjectList from '../components/ProjectList.vue'
 import { useSlug, useSlugFilter } from '../composables'
 
 const props = defineProps({
+  projectPage: {
+    type: String,
+    required: false,
+    default: '/projects.html'
+  },
   projects: {
     type: Object as PropType<Project[]>,
     required: true,
     default: []
+  },
+  technology: {
+    type: String,
+    required: false
   }
 })
 
 const { t } = useI18n()
-const params = useUrlSearchParams('history')
-const tech = params.tech
+const tech = props.technology
 const hasTechParam = typeof tech === 'string' && tech.length > 0
-const byTech: (project: Project) => boolean = project => !hasTechParam || project.techs.some(useSlugFilter(tech))
+const byTech: (project: Project) => boolean = (project) =>
+  !hasTechParam || project.techs.some(useSlugFilter(tech))
 const projectsByTech = computed(() => props.projects.filter(byTech))
 const technologies = computed(() => {
-  const uniqueTechnologies = [...new Set(props.projects.flatMap(project => project.techs))]
-  return uniqueTechnologies.map(name => ({
-    name,
-    slug: useSlug(name),
-    selected: hasTechParam && useSlug(name) === tech
-  })).sort((a, b) => b.selected === a.selected ? 0 : b.selected ? 1 : -1)
+  const uniqueTechnologies = [
+    ...new Set(props.projects.flatMap((project) => project.techs))
+  ]
+  return uniqueTechnologies
+    .map((name) => ({
+      name,
+      slug: useSlug(name),
+      selected: hasTechParam && useSlug(name) === tech
+    }))
+    .sort((a, b) => (b.selected === a.selected ? 0 : b.selected ? 1 : -1))
 })
 </script>
 
@@ -36,12 +48,17 @@ const technologies = computed(() => {
     <div>
       <p>
         <span class="mr-2">Technologies</span>
-        <a v-if="hasTechParam" href="/projects.html">Reset</a>
+        <a v-if="hasTechParam" :href="projectPage">Reset</a>
       </p>
       <p class="flex flex-row flex-wrap">
-        <a v-for="technology in technologies"
-          :class="['border rounded-md m-1 p-1', technology.selected ? 'bg-primary text-white! border-primary' : '']"
-          :href="`/projects.html?tech=${technology.slug}`">
+        <a
+          v-for="technology in technologies"
+          :class="[
+            'border rounded-md m-1 p-1',
+            technology.selected ? 'bg-primary text-white! border-primary' : ''
+          ]"
+          :href="`/projects-by-tech/${technology.slug}`"
+        >
           {{ technology.name }}
         </a>
       </p>