Updated header

wjtje · Nov 14, 2024 · d2d25c7 · d2d25c7
1 parent ece7e71
commit d2d25c7
Show file tree

Hide file tree

Showing 15 changed files with 515 additions and 211 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
 		"git": "npm ci && npx prisma migrate deploy && npx prisma generate"
 	},
 	"dependencies": {
+		"@dotenvx/dotenvx": "^1.23.0",
+		"@prisma/client": "^5.22.0",
 		"@zip.js/zip.js": "^2.7.53",
 		"gemoji": "^8.1.0",
 		"github-colors": "github:ozh/github-colors",

diff --git a/src/app.css b/src/app.css
@@ -3,12 +3,3 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Global body */
-body {
-	@apply gdark:bg-zinc-900 gdark:text-white transition-colors overflow-x-hidden;
-}
-
-/* Global headings */
-h1 {
-	@apply text-4xl pb-6;
-}
diff --git a/src/lib/components/common/MiniPost.svelte b/src/lib/components/common/MiniPost.svelte
@@ -2,11 +2,14 @@
 	import { locale } from '$lib/i18n';
 	import { DateTime } from 'luxon';
 	import Markdown from 'svelte-exmarkdown';
+	import { scale } from 'svelte/transition';
 
 	export let image: string = undefined;
 	export let date: Date | string = undefined;
 	export let mainTitle: string = undefined;
 	export let subTitle: string = undefined;
+	export let index: number = 0;
+	export let url: string | undefined = undefined;
 
 	// Remove images from the subtitle
 	$: subtitleClean = String(subTitle).replaceAll(/!\[[^\]]*\]\((.*?)\s*("(?:.*[^"])")?\s*\)/g, '');
@@ -16,7 +19,7 @@
 	});
 </script>
 
-<section>
+<section in:scale={{ duration: 400, delay: index * 50 }}>
 	<div class="text">
 		<slot name="tags" />
 

