Add titles and better metadata to page head
This commit is contained in:
Mihkel Martin Kasterpalu
parent
3c0b3df3b2
commit
c7d7ca349d
10 changed files with 83 additions and 11 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="et">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
|
||||||
13
src/lib/config.ts
Normal file
13
src/lib/config.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import type { GamesObj } from './types';
|
||||||
|
|
||||||
|
export const siteName = 'Stuff.Kasterpalu';
|
||||||
|
|
||||||
|
export const baseURL = 'https://stuff.kasterpalu.ee';
|
||||||
|
|
||||||
|
export const games: GamesObj = {
|
||||||
|
'/pakubiiti': {
|
||||||
|
name: 'Paku biiti',
|
||||||
|
image: '',
|
||||||
|
description: 'Sorteeri kolme suvalise muusika albumi pealkiri, artistid ja pilt.'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -10,3 +10,11 @@ export type Player = {
|
||||||
highscore: number;
|
highscore: number;
|
||||||
playing: boolean;
|
playing: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type Game = {
|
||||||
|
name: string;
|
||||||
|
image: string;
|
||||||
|
description: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type GamesObj = Record<string, Game>;
|
||||||
|
|
|
||||||
|
|
@ -91,7 +91,7 @@
|
||||||
</AlertDialog.Content>
|
</AlertDialog.Content>
|
||||||
</AlertDialog.Root>
|
</AlertDialog.Root>
|
||||||
|
|
||||||
<header class="mb-24 flex flex-col items-center font-title">
|
<header class="font-title mb-24 flex flex-col items-center">
|
||||||
<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">Paku biiti</h1>
|
<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">Paku biiti</h1>
|
||||||
<p class="text-2xl font-semibold text-muted-foreground">
|
<p class="text-2xl font-semibold text-muted-foreground">
|
||||||
Lohista kokku õiged albumi <span class="text-red-600 dark:text-red-400">nimed</span>,
|
Lohista kokku õiged albumi <span class="text-red-600 dark:text-red-400">nimed</span>,
|
||||||
20
src/routes/(games)/+layout.server.ts
Normal file
20
src/routes/(games)/+layout.server.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import type { LayoutServerData } from './$types';
|
||||||
|
import { games } from '$lib/config';
|
||||||
|
|
||||||
|
export const load: LayoutServerData = async ({ url }) => {
|
||||||
|
if (!url?.pathname) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const game = games[url.pathname];
|
||||||
|
|
||||||
|
if (!game) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: game.name,
|
||||||
|
description: game.description,
|
||||||
|
image: game.image
|
||||||
|
};
|
||||||
|
};
|
||||||
23
src/routes/(games)/+layout.svelte
Normal file
23
src/routes/(games)/+layout.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { siteName } from '$lib/config.js';
|
||||||
|
|
||||||
|
let { children, data } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
{#if data.name}
|
||||||
|
<title>{data.name} | {siteName}</title>
|
||||||
|
<meta property="og:title" content={data.name + ' | ' + siteName} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if data.desctiption}
|
||||||
|
<meta name="description" content={data.description} />
|
||||||
|
<meta property="og:description" content={data.description} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if data.image}
|
||||||
|
<meta property="og:image" content={data.image} />
|
||||||
|
{/if}
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
{@render children()}
|
||||||
|
|
@ -1,21 +1,25 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
const games = [
|
import { games, siteName, baseURL } from '$lib/config';
|
||||||
{
|
|
||||||
name: 'Paku biiti',
|
|
||||||
image: '',
|
|
||||||
href: 'pakubiiti'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header class="mb-24 flex flex-col items-center font-title">
|
<svelte:head>
|
||||||
|
<title>{siteName}</title>
|
||||||
|
<meta property="og:title" content={siteName} />
|
||||||
|
|
||||||
|
<meta name="description" content="Minimängud ja muud huvitavat." />
|
||||||
|
<meta property="og:description" content="Minimängud ja muud huvitavat." />
|
||||||
|
|
||||||
|
<meta property="og:image" content={baseURL + '/favicon.svg'} />
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<header class="font-title mb-24 flex flex-col items-center">
|
||||||
<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">
|
<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">
|
||||||
stuff.kasterpalu.ee
|
stuff.kasterpalu.ee
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-2xl font-semibold text-muted-foreground">Minimängud ja muud huvitavat</p>
|
<p class="text-2xl font-semibold text-muted-foreground">Minimängud ja muud huvitavat</p>
|
||||||
</header>
|
</header>
|
||||||
<main class="grid w-full max-w-4xl justify-items-center">
|
<main class="grid w-full max-w-4xl justify-items-center">
|
||||||
{#each games as { name, image, href }}
|
{#each Object.entries(games) as [href, { image, name }]}
|
||||||
<a
|
<a
|
||||||
class="shadow-sharp flex aspect-[4/1] w-full max-w-sm items-center justify-center rounded-xl border-2 border-current bg-contain bg-no-repeat transition-shadow transition-transform"
|
class="shadow-sharp flex aspect-[4/1] w-full max-w-sm items-center justify-center rounded-xl border-2 border-current bg-contain bg-no-repeat transition-shadow transition-transform"
|
||||||
style="background-image: url('{image}')"
|
style="background-image: url('{image}')"
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,10 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<meta name="author" content="Mihkel Martin Kasterpalu" />
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
<ModeWatcher />
|
<ModeWatcher />
|
||||||
|
|
||||||
<header class="absolute top-0 flex w-full justify-between px-8 py-6">
|
<header class="absolute top-0 flex w-full justify-between px-8 py-6">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue