mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-12-22 02:19:47 +01:00
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
This commit is contained in:
VDawg
GitHub
parent
24b64047f6
commit
86e6d1c7f0
29 changed files with 229 additions and 382 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
|
||||
|
|
|
|||
103
src/content/plugins.toml
Normal file
103
src/content/plugins.toml
Normal 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"
|
||||
|
|
@ -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,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
3
src/lib/components/Title/TitleHeading.svelte
Executable 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
3
src/lib/components/Title/TitlePre.svelte
Normal 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
3
src/lib/components/Title/TitleSubtile.svelte
Normal 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
27
src/lib/components/Title/TitleWrapper.svelte
Executable 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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }}>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.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