diff --git a/src/lib/components/common/PageTransition.svelte b/src/lib/components/common/PageTransition.svelte
@@ -29,9 +29,9 @@
 
 <div class="content">
 	{#key currentPage}
-		<main in:fly={{ x: -5, duration, delay: duration }} out:fly={{ x: 5, duration }}>
+		<div in:fly={{ x: -5, duration, delay: duration }} out:fly={{ x: 5, duration }}>
 			<slot />
-		</main>
+		</div>
 	{/key}
 
 	{#if isLoading}
@@ -41,7 +41,7 @@
 
 <style lang="scss">
 	div.content {
-		@apply grid justify-items-center;
+		@apply grid;
 
 		& > * {
 			grid-column-start: 1;
@@ -57,10 +57,6 @@
 		transform-origin: left;
 	}
 
-	main {
-		@apply container mx-auto py-4 lg:py-8 px-4 lg:px-8 w-screen;
-	}
-
 	@keyframes load-right {
 		0% {
 			left: -100vw;

diff --git a/src/lib/components/home/ActivityList.svelte b/src/lib/components/home/ActivityList.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { locale, t } from '$lib/i18n';
-	import { scale } from 'svelte/transition';
 	import MiniPostLoader from '$lib/components/common/MiniPostLoader.svelte';
 	import MiniPost from '../common/MiniPost.svelte';
 
@@ -24,9 +23,7 @@
 		<h3>{$t('home.dataLoadingFailed', { status: response.status })}</h3>
 	{/if}
 	{#each response.events as event, i}
-		<div in:scale={{ duration: 400, delay: i * 50 }}>
-			<MiniPost {...event} />
-		</div>
+		<MiniPost {...event} index={i} />
 	{/each}
 {:catch error}
 	<h3>{$t('home.noData', { status: error.message })}</h3>

diff --git a/src/lib/components/home/Profile.svelte b/src/lib/components/home/Profile.svelte
@@ -4,34 +4,44 @@
 </script>
 
 <section>
-	<img
-		src="https://www.gravatar.com/avatar/1741643deaafad86bd0bf2a4fb481366?s=200&d=mp"
-		alt="headshot"
-	/>
-
-	<h1>{$t('home.name')}</h1>
-
-	<p>
-		{$t('home.about', {
-			birthday: env.PUBLIC_BIRTHDAY
-		})}
-	</p>
+	<div class="main">
+		<div class="layout">
+			<img
+				src="https://www.gravatar.com/avatar/1741643deaafad86bd0bf2a4fb481366?s=200&d=mp"
+				alt="headshot"
+			/>
+
+			<h1>{$t('home.name')}</h1>
+
+			<p>
+				{$t('home.about', {
+					birthday: env.PUBLIC_BIRTHDAY
+				})}
+			</p>
+		</div>
+	</div>
 </section>
 
 <style lang="scss">
 	section {
+		background-image: url('https://cdn.wjtje.dev/21d46a4a-78ce-43d8-80c9-e7c0cf673eec.jpeg');
+		background-size: cover;
+		background-position: center;
+	}
+
+	div.layout {
 		@apply grid grid-cols-[8rem_1fr] grid-rows-[8rem_1fr] md:grid-rows-2 gap-4 items-center md:items-start;
 
 		img {
 			@apply rounded-full aspect-square h-32 md:row-span-2;
 		}
 
 		h1 {
-			@apply md:self-end pb-0;
+			@apply md:self-end pb-0 text-white;
 		}
 
 		p {
-			@apply text-zinc-900 gdark:text-zinc-100 col-span-2 md:col-span-1;
+			@apply text-zinc-100 col-span-2 md:col-span-1;
 		}
 	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -73,4 +73,19 @@
 			@apply text-sm text-zinc-600 hover:text-zinc-800 gdark:text-zinc-400 gdark:hover:text-zinc-200;
 		}
 	}
+
+	/* Global body */
+	:global(body) {
+		@apply gdark:bg-zinc-900 gdark:text-white transition-colors overflow-x-hidden;
+	}
+
+	/* Global headings */
+	:global(h1) {
+		@apply text-4xl pb-6;
+	}
+
+	:global(main),
+	:global(.main) {
+		@apply container mx-auto py-4 lg:py-8 px-4 lg:px-8 w-screen;
+	}
 </style>
diff --git a/src/routes/[lang]/+page.svelte b/src/routes/[lang]/+page.svelte
@@ -17,19 +17,21 @@
 
 <Profile />
 
-<section class="activity">
-	<section class="github">
-		<h2>{$t('home.ghactivity')}</h2>
-
-		<ActivityList activityName="github" />
-	</section>
-
-	<section class="osm">
-		<h2>{$t('home.osmactivity')}</h2>
-
-		<ActivityList activityName="osm" />
+<main>
+	<section class="activity">
+		<section class="github">
+			<h2>{$t('home.ghactivity')}</h2>
+
+			<ActivityList activityName="github" />
+		</section>
+
+		<section class="osm">
+			<h2>{$t('home.osmactivity')}</h2>
+
+			<ActivityList activityName="osm" />
+		</section>
 	</section>
-</section>
+</main>
 
 <style lang="scss">
 	:global(section) {

diff --git a/src/routes/[lang]/blog/[page]/+page.svelte b/src/routes/[lang]/blog/[page]/+page.svelte
@@ -19,37 +19,39 @@
 	<title>{$t('common.title')} - {$t('blog.title')}</title>
 </svelte:head>
 
-<h1>{$t('blog.title')}</h1>
-
-{#if posts.length > 0}
-	{#if ready}
-		{#each posts as post, i}
-			<a
-				in:scale={{ duration: 400, delay: i * 50 + 100 }}
-				href={`/${$locale}/blog/post/${post.slug}`}
-			>
-				<MiniPost date={post.createdAt} mainTitle={post.title} subTitle={post.preview}>
-					<a
-						aria-hidden="true"
-						tabindex="-1"
-						href={`/${$locale}/blog/post/${post.slug}`}
-						slot="subTitle">{$t('blog.more')}</a
-					>
-				</MiniPost>
-			</a>
-		{/each}
-
-		<PageSelector
-			currentPage={data.currentPage}
-			pageCount={data.totalPages}
-			on:pageChange={(event) => {
-				goto(`/${$locale}/blog/${event.detail.page}`);
-			}}
-		/>
+<main>
+	<h1>{$t('blog.title')}</h1>
+
+	{#if posts.length > 0}
+		{#if ready}
+			{#each posts as post, i}
+				<a
+					in:scale={{ duration: 400, delay: i * 50 + 100 }}
+					href={`/${$locale}/blog/post/${post.slug}`}
+				>
+					<MiniPost date={post.createdAt} mainTitle={post.title} subTitle={post.preview}>
+						<a
+							aria-hidden="true"
+							tabindex="-1"
+							href={`/${$locale}/blog/post/${post.slug}`}
+							slot="subTitle">{$t('blog.more')}</a
+						>
+					</MiniPost>
+				</a>
+			{/each}
+
+			<PageSelector
+				currentPage={data.currentPage}
+				pageCount={data.totalPages}
+				on:pageChange={(event) => {
+					goto(`/${$locale}/blog/${event.detail.page}`);
+				}}
+			/>
+		{/if}
+	{:else}
+		<p>{$t('blog.noPosts')}</p>
 	{/if}
-{:else}
-	<p>{$t('blog.noPosts')}</p>
-{/if}
+</main>
 
 <style lang="scss">
 	a {

diff --git a/src/routes/[lang]/blog/post/[slug]/+page.svelte b/src/routes/[lang]/blog/post/[slug]/+page.svelte
@@ -25,21 +25,23 @@
 	<meta name="og:description" content={post.preview} />
 	<meta name="og:image" content={post.image ?? ''} />
 	<!-- Custom tags for Mastodon -->
-	<meta name="fediverse:creator" content="@[email protected]">
+	<meta name="fediverse:creator" content="@[email protected]" />
 </svelte:head>
 
-<h1>{post.title}</h1>
+<main>
+	<h1>{post.title}</h1>
 
-<span
-	>{$t('blog.written_by', {
-		author: post.owner.name,
-		date: date
-	})}</span
->
+	<span
+		>{$t('blog.written_by', {
+			author: post.owner.name,
+			date: date
+		})}</span
+	>
 
-<div class="markdown">
-	<Markdown md={post.body} plugins={[gfmPlugin]} />
-</div>
+	<div class="markdown">
+		<Markdown md={post.body} plugins={[gfmPlugin]} />
+	</div>
+</main>
 
 <style lang="scss">
 	h1 {