Skip to content

Commit

Permalink
[DRAFT] UI redesign (#9428)
Browse files Browse the repository at this point in the history
* get rid of page grid CSS

* get rid of unused global styles

* use plain CSS instead of CSS modules for alert component

* migrate codeBlock to CSS modules

* scope externalLink styles

* scope expandable CSS styles

* feat: mobile layout + typography

* delete unused css files

* migrate some variables to CSS variables

* migrate search logo loader to SCSS modules

* move global :target styles to type.scss

* nuke bootstrap 🔥

* fix missing @popperjs/core dep

* fix breadcrumbs wrapping

* fix mobile nav dimensions

* refactor Header component

* fix 404 page

* fix typo

* split /pricing from /product/accounts/pricing

* remove unused CSS files

* publish header height as a CSS variable

* fix layout overflow

* [getsentry/action-github-commit] Auto commit

* set the correct monospcae font for tailwind CSS

* add missing comma

* handle static redirects in middleware instead of vercel.json

* remove extra comma 🙊

* remove obvious duplicate static redirects

* gather duplicate redirects that need discussion to the top

* refactor Redirect type definition

* add missing leading slash to redirectpath

* fix sidebar trigger pointer

* adjust mobile menu items padding & font size

* api page styles

* fix header font weight

* refactor: use a friendlier predicate for Typescript on Array.filter()

* center main page content and page toc on doc page

* adjust heading anchor icon size

* slightly thinner  borders

* adjust search results border color

* make box shadows consistent

* get rid of unused #sidebar and associated styles

* give search results a box shadow instead of a border

* give search input more width on focus

* make page toc fade in nicely

* fix jumping on platformSelector

* set img display to inline insde links

* fix sidebar scrolling behavior

* make page toc fixed width to avoid layout shift

* fix active sidebar item scrollIntoView scrolling main page a bit

* refactor: simplify serverSidebar serverSidebar logic

* refactor: remove unecessary condition

* refactor: move ProductSidebar and ApiSidebar to serverSidebar

* refactor: move PlatformSidebar into serverSidebar

* refactor: render contributing docs using DynamicNav

* refactor: move default sidebar to serverSidebar and make it a server
component

* refactor: remove non exisiting entry for `_debug` from serverSidebar

* fix platformGrid margin bottom

* refactor: delete uncessary useEffect

* refactor: rename serverSidebar to just sidebar

* refactor: remove unused style

* split sidebar and TOC styles

* refactor: move all sidebar bits to sidebar component + use CSS modules

* fix page TOC scrolling behavior

* refactor mobile sidebar toggle logic

* fix main page content margin on tablets when sidebar is open

* refactor: no need for a global id for sidebar toggle

* fix: forward sidebar header item styles to dynamicNav

* aktually

* Split concepts and references into separate section (#9681)

* [getsentry/action-github-commit] Auto commit

* refactor: remove unused highlight styles

* remove unused class name from type.scss

* refactor: move typography styles next to DocPage

* fix missing sidebar close button on api page

* fix: insert some space between api page columns

* refactor: condense paramTable styles

* refactor: move api page styles closer to consumeing module

* refactor: end of the monolithic screen.scss file 🥳

* feat: keep selected item at the top on platformSelector.

* do I have proper access??

* refactor: merge home components into one

* resolve confilicting redirects

* Remove headline above platform selector

* Change breadcrumb separator

* collapse product sidebar on `/platforms/(.*)`

* Fix some styles

* fix type error

* Change placeholder text and additional sidebar links

* Add quick improvements to sidebar

* align search field to the left edge of the main text on desktop

* fix: get rid of unused collapseAll flag

* make tailwind forms plugin opt in

* feat: paltform filter on home page

* fix: add default value for --sidebar-width

* refactor: leaner styles on home page (after bootsrap migration)

* delete empty class

* make nav items uppercase

* feat: add separator between search field and ask a bot button

* hide search separator button on mobile

* fix loading logo size

* fix search results alignment

* Update support helpdesk URL

* [getsentry/action-github-commit] Auto commit

* Display page description on page

* Update page descriptions

* Relocate SDK details; make it less prominent

* feat: platformSelector guide nesting

* fix: hide scorllbar on platformSelector

* fix missing tokens on mobileMenu

* fix search results width on phones

* Hide troubleshooting items in Expandable component

* feat: nest guides under platforms on home page sdk search

* refactor: migrate platformGrid to CSS modules

* refactor: Alert doesn't need to be a client component

* refactor: migrate relayMetrics to CSS modules

* refactor: move platformSdkDetail to CSS modules

* refactor: migrate jsBundleList to CSS modules

* fix: add missing </Expandable> tag

* refactor: migrate cliChecksumTable to CSS modules

* Add/update some page descriptions

* Split out docs about account and organization management

* fix: formatting noise

* split security legal & pii section (#9722)

* split security legal & pii section

* formatting error

* adjust PII field color

* adjust piiFields styles and make it a server component

* add redirects

* fix: remove unecessary node pii files

* fix platform titles with periods handling

* fix: relax platformSelector select height for wrapped elements

* refactor: scroll active platform to the top of platformSelector
instead of selected guide

* refactor: simplify prop names

---------

Co-authored-by: Abdellah Hariti <[email protected]>

* fix: remove | behind or separator

* fix: reword platformSelector placeholder

* Fix codecovs page description

* fix header overscroll behavior

* fix header scroll margin

* feat: remember selected platform on non platform pages

* fix: delte frgotten `console.log`s

* Remove EA banner (#9761)

GA

* update configure your org/configure your account names and descriptions.

* adjust landing page hero spacing

* refactor: unify API sidebar with product sidebar

* refactor: DRY product sidebar items generation

* refactor: additonal resources can never be active and don't need path

* refactor: simplify platform sidebar logic

* formatting noise

* fix focus lost on platformSelector on /platforms/

* refactor: move sidebar trigger to the left of the header logo

* fix platformSelector bug upon switching platforms

* Extract integrations documentation

* fix: highlight sidebar items title on corresponding index pages

* refactor: different highlighting for sidebar title vs links

* Fix small styles and nav items

* Revert "refactor: different highlighting for sidebar title vs links"

This reverts commit 3390dd1.

* get rid of "Getting Started" on platform index page

* fix: remember current platform when choosing a platform from landing page

* fix: don't save Tabgroup to localStorage when there's only one tab in CodeTabs

* fix: don't show sidebar hamburger trigger on home page

* fix Security-Legal link on home page

* fix: make header logo smaller

* refactor: more consistent padding on home page

* fix data scrubbing redirects (#9792)

* feat: get a hit on python when searching for python web frameworks on
home page

* feat: improve deeplinking to platform guides on platform selector

* take keywords into consideration during search on platformSelector

* fix: improve sidebar on platform redirect page

* refactor: make Breadcrumbs component unaware of serverContext

* forward request pathname as a special header: `x-pathname`

* refactor: make Sidebar component unaware of serverContext

* feat: a smarter 404 page

* refactor: simplify ternary

* refactor: get rid of unecessary nulls and their implications

* fix: improve platform packing on home page platform filter

* update sidenav titles

* Not so smart 404 but still useful

This reverts commits d372a4d and 9fff81a.

* add 404 error issue template

* more consistent sidebar separator

Closes #9827

* fix wrong sidebar toggle id

* fix mobile sidebar overflow issue

Closes #9828

* oops: hide sidebar by default

* akshually fix the sidebar overflow mobile

* show useful content above the fold

* feat: expand platforms on platformFilter while searching

* feat: a nicer scrollbar on platform filter items (when necessary)

* update meta descriptions for docs in new concepts section (#9795)

* update meta descriptions for docs in new concepts section

* Apply suggestions from code review

Co-authored-by: Liza Mock <[email protected]>

---------

Co-authored-by: Liza Mock <[email protected]>

* Firefox scrollbar styles

* smooth animations on platform expansion

feature phone friendly :)

* expand paltform with at least 2 character search string

* load platform icons ASAP

* fix search accross all sites button

* improve typescript types on Search

* feat: show python integrations as guides on home page.

* show Android and Elixir integrations on the home page

* show platform integrations on platformSelector

* refactor: sort platforms alphabetically

* refactor: remove unecessary null check

* chore: get rid of annoying cache size limit (useless anyway) Error

* chore: fix boolean attribute error

* chore: suppress missing metadataBase warning

* refactor: migrate codeKeywords/Keyword from defaultProps to js default
parameters

* refactor: migrate codeKeywords/KeywordIndicator from defaultProps to js default parameters

* refactor: migrate codeKeywords/AnimatedContainer from defaultProps to js default parameters

* chore: improve frontmatter doc comments

* chore: suppress console warnings

* chore: fix missing hooks deps

* refactor: use next/image where it makes sense | 0 warnings 🎉

* fix `/product/accounts` redirect

* fix cron getting started with cli redirect, closes #9848

* fix redirect syntax 🙊

* Change redirect order

* remove dynamic segment from SaaS migration redirect

* move the rest of `/product/accounts/*` to static redirects

* fix me up

* fix: dedupe issue grouping redirect

* fix: dedupe js guides default integrations redirect

* fix redirect typo

* fix: dedupe data management redirect

* add root /account redirecT

* formatting noise

* feat: sync TOC to URL #hash

* fix intersection observer on Safari

* fix expandable indicator layout

* fix codeBlock selection color

closes #9882

* fix platformSelector flicker

closes 9881

* fix: reduce vertical margin around images

* fix: don't show stored platform on `/platforms/`

* fix: separate top left hamburer menu from logo

* fix platformSelector on mobile

* update meta descriptions for org membership, troubleshooting, and cloud integrations (#9903)

* attempt to fix `/account` 404 🤞

* Revert "attempt to fix `/account` 404 🤞" | not really :(

This reverts commit 167d7af.

* chore: update next.js to 14.2

* update integration platform descsriptions (#9916)

* update integration platform descsriptions

* Update docs/organization/integrations/integration-platform/index.mdx

* Revert next.js update

This reverts commit 2995344.

* update notification incidents integrations descriptions (#9918)

* try a fix for /account

* famous last words: useless anyway (#9928)

This reverts commit c9b0171.

I still have no idea how is this related, but sigh!!

* feat: add more emphasis to active sidebar item

* a denser home page

* better platformFilter search field alignment

* Add more contrast to the table of contents font colors

* refactor: migrate articleFooter to CSS modules

* refactor: migrate changelog buttons to CSS modules

* fix: make TS happy

* fix: better Chevron rotation range

* fix menu flicker when clicking an active changelog navbar element

---------

Co-authored-by: vivianyentran <[email protected]>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: Stephanie Anderson <[email protected]>
Co-authored-by: vivianyentran <[email protected]>
Co-authored-by: George Gritsouk <[email protected]>
Co-authored-by: lizokm <[email protected]>
Co-authored-by: Liza Mock <[email protected]>
  • Loading branch information
8 people authored and antonpirker committed May 14, 2024
1 parent 259f79a commit 00d7bd9
Show file tree
Hide file tree
Showing 943 changed files with 6,690 additions and 6,340 deletions.
28 changes: 28 additions & 0 deletions .github/ISSUE_TEMPLATE/issue-platform-404.yml
Original file line number Diff line number Diff line change
@@ -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
2 changes: 0 additions & 2 deletions app/[[...path]]/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import 'prism-sentry/index.css';

import type {Metadata} from 'next';

import 'sentry-docs/styles/screen.scss';

export const metadata: Metadata = {
title: {template: '%s | Sentry Documentation', default: 'Home'},
};
Expand Down
5 changes: 4 additions & 1 deletion app/[[...path]]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand All @@ -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();
}
Expand All @@ -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();
}
Expand Down Expand Up @@ -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);
Expand Down
3 changes: 2 additions & 1 deletion app/api/auth/[...nextauth]/route.ts
Original file line number Diff line number Diff line change
@@ -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 || '',
Expand Down
163 changes: 0 additions & 163 deletions app/changelog/globals.css
Original file line number Diff line number Diff line change
@@ -1,164 +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;
}
}

.btn {
align-items: center;
border: 0.125rem solid transparent;
border-radius: 0.5rem;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
gap: 0.25rem;
height: 2.5rem;
justify-content: center;
line-height: 1rem;
outline: 0;
padding: 0.75rem 1rem;
position: relative;
text-align: center;
text-rendering: optimizeLegibility;
text-transform: uppercase;
user-select: none;
vertical-align: middle;
white-space: nowrap;
text-decoration: none;

@apply text-primary;
}

.solid-btn {
background: linear-gradient(
120deg,
#c83852,
#b44092 25%,
#6a5fc1 50%,
#452650 55%,
#452650
);
background-position: 98% 0;
background-size: 250% 100%;
border-color: transparent;
border-radius: 0.5rem;
box-shadow: none;
outline: 0 solid #6a5fc1;
outline-offset: 0.125rem;
transition:
background-position 0.2s,
outline-width 0.2s;
}

.solid-btn:hover {
background-position: 2% 0;
}

.solid-btn:focus {
background: #6a5fc1;
outline-width: 0.125rem;
}

.outline-btn {
background: linear-gradient(
120deg,
#fa7faa,
#ff9691 25%,
#ffb287 50%,
transparent 55%,
transparent
);
background-clip: padding-box;
background-position: 98% 0;
background-size: 250% 100%;
border: none;
box-shadow: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
outline: 0 solid #fa7faa;
outline-offset: 0.125rem;
position: relative;
transition:
background-position 0.2s,
outline-width 0.2s;
z-index: 0;
}

.outline-btn:before {
background: linear-gradient(11deg, #c83852, #b44092 50%, #6a5fc1);
border-radius: 0.5rem;
content: '';
inset: 0;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 0.125rem;
position: absolute;
transition: opacity 0.2s;
z-index: -1;
}

.outline-btn:hover {
background-position: 2% 0;
}

.outline-btn:hover:before {
opacity: 0;
}

.outline-btn:focus {
background: #ffa269;
outline-width: 0.125rem;
}

.try-sentry-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;;
}
5 changes: 4 additions & 1 deletion app/changelog/header.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import Image from 'next/image';

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">
<img
<Image
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"
priority
height={273}
width={450}
/>
Expand Down
18 changes: 4 additions & 14 deletions app/changelog/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,11 @@
import './globals.css';
import 'prism-sentry/index.css';

import {ReactNode} from 'react';
import {Theme} from '@radix-ui/themes';
import {Fragment, ReactNode} from 'react';
import type {Metadata} from 'next';
import {Rubik} from 'next/font/google';
import NextTopLoader from 'nextjs-toploader';

import {Navbar} from 'sentry-docs/components/changelog/navbar';

const rubik = Rubik({
weight: ['400', '500', '700'],
style: ['normal', 'italic'],
subsets: ['latin'],
variable: '--font-rubik',
});

export const metadata: Metadata = {
title: {template: '%s | Sentry Changelog', default: 'Changelog'},
metadataBase: new URL('https://sentry.io/changelog/'),
Expand All @@ -26,15 +16,15 @@ export const metadata: Metadata = {

export default function ChangelogLayout({children}: {children: ReactNode}) {
return (
<Theme accentColor="violet" grayColor="sand" radius="large" scaling="95%">
<Fragment>
<NextTopLoader color="#8d5494" />
<div id="changelogcontent" className={`${rubik.variable}`}>
<div id="changelogcontent" className="tw-app">
<Navbar />
<div className="bg-gray-100">{children}</div>
<div className="w-full mx-auto h-16 relative bg-darkPurple">
<div className="footer-top-right-down-slope absolute w-full -top-1 h-10 bg-gray-200" />
</div>
</div>
</Theme>
</Fragment>
);
}
2 changes: 0 additions & 2 deletions app/global-error.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import {useEffect} from 'react';
import * as Sentry from '@sentry/nextjs';
import Error from 'next/error';

import 'sentry-docs/styles/screen.scss';

export default function GlobalError({error}) {
useEffect(() => {
Sentry.captureException(error);
Expand Down

0 comments on commit 00d7bd9

Please sign in to comment.