dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-07-09 13:00:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #121 from EETagent/more_prod_fixes

Browse source 
(frontend) more prod fixes
This commit is contained in:
Vojtěch Jungmann 2023-01-03 15:53:14 +01:00 committed by GitHub
commit 1367ffcf7b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 370 additions and 306 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Dockerfile
View file

@ -10,4 +10,5 @@ COPY --from=builder /portfolio/target/release/portfolio /usr/local/bin/portfolio
VOLUME ["/portfolio"]
WORKDIR /portfolio
EXPOSE 8000
ENTRYPOINT ["portfolio"]

18
frontend/src/global.d.ts vendored
View file

@ -1,6 +1,6 @@
declare type FileDropEvent = import("filedrop-svelte/event").FileDropEvent;
declare type FileDropSelectEvent = import("filedrop-svelte/event").FileDropSelectEvent;
declare type FileDropDragEvent = import("filedrop-svelte/event").FileDropDragEvent;
declare type FileDropEvent = import('filedrop-svelte/event').FileDropEvent;
declare type FileDropSelectEvent = import('filedrop-svelte/event').FileDropSelectEvent;
declare type FileDropDragEvent = import('filedrop-svelte/event').FileDropDragEvent;
declare namespace svelte.JSX {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface HTMLAttributes<T> {
@ -11,8 +11,14 @@ declare namespace svelte.JSX {
onfiledialogcancel?: (event: CustomEvent<FileDropEvent> & { target: EventTarget & T }) => void;
onfiledialogclose?: (event: CustomEvent<FileDropEvent> & { target: EventTarget & T }) => void;
onfiledialogopen?: (event: CustomEvent<FileDropEvent> & { target: EventTarget & T }) => void;
onwindowfiledragenter?: (event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }) => void;
onwindowfiledragleave?: (event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }) => void;
onwindowfiledragover?: (event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }) => void;
onwindowfiledragenter?: (
event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }
) => void;
onwindowfiledragleave?: (
event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }
) => void;
onwindowfiledragover?: (
event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }
) => void;
}
}

4
frontend/src/lib/@api/admin.ts
View file

