feat: add projects page and rework home page

app/components/Ui/ProjectLink.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="flex">
+    <UButton :icon="icon" target="_blank" :to="link.url">
+      <span>{{ link.display }}</span>
+      <span v-if="link.type === 'cargo'"><UIcon name="i-mdi-download" /> {{ crateDownloads }}</span>
+    </UButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProjectLink, ProjectLinkType } from '~/types/project';
+
+const crates = useCrates();
+
+const iconDict: Record<ProjectLinkType, string> = {
+  github: 'mdi:github',
+  gitea: 'simple-icons:gitea',
+  cargo: 'simple-icons:rust',
+  melpa: 'file-icons:melpa',
+};
+
+const icon = computed(() => iconDict[link.type]);
+
+const { link } = defineProps<{
+  link: ProjectLink;
+}>();
+
+const cratesData = computed(() => (link.type === 'cargo' ? crates.getCrateInfo(link.display) : null));
+const crateDownloads = computed(
+  () => cratesData.value?.data?.value?.crate.downloads ?? (cratesData.value?.loading ? 'loading' : 'error'),
+);
+</script>

app/components/Ui/SingleProject.vue

@@ -0,0 +1,23 @@
+<template>
+  <UPageCard class="w-md bg-background-100">
+    <div class="text-2xl font-title">{{ project.name }}</div>
+    <p>
+      {{ project.description }}
+    </p>
+    <div class="flex flex-row flex-wrap gap-2 items-baseline">
+      <UiProjectLink v-for="link in project.links" :key="link.url" :link="link" />
+    </div>
+    <div class="flex flex-row gap-4 items-baseline">
+      <div>Tools</div>
+      <UiBadgeList :tools="project.tools" />
+    </div>
+  </UPageCard>
+</template>
+
+<script lang="ts" setup>
+import type { Project } from '~/types/project';
+
+const { project } = defineProps<{
+  project: Project;
+}>();
+</script>