diff --git a/.github/ISSUE_TEMPLATE/v2_beta_feedback.yml b/.github/ISSUE_TEMPLATE/v2_beta_feedback.yml index c403497dd..5d0b5b38d 100644 --- a/.github/ISSUE_TEMPLATE/v2_beta_feedback.yml +++ b/.github/ISSUE_TEMPLATE/v2_beta_feedback.yml @@ -41,7 +41,7 @@ body: attributes: label: Affected page, feature, or widget description: Name the exact page, widget, integration, container, sidebar, or action involved. - placeholder: Board editor — moving a widget into a container + placeholder: "Board editor: moving a widget into a container" validations: required: true diff --git a/apps/docs/docs/getting-started/index.mdx b/apps/docs/docs/getting-started/index.mdx index 1033ba874..eadead613 100644 --- a/apps/docs/docs/getting-started/index.mdx +++ b/apps/docs/docs/getting-started/index.mdx @@ -13,7 +13,7 @@ import { IconArrowRight } from '@tabler/icons-react'; :::info Homarr v2 beta is available -There is no release date yet: Homarr v2 will become the default when it is ready. Read [what is new](https://v2.preview.homarr.dev/blog), try the [hosted preview](https://app-v2.preview.homarr.dev), [join us on Discord](https://discord.com/invite/aCsmEV5RgA), and [share your feedback](https://github.com/homarr-labs/homarr/issues/new?template=v2_beta_feedback.yml). Everyone uses Homarr differently, so every report helps us find what breaks or does not feel right before release. SQLite administrators can download a full backup directly from the beta announcement before changing images. +There is no release date yet: Homarr v2 will become the default when it is ready. Read [what is new](https://v2.preview.homarr.dev/blog/2026/09/03/homarr-2.0), browse the [v2 documentation](https://v2.preview.homarr.dev/docs) and [Homarr Workshop](https://v2.preview.homarr.dev/workshop), try the [hosted preview](https://app-v2.preview.homarr.dev), [join us on Discord](https://discord.com/invite/aCsmEV5RgA), and [share your feedback](https://github.com/homarr-labs/homarr/issues/new?template=v2_beta_feedback.yml). Everyone uses Homarr differently, so every report helps us find what breaks or does not feel right before release. SQLite administrators can download a full backup directly from the beta announcement before changing images. ::: diff --git a/apps/nextjs/src/components/layout/v2-beta-announcement/constants.ts b/apps/nextjs/src/components/layout/v2-beta-announcement/constants.ts index b8b816d34..22292a1e9 100644 --- a/apps/nextjs/src/components/layout/v2-beta-announcement/constants.ts +++ b/apps/nextjs/src/components/layout/v2-beta-announcement/constants.ts @@ -1,5 +1,7 @@ -export const v2BetaBlogUrl = "https://v2.preview.homarr.dev/blog"; +export const v2BetaBlogUrl = "https://v2.preview.homarr.dev/blog/2026/09/03/homarr-2.0"; +export const v2BetaDocsUrl = "https://v2.preview.homarr.dev/docs"; 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"; diff --git a/apps/nextjs/src/components/layout/v2-beta-announcement/v2-beta-announcement.module.css b/apps/nextjs/src/components/layout/v2-beta-announcement/v2-beta-announcement.module.css index 8939f335d..b35cac1c4 100644 --- a/apps/nextjs/src/components/layout/v2-beta-announcement/v2-beta-announcement.module.css +++ b/apps/nextjs/src/components/layout/v2-beta-announcement/v2-beta-announcement.module.css @@ -11,14 +11,13 @@ .banner::after { position: absolute; z-index: -1; - top: -1.75rem; - right: 12%; + right: -0.35rem; + bottom: -1.75rem; color: rgb(255 255 255 / 9%); font-size: 5.5rem; font-weight: 900; line-height: 1; content: "v2"; - transform: rotate(5deg); } .copy { @@ -40,14 +39,18 @@ .modalHero::after { position: absolute; z-index: -1; - top: -3.5rem; - right: 1.5rem; + right: -0.75rem; + bottom: -3.25rem; color: rgb(255 255 255 / 8%); font-size: 12rem; font-weight: 900; line-height: 1; content: "v2"; - transform: rotate(5deg); +} + +.featureCard { + height: 100%; + background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7)); } .diffViewer { @@ -89,13 +92,3 @@ 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%)); } - -@media (max-width: $mantine-breakpoint-xs) { - .banner::after { - right: 35%; - } - - .modalHero::after { - right: -2rem; - } -} diff --git a/apps/nextjs/src/components/layout/v2-beta-announcement/v2-beta-announcement.tsx b/apps/nextjs/src/components/layout/v2-beta-announcement/v2-beta-announcement.tsx index de73cf45f..5474b05cb 100644 --- a/apps/nextjs/src/components/layout/v2-beta-announcement/v2-beta-announcement.tsx +++ b/apps/nextjs/src/components/layout/v2-beta-announcement/v2-beta-announcement.tsx @@ -1,7 +1,6 @@ "use client"; import type { ReactNode } from "react"; -import { useState } from "react"; import { ActionIcon, Accordion, @@ -19,6 +18,7 @@ import { } from "@mantine/core"; import { IconArrowsMove, + IconBook2, IconBrandCss3, IconBrandDiscord, IconBrandGithub, @@ -38,7 +38,15 @@ import { setClientCookie } from "@homarr/common"; import { createModal, useModalAction } from "@homarr/modals"; import { BackupExportButton } from "~/components/backup"; -import { discordInviteUrl, v2BetaBlogUrl, v2BetaDiscussionUrl, v2BetaFeedbackUrl, v2BetaPreviewUrl } from "./constants"; +import { + discordInviteUrl, + v2BetaBlogUrl, + v2BetaDiscussionUrl, + v2BetaDocsUrl, + v2BetaFeedbackUrl, + v2BetaPreviewUrl, + v2BetaWorkshopUrl, +} from "./constants"; import classes from "./v2-beta-announcement.module.css"; const diffLineClassNames = { @@ -129,37 +137,35 @@ interface V2BetaAnnouncementModalProps { } const V2BetaAnnouncementModal = createModal(({ innerProps }) => { - const [openedSection, setOpenedSection] = useState("workshop"); - return ( Help us get Homarr v2 ready - There is no release date yet. Homarr v2 will become the default when it is ready—and we need you to test it + There is no release date yet. Homarr v2 will become the default when it is ready, and we need you to test it and share feedback before we can be confident enough to make that switch. - - } title="Homarr Workshop"> + + } title="Homarr Workshop"> Share and discover Custom Widgets and CSS made by the Homarr community. - - } - title="Complete drag-and-drop rewrite" - > + + } title="Complete drag-and-drop rewrite"> Move, resize, multi-select, and arrange your dashboard with a board editor rebuilt from the ground up. - - } title="Custom Widgets v2"> + + } title="Custom Widgets v2"> We think you can make almost any widget with live previews, API requests, options, actions, and validation. - - } title="Homarr Assistant"> - Ask questions, find what you need, and manage Homarr through permission-aware tools. - + + } title="Homarr Assistant"> + Homarr 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. + + + + (({ inn + + Use the separate homarr-v2 volume shown in the example. Keep your current volume untouched so you + can return to your current Homarr instance. + + + There is no release date yet. V2 will become the default when it is ready, after enough testing and feedback + gives us confidence in the release. + + + Tell us exactly what happened and what you expected instead. Add screenshots or a recording, your resolution + and browser zoom, board column count, device, browser, and exact reproduction steps whenever possible. + } title="Your testing is essential"> @@ -198,6 +216,28 @@ const V2BetaAnnouncementModal = createModal(({ inn > Try the hosted preview + + + - - - - Please use a separate volume for the beta and keep a backup of your current Homarr data. - - - ); }).withOptions({ @@ -265,11 +299,6 @@ interface V2BetaInstallInstructionsProps { const V2BetaInstallInstructions = ({ canExportBackup }: V2BetaInstallInstructionsProps) => ( - - Run the beta with the separate homarr-v2 volume shown below. Keep a backup, and do not point this - prerelease image at the only copy of your production data. - - {canExportBackup ? ( @@ -336,31 +365,47 @@ const V2BetaInstallInstructions = ({ canExportBackup }: V2BetaInstallInstruction ); -interface FeatureAccordionItemProps { - value: string; +interface FeatureCardProps { icon: ReactNode; title: string; children: ReactNode; } -const FeatureAccordionItem = ({ value, icon, title, children }: FeatureAccordionItemProps) => ( - - - {icon} - - } - aria-label={title} - > - {title} - - - +const FeatureCard = ({ icon, title, children }: FeatureCardProps) => ( + + + + {icon} + + + + {title} + {children} + + +); + +interface FaqAccordionItemProps { + value: string; + title: string; + children: ReactNode; +} + +const FaqAccordionItem = ({ value, title, children }: FaqAccordionItemProps) => ( + + + + {title} + + + + + {children} + );