Upgrade to astro v2 (#35)

.prettierignore

@@ -1 +1,3 @@
+dist
+
 package-lock.json

package.json

@@ -22,29 +22,29 @@
     "format:check": "prettier --check \"**/*.{ts,tsx,js,mjs,cjs,json,yaml,yml,md,mdx,astro,css}\""
   },
   "dependencies": {
-    "@astrojs/react": "^1.2.2",
-    "@astrojs/sitemap": "^1.0.0",
-    "@astrojs/tailwind": "^2.1.2",
-    "@headlessui/react": "^1.7.7",
-    "@heroicons/react": "^2.0.13",
+    "@astrojs/react": "^2.0.2",
+    "@astrojs/sitemap": "^1.1.0",
+    "@astrojs/tailwind": "^3.0.1",
+    "@headlessui/react": "^1.7.12",
+    "@heroicons/react": "^2.0.16",
     "@tailwindcss/forms": "^0.5.3",
-    "astro": "^1.6.10",
-    "astro-analytics": "^2.5.0",
+    "astro": "^2.0.15",
+    "astro-analytics": "^2.6.0",
     "clsx": "^1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@types/jest": "^29.2.4",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "esbuild-jest": "^0.5.0",
-    "husky": "^8.0.0",
-    "jest": "^29.3.1",
-    "prettier": "^2.7.1",
-    "prettier-plugin-astro": "^0.7.0",
-    "prettier-plugin-tailwindcss": "^0.1.13",
+    "husky": "^8.0.3",
+    "jest": "^29.4.3",
+    "prettier": "^2.8.4",
+    "prettier-plugin-astro": "^0.8.0",
+    "prettier-plugin-tailwindcss": "^0.2.3",
     "pretty-quick": "^3.1.3"
   }
 }

src/components/command-palette/footer.tsx

@@ -1,13 +1,9 @@
+import Key from '@components/command-palette/key';
+
 export default function Footer() {
   return (
     <div className="hidden flex-wrap items-center bg-gray-50 py-2.5 px-4 text-xs text-gray-700 dark:bg-black dark:text-gray-200 sm:flex">
-      Press{' '}
-      <kbd className="mx-1 rounded border border-gray-300 bg-white px-1 dark:border-gray-700 dark:bg-gray-800">
-        Enter
-      </kbd>{' '}
-      to select,{' '}
-      <kbd className="mx-1 rounded border border-gray-300 bg-white px-1 dark:border-gray-700 dark:bg-gray-800">ESC</kbd>{' '}
-      to exit
+      Press <Key>Enter</Key> to select, <Key>Esc</Key> to exit
     </div>
   );
 }

src/components/command-palette/key.tsx

@@ -0,0 +1,11 @@
+export interface KeyProps {
+  children: React.ReactNode;
+}
+
+export default function Key({ children }: KeyProps) {
+  return (
+    <kbd className="mx-1 rounded border border-gray-300 bg-white px-1 shadow-[0_2px_0_0] shadow-gray-400 dark:border-gray-700 dark:bg-gray-800 dark:shadow-[0_2px_0_0] dark:shadow-gray-600">
+      {children}
+    </kbd>
+  );
+}

src/components/footer.astro

@@ -1,5 +1,5 @@
 ---
-import { TwitterIcon, GitHubIcon } from '@components/icons.astro';
+import { MastodonIcon, GitHubIcon } from '@components/icons.astro';
 
 const currentYear = new Date().getFullYear();
 ---
@@ -13,11 +13,8 @@ const currentYear = new Date().getFullYear();
     Reserved.
   </div>
   <div class="mt-1 space-x-2">
-    <a
-      href="https://twitter.com/iansu"
-      class="inline-block h-3 w-3 hover:text-black dark:hover:text-white md:h-4 md:w-4"
-    >
-      <TwitterIcon />
+    <a href="https://mas.to/@iansu" class="inline-block h-3 w-3 hover:text-black dark:hover:text-white md:h-4 md:w-4">
+      <MastodonIcon />
     </a>
     <a
       href="https://github.com/iansu"

src/components/link-box.astro

@@ -19,7 +19,7 @@ const { class: className, description, href, title } = Astro.props;
 >
   <a href={href}>
     <div class="flex items-center p-4">
-      <div class="mr-6 w-12 h-12 flex flex-col justify-center"><slot name="icon" /></div>
+      <div class="mr-6 flex h-12 w-12 flex-col justify-center"><slot name="icon" /></div>
       <div class="block flex-grow">
         <h2 class="text-xl font-bold">{title}</h2>
         <p>{description}</p>

src/components/navigation-link.astro

@@ -12,7 +12,7 @@ const { href, title } = Astro.props;
 >
   <a href={href}>
     <div class="flex items-center p-4">
-      <div class="mr-3 w-6 h-6 flex flex-col justify-center text-gray-500 dark:text-gray-400"><slot name="icon" /></div>
+      <div class="mr-3 flex h-6 w-6 flex-col justify-center text-gray-500 dark:text-gray-400"><slot name="icon" /></div>
       <div class="block flex-grow">
         <p class="text-lg text-gray-700 dark:text-gray-300">{title}</p>
       </div>

src/components/navigation-toggle.astro

@@ -2,13 +2,13 @@
 ---
 
 <a id="navigation-toggle" href="/navigation">
-  <div class="pt-3 px-2 h-10 w-10 cursor-pointer">
+  <div class="h-10 w-10 cursor-pointer px-2 pt-3">
     <svg
       class="navigation-icon"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="currentColor"
-      class="w-6 h-6"
+      class="h-6 w-6"
     >
       <path
         fill-rule="evenodd"

src/layouts/default.astro

