Some improvements (#68)

* refactor Title

refactor title component

* featureSlice: nicer max-width

* add meta title to news

* plugins as toml, no plugin sub-pages

* plugins: better letter if no icon present

* add more plugins to showcase

package.json

@@ -61,6 +61,7 @@
 		"remeda": "^2.2.0",
 		"rxjs": "^7.8.1",
 		"shiki": "^1.7.0",
+		"smol-toml": "^1.3.0",
 		"svelte-inview": "^4.0.2",
 		"ts-pattern": "^5.2.0"
 	}

pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       shiki:
         specifier: ^1.7.0
         version: 1.7.0
+      smol-toml:
+        specifier: ^1.3.0
+        version: 1.3.0
       svelte-inview:
         specifier: ^4.0.2
         version: 4.0.2(svelte@4.2.18)
@@ -1422,6 +1425,10 @@ packages:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
 
+  smol-toml@1.3.0:
+    resolution: {integrity: sha512-tWpi2TsODPScmi48b/OQZGi2lgUmBCHy6SZrhi/FdnnHiU1GwebbCfuQuxsC3nHaLwtYeJGPrDZDIeodDOc4pA==}
+    engines: {node: '>= 18'}
+
   sorcery@0.11.0:
     resolution: {integrity: sha512-J69LQ22xrQB1cIFJhPfgtLuI6BpWRiWu1Y3vSsIwK/eAScqJxd/+CJlUuHQRdX2C9NGFamq+KqNywGgaThwfHw==}
     hasBin: true
@@ -2916,6 +2923,8 @@ snapshots:
 
   slash@5.1.0: {}
 
+  smol-toml@1.3.0: {}
+
   sorcery@0.11.0:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15

src/content/plugins.toml

@@ -0,0 +1,103 @@
+# - name: Name of the plugin
+# - tagline: Very concise description of the plugin
+# - url: Link to the Github repository
+# - logo: Relative link to the logo placed in the `/static/plugins-data/logos/` directory (without the `/static/` though)
+# - tags: Tags for the plugin. Capitalized
+# - featured: Whether the plugin is featured at the top. A maximum of 4 is shown
+# - weight: Determines the sort order. A higher weight comes first.
+
+# Please only use darkmode images/videos.
+# Do not use yellow and yellowish colors, unless nesssecary.
+
+
+[[plugins]]
+name     = "Borders++"
+url      = "https://github.com/hyprwm/hyprland-plugins"
+category = "Design"
+tagline  = "Extra window borders"
+logo     = "/plugins-data/logos/Borders-plus-plus-logo.svg"
+featured = true
+
+[[plugins]]
+name     = "CSGO Vulkan Fix"
+url      = "https://github.com/hyprwm/hyprland-plugins"
+category = "Miscellaneous"
+tagline  = "CSGO custom resolutions fix"
+
+
+[[plugins]]
+name     = "dwindle-autogroup"
+url      = "https://github.com/ItsDrike/hyprland-dwindle-autogroup"
+category = "Layout"
+tagline  = "Dwindle mode auto-grouping"
+featured = false
+
+
+[[plugins]]
+name     = "hy3"
+url      = "https://github.com/outfoxxed/hy3"
+category = "Layout"
+tagline  = "i3 / Sway like layout"
+logo     = "/plugins-data/logos/hy3-logo.svg"
+banner   = "/plugins-data/hy3_banner.mp4"
+featured = true
+
+
+[[plugins]]
+name     = "Hyprbars"
+url      = "https://github.com/hyprwm/hyprland-plugins"
+category = "Design"
+tagline  = "Bring back title bars"
+logo     = "/plugins-data/logos/hyprbars-logo.svg"
+featured = true
+
+
+[[plugins]]
+name     = "Hyprtrails"
+url      = "https://github.com/hyprwm/hyprland-plugins"
+category = "Design"
+tagline  = "Smooth window trails"
+logo     = "/plugins-data/logos/hyprtrails-logo.svg"
+featured = true
+
+
+[[plugins]]
+name     = "Hyprwinwrap"
+url      = "https://github.com/hyprwm/hyprland-plugins"
+category = "Quality of Life"
+tagline  = "Any app as wallpaper"
+logo     = "/plugins-data/logos/hyprwinwrap-logo.svg"
+featured = true
+
+[[plugins]]
+name     = "hyprgrass"
+url      = "https://github.com/horriblename/hyprgrass"
+category = "Quality of Life"
+tagline  = "Touch gestures"
+featured = false
+
+
+[[plugins]]
+name     = "hyprNStack"
+url      = "https://github.com/zakk4223/hyprNStack"
+category = "Layout"
+tagline  = "N-Stack tiling"
+
+[[plugins]]
+name     = "hyprland-virtual-desktops"
+url      = "https://github.com/levnikmyskin/hyprland-virtual-desktops"
+category = "Layout"
+tagline  = "Virtual desktops"
+
+
+[[plugins]]
+name     = "hypr-darkwindow"
+url      = "https://github.com/micha4w/Hypr-DarkWindow"
+category = "Design"
+tagline  = "Invert window colors"
+
+[[plugins]]
+name     = "hyprexpo"
+url      = "https://github.com/hyprwm/hyprland-plugins"
+category = "Design"
+tagline  = "Workspaces overview"

