feat: space (#124)

* feat: space

Refactored component props and loop structures in multiple components to improve
readability and maintainability. Updated props definitions in Header.vue,
Module.vue, and Flow components. Adjusted loop syntax in Index.vue and Module.vue
files to enhance consistency and clarity. Removed unused CSS styles from
Index.vue and default.vue layouts for better code cleanliness. Updated field
naming for consistency in the Space model in prisma/schema.prisma file.

* feat(space): add dynamic title to space page

Added dynamic title to the space page component using the space's title property. This enhances the user experience by displaying relevant information.

* refactor(api): Remove unnecessary code in space endpoint

components/flow/Header.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface Props {
-	url: string | null
+	url?: string | null
 	title: string
 	id: string
 }

components/flow/Index.vue

@@ -4,9 +4,10 @@ import type { AppRouter } from '@/server/trpc/routers'
 
 type RouterOutput = inferRouterOutputs<AppRouter>
 type FlowOutput = RouterOutput['flow']['get']
+type Flow = Exclude<FlowOutput, null | undefined>
 
 interface Props {
-	flow: FlowOutput
+	flow: Flow
 	header?: boolean
 }
 
@@ -21,34 +22,34 @@ provide('flow', props.flow)
 	<div class="flow">
 		<FlowHeader
 			v-if="props.header"
-			:id="props.flow!.id"
-			:title="props.flow!.title"
-			:url="props.flow!.homepage"
+			: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',
+				props.flow.configCard === 'gallery' ? 'n-gallery' : 'n-grid',
 			]"
 		>
 			<NuxtLink
-				v-for="(module) in props.flow!.module"
+				v-for="(module) in props.flow.module"
 				:key="module.url"
 				:title="module.title"
 				:to="module.url"
 				target="_blank"
 			>
 				<LazyModuleList
-					v-if="props.flow!.configCard === 'list'"
+					v-if="props.flow.configCard === 'list'"
 					v-bind="{ module }"
 				/>
 				<LazyModuleProject
-					v-else-if="props.flow!.configCard === 'project'"
+					v-else-if="props.flow.configCard === 'project'"
 					v-bind="{ module }"
 				/>
 				<LazyModuleGallery
-					v-else-if="props.flow!.configCard === 'gallery'"
+					v-else-if="props.flow.configCard === 'gallery'"
 					v-bind="{ module }"
 				/>
 				<LazyModuleImage
@@ -59,21 +60,3 @@ provide('flow', props.flow)
 		</div>
 	</div>
 </template>
-
-<style>
-.flow {
-	@apply flex flex-col gap-6;
-}
-
-.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-1 gap-4 lg:columns-2 xl:columns-3 2xl:columns-4;
-}
-
-.flow-body.n-gallery .module {
-	@apply mb-4;
-}
-</style>

components/public/Footer.vue

@@ -22,7 +22,7 @@ const props = defineProps<Props>()
 <template>
 	<footer class="mt-12 bg-white dark:bg-gray-900">
 		<div class="mx-auto w-full max-w-screen-xl">
-			<div v-if="props.sitemap" class="grid grid-cols-2 gap-8 px-4 py-6 lg:py-8 md:grid-cols-4">
+			<div v-if="props.sitemap" class="grid grid-cols-2 gap-8 px-4 pt-12 lg:py-8 md:grid-cols-4">
 				<div v-for="item in props.sitemap" :key="item.title">
 					<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">{{ item.title }}</h2>
 					<ul v-for="list in item.list" :key="list.title"

components/space/Flow.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 SpaceOutput = RouterOutput['space']['get']
+type Space = Exclude<SpaceOutput, null>
+
+interface Props {
+	space: Space
+	header?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	header: true,
+})
+</script>
+
+<template>
+	<div class="flow">
+		<FlowHeader
+			v-if="props.header"
+			:id="props.space.id"
+			:title="props.space.title"
+		/>
+
+		<div class="flow-body n-grid">
+			<NuxtLink
+				v-for="flow in props.space.flows"
+				:key="flow.id"
+				:title="flow.title"
+				target="_blank"
+			>
+				<LazySpaceModule v-bind="{ flow }" />
+			</NuxtLink>
+		</div>
+	</div>
+</template>

