Update package versions and reformat files

.prettierignore

@@ -1,3 +1,5 @@
 # build artefacts
-.next
+.next/
-out
+out/
+
+node_modules/

package.json

@@ -11,29 +11,30 @@
   },
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
-    "@headlessui/react": "^1.7.13",
+    "@headlessui/react": "^1.7.17",
-    "@mapbox/rehype-prism": "^0.8.0",
+    "@mapbox/rehype-prism": "^0.9.0",
-    "@mdx-js/loader": "^2.1.5",
+    "@mdx-js/loader": "^3.0.0",
-    "@mdx-js/react": "^2.1.5",
+    "@mdx-js/react": "^3.0.0",
-    "@next/mdx": "^13.0.2",
+    "@next/mdx": "^14.0.3",
-    "@tailwindcss/typography": "^0.5.4",
+    "@tailwindcss/typography": "^0.5.10",
-    "autoprefixer": "^10.4.12",
+    "autoprefixer": "^10.4.16",
-    "clsx": "^1.2.1",
+    "clsx": "^2.0.0",
-    "fast-glob": "^3.2.11",
+    "fast-glob": "^3.3.2",
     "feed": "^4.2.2",
     "focus-visible": "^5.2.0",
-    "next": "^13.4.7",
+    "next": "^14.0.3",
-    "next-router-mock": "^0.9.3",
+    "next-router-mock": "^0.9.10",
-    "postcss-focus-visible": "^8.0.2",
+    "postcss-focus-visible": "^9.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
-    "tailwindcss": "^3.3.0"
+    "tailwindcss": "^3.3.5"
   },
   "devDependencies": {
-    "eslint": "8.43.0",
+    "@catppuccin/tailwindcss": "^0.1.6",
-    "eslint-config-next": "13.4.7",
+    "eslint": "^8.54.0",
-    "prettier": "^2.8.7",
+    "eslint-config-next": "^14.0.3",
-    "prettier-plugin-tailwindcss": "^0.3.0"
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7"
   }
 }

prettier.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   singleQuote: true,
   semi: false,
-  plugins: [require('prettier-plugin-tailwindcss')],
+  plugins: [import('prettier-plugin-tailwindcss')],
 }

src/components/Button.jsx

