hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-12-22 10:19:49 +01:00
Code Issues Projects Releases Packages Wiki Activity

Some improvements (#68)

Browse source 
* 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
This commit is contained in:
VDawg 2024-09-01 16:21:04 +03:00 committed by GitHub
parent 24b64047f6
commit 86e6d1c7f0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 229 additions and 382 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

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

9
pnpm-lock.yaml
View file

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

103
src/content/plugins.toml Normal file
View file

@ -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"

10
src/content/plugins/borders-plus-plus.md
View file

@ -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
---

6
src/content/plugins/csgo-vulkan-fix.md
View file

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

7
src/content/plugins/dwindle-autogroup.md
View file

@ -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
---

22
src/content/plugins/hy3.md
View file

@ -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>

8
src/content/plugins/hyprbars.md
View file

@ -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
---

8
src/content/plugins/hyprtrails.md
View file

@ -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
---

8
src/content/plugins/hyprwinwrap.md
View file

@ -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
---

18
src/content/plugins/readme.md
View file

@ -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.

26
src/lib/components/Title.svelte
View file

@ -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>

3
src/lib/components/Title/TitleHeading.svelte Executable file
View file

@ -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>

3
src/lib/components/Title/TitlePre.svelte Normal file
View file

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

3
src/lib/components/Title/TitleSubtile.svelte Normal file
View file

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

27
src/lib/components/Title/TitleWrapper.svelte Executable file
View file

@ -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>

36
src/routes/api/plugins/+server.js
View file

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

10
src/routes/hall_of_fame/+page.svelte
View file

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

11
src/routes/home-slices/CommunitySlice.svelte
View file

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

10
src/routes/home-slices/FeaturesSlice.svelte
View file

@ -6,7 +6,7 @@
import TabIcon from '~icons/gg/tab' import TabIcon from '~icons/gg/tab'
import IpcIcon from '~icons/gg/media-podcast' import IpcIcon from '~icons/gg/media-podcast'
import TouchpadIcon from '~icons/gg/touchpad' 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 Hypractive from './Hypractive.svelte'
import configDefaultImage from '$lib/images/features/config_default.webp' import configDefaultImage from '$lib/images/features/config_default.webp'
import configHoverImage from '$lib/images/features/config_hover.webp' import configHoverImage from '$lib/images/features/config_hover.webp'
@ -15,12 +15,14 @@
import tileDefaultImage from '$lib/images/features/tiling_default.webp' import tileDefaultImage from '$lib/images/features/tiling_default.webp'
import tileHoverImage from '$lib/images/features/tiling_hover.webp' import tileHoverImage from '$lib/images/features/tiling_hover.webp'
import CardsContainer from '$lib/components/CardsContainer.svelte' import CardsContainer from '$lib/components/CardsContainer.svelte'
import TitlePre from '$lib/components/Title/TitlePre.svelte'
import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
</script> </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> <Title>
<span slot="pre">TLDR</span> <TitlePre slot="pre">TLDR</TitlePre>
<span slot="title">Features</span> <TitleHeading slot="title" class="">Features</TitleHeading>
</Title> </Title>
<CardsContainer <CardsContainer

8
src/routes/home-slices/HallOfFameSlice.svelte
View file

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

9
src/routes/home-slices/InstallSlice.svelte
View file

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

10
src/routes/home-slices/NewsSlice.svelte
View file

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

15
src/routes/news/+page.svelte
View file

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

8
src/routes/news/[slug]/+page.svelte
View file

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

15
src/routes/plugins/+page.svelte
View file

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

10
src/routes/plugins/PluginCard.svelte
View file

@ -24,7 +24,8 @@
class={$$restProps.class} class={$$restProps.class}
gradientOpacity={0.5} gradientOpacity={0.5}
><a ><a
href="/plugins/{plugin.slug}" href={plugin.url}
target="_blank"
class="relative flex size-full min-h-max items-stretch @container" class="relative flex size-full min-h-max items-stretch @container"
> >
<!-- Main content --> <!-- Main content -->
@ -54,7 +55,10 @@
aria-hidden="true" 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" 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> </div>
{/if} {/if}
</div> </div>
@ -125,7 +129,7 @@
} }
.logo-container:not(.banner) { .logo-container:not(.banner) {
@container (max-width: theme(screens.md)) { @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;
} }
} }

19
src/routes/plugins/[slug]/+page.js
View file

@ -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}`)
}
}

188
src/routes/plugins/[slug]/+page.svelte
View file

@ -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>