feat: gallery card

components/flow/Index.vue

@@ -21,10 +21,18 @@ 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">
-			<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 }" />
 				<ModuleImage v-else v-bind="{ module }" />
 			</NuxtLink>
 		</div>
@@ -36,7 +44,14 @@ provide('flow', props.flow)
 	@apply flex flex-col gap-6;
 }
 
-.flow-body {
+.flow-body.n-grid {
 	@apply grid grid-cols-1 gap-4 mb-32 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4;
 }
+
+.flow-body.n-gallery {
+	@apply columns-3 gap-4;
+}
+.flow-body .module {
+	@apply mb-4;
+}
 </style>

components/module/Gallery.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { inferRouterOutputs } from '@trpc/server'
+import type { AppRouter } from '@/server/trpc/routers'
+
+type RouterOutput = inferRouterOutputs<AppRouter>
+type ModuleOutput = RouterOutput['module']['get']
+type Module = Exclude<ModuleOutput, null>
+
+interface Props {
+	module: Module
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+	<div class="module shu-card p-3 flex flex-col">
+		<div class="flex flex-row items-center pt-1 pb-3 gap-2 px-2">
+			<div class="w-5 h-5 block rounded-full overflow-hidden">
+				<LinkIcon :url="props.module.url" />
+			</div>
+			<div>
+				{{ formatDateTime(module.date) }}
+			</div>
+		</div>
+		<div v-if="props.module.image" class="shadow-sm border rounded-2xl relative overflow-hidden">
+			<NuxtImg
+				class="w-full" format="webp" :src="props.module!.image" :alt="module.title"
+				referrerpolicy="no-referrer" loading="lazy" width="420px"
+			/>
+			<div class="absolute bottom-0 left-0 px-5 pt-5 pb-4 bg-gradient-to-t from-black/35 to-transparent w-full">
+				<h3 class="drop-shadow-md text-white font-bold text-2xl tracking-tight">
+					{{ props.module.title }}
+				</h3>
+			</div>
+		</div>
+	</div>
+</template>

components/module/Image.vue

@@ -5,9 +5,10 @@ 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>;
 
 interface Props {
-	module: ModuleOutput
+	module: Module
 }
 
 const props = defineProps<Props>()
@@ -17,22 +18,22 @@ const text = computed(() => extractTextFromHTML(props.module.content))
 
 <template>
 	<div class="module shu-card p-4 space-y-3 flex flex-col justify-between">
-		<div class="space-y-3 ">
-			<div class="p-1">
+		<div class="space-y-3">
+			<div class="px-2">
 				{{ formatDateTime(module.date) }}
 			</div>
-			<div v-if="props.module.image" class="max-h-96 rounded-xl relative overflow-hidden">
+			<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="320px" height="200px"
+					referrerpolicy="no-referrer" loading="lazy" width="420px"
 				/>
 			</div>
 		</div>
-		<div class="space-y-3 p-1">
-			<h3 v-if="!flow.configNoTitle" class="font-bold text-2xl tracking-tight text-black">
+		<div class="space-y-3 px-2 pb-3">
+			<h3 v-if="!flow?.configNoTitle" class="font-bold text-2xl tracking-tight text-black">
 				{{ props.module.title }}
 			</h3>
-			<div v-if="!flow.configNoContent && text !== ' '" class="line-clamp-3">
+			<div v-if="!flow?.configNoContent && text !== ' '" class="line-clamp-3">
 				<div v-html="text" />
 			</div>
 			<div

components/public/Footer.vue

@@ -6,7 +6,7 @@ const config = await useGetConfig()
 
 <template>
 	<div class="container flex">
-		<div class="footer mb-16">
+		<div class="footer my-16">
 			Copyright © {{ dayjs(new Date()).format('YYYY') }} {{ config.siteName }}, Powered by <a
 				class="underline"
 				href="https://github.com/nexmoe/roam-space" target="_blank"

components/public/Header.vue

@@ -12,7 +12,7 @@ const config = await useGetConfig()
 	<div class="container header justify-between flex pt-6">
 		<div class="flex-1 flex items-center">
 			<NuxtLink :title="config.siteName" :to="'/'" class="flex items-center gap-2">
-				<NuxtImg :alt="config.siteName" class="w-8 rounded-full" :src="config.avatar" />
+				<NuxtImg :alt="config.siteName" class="w-10 rounded-full" :src="config.avatar" />
 				<div class="uppercase">{{ config.siteName }}</div>
 			</NuxtLink>
 		</div>

layouts/default.vue

@@ -26,7 +26,7 @@ body {
 }
 
 .shu-card {
-	@apply relative hover:scale-105 hover:shadow-2xl transition-all h-full overflow-hidden rounded-3xl bg-white text-sm leading-6;
+	@apply relative hover:shadow-2xl transition-all h-full overflow-hidden rounded-3xl bg-white text-sm leading-6;
 }
 
 .nexmoe-bg {

utils/date.ts

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
 
 export function formatDateTime(source: string | number) {
-	return dayjs(source).format('YYYY-MM-DD')
+	return dayjs(source).format('MMMM DD, YYYY');
 }