news: add author picture, nicer looks (#71)

src/content/news/2ya.md

@@ -1,8 +1,10 @@
 ---
 title: Hyprland 0.37.0 + 2 year anniversary!
 date: 1710548497
-author: Vaxry
+author:
-authorLink: https://github.com/vaxerski/
+  name: Vaxry
+  link: https://github.com/vaxerski/
+  picture: /imgs/profile_pictures/vaxry.webp
 ---
 
 It's march 16th, and as such we're celebrating the 2 year anniversary of Hyprland!

src/content/news/contestWinners.md

@@ -1,8 +1,10 @@
 ---
 title: Wallpaper contest winners
 date: 1706570428
-author: Vaxry
+author:
-authorLink: https://github.com/vaxerski/
+  name: Vaxry
+  link: https://github.com/vaxerski/
+  picture: /imgs/profile_pictures/vaxry.webp
 ---
 
 The competition has ended, we got some great submissions, and have finally managed to narrow down 3 winners.

src/content/news/independentHyprland.md

@@ -1,8 +1,10 @@
 ---
 title: Hyprland is now fully independent!
 date: 1721559307
-author: Vaxry
+author:
-authorLink: https://github.com/vaxerski/
+  name: Vaxry
+  link: https://github.com/vaxerski/
+  picture: /imgs/profile_pictures/vaxry.webp
 ---
 
 With great pleasure may I announce that our move off of wlroots is now complete and [MR 6608](https://github.com/hyprwm/Hyprland/pull/6608) is

src/content/news/update40.md

@@ -1,8 +1,10 @@
 ---
 title: A Hyprland mega-release 0.40.0
 date: 1714838440
-author: Vaxry
+author:
-authorLink: https://github.com/vaxerski/
+  name: Vaxry
+  link: https://github.com/vaxerski/
+  picture: /imgs/profile_pictures/vaxry.webp
 ---
 
 Changing over 15,000 lines of code, the Hyprland 0.40.0 update has finally dropped. This

src/content/news/update41.md

@@ -1,8 +1,10 @@
 ---
 title: A huge Hyprland release 0.41.0
 date: 1718030074
-author: Vaxry
+author:
-authorLink: https://github.com/vaxerski/
+  name: Vaxry
+  link: https://github.com/vaxerski/
+  picture: /imgs/profile_pictures/vaxry.webp
 ---
 
 Just as we thought 0.40.0 was a mega-release, we now proudly present 0.41.0, which is almost twice as sizeable.

src/content/news/update43.md

@@ -1,8 +1,10 @@
 ---
 title: Hyprland 0.43.0 released!
 date: 1725814920
-author: Vaxry
+author:
-authorLink: https://github.com/vaxerski/
+  name: Vaxry
+  link: https://github.com/vaxerski/
+  picture: /imgs/profile_pictures/vaxry.webp
 ---
 
 Quite a while after 0.42.0, 0.43.0 has finally been released.

src/content/news/update44.md

@@ -1,8 +1,10 @@
 ---
 title: Hyprland 0.44.0 is out!
 date: 1728213146
-author: Vaxry
+author:
-authorLink: https://github.com/vaxerski/
+  name: Vaxry
+  link: https://github.com/vaxerski/
+  picture: /imgs/profile_pictures/vaxry.webp
 ---
 
 0.44.0 is finally upon us!

src/content/news/wallpaperContest.md

@@ -1,8 +1,10 @@
 ---
 title: We're hosting a Hyprland wallpaper contest!
 date: 1702852617
-author: Vaxry
+author:
-authorLink: https://github.com/vaxerski/
+  name: Vaxry
+  link: https://github.com/vaxerski/
+  picture: /imgs/profile_pictures/vaxry.webp
 ---
 
 To all artists, designers and enjoyers of graphics: this is a piece of news for you!

src/lib/Helper.mjs

@@ -120,7 +120,7 @@ export function getRandom(array) {
 	return array.at(Math.floor(Math.random() * array.length))
 }
 
-export function formatDate(date, dateStyle = 'medium', locales = 'en') {
+export function formatDate(date, dateStyle = 'long', locales = 'en') {
 	const dateToFormat = new Date(date)
 
 	const dateFormatter = new Intl.DateTimeFormat(locales, { dateStyle })

src/routes/hall_of_fame/+page.svelte

@@ -8,6 +8,8 @@
 	export let data
 </script>
 
+<div class="fancy-top-gradient" />
+
 <section>
 	<div class="hero-wrapper">
 		<div class="japanese" aria-hidden="true">
@@ -16,7 +18,6 @@
 				'ベンソンハウス-デイアングルオン：地面にスニーカー。カメラが上に移動して、バリーベンソンのベッドルームアングルを表示します。バリーの手がクローゼットの中でさまざまなセーターをめくっています。バリーイエローブラック、イエローブラック、イエローブラック、イエローブラック、イエローブラック、イエローブラック...うーん、ブラックとイエロー...アングル：バリーが選んだセーターを着て、鏡を見て。バリー（続き）ええ、少し振りましょう彼は黒と黄色のものを選びます。彼はそれから流しに行き、蜂蜜の容器を外し、髪に蜂蜜を入れます。彼は口の中でいくつか潮吹きしてうがいをします。それから彼はボトルの蓋を外し、デオドラントのようにいくつかを転がします。カット'
 			</div>
 		</div>
-		<div class="gradient_" />
 		<Title>
 			<TitleHeading slot="title" class="">Hall of Fame</TitleHeading>
 			<TitleSubtile slot="subtitle" class="class-w-[40ch]">
@@ -69,15 +70,6 @@
 		margin-bottom: min(-10vh, -6rem);
 	}
 
-	.gradient_ {
-		position: absolute;
-		inset: 0;
-		z-index: -1000;
-		mask-image: radial-gradient(70% 50% at 50% 0%, white 70%, transparent);
-		background: url('/imgs/grain.webp'),
-			radial-gradient(70% 50% at 50% 0%, theme(colors.cyan.500 / 40%), transparent);
-	}
-
 	.japanese {
 		position: relative;
 		width: 100%;

src/routes/news/+page.svelte

@@ -68,6 +68,8 @@
 	<title>Hyprland News</title>
 </svelte:head>
 
+<div class="fancy-top-gradient" />
+
 <section>
 	<header class="header">
 		<pre class="spinner-wrapper" bind:this={asciiElement} />
@@ -89,7 +91,7 @@
 
 <style lang="postcss">
 	section {
-		@apply relative flex min-h-screen flex-col items-center justify-center gap-14 overflow-hidden px-6;
+		@apply relative flex min-h-screen flex-col items-center justify-center gap-14 overflow-hidden px-6 lg:px-12 xl:px-12;
 	}
 
 	.header {
@@ -107,6 +109,7 @@
 	}
 
 	.spinner-wrapper {
+		mix-blend-mode: color-dodge;
 		@apply mb-4 flex items-center justify-center bg-gradient-to-tr from-blue-500/0 to-cyan-500 bg-clip-text text-transparent animate-in fade-in-0;
 		animation-duration: 2000ms;
 		font-size: min(1vh, 1rem);

src/routes/news/[slug]/+page.svelte

@@ -3,6 +3,7 @@
 	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
 	import Title from '$lib/components/Title/TitleWrapper.svelte'
 	import NewsThumb from '$lib/components/news-thumb.svelte'
+	import clsx from 'clsx'
 
 	export let data
 </script>
@@ -13,26 +14,45 @@
 	<meta property="og:title" content={data.meta.title} />
 </svelte:head>
 
+<div class="fancy-top-gradient fad animate-in" />
+
 <article
-	class="mx-auto mt-navbar flex max-w-4xl flex-col gap-6 px-6 pt-20 md:gap-8 md:px-8 lg:mt-32 lg:gap-14"
+	class="mx-auto mt-navbar flex max-w-4xl flex-col gap-4 px-6 pt-20 md:gap-8 md:px-8 lg:mt-32 lg:gap-14"
+>
+	<hgroup
+		class="flex flex-col items-start gap-8 duration-1000 animate-in fade-in-0 slide-in-from-bottom-4"
 	>
-	<hgroup class="flex flex-col gap-5 duration-1000 animate-in fade-in-0 slide-in-from-bottom-4">
 		<h1 class="text-4xl font-bold lg:text-6xl">{data.meta.title}</h1>
-		<div class="font-medium text-slate-300">
+		<div class="flex items-center gap-8 text-base font-medium text-slate-400">
-			<time datetime={new Date(data.meta.date * 1000).toISOString()}
-				>Published on {formatDate(data.meta.date * 1000)}</time
-			>
 			{#if data.meta.author}
-				by
+				<svelte:element
-				{#if data.meta.authorLink}
+					this={data.meta.author.link ? 'a' : 'div'}
-					<a href={data.meta.authorLink} rel="authro" target="_blank" class="hover:underline"
+					href={data.meta.author.link}
-						>{data.meta.author}</a
+					rel="author"
+					target="_blank"
+					class={clsx(
+						'flex items-center gap-3 rounded-full bg-slate-700/50 px-4 py-2 text-base font-medium text-slate-300 ',
+						data.meta.author.link && 'transition-colors hover:bg-slate-700/70 hover:text-slate-200'
+					)}
 				>
-				{:else}
+					{#if data.meta.author.picture}
-					{data.meta.author}
+						<img
+							class="size-10 rounded-full"
+							src={data.meta.author.picture}
+							alt={`Picture of ${data.meta.author.name}`}
+						/>
 					{/if}
+					<div class="">
+						{#if data.meta.author.name}
+							by {data.meta.author.name}
 						{/if}
 					</div>
+				</svelte:element>
+			{/if}
+			<time class="" datetime={new Date(data.meta.date * 1000).toISOString()}
+				>{formatDate(data.meta.date * 1000)}</time
+			>
+		</div>
 	</hgroup>
 
 	<!-- Post -->

src/routes/styles.css

@@ -76,3 +76,13 @@ body {
     0%,50%,to { opacity: 0 }
     66.667%,83.333% { opacity: 1 }
 }
+
+.fancy-top-gradient {
+	--sizethis: 70% 800px at 50% 0%;
+	position: absolute;
+	inset: 0;
+	z-index: -1000;
+	mask-image: radial-gradient(var(--sizethis), white 70%, transparent);
+	background: url('/imgs/grain.webp'),
+		radial-gradient(var(--sizethis), theme(colors.cyan.500 / 40%), transparent);
+}