immich-app/static-pages
1
0
Fork 0
mirror of https://github.com/immich-app/static-pages.git synced 2026-09-30 13:23:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: app shell for get.immich.app

Browse Source
This commit is contained in:
bo0tzz
2026-08-29 12:35:20 +02:00
parent 8d91581924
commit 25c939ed82
3 changed files with 48 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/get.immich.app/src/app.html
+15 -2
View File
@@ -1,11 +1,24 @@
<!doctype html>
<html lang="en">
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Immich</title>
<meta name="theme-color" content="currentColor" />
<script>
try {
const preference = JSON.parse(localStorage.getItem('immich-ui-theme'));
const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
if (preference === 'light' || (preference !== 'dark' && !prefersDark)) {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
}
} catch {
// noop
}
</script>
<meta
name="description"
content="Self-hosted photo and video management solution. Easily back up, organize, and manage your photos on your own server. Immich helps you
@@ -33,7 +46,7 @@ browse, search and organize your photos and videos with ease, without sacrificin
<meta name="twitter:image" content="/img/social-preview.png" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="bg-light text-dark dark">
<body data-sveltekit-preload-data="hover" class="bg-light text-dark">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
apps/get.immich.app/src/routes/+layout.svelte
+30 -2
View File
@@ -1,10 +1,38 @@
<script lang="ts">
import PageContent from '$common/components/PageContent.svelte';
import '$lib/app.css';
import { TooltipProvider } from '@immich/ui';
import {
AppShell,
AppShellHeader,
ControlBar,
ControlBarContent,
Logo,
SupporterBadge,
Text,
ThemeSwitcher,
TooltipProvider,
} from '@immich/ui';
let { children } = $props();
</script>
<TooltipProvider>
{@render children()}
<AppShell>
<AppShellHeader class="w-full items-stretch">
<ControlBar variant="ghost" static class="h-full items-stretch gap-0 px-0">
<ControlBarContent class="items-stretch">
<SupporterBadge effect="always" class="w-full justify-between rounded-none px-4 py-0">
<a href="/" class="flex items-center gap-3">
<Logo size="large" variant="icon" />
<Text size="giant" color="primary" fontWeight="bold" class="text-2xl">Get Immich</Text>
</a>
<ThemeSwitcher />
</SupporterBadge>
</ControlBarContent>
</ControlBar>
</AppShellHeader>
<PageContent>
{@render children()}
</PageContent>
</AppShell>
</TooltipProvider>
apps/get.immich.app/src/routes/+page.svelte
+3 -10
View File
@@ -2,7 +2,6 @@
import portainerIcon from '$common/img/portainer.svg';
import truenasIcon from '$common/img/truenas-scale.svg';
import unraidIcon from '$common/img/unraid.svg';
import FullPageLayout from '$common/components/FullPageLayout.svelte';
import {
Button,
Card,
@@ -12,12 +11,11 @@
CardHeader,
CardTitle,
Constants,
Container,
Heading,
Icon,
Link,
Logo,
Stack,
SupporterBadge,
Text,
appStoreBadge,
fdroidBadge,
@@ -26,13 +24,8 @@
import { mdiAndroid, mdiDocker } from '@mdi/js';
</script>
<FullPageLayout size="large">
<Container size="large" center>
<Stack gap={8}>
<SupporterBadge effect="always">
<Logo size="large" variant="icon" />
<Heading size="large" color="primary" tag="h1">Get Immich</Heading>
</SupporterBadge>
<Stack gap={2}>
<div>
<Heading size="large" tag="h2">Mobile Apps</Heading>
@@ -143,4 +136,4 @@
</section>
</Stack>
</Stack>
</FullPageLayout>
</Container>