Update packages

app/layout.tsx

@@ -22,7 +22,7 @@ export default function RootLayout({
           </div>
           <Analytics />
         </ThemeProvider>
-        {process.env.NODE_ENV === 'development' ? <VercelToolbar /> : null}
+        {/* {process.env.NODE_ENV === 'development' ? <VercelToolbar /> : null} */}
       </body>
     </html>
   )

app/mdx/components/index.tsx

@@ -24,6 +24,12 @@ const Diff = dynamic(() => import('./mdx-diff'), {
   ),
 })
 
+Code.theme = {
+  dark: "solarized-dark",
+  light: "material-palenight",
+  lightSelector: '[data-theme="light"]',
+}
+
 export const mdxComponents: MDXComponents = {
   // TODO: re-enable once anchor tags are fixed in the app router
   // a: ({ children, ...props }) => {
@@ -52,9 +58,8 @@ export const mdxComponents: MDXComponents = {
     React.HTMLAttributes<HTMLElement>,
     HTMLPreElement
   >) => {
-    // TODO: extract title from children
     return (
-      <Code {...props} theme="material-default">
+      <Code {...props}>
         {children as any}
       </Code>
     )

app/styles/global.css

@@ -137,6 +137,10 @@ h4 {
   font-size: 1.2rem;
 }
 
+h5 {
+  font-size: 1.15rem;
+}
+
 hr {
   border: none;
   border-bottom: 1px solid var(--light-gray);

app/styles/markdown.css

@@ -3,6 +3,16 @@ article {
   line-height: 1.7;
 }
 
+article h1,
+article h2,
+article h3,
+article h4,
+article h5,
+article h6 {
+  padding-top: var(--gap);
+  padding-bottom: var(--gap-half);
+}
+
 article > * + * {
   margin-top: 1em;
 }
@@ -91,6 +101,12 @@ article pre {
   font-size: 14px;
 }
 
+/* if article pre has a div above it, remove the border radius up top */
+article div + pre {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 /* Linkable Headers */
 
 .header-link {

package.json

@@ -13,27 +13,27 @@
   "pre-commit": "lint",
   "license": "MIT",
   "dependencies": {
-    "@fec/remark-a11y-emoji": "3.1.0",
-    "@mdx-js/loader": "3.0.0",
-    "@mdx-js/react": "3.0.0",
-    "@next/bundle-analyzer": "14.0.3",
-    "@next/eslint-plugin-next": "14.0.3",
-    "@next/mdx": "14.0.3",
+    "@fec/remark-a11y-emoji": "4.0.2",
+    "@mdx-js/loader": "3.0.1",
+    "@mdx-js/react": "3.0.1",
+    "@next/bundle-analyzer": "14.1.2-canary.3",
+    "@next/eslint-plugin-next": "14.1.2-canary.3",
+    "@next/mdx": "14.1.2-canary.3",
     "@octokit/rest": "20.0.2",
-    "@supabase/supabase-js": "2.21.0",
-    "@vercel/analytics": "1.1.1",
-    "@vercel/toolbar": "0.1.5",
+    "@supabase/supabase-js": "2.39.7",
+    "@vercel/analytics": "1.2.1",
+    "@vercel/toolbar": "0.1.11",
     "bright": "0.8.4",
-    "diff": "5.1.0",
-    "globby": "13.2.2",
-    "htmlparser2": "9.0.0",
+    "diff": "5.2.0",
+    "globby": "14.0.1",
+    "htmlparser2": "9.1.0",
     "lodash.debounce": "4.0.8",
-    "next": "14.0.3",
+    "next": "14.1.2-canary.3",
     "next-mdx-remote": "4.4.1",
     "next-remote-watch": "2.0.0",
     "next-themes": "0.2.1",
-    "postcss": "8.4.26",
-    "prettier": "3.0.0",
+    "postcss": "8.4.35",
+    "prettier": "3.2.5",
     "react": "canary",
     "react-diff-viewer": "3.1.1",
     "react-dom": "canary",
@@ -43,18 +43,17 @@
     "remark-frontmatter": "4.0.1",
     "remark-toc": "8.0.1",
     "rss-parser": "3.13.0",
-    "swr": "2.2.4",
+    "swr": "2.2.5",
     "tiny-glob": "0.2.9",
     "youtubei": "0.0.1-rc.36"
   },
   "devDependencies": {
     "@types/diff": "5.0.3",
-    "@types/marked": "5.0.1",
-    "@types/mdx": "2.0.10",
+    "@types/mdx": "2.0.11",
     "@types/node": "20.7.2",
     "@types/prettier": "2.7.3",
-    "@types/react": "18.2.23",
-    "@types/react-dom": "18.2.8",
+    "@types/react": "18.2.61",
+    "@types/react-dom": "18.2.19",
     "@types/rss": "0.0.30",
     "@typescript-eslint/eslint-plugin": "6.7.3",
     "@typescript-eslint/parser": "6.7.3",
@@ -63,13 +62,13 @@
     "critters": "0.0.20",
     "dotenv": "16.3.1",
     "eslint": "8.50.0",
-    "eslint-config-next": "14.0.3",
+    "eslint-config-next": "14.1.2-canary.3",
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-mdx": "2.2.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "gray-matter": "4.0.3",
-    "marked": "5.1.1",
+    "marked": "12.0.0",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-hover-media-feature": "1.0.2",
     "postcss-nested": "6.0.1",