Page Not Found
+We couldn't find the page you were looking for :(
+
+
+
+
+ {children}
+
+ );
+ if (!session) {
+ content = (
+
+
+
+
+
+
+ );
+ }
+ return
+
+ );
+}
diff --git a/apps/changelog/src/app/changelog/%5Fadmin/page.tsx b/apps/changelog/src/app/changelog/%5Fadmin/page.tsx
new file mode 100644
index 0000000000000..3ec2f52da182c
--- /dev/null
+++ b/apps/changelog/src/app/changelog/%5Fadmin/page.tsx
@@ -0,0 +1,151 @@
+import {Fragment} from 'react';
+import {PlusIcon} from '@radix-ui/react-icons';
+import {Button, Text} from '@radix-ui/themes';
+import Link from 'next/link';
+
+import Confirm from './confirm';
+import {prismaClient} from '@/server/prisma-client';
+import {
+ deleteChangelog,
+ publishChangelog,
+ unpublishChangelog,
+} from '@/server/actions/changelog';
+import {getServerSession} from 'next-auth/next';
+import {notFound} from 'next/navigation';
+import {authOptions} from '@/server/authOptions';
+
+export default async function ChangelogsListPage() {
+ const session = await getServerSession(authOptions);
+
+ if (!session) {
+ return notFound();
+ }
+
+ const changelogs = await prismaClient.changelog.findMany({
+ include: {
+ categories: true,
+ author: true,
+ },
+ orderBy: {
+ createdAt: 'desc',
+ },
+ });
+
+ return (
+ + {' '} + Loading... +
++ + « Back to changelogs + +
+ +Post Guidelines
+-
+
- + - Be very matter of fact, direct, and simple. Avoid using words like "excited + to announce". + +
- - Spell out the what, the why, and how to use it. +
- + - Avoid exclamation points, adjectives, references to competition, and + personal opinions. + +
| Title | +Categories | +Published by | ++ |
|---|---|---|---|
| + No changelogs found + | +|||
| {changelog.title} | + +
+ {changelog.categories.map(category => (
+
+ {category.name}
+
+ ))}
+ |
+
+ {changelog.published && (
+
+ + + )} + |
+
+
+
+
+ 👀 Show
+
+
+ 📝 Edit
+
+ {changelog.published ? (
+
+ |
+
+
+ );
+}
diff --git a/apps/changelog/src/app/changelog/[slug]/page.tsx b/apps/changelog/src/app/changelog/[slug]/page.tsx
new file mode 100644
index 0000000000000..21d8c0c9ca6e8
--- /dev/null
+++ b/apps/changelog/src/app/changelog/[slug]/page.tsx
@@ -0,0 +1,129 @@
+import { Fragment, Suspense } from "react";
+import { type Changelog } from "@prisma/client";
+import type { Metadata, ResolvingMetadata } from "next";
+import { unstable_cache } from "next/cache";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { getServerSession } from "next-auth/next";
+import { MDXRemote } from "next-mdx-remote/rsc";
+
+import { prismaClient } from "@/server/prisma-client";
+import Article from "@/client/components/article";
+import ArticleFooter from "@/client/components/articleFooter";
+import { authOptions } from "@/server/authOptions";
+import { mdxOptions } from "@/server/mdxOptions";
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata(
+ { params }: { params: { slug: string } },
+ parent: ResolvingMetadata
+): Promise
+
+
+
+
+
+
+ );
+}
diff --git a/apps/changelog/src/app/changelog/error.tsx b/apps/changelog/src/app/changelog/error.tsx
new file mode 100644
index 0000000000000..2f3453f4ccaf5
--- /dev/null
+++ b/apps/changelog/src/app/changelog/error.tsx
@@ -0,0 +1,39 @@
+'use client'; // Error components must be Client Components
+
+import {Fragment, useEffect} from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Error({
+ error,
+ reset,
+}: {
+ error: Error & {digest?: string};
+ reset: () => void;
+}) {
+ useEffect(() => {
+ Sentry.captureException(error);
+ }, [error]);
+
+ return (
+
+
+
+
+ Loading...}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ಠ_ಠ Something went wrong! +
+ reset() + } + > + Try again + +
+
+ );
+}
diff --git a/apps/changelog/src/app/changelog/layout.module.css b/apps/changelog/src/app/changelog/layout.module.css
new file mode 100644
index 0000000000000..bebc60cf92811
--- /dev/null
+++ b/apps/changelog/src/app/changelog/layout.module.css
@@ -0,0 +1,3 @@
+.changelogContent {
+ font-family: var(--font-rubik);
+}
diff --git a/apps/changelog/src/app/changelog/layout.tsx b/apps/changelog/src/app/changelog/layout.tsx
new file mode 100644
index 0000000000000..c8b5901932389
--- /dev/null
+++ b/apps/changelog/src/app/changelog/layout.tsx
@@ -0,0 +1,30 @@
+import "prism-sentry/index.css";
+import styles from "./layout.module.css";
+
+import { Fragment, ReactNode } from "react";
+import type { Metadata } from "next";
+import NextTopLoader from "nextjs-toploader";
+import { Navbar } from "@/client/components/navbar";
+
+export const metadata: Metadata = {
+ title: { template: "%s | Sentry Changelog", default: "Changelog" },
+ metadataBase: new URL("https://sentry.io/changelog/"),
+ openGraph: {
+ images: "https://docs.sentry.io/changelog/assets/hero.png",
+ },
+};
+
+export default function ChangelogLayout({ children }: { children: ReactNode }) {
+ return (
+
+ {/* this needs to be a plain ![]()
next/image doesn't work here because of redirects we do */}
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+
+
+
+
+ + Sentry Changelog +
++ Follow + + @SentryChangelog + + to stay up to date on everything from product updates to SDK + changes. +
+
+
+ {children}
+
+
+
+
+
+
+
+ Categories:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Jump to:
+ + + + +
+
+
+
+
+
+ + Not found! +
+ + Go back home + +
+
+ {title}
+
+
+
+ {Array.isArray(tags) && tags.map(tag =>
+
+ {children}
+ -
+
-
+ {date &&
} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/changelog/src/client/components/articleFooter/styles.module.css b/apps/changelog/src/client/components/articleFooter/styles.module.css
new file mode 100644
index 0000000000000..6f0dd1c5ebd12
--- /dev/null
+++ b/apps/changelog/src/client/components/articleFooter/styles.module.css
@@ -0,0 +1,5 @@
+.footer-wrapper {
+ background:
+ url('/changelog/assets/squiggle.png') 0px 0px / 300px 300px,
+ linear-gradient(315deg, rgb(24, 13, 28) 0.57%, rgb(69, 38, 80) 100%) 0% 0% / cover;
+}
diff --git a/apps/changelog/src/client/components/date.tsx b/apps/changelog/src/client/components/date.tsx
new file mode 100644
index 0000000000000..6907a5c162a39
--- /dev/null
+++ b/apps/changelog/src/client/components/date.tsx
@@ -0,0 +1,16 @@
+const formatDate = (date: string | Date) => {
+ const options: Intl.DateTimeFormatOptions = {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ };
+ const now = new Date(date).toLocaleDateString('en-EN', options);
+
+ return now;
+};
+
+function DateComponent({date}: {date: string | Date}) {
+ return ;
+}
+
+export default DateComponent;
diff --git a/apps/changelog/src/client/components/editor.tsx b/apps/changelog/src/client/components/editor.tsx
new file mode 100644
index 0000000000000..a466b9b10573f
--- /dev/null
+++ b/apps/changelog/src/client/components/editor.tsx
@@ -0,0 +1,213 @@
+'use client';
+
+import type {ChangeEvent, ClipboardEvent, DragEvent, ForwardedRef} from 'react';
+import {Fragment, useEffect, useRef, useState} from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import {
+ CodeIcon,
+ FontBoldIcon,
+ FontItalicIcon,
+ ImageIcon,
+ Link1Icon,
+ ListBulletIcon,
+ QuoteIcon,
+ StrikethroughIcon,
+} from '@radix-ui/react-icons';
+import * as Toolbar from '@radix-ui/react-toolbar';
+import type {TextareaMarkdownRef} from 'textarea-markdown-editor';
+import TextareaMarkdown, {Cursor} from 'textarea-markdown-editor';
+import {uploadImage} from '../uploadImage';
+
+function replaceText(cursor: Cursor, text: string, replaceWith: string) {
+ cursor.setValue(cursor.value.replace(text, replaceWith));
+}
+
+function handleUploadImages(textareaEl: HTMLTextAreaElement, fileList: File[]) {
+ const cursor = new Cursor(textareaEl);
+
+ fileList.forEach(async (file, _idx) => {
+ const loadingText = `![Uploading ${file.name}...]()`;
+
+ cursor.insert(`${loadingText}${Cursor.MARKER}`);
+
+ try {
+ const uploadedImage = await uploadImage(file);
+ replaceText(
+ cursor,
+ loadingText,
+ ``
+ );
+ } catch (err: any) {
+ // eslint-disable-next-line no-console
+ console.error(err);
+ replaceText(cursor, loadingText, '');
+ throw err;
+ }
+ });
+}
+
+const onUploadFiles = (
+ textareaEl: HTMLTextAreaElement,
+ event:
+ | DragEvent
+
+
+ Your code is broken. Let's Fix it.
+
+
+
+ {editorBlock}
+ {}}
+ accept="image/*"
+ multiple
+ onChange={event => {
+ onUploadFiles(ref.current!, event, event.target.files);
+ fileRef.current!.value = '';
+ }}
+ style={{display: 'none', position: 'absolute', left: -100000}}
+ />
+
+ );
+}
+
+// Only import this to the next file
+export default function ForwardEditor({
+ ...props
+}: {editorRef: ForwardedRefLoading...
} + {file && ( +
+
+ {monthYear}
+
+
+ );
+
+ return (
+
+ {monthYearIndex > -1 && monthSeparator}
+
+
+ );
+}
diff --git a/apps/changelog/src/client/components/loginButton.tsx b/apps/changelog/src/client/components/loginButton.tsx
new file mode 100644
index 0000000000000..2b126d0dcc835
--- /dev/null
+++ b/apps/changelog/src/client/components/loginButton.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { LockClosedIcon } from "@radix-ui/react-icons";
+import { Avatar, Box, Button, Card, Flex, Link, Text } from "@radix-ui/themes";
+import { signIn, signOut, useSession } from "next-auth/react";
+
+export default function Component({ className = "" }) {
+ const { data: session } = useSession();
+ if (session) {
+ return (
+
+
+ Categories:
+
+ {Object.values(allChangelogCategories).map(category => {
+ return (
+ {
+ if (selectedCategoriesIds.includes(category.id)) {
+ setSelectedCategoriesIds(
+ selectedCategoriesIds.filter(cat => cat !== category.id)
+ );
+ } else {
+ setSelectedCategoriesIds([...selectedCategoriesIds, category.id]);
+ }
+ }}
+ key={category.name}
+ >
+
+
+
+
+
+
+ setSearchValue(e.target.value)}
+ placeholder="Search..."
+ className="form-input flex-1 rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-primary-500 focus:ring-primary-500"
+ />
+
+
+
+ {showChangelogs}
+
+ {pagination.totalPages > 1 && (
+
+
+ No posts found.
+
+
+ )}
+
+
+ Jump to:
+-
+ {monthsCopy.map((month, index) => (
+
- + { + e.preventDefault(); + if (selectedMonth === month) { + setSelectedMonth(null); + } else { + setSelectedMonth(month); + } + }} + > + {month} + + + ))} +
+
+
+
+
+ setPageNumber(Math.max(currentPage - 1, 1))}
+ condition={prevPage}
+ >
+
+
+ setPageNumber(currentPage + 1)}
+ condition={nextPage}
+ >
+
+
+
+ );
+}
+
+// @ts-expect-error TODO(lforst): leftover from migration
+function ConditionalLink({children, condition, onClick, ...props}) {
+ return condition ? (
+
+ {children}
+
+ ) : (
+
+ {pages.map(page => (
+ (page === 0 ? {} : setPageNumber(page))}
+ >
+
+
+ ))}
+
+
+ {text.split(' ').join('-')}
+
+ );
+}
diff --git a/apps/changelog/src/client/components/titleSlug.tsx b/apps/changelog/src/client/components/titleSlug.tsx
new file mode 100644
index 0000000000000..4d0c1af12a07e
--- /dev/null
+++ b/apps/changelog/src/client/components/titleSlug.tsx
@@ -0,0 +1,49 @@
+'use client';
+import {Fragment, useState} from 'react';
+
+import {Input} from './ui/Input';
+
+export function TitleSlug({defaultTitle = '', defaultSlug = ''}) {
+ const [slug, setSlug] = useState(defaultSlug);
+ const [edited, setEdited] = useState(false);
+
+ return (
+
+ {
+ if (!edited) {
+ setSlug(
+ `${e.target.value}`
+ .toLowerCase()
+ .replace(/ /g, '-')
+ .replace(/[^a-z0-9-]/g, '')
+ );
+ }
+ }}
+ />
+
+
+ {
+ setSlug(e.target.value);
+ // edited will only be set if the user changes the slug in the input
+ setEdited(true);
+ }}
+ />
+
+