Add revival index page and improve styling

package.json

@@ -32,6 +32,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@material/web": "1.0.0-pre.12",
 		"@unocss/extractor-svelte": "^0.53.4",
 		"unocss": "^0.53.4"
 	}

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@material/web':
+    specifier: 1.0.0-pre.12
+    version: 1.0.0-pre.12
   '@unocss/extractor-svelte':
     specifier: ^0.53.4
     version: 0.53.4
@@ -300,6 +303,24 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
 
+  /@lit-labs/ssr-dom-shim@1.1.1:
+    resolution: {integrity: sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==}
+    dev: false
+
+  /@lit/reactive-element@1.6.2:
+    resolution: {integrity: sha512-rDfl+QnCYjuIGf5xI2sVJWdYIi56CTCwWa+nidKYX6oIuBYwUbT/vX4qbUDlHiZKJ/3FRNQ/tWJui44p6/stSA==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.1
+    dev: false
+
+  /@material/web@1.0.0-pre.12:
+    resolution: {integrity: sha512-hqbb1dZx3Un3q8y6/teC19pPGARfGxVXVvtns/tw77XgdNafgStPbR0oQ8hOlEDWmCEUSW94O0y6k3kG0lD8lg==}
+    dependencies:
+      lit: 2.7.6
+      safevalues: 0.4.3
+      tslib: 2.6.0
+    dev: false
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -430,6 +451,10 @@ packages:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
     dev: true
 
+  /@types/trusted-types@2.0.3:
+    resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
+    dev: false
+
   /@types/unist@2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: true
@@ -1006,6 +1031,28 @@ packages:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
     dev: false
 
+  /lit-element@3.3.2:
+    resolution: {integrity: sha512-xXAeVWKGr4/njq0rGC9dethMnYCq5hpKYrgQZYTzawt9YQhMiXfD+T1RgrdY3NamOxwq2aXlb0vOI6e29CKgVQ==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.1
+      '@lit/reactive-element': 1.6.2
+      lit-html: 2.7.5
+    dev: false
+
+  /lit-html@2.7.5:
+    resolution: {integrity: sha512-YqUzpisJodwKIlbMFCtyrp58oLloKGnnPLMJ1t23cbfIJjg/H9pvLWK4XS69YeubK5HUs1UE4ys9w5dP1zg6IA==}
+    dependencies:
+      '@types/trusted-types': 2.0.3
+    dev: false
+
+  /lit@2.7.6:
+    resolution: {integrity: sha512-1amFHA7t4VaaDe+vdQejSVBklwtH9svGoG6/dZi9JhxtJBBlqY5D1RV7iLUYY0trCqQc4NfhYYZilZiVHt7Hxg==}
+    dependencies:
+      '@lit/reactive-element': 1.6.2
+      lit-element: 3.3.2
+      lit-html: 2.7.5
+    dev: false
+
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
@@ -1300,6 +1347,10 @@ packages:
       mri: 1.2.0
     dev: true
 
+  /safevalues@0.4.3:
+    resolution: {integrity: sha512-pNCNTkx3xs7G5YJ/9CoeZZVUSPRjH0SEPM0QI5Z1FZRlLBviTFWlNKPs8PTvZvERV0gO7ie/t/Zc0S96JS4Xew==}
+    dev: false
+
   /sander@0.5.1:
     resolution: {integrity: sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==}
     dependencies:
@@ -1512,7 +1563,6 @@ packages:
 
   /tslib@2.6.0:
     resolution: {integrity: sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==}
-    dev: true
 
   /typescript@5.1.6:
     resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}

src/app.d.ts

@@ -9,6 +9,7 @@ declare global {
 	}
 	declare const Footer: typeof import("$lib/components/Footer.svelte").default
 	declare const Navbar: typeof import("$lib/components/Navbar.svelte").default
+	declare const Stars: typeof import("$lib/components/Stars.svelte").default
 }
 
 export {}

src/app.html

@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
+		<meta charset="utf-8" />
+		<meta name="theme-color" content="#100f0e" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

src/global.sass

@@ -20,6 +20,10 @@ a
 	&:hover
 		@apply text-orange-300
 
+hr
+	border: none
+	border-top: 1px solid #464443
+
 ::-webkit-scrollbar
 	position: fixed
 	width: 0.5rem
@@ -31,3 +35,10 @@ a
 		background: #282625
 		&:hover
 			background: #464443
+
+// Utility classes
+
+.bg-a
+	background: #1f1c1d
+.bg-bg
+	background: #100f0e

src/lib/components/Footer.svelte

@@ -1,10 +1,5 @@
-<footer class="mt-auto p-5 text-center text-#8c8b8a">
+<footer class="mt-a p-5 pt-12 text-center text-#8c8b8a">
-	<a
+	<a href="/" class="pe-1.5">Revival Archive</a>
-		href="/"
-		class="no-underline pe-1.5 transition-colors
-		text-purple-600 hover:text-purple-500">
-		Revival Archive
-	</a>
 	2023-2023
 	<nav class="text-white mt-5 mb-4">
 		<a href="/about">About</a>

src/lib/components/Navbar.svelte

@@ -8,6 +8,7 @@
 		<nav class="inline-block ps-4">
 			<a class="navlink" href="/">Home</a>
 			<a class="navlink" href="/about">About</a>
+			<a class="navlink" href="/index">Revival Index</a>
 			<a class="navlink" href="/blog">Blog</a>
 		</nav>
 	</span>