@@ -12,7 +12,7 @@ export function Button({ variant = 'primary', className, href, ...props }) {
   className = clsx(
     'inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none',
     variantStyles[variant],
-    className
+    className,
   )
 
   return href ? (

src/components/Card.jsx

@@ -65,7 +65,7 @@ Card.Eyebrow = function CardEyebrow({
       className={clsx(
         className,
         'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500',
-        decorate && 'pl-3.5'
+        decorate && 'pl-3.5',
       )}
       {...props}
     >

src/components/Container.jsx

@@ -3,7 +3,7 @@ import clsx from 'clsx'
 
 const OuterContainer = forwardRef(function OuterContainer(
   { className, children, ...props },
-  ref
+  ref,
 ) {
   return (
     <div ref={ref} className={clsx('sm:px-8', className)} {...props}>
@@ -14,7 +14,7 @@ const OuterContainer = forwardRef(function OuterContainer(
 
 const InnerContainer = forwardRef(function InnerContainer(
   { className, children, ...props },
-  ref
+  ref,
 ) {
   return (
     <div
@@ -29,7 +29,7 @@ const InnerContainer = forwardRef(function InnerContainer(
 
 export const Container = forwardRef(function Container(
   { children, ...props },
-  ref
+  ref,
 ) {
   return (
     <OuterContainer ref={ref} {...props}>

src/components/Header.jsx

@@ -95,7 +95,7 @@ function NavItem({ href, children }) {
           'relative block px-3 py-2 transition',
           isActive
             ? 'text-teal-500 dark:text-teal-400'
-            : 'hover:text-teal-500 dark:hover:text-teal-400'
+            : 'hover:text-teal-500 dark:hover:text-teal-400',
         )}
       >
         {children}
@@ -132,7 +132,7 @@ function AvatarContainer({ className, ...props }) {
     <div
       className={clsx(
         className,
-        'h-10 w-10 rounded-xl bg-white/90 p-0.5 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:ring-white/10'
+        'h-10 w-10 rounded-xl bg-white/90 p-0.5 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:ring-white/10',
       )}
       {...props}
     />
@@ -153,7 +153,7 @@ function Avatar({ large = false, className, ...props }) {
         sizes={large ? '4rem' : '2.25rem'}
         className={clsx(
           'rounded-xl bg-zinc-100 object-cover dark:bg-zinc-800',
-          large ? 'h-16 w-16' : 'h-9 w-9'
+          large ? 'h-16 w-16' : 'h-9 w-9',
         )}
         priority
       />
@@ -185,7 +185,7 @@ export function Header() {
       let scrollY = clamp(
         window.scrollY,
         0,
-        document.body.scrollHeight - window.innerHeight
+        document.body.scrollHeight - window.innerHeight,
       )
 
       if (isInitial.current) {
@@ -237,7 +237,7 @@ export function Header() {
 
       setProperty(
         '--avatar-image-transform',
-        `translate3d(${x}rem, 0, 0) scale(${scale})`
+        `translate3d(${x}rem, 0, 0) scale(${scale})`,
       )
 
       let borderScale = 1 / (toScale / scale)

src/components/ThemeSelector.jsx

@@ -20,8 +20,8 @@ export function ThemeSelector(props) {
       setSelectedTheme(
         themes.find(
           (theme) =>
-            theme.value === document.documentElement.getAttribute('data-theme')
+            theme.value === document.documentElement.getAttribute('data-theme'),
-        )
+        ),
       )
     }
   }, [selectedTheme])
@@ -30,8 +30,8 @@ export function ThemeSelector(props) {
     let handler = () =>
       setSelectedTheme(
         themes.find(
-          (theme) => theme.value === (window.localStorage.theme ?? 'system')
+          (theme) => theme.value === (window.localStorage.theme ?? 'system'),
-        )
+        ),
       )
 
     window.addEventListener('storage', handler)
@@ -69,7 +69,7 @@ export function ThemeSelector(props) {
                   'text-zinc-900 dark:text-white': active && !selected,
                   'text-zinc-700 dark:text-zinc-400': !active && !selected,
                   'bg-zinc-100 dark:bg-zinc-900/40': active,
-                }
+                },
               )
             }
           >
@@ -81,7 +81,7 @@ export function ThemeSelector(props) {
                       'h-4 w-4',
                       selected
                         ? 'fill-teal-400 stroke-teal-400'
-                        : 'fill-zinc-500 stroke-zinc-500'
+                        : 'fill-zinc-500 stroke-zinc-500',
                     )}
                   />
                 </div>

src/lib/generateRssFeed.js

@@ -34,7 +34,7 @@ export async function generateRssFeed() {
     let html = ReactDOMServer.renderToStaticMarkup(
       <MemoryRouterProvider>
         <article.component isRssFeed />
-      </MemoryRouterProvider>
+      </MemoryRouterProvider>,
     )
 
     feed.addItem({

src/pages/index.jsx

@@ -6,6 +6,7 @@ import clsx from 'clsx'
 import { Card } from '@/components/Card'
 import { Container } from '@/components/Container'
 import {
+  ArrowDownIcon,
   BriefcaseIcon,
   GitHubIcon,
   LinkedInIcon,
@@ -25,6 +26,7 @@ import image5 from '@/images/photos/image-5.jpg'
 import { formatDate } from '@/lib/formatDate'
 import { generateRssFeed } from '@/lib/generateRssFeed'
 import { getAllArticles } from '@/lib/getAllArticles'
+import { Button } from '@/components/Button'
 
 function Article({ article }) {
   return (
@@ -124,6 +126,16 @@ function Resume() {
           </li>
         ))}
       </ol>
+
+      <Button
+        href="/publications"
+        variant="secondary"
+        className="group mt-6 w-full"
+      >
+        Publications
+        <ArrowDownIcon className="h-4 w-4 stroke-zinc-400 transition group-active:stroke-zinc-600 dark:group-hover:stroke-zinc-50 dark:group-active:stroke-zinc-50" />
+      </Button>
+
       {/* 
       <Button href="#" variant="secondary" className="group mt-6 w-full">
         Download CV
@@ -145,7 +157,7 @@ function Photos() {
             key={image.src}
             className={clsx(
               'relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl',
-              rotations[imageIndex % rotations.length]
+              rotations[imageIndex % rotations.length],
             )}
           >
             <Image

tailwind.config.js

@@ -2,7 +2,10 @@
 module.exports = {
   content: ['./src/**/*.{js,jsx}'],
   darkMode: 'class',
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('@catppuccin/tailwindcss'),
+  ],
   theme: {
     fontSize: {
       xs: ['0.8125rem', { lineHeight: '1.5rem' }],