@@ -40,6 +40,7 @@ const noFollow = Astro.props.noFollow === undefined ? false : Astro.props.noFoll
     <meta name="twitter:card" content="summary" />
     <meta name="twitter:site" content="iansu" />
     <link rel="canonical" href={canonicalURL} />
+    <link rel="me" href="https://mas.to/@iansu" />
     <link rel="icon" href="/favicon.ico" />
     <title>{title}</title>
     <GoogleAnalytics id="UA-156492295-1" />

src/pages/404.astro

@@ -3,7 +3,7 @@ import Layout from '@layouts/page.astro';
 ---
 
 <Layout title="Not Found">
-  <h2 class="text-2xl font-bold mb-3">Not Found</h2>
+  <h2 class="mb-3 text-2xl font-bold">Not Found</h2>
   <p class="content-links">
     The page you&rsquo;re looking for can&rsquo;t be found. Return to the{' '}
     <a href="/">home</a> page.

src/pages/about.astro

@@ -48,32 +48,32 @@ import {
     <h3 class="mb-3 mt-12 text-lg font-bold">Elsewhere</h3>
     <ul class="flex list-none flex-wrap">
       <li class="mr-6 mb-2">
-        <a href="https://twitter.com/iansu" class="inline-block w-6 h-6">
-          <TwitterIcon />
+        <a href="https://mas.to/@iansu" class="inline-block h-6 w-6">
+          <MastodonIcon />
         </a>
       </li>
       <li class="mr-6 mb-2">
-        <a href="https://github.com/iansu" class="inline-block w-6 h-6">
+        <a href="https://github.com/iansu" class="inline-block h-6 w-6">
           <GitHubIcon />
         </a>
       </li>
       <li class="mr-6 mb-2">
-        <a href="https://mas.to/@iansu" class="inline-block w-6 h-6" rel="me">
-          <MastodonIcon />
+        <a href="https://twitter.com/iansu" class="inline-block h-6 w-6">
+          <TwitterIcon />
         </a>
       </li>
       <li class="mr-6 mb-2">
-        <a href="https://discordapp.com/users/iansu#7006" class="inline-block w-6 h-6">
+        <a href="https://discordapp.com/users/iansu#7006" class="inline-block h-6 w-6">
           <DiscordIcon />
         </a>
       </li>
       <li class="mr-6 mb-2">
-        <a href="https://www.linkedin.com/in/iansu" class="inline-block w-6 h-6">
+        <a href="https://www.linkedin.com/in/iansu" class="inline-block h-6 w-6">
           <LinkedInIcon />
         </a>
       </li>
       <li class="mr-6 mb-2">
-        <a href="https://www.polywork.com/iansu" class="inline-block w-6 h-6">
+        <a href="https://www.polywork.com/iansu" class="inline-block h-6 w-6">
           <PolyworkIcon />
         </a>
       </li>

src/pages/index.astro

@@ -4,7 +4,7 @@ import Container from '@components/container.astro';
 import NavigationToggle from '../components/navigation-toggle.astro';
 import ProfilePicture from '../components/profile-picture.astro';
 import Bio from '@components/bio.astro';
-import { TwitterIcon, GitHubIcon } from '@components/icons.astro';
+import { MastodonIcon, GitHubIcon } from '@components/icons.astro';
 ---
 
 <Layout>
@@ -15,14 +15,14 @@ import { TwitterIcon, GitHubIcon } from '@components/icons.astro';
     <div class="pt-8 pb-16 md:pt-12 md:pb-24">
       <ProfilePicture size={192} borderSize="border-8" />
       <div class="text-center">
-        <h1 class="mt-6 text-3xl font-bold md:text-4xl dark:text-white">Ian Sutherland</h1>
+        <h1 class="mt-6 text-3xl font-bold dark:text-white md:text-4xl">Ian Sutherland</h1>
         <div class="content-links mx-auto mt-5 max-w-4xl text-lg leading-6 text-gray-700 dark:text-gray-200">
           <Bio more={true} />
         </div>
         <div>
           <div class="mt-8 flex justify-center space-x-5 text-black dark:text-white">
-            <a href="https://twitter.com/iansu" class="inline-block h-8 w-8">
-              <TwitterIcon />
+            <a href="https://mas.to/@iansu" class="inline-block h-8 w-8">
+              <MastodonIcon />
             </a>
             <a href="https://github.com/iansu" class="inline-block h-8 w-8">
               <GitHubIcon />

src/pages/links.astro

@@ -18,14 +18,14 @@ import {
     <LinkBox href="/" title="IanSutherland.ca" description="Read my bio or my blog">
       <ProfilePicture slot="icon" size={48} borderSize="border-0" />
     </LinkBox>
-    <LinkBox href="https://twitter.com/iansu" title="Twitter" description="Follow me on Twitter">
-      <TwitterIcon slot="icon" />
+    <LinkBox href="https://mas.to/@iansu" title="Mastodon" description="Follow me on Mastodon">
+      <MastodonIcon slot="icon" />
     </LinkBox>
     <LinkBox href="https://github.com/iansu" title="GitHub" description="Follow my work on GitHub">
       <GitHubIcon slot="icon" />
     </LinkBox>
-    <LinkBox href="https://mas.to/@iansu" title="Mastodon" description="Follow me on Mastodon">
-      <MastodonIcon slot="icon" />
+    <LinkBox href="https://twitter.com/iansu" title="Twitter" description="Follow me on Twitter">
+      <TwitterIcon slot="icon" />
     </LinkBox>
     <LinkBox href="https://discordapp.com/users/iansu#7006" title="Discord" description="Message me on Discord">
       <DiscordIcon slot="icon" />