Merge branch 'master' into v8-docs

Author: stephanie-anderson

.github/ISSUE_TEMPLATE/issue-platform-404.yml

@@ -0,0 +1,28 @@
+name: "💻 Docs Platform: 🔗 404 Error"
+labels: "Type: Platform,404"
+description: Broken links, missing pages, and other 404 errors.
+
+body:
+  - type: textarea
+    id: url
+    attributes:
+      label: URL
+      description: The broken link or missing page.
+      placeholder: |-
+        https://docs.sentry.io/your-broken-link
+    validations:
+      required: true
+  - type: textarea
+    id: notes
+    attributes:
+      label: Additional Info
+      description: Where did you find the link? Anything else we should know?
+    validations:
+      required: false
+  - type: markdown
+    attributes:
+      value: |-
+        ## Thanks 🙏
+        Check our [triage docs](https://open.sentry.io/triage/) for what to expect next.
+    validations:
+      required: false

app/[[...path]]/layout.tsx

@@ -2,12 +2,17 @@ import 'prism-sentry/index.css';
 
 import type {Metadata} from 'next';
 
-import 'sentry-docs/styles/screen.scss';
+import {HotReload} from 'sentry-docs/components/hotReload';
 
 export const metadata: Metadata = {
   title: {template: '%s | Sentry Documentation', default: 'Home'},
 };
 
 export default function DocsLayout({children}: {children: React.ReactNode}) {
-  return <div>{children}</div>;
+  return (
+    <div>
+      {children}
+      <HotReload />
+    </div>
+  );
 }

app/[[...path]]/page.tsx

@@ -53,6 +53,7 @@ export default async function Page({params}) {
   const docs = await getDocsFrontMatter();
   const rootNode = await getDocsRootNode();
   if (!rootNode) {
+    // eslint-disable-next-line no-console
     console.warn('no root node');
     return notFound();
   }
@@ -78,6 +79,7 @@ export default async function Page({params}) {
 
   const pageNode = nodeForPath(rootNode, params.path);
   if (!pageNode) {
+    // eslint-disable-next-line no-console
     console.warn('no page node', params.path);
     return notFound();
   }
@@ -88,6 +90,7 @@ export default async function Page({params}) {
     doc = await getFileBySlug(`docs/${pageNode.path}`);
   } catch (e) {
     if (e.code === 'ENOENT') {
+      // eslint-disable-next-line no-console
       console.error('ENOENT', pageNode.path);
       return notFound();
     }
@@ -121,7 +124,7 @@ export async function generateMetadata({params}: MetadataProps): Promise<Metadat
 
   const rootNode = await getDocsRootNode();
 
-  if (rootNode && params.path) {
+  if (params.path) {
     const pageNode = nodeForPath(rootNode, params.path);
     if (pageNode) {
       const guideOrPlatform = getCurrentPlatformOrGuide(rootNode, params.path);

app/api/auth/[...nextauth]/route.ts

@@ -1,11 +1,12 @@
 import {PrismaAdapter} from '@auth/prisma-adapter';
 import NextAuth from 'next-auth';
+import {Adapter} from 'next-auth/adapters';
 import GoogleProvider from 'next-auth/providers/google';
 
 import prisma from 'sentry-docs/prisma';
 
 const handler = NextAuth({
-  adapter: PrismaAdapter(prisma),
+  adapter: PrismaAdapter(prisma) as Adapter,
   providers: [
     GoogleProvider({
       clientId: process.env.GOOGLE_CLIENT_ID || '',

app/changelog/%5Fadmin/layout.tsx

@@ -13,7 +13,7 @@ export const metadata: Metadata = {
 export default async function Layout({children}: {children: ReactNode}) {
   const session = await getServerSession(GET);
   let content = (
-    <div className="relative min-h-[calc(100vh-8rem)] w-full mx-auto bg-gray-200 pt-16 grid grid-cols-12">
+    <div className="relative min-h-[calc(100vh-8rem)] w-full mx-auto bg-gray-200 pt-16">
       {children}
       <div className="fixed top-3 right-4 z-50">
         <Suspense fallback={null}>

app/changelog/%5Fadmin/page.tsx

@@ -25,97 +25,102 @@ export default async function ChangelogsListPage() {
 
   return (
     <Fragment>
-      <header className="mb-4 col-start-2 col-span-2 text-left">
+      <header className="text-left pl-4 mb-4">
         <Button>
           <PlusIcon />
           <Link href="/changelog/_admin/create">New Changelog</Link>
         </Button>
       </header>
-      <section className="overflow-x-auto col-start-2 col-span-10 shadow-md rounded-lg">
-        <table className="w-full text-sm text-left text-gray-500">
-          <thead className="text-xs text-gray-700 uppercase bg-gray-50">
+
+      <table className="table-fixed w-11/12 mx-auto text-sm text-left text-gray-500">
+        <colgroup>
+          <col style={{width: '30%'}} />
+          <col style={{width: '30%'}} />
+          <col style={{width: '20%'}} />
+          <col style={{width: '20%'}} />
+        </colgroup>
+        <thead className="text-xs text-gray-700 uppercase bg-gray-50">
+          <tr>
+            <th className="whitespace-nowrap px-4 py-2">Title</th>
+            <th className="px-4 py-2 break-words">Categories</th>
+            <th className="whitespace-nowrap px-4 py-2">Published by</th>
+            <th className="px-4 py-2" />
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-200 bg-white border-b hover:bg-gray-50 dark:hover:bg-gray-600">
+          {changelogs.length === 0 && (
             <tr>
-              <th className="whitespace-nowrap px-4 py-2">Title</th>
-              <th className="whitespace-nowrap px-4 py-2">Categories</th>
-              <th className="whitespace-nowrap px-4 py-2">Published by</th>
-              <th className="px-4 py-2" />
+              <td
+                colSpan={4}
+                className="text-center font-medium text-gray-900 whitespace-nowrap"
+              >
+                No changelogs found
+              </td>
             </tr>
-          </thead>
-          <tbody className="divide-y divide-gray-200 bg-white border-b hover:bg-gray-50 dark:hover:bg-gray-600">
-            {changelogs.length === 0 && (
-              <tr>
-                <td
-                  colSpan={10}
-                  className="text-center font-medium text-gray-900 whitespace-nowrap"
-                >
-                  No changelogs found
-                </td>
-              </tr>
-            )}
+          )}
 
-            {changelogs.map(changelog => (
-              <tr key={changelog.id} className="bg-white border-b hover:bg-gray-50">
-                <td className="px-6 py-4 font-medium text-gray-900">{changelog.title}</td>
+          {changelogs.map(changelog => (
+            <tr key={changelog.id} className="bg-white border-b hover:bg-gray-50">
+              <td className="px-6 py-2 font-medium text-gray-900">{changelog.title}</td>
 
-                <td className="px-4 py-2">
-                  {changelog.categories.map(category => (
-                    <div
-                      key={category.id}
-                      className="inline whitespace-nowrap p-2 uppercase shadow-sm no-underline rounded-full text-red text-xs mr-1 bg-gray-100"
-                    >
-                      {category.name}
-                    </div>
-                  ))}
-                </td>
-                <td className="px-4 py-2 text-center">
-                  {changelog.published && (
-                    <span className="text-gray-500">
-                      <Text size="1">
-                        {' '}
-                        {new Date(changelog.publishedAt || '').toLocaleDateString(
-                          undefined,
-                          {month: 'long', day: 'numeric'}
-                        )}
-                      </Text>
-                      <br />
-                    </span>
-                  )}
-                  <Text size="1">{changelog.author?.name}</Text>
-                </td>
+              <td className="px-4 py-2 break-words">
+                {changelog.categories.map(category => (
+                  <div
+                    key={category.id}
+                    className="inline whitespace-nowrap p-2 uppercase shadow-sm no-underline rounded-full text-red text-xs mr-1 mb-4 bg-gray-100"
+                  >
+                    {category.name}
+                  </div>
+                ))}
+              </td>
+              <td className="px-4 py-2 text-center">
+                {changelog.published && (
+                  <span className="text-gray-500">
+                    <Text size="1">
+                      {' '}
+                      {new Date(changelog.publishedAt || '').toLocaleDateString(
+                        undefined,
+                        {month: 'long', day: 'numeric'}
+                      )}
+                    </Text>
+                    <br />
+                  </span>
+                )}
+                <Text size="1">{changelog.author?.name}</Text>
+              </td>
 
-                <td className="px-4 py-2">
-                  <div className="flex h-full justify-end">
-                    <Link
-                      href={`/changelog/${changelog.slug}`}
-                      className="text-indigo-600 hover:bg-indigo-100 rounded-md px-1 py-2 text-xs whitespace-nowrap"
-                    >
-                      👀 Show
-                    </Link>
-                    <Link
-                      href={`/changelog/_admin/${changelog.id}/edit`}
-                      className="text-indigo-600 hover:bg-indigo-100 rounded-md px-1 py-2 text-xs whitespace-nowrap"
-                    >
-                      📝 Edit
-                    </Link>
-                    {changelog.published ? (
-                      <Confirm action={unpublishChangelog} changelog={changelog}>
-                        ⛔️ Unpublish?
-                      </Confirm>
-                    ) : (
-                      <Confirm action={publishChangelog} changelog={changelog}>
-                        ✅ Publish?
-                      </Confirm>
-                    )}
-                    <Confirm action={deleteChangelog} changelog={changelog}>
-                      💀 Delete?
+              <td className="px-4 py-2">
+                <div className="flex h-full justify-end">
+                  <Link
+                    href={`/changelog/${changelog.slug}`}
+                    className="text-indigo-600 hover:bg-indigo-100 rounded-md px-1 py-2 text-xs whitespace-nowrap"
+                  >
+                    👀 Show
+                  </Link>
+                  <Link
+                    href={`/changelog/_admin/${changelog.id}/edit`}
+                    className="text-indigo-600 hover:bg-indigo-100 rounded-md px-1 py-2 text-xs whitespace-nowrap"
+                  >
+                    📝 Edit
+                  </Link>
+                  {changelog.published ? (
+                    <Confirm action={unpublishChangelog} changelog={changelog}>
+                      ⛔️ Unpublish?
                     </Confirm>
-                  </div>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </section>
+                  ) : (
+                    <Confirm action={publishChangelog} changelog={changelog}>
+                      ✅ Publish?
+                    </Confirm>
+                  )}
+                  <Confirm action={deleteChangelog} changelog={changelog}>
+                    💀 Delete?
+                  </Confirm>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </Fragment>
   );
 }

app/changelog/[slug]/page.tsx

@@ -9,6 +9,7 @@ import {getServerSession} from 'next-auth/next';
 import {MDXRemote} from 'next-mdx-remote/rsc';
 
 import Article from 'sentry-docs/components/changelog/article';
+import ArticleFooter from 'sentry-docs/components/changelog/articleFooter';
 import {mdxOptions} from 'sentry-docs/mdxOptions';
 import prisma from 'sentry-docs/prisma';
 
@@ -114,6 +115,7 @@ export default async function ChangelogEntry({params}) {
               />
             </Suspense>
           </Article>
+          <ArticleFooter />
         </div>
       </div>
     </div>

app/changelog/globals.css

@@ -1,48 +1 @@
-@import '@radix-ui/themes/styles.css';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-#changelogcontent {
-  font-family: var(--font-rubik);
-}
-.radix-themes {
-  --cursor-button: pointer;
-}
-.fancy-border {
-  transition-property: box-shadow, border-color;
-  transition-duration: 0.25s;
-  transition-timing-function: ease-out;
-
-  &:hover {
-    box-shadow:
-      0 2px 0 rgba(54, 45, 89, 0.15),
-      -0.1875rem -0.1875rem 0 0.1875rem #f2b712,
-      0 0 0 0.375rem #e1567c;
-    text-decoration: none;
-    cursor: pointer;
-  }
-}
-
-.hero-top-left-down-slope {
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 40%);
-}
-
-.hero-bottom-left-down-slope {
-  clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%)
-}
-
-.footer-top-right-down-slope {
-  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
-}
-
-.icon {
-  margin-left: 0.25em;
-
-  svg {
-    display: inline;
-    width: 14px;
-    height: 14px;
-  }
-}

app/changelog/header.tsx

@@ -2,8 +2,10 @@ export default function Header({loading}) {
   return (
     <div className="w-full mx-auto h-96 relative bg-darkPurple">
       <div className="relative w-full lg:max-w-7xl mx-auto px-4 lg:px-8 pt-8 grid grid-cols-12 items-center">
+        {/* this needs to be a plain <img> next/image doesn't work here because of redirects we do */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
-          className={`justify-self-center col-span-10 z-20 hidden lg:block ${loading ? 'animate-fade-in-left' : ''}`}
+          className={`justify-self-center col-span-10 hidden lg:block ${loading ? 'animate-fade-in-left' : ''}`}
           src="https://docs.sentry.io/changelog/assets/hero.png"
           alt="Sentry Changelog"
           height={273}
@@ -12,16 +14,24 @@ export default function Header({loading}) {
         <div
           className={`relative col-span-12 mt-32 lg:absolute lg:w-96 lg:right-1/4 lg:-bottom-2 ${loading ? 'animate-fade-in-right' : ''}`}
         >
-          <h1 className="justify-self-center text-white font-bold text-4xl text-center lg:text-left">
+          <h1 className="justify-self-center text-white font-bold text-4xl text-center lg:text-left mb-2">
             Sentry Changelog
           </h1>
-          <h2 className="justify-self-center z-20 text-gold text-1xl text-center lg:text-left">
-            Stay up to date on everything big and small, from product updates to SDK
-            changes with the Sentry Changelog.
+          <h2 className="justify-self-center text-gold text-1xl text-center lg:text-left">
+            Follow&nbsp;
+            <a
+              href="https://twitter.com/SentryChangelog"
+              target="_blank"
+              rel="noreferrer"
+              className="underline underline-offset-2"
+            >
+              @SentryChangelog
+            </a>
+            &nbsp;to stay up to date on everything from product updates to SDK changes.
           </h2>
         </div>
       </div>
-      <div className="hero-bottom-left-down-slope absolute bottom-0 w-full h-10 bg-gray-200" />
+      <div className="hero-bottom-left-down-slope absolute -bottom-0.5 w-full h-10 bg-gray-200 border-none" />
     </div>
   );
 }