From 17c877c9730b316baaa56ec3f4cc88fbc8fc2fea Mon Sep 17 00:00:00 2001 From: edde746 <86283021+edde746@users.noreply.github.com> Date: Thu, 3 Sep 2026 08:15:14 +0200 Subject: [PATCH] chore(website): share page metadata, model screenshot devices as records, honor reduced motion Home, privacy, and scan each repeated the same 13 title/canonical/Open Graph/Twitter tags; PageMetadata now emits them once with route-specific title, description, url, and an optional noindex. Screenshots keeps one record per device instead of four parallel arrays plus a lookup table. FAQ hash jumps and screenshot arrows forced behavior: 'smooth' from JS, which bypasses the prefers-reduced-motion override in layout.css; both now defer to CSS scroll-behavior. Removes the unused adapter-auto dependency. --- website/bun.lock | 3 - website/package.json | 1 - website/src/lib/components/FAQ.svelte | 2 +- .../src/lib/components/PageMetadata.svelte | 31 +++++ website/src/lib/components/Screenshots.svelte | 119 ++++++++---------- website/src/routes/+page.svelte | 20 +-- website/src/routes/privacy/+page.svelte | 19 +-- website/src/routes/scan/+page.svelte | 20 +-- 8 files changed, 92 insertions(+), 123 deletions(-) create mode 100644 website/src/lib/components/PageMetadata.svelte diff --git a/website/bun.lock b/website/bun.lock index 95952d3a9..ac209181c 100644 --- a/website/bun.lock +++ b/website/bun.lock @@ -9,7 +9,6 @@ }, "devDependencies": { "@iconify/json": "^2.2.474", - "@sveltejs/adapter-auto": "^7.0.0", "@sveltejs/enhanced-img": "^0.10.4", "@sveltejs/kit": "^2.70.2", "@sveltejs/vite-plugin-svelte": "^6.2.4", @@ -215,8 +214,6 @@ "@sveltejs/acorn-typescript": ["@sveltejs/acorn-typescript@1.0.11", "", { "peerDependencies": { "acorn": "^8.9.0" } }, "sha512-LFuZUkjJ9iF7JZye/aG5XM0SFcQ5VyL0oVX4WJ9dc0Va3R3s0OauX1BESVCb+YN/ol8TAfqGDDAQsTG627Y5kw=="], - "@sveltejs/adapter-auto": ["@sveltejs/adapter-auto@7.0.0", "", { "peerDependencies": { "@sveltejs/kit": "^2.0.0" } }, "sha512-ImDWaErTOCkRS4Gt+5gZuymKFBobnhChXUZ9lhUZLahUgvA4OOvRzi3sahzYgbxGj5nkA6OV0GAW378+dl/gyw=="], - "@sveltejs/adapter-static": ["@sveltejs/adapter-static@3.0.10", "", { "peerDependencies": { "@sveltejs/kit": "^2.0.0" } }, "sha512-7D9lYFWJmB7zxZyTE/qxjksvMqzMuYrrsyh1f4AlZqeZeACPRySjbC3aFiY55wb1tWUaKOQG9PVbm74JcN2Iew=="], "@sveltejs/enhanced-img": ["@sveltejs/enhanced-img@0.10.4", "", { "dependencies": { "magic-string": "^0.30.5", "sharp": "^0.34.1", "svelte-parse-markup": "^0.1.5", "vite-imagetools": "^9.0.3", "zimmerframe": "^1.1.2" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^6.0.0 || ^7.0.0", "svelte": "^5.0.0", "vite": "^6.3.0 || >=7.0.0" } }, "sha512-Am5nmAKUo7Nboqq7Dhtfn7dcXA087d7gIz6Vecn1opB41aJ680+0q9U9KvEcMgduOyeiwckTIOQOx4Mmq9GcvA=="], diff --git a/website/package.json b/website/package.json index 69bb09a6c..8332f7b0b 100644 --- a/website/package.json +++ b/website/package.json @@ -15,7 +15,6 @@ }, "devDependencies": { "@iconify/json": "^2.2.474", - "@sveltejs/adapter-auto": "^7.0.0", "@sveltejs/enhanced-img": "^0.10.4", "@sveltejs/kit": "^2.70.2", "@sveltejs/vite-plugin-svelte": "^6.2.4", diff --git a/website/src/lib/components/FAQ.svelte b/website/src/lib/components/FAQ.svelte index f764d4762..45286b330 100644 --- a/website/src/lib/components/FAQ.svelte +++ b/website/src/lib/components/FAQ.svelte @@ -15,7 +15,7 @@ if (hashIndex !== -1) { openIndex = hashIndex; requestAnimationFrame(() => { - document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "center" }); + document.getElementById(hash)?.scrollIntoView({ block: "center" }); }); } }); diff --git a/website/src/lib/components/PageMetadata.svelte b/website/src/lib/components/PageMetadata.svelte new file mode 100644 index 000000000..0eb3339e7 --- /dev/null +++ b/website/src/lib/components/PageMetadata.svelte @@ -0,0 +1,31 @@ + + + + {title} + + {#if noindex} + + {/if} + + + + + + + + + + + + + + diff --git a/website/src/lib/components/Screenshots.svelte b/website/src/lib/components/Screenshots.svelte index 560c1cc6f..b7c93ff5d 100644 --- a/website/src/lib/components/Screenshots.svelte +++ b/website/src/lib/components/Screenshots.svelte @@ -27,75 +27,62 @@ type DeviceType = 'phone' | 'tablet' | 'desktop' | 'tv'; type DeviceIconComponent = typeof DevicePhoneIcon | typeof DeviceTabletIcon | typeof DesktopIcon | typeof TvIcon; - const devices: { id: DeviceType; icon: DeviceIconComponent; label: string }[] = [ - { id: 'phone', icon: DevicePhoneIcon, label: 'Phone' }, - { id: 'tablet', icon: DeviceTabletIcon, label: 'Tablet' }, - { id: 'desktop', icon: DesktopIcon, label: 'Desktop' }, - { id: 'tv', icon: TvIcon, label: 'TV' }, - ]; - - const phoneShots = [ - { image: phoneHomeImage, alt: 'Plezy home screen' }, - { image: phoneLibraryImage, alt: 'Plezy library view' }, - { image: phoneMdImage, alt: 'Plezy media details' }, - { image: phoneSearchImage, alt: 'Plezy search' }, - ]; - - const tabletShots = [ - { image: tabletHomeImage, alt: 'Plezy on tablet - home' }, - { image: tabletLibraryImage, alt: 'Plezy on tablet - library' }, - { image: tabletMdImage, alt: 'Plezy on tablet - media details' }, - { image: tabletPlayerImage, alt: 'Plezy on tablet - video player' }, - ]; - - const desktopShots = [ - { image: desktopHomeImage, alt: 'Plezy on desktop - home' }, - { image: desktopLibraryImage, alt: 'Plezy on desktop - library' }, - { image: desktopMdImage, alt: 'Plezy on desktop - media details' }, - { image: desktopPlayerImage, alt: 'Plezy on desktop - video player' }, - ]; - - const tvShots = [ - { image: tvHomeImage, alt: 'Plezy on TV - home' }, - { image: tvLibraryImage, alt: 'Plezy on TV - library' }, - { image: tvMdImage, alt: 'Plezy on TV - media details' }, - { image: tvPlayerImage, alt: 'Plezy on TV - video player' }, - ]; - - const screenshots: Record< - DeviceType, + const devices: { + id: DeviceType; + icon: DeviceIconComponent; + label: string; + sizes: string; + shots: { image: typeof phoneHomeImage; alt: string }[]; + }[] = [ { - shots: typeof phoneShots; - frameClass: string; - sizes: string; - ariaLabel: string; - } - > = { - phone: { - shots: phoneShots, - frameClass: 'phone-frame', + id: 'phone', + icon: DevicePhoneIcon, + label: 'Phone', sizes: '(min-width: 1024px) 214px, 187px', - ariaLabel: 'Phone screenshots', + shots: [ + { image: phoneHomeImage, alt: 'Plezy home screen' }, + { image: phoneLibraryImage, alt: 'Plezy library view' }, + { image: phoneMdImage, alt: 'Plezy media details' }, + { image: phoneSearchImage, alt: 'Plezy search' }, + ], }, - tablet: { - shots: tabletShots, - frameClass: 'tablet-frame', + { + id: 'tablet', + icon: DeviceTabletIcon, + label: 'Tablet', sizes: '(min-width: 1024px) 768px, 672px', - ariaLabel: 'Tablet screenshots', + shots: [ + { image: tabletHomeImage, alt: 'Plezy on tablet - home' }, + { image: tabletLibraryImage, alt: 'Plezy on tablet - library' }, + { image: tabletMdImage, alt: 'Plezy on tablet - media details' }, + { image: tabletPlayerImage, alt: 'Plezy on tablet - video player' }, + ], }, - desktop: { - shots: desktopShots, - frameClass: 'desktop-frame', + { + id: 'desktop', + icon: DesktopIcon, + label: 'Desktop', sizes: '(min-width: 1024px) 768px, 672px', - ariaLabel: 'Desktop screenshots', + shots: [ + { image: desktopHomeImage, alt: 'Plezy on desktop - home' }, + { image: desktopLibraryImage, alt: 'Plezy on desktop - library' }, + { image: desktopMdImage, alt: 'Plezy on desktop - media details' }, + { image: desktopPlayerImage, alt: 'Plezy on desktop - video player' }, + ], }, - tv: { - shots: tvShots, - frameClass: 'tv-frame', + { + id: 'tv', + icon: TvIcon, + label: 'TV', sizes: '(min-width: 1024px) 854px, 747px', - ariaLabel: 'TV screenshots', + shots: [ + { image: tvHomeImage, alt: 'Plezy on TV - home' }, + { image: tvLibraryImage, alt: 'Plezy on TV - library' }, + { image: tvMdImage, alt: 'Plezy on TV - media details' }, + { image: tvPlayerImage, alt: 'Plezy on TV - video player' }, + ], }, - }; + ]; let active: DeviceType = $state('phone'); let loaded: Record = $state({ @@ -144,7 +131,7 @@ intendedScrollLeft = target; canScrollLeft = target > 10; canScrollRight = target < maxScroll - 10; - scrollContainer.scrollTo({ left: target, behavior: 'smooth' }); + scrollContainer.scrollTo({ left: target }); } $effect(() => { @@ -225,11 +212,10 @@
{#each devices as device (device.id)} - {@const screenshot = screenshots[device.id]}
{#if loaded[device.id]} - {#each screenshot.shots as shot} + {#each device.shots as shot}
-
+
@@ -377,6 +363,7 @@ width: 100%; gap: 1.25rem; overflow-x: auto; + scroll-behavior: smooth; padding-bottom: 1rem; opacity: 0; pointer-events: none; diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte index 1f663dc7c..c2c56d88f 100644 --- a/website/src/routes/+page.svelte +++ b/website/src/routes/+page.svelte @@ -5,6 +5,7 @@ import Reviews from '$lib/components/Reviews.svelte'; import FAQ from '$lib/components/FAQ.svelte'; import Footer from '$lib/components/Footer.svelte'; + import PageMetadata from '$lib/components/PageMetadata.svelte'; import { faqSchemaMainEntity } from '$lib/content/faqs'; import { buildSoftwareApplicationOffers } from '$lib/content/software_app_offers'; @@ -13,7 +14,6 @@ const title = "Plezy - A Beautiful Plex & Jellyfin Client"; const description = "Plezy is a beautiful client for Plex and Jellyfin, available on iOS, Android, Android TV, tvOS, Windows, macOS, and Linux. HDR, Dolby Vision, offline downloads, and more."; const url = "https://plezy.app/"; - const image = "https://plezy.app/og/plezy-social.png"; const softwareAppSchema = $derived.by(() => { const schema: Record = { @@ -50,23 +50,9 @@ }; + + - {title} - - - - - - - - - - - - - - - {@html ``} {@html ``} diff --git a/website/src/routes/privacy/+page.svelte b/website/src/routes/privacy/+page.svelte index e4f7f8ab7..eaf95b4fd 100644 --- a/website/src/routes/privacy/+page.svelte +++ b/website/src/routes/privacy/+page.svelte @@ -1,28 +1,13 @@ - - {title} - - - - - - - - - - - - - - - +
diff --git a/website/src/routes/scan/+page.svelte b/website/src/routes/scan/+page.svelte index 24d9d3dfb..3a8786e4f 100644 --- a/website/src/routes/scan/+page.svelte +++ b/website/src/routes/scan/+page.svelte @@ -1,6 +1,7 @@ - - Open in Plezy - - - - - - - - - - - - - - - - +