fix: styles

Signed-off-by: Innei <tukon479@gmail.com>
Innei · Jun 20, 2023 · 2e8f22b · 2e8f22b · vercel · Jun 20, 2023
1 parent 8f736d8
commit 2e8f22b
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -37,10 +37,6 @@
     "prod:stop": "pm2 stop ecosystem.config.js",
     "prod:reload": "pm2 reload ecosystem.config.js"
   },
-  "browserslist": [
-    "chrome >=110",
-    "last 2 Firefox versions"
-  ],
   "dependencies": {
     "@clerk/nextjs": "4.21.3",
     "@floating-ui/react-dom": "2.0.1",

diff --git a/sentry.client.config.ts b/sentry.client.config.ts
@@ -29,5 +29,10 @@ Sentry.init({
       maskAllText: true,
       blockAllMedia: true,
     }),
+    // eslint-disable-next-line import/namespace
+    new Sentry.BrowserTracing({
+      // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+      tracePropagationTargets: ['localhost', /^https:\/\/api\.innei\.ren/],
+    }),
   ],
 })
diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -1,5 +1,12 @@
 'use client'
 
+import { useEffect } from 'react'
+
+import { captureException } from '@sentry/nextjs'
+
 export default ({ error, reset }: any) => {
+  useEffect(() => {
+    captureException(error)
+  }, [error])
   return <div>Something went wrong</div>
 }
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -2,10 +2,13 @@
 
 import { useEffect } from 'react'
 
+import { captureException } from '@sentry/nextjs'
+
 // TODO next.js not implement for now
 export default ({ error, reset }: any) => {
   useEffect(() => {
     console.log(error, reset)
+    captureException(error)
   }, [error])
   return (
     <html>

diff --git a/src/app/notes/Paper.tsx b/src/app/notes/Paper.tsx
@@ -5,7 +5,7 @@ export const Paper: Component = ({ children }) => {
     <main
       className={clsx(
         'relative bg-slate-50 dark:bg-zinc-900 md:col-start-1 lg:col-auto',
-        '-m-4 p-[2rem_1rem] lg:m-0 lg:p-[30px_45px]',
+        '-m-4 p-[2rem_1rem] md:m-0 lg:p-[30px_45px]',
         'rounded-[0_6px_6px_0] border-neutral-100 shadow-sm dark:border-neutral-800 dark:shadow-[#333] lg:border',
         'note-layout-main',
       )}

diff --git a/src/app/notes/[id]/page.tsx b/src/app/notes/[id]/page.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 'use client'
 
-import { memo, useEffect } from 'react'
+import { Suspense, memo, useEffect } from 'react'
 import { Balancer } from 'react-wrap-balancer'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
@@ -82,7 +82,7 @@ const NotePage = memo(({ note }: { note: NoteModel }) => {
       : ''
   }`
   return (
-    <>
+    <Suspense>
       <article
         className={clsx('prose', styles['with-indent'], styles['with-serif'])}
       >
@@ -127,7 +127,7 @@ const NotePage = memo(({ note }: { note: NoteModel }) => {
       <NoteTopic topic={note.topic} />
       <XLogInfoForNote />
       <NoteFooterNavigationBarForMobile id={note.id} />
-    </>
+    </Suspense>
   )
 })
 

diff --git a/src/app/notes/error.tsx b/src/app/notes/error.tsx
@@ -1,5 +1,9 @@
 'use client'
 
+import { useEffect } from 'react'
+
+import { captureException } from '@sentry/nextjs'
+
 import { NotePasswordForm } from '~/components/widgets/note/NotePasswordForm'
 
 import { Paper } from './Paper'
@@ -13,6 +17,10 @@ const pickStatusCode = (error: Error) => {
 }
 // TODO Catch if 404 or 403
 export default ({ error, reset }: { error: Error; reset: () => void }) => {
+  useEffect(() => {
+    if (!isRequestError(error)) captureException(error)
+  }, [error])
+
   if (isRequestError(error)) {
     const code = pickStatusCode(error)
 
@@ -32,6 +40,7 @@ export default ({ error, reset }: { error: Error; reset: () => void }) => {
       </div>
     )
   }
+
   return (
     <Paper>
       <div className="mt-20">

diff --git a/src/app/notes/sentry-test/page.tsx b/src/app/notes/sentry-test/page.tsx
@@ -0,0 +1,9 @@
+'use client'
+export default () => {
+  return (
+    // @ts-expect-error
+    <button onClick={() => globalThis.methodDoesNotExist()}>
+      Break the world
+    </button>
+  )
+}
diff --git a/src/components/layout/header/internal/HeaderDrawerButton.tsx b/src/components/layout/header/internal/HeaderDrawerButton.tsx
@@ -85,6 +85,7 @@ const LinkInternal: typeof Link = memo(({ children, ...rest }) => {
   return (
     <Link
       {...rest}
+      prefetch={false}
       onClick={() => {
         jotaiStore.set(drawerOpenAtom, false)
       }}
@@ -98,7 +99,7 @@ const HeaderDrawerContent = () => {
   const { config } = useHeaderConfig()
 
   return (
-    <div className="h-[100vh] w-[90vw] space-y-4 overflow-auto py-8 scrollbar-none">
+    <div className="h-[100vh] w-[90vw] space-y-4 overflow-auto pb-8 pt-14 scrollbar-none">
       {config.map((section, index) => {
         return (
           <motion.section

diff --git a/src/components/widgets/xlog/XLogInfo.tsx b/src/components/widgets/xlog/XLogInfo.tsx
@@ -118,7 +118,7 @@ const XLogInfoBase: FC<{
         </div>
       </div>
       <Collapse isOpened={collapse}>
-        <div className="text-gray-2 w-full overflow-hidden py-2 text-sm">
+        <div className="text-gray-2 w-full overflow-hidden py-2 text-sm [&_a]:break-all">
           {sections}
         </div>
       </Collapse>

diff --git a/src/providers/root/modal-stack-provider.tsx b/src/providers/root/modal-stack-provider.tsx
@@ -113,7 +113,7 @@ export const Modal: Component<{
               animate={enterStyle}
               transition={modalTransition}
               className={clsxm(
-                'flex flex-col overflow-hidden rounded-lg',
+                'relative flex flex-col overflow-hidden rounded-lg',
                 'bg-slate-50/90 dark:bg-neutral-900/90',
                 'p-2 shadow-2xl shadow-stone-300 backdrop-blur-sm dark:shadow-neutral-700',
                 'max-h-[70vh] min-w-[300px] max-w-[90vw] lg:max-h-[50vh] lg:max-w-[50vw]',