@ -123,9 +123,7 @@ export const apiFetchCandidate = async (id: number, fetchSsr?: Fetch): Promise<C
// SSR compatible
// List all candidates /admin/list/candidates
export const apiListCandidatesCSV = async (
fetchSsr?: Fetch,
): Promise<Blob> => {
export const apiListCandidatesCSV = async (fetchSsr?: Fetch): Promise<Blob> => {
const apiFetch = fetchSsr || fetch;
try {
const res = await apiFetch(API_URL + '/admin/list/candidates_csv', {

6
frontend/src/lib/components/admin/modal/CreateCandidateModal.svelte
View file

@ -26,6 +26,7 @@
try {
login = await apiCreateCandidate(data);
dispatch('created');
error = '';
} catch (e: unknown) {
console.error(e);
error = (e as ApiError).msg;
@ -47,7 +48,10 @@
{:else}
<h1 class="text-sspsBlue text-3xl font-semibold">Registrace nového uchazeče</h1>
{#if error}
<div class="my-2 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
<div
class="relative my-2 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
role="alert"
>
<span class="block sm:inline">{error}</span>
</div>
{/if}

68
frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
View file

@ -1,7 +1,12 @@
<script lang="ts">
import debounce from 'just-debounce-it';
import { apiDeltePortfolio, apiGetPortfolio, apiLogout, apiSubmitPortfolio } from '$lib/@api/candidate';
import {
apiDeltePortfolio,
apiGetPortfolio,
apiLogout,
apiSubmitPortfolio
} from '$lib/@api/candidate';
import Circles from '$lib/components/icons/Circles.svelte';
import { fetchSubmProgress, type Status } from '$lib/stores/portfolio';
import StatusNotificationBig from './StatusNotificationBig.svelte';
@ -61,19 +66,19 @@
};
const editDetails = async () => {
goto('/register?edit=true')
}
goto('/register?edit=true');
};
const logout = async () => {
await apiLogout();
goto("/auth/login");
}
goto('/auth/login');
};
</script>
<div class="card flex flex-col">
<div class="infoBar <2xl:flex-col flex flex-row-reverse">
<StatusNotificationBig {loading} {status} on:click={debounce(handleNotificationClick, 150)} />
<div class="mr-4 <2xl:mr-1">
<div class="<2xl:mr-1 mr-4">
<div on:click on:keydown class="flex flex-col">
<div class="<2xl:ml-auto <2xl:flex-row <2xl:my-2 flex flex-col">
<InfoButton
@ -101,15 +106,28 @@
sticky: true,
plugins: [sticky]
}}
class="<2xl:hidden hover:cursor-pointer">
<svg class="w-10 h-10 stroke-sspsBlueDark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
class="<2xl:hidden hover:cursor-pointer"
>
<svg
class="stroke-sspsBlueDark h-10 w-10"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/></svg
>
</span>
</div>
<slot />
</div>
</div>
{#if showDetails}
<div class="overflow-scroll flex justify-between">
<div class="flex justify-between overflow-scroll">
<div>
<div
use:tippy={{
@ -121,7 +139,10 @@
}}
class="mt-4 flex flex-col justify-between leading-10"
>
<span>Ev. č. přihlášky: <span class="font-bold">{$baseCandidateData.applicationId}</span></span>
<span
>Ev. č. přihlášky: <span class="font-bold">{$baseCandidateData.applicationId}</span
></span
>
<span>Obor: <span class="font-bold">{$candidateData.candidate.study}</span></span>
<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
<span
@ -133,10 +154,12 @@
></span
>
<span
>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span
>Rodné číslo: <span class="font-bold"
>{$candidateData.candidate.personalIdNumber}</span
></span
>
<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span>
<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span
>
</div>
<div
use:tippy={{
@ -167,8 +190,23 @@
sticky: true,
plugins: [sticky]
}}
on:click={(_) => editDetails()} on:keydown={(_) => editDetails()} class="mt-4 hover:cursor-pointer">
<svg class="w-10 h-10 stroke-sspsBlue" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
on:click={(_) => editDetails()}
on:keydown={(_) => editDetails()}
class="mt-4 hover:cursor-pointer"
>
<svg
class="stroke-sspsBlue h-10 w-10"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/></svg
>
</span>
</div>
{/if}
@ -182,7 +220,7 @@
@apply bg-[#f8fbfc];
@apply rounded-3xl;
@apply px-7 py-10 <2xl:px-5 <2xl:py-5;
@apply <2xl:px-5 <2xl:py-5 px-7 py-10;
@apply transition-all duration-300;
}

1
frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
View file

@ -68,7 +68,6 @@
clearInterval(dashAnimationInterval);
};
const onFileDrop = (dropped: Files) => {
console.log(dropped);
if (dropped.accepted.length > 0) {

17
frontend/src/lib/components/dashboard/InfoButton.svelte
View file

@ -88,8 +88,21 @@
}}
on:click={(_) => logout()}
on:keydown={(_) => logout()}
class="icon logoutIcon ml-1 hover:cursor-pointer">
<svg class="w-10 h-10 icon logoutIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
class="icon logoutIcon ml-1 hover:cursor-pointer"
>
<svg
class="icon logoutIcon h-10 w-10"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/></svg
>
</span>
<style lang="postcss">

3
frontend/src/lib/components/layout/SplitLayout.svelte
View file

@ -49,8 +49,7 @@
}
.view {
@apply z-10 overflow-scroll;
@apply rounded-3xl md:rounded-none;
@apply absolute top-0 right-0 bottom-0 left-0 m-auto h-[90vh] w-[90vw] md:top-auto md:bottom-auto md:left-auto md:m-0;
@apply absolute top-0 right-0 bottom-0 left-0 m-auto md:top-auto md:bottom-auto md:left-auto md:m-0;
@apply md:h-screen md:w-[50vw];
@apply md:my-auto;
@apply bg-white;

12
frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte
View file

@ -8,7 +8,7 @@
import type { PageServerData } from './$types';
import Table from '$lib/components/admin/table/Table.svelte';
import bacgkround from "$lib/assets/background.jpg";
import bacgkround from '$lib/assets/background.jpg';
export let data: PageServerData;
@ -87,7 +87,7 @@
} catch (e) {
console.log(e);
}
}
};
</script>
{#if createCandidateModal}
@ -98,8 +98,8 @@
{/if}
<div>
<header class="w-full h-14">
<img class="h-12 w-full object-cover filter blur-sm" src={bacgkround} alt="Background">
<header class="h-14 w-full">
<img class="h-12 w-full object-cover blur-sm filter" src={bacgkround} alt="Background" />
</header>
<div class="flex flex-row">
<div class="list fixed">
@ -116,12 +116,12 @@
<TextField on:keyup={search} bind:value={searchValue} placeholder="Hledat" />
<button
on:click={openCreateCandidateModal}
class="bg-gray-500 hover:bg-gray-600 ml-3 w-2/5 rounded-lg p-3 py-4 text-xl font-semibold text-white transition-colors duration-300"
class="ml-3 w-2/5 rounded-lg bg-gray-500 p-3 py-4 text-xl font-semibold text-white transition-colors duration-300 hover:bg-gray-600"
>Nový uchazeč</button
>
<button
on:click={downloadCSV}
class="bg-gray-500 hover:bg-gray-600 ml-3 w-2/5 rounded-lg p-3 py-4 text-xl font-semibold text-white transition-colors duration-300"
class="ml-3 w-2/5 rounded-lg bg-gray-500 p-3 py-4 text-xl font-semibold text-white transition-colors duration-300 hover:bg-gray-600"
>CSV</button
>
</div>

4
frontend/src/routes/(admin)/admin/auth/login/+page.svelte
View file

@ -34,7 +34,7 @@
<p class="text-sspsGray mt-8 text-center font-light">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<div class="mt-8 flex w-3/5 flex-col">
<div class="mt-8 flex w-4/5 flex-col lg:w-3/5">
<span>
<TextField bind:value={adminIdValue} placeholder="Admin id" type="number" />
</span>
@ -42,7 +42,7 @@
<PasswordField bind:value={adminPasswordValue} placeholder="Heslo" />
</span>
</div>
<div class="mt-8 w-3/5">
<div class="mt-8 w-4/5 lg:w-3/5">
<Submit value="Odeslat" on:click={login} />
</div>
</div>

2
frontend/src/routes/(candidate)/(authenticated)/+layout.server.ts
View file

@ -12,7 +12,7 @@ export const load: LayoutServerLoad = async ({ cookies, fetch }) => {
});
return {
whoami: whoami
}
};
} else {
throw redirect(302, '/auth/logout');
}