src/content/plugins/borders-plus-plus.md

@@ -1,10 +0,0 @@
----
-name: Borders++
-url: https://github.com/hyprwm/hyprland-plugins
-category: Design
-tagline: Extra window borders
-logo: /plugins-data/logos/Borders-plus-plus-logo.svg
-featured: true
-# banner: /imgs/profile_pictures/chan_1.webp
-# weight: 100
----

src/content/plugins/csgo-vulkan-fix.md

@@ -1,6 +0,0 @@
----
-name: CSGO Vulkan Fix
-url: https://github.com/hyprwm/hyprland-plugins
-category: Miscellaneous
-tagline: CSGO custom resolutions fix
----

src/content/plugins/dwindle-autogroup.md

@@ -1,7 +0,0 @@
----
-name: dwindle-autogroup
-url: https://github.com/ItsDrike/hyprland-dwindle-autogroup
-category: Layout
-tagline: Auto-grouping for dwindle mode
-featured: false
----

src/content/plugins/hy3.md

@@ -1,22 +0,0 @@
----
-name: hy3
-url: https://github.com/outfoxxed/hy3
-category: Layout
-tagline: i3 / Sway like layout
-logo: /plugins-data/logos/hy3-logo.svg
-banner: /plugins-data/hy3_banner.mp4
-featured: true
----
-
-### Features
-
-- i3 like tiling
-- Node based window manipulation (you can interact with multiple windows at once)
-- Greatly improved tabbed node groups over base hyprland
-- Optional autotiling
-
-Additional features may be suggested in the repo issues or the [matrix room](https://matrix.to/#/#hy3:outfoxxed.me).
-
-### Demo
-
-<video  controls="controls" src="https://user-images.githubusercontent.com/83010835/255322916-85ae8196-8b12-4e15-b060-9872db10839f.mp4"></video>

src/content/plugins/hyprbars.md

@@ -1,8 +0,0 @@
----
-name: Hyprbars
-url: https://github.com/hyprwm/hyprland-plugins
-category: Design
-tagline: Bring back title bars
-logo: /plugins-data/logos/hyprbars-logo.svg
-featured: true
----

src/content/plugins/hyprtrails.md

@@ -1,8 +0,0 @@
----
-name: Hyprtrails
-url: https://github.com/hyprwm/hyprland-plugins
-category: Design
-tagline: Smooth window trails
-logo: /plugins-data/logos/hyprtrails-logo.svg
-featured: true
----

src/content/plugins/hyprwinwrap.md

@@ -1,8 +0,0 @@
----
-name: Hyprwinwrap
-url: https://github.com/hyprwm/hyprland-plugins
-category: Quality of Life
-tagline: Any app as wallpaper
-logo: /plugins-data/logos/hyprwinwrap-logo.svg
-featured: true
----

src/content/plugins/readme.md

@@ -1,18 +0,0 @@
-# Frontmatter
-
-The `.md` files can have the following meta data:
-
-- name: Name of the plugin
-- tagline: Very concise description of the plugin
-- url: Link to the Github repository
-- docs: Link to the documentation. Optional
-- website: Link to the website. Optional
-- logo: Relative link to the logo placed in the `/static/plugins-data/logos/` directory (without the `/static/` though)
-- tags: Tags for the plugin. Capitalized
-- featured: Whether the plugin is featured at the top. A maximum of 4 is shown
-- weight: Determines the sort order. A higher weight comes first.
-
-## Banner
-
-Please only use darkmode images/videos.
-Do not use yellow and yellowish colors, unless nesssecary.

src/lib/components/Title.svelte

@@ -1,26 +0,0 @@
-<script>
-	import { animateIn } from '$lib/Helper.mjs'
-</script>
-
-<hgroup
-	use:animateIn={{ slide: 24, fade: 0 }}
-	class="z-10 flex flex-col items-center px-3 text-center {$$restProps.class}"
->
-	{#if $$slots.pre}
-		<p class="mb-3 font-extrabold text-slate-300">
-			<slot name="pre" />
-		</p>
-	{/if}
-
-	<h1 class="mb-12 text-center text-5xl font-bold md:text-7xl lg:text-8xl">
-		<slot name="title">No title given!!!</slot>
-	</h1>
-
-	{#if $$slots.subtitle}
-		<p class="-mt-4 mb-7 text-center font-extrabold text-slate-300 sm:text-lg">
-			<slot name="subtitle" />
-		</p>
-	{/if}
-
-	<slot />
-</hgroup>

src/lib/components/Title/TitleHeading.svelte

@@ -0,0 +1,3 @@
+<h1 class="mb-12 text-5xl font-bold md:text-7xl lg:text-8xl {$$restProps.class}">
+	<slot>No title given!!!</slot>
+</h1>

src/lib/components/Title/TitlePre.svelte

@@ -0,0 +1,3 @@
+<p class="mb-3 font-extrabold text-slate-300">
+	<slot />
+</p>

src/lib/components/Title/TitleSubtile.svelte

@@ -0,0 +1,3 @@
+<p class="-mt-4 mb-7 font-extrabold text-slate-300 sm:text-lg {$$restProps.class}">
+	<slot />
+</p>

src/lib/components/Title/TitleWrapper.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { animateIn } from '$lib/Helper.mjs'
+	import clsx from 'clsx'
+
+	/** @type { 'left' | 'right' | 'center'} */
+	export let align = 'center'
+
+	$: alignClass =
+		align === 'center'
+			? 'text-center items-center'
+			: align === 'left'
+				? 'text-left items-start'
+				: 'text-right items-end'
+</script>
+
+<hgroup
+	use:animateIn={{ slide: 24, fade: 0 }}
+	class={clsx('z-10 flex flex-col  px-3 ', alignClass, $$restProps.class)}
+>
+	<slot name="pre" />
+
+	<slot name="title">No title given!!!</slot>
+
+	<slot name="subtitle" />
+
+	<slot />
+</hgroup>

src/routes/api/plugins/+server.js

@@ -1,27 +1,23 @@
 import { json } from '@sveltejs/kit'
+import path from 'path'
+import { parse } from 'smol-toml'
+import { readFile } from 'node:fs/promises'
 
 /** Get the plugins of the `content/plugins/` directory */
 async function getPlugins() {
-	const plugins = Object.entries(import.meta.glob('/src/content/plugins/*.md', { eager: true }))
-		.flatMap(([path, { metadata }]) => {
-			const slug = path.split('/').at(-1)?.replace('.md', '')
-
-			// Filter out the `readme.md`
-			if (slug === 'readme') return []
-
-			if (!slug || !path) {
-				console.error(`Invalid file ${path} ${JSON.stringify({ ...metadata, slug })}`)
-				return []
-			}
-
-			return { slug, ...metadata }
-		})
-		.sort(
-			(a, b) =>
-				(b.featured ?? 0) - (a.featured ?? 0) ||
-				(b.weight ?? 0) - (a.weight ?? 0) ||
-				((b.logo && 1) ?? 0) - ((a.logo && 1) ?? 0) ||
-				((b.banner && 1) ?? 0) - ((a.banner && 1) ?? 0)
+	const plugins = await readFile(
+		path.join(import.meta.dirname, '../../../content/plugins.toml'),
+		'utf-8'
+	)
+		.then(parse)
+		.then(({ plugins }) =>
+			plugins.sort(
+				(a, b) =>
+					(b.featured ?? 0) - (a.featured ?? 0) ||
+					(b.weight ?? 0) - (a.weight ?? 0) ||
+					((b.logo && 1) ?? 0) - ((a.logo && 1) ?? 0) ||
+					((b.banner && 1) ?? 0) - ((a.banner && 1) ?? 0)
+			)
 		)
 
 	return plugins

src/routes/hall_of_fame/+page.svelte

@@ -1,5 +1,7 @@
 <script>
-	import Title from '$lib/components/Title.svelte'
+	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
+	import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
+	import Title from '$lib/components/Title/TitleWrapper.svelte'
 	import Contest from './Contest.svelte'
 	import FamedRice from './FamedRice.svelte'
 
@@ -16,10 +18,10 @@
 		</div>
 		<div class="gradient_" />
 		<Title>
-			<span slot="title" class="title">Hall of fame</span>
-			<div slot="subtitle" class="max-w-[40ch]">
+			<TitleHeading slot="title" class="">Hall of Fame</TitleHeading>
+			<TitleSubtile slot="subtitle" class="class-w-[40ch]">
 				The chronicles of the triumphant from bygone rice contests held within our Discord
-			</div>
+			</TitleSubtile>
 		</Title>
 	</div>
 

src/routes/home-slices/CommunitySlice.svelte

@@ -7,7 +7,7 @@
 	import DiscordIcon from '~icons/prime/discord'
 	import DiscordProfilePicture from '$lib/components/DiscordProfilePicture.svelte'
 	import { onMount, setContext } from 'svelte'
-	import Title from '$lib/components/Title.svelte'
+	import Title from '$lib/components/Title/TitleWrapper.svelte'
 	import background from '$lib/images/community-bg.webp'
 	import amongUsGreenImage from '$lib/images/amongus/green.webp'
 	import { discordLink } from '$lib/constants.mjs'
@@ -16,6 +16,8 @@
 	import { writable } from 'svelte/store'
 	import { Observable } from 'rxjs'
 	import { writableObservable } from '$lib/Helper.mjs'
+	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
+	import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
 
 	let sectionElement
 	let isDraggingChan = false
@@ -106,11 +108,10 @@
 	bind:this={sectionElement}
 >
 	<Title>
-		<span slot="title">Join a great<br />community</span>
-
-		<span slot="subtitle">
+		<TitleHeading slot="title" class="">Join a great<br />community</TitleHeading>
+		<TitleSubtile slot="subtitle" class="class-w-[40ch]">
 			Get help from Distro Hoppers, Haiku writers,<br />Hydrohomies, and human_(probably)
-		</span>
+		</TitleSubtile>
 	</Title>
 
 	<div class="group mt-16 flex flex-col items-center">

src/routes/home-slices/FeaturesSlice.svelte

@@ -6,7 +6,7 @@
 	import TabIcon from '~icons/gg/tab'
 	import IpcIcon from '~icons/gg/media-podcast'
 	import TouchpadIcon from '~icons/gg/touchpad'
-	import Title from '$lib/components/Title.svelte'
+	import Title from '$lib/components/Title/TitleWrapper.svelte'
 	import Hypractive from './Hypractive.svelte'
 	import configDefaultImage from '$lib/images/features/config_default.webp'
 	import configHoverImage from '$lib/images/features/config_hover.webp'
@@ -15,12 +15,14 @@
 	import tileDefaultImage from '$lib/images/features/tiling_default.webp'
 	import tileHoverImage from '$lib/images/features/tiling_hover.webp'
 	import CardsContainer from '$lib/components/CardsContainer.svelte'
+	import TitlePre from '$lib/components/Title/TitlePre.svelte'
+	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
 </script>
 
-<section class="relative flex flex-col items-center px-3 md:px-8">
+<section class="relative flex max-w-screen-xl flex-col items-center px-3 md:px-8">
 	<Title>
-		<span slot="pre">TLDR</span>
-		<span slot="title">Features</span>
+		<TitlePre slot="pre">TLDR</TitlePre>
+		<TitleHeading slot="title" class="">Features</TitleHeading>
 	</Title>
 
 	<CardsContainer

src/routes/home-slices/HallOfFameSlice.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	import { animateIn } from '$lib/Helper.mjs'
 	import Button from '$lib/components/Button.svelte'
-	import Title from '$lib/components/Title.svelte'
+	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
+	import TitlePre from '$lib/components/Title/TitlePre.svelte'
+	import Title from '$lib/components/Title/TitleWrapper.svelte'
 	import FameRicePreview from './FameRicePreview.svelte'
 </script>
 
 <section class="" use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }}>
 	<div class="z-20 -mb-40 px-4">
 		<Title>
-			<span slot="pre"> Memorials of the ricing legends </span>
-			<span slot="title">Hall of Fame</span>
+			<TitlePre>Memorials of the ricing legends</TitlePre>
+			<TitleHeading slot="title" class="">Hall of Fame</TitleHeading>
 		</Title>
 	</div>
 

src/routes/home-slices/InstallSlice.svelte

@@ -6,14 +6,17 @@
 	import suseLogo from '$lib/images/logos/opensuse.svg'
 	import DistroOption from './DistroOption.svelte'
 	import Button from '$lib/components/Button.svelte'
-	import Title from '$lib/components/Title.svelte'
+	import Title from '$lib/components/Title/TitleWrapper.svelte'
 	import amongus from '$lib/images/amongus/green.webp'
 	import CommandButton from '$lib/components/CommandButton.svelte'
+	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
+	import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
 </script>
 
 <section class="pb-6">
-	<Title class="mb-8">
-		<span slot="title">Install now</span><span slot="subtitle"> For your favourite distro </span>
+	<Title>
+		<TitleHeading slot="title" class="">Install now</TitleHeading>
+		<TitleSubtile slot="subtitle" class="">For yor favourite distro</TitleSubtile>
 	</Title>
 
 	<div class="flex flex-col items-center gap-12 md:gap-6" use:animateIn={{ slide: 24, fade: 0 }}>

src/routes/home-slices/NewsSlice.svelte

@@ -1,14 +1,16 @@
 <script>
 	import NewsThumb from '$lib/components/news-thumb.svelte'
-	import Title from '$lib/components/Title.svelte'
+	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
+	import TitlePre from '$lib/components/Title/TitlePre.svelte'
+	import Title from '$lib/components/Title/TitleWrapper.svelte'
 
 	export let news
 </script>
 
 <section class="relative mb-12 max-w-5xl px-8 md:mb-20">
-	<Title class="mb-8">
-		<span slot="pre">Read while it's fresh</span>
-		<span slot="title">Latest news</span>
+	<Title>
+		<TitlePre>Read while it's fresh!</TitlePre>
+		<TitleHeading slot="title" class="">Latest news</TitleHeading>
 	</Title>
 
 	<ul class="flex flex-col gap-12">

src/routes/news/+page.svelte

@@ -1,8 +1,10 @@
 <script>
 	import LogoPng from '$lib/images/logos/HyprlandLogo.png'
-	import Title from '$lib/components/Title.svelte'
+	import Title from '$lib/components/Title/TitleWrapper.svelte'
 	import NewsThumb from '$lib/components/news-thumb.svelte'
 	import { onDestroy, onMount } from 'svelte'
+	import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
+	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
 
 	export let data
 
@@ -63,17 +65,16 @@
 </script>
 
 <svelte:head>
-	<title>{''}</title>
+	<title>Hyprland News</title>
 </svelte:head>
 
 <section>
 	<header class="header">
 		<pre class="spinner-wrapper" bind:this={asciiElement} />
 
-		<Title class="mb-0  duration-1000 animate-in fade-in-0">
-			<span slot="title">News</span><span slot="subtitle">
-				Fresh updates straight from the oven
-			</span>
+		<Title>
+			<TitleHeading slot="title" class="">News</TitleHeading>
+			<TitleSubtile>Fresh updates straight from the oven</TitleSubtile>
 		</Title>
 	</header>
 
@@ -106,7 +107,7 @@
 	}
 
 	.spinner-wrapper {
-		@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;
+		@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);
 		/* There are 36 rows */

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

@@ -1,6 +1,7 @@
 <script>
 	import { formatDate } from '$lib/Helper'
-	import Title from '$lib/components/Title.svelte'
+	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
+	import Title from '$lib/components/Title/TitleWrapper.svelte'
 	import NewsThumb from '$lib/components/news-thumb.svelte'
 
 	export let data
@@ -34,7 +35,10 @@
 
 {#if data.other.length > 0}
 	<section class="mx-auto mt-72 max-w-screen-lg">
-		<Title class="mb-6"><span slot="title">More news</span></Title>
+		<Title class="mb-6">
+			<TitleHeading slot="title" class="">More news</TitleHeading>
+		</Title>
+
 		<ul class="grid grid-cols-2 gap-x-7 gap-y-16 overflow-auto">
 			{#each data.other as entry}
 				<NewsThumb {entry} />

src/routes/plugins/+page.svelte

@@ -1,10 +1,13 @@
 <script>
-	import Title from '$lib/components/Title.svelte'
+	import Title from '$lib/components/Title/TitleWrapper.svelte'
 	import CardsContainer from '$lib/components/CardsContainer.svelte'
 	import PluginCard from './PluginCard.svelte'
 	import clsx from 'clsx'
 	import * as R from 'remeda'
 	import { getGeneratedPath } from '$lib/Helper.mjs'
+	import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
+	import TitlePre from '$lib/components/Title/TitlePre.svelte'
+	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
 
 	export let data
 
@@ -22,7 +25,6 @@
 			)
 		),
 		R.entries(),
-		R.tap((x) => console.log({ x })),
 		R.sort(([a], [b]) => a.localeCompare(b))
 	)
 </script>
@@ -40,11 +42,10 @@
 	<div class="top-light"></div>
 
 	<header class="header mt-24 md:mt-32">
-		<Title class="mb-0  duration-1000 animate-in fade-in-0">
-			<span slot="pre">Plugins</span>
-			<span slot="title">Unlock full power</span><span slot="subtitle">
-				Easily load up plugins and customize everything
-			</span>
+		<Title>
+			<TitlePre>Plugins</TitlePre>
+			<TitleHeading slot="title" class="">Unlock full power</TitleHeading>
+			<TitleSubtile>Easily load up plugins and customize everything</TitleSubtile>
 		</Title>
 
 		<!-- <div class="absolute top-0">

src/routes/plugins/PluginCard.svelte

@@ -24,7 +24,8 @@
 	class={$$restProps.class}
 	gradientOpacity={0.5}
 	><a
-		href="/plugins/{plugin.slug}"
+		href={plugin.url}
+		target="_blank"
 		class="relative flex size-full min-h-max items-stretch @container"
 	>
 		<!-- Main content -->
@@ -54,7 +55,10 @@
 						aria-hidden="true"
 						class="letter-logo -ml-4 flex items-center justify-center bg-gradient-to-tr from-primary via-sky-400 to-blue-400 bg-clip-text text-center text-6xl font-bold leading-none text-transparent"
 					>
-						{plugin.name[0]}
+						{plugin.name
+							.replace(/[-\.\_]/g, '')
+							.replace(/^hypr-?(land)?/i, '')[0]
+							?.toUpperCase()}
 					</div>
 				{/if}
 			</div>
@@ -125,7 +129,7 @@
 	}
 	.logo-container:not(.banner) {
 		@container (max-width: theme(screens.md)) {
-			@apply flex shrink-[2] grow  items-center justify-center  max-2xl:@2xl:mx-0 max-2xl:@2xl:block max-2xl:@2xl:h-auto  max-2xl:@2xl:grow-0;
+			@apply flex shrink-[2] grow items-center justify-center max-2xl:@2xl:mx-0 max-2xl:@2xl:block max-2xl:@2xl:h-auto max-2xl:@2xl:grow-0;
 		}
 	}
 

