Upgrade site from pages router to app router

app/about/page.tsx

@@ -0,0 +1,33 @@
+import {
+  AboutHero,
+  BackedBy,
+  JobOpenings,
+  Mission,
+  WorkingWithUs,
+} from "components/sections";
+import { Metadata } from "next";
+import Image from "next/image";
+
+export const metadata: Metadata = {
+  title: "About | Shuttle",
+  description: "Meet the innovators at Shuttle, the cloud development platform tailored for Rust. Read about our mission to empower developers worldwide.",
+};
+
+export default function About() {
+  return (
+    <main>
+      <Image
+        src="/images/sections/mission/mission.jpg"
+        alt="bg"
+        fill
+        style={{ objectFit: "cover", zIndex: -1, top: 0 }}
+        quality={100}
+      />
+      <AboutHero />
+      <Mission />
+      <BackedBy />
+      <WorkingWithUs />
+      <JobOpenings />
+    </main>
+  );
+}

pages/ai.tsx → app/ai/page.tsx

@@ -1,22 +1,16 @@
 import { Hero, Info, Steps } from "components/sections/ShuttleAI";
 import React from "react";
-import { Page } from "components/templates";
-import { ReactNode } from "react";
 import Image from "next/image";
 import { Waitlist } from "components/sections/ShuttleAI/Waitlist";
 import { NextSeo } from "next-seo";
-import {
-  initTwitter,
-  sendTwitterConversion,
-  shuttleAiPageview,
-} from "lib/useTwitter";
-import Script from "next/script";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Shuttle AI - Deploy Apps from Prompts | Cloud Development Tools",
+  description: "Build and deploy cloud applications effortlessly using Shuttle AI. Discover the power of single-prompt app deployment in our Rust-centric product.",
+};
 
 export default function ShuttleAIPage() {
-  React.useEffect(() => {
-    initTwitter();
-    sendTwitterConversion(shuttleAiPageview);
-  }, []);
 
   return (
     <>
@@ -52,8 +46,4 @@ export default function ShuttleAIPage() {
       </div>
     </>
   );
-}
-
-ShuttleAIPage.getLayout = (children: ReactNode) => (
-  <Page disableFooterMargin>{children}</Page>
-);
+}

app/api/rss/route.ts

@@ -0,0 +1,10 @@
+import { exportedPosts } from "lib/blog/make-rss";
+
+export async function GET() {
+  return new Response(exportedPosts, {
+    status: 200,
+    headers: {
+      "Content-Type": "text/xml",
+    },
+  });
+}

app/blog/[year]/[month]/[day]/[slug]/SocialShareButtons.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { SITE_URL } from "lib/constants";
+import { Post } from "lib/blog/posts";
+import { LinkedInLogo, TwitterLogo } from "components/svgs";
+import MastodonLogo from "components/svgs/MastodonLogo";
+import HNLogo from "components/svgs/HNLogo";
+import { trackEvent } from "lib/posthog";
+
+interface Props {
+  blog: Post;
+}
+
+export function SocialShareButtons({ blog }: Props) {
+  return (
+    <div className="mb-20 mt-14 flex items-center space-x-4">
+      <span className="text-head">Share article</span>
+      <a
+        href={`https://news.ycombinator.com/submitlink?u=${encodeURIComponent(
+          `${SITE_URL}blog/${blog.slug}`,
+        )}&t=${encodeURIComponent(blog.title)}`}
+        className="flex items-center rounded-xl border border-black/10 bg-black p-3 dark:border-white/10"
+        target="_blank"
+        rel="noreferrer"
+        onClick={() => {
+          trackEvent(`blog_article_${blog.title}_hackernews`);
+        }}
+      >
+        <HNLogo />
+      </a>
+      <a
+        href={`https://twitter.com/share?text=${encodeURIComponent(
+          blog.title,
+        )}&url=${SITE_URL}blog/${blog.slug}`}
+        className="flex items-center rounded-xl border border border-black/10 bg-black p-3 dark:border-white/10"
+        target="_blank"
+        rel="noreferrer"
+        onClick={() => {
+          trackEvent(`blog_article_${blog.title}_twitter`);
+        }}
+      >
+        <TwitterLogo />
+      </a>
+      <a
+        href={`https://www.linkedin.com/shareArticle?url=${SITE_URL}blog/${blog.slug}&title=${blog.title}`}
+        className="flex items-center rounded-xl border border border-black/10 bg-black p-3 dark:border-white/10"
+        target="_blank"
+        rel="noreferrer"
+        onClick={() => {
+          trackEvent(`blog_article_${blog.title}_linkedin`);
+        }}
+      >
+        <LinkedInLogo />
+      </a>
+      <a
+        href="#"
+        onClick={(e) => {
+          e.preventDefault();
+
+          trackEvent(`blog_article_${blog.title}_mastodon`);
+
+          const instance = window.prompt(
+            "Enter your Mastodon instance (ex. mastodon.social):",
+          );
+          if (instance) {
+            window.location.href = `https://${instance}/share?text=${encodeURIComponent(
+              `${blog.title} ${SITE_URL}blog/${blog.slug}`,
+            )}`;
+          }
+        }}
+        className="flex items-center rounded-xl border border-black/10 bg-black p-3 dark:border-white/10"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <MastodonLogo />
+      </a>
+    </div>
+  );
+}