From 370944f443cb997ef71dda0c8ef6f4e92bea87d7 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Wed, 15 Apr 2026 02:05:41 +0200 Subject: feat: new-release notice and colocate changelog under domain --- apps/web/src/app/changelog/[version]/page.tsx | 6 +- .../changelog/components/copy-markdown-button.tsx | 98 ------------- apps/web/src/app/changelog/components/release.tsx | 153 --------------------- apps/web/src/app/changelog/page.tsx | 7 +- apps/web/src/app/changelog/utils.ts | 82 ----------- apps/web/src/app/editor/[project_id]/page.tsx | 6 +- apps/web/src/app/layout.tsx | 1 + apps/web/src/app/projects/page.tsx | 3 +- 8 files changed, 14 insertions(+), 342 deletions(-) delete mode 100644 apps/web/src/app/changelog/components/copy-markdown-button.tsx delete mode 100644 apps/web/src/app/changelog/components/release.tsx delete mode 100644 apps/web/src/app/changelog/utils.ts (limited to 'apps/web/src/app') diff --git a/apps/web/src/app/changelog/[version]/page.tsx b/apps/web/src/app/changelog/[version]/page.tsx index 522f454a..f069832b 100644 --- a/apps/web/src/app/changelog/[version]/page.tsx +++ b/apps/web/src/app/changelog/[version]/page.tsx @@ -3,15 +3,15 @@ import Link from "next/link"; import { notFound } from "next/navigation"; import { BasePage } from "@/app/base-page"; import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; -import { getReleaseByVersion, getSortedReleases } from "../utils"; +import { getReleaseByVersion, getSortedReleases } from "@/lib/changelog/utils"; import { ReleaseArticle, ReleaseMeta, ReleaseTitle, ReleaseDescription, ReleaseChanges, -} from "../components/release"; -import { CopyMarkdownButton } from "../components/copy-markdown-button"; +} from "@/lib/changelog/components/release"; +import { CopyMarkdownButton } from "@/lib/changelog/components/copy-markdown-button"; type Props = { params: Promise<{ version: string }> }; diff --git a/apps/web/src/app/changelog/components/copy-markdown-button.tsx b/apps/web/src/app/changelog/components/copy-markdown-button.tsx deleted file mode 100644 index bc7e94bf..00000000 --- a/apps/web/src/app/changelog/components/copy-markdown-button.tsx +++ /dev/null @@ -1,98 +0,0 @@ -"use client"; - -import { useState } from "react"; -import { CheckIcon, ClipboardIcon } from "lucide-react"; -import { - getSectionTitle, - groupAndOrderChanges, - isSectionCollapsible, -} from "../utils"; -import type { Change } from "../utils"; -import { cn } from "@/utils/ui"; -import { Button } from "@/components/ui/button"; - -function buildMarkdown({ - description, - changes, -}: { - description?: string; - changes: Change[]; -}): string { - const lines: string[] = []; - - if (description) { - lines.push(description, ""); - } - - const { grouped, orderedTypes } = groupAndOrderChanges({ changes }); - - for (const type of orderedTypes) { - if (isSectionCollapsible({ type })) { - lines.push( - buildCollapsibleMarkdownSection({ - title: getSectionTitle({ type }), - changes: grouped[type], - }), - "", - ); - continue; - } - - lines.push(`## ${getSectionTitle({ type })}`); - for (const change of grouped[type]) { - lines.push(`- ${change.text}`); - } - lines.push(""); - } - - return lines.join("\n").trimEnd(); -} - -function buildCollapsibleMarkdownSection({ - title, - changes, -}: { - title: string; - changes: Change[]; -}): string { - const bulletLines = changes.map((change) => `- ${change.text}`).join("\n"); - - return `
\n${title}\n\n${bulletLines}\n\n
`; -} - -export function CopyMarkdownButton({ - description, - changes, -}: { - description?: string; - changes: Change[]; -}) { - const [copied, setCopied] = useState(false); - - const handleCopy = async () => { - const markdown = buildMarkdown({ description, changes }); - await navigator.clipboard.writeText(markdown); - setCopied(true); - setTimeout(() => setCopied(false), 2000); - }; - - return ( - - ); -} diff --git a/apps/web/src/app/changelog/components/release.tsx b/apps/web/src/app/changelog/components/release.tsx deleted file mode 100644 index 475b0a6d..00000000 --- a/apps/web/src/app/changelog/components/release.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import type { ReactNode } from "react"; -import Link from "next/link"; -import { cn } from "@/utils/ui"; -import { ReactMarkdownWrapper } from "@/components/ui/react-markdown-wrapper"; -import { - getSectionTitle, - groupAndOrderChanges, - isSectionCollapsible, - type Change, - type Release, -} from "../utils"; -import { ArrowRightIcon } from "@hugeicons/core-free-icons"; -import { HugeiconsIcon } from "@hugeicons/react"; - -export function ReleaseArticle({ - variant, - isLatest, - children, -}: { - variant: "list" | "detail"; - isLatest?: boolean; - children: ReactNode; -}) { - if (variant === "list") { - return ( -
-
-
-
-
{children}
-
- ); - } - - return
{children}
; -} - -export function ReleaseMeta({ release }: { release: Release }) { - return ( - - {release.version} — {release.date} - - ); -} - -const titleSizes: Record<"h1" | "h2", string> = { - h1: "text-4xl", - h2: "text-2xl", -}; - -export function ReleaseTitle({ - as: As, - href, - children, -}: { - as: "h1" | "h2"; - href?: string; - children: ReactNode; -}) { - return ( - - {href ? ( - - {children} - - ) : ( - children - )} - - ); -} - -export function ReleaseDescription({ children }: { children: ReactNode }) { - return ( -

- {children} -

- ); -} - -export function ReleaseChanges({ release }: { release: Release }) { - const { grouped, orderedTypes } = groupAndOrderChanges({ - changes: release.changes, - }); - - return ( -
- {orderedTypes.map((type) => ( - - ))} -
- ); -} - -function ReleaseChangeSection({ - type, - changes, -}: { - type: string; - changes: Change[]; -}) { - const title = getSectionTitle({ type }); - - if (isSectionCollapsible({ type })) { - return ( -
- - {title}: - - - -
- ); - } - - return ( -
-

{title}:

- -
- ); -} - -function ReleaseChangeList({ - changes, - className, -}: { - changes: Change[]; - className?: string; -}) { - return ( - - ); -} diff --git a/apps/web/src/app/changelog/page.tsx b/apps/web/src/app/changelog/page.tsx index 20d599a6..8440eaa2 100644 --- a/apps/web/src/app/changelog/page.tsx +++ b/apps/web/src/app/changelog/page.tsx @@ -1,14 +1,17 @@ import type { Metadata } from "next"; import { BasePage } from "@/app/base-page"; import { Separator } from "@/components/ui/separator"; -import { type Release as ReleaseType, getSortedReleases } from "./utils"; +import { + type Release as ReleaseType, + getSortedReleases, +} from "@/lib/changelog/utils"; import { ReleaseArticle, ReleaseMeta, ReleaseTitle, ReleaseDescription, ReleaseChanges, -} from "./components/release"; +} from "@/lib/changelog/components/release"; export const metadata: Metadata = { title: "Changelog - OpenCut", diff --git a/apps/web/src/app/changelog/utils.ts b/apps/web/src/app/changelog/utils.ts deleted file mode 100644 index 682d376a..00000000 --- a/apps/web/src/app/changelog/utils.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { allChangelogs } from "content-collections"; - -export type Change = { type: string; text: string }; -export type Release = (typeof allChangelogs)[number]; - -type ChangeSectionConfig = { - title: string; - order: number; - collapsible?: boolean; -}; - -const knownSectionConfigs: Record = { - new: { title: "Features", order: 0 }, - improved: { title: "Improvements", order: 1 }, - fixed: { title: "Fixes", order: 2 }, - breaking: { title: "Breaking Changes", order: 3 }, - technical: { - title: "Technical details", - order: 4, - collapsible: true, - }, -}; - -function getSectionConfig({ type }: { type: string }): ChangeSectionConfig { - return ( - knownSectionConfigs[type] ?? { - title: type.charAt(0).toUpperCase() + type.slice(1), - order: Number.MAX_SAFE_INTEGER, - } - ); -} - -export function getSectionTitle({ type }: { type: string }): string { - return getSectionConfig({ type }).title; -} - -export function isSectionCollapsible({ type }: { type: string }): boolean { - return getSectionConfig({ type }).collapsible ?? false; -} - -export function groupAndOrderChanges({ changes }: { changes: Change[] }) { - const typeEncounterOrder = new Map(); - const grouped = changes.reduce>((acc, change) => { - if (!typeEncounterOrder.has(change.type)) { - typeEncounterOrder.set(change.type, typeEncounterOrder.size); - } - if (!acc[change.type]) acc[change.type] = []; - acc[change.type].push(change); - return acc; - }, {}); - - const orderedTypes = Object.keys(grouped).sort((left, right) => { - const orderDifference = - getSectionConfig({ type: left }).order - - getSectionConfig({ type: right }).order; - if (orderDifference !== 0) { - return orderDifference; - } - return ( - (typeEncounterOrder.get(left) ?? Number.MAX_SAFE_INTEGER) - - (typeEncounterOrder.get(right) ?? Number.MAX_SAFE_INTEGER) - ); - }); - - return { grouped, orderedTypes }; -} - -function isPublishedRelease({ published }: Release) { - return published !== false; -} - -export function getSortedReleases() { - return allChangelogs - .filter(isPublishedRelease) - .sort((a, b) => - b.version.localeCompare(a.version, undefined, { numeric: true }), - ); -} - -export function getReleaseByVersion({ version }: { version: string }) { - return getSortedReleases().find((release) => release.version === version); -} diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx index 8456d624..a3a7afa5 100644 --- a/apps/web/src/app/editor/[project_id]/page.tsx +++ b/apps/web/src/app/editor/[project_id]/page.tsx @@ -22,6 +22,7 @@ import { useEditor } from "@/hooks/use-editor"; import { Cancel01Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { Button } from "@/components/ui/button"; +import { ChangelogNotification } from "@/lib/changelog/components/changelog-notification"; export default function Editor() { const params = useParams(); @@ -38,6 +39,7 @@ export default function Editor() { + @@ -51,9 +53,7 @@ function DegradedRendererBanner() { return (
- - For the best experience, open OpenCut in Chrome. - + For the best experience, open OpenCut in Chrome.