Improve styling, add logos and "updated" date to posts

pages/blog/second.md

@@ -1,6 +1,7 @@
 ---
 title: Second blog post
 date: 2023-07-09 11:40 AM
+updated: 2023-07-12 05:52 AM
 ---
 
 Franzen bodega boys gorpcore disrupt hell of viral wolf man braid food truck VHS yr. Gentrify tumblr meditation, art party try-hard vaporware direct trade echo park helvetica you probably haven't heard of them disrupt fam. Poutine portland gatekeep bespoke. Organic neutra jianbing, occupy distillery 3 wolf moon big mood bitters tumblr actually forage tattooed. DIY messenger bag listicle, sustainable bitters sus portland. Gentrify VHS freegan artisan solarpunk seitan bruh hoodie live-edge drinking vinegar vape iceland palo santo +1.

pages/revivals/finobe.md

@@ -1,6 +1,7 @@
 ---
 name: Finobe
 date: 2023-07-09 01:58 PM
+updated: 2023-07-12 05:36 AM
 logo: finobe.png
 clients:
     - 2012

src/global.sass

@@ -84,7 +84,6 @@ hr
 .bg-bg
 	background: #100f0e
 
-
 .content
 	@apply bg-a p-4 rounded-lg shadow-lg
 
@@ -92,6 +91,11 @@ hr
 	@media (prefers-color-scheme: light)
 		background: white
 
+.logo
+	filter: drop-shadow(0 0 5px #fffa) invert(0)
+	@media (prefers-color-scheme: light)
+		filter: drop-shadow(0 0 5px #000a)
+
 li ul
 	list-style-type: circle
 	margin: 0.3rem 0 0.3rem -1rem

src/lib/types.ts

@@ -0,0 +1,20 @@
+export type RevivalMetadata = {
+	name: string
+	date: Date
+	updated?: Date
+	logo?: string
+	clients: number[]
+	rating: {
+		website: number
+		community: number
+		clients: number
+		overall: number
+	}
+	overview: string
+}
+
+export type PostMetadata = {
+	title: string
+	date: Date
+	updated?: Date
+}

src/lib/when.ts

@@ -1,4 +1,7 @@
-export default (date: Date) => {
+export default (date: Date, updated = false) => {
+	const Text = updated ? "Updated" : "Published"
+	const text = updated ? "updated" : "published"
+
 	const d = new Date(date).toLocaleDateString("en-GB", {
 		year: "numeric",
 		month: "long",
@@ -6,5 +9,5 @@ export default (date: Date) => {
 		hour: "numeric",
 		minute: "numeric",
 	})
-	return d == "Invalid Date" ? "Not yet published" : `Published ${d}`
+	return d == "Invalid Date" ? `Not yet ${text}` : `${Text} ${d}`
 }

src/routes/about/+page.md

@@ -7,7 +7,7 @@
 # About
 
 <div class="content">
-The Revival Archive is dedicated to keeping track of active/defunct old brickbuilding private servers.
+<ins>The Revival Archive is dedicated to keeping track of active and defunct old brickbuilding private servers.</ins>
 
 We also review revivals on specific features such as:
 

src/routes/blog/+page.svelte

@@ -17,7 +17,7 @@
 		@light:hover:text-#555 bg-a rounded-3 durition-500 box-border
 		block text-white transition hover:shadow-xl">
 		<article class="mb-4 px-6 py-3">
-			<h2 class="my-2">{post.title}</h2>
+			<h2 class="mb-2 mt-1">{post.title}</h2>
 			<p class="my-2">
 				{when(post.date)}
 			</p>

src/routes/blog/+page.ts

@@ -1,3 +1,5 @@
+import type { PostMetadata } from "$lib/types"
+
 export async function load() {
 	const allPostFiles = import.meta.glob("../../../pages/blog/*.md")
 
@@ -7,13 +9,10 @@ export async function load() {
 				const { metadata } = (await allPostFiles[path]()) as any
 
 				return {
-					...(metadata as {
-						title: string
-						date: Date
-					}),
+					...(metadata as PostMetadata),
 					path: path.match(/(\w+)\.md/)?.[1],
 				}
-			}),
+			})
 		),
 	}
 }

src/routes/post/[post]/+page.svelte

