feat(website): about page

platform/website/.env

@@ -4,4 +4,5 @@ PUBLIC_GQL_ENDPOINT=https://api.scuffle.tv/v1/gql
 PUBLIC_GQL_WS_ENDPOINT=wss://api.scuffle.tv/v1/gql
 PUBLIC_GQL_VERSION=1.0
 PUBLIC_BASE_URL=https://scuffle.tv
-PUBLIC_TWITTER_HANDLE=@Scuffle_TV
+PUBLIC_TWITTER_HANDLE=Scuffle_TV
+PUBLIC_BLOG_API_KEY=61879bf27753bf58b91d6221a2

platform/website/src/app.html

@@ -158,7 +158,7 @@
 						"content";
 					grid-template-rows: auto 1fr;
 					grid-template-columns: auto;
-					min-height: 100vh;
+					min-height: 100svh;
 					max-height: 100vh;
 					overflow: hidden;
 				}

platform/website/src/assets/styles/global.scss

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap");
 @import "./variables.scss";
 
 h1,
@@ -63,6 +63,71 @@ button {
 			}
 		}
 	}
+
+	&.rainbow {
+		position: relative;
+		--border-width: 2px;
+		--background-color: white;
+		--border-radius: 0.75rem;
+
+		&:hover {
+			&::after {
+				opacity: 1;
+				transform: rotate(359deg);
+			}
+		}
+
+		&::before {
+			content: "";
+			position: absolute;
+			top: var(--border-width);
+			left: var(--border-width);
+			bottom: var(--border-width);
+			right: var(--border-width);
+			z-index: -1;
+			border-radius: calc(var(--border-radius) - var(--border-width));
+			background-color: var(--background-color);
+		}
+
+		overflow: hidden;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: -100%;
+			left: -25%;
+			bottom: -100%;
+			right: -25%;
+			z-index: -2;
+			background: conic-gradient(
+				hsl(0deg 100% 67%),
+				hsl(40deg 100% 67%),
+				hsl(80deg 100% 67%),
+				hsl(120deg 100% 67%),
+				hsl(160deg 100% 67%),
+				hsl(200deg 100% 67%),
+				hsl(240deg 100% 67%),
+				hsl(280deg 100% 67%),
+				hsl(320deg 100% 67%)
+			);
+
+			transition:
+				opacity 0.2s,
+				transform 0.5s;
+			opacity: 0;
+			transform: rotate(0deg);
+		}
+
+		border: none;
+		&.primary {
+			--border-width: 2px;
+		}
+		&.secondary {
+			--border-width: 1px;
+			--background-color: #151515;
+			background-color: white;
+		}
+	}
 }
 
 input {

platform/website/src/components/about/blog-post.svelte

@@ -0,0 +1,138 @@
+<script context="module" lang="ts">
+	export type Author = {
+		name: string;
+		profile_image: string;
+	};
+
+	export type Post = {
+		title: string;
+		url: string;
+		excerpt: string;
+		primary_author: Author;
+		published_at: string;
+	};
+</script>
+
+<script lang="ts">
+	import Spinner from "../spinner.svelte";
+
+	export let data: Post | undefined = undefined;
+
+	$: publishedAtFormatted = data
+		? new Date(data.published_at).toLocaleDateString("en-US", {
+				year: "numeric",
+				month: "short",
+				day: "numeric",
+			})
+		: undefined;
+</script>
+
+<article>
+	{#if data}
+		<a href={data.url} class="post">
+			<h3>{data.title}</h3>
+			<p>{data.excerpt}</p>
+			<div class="author">
+				<img src={data.primary_author.profile_image} alt={data.primary_author.name} />
+				<span>{data.primary_author.name}</span>
+			</div>
+			<span class="date">{publishedAtFormatted}</span>
+		</a>
+	{:else}
+		<div class="post loading">
+			<Spinner />
+		</div>
+	{/if}
+</article>
+
+<style lang="scss">
+	@import "../../assets/styles/variables.scss";
+
+	.post {
+		display: grid;
+		grid-template-columns: repeat(2, auto);
+		grid-template-rows: 1fr auto auto;
+		gap: 1.5rem;
+		height: 100%;
+		position: relative;
+
+		&.loading {
+			grid-template-columns: auto;
+			grid-template-rows: auto;
+			place-items: center;
+			height: 18rem;
+		}
+
+		color: $textColor;
+		text-decoration: none;
+		padding: 2.5rem;
+		border-radius: 1rem;
+		background-color: $bgColor;
+
+		&:not(.loading) {
+			border: 1px solid transparent;
+			transition: border-color 0.2s;
+			&:hover,
+			&:focus-visible {
+				border-color: $textColorLight;
+			}
+		}
+
+		&::before {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			right: 0;
+			z-index: -2;
+			border-radius: 1rem;
+			box-shadow: 0 0 8rem 4rem rgba($primaryColor, 0.1);
+		}
+
+		h3 {
+			grid-column: 1 / -1;
+
+			margin: 0;
+			color: $primaryColor;
+			font-size: 1.8rem;
+			font-weight: 600;
+			line-height: 1.1em;
+		}
+
+		p {
+			--max-lines: 3;
+
+			grid-column: 1 / -1;
+
+			margin: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			line-height: 1.2em;
+			max-height: calc(1.2rem * var(--max-lines));
+
+			display: -webkit-box;
+			-webkit-line-clamp: var(--max-lines);
+			line-clamp: var(--max-lines);
+			-webkit-box-orient: vertical;
+		}
+
+		.author {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+
+			img {
+				width: 1.5rem;
+				height: 1.5rem;
+				border-radius: 50%;
+			}
+		}
+
+		.date {
+			justify-self: end;
+			text-align: end;
+			color: $textColorLight;
+		}
+	}
+</style>

platform/website/src/components/about/footer.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { PUBLIC_TWITTER_HANDLE } from "$env/static/public";
+	import LogoText from "../icons/logo-text.svelte";
+</script>
+
+<footer>
+	<div class="left">
+		<div class="logo">
+			<LogoText />
+		</div>
+		<div class="link-list">
+			<h3>Socials</h3>
+			<a href="https://discord.gg/scuffle" title="Join the cord!">Discord</a>
+			<a href="https://github.com/ScuffleTV">GitHub</a>
+			<a href="https://bytes.scuffle.tv/">Our Blog</a>
+			<a href="https://x.com/{PUBLIC_TWITTER_HANDLE}">Twitter</a>
+		</div>
+		<div class="link-list">
+			<h3>Help</h3>
+			<a
+				href="https://github.com/ScuffleTV/scuffle/issues/new?assignees=ScuffleTV%2Freviewers&labels=feature+request&projects=&template=feature-request.yml&title=%5BFeature%5D%3A+Scuffle+needs+%5B...%5D"
+				>Suggest a feature</a
+			>
+			<a
+				href="https://github.com/ScuffleTV/scuffle/issues/new?assignees=ScuffleTV%2Freviewers&labels=bug&projects=&template=bugreport.yml&title=%5BBug%5D%3A+Scuffle+has+a+bug+here+%5B...%5D"
+				>Report a bug</a
+			>
+			<a href="https://github.com/ScuffleTV/scuffle/security/advisories/new"
+				>Report a vulnerabilty</a
+			>
+		</div>
+		<div class="link-list">
+			<h3>Support us</h3>
+			<a href="https://opencollective.com/scuffle">Open Collective</a>
+		</div>
+	</div>
+	<span class="copyright">&copy; {new Date().getFullYear()} Scuffle</span>
+	<img class="fishinge" src="/about/Fishinge.webp" width="40" alt="Fishinge" />
+</footer>
+
+<style lang="scss">
+	@import "../../assets/styles/variables.scss";
+
+	footer {
+		background-color: $bgColor;
+		position: relative;
+
+		padding: 2rem 4rem;
+		display: flex;
+		justify-content: space-between;
+		gap: 4rem;
+		flex-wrap: wrap;
+
+		.left {
+			display: flex;
+			gap: 4rem;
+			flex-wrap: wrap;
+		}
+
+		.logo {
+			display: contents;
+			font-size: 2rem;
+		}
+
+		.link-list {
+			display: flex;
+			flex-direction: column;
+			gap: 0.25rem;
+
+			h3 {
+				margin: 0;
+				margin-bottom: 0.25rem;
+				font-size: 1rem;
+				font-weight: 700;
+			}
+
+			a {
+				color: $textColorLighter;
+				text-decoration: none;
+
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+		}
+
+		.copyright {
+			place-self: end end;
+
+			font-size: 0.9rem;
+			color: $textColorLight;
+		}
+
+		.fishinge {
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			overflow: hidden;
+
+			filter: saturate(0) opacity(0.25);
+		}
+	}
+</style>