mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2025-05-12 21:20:37 +01:00
plugins as toml, no plugin sub-pages
fixup toml
This commit is contained in:
VDawg
parent
b4c7ccca6e
commit
54b1bdadd1
16 changed files with 94 additions and 318 deletions
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
70
src/content/plugins.toml
Normal file
70
src/content/plugins.toml
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
# - 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 = "Auto-grouping for dwindle mode"
|
||||
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
|
||||
|
|
@ -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
|
||||
---
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
name: CSGO Vulkan Fix
|
||||
url: https://github.com/hyprwm/hyprland-plugins
|
||||
category: Miscellaneous
|
||||
tagline: CSGO custom resolutions fix
|
||||
---
|
||||
|
|
@ -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
|
||||
---
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
---
|
||||
|
|
@ -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
|
||||
---
|
||||
|
|
@ -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
|
||||
---
|
||||
|
|
@ -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.
|
||||
|
|
@ -1,28 +1,18 @@
|
|||
import { json } from '@sveltejs/kit'
|
||||
import path from 'path'
|
||||
import { parse } from 'smol-toml'
|
||||
import { readFile } from 'node:fs/promises'
|
||||
import pluginsToml from '../../../content/plugins.toml?raw'
|
||||
|
||||
/** 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 = parse(pluginsToml).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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@
|
|||
)
|
||||
),
|
||||
R.entries(),
|
||||
R.tap((x) => console.log({ x })),
|
||||
R.sort(([a], [b]) => a.localeCompare(b))
|
||||
)
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
@ -125,7 +126,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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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}`)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
<script>
|
||||
import CardsContainer from '$lib/components/CardsContainer.svelte'
|
||||
import Title from '$lib/components/Title/TitleWrapper.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>
|
||||
Loading…
Reference in a new issue