src/lib/components/Stars.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let rating: number
+</script>
+
+{#each { length: 5 } as _, i}
+	<div
+		class="w-5 h-5 me-1.5 inline-block"
+		style="--rating: {Math.min(1, Math.min(5, rating - i)) * 100}%" />
+{/each}
+
+<style lang="sass">
+	div
+		// Fill each star with a gradient based on the rating
+		background: linear-gradient( to right, #f1c40f var(--rating), #f1c40f var(--rating), #7f7d7c var(--rating), #7f7d7c var(--rating), #7f7d7c)
+
+		// APply a mask to hide the gradient outside the star
+		-webkit-mask: url(/star.svg) no-repeat
+</style>

src/routes/+error.svelte

@@ -2,8 +2,12 @@
 	import { page } from "$app/stores"
 </script>
 
+<svelte:head>
+	<title>{$page.error?.message} • Revival Archive</title>
+</svelte:head>
+
 <div class="flex flex-col justify-center items-center h-72vh">
-	<div class="bg-#1f1c1d p-8 px-22 rounded-4 light-text text-center">
+	<div class="bg-a p-8 px-22 rounded-4 light-text text-center">
 		<h1 class="light-text m-0 mb-5 text-2.2rem">Error {$page.status}</h1>
 		{$page.error?.message}
 	</div>

src/routes/+layout.svelte

@@ -7,7 +7,7 @@
 	<Navbar />
 
 	<main
-		class="box-border px-5 pt-12 sm:mx-auto w-full
+		class="box-border px-5 pt-12 sm:mx-a w-full
 		sm:w-140 md:w-180 lg:w-220 xl:w-270 2xl:w-300">
 		<slot />
 	</main>

src/routes/blog/+page.svelte

@@ -10,7 +10,7 @@
 
 {#each data.posts as post}
 	<a href="/blog/{post.path}" class="text-white hover:text-#aaa">
-		<article class="bg-#1f1c1d py-3 px-6 rounded-5 mb-4">
+		<article class="bg-a py-3 px-6 rounded-5 mb-4">
 			<h2 class="my-2">{post.title}</h2>
 			<p class="my-2">
 				Published {new Date(post.date).toLocaleDateString("en-GB", {

src/routes/blog/+page.ts

@@ -4,13 +4,13 @@ export async function load() {
 	return {
 		posts: Promise.all(
 			Object.entries(allPostFiles).map(async ([path, resolver]) => {
-				const { title, date, html } = await resolver()
+				const { title, date, html } = (await resolver()) as any
 
 				return {
 					title,
 					date,
 					html,
-					path: path.match(/(\w+)\.json/)[1],
+					path: path.match(/(\w+)\.json/)?.[1],
 				}
 			})
 		),

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

@@ -2,10 +2,14 @@
 	export let data
 </script>
 
-<article class="w-full sm:w-140 mx-auto">
+<svelte:head>
-	<span class="flex my-10">
+	<title>{data.title} • Revival Archive</title>
-		<h1 class="m-0">{data.title}</h1>
+</svelte:head>
-		<span class="mt-auto ms-3">
+
+<article class="max-w-150 mx-a">
+	<span class="flex mt-10">
+		<h1 class="m-0 text-2rem">{data.title}</h1>
+		<span class="mt-a ms-a mb-0.5">
 			Published {new Date(data.date).toLocaleDateString("en-GB", {
 				year: "numeric",
 				month: "long",
@@ -16,6 +20,8 @@
 		</span>
 	</span>
 
+	<hr class="mt-3 mb-8" />
+
 	<div class="text-justify">
 		{@html data.html}
 	</div>

src/routes/index/+page.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	const years: { [k: number]: string } = {
+		2009: "bg-red-600",
+		2011: "bg-orange-500 text-black",
+		2012: "bg-yellow-500 text-black",
+		2013: "bg-green-600",
+		2014: "bg-teal-600",
+		2016: "bg-blue-600",
+		2018: "bg-indigo-600",
+		2020: "bg-purple-600",
+	}
+
+	const revivals = [
+		{
+			name: "Mercury",
+			years: [2013],
+			rating: 5,
+		},
+		{
+			name: "Goodblox",
+			years: [2009],
+			rating: 4,
+		},
+		{
+			name: "Finobe",
+			years: [2012, 2016],
+			rating: 4.5
+		},
+		{
+			name: "Meteorite",
+			years: [2016, 2020],
+			rating: 2.65,
+		},
+		{
+			name: "Krypton",
+			years: [2011],
+			rating: 4.65,
+		},
+		{
+			name: "Tadah",
+			years: [2014],
+			rating: 3.5,
+		},
+		{
+			name: "Kapish",
+			years: [2014],
+			rating: 2.35,
+		},
+		{
+			name: "Fobe",
+			years: [2016],
+			rating: 1,
+		},
+		{
+			name: "idk18",
+			years: [2018],
+			rating: 1.65,
+		},
+	]
+</script>
+
+<svelte:head>
+	<title>Revival Index • Revival Archive</title>
+</svelte:head>
+
+<h1>Revival Index</h1>
+
+<div class="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
+	{#each revivals as revival}
+		<div class="bg-#1f1c1d p-5 rounded-2 flex flex-col">
+			<h2 class="m-0 mb-1">{revival.name}</h2>
+			<div>
+				{#each revival.years as year}
+					<span
+						class="rounded-full {years[year]} px-2 py-0.5 text-sm me-2">
+						{year}
+					</span>
+				{/each}
+			</div>
+			<div class="my-20 text-center">
+				<code>revival logo goes here</code>
+			</div>
+
+			<div class="mt-a ms-a">
+				<Stars rating={revival.rating} />
+			</div>
+		</div>
+	{/each}
+</div>

static/star.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45 0L58.3495 30.4312L90 34.3769L66.6 57.1302L72.8115 90L45 73.6311L17.1885 90L23.4 57.1302L0 34.3769L31.6505 30.4312L45 0Z" fill="#AFADAC"/>
+</svg>