a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
migrate sourcebooks to use remote functions
+100
-37
-16
app/src/routes/(app)/sourcebooks/+page.server.ts
-16
app/src/routes/(app)/sourcebooks/+page.server.ts
···
1
-
import { db } from '$server/db'
2
-
import { SourcebookRepository } from '$server/db/repos/sourcebook'
3
-
import { definePageMeta } from '$ui/page-meta'
4
-
import type { PageServerLoad } from './$types'
5
-
6
-
export const load: PageServerLoad = async () => {
7
-
const sourceBookRepo = new SourcebookRepository(db)
8
-
const querySourceBooks = await sourceBookRepo.getSourcebooksBy()
9
-
10
-
return {
11
-
meta: definePageMeta({
12
-
title: 'Sourcebooks',
13
-
}),
14
-
sourceBooks: querySourceBooks,
15
-
}
16
-
}
+7
-8
app/src/routes/(app)/sourcebooks/+page.svelte
+7
-8
app/src/routes/(app)/sourcebooks/+page.svelte
···
3
3
import SourcebookIcon from '$ui/icons/SourceBookIcon.svelte'
4
4
import { Breadcrumb } from '$ui/layout/breadcrumb'
5
5
import NoEntriesFound from '../NoEntriesFound.svelte'
6
-
import type { PageProps } from './$types'
6
+
import { getPageMeta, queryBreadcrumb, querySourcebooks } from './page.remote'
7
7
8
-
const { data }: PageProps = $props()
9
-
const { meta, sourceBooks } = $derived(data)
8
+
const meta = await getPageMeta()
9
+
const paths = await queryBreadcrumb()
10
+
const sourcebooks = await querySourcebooks()
10
11
</script>
11
12
12
13
<svelte:head>
13
14
<PageMeta {...meta} />
14
15
</svelte:head>
15
16
16
-
<Breadcrumb links={[
17
-
{ path: '/sourcebooks', text: 'Sourcebooks' }
18
-
]} />
17
+
<Breadcrumb links={paths.root} />
19
18
20
-
{#each sourceBooks as sourceBook (sourceBook.id)}
21
-
{@debug sourceBook}
19
+
{#each sourcebooks as sourcebook (sourcebook.id)}
20
+
{@debug sourcebook}
22
21
{:else}
23
22
<NoEntriesFound entryName="sourcebook">
24
23
{#snippet icon()}
app/src/routes/(app)/sourcebooks/[page]/+page.svelte
app/src/routes/(app)/sourcebooks/[page]/+page.svelte
This is a binary file and will not be displayed.
app/src/routes/(app)/sourcebooks/[page]/edit/+page.server.ts
app/src/routes/(app)/sourcebooks/[page]/edit/+page.server.ts
This is a binary file and will not be displayed.
app/src/routes/(app)/sourcebooks/[page]/edit/+page.svelte
app/src/routes/(app)/sourcebooks/[page]/edit/+page.svelte
This is a binary file and will not be displayed.
-10
app/src/routes/(app)/sourcebooks/new/+page.server.ts
-10
app/src/routes/(app)/sourcebooks/new/+page.server.ts
+41
-3
app/src/routes/(app)/sourcebooks/new/+page.svelte
+41
-3
app/src/routes/(app)/sourcebooks/new/+page.svelte
···
1
1
<script lang="ts">
2
+
import BookPlusIcon from '@lucide/svelte/icons/book-plus'
3
+
import { Button } from '$ui/components/button'
4
+
import { Heading, HeadingGroup, SubHeading } from '$ui/components/heading'
5
+
import { Field } from '$ui/form/field'
6
+
import { TextAreaInput, TextInput } from '$ui/form/text-input'
7
+
import { Breadcrumb } from '$ui/layout/breadcrumb'
8
+
import { PageLayout } from '$ui/layout/page-layout'
2
9
import { PageMeta } from '$ui/page-meta'
3
-
import type { PageProps } from './$types'
10
+
import { queryBreadcrumb } from '../page.remote'
11
+
import { getPageMeta } from './page.remote'
4
12
5
-
let { data }: PageProps = $props()
6
-
const { meta } = $derived(data)
13
+
const meta = await getPageMeta()
14
+
const paths = await queryBreadcrumb()
7
15
</script>
8
16
9
17
<svelte:head>
10
18
<PageMeta {...meta} />
11
19
</svelte:head>
20
+
21
+
<Breadcrumb links={paths.newEntry} />
22
+
23
+
<PageLayout class="items-stretch">
24
+
<div class="flex flex-col gap-8 mx-auto">
25
+
<HeadingGroup class="flex flex-col gap-2">
26
+
<Heading level={2}>Create a new sourcebook</Heading>
27
+
<SubHeading class="max-w-50ch">
28
+
A sourcebook is a set of content that describes the inner workings of a universe.
29
+
They encompass the rules and settings, acting as an authoritative source for you and your players to reference.
30
+
</SubHeading>
31
+
</HeadingGroup>
32
+
<form class="w-full flex flex-col gap-4">
33
+
<Field.Root>
34
+
<Field.Label for="name">Name</Field.Label>
35
+
<TextInput name="name" />
36
+
</Field.Root>
37
+
<Field.Root>
38
+
<Field.Label for="description">Description</Field.Label>
39
+
<TextAreaInput rows={6} name="description" />
40
+
</Field.Root>
41
+
<footer>
42
+
<Button type="submit">
43
+
<BookPlusIcon />
44
+
Create sourcebook
45
+
</Button>
46
+
</footer>
47
+
</form>
48
+
</div>
49
+
</PageLayout>
+24
app/src/routes/(app)/sourcebooks/new/page.remote.ts
+24
app/src/routes/(app)/sourcebooks/new/page.remote.ts
···
1
+
import { form, prerender } from '$app/server'
2
+
import { db } from '$server/db'
3
+
import { SourcebookRepository, zSourcebookSchema } from '$server/db/repos/sourcebook'
4
+
import { definePageMeta } from '$ui/page-meta'
5
+
6
+
export const getPageMeta = prerender(() =>
7
+
definePageMeta({
8
+
title: 'Create a new sourcebook entry',
9
+
}),
10
+
)
11
+
12
+
export const createSourcebook = form(
13
+
zSourcebookSchema.toInsert.omit({
14
+
createdAt: true,
15
+
archivedAt: true,
16
+
}),
17
+
async ({ name, description }) => {
18
+
const sourcebookRepo = new SourcebookRepository(db)
19
+
return await sourcebookRepo.createSourcebook({
20
+
name,
21
+
description,
22
+
})
23
+
},
24
+
)
+28
app/src/routes/(app)/sourcebooks/page.remote.ts
+28
app/src/routes/(app)/sourcebooks/page.remote.ts
···
1
+
import { prerender, query } from '$app/server'
2
+
import { db } from '$server/db'
3
+
import { SourcebookRepository } from '$server/db/repos/sourcebook'
4
+
import { definePaths } from '$ui/layout/breadcrumb'
5
+
import { definePageMeta } from '$ui/page-meta'
6
+
7
+
export const getPageMeta = prerender(() =>
8
+
definePageMeta({
9
+
title: 'Sourcebooks',
10
+
}),
11
+
)
12
+
13
+
export const querySourcebooks = query(async () => {
14
+
const sourceBookRepo = new SourcebookRepository(db)
15
+
const querySourcebooks = await sourceBookRepo.getSourcebooksBy()
16
+
17
+
return querySourcebooks
18
+
})
19
+
20
+
export const queryBreadcrumb = query(async () => {
21
+
const root = { path: '/sourcebooks', text: 'Sourcebooks' }
22
+
const newEntry = { path: '/sourcebooks/new', text: 'Create a new sourcebook entry' }
23
+
24
+
return definePaths({
25
+
root: [root],
26
+
newEntry: [root, newEntry],
27
+
})
28
+
})