create layout component & copy images

frontend-v2/next.config.ts

@@ -7,6 +7,7 @@ const nextConfig: NextConfig = {
   images: {
     unoptimized: true,
   },
+  basePath: "/v2",
 };
 
 export default nextConfig;

frontend-v2/package.json

@@ -11,10 +11,12 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.63.0",
+    "clsx": "^2.1.1",
     "ky": "^1.7.4",
     "next": "15.1.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwind-merge": "^2.6.0",
     "zod": "^3.24.1"
   },
   "devDependencies": {

frontend-v2/src/components/AuthedPageLayout.tsx

@@ -0,0 +1,17 @@
+import { ReactNode, useEffect } from "react";
+import { useSession } from "@/hooks/use-session";
+
+export const AuthedPageLayout = (props: { children: ReactNode }) => {
+  const session = useSession();
+
+  useEffect(() => {
+    if (session.isLoading) {
+      return;
+    }
+    if (!session.user) {
+      window.location.pathname = "/login";
+    }
+  }, [session.isLoading, session.user]);
+
+  return session.isLoading ? null : props.children;
+};

frontend-v2/src/components/ContentWrapper.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/util/cn";
+import { ReactNode } from "react";
+
+const contentWrapperClass = {
+  sm: "lg:max-w-screen-sm",
+  md: "lg:max-w-screen-md",
+  lg: "lg:max-w-screen-lg",
+  xl: "lg:max-w-screen-xl",
+  "2xl": "lg:max-w-screen-2xl",
+};
+
+export const ContentWrapper = (props: {
+  size: keyof typeof contentWrapperClass;
+  children: ReactNode;
+}) => {
+  return (
+    <div
+      className={cn(
+        "bg-white w-full rounded-md py-6 px-10 shadow-2xl backdrop-blur-md bg-opacity-95 lg:mt-6 lg:mx-auto",
+        contentWrapperClass[props.size]
+      )}
+    >
+      {props.children}
+    </div>
+  );
+};

frontend-v2/src/components/VueNavbar.tsx

@@ -1,13 +1,6 @@
 import { useSession } from "@/hooks/use-session";
 import Script from "next/script";
-import { useEffect } from "react";
-import { useQuery } from "@tanstack/react-query";
-import ky from "ky";
-import { z } from "zod";
-
-const StaticResourcesHashResp = z.object({
-  hash: z.string(),
-});
+import { useStaticResourceHash } from "@/hooks/use-static-resource-hash";
 
 // Allows the Vue AdbNav component to be used within the React app
 // for more seamless UX. Once most pages are rebuilt in
@@ -20,24 +13,7 @@ export const VueNavbar = (props: {
   pageName: string;
 }) => {
   const session = useSession();
-
-  // TODO(jh): prob should do this elsewhere b/c a logged-out navbar is fine & should show a 'login' button.
-  useEffect(() => {
-    if (session.isLoading) {
-      return;
-    }
-    if (!session.user) {
-      window.location.pathname = "/login";
-    }
-  }, [session.isLoading, session.user]);
-
-  const { data: staticResourceHash } = useQuery({
-    queryKey: ["static_resources_hash"],
-    queryFn: async () => {
-      const resp = await ky.get("/static_resources_hash").json();
-      return StaticResourcesHashResp.parse(resp);
-    },
-  });
+  const staticResourceHash = useStaticResourceHash();
 
   return !staticResourceHash || session.isLoading ? null : (
     <>
@@ -62,7 +38,7 @@ export const VueNavbar = (props: {
         }}
       />
       <Script
-        src={`/dist/adb.js?hash=${staticResourceHash.hash}`}
+        src={`/dist/adb.js?hash=${staticResourceHash}`}
         strategy="afterInteractive"
       />
     </>

frontend-v2/src/hooks/use-session.ts

@@ -51,8 +51,6 @@ export const useSession = () => {
             : undefined;
   }, [query.data?.user?.Roles]);
 
-  console.log(query);
-
   return {
     user: {
       ...query.data?.user,

frontend-v2/src/hooks/use-static-resource-hash.ts

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import ky from "ky";
+import { z } from "zod";
+
+const StaticResourcesHashResp = z.object({
+  hash: z.string(),
+});
+
+// This is only used for Vue components and should eventually be removed.
+export const useStaticResourceHash = () => {
+  const { data: staticResourceHash } = useQuery({
+    queryKey: ["static_resources_hash"],
+    queryFn: async () => {
+      const resp = await ky.get("/static_resources_hash").json();
+      return StaticResourcesHashResp.parse(resp);
+    },
+  });
+
+  return staticResourceHash?.hash;
+};

frontend-v2/src/pages/_app.tsx

@@ -9,12 +9,13 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <QueryClientProvider client={queryClient}>
       <Head>
+        <title>Activist Database</title>
         <meta
           name="viewport"
           content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
         />
       </Head>
-      <Component {...pageProps} />;
+      <Component {...pageProps} />
     </QueryClientProvider>
   );
 }

frontend-v2/src/pages/_document.tsx

@@ -6,9 +6,7 @@ export default function Document() {
       <Head>
         <meta charSet="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        {/* eslint-disable-next-line @next/next/no-title-in-document-head */}
-        <title>Activist Database</title>
-        <link rel="icon" type="image/png" href="/static/img/favicon.png" />
+        <link rel="icon" type="image/png" href="/v2/favicon.png" />
       </Head>
       <body className="antialiased">
         <Main />

frontend-v2/src/pages/test.tsx

@@ -0,0 +1,12 @@
+import { AuthedPageLayout } from "@/components/AuthedPageLayout";
+import { ContentWrapper } from "@/components/ContentWrapper";
+import { VueNavbar } from "@/components/VueNavbar";
+
+export default function TestPage() {
+  return (
+    <AuthedPageLayout>
+      <VueNavbar pageName="TestPage" />
+      <ContentWrapper size="sm">Hello from React!</ContentWrapper>
+    </AuthedPageLayout>
+  );
+}

frontend-v2/src/styles/globals.css

@@ -18,7 +18,7 @@ body {
   min-height: 100vh;
   background:
     linear-gradient(rgba(80, 90, 170, 0.85), rgba(80, 90, 170, 0.85)),
-    url("/static/img/bg1.jpg") no-repeat center center fixed;
+    url("/v2/bg.jpg") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;

frontend-v2/src/util/cn.ts

@@ -0,0 +1,6 @@
+import clsx, { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

frontend/AdbNav.vue

@@ -91,7 +91,6 @@
       </b-navbar-dropdown>
       <b-navbar-dropdown label="Beta" collapsible v-if="isAdmin(role)">
         <b-navbar-item href="/v2/test" :active="page === 'TestPage'"> Test page </b-navbar-item>
-        <b-navbar-item href="/v2/test2" :active="page === 'TestPage2'"> Test page 2 </b-navbar-item>
       </b-navbar-dropdown>
     </template>