components/space/Module.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { inferRouterOutputs } from '@trpc/server'
+import type { AppRouter } from '@/server/trpc/routers'
+
+type RouterOutput = inferRouterOutputs<AppRouter>
+type FlowOutput = RouterOutput['flow']['get']
+type Flow = Exclude<FlowOutput, null | undefined>
+
+interface Props {
+	flow: Flow
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+	<div class="module shu-card p-4">
+		<div class="px-3 py-2 text-base">
+			{{ flow.title }}
+		</div>
+		<div class="list-none m-0 p-0">
+			<NuxtLink
+				v-for="module in props.flow.module"
+				:key="module.id"
+				:title="module.title"
+				:href="module.url"
+				target="_blank"
+				class="flex flex-row items-center gap-2 hover:bg-gray-100 focus:bg-gray-200 rounded-2xl px-3 py-2 transition duration-300"
+			>
+				<LinkIcon
+					class="w-5 h-5 basis-5"
+					:width="20"
+					:url="module.url"
+				/>
+				<div class="truncate ">
+					{{ module.title }}
+				</div>
+			</NuxtLink>
+		</div>
+	</div>
+</template>

layouts/default.vue

@@ -52,4 +52,20 @@ body {
 .nexmoe-shadow {
 	box-shadow: 0 0.125rem 0.5rem rgb(204 177 161 / 30%);
 }
+
+.flow {
+	@apply flex flex-col gap-6;
+}
+
+.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-1 gap-4 lg:columns-2 xl:columns-3 2xl:columns-4;
+}
+
+.flow-body.n-gallery .module {
+	@apply mb-4;
+}
 </style>

pages/index.vue

@@ -43,7 +43,7 @@ defineOgImageComponent('NuxtSeo', {
 				</div>
 			</PublicProse>
 			<template
-				v-for=" flow in flows "
+				v-for="flow in flows "
 				:key="flow.id"
 			>
 				<LazyFlow

pages/space/[id].vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const id = useRoute().params.id as string
+const { $client } = useNuxtApp()
+
+const space = await $client.space.get.query({ id })
+const config = await useGetConfig()
+
+if (!space) {
+	throw createError({
+		statusCode: 404,
+	})
+}
+
+defineOgImageComponent('NuxtSeo', {
+	theme: config.ogTheme,
+	title: space.title,
+	description: space.description,
+})
+</script>
+
+<template>
+	<div class="page">
+		<Head>
+			<Title>{{ space.title }}</Title>
+		</Head>
+		<div class="container">
+			<PublicProse
+				v-if="space.description"
+				:title="space.title"
+			>
+				{{ space.description }}
+			</PublicProse>
+			<PublicProse
+				v-else
+				:title="space.title"
+			/>
+			<SpaceFlow v-bind="{ header: false, space }" />
+			<template
+				v-for=" flow in space.flows"
+				:key="flow.id"
+			>
+				<LazyFlow
+					v-if="flow.module.length > 0"
+					v-bind="{ flow }"
+				/>
+			</template>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.sidebar {
+	@apply fixed w-0 lg:w-64 bg-white h-full;
+}
+
+.content {
+	@apply lg:pl-72 lg:pr-8;
+}
+</style>

prisma/schema.prisma

@@ -52,10 +52,9 @@ model Flow {
   configNoContent Boolean  @default(false)
   configNoTitle   Boolean  @default(false)
   configOpenURL   Boolean  @default(false)
-  spaceId         String?
   api             API[]
-  space           Space?   @relation(fields: [spaceId], references: [id])
   module          Module[]
+  spaces          Space[]
 }
 
 model Space {
@@ -65,5 +64,5 @@ model Space {
   title       String
   details     String
   description String?
-  flow        Flow[]
+  flows       Flow[]
 }

server/trpc/routers/flow.ts

@@ -2,7 +2,7 @@ import { z } from 'zod'
 import { publicProcedure, router } from '../trpc'
 import { flowingByFlowId } from '~/server/flowing'
 
-export const flowRouter = router({
+export default router({
 	list: publicProcedure
 		.query(async ({ ctx }) => {
 			const prisma = ctx.prisma

server/trpc/routers/index.ts

@@ -1,24 +1,14 @@
-import { z } from 'zod'
-import { publicProcedure, router } from '../trpc'
+import { router } from '../trpc'
 import config from './config'
-import { flowRouter } from './flow'
+import flow from './flow'
 import module from './module'
+import space from './space'
 
 export const appRouter = router({
-	hello: publicProcedure
-		.input(
-			z.object({
-				text: z.string().nullish(),
-			}),
-		)
-		.query(({ input }) => {
-			return {
-				greeting: `hello ${input?.text ?? 'world'}`,
-			}
-		}),
 	config,
-	flow: flowRouter,
+	flow,
 	module,
+	space,
 })
 
 // export type definition of API