src/routes/plugins/[slug]/+page.js

@@ -1,19 +0,0 @@
-import { error } from '@sveltejs/kit'
-
-export async function load({ params, fetch }) {
-	try {
-		const post = await import(`../../../content/plugins/${params.slug}.md`)
-		const other = await fetch('/api/plugins')
-			.then((response) => response.json())
-			.then((news) => news.filter((entry) => entry.slug !== params.slug).slice(0, 4))
-
-		return {
-			content: post.default,
-			meta: post.metadata,
-			other
-		}
-	} catch (errorMessage) {
-		console.error(errorMessage)
-		error(404, `Could not find ${params.slug}`)
-	}
-}

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

@@ -1,188 +0,0 @@
-<script>
-	import CardsContainer from '$lib/components/CardsContainer.svelte'
-	import Title from '$lib/components/Title.svelte'
-	import clsx from 'clsx'
-	import PluginCard from '../PluginCard.svelte'
-	import Tag from '../Tag.svelte'
-	import { getGeneratedPath } from '$lib/Helper.mjs'
-	import GithubIcon from '~icons/ri/github-fill'
-	import BackIcon from '~icons/gg/arrow-left-r'
-	import InstallButton from '$lib/components/CommandButton.svelte'
-	import Button from '$lib/components/Button.svelte'
-
-	export let data
-	$: ({ meta } = data)
-	$: title = meta.name + ' Hyprland Plugin'
-
-	/** @type {HTMLVideoElement}*/
-	let videoElement
-
-	function playVideo() {
-		videoElement && videoElement.play().catch(console.error)
-	}
-	function pauseVideo() {
-		videoElement && videoElement.pause()
-	}
-</script>
-
-<svelte:head>
-	<title>{title}</title>
-	<meta property="og:type" content="article" />
-	<meta property="og:title" content={title} />
-	{#if meta.logo}
-		<meta property="og:image" content={meta.logo} />
-	{/if}
-</svelte:head>
-
-<article
-	class={clsx(
-		'mx-auto mt-navbar flex min-h-[min(100vh,900px)] w-full max-w-screen-lg flex-col  pt-8 transition-none delay-500 animate-in fade-in-0 fill-mode-backwards [animation-duration:400ms] lg:px-0',
-		meta.banner | meta.logo ? 'md:pt-12' : 'mt-12'
-	)}
->
-	<!-- Back button -->
-	<a
-		href="/plugins"
-		class="mb-2 ml-2 flex items-center gap-3 text-slate-400 hover:text-slate-100 lg:ml-0"
-		><BackIcon />Back to all plugins</a
-	>
-	<!-- Banner  -->
-	{#if meta.banner || meta.logo}
-		<div
-			class="relative flex aspect-video w-full min-w-full items-center justify-center overflow-hidden bg-neutral-950 animate-in fade-in-0 fill-mode-backwards [animation-delay:0.4s] [animation-duration:1.2s] sm:rounded-3xl md:h-[28rem]"
-			on:mouseenter={playVideo}
-			on:mouseleave={pauseVideo}
-			role="banner"
-		>
-			{#if meta.banner?.split('.').at(-1) === 'mp4'}
-				<video
-					src={meta.banner}
-					class="absolute left-1/2 top-1/2 z-10 size-full min-h-[44rem] min-w-full -translate-x-1/2 -translate-y-1/2"
-					bind:this={videoElement}
-					playsinline
-					muted
-					loop
-				></video>
-			{:else if meta.banner}
-				<img src={meta.banner} class="absolute inset-0 size-full object-cover" alt="" />
-			{:else if meta.logo}
-				<div class="grain absolute inset-0 flex size-full items-center justify-center">
-					<img src={meta.logo} class="z-30 size-48" alt="" />
-					<img
-						src={getGeneratedPath(meta.logo)}
-						class="absolute inset-0 object-cover opacity-30"
-						alt=""
-					/>
-				</div>
-			{/if}
-		</div>
-	{/if}
-
-	<!-- ( Logo, Heading, Install buttons ) and tags -->
-	<div
-		class={clsx(
-			'relative z-20 mx-6 mb-24 mt-6 flex    flex-col flex-wrap justify-between gap-4 duration-1000 animate-in fade-in-0 slide-in-from-bottom-4 md:mx-8 md:gap-8 lg:flex-nowrap',
-			!meta.banner && !meta.logo && 'mt-24 lg:mt-44',
-			!meta.banner && meta.logo && 'sm:-mt-16 md:-mt-20 lg:-mt-32',
-			meta.banner && meta.logo && 'sm:-mt-24 md:-mt-52 lg:-mt-64 '
-		)}
-	>
-		<hgroup
-			class="flex w-full flex-col gap-4"
-			on:mouseenter={playVideo}
-			on:mouseleave={pauseVideo}
-			role="heading"
-			aria-level="1"
-		>
-			<!-- Logo -->
-			{#if meta.logo && meta.banner}
-				<img src={meta.logo} class="size-20 md:size-28 lg:size-40" alt={'Logo ' + meta.name} />
-			{/if}
-			<h1
-				class="_text-shadow max-w-max text-pretty bg-gradient-to-br from-white via-white to-white/50 bg-clip-text py-2 text-5xl font-bold text-transparent md:text-7xl xl:text-8xl"
-			>
-				{meta.name}
-			</h1>
-		</hgroup>
-
-		<div class="flex w-full flex-wrap gap-16 md:flex-nowrap md:gap-8">
-			<div class="flex w-full grow-[4] flex-col justify-between gap-8 md:gap-12">
-				<p class="font-medium text-slate-300 sm:text-lg">
-					{meta.tagline}
-				</p>
-
-				<InstallButton
-					containerClass="max-w-max"
-					commandClass="text-left break-all md:break-normal  text-slate-300 group-hover:text-white"
-					command={`hyprpm add ${meta.url}`}
-				>
-					<div class="self-start justify-self-start" slot="extra">
-						<span class="text-red-200">Trust the plugin source before installing!</span>
-
-						<a
-							href="https://wiki.hyprland.org/Plugins/Using-Plugins/"
-							target="_blank"
-							class="w-full text-left hover:underline"
-							>Installation is done via hyprpm ↗
-						</a>
-					</div>
-				</InstallButton>
-			</div>
-
-			<!-- Tags, Github button -->
-			<div class="flex shrink-0 flex-col items-start gap-8 md:items-end lg:shrink-[2]">
-				<a href={meta.url} target="_blank">
-					<GithubIcon class="size-10" />
-				</a>
-
-				<Tag tag={meta.category} />
-			</div>
-		</div>
-	</div>
-
-	<!-- Markdown -->
-	<section
-		class="prose prose-slate prose-invert mx-auto px-6 lg:prose-xl prose-a:text-cyan-400 prose-img:rounded-lg sm:px-8"
-	>
-		<svelte:component this={data.content} />
-	</section>
-</article>
-
-<!-- More plugins -->
-{#if data.other.length > 0}
-	<section
-		class="relative mx-auto mt-64 flex w-full max-w-screen-xl flex-col items-center px-0 delay-1000 duration-1000 animate-in fade-in-0 fill-mode-backwards sm:px-4 md:px-8"
-	>
-		<Title class="mb-6"><span slot="title">More plugins</span></Title>
-		<CardsContainer class="flex w-full grid-cols-2 flex-col gap-8 md:grid">
-			{#each data.other as plugin}
-				<PluginCard showCategory={true} {plugin} class="h-96 min-h-96" />
-			{/each}
-		</CardsContainer>
-
-		<div
-			class="m-4 mt-16 max-w-max rounded-xl bg-slate-900/20 px-12 py-8 outline outline-cyan-100/5"
-		>
-			<Button type="fancyOutline"><a href="/plugins">Back to all plugins</a></Button>
-		</div>
-	</section>
-{/if}
-
-<style lang="postcss">
-	.grain {
-		&::after {
-			content: ' ';
-			background: url('/imgs/grain.webp');
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			z-index: 21;
-		}
-	}
-
-	._text-shadow {
-		filter: drop-shadow(0 0 20px theme(colors.black / 50%));
-	}
-</style>