Merge branch 'main' into eslint

website/README.md

@@ -64,9 +64,9 @@ If you're doing active development we suggest the following workflow:
 
 ### Using debug user credentials
 
-Whenever the website runs in development mode, you can use the debug credentials provider to log in without fancy emails or OAuth.
+You can use the debug credentials provider to log in without fancy emails or OAuth.
 
-1. Development mode is automatically active when you start the website with `npm run dev`.
+1. This feature is automatically on in development mode, i.e. when you run `npm run dev`. In case you want to do the same with a production build (for example, the docker image), then run the website with environment variable `DEBUG_LOGIN=true`.
 1. Use the `Login` button in the top right to go to the login page.
 1. You should see a section for debug credentials. Enter any username you wish, you will be logged in as that user.
 

website/package.json

@@ -23,6 +23,7 @@
     "@tailwindcss/forms": "^0.5.3",
     "autoprefixer": "^10.4.13",
     "axios": "^1.2.1",
+    "boolean": "^3.2.0",
     "clsx": "^1.2.1",
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.6",

website/src/components/Footer.tsx

@@ -25,7 +25,7 @@ export function Footer() {
                   <Link href="#" aria-label="Our Team" className="hover:underline underline-offset-2">
                     Our Team
                   </Link>
-                  <Link href="#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
+                  <Link href="/#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
                     Join Us
                   </Link>
                 </div>

website/src/components/Header/Header.stories.jsx

@@ -21,4 +21,4 @@ const Template = (args) => {
 };
 
 export const Default = Template.bind({});
-Default.args = { session: { data: { user: { name: "StoryBook user" } }, status: "authenticated" } };
+Default.args = { session: { data: { user: { name: "StoryBook user" } }, status: "authenticated" }, transparent: false };

website/src/components/Header/Header.tsx

@@ -3,8 +3,10 @@ import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
-import { useSession } from "next-auth/react";
-import { FaUser } from "react-icons/fa";
+
+import { signOut, useSession } from "next-auth/react";
+import { FaUser, FaSignOutAlt } from "react-icons/fa";
+import clsx from "clsx";
 
 import { Container } from "src/components/Container";
 import { NavLinks } from "./NavLinks";
@@ -53,9 +55,10 @@ function AccountButton() {
   );
 }
 
-export function Header() {
+export function Header(props) {
+  const transparent = props.transparent ?? false;
   return (
-    <header className="bg-white">
+    <header className={clsx(!transparent && "bg-white")}>
       <nav>
         <Container className="relative z-10 flex justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">
@@ -101,8 +104,8 @@ export function Header() {
                           className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
-                            <MobileNavLink href="#join-us">Join Us</MobileNavLink>
-                            <MobileNavLink href="#faqs">FAQs</MobileNavLink>
+                            <MobileNavLink href="/#join-us">Join Us</MobileNavLink>
+                            <MobileNavLink href="/#faqs">FAQs</MobileNavLink>
                           </div>
                           <div className="mt-8 flex flex-col gap-4"></div>
                         </Popover.Panel>

website/src/components/Header/NavLinks.tsx

@@ -8,8 +8,8 @@ export function NavLinks(): JSX.Element {
   return (
     <>
       {[
-        ["Join Us", "#join-us"],
-        ["FAQ", "#faq"],
+        ["Join Us", "/#join-us"],
+        ["FAQ", "/#faq"],
       ].map(([label, href], index) => (
         <Link
           key={label}

website/src/components/TaskSelection/TaskSelection.tsx

@@ -7,12 +7,12 @@ export const TaskSelection = () => {
   return (
     <Flex gap={10} wrap="wrap" justifyContent="space-evenly" width="full" height="full" alignItems={"center"}>
       <TaskOptions key="create" title="Create">
-        <TaskOption
+        {/* <TaskOption
           alt="Summarize Stories"
           img="/images/logos/logo.svg"
           title="Summarize stories"
           link="/create/summarize_story"
-        />
+        /> */}
         <TaskOption alt="Reply as User" img="/images/logos/logo.svg" title="Reply as User" link="/create/user_reply" />
         <TaskOption
           alt="Reply as Assistant"
@@ -22,12 +22,12 @@ export const TaskSelection = () => {
         />
       </TaskOptions>
       <TaskOptions key="evaluate" title="Evaluate">
-        <TaskOption
+        {/* <TaskOption
           alt="Rate Prompts"
           img="/images/logos/logo.svg"
           title="Rate Prompts"
           link="/evaluate/rate_summary"
-        />
+        /> */}
         <TaskOption
           alt="Rank Initial Prompts"
           img="/images/logos/logo.svg"

website/src/pages/api/auth/[...nextauth].ts

@@ -5,6 +5,7 @@ import DiscordProvider from "next-auth/providers/discord";
 import EmailProvider from "next-auth/providers/email";
 import CredentialsProvider from "next-auth/providers/credentials";
 import { PrismaAdapter } from "@next-auth/prisma-adapter";
+import { boolean } from "boolean";
 
 import prisma from "src/lib/prismadb";
 
@@ -34,7 +35,7 @@ if (process.env.DISCORD_CLIENT_ID) {
   );
 }
 
-if (process.env.NODE_ENV === "development") {
+if (boolean(process.env.DEBUG_LOGIN) || process.env.NODE_ENV === "development") {
   providers.push(
     CredentialsProvider({
       name: "Debug Credentials",

website/src/pages/index.tsx

@@ -5,6 +5,8 @@ import { CallToAction } from "src/components/CallToAction";
 import { Faq } from "src/components/Faq";
 import { Hero } from "src/components/Hero";
 import { TaskSelection } from "src/components/TaskSelection";
+import { Header } from "src/components/Header";
+import { Footer } from "src/components/Footer";
 
 const Home = () => {
   const { data: session } = useSession();
@@ -34,4 +36,12 @@ const Home = () => {
   );
 };
 
+Home.getLayout = (page) => (
+  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+    <Header transparent={true} />
+    {page}
+    <Footer />
+  </div>
+);
+
 export default Home;