Move lots of pages over to app router

PullJosh · Mar 24, 2024 · 69c4fb7 · 69c4fb7
1 parent 38e8407
commit 69c4fb7
Show file tree

Hide file tree

Showing 25 changed files with 746 additions and 932 deletions.
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/pages/help/publish-with-vercel.tsx → app/help/publish-with-vercel/page.tsx b/pages/help/publish-with-vercel.tsx → app/help/publish-with-vercel/page.tsx
@@ -1,18 +1,20 @@
-import Center from "../../components/Center";
-import HomepageNav from "../../components/HomepageNav";
-import Title from "../../components/Title";
-import TopBorder from "../../components/TopBorder";
+import Center from "../../../components/Center";
+import Nav, { NavSpace } from "../../../components/Nav";
+
+export const metadata = {
+  title: "Publish your project as a website",
+};
 
 export default function PublishWithVercel() {
   return (
     <>
-      <Title>Publish your project as a website</Title>
-
-      <TopBorder />
+      <div className="border-b border-gray-300">
+        <Nav>
+          <NavSpace />
+        </Nav>
+      </div>
 
       <Center>
-        <HomepageNav />
-
         <h2 className="mt-8 mb-4 text-4xl font-bold text-gray-800">
           Publish your project as a website!
         </h2>
@@ -195,19 +197,17 @@ export default function PublishWithVercel() {
               It's also possible to choose a domain that does not end in
               <strong>.vercel.app</strong>.
             </p>
-            <p>
-              Vercel provides the following endings for free:
-              <ul className="ml-4 list-inside list-disc">
-                <li>
-                  <i>your-chosen-name</i>
-                  <strong>.vercel.app</strong>
-                </li>
-                <li>
-                  <i>your-chosen-name</i>
-                  <strong>.now.sh</strong>
-                </li>
-              </ul>
-            </p>
+            <p>Vercel provides the following endings for free:</p>
+            <ul className="ml-4 list-inside list-disc">
+              <li>
+                <i>your-chosen-name</i>
+                <strong>.vercel.app</strong>
+              </li>
+              <li>
+                <i>your-chosen-name</i>
+                <strong>.now.sh</strong>
+              </li>
+            </ul>
             <p>
               If you want something else, like a .com or .dev domain, you'll
               need to pay money — usually about $12/year. I recommend using{" "}
@@ -232,7 +232,7 @@ export default function PublishWithVercel() {
         </Step>
       </Center>
 
-      <style jsx>
+      <style>
         {`
           img {
             margin: 16px 0;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,37 @@
+import "../tailwind.css";
+
+import AccountModal from "../components/AccountModal";
+import { SessionProvider } from "../components/SessionProvider";
+import { GoogleAnalytics } from "@next/third-parties/google";
+import TopBorder from "../components/TopBorder";
+import Nav, { NavSpace, NavUserInfo } from "../components/Nav";
+
+export const metadata = {
+  title: {
+    template: "%s | Leopard",
+    default: "Leopard",
+  },
+  description: "Convert Scratch projects to JavaScript",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <SessionProvider>
+          <AccountModal>
+            <TopBorder />
+            {children}
+          </AccountModal>
+        </SessionProvider>
+        {process.env.NEXT_PUBLIC_GA_ID && (
+          <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
+        )}
+      </body>
+    </html>
+  );
+}
diff --git a/pages/manual.tsx → app/manual/page.tsx b/pages/manual.tsx → app/manual/page.tsx
@@ -1,29 +1,30 @@
+"use client";
+
 import { useState, useEffect } from "react";
 import Link from "next/link";
-import { useRouter } from "next/router";
-import Title from "../components/Title";
-import TopBorder from "../components/TopBorder";
-import Center from "../components/Center";
-import HomepageNav from "../components/HomepageNav";
+import { useSearchParams } from "next/navigation";
 import Translation, {
   TranslationGrid,
   TranslationHeader,
-} from "../components/Translation";
+} from "../../components/Translation";
 import classNames from "classnames";
+import Nav, { NavSpace } from "../../components/Nav";
+
+// export const metadata = {
+//   title: "Manual",
+// };
 
 export default function Manual() {
-  const router = useRouter();
-  const palette = router.query.p || "motion";
+  const searchParams = useSearchParams();
+  const palette = searchParams?.get("p") ?? "motion";
 
   return (
     <>
-      <Title>Manual</Title>
-
-      <TopBorder />
-
-      <Center>
-        <HomepageNav />
-      </Center>
+      <div className="border-b border-gray-300">
+        <Nav>
+          <NavSpace />
+        </Nav>
+      </div>
 
       <PaletteTabs />
 
@@ -124,7 +125,10 @@ export default function Manual() {
             <Translation scratch="set y to (0)" js="this.y = 0;" />
 
             <TranslationHeader>If on edge, bounce</TranslationHeader>
-            <Translation scratch="if on edge, bounce" js="this.ifOnEdgeBounce();" />
+            <Translation
+              scratch="if on edge, bounce"
+              js="this.ifOnEdgeBounce();"
+            />
 
             <TranslationHeader>Set rotation style</TranslationHeader>
             <Translation
@@ -1206,8 +1210,8 @@ interface PaletteTabProps {
 }
 
 function PaletteTab({ id, children, color }: PaletteTabProps) {
-  const router = useRouter();
-  const palette = router.query.p || "motion";
+  const searchParams = useSearchParams();
+  const palette = searchParams?.get("p") ?? "motion";
 
   const selected = palette === id;
 

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,12 @@
+export default function NotFound() {
+  return (
+    <div className="mt-8">
+      <div className="mx-auto max-w-4xl px-8">
+        <h1 className="text-4xl font-bold">404 - Not Found</h1>
+        <p className="mt-4">
+          The page you were looking for could not be found.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/index.tsx → app/page.tsx b/pages/index.tsx → app/page.tsx
@@ -1,18 +1,13 @@
+"use client";
+
 import { useRef } from "react";
 import Link from "next/link";
-import Title from "../components/Title";
-import TopBorder from "../components/TopBorder";
 import Center from "../components/Center";
-import HomepageNav from "../components/HomepageNav";
 import ConvertBox from "../components/ConvertBox";
-import Nav, {
-  NavLoggedOutUserInfo,
-  NavSpace,
-  NavUserInfo,
-} from "../components/Nav";
-import { useSession } from "./_app";
+import { useSession } from "../components/SessionProvider";
+import Nav, { NavSpace } from "../components/Nav";
 
-function Index() {
+export default function Index() {
   const bottomSectionRef = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = () => {
@@ -22,21 +17,11 @@ function Index() {
     });
   };
 
-  const { user } = useSession();
-
   return (
     <>
-      <Title />
-
       <div className="border-b border-gray-300">
-        <TopBorder />
-        <Nav leopardText={true}>
+        <Nav title="Leopard">
           <NavSpace />
-          {user === null ? (
-            <NavLoggedOutUserInfo />
-          ) : (
-            <NavUserInfo username={user.username} />
-          )}
         </Nav>
       </div>
 
@@ -173,8 +158,6 @@ function Index() {
   );
 }
 
-export default Index;
-
 interface ScrollDownButtonProps {
   onClick?: React.MouseEventHandler;
 }