@@ -17,7 +17,13 @@
 				<span class="mt-2 flex">
 					<h1 class="text-2rem m-0">{data.title}</h1>
 					<span class="mt-a ms-a mb-0.5">
-						Published {when(data.date)}
+						{when(data.date)}
+						{#if data.updated}
+							<br />
+							<em>
+								{when(data.updated, true)}
+							</em>
+						{/if}
 					</span>
 				</span>
 
@@ -29,6 +35,7 @@
 			</div>
 		</div>
 	</article>
+
 	{#if data.posts.length > 0}
 		<section class="w-120 xl:max-w-100 xl:ms-12 xl:mt-14">
 			<h2>Other posts</h2>

src/routes/post/[post]/+page.ts

@@ -1,5 +1,6 @@
 import { error } from "@sveltejs/kit"
 import { load as loadBlog } from "../../blog/+page"
+import type { PostMetadata } from "$lib/types"
 
 export async function load({ params }) {
 	let data: any
@@ -14,14 +15,11 @@ export async function load({ params }) {
 	// remove the current post from the list
 	posts.splice(
 		posts.findIndex(post => post.title == data.metadata.title),
-		1,
+		1
 	)
 
 	return {
-		...(data.metadata as {
-			title: string
-			date: Date
-		}),
+		...(data.metadata as PostMetadata),
 		content: data.default,
 		posts,
 	}

src/routes/reviews/+page.svelte

@@ -16,11 +16,23 @@
 		class="txt @light:text-dark hover:text-#ccc
 		@light:hover:text-#555 bg-a rounded-3 durition-500 box-border
 		block text-white transition hover:shadow-xl">
-		<article class="mb-4 px-6 py-3">
-			<h2 class="my-2">{review.name}</h2>
-			<p class="my-2">
-				{when(review.date)}
-			</p>
+		<article class="mb-4 flex p-3 ps-5">
+			{#if review.logo}
+				<img
+					src="/logos/{review.logo}"
+					class="logo my-a me-5 h-14"
+					alt="{review.name} Logo" />
+			{/if}
+			<div>
+				<h2 class="mb-2 mt-1">{review.name}</h2>
+				<p class="my-2">
+					{when(review.date)}
+				</p>
+			</div>
+			<div class="mt-a ms-a flex">
+				<span class="me-2">Rating:</span>
+				<Stars rating={review.rating.overall} />
+			</div>
 		</article>
 	</a>
 {/each}

src/routes/reviews/+page.ts

@@ -1,3 +1,5 @@
+import type { RevivalMetadata } from "$lib/types"
+
 export async function load() {
 	const allPostFiles = import.meta.glob("../../../pages/revivals/*.md")
 
@@ -7,18 +9,7 @@ export async function load() {
 				const { metadata } = (await allPostFiles[path]()) as any
 
 				return {
-					...(metadata as {
-						name: string
-						date: Date
-						clients: number[]
-						rating: {
-							website: number
-							community: number
-							clients: number
-							overall: number
-						}
-						overview: string
-					}),
+					...(metadata as RevivalMetadata),
 					path: path.match(/(\w+)\.md/)?.[1],
 				}
 			})

src/routes/revival/[revival]/+page.svelte

@@ -27,6 +27,12 @@
 					<h1 class="text-2rem m-0">{data.name}</h1>
 					<span class="mt-a ms-a mb-0.5">
 						{when(data.date)}
+						{#if data.updated}
+							<br />
+							<em>
+								{when(data.updated, true)}
+							</em>
+						{/if}
 					</span>
 				</span>
 
@@ -42,11 +48,16 @@
 					<table>
 						{#each Object.keys(ratingCategories) as category}
 							<tr>
-								<td class="pe-6">
+								<td
+									class:pt-4={category == "overall"}
+									class="pe-6">
 									{category.charAt(0).toUpperCase() +
 										category.slice(1)}
 								</td>
-								<Stars rating={ratingCategories[category]} />
+								<div class:pt-4={category == "overall"}>
+									<Stars
+										rating={ratingCategories[category]} />
+								</div>
 							</tr>
 						{/each}
 					</table>
@@ -54,6 +65,7 @@
 			</div>
 		</div>
 	</article>
+
 	{#if data.revivals.length > 0}
 		<section class="w-120 xl:max-w-100 xl:ms-12 xl:mt-14">
 			<h2>Other revivals</h2>
@@ -63,11 +75,19 @@
 					class="txt bg-a @light:text-dark hover:text-#ccc
 					@light:hover:text-#555 rounded-3 durition-500 box-border
 					block text-white transition hover:shadow-xl">
-					<article class="mb-4 px-6 py-3">
-						<h3 class="my-2">{revival.name}</h3>
-						<small class="pb-5">
-							{when(revival.date)}
-						</small>
+					<article class="mb-4 flex p-3 ps-5">
+						{#if revival.logo}
+							<img
+								src="/logos/{revival.logo}"
+								class="logo my-a me-5 h-14"
+								alt="{revival.name} Logo" />
+						{/if}
+						<div>
+							<h3 class="mb-2 mt-1">{revival.name}</h3>
+							<small>
+								{when(revival.date)}
+							</small>
+						</div>
 					</article>
 				</a>
 			{/each}
@@ -78,9 +98,4 @@
 <style lang="sass">
 	section a:hover
 		transform: translateY(-0.15rem)
-
-	.logo
-		filter: drop-shadow(0 0 5px #fffa) invert(0)
-		@media (prefers-color-scheme: light)
-			filter: drop-shadow(0 0 5px #000a)
 </style>

src/routes/revival/[revival]/+page.ts

@@ -1,5 +1,6 @@
 import { error } from "@sveltejs/kit"
 import { load as loadParent } from "../../revivals/+page"
+import type { RevivalMetadata } from "$lib/types"
 
 export async function load({ params }) {
 	let data: any
@@ -14,23 +15,11 @@ export async function load({ params }) {
 	// remove the current post from the list
 	revivals.splice(
 		revivals.findIndex(revival => revival.name == data.metadata.name),
-		1,
+		1
 	)
 
 	return {
-		...(data.metadata as {
-			name: string
-			date: Date
-			logo?: string
-			clients: number[]
-			rating: {
-				website: number
-				community: number
-				clients: number
-				overall: number
-			}
-			overview: string
-		}),
+		...(data.metadata as RevivalMetadata),
 		content: data.default,
 		revivals,
 	}

src/routes/revivals/+page.svelte

@@ -34,16 +34,28 @@
 			class="txt bg-#1f1c1d @light:bg-white rounded-2 card durition-500
 			@light:text-black box-border flex flex-col p-5 text-white
 			transition hover:shadow-xl">
-			<h2 class="m-0 mb-1">{revival.name}</h2>
-			<div class="flex flex-wrap text-white">
-				{#each revival.clients as year}
-					<span
-						class="{years[year]}
-						my-1 me-2 rounded-full px-2 py-0.5 text-sm">
-						{year}
-					</span>
-				{/each}
+			<div class="flex">
+				<div>
+					<h2 class="m-0 mb-1">{revival.name}</h2>
+					<div class="flex flex-wrap text-white">
+						{#each revival.clients as year}
+							<span
+								class="{years[year]} 
+								my-1 me-2 rounded-full px-2 py-0.5 text-sm">
+								{year}
+							</span>
+						{/each}
+					</div>
+				</div>
+
+				{#if revival.logo}
+					<img
+						src="/logos/{revival.logo}"
+						class="logo my-a ms-a h-14"
+						alt="{revival.name} Logo" />
+				{/if}
 			</div>
+
 			<div class="mb-30">
 				{@html revival.overview}
 			</div>

src/routes/revivals/+page.ts

@@ -1,3 +1,5 @@
+import type { RevivalMetadata } from "$lib/types"
+
 export async function load() {
 	const allPostFiles = import.meta.glob("../../../pages/revivals/*.md")
 
@@ -7,21 +9,10 @@ export async function load() {
 				const { metadata } = (await allPostFiles[path]()) as any
 
 				return {
-					...(metadata as {
-						name: string
-						date: Date
-						clients: number[]
-						rating: {
-							website: number
-							community: number
-							clients: number
-							overall: number
-						}
-						overview: string
-					}),
+					...(metadata as RevivalMetadata),
 					path: path.match(/(\w+)\.md/)?.[1],
 				}
-			}),
+			})
 		),
 	}
 }