2
frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
View file

@ -82,7 +82,7 @@
{/each}
</div>
<div class="dashboard dashboardMobile">
<div class="name md:my-10 mx-auto w-[90%]">
<div class="name mx-auto w-[90%] md:my-10">
<DashboardInfoCard
status={getUploadStatus($submissionProgress.status)}
title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}

2
frontend/src/routes/(candidate)/(authenticated)/register/+page.server.ts
View file

@ -9,6 +9,6 @@ export const load: PageServerLoad = async ({ fetch }) => {
});
return {
candidate: details,
candidate: details
};
};

87
frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
View file

@ -35,7 +35,6 @@
export let data: PageData;
let details = data.candidate;
const formInitialValues = {
gdpr: false,
candidate: {
@ -140,11 +139,10 @@
// TODO: validate on admin dashboard, move somewhere
// TODO: nefunguje pro lidi nar. pred 1.1.1954 :D
const isPersonalIdNumberValid = (personalIdNumber: string): boolean => {
const idFmt = personalIdNumber
.split('/')
.join('');
const idFmt = personalIdNumber.split('/').join('');
const lastDigitCheck = Number(idFmt.slice(0, 9)) % 11 === Number(idFmt.at(-1)) ||
const lastDigitCheck =
Number(idFmt.slice(0, 9)) % 11 === Number(idFmt.at(-1)) ||
Number(idFmt.slice(0, 9)) % 11 === 10; // an edge case that could occur
const divisibleBy11 = Number(idFmt) % 11 === 0;
@ -153,25 +151,29 @@
} else {
return false;
}
}
};
const isPersonalIdNumberWithBirthdateValid = (personalIdNumber: string, birthdate: string): boolean => {
const isPersonalIdNumberWithBirthdateValid = (
personalIdNumber: string,
birthdate: string
): boolean => {
const dateFmt = birthdate
.split('.')
.map((x) => x.padStart(2, '0'))
.reverse()
.join('')
.slice(2);
const idFmt = personalIdNumber
.split('/')
.join('');
const idFmt = personalIdNumber.split('/').join('');
const divisionValid = isPersonalIdNumberValid(personalIdNumber);
const idMonth = Number(idFmt.slice(2, 4));
const dateMonth = Number(dateFmt.slice(2, 4));
const monthValid = idMonth === dateMonth || idMonth === dateMonth + 50 ||
idMonth === dateMonth + 20 || idMonth === dateMonth + 70;
const monthValid =
idMonth === dateMonth ||
idMonth === dateMonth + 50 ||
idMonth === dateMonth + 20 ||
idMonth === dateMonth + 70;
if (
idFmt.slice(0, 2) === dateFmt.slice(0, 2) &&
@ -183,7 +185,6 @@
} else {
return false;
}
};
const onSubmit = async (values: CandidateData) => {
@ -192,7 +193,12 @@
let oldValues = JSON.parse(JSON.stringify(values));
try {
if (values.candidate.citizenship === 'Česká republika') {
if (!isPersonalIdNumberWithBirthdateValid(values.candidate.personalIdNumber, values.candidate.birthdate)) {
if (
!isPersonalIdNumberWithBirthdateValid(
values.candidate.personalIdNumber,
values.candidate.birthdate
)
) {
alert('Rodné číslo neodpovídá oficiální specifikaci či datumu narození'); // TODO: alerts
throw new Error('Rodné číslo neodpovídá datumu narození');
}
@ -212,7 +218,6 @@
(x) => x.name !== '' && x.surname !== '' && x.email !== '' && x.telephone !== ''
);
await apiFillDetails(values);
goto('/dashboard');
} catch (e) {
@ -220,7 +225,7 @@
console.error('error while submitting data: ' + e);
}
}
}
};
const { form, errors, handleSubmit, handleChange } = createForm({
initialValues: formInitialValues,
@ -292,19 +297,16 @@
};
const formatTelephone = (telephone: string) => {
return '+' + telephone
.match(/[0-9]{1,3}/g)!
.join(' ');
}
return '+' + telephone.match(/[0-9]{1,3}/g)!.join(' ');
};
if (details !== undefined) {
details.candidate.birthdate = details.candidate.birthdate
.split('-')
.reverse()
.join('.');
details.candidate.birthdate = details.candidate.birthdate.split('-').reverse().join('.');
details.candidate.telephone = formatTelephone(details.candidate.telephone);
details.parents.map((x) => x.telephone = x.telephone != '' ? formatTelephone(x.telephone) : '');
details.parents.map(
(x) => (x.telephone = x.telephone != '' ? formatTelephone(x.telephone) : '')
);
form.set({
gdpr: true,
candidate: {
@ -315,34 +317,34 @@
...details.parents[0]
},
{
...details.parents[1] ?? {
...(details.parents[1] ?? {
name: '',
surname: '',
email: '',
telephone: ''
}
})
}
]
});
pageIndex = 1; // skip gdpr page
pageTexts[1] = 'Úprava osobních údajů'
pageTexts[1] = 'Úprava osobních údajů';
}
</script>
<SplitLayout>
<div class="form relative">
<div class="overflow-scroll h-[65%] md:h-auto absolute bottom-3/12 flex flex-col w-full">
<div class="h-32 w-32 <md:hidden self-center mb-4">
<div class="bottom-3/12 absolute flex w-full flex-col overflow-scroll md:h-auto">
<div class="<md:h-24 <md:w-24 mb-4 h-32 w-32 self-center">
<SchoolBadge />
</div>
<form on:submit={handleSubmit} id="triggerForm" class="invisible hidden"></form>
<form on:submit={handleSubmit} id="triggerForm" class="invisible hidden" />
{#if pageIndex === 0}
<form on:submit={handleSubmit}>
<h1 class="title mt-8">{pageTexts[0]}</h1>
<p class="description mt-8 block text-center">
V rámci portálu pro přijímací řízení zpracováváme mnoho osobních údajů. Proto je nutný Váš
souhlas s jejich zpracováním. O bezpečnosti zpracování Vašich osobních údajů si můžete přečíst
V rámci portálu pro přijímací řízení zpracováváme mnoho osobních údajů. Proto je nutný
Váš souhlas s jejich zpracováním. O bezpečnosti zpracování Vašich osobních údajů si
můžete přečíst
<a href="/bezpecnost" class="text-sspsBlue underline"> zde</a>.
</p>
<div class="field">
@ -508,7 +510,8 @@
{:else if pageIndex === 5}
<h1 class="title mt-8">{pageTexts[5]}</h1>
<p class="description mt-8 block text-center">
Zadejte prosím své občanství, rodné číslo, či jeho alternativu Vaší země a obor na který se hlásíte.
Zadejte prosím své občanství, rodné číslo, či jeho alternativu Vaší země a obor na který
se hlásíte.
</p>
<div class="flex w-full flex-row md:flex-col">
<span class="field">
@ -521,7 +524,11 @@
/>
</span>
<span class="field ml-2 md:ml-0">
<TextField on:change={handleChange} type="text" placeholder="Evidenční číslo přihlášky" />
<TextField
on:change={handleChange}
type="text"
placeholder="Evidenční číslo přihlášky"
/>
</span>
</div>
<div class="field flex items-center justify-center">
@ -552,7 +559,7 @@
</div>
{/if}
</div>
<div class="controls w-full absolute bottom-1/12">
<div class="controls bottom-1/12 absolute w-full">
<div class="field">
<Submit
on:click={async (e) => {
@ -570,7 +577,7 @@
/>
</div>
<div class="mt-4 md:mt-8 flex flex-row justify-center">
<div class="mt-4 flex flex-row justify-center md:mt-8">
{#each Array(pageCount + 1) as _, i}
<button
class:dotActive={i === pageIndex}
@ -594,7 +601,7 @@
<style lang="postcss">
.field {
@apply mt-4 md:mt-8 w-full;
@apply mt-4 w-full md:mt-8 lg:mx-auto lg:w-4/5;
}
.form {
@apply flex flex-col;
@ -618,6 +625,6 @@
@apply text-gray-500;
}
.title {
@apply text-sspsBlue text-4xl font-semibold text-center;
@apply text-sspsBlue text-center text-4xl font-semibold;
}
</style>

7
frontend/src/routes/(candidate)/auth/login/+page.svelte
View file

@ -21,12 +21,13 @@
<SchoolBadge />
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Přihlášení</h1>
<p class="text-sspsGray my-8 text-center font-light">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
Evidenční číslo je jedinečné číslo přidělené uchazeči, které slouží k jeho identifikaci<br /> a
přihlášení se do systému.
</p>
<div class="w-3/5">
<div class="w-4/5 lg:w-3/5">
<TextField bind:value={applicationValue} placeholder="Ev. číslo" type="number" />
</div>
<div class="mt-8 w-3/5">
<div class="mt-8 w-4/5 lg:w-3/5">
<Submit on:click={redirectToCode} value="Odeslat" />
</div>
</div>

6
frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
View file

@ -123,14 +123,14 @@
.modal {
@apply flex flex-col items-center justify-center;
@apply mx-auto my-auto;
@apply h-[90vh] w-[90vw] md:h-4/5 md:w-4/5;
@apply rounded-3xl;
@apply h-full w-full md:h-4/5 md:w-4/5;
@apply md:rounded-3xl;
@apply bg-white;
}
input {
@apply text-sspsBlue text-center font-semibold;
@apply transition-colors duration-300;
@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 md:caret-transparent shadow-lg outline-none;
@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 shadow-lg outline-none md:caret-transparent;
}
.separater {
@apply bg-sspsBlue mr-2 hidden h-2 w-8 md:block;

2
frontend/src/routes/+page.svelte
View file

@ -1,2 +0,0 @@
<h1 class="text-6xl">Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>