feat: announce Homarr v2 beta (#6793)
* feat: announce Homarr v2 beta * chore: refine v2 beta announcement * feat: expand v2 beta guidance * chore: refine v2 beta resources * chore: simplify v2 beta modal * chore: improve v2 beta feedback links * fix: keep v2 modal above header * chore: sharpen v2 beta message * fix: clear header for v2 modal
This commit is contained in:
Thomas authored and 
GitHub committed
1 parent
da32acb4f0
commit
32a51c1e60
13 files changed
+799
-97
No files matched your search
@@ -0,0 +1,79 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Alert, Button, Group, Stack } from "@mantine/core";
|
||||
import { IconAlertTriangle, IconDownload } from "@tabler/icons-react";
|
||||
|
||||
import { useScopedI18n } from "@homarr/translation/client";
|
||||
|
||||
import { DangerousActionConfirmation } from "./dangerous-action-confirmation";
|
||||
|
||||
export const BackupExportButton = () => {
|
||||
const t = useScopedI18n("management.page.tool.backup.export");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
|
||||
const handleExport = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch("/api/backup/export");
|
||||
if (!response.ok) {
|
||||
const errorMessage = await response.json().then(
|
||||
(data) => data.error,
|
||||
() => `Server returned ${response.status}`,
|
||||
);
|
||||
throw new Error(errorMessage ?? t("error"));
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const filename =
|
||||
response.headers.get("Content-Disposition")?.match(/filename="(.+)"/)?.[1] ?? "homarr-backup.zip";
|
||||
|
||||
const anchor = document.createElement("a");
|
||||
anchor.href = url;
|
||||
anchor.download = filename;
|
||||
anchor.click();
|
||||
URL.revokeObjectURL(url);
|
||||
setShowConfirm(false);
|
||||
} catch (cause) {
|
||||
setError(cause instanceof Error ? cause.message : t("error"));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack gap="sm">
|
||||
{error && (
|
||||
<Alert color="red" icon={<IconAlertTriangle size={16} />}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{showConfirm ? (
|
||||
<DangerousActionConfirmation
|
||||
title={t("confirm.title")}
|
||||
warningTitle={t("confirm.warningTitle")}
|
||||
warningBody={t("confirm.warningBody")}
|
||||
typePrompt={t("confirm.typePrompt", { phrase: "I understand" })}
|
||||
submitLabel={t("confirm.submit")}
|
||||
submitIcon={<IconDownload size={16} />}
|
||||
cancelLabel={t("confirm.cancel")}
|
||||
onConfirm={handleExport}
|
||||
onCancel={() => setShowConfirm(false)}
|
||||
disabled={loading}
|
||||
color="orange"
|
||||
/>
|
||||
) : (
|
||||
<Group>
|
||||
<Button leftSection={<IconDownload size={16} />} loading={loading} onClick={() => setShowConfirm(true)}>
|
||||
{t("button")}
|
||||
</Button>
|
||||
</Group>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,3 +1,4 @@
|
||||
export { BackupExportButton } from "./backup-export-button";
|
||||
export { DatabaseRestoreFlow } from "./database-restore-flow";
|
||||
export { DangerousActionConfirmation } from "./dangerous-action-confirmation";
|
||||
export type { BackupAnalysis, RestoreStep } from "./types";
|
||||
@@ -19,25 +19,31 @@ interface Props {
|
||||
export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
|
||||
return (
|
||||
<AppShellHeader maw="100vw" zIndex={201} style={{ overflowX: "hidden" }}>
|
||||
<Group h="100%" gap="xl" px="md" justify="apart" wrap="nowrap">
|
||||
<Group h="100%" align="center" style={{ flex: 1 }} wrap="nowrap">
|
||||
{hasNavigation && <ClientBurger />}
|
||||
<UnstyledButton component={Link} href="/">
|
||||
{logo ?? <HomarrLogoWithTitle size="md" />}
|
||||
</UnstyledButton>
|
||||
</Group>
|
||||
<TourTarget id="board-search">
|
||||
<DesktopSearchInput />
|
||||
</TourTarget>
|
||||
<Group h="100%" align="center" justify="end" style={{ flex: 1 }} wrap="nowrap">
|
||||
{actions}
|
||||
<MobileSearchButton />
|
||||
<TourTarget id="board-user-menu">
|
||||
<UserButton />
|
||||
</TourTarget>
|
||||
</Group>
|
||||
</Group>
|
||||
<LazySpotlight />
|
||||
<MainHeaderContent logo={logo} actions={actions} hasNavigation={hasNavigation} />
|
||||
</AppShellHeader>
|
||||
);
|
||||
};
|
||||
|
||||
export const MainHeaderContent = ({ logo, actions, hasNavigation = true }: Props) => (
|
||||
<>
|
||||
<Group h={60} gap="xl" px="md" justify="apart" wrap="nowrap">
|
||||
<Group h="100%" align="center" style={{ flex: 1 }} wrap="nowrap">
|
||||
{hasNavigation && <ClientBurger />}
|
||||
<UnstyledButton component={Link} href="/">
|
||||
{logo ?? <HomarrLogoWithTitle size="md" />}
|
||||
</UnstyledButton>
|
||||
</Group>
|
||||
<TourTarget id="board-search">
|
||||
<DesktopSearchInput />
|
||||
</TourTarget>
|
||||
<Group h="100%" align="center" justify="end" style={{ flex: 1 }} wrap="nowrap">
|
||||
{actions}
|
||||
<MobileSearchButton />
|
||||
<TourTarget id="board-user-menu">
|
||||
<UserButton />
|
||||
</TourTarget>
|
||||
</Group>
|
||||
</Group>
|
||||
<LazySpotlight />
|
||||
</>
|
||||
);
|
||||
@@ -10,11 +10,13 @@ import { navigationCollapsedAtom } from "./header/burger";
|
||||
interface ClientShellProps {
|
||||
hasHeader?: boolean;
|
||||
hasNavigation?: boolean;
|
||||
headerHeight?: number;
|
||||
}
|
||||
|
||||
export const ClientShell = ({
|
||||
hasHeader = true,
|
||||
hasNavigation = true,
|
||||
headerHeight = 60,
|
||||
children,
|
||||
}: PropsWithChildren<ClientShellProps>) => {
|
||||
const collapsed = useAtomValue(navigationCollapsedAtom);
|
||||
@@ -23,7 +25,7 @@ export const ClientShell = ({
|
||||
return (
|
||||
<AppShell
|
||||
{...backgroundProps}
|
||||
header={hasHeader ? { height: 60 } : undefined}
|
||||
header={hasHeader ? { height: headerHeight } : undefined}
|
||||
navbar={
|
||||
hasNavigation
|
||||
? {
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
export const v2BetaBlogUrl = "https://v2.preview.homarr.dev/blog/2026/09/03/homarr-2.0";
|
||||
export const v2BetaDocsUrl = "https://v2.preview.homarr.dev/docs/getting-started/";
|
||||
export const v2BetaPreviewUrl = "https://app-v2.preview.homarr.dev";
|
||||
export const v2BetaWorkshopUrl = "https://v2.preview.homarr.dev/workshop";
|
||||
export const v2BetaFeedbackUrl = "https://github.com/homarr-labs/homarr/issues/new?template=v2_beta_feedback.yml";
|
||||
export const v2BetaDiscussionUrl = "https://github.com/homarr-labs/homarr/issues/6600";
|
||||
export const discordInviteUrl = "https://discord.com/invite/aCsmEV5RgA";
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
.banner {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
height: 52px;
|
||||
overflow: hidden;
|
||||
color: var(--mantine-color-white);
|
||||
background: var(--mantine-color-red-9);
|
||||
border-bottom: 1px solid rgb(255 255 255 / 18%);
|
||||
}
|
||||
|
||||
.banner::after {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
right: -0.35rem;
|
||||
bottom: -1.75rem;
|
||||
color: rgb(255 255 255 / 9%);
|
||||
font-size: 5.5rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
content: "v2";
|
||||
}
|
||||
|
||||
.copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.modalHero {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
color: var(--mantine-color-white);
|
||||
background: var(--mantine-color-red-9);
|
||||
}
|
||||
|
||||
.modalHero::after {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
right: -0.75rem;
|
||||
bottom: -1.5rem;
|
||||
color: rgb(255 255 255 / 8%);
|
||||
font-size: 12rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
content: "v2";
|
||||
}
|
||||
|
||||
.featureCard {
|
||||
height: 100%;
|
||||
background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
|
||||
}
|
||||
|
||||
.diffViewer {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diffHeader {
|
||||
background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-7));
|
||||
border-bottom: 1px solid var(--mantine-color-default-border);
|
||||
}
|
||||
|
||||
.diffCode {
|
||||
margin: 0;
|
||||
padding-block: var(--mantine-spacing-sm);
|
||||
overflow-x: auto;
|
||||
color: light-dark(var(--mantine-color-dark-8), var(--mantine-color-gray-2));
|
||||
background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-9));
|
||||
font-family: var(--mantine-font-family-monospace);
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.diffLine_context,
|
||||
.diffLine_added,
|
||||
.diffLine_removed {
|
||||
display: block;
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
padding-inline: var(--mantine-spacing-md);
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.diffLine_added {
|
||||
color: light-dark(var(--mantine-color-green-9), var(--mantine-color-green-3));
|
||||
background: light-dark(var(--mantine-color-green-0), rgb(47 158 68 / 15%));
|
||||
}
|
||||
|
||||
.diffLine_removed {
|
||||
color: light-dark(var(--mantine-color-red-9), var(--mantine-color-red-3));
|
||||
background: light-dark(var(--mantine-color-red-0), rgb(250 82 82 / 15%));
|
||||
}
|
||||
@@ -0,0 +1,377 @@
|
||||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import {
|
||||
ActionIcon,
|
||||
Accordion,
|
||||
Alert,
|
||||
Anchor,
|
||||
Box,
|
||||
Button,
|
||||
getDefaultZIndex,
|
||||
Group,
|
||||
Paper,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconArrowsMove,
|
||||
IconBook2,
|
||||
IconBrandCss3,
|
||||
IconBrandDiscord,
|
||||
IconBrandGithub,
|
||||
IconDatabaseExport,
|
||||
IconExternalLink,
|
||||
IconHeartHandshake,
|
||||
IconRobot,
|
||||
IconRocket,
|
||||
IconTerminal2,
|
||||
IconWand,
|
||||
IconX,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
import { setClientCookie } from "@homarr/common";
|
||||
import { createModal, useModalAction } from "@homarr/modals";
|
||||
|
||||
import { BackupExportButton } from "~/components/backup";
|
||||
import {
|
||||
discordInviteUrl,
|
||||
v2BetaBlogUrl,
|
||||
v2BetaDiscussionUrl,
|
||||
v2BetaDocsUrl,
|
||||
v2BetaFeedbackUrl,
|
||||
v2BetaPreviewUrl,
|
||||
v2BetaWorkshopUrl,
|
||||
} from "./constants";
|
||||
import classes from "./v2-beta-announcement.module.css";
|
||||
|
||||
const diffLineClassNames = {
|
||||
added: classes.diffLine_added,
|
||||
context: classes.diffLine_context,
|
||||
removed: classes.diffLine_removed,
|
||||
} as const;
|
||||
|
||||
const composeDiffLines = [
|
||||
{ kind: "context", value: " services:" },
|
||||
{ kind: "context", value: " homarr:" },
|
||||
{ kind: "added", value: "+ image: ghcr.io/homarr-labs/homarr-test:v2" },
|
||||
{ kind: "removed", value: "- image: ghcr.io/homarr-labs/homarr:latest" },
|
||||
{ kind: "context", value: " ports:" },
|
||||
{ kind: "context", value: ' - "7575:7575"' },
|
||||
{ kind: "context", value: " volumes:" },
|
||||
{ kind: "context", value: " - homarr-v2:/appdata" },
|
||||
{ kind: "context", value: " environment:" },
|
||||
{ kind: "context", value: " SECRET_ENCRYPTION_KEY: <SECRET_KEY>" },
|
||||
{ kind: "added", value: "+ WORKSHOP_API_URL: https://v2.preview.homarr.dev/ # Only during the beta" },
|
||||
{ kind: "context", value: "" },
|
||||
{ kind: "context", value: " volumes:" },
|
||||
{ kind: "context", value: " homarr-v2:" },
|
||||
] as const;
|
||||
|
||||
interface V2BetaAnnouncementProps {
|
||||
canExportBackup: boolean;
|
||||
dismissalCookieName: string;
|
||||
onDismiss: () => void;
|
||||
}
|
||||
|
||||
export const V2BetaAnnouncement = ({ canExportBackup, dismissalCookieName, onDismiss }: V2BetaAnnouncementProps) => {
|
||||
const { openModal } = useModalAction(V2BetaAnnouncementModal);
|
||||
|
||||
const dismiss = () => {
|
||||
setClientCookie(dismissalCookieName, "dismissed", {
|
||||
maxAge: 60 * 60 * 24 * 7,
|
||||
path: "/",
|
||||
sameSite: "lax",
|
||||
secure: window.location.protocol === "https:",
|
||||
});
|
||||
onDismiss();
|
||||
};
|
||||
|
||||
return (
|
||||
<Box component="aside" className={classes.banner} aria-label="Homarr v2 beta announcement">
|
||||
<Group h="100%" justify="space-between" gap="sm" wrap="nowrap" px="md">
|
||||
<Box className={classes.copy}>
|
||||
<Text fw={750} size="sm" truncate>
|
||||
We've been cooking, Homarr v2 beta is here
|
||||
</Text>
|
||||
<Text className={classes.subtitle} visibleFrom="sm" size="xs" truncate>
|
||||
Custom Widgets & CSS workshop, new drag-and-drop, new container system, side-bars are back, new widgets
|
||||
and so much more, come check it out and help us make v2 ready for everyone
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Group gap={6} wrap="nowrap">
|
||||
<Button variant="white" color="red" size="compact-sm" onClick={() => openModal({ canExportBackup })}>
|
||||
Explore v2
|
||||
</Button>
|
||||
<ActionIcon variant="subtle" color="white" onClick={dismiss} aria-label="Dismiss the v2 beta announcement">
|
||||
<IconX size={18} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Group>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
interface V2BetaAnnouncementModalProps {
|
||||
canExportBackup: boolean;
|
||||
}
|
||||
|
||||
const V2BetaAnnouncementModal = createModal<V2BetaAnnouncementModalProps>(({ innerProps }) => {
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
<Paper className={classes.modalHero} p={{ base: "lg", sm: "xl" }} radius="md">
|
||||
<Stack gap="sm" maw={760}>
|
||||
<Title order={2}>Help us get Homarr v2 ready</Title>
|
||||
<Text>
|
||||
We've been working on Homarr's v2 update for a while now. There is no fixed release date yet, it
|
||||
will be ready when it's ready. We{" "}
|
||||
<Text span inherit fw={700}>
|
||||
need your help
|
||||
</Text>{" "}
|
||||
and feedback to help us become confident enough to release it for everyone.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
|
||||
<FeatureCard icon={<IconBrandCss3 size={21} />} title="Workshop">
|
||||
Share and discover Custom Widgets and CSS made by the Homarr community.
|
||||
</FeatureCard>
|
||||
<FeatureCard icon={<IconArrowsMove size={21} />} title="Complete drag-and-drop rewrite">
|
||||
Move, resize, multi-select, and arrange your dashboard with a board editor rebuilt from the ground up.
|
||||
</FeatureCard>
|
||||
<FeatureCard icon={<IconWand size={21} />} title="Custom Widgets v2">
|
||||
We think you can make almost any widget with live previews, API requests, options, actions, and validation.
|
||||
</FeatureCard>
|
||||
<FeatureCard icon={<IconRobot size={21} />} title="Assistant">
|
||||
Assistant can directly make a Custom Widget for you. Try giving it the API docs for your latest selfhosted
|
||||
tool and asking it to build a custom widget for it.
|
||||
</FeatureCard>
|
||||
</SimpleGrid>
|
||||
|
||||
<Accordion variant="separated" radius="md">
|
||||
<Accordion.Item value="installation">
|
||||
<Accordion.Control
|
||||
icon={
|
||||
<ThemeIcon variant="light" color="red" radius="md" size="lg">
|
||||
<IconTerminal2 size={20} />
|
||||
</ThemeIcon>
|
||||
}
|
||||
aria-label="Test Homarr v2 on your server"
|
||||
>
|
||||
<Box>
|
||||
<Text fw={750}>Test Homarr v2 on your server</Text>
|
||||
<Text c="dimmed" size="xs">
|
||||
Back up this instance, then update your Docker Compose file.
|
||||
</Text>
|
||||
</Box>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<V2BetaInstallInstructions canExportBackup={innerProps.canExportBackup} />
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
|
||||
<Alert variant="light" color="red" icon={<IconHeartHandshake size={22} />} title="Your testing is essential">
|
||||
<Text size="sm">
|
||||
Everyone uses Homarr in a different way. If anything breaks or does not feel right, the easiest way to get it
|
||||
fixed as soon as possible is to{" "}
|
||||
<Anchor
|
||||
href={discordInviteUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
c="inherit"
|
||||
fz="sm"
|
||||
fw={700}
|
||||
underline="always"
|
||||
>
|
||||
tell us about it on Discord
|
||||
</Anchor>{" "}
|
||||
in our dedicated v2 channel. You can also{" "}
|
||||
<Anchor
|
||||
href={v2BetaFeedbackUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
c="inherit"
|
||||
fz="sm"
|
||||
fw={700}
|
||||
underline="always"
|
||||
>
|
||||
open a dedicated GitHub issue
|
||||
</Anchor>
|
||||
{"."} Every report matters.
|
||||
</Text>
|
||||
</Alert>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
|
||||
<Button
|
||||
component="a"
|
||||
href={v2BetaPreviewUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
size="md"
|
||||
leftSection={<IconRocket size={18} />}
|
||||
>
|
||||
Try the hosted preview
|
||||
</Button>
|
||||
<Button
|
||||
component="a"
|
||||
href={v2BetaWorkshopUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="light"
|
||||
size="md"
|
||||
leftSection={<IconBrandCss3 size={18} />}
|
||||
>
|
||||
Open Workshop
|
||||
</Button>
|
||||
<Button
|
||||
component="a"
|
||||
href={v2BetaDocsUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="default"
|
||||
size="md"
|
||||
leftSection={<IconBook2 size={18} />}
|
||||
>
|
||||
Read the v2 docs
|
||||
</Button>
|
||||
<Button
|
||||
component="a"
|
||||
href={v2BetaBlogUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="default"
|
||||
size="md"
|
||||
rightSection={<IconExternalLink size={16} />}
|
||||
>
|
||||
See everything new
|
||||
</Button>
|
||||
<Button
|
||||
component="a"
|
||||
href={discordInviteUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="default"
|
||||
size="md"
|
||||
leftSection={<IconBrandDiscord size={18} />}
|
||||
>
|
||||
Join us on Discord
|
||||
</Button>
|
||||
<Button
|
||||
component="a"
|
||||
href={v2BetaDiscussionUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="default"
|
||||
size="md"
|
||||
rightSection={<IconExternalLink size={15} />}
|
||||
>
|
||||
Follow v2 development
|
||||
</Button>
|
||||
</SimpleGrid>
|
||||
|
||||
<Button
|
||||
component="a"
|
||||
href={v2BetaFeedbackUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="light"
|
||||
color="red"
|
||||
size="md"
|
||||
leftSection={<IconBrandGithub size={18} />}
|
||||
>
|
||||
Report anything that breaks or feels wrong
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
}).withOptions({
|
||||
defaultTitle: "Homarr v2 beta",
|
||||
size: 1000,
|
||||
yOffset: 128,
|
||||
zIndex: getDefaultZIndex("modal") + 2,
|
||||
});
|
||||
|
||||
interface V2BetaInstallInstructionsProps {
|
||||
canExportBackup: boolean;
|
||||
}
|
||||
|
||||
const V2BetaInstallInstructions = ({ canExportBackup }: V2BetaInstallInstructionsProps) => (
|
||||
<Stack gap="lg">
|
||||
{canExportBackup ? (
|
||||
<Paper withBorder p="md" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Group gap="sm">
|
||||
<IconDatabaseExport size={22} />
|
||||
<Title order={4}>Back up this Homarr instance</Title>
|
||||
</Group>
|
||||
<Text c="dimmed" size="sm">
|
||||
Download a full backup before testing v2. The archive contains sensitive data, so keep it somewhere safe.
|
||||
</Text>
|
||||
<BackupExportButton />
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : (
|
||||
<Alert color="blue" title="Back up your database before continuing">
|
||||
Direct backup downloads are available here to Homarr administrators using SQLite. If you use MySQL or
|
||||
PostgreSQL, back up the database with its own tools before testing v2.
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Stack gap="xs">
|
||||
<Title order={3}>Update your Docker Compose file</Title>
|
||||
<Text c="dimmed" size="sm">
|
||||
Replace the current image and add the beta-only Workshop URL. Use the example below as a starting point.
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Paper withBorder radius="md" className={classes.diffViewer}>
|
||||
<Group gap="xs" px="md" py="sm" className={classes.diffHeader}>
|
||||
<IconTerminal2 size={17} />
|
||||
<Text fw={700} size="sm">
|
||||
docker-compose.yml
|
||||
</Text>
|
||||
</Group>
|
||||
<Box component="pre" className={classes.diffCode} aria-label="Docker Compose changes for Homarr v2 beta">
|
||||
{composeDiffLines.map((line, index) => (
|
||||
<Box component="span" className={diffLineClassNames[line.kind]} key={`${line.kind}-${index}`}>
|
||||
{line.value || " "}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Text c="dimmed" size="xs">
|
||||
Replace <code><SECRET_KEY></code> with your existing encryption key. The Workshop URL is only required while
|
||||
the beta uses the preview Workshop.
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
interface FeatureCardProps {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const FeatureCard = ({ icon, title, children }: FeatureCardProps) => (
|
||||
<Paper className={classes.featureCard} withBorder p="md" radius="md">
|
||||
<Group gap="sm" align="flex-start" wrap="nowrap">
|
||||
<ThemeIcon variant="light" color="red" radius="md" size="lg">
|
||||
{icon}
|
||||
</ThemeIcon>
|
||||
<Box>
|
||||
<Text fw={750} size="sm">
|
||||
{title}
|
||||
</Text>
|
||||
<Text c="dimmed" size="sm">
|
||||
{children}
|
||||
</Text>
|
||||
</Box>
|
||||
</Group>
|
||||
</Paper>
|
||||
);
|
||||
@@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import type { PropsWithChildren, ReactNode } from "react";
|
||||
import { useState } from "react";
|
||||
import { AppShellHeader, AppShellMain } from "@mantine/core";
|
||||
|
||||
import { ClientShell } from "../shell";
|
||||
import { V2BetaAnnouncement } from "./v2-beta-announcement";
|
||||
|
||||
interface V2BetaDashboardShellProps {
|
||||
canExportBackup: boolean;
|
||||
dismissalCookieName: string;
|
||||
initiallyDismissed: boolean;
|
||||
header: ReactNode;
|
||||
}
|
||||
|
||||
export const V2BetaDashboardShell = ({
|
||||
canExportBackup,
|
||||
dismissalCookieName,
|
||||
initiallyDismissed,
|
||||
header,
|
||||
children,
|
||||
}: PropsWithChildren<V2BetaDashboardShellProps>) => {
|
||||
const [isAnnouncementVisible, setIsAnnouncementVisible] = useState(!initiallyDismissed);
|
||||
const headerHeight = isAnnouncementVisible ? 112 : 60;
|
||||
|
||||
return (
|
||||
<ClientShell hasNavigation={false} headerHeight={headerHeight}>
|
||||
<AppShellHeader maw="100vw" zIndex={201} style={{ overflowX: "hidden" }}>
|
||||
{isAnnouncementVisible && (
|
||||
<V2BetaAnnouncement
|
||||
canExportBackup={canExportBackup}
|
||||
dismissalCookieName={dismissalCookieName}
|
||||
onDismiss={() => setIsAnnouncementVisible(false)}
|
||||
/>
|
||||
)}
|
||||
{header}
|
||||
</AppShellHeader>
|
||||
<AppShellMain>{children}</AppShellMain>
|
||||
</ClientShell>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user