TZGyn
/
kon.sh
mirror of https://github.com/TZGyn/shortener
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update root to use dynamic page title

Browse Source
pull/3/head
TZGyn 2 years ago
parent 8a6823af19
commit ea8ff70aa2
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A
10 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File

3
frontend/src/routes/(app)/+layout.server.ts
Unescape Escape View File

@ -5,9 +5,12 @@ export const load = (async (event) => {
const breadcrumbs = [{ name: 'Home', path: '/' }] const breadcrumbs = [{ name: 'Home', path: '/' }]
const page_title = 'Home'
return { return {
shortener_url: Bun.env.PUBLIC_SHORTENER_URL ?? '', shortener_url: Bun.env.PUBLIC_SHORTENER_URL ?? '',
user: user, user: user,
breadcrumbs, breadcrumbs,
page_title,
} }
}) satisfies LayoutServerLoad }) satisfies LayoutServerLoad

18
frontend/src/routes/(app)/+page.svelte
Unescape Escape View File

@ -8,35 +8,31 @@
export let data: PageData export let data: PageData
</script> </script>
<svelte:head> <div class="flex flex-col gap-4 py-8 px-10">
<title>Home</title>
</svelte:head>
<div class="flex flex-col gap-4 px-10 py-8">
<h2 class="text-2xl font-bold tracking-tight">Projects</h2> <h2 class="text-2xl font-bold tracking-tight">Projects</h2>
<Separator class="" /> <Separator class="" />
</div> </div>
<div class="flex w-full flex-wrap items-stretch gap-2 px-6"> <div class="flex flex-wrap gap-2 items-stretch px-6 w-full">
{#each data.projects as project} {#each data.projects as project}
<a href={'/links?project=' + project.uuid}> <a href={'/links?project=' + project.uuid}>
<Card.Root <Card.Root
class="w-[500px] hover:cursor-pointer hover:bg-secondary"> class="hover:cursor-pointer w-[500px] hover:bg-secondary">
<Card.Header> <Card.Header>
<Card.Title class="flex items-center gap-2"> <Card.Title class="flex gap-2 items-center">
{project.name} {project.name}
</Card.Title> </Card.Title>
</Card.Header> </Card.Header>
<Card.Content> <Card.Content>
<div class="flex w-full gap-4"> <div class="flex gap-4 w-full">
<Button <Button
class="flex h-8 items-center justify-center gap-1 rounded bg-secondary text-sm"> class="flex gap-1 justify-center items-center h-8 text-sm rounded bg-secondary">
<ExternalLink size={20} /> <ExternalLink size={20} />
{project.shortener.length} {project.shortener.length}
Shorteners Shorteners
</Button> </Button>
<Button <Button
class="flex h-8 items-center justify-center gap-1 rounded bg-secondary text-sm"> class="flex gap-1 justify-center items-center h-8 text-sm rounded bg-secondary">
<BarChart size={20} /> <BarChart size={20} />
{project.shortener.reduce( {project.shortener.reduce(
(curr, shortener) => shortener.visitor.length + curr, (curr, shortener) => shortener.visitor.length + curr,

6
frontend/src/routes/(app)/links/+layout.server.ts
Unescape Escape View File

@ -2,9 +2,13 @@ import type { LayoutServerLoad } from './$types'
export const load = (async (event) => { export const load = (async (event) => {
const { breadcrumbs: parentBreadcrumbs } = await event.parent() const { breadcrumbs: parentBreadcrumbs } = await event.parent()
const breadcrumbs = [ const breadcrumbs = [
...parentBreadcrumbs, ...parentBreadcrumbs,
{ name: 'Links', path: '/links' }, { name: 'Links', path: '/links' },
] ]
return { breadcrumbs }
const page_title = 'Links'
return { breadcrumbs, page_title }
}) satisfies LayoutServerLoad }) satisfies LayoutServerLoad

3
frontend/src/routes/(app)/links/[id]/+page.server.ts
Unescape Escape View File

@ -93,6 +93,8 @@ export const load = (async (event) => {
.where(eq(visitorSchema.shortenerId, shortener.id)) .where(eq(visitorSchema.shortenerId, shortener.id))
.groupBy(visitorSchema.deviceType) .groupBy(visitorSchema.deviceType)
const page_title = 'Shortener | ' + shortener.link
return { return {
shortener, shortener,
visitor, visitor,
@ -101,5 +103,6 @@ export const load = (async (event) => {
visitorByOS, visitorByOS,
visitorByDeviceVendor, visitorByDeviceVendor,
visitorByDeviceType, visitorByDeviceType,
page_title,
} }
}) satisfies PageServerLoad }) satisfies PageServerLoad

32
frontend/src/routes/(app)/links/[id]/+page.svelte
Unescape Escape View File

@ -98,16 +98,12 @@
}) })
</script> </script>
<svelte:head> <div class="flex justify-between items-center p-4 min-h-[80px]">
<title>Shortener {data.shortener.link}</title>
</svelte:head>
<div class="flex min-h-[80px] items-center justify-between p-4">
<div class="text-3xl font-bold">{data.shortener.link}</div> <div class="text-3xl font-bold">{data.shortener.link}</div>
</div> </div>
<Separator /> <Separator />
<div class="flex flex-wrap gap-4 overflow-y-scroll p-4"> <div class="flex overflow-y-scroll flex-wrap gap-4 p-4">
<Card.Root class="w-[700px]"> <Card.Root class="w-[700px]">
<Card.Header> <Card.Header>
<Card.Title>Clicks</Card.Title> <Card.Title>Clicks</Card.Title>
@ -121,7 +117,7 @@
<Card.Root class="min-h-[500px] w-[500px]"> <Card.Root class="min-h-[500px] w-[500px]">
<Tabs.Root value="country"> <Tabs.Root value="country">
<Card.Header <Card.Header
class="flex w-full flex-row items-center justify-between space-y-0"> class="flex flex-row justify-between items-center space-y-0 w-full">
<div> <div>
<Card.Title>Visitors</Card.Title> <Card.Title>Visitors</Card.Title>
<Card.Description <Card.Description
@ -135,8 +131,8 @@
<Card.Content> <Card.Content>
<Tabs.Content value="country"> <Tabs.Content value="country">
{#each data.visitorByCountry as visitorByCountry} {#each data.visitorByCountry as visitorByCountry}
<div class="flex items-center justify-between"> <div class="flex justify-between items-center">
<div class="flex items-center gap-4"> <div class="flex gap-4 items-center">
<img <img
src={`https://flagsapi.com/${visitorByCountry.code}/flat/64.png`} src={`https://flagsapi.com/${visitorByCountry.code}/flat/64.png`}
alt="" /> alt="" />
@ -148,8 +144,8 @@
</Tabs.Content> </Tabs.Content>
<Tabs.Content value="city"> <Tabs.Content value="city">
{#each data.visitorByCity as visitorByCity} {#each data.visitorByCity as visitorByCity}
<div class="flex items-center justify-between"> <div class="flex justify-between items-center">
<div class="flex items-center gap-4"> <div class="flex gap-4 items-center">
<img <img
src={`https://flagsapi.com/${visitorByCity.code}/flat/64.png`} src={`https://flagsapi.com/${visitorByCity.code}/flat/64.png`}
alt="" /> alt="" />
@ -165,7 +161,7 @@
<Card.Root class="min-h-[500px] w-[500px]"> <Card.Root class="min-h-[500px] w-[500px]">
<Tabs.Root value="vendor"> <Tabs.Root value="vendor">
<Card.Header <Card.Header
class="flex w-full flex-row items-center justify-between space-y-0"> class="flex flex-row justify-between items-center space-y-0 w-full">
<div> <div>
<Card.Title>Devices</Card.Title> <Card.Title>Devices</Card.Title>
<Card.Description>Devices by Country/City</Card.Description> <Card.Description>Devices by Country/City</Card.Description>
@ -180,8 +176,8 @@
<Tabs.Content value="vendor"> <Tabs.Content value="vendor">
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
{#each data.visitorByDeviceVendor as visitorByDeviceVendor} {#each data.visitorByDeviceVendor as visitorByDeviceVendor}
<div class="flex items-center justify-between"> <div class="flex justify-between items-center">
<div class="flex items-center gap-4"> <div class="flex gap-4 items-center">
<TabletSmartphone /> <TabletSmartphone />
<div> <div>
{visitorByDeviceVendor.vendor ?? {visitorByDeviceVendor.vendor ??
@ -196,8 +192,8 @@
<Tabs.Content value="type"> <Tabs.Content value="type">
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
{#each data.visitorByDeviceType as visitorByDeviceType} {#each data.visitorByDeviceType as visitorByDeviceType}
<div class="flex items-center justify-between"> <div class="flex justify-between items-center">
<div class="flex items-center gap-4"> <div class="flex gap-4 items-center">
{#if visitorByDeviceType.type === 'mobile'} {#if visitorByDeviceType.type === 'mobile'}
<Smartphone /> <Smartphone />
{:else if visitorByDeviceType.type === 'tablet'} {:else if visitorByDeviceType.type === 'tablet'}
@ -218,8 +214,8 @@
<Tabs.Content value="os"> <Tabs.Content value="os">
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
{#each data.visitorByOS as visitorByOS} {#each data.visitorByOS as visitorByOS}
<div class="flex items-center justify-between"> <div class="flex justify-between items-center">
<div class="flex items-center gap-4"> <div class="flex gap-4 items-center">
<TabletSmartphone /> <TabletSmartphone />
<div>{visitorByOS.os ?? 'Undefined OS'}</div> <div>{visitorByOS.os ?? 'Undefined OS'}</div>
</div> </div>

3
frontend/src/routes/(app)/projects/+layout.server.ts
Unescape Escape View File

@ -6,5 +6,6 @@ export const load = (async (event) => {
...parentBreadcrumbs, ...parentBreadcrumbs,
{ name: 'Projects', path: '/projects' }, { name: 'Projects', path: '/projects' },
] ]
return { breadcrumbs } const page_title = 'Projects'
return { breadcrumbs, page_title }
}) satisfies LayoutServerLoad }) satisfies LayoutServerLoad

4
frontend/src/routes/(app)/projects/+page.svelte
Unescape Escape View File

@ -35,10 +35,6 @@
} }
</script> </script>
<svelte:head>
<title>Projects</title>
</svelte:head>
<div class="flex justify-start items-center p-4"> <div class="flex justify-start items-center p-4">
<Dialog.Root bind:open={dialogOpen}> <Dialog.Root bind:open={dialogOpen}>
<Dialog.Trigger <Dialog.Trigger

6
frontend/src/routes/(app)/settings/+layout.server.ts
Unescape Escape View File

@ -2,9 +2,13 @@ import type { LayoutServerLoad } from './$types'
export const load = (async (event) => { export const load = (async (event) => {
const { breadcrumbs: parentBreadcrumbs } = await event.parent() const { breadcrumbs: parentBreadcrumbs } = await event.parent()
const breadcrumbs = [ const breadcrumbs = [
...parentBreadcrumbs, ...parentBreadcrumbs,
{ name: 'Settings', path: '/settings' }, { name: 'Settings', path: '/settings' },
] ]
return { breadcrumbs }
const page_title = 'Settings'
return { breadcrumbs, page_title }
}) satisfies LayoutServerLoad }) satisfies LayoutServerLoad

4
frontend/src/routes/(app)/settings/+layout.svelte
Unescape Escape View File

@ -4,10 +4,6 @@
import SidebarNav from './(components)/sidebar-nav.svelte' import SidebarNav from './(components)/sidebar-nav.svelte'
</script> </script>
<svelte:head>
<title>Settings</title>
</svelte:head>
<div class="flex overflow-hidden flex-col p-10 h-auto"> <div class="flex overflow-hidden flex-col p-10 h-auto">
<div class="space-y-0.5"> <div class="space-y-0.5">
<h2 class="text-2xl font-bold tracking-tight">Settings</h2> <h2 class="text-2xl font-bold tracking-tight">Settings</h2>

3
frontend/src/routes/+layout.svelte
Unescape Escape View File

@ -3,10 +3,11 @@
import '../app.postcss' import '../app.postcss'
import { ModeWatcher } from 'mode-watcher' import { ModeWatcher } from 'mode-watcher'
import { ProgressBar } from '@prgm/sveltekit-progress-bar' import { ProgressBar } from '@prgm/sveltekit-progress-bar'
import { page } from '$app/stores'
</script> </script>
<svelte:head> <svelte:head>
<title>Link Shortener</title> <title>{$page.data.page_title || 'Link Shortener'}</title>
</svelte:head> </svelte:head>
<ModeWatcher /> <ModeWatcher />

Write Preview
Loading…
Cancel
Save