feat: shadcn/ui init

components.json

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://shadcn-vue.com/schema.json",
+	"style": "default",
+	"typescript": true,
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "assets/css/tailwind.css",
+		"baseColor": "slate",
+		"cssVariables": true
+	},
+	"framework": "nuxt",
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils"
+	}
+}

components/flow/Index.vue

@@ -21,11 +21,15 @@ provide('flow', props.flow)
 	<div class="flow">
 		<FlowHeader v-if="props.header" :id="props.flow!.id" :title="props.flow!.title" :url="props.flow!.homepage" />
 
-		<div class="flow-body" :class="[
-			props.flow!.configCard === 'gallery' ? 'n-gallery' : 'n-grid',
-		]">
-			<NuxtLink v-for="(module) in props.flow!.module" :key="module.url" :title="module.title" :to="module.url"
-				target="_blank">
+		<div
+			class="flow-body" :class="[
+				props.flow!.configCard === 'gallery' ? 'n-gallery' : 'n-grid',
+			]"
+		>
+			<NuxtLink
+				v-for="(module) in props.flow!.module" :key="module.url" :title="module.title" :to="module.url"
+				target="_blank"
+			>
 				<ModuleList v-if="props.flow!.configCard === 'list'" v-bind="{ module }" />
 				<ModuleProject v-else-if="props.flow!.configCard === 'project'" v-bind="{ module }" />
 				<ModuleGallery v-else-if="props.flow!.configCard === 'gallery'" v-bind="{ module }" />

components/module/Image.vue

@@ -5,7 +5,7 @@ import type { AppRouter } from '@/server/trpc/routers'
 type RouterOutput = inferRouterOutputs<AppRouter>
 type ModuleOutput = RouterOutput['module']['get']
 type FlowOutput = RouterOutput['flow']['get']
-type Module = Exclude<ModuleOutput, null>;
+type Module = Exclude<ModuleOutput, null>
 
 interface Props {
 	module: Module
@@ -28,8 +28,10 @@ const text = computed(() => extractTextFromHTML(props.module.content))
 				</div>
 			</div>
 			<div v-if="props.module.image" class="shadow-sm max-h-96 rounded-xl relative overflow-hidden">
-				<NuxtImg class="w-full" format="webp" :src="props.module!.image" :alt="module.title"
-					referrerpolicy="no-referrer" loading="lazy" width="420px" />
+				<NuxtImg
+					class="w-full" format="webp" :src="props.module!.image" :alt="module.title"
+					referrerpolicy="no-referrer" loading="lazy" width="420px"
+				/>
 			</div>
 		</div>
 		<div class="space-y-4 px-3 pb-3">
@@ -39,11 +41,15 @@ const text = computed(() => extractTextFromHTML(props.module.content))
 			<div v-if="!flow?.configNoContent && text !== ' '" class="line-clamp-3">
 				<div v-html="text" />
 			</div>
-			<div v-if="!props.module.image || (props.module.platform?.length || 0) > 1"
-				class="flex flex-row items-center gap-1">
+			<div
+				v-if="!props.module.image || (props.module.platform?.length || 0) > 1"
+				class="flex flex-row items-center gap-1"
+			>
 				<template v-if="(props.module.platform?.length || 0) > 1">
-					<div v-for="platform in props.module.platform" :key="platform" class="w-7 h-7 block"
-						@click="navigateTo(platform, { open: { target: '_blank' }, external: true })">
+					<div
+						v-for="platform in props.module.platform" :key="platform" class="w-7 h-7 block"
+						@click="navigateTo(platform, { open: { target: '_blank' }, external: true })"
+					>
 						<LinkIcon :url="platform" />
 					</div>
 				</template>

lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}

nuxt.config.ts

@@ -20,7 +20,19 @@ export default defineNuxtConfig({
 		'nuxt-icon',
 		'@nuxtjs/seo',
 		'@nuxtjs/tailwindcss',
+		'shadcn-nuxt',
 	],
+	shadcn: {
+		/**
+		 * Prefix for all the imported component
+		 */
+		prefix: '',
+		/**
+		 * Directory that the component lives in.
+		 * @default "./components/ui"
+		 */
+		componentDir: './components/ui',
+	},
 	ogImage: {
 		googleFontMirror: true,
 		fonts: [

package.json

@@ -22,8 +22,15 @@
 		"@trpc/client": "^10.45.2",
 		"@trpc/server": "^10.45.2",
 		"@vitest/coverage-v8": "^1.4.0",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.1.1",
 		"consola": "^3.2.3",
+		"lucide-vue-next": "^0.372.0",
+		"radix-vue": "^1.7.2",
+		"shadcn-nuxt": "^0.10.2",
 		"sharp": "^0.33.3",
+		"tailwind-merge": "^2.3.0",
+		"tailwindcss-animate": "^1.0.7",
 		"trpc-nuxt": "^0.10.21",
 		"zod": "^3.22.4"
 	},
@@ -66,4 +73,4 @@
 			]
 		}
 	}
-}
+}