Ensuring the website can be built and deployed fully in docker. This includes an end to end docker-compose configuration as a simple demonstration.

website/src/components/CallToAction.tsx

@@ -16,7 +16,7 @@ export function CallToAction() {
             here:
           </p>
           <div className="mt-8 flex justify-center">
-            <a href="https://discord.gg/pXtnYk9c" target="_blank">
+            <a href="https://discord.gg/pXtnYk9c" rel="noreferrer" target="_blank">
               <button
                 type="button"
                 className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
@@ -31,7 +31,7 @@ export function CallToAction() {
               </button>
             </a>
 
-            <a href="https://github.com/LAION-AI/Open-Assistant" target="_blank">
+            <a href="https://github.com/LAION-AI/Open-Assistant" rel="noreferrer" target="_blank">
               <button
                 type="button"
                 className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"

website/src/components/Header.tsx

@@ -1,10 +1,11 @@
-import Link from "next/link";
-import { signOut, useSession } from "next-auth/react";
+import { Button } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import { signOut, useSession } from "next-auth/react";
 
 import { Container } from "./Container";
-import Image from "next/image";
 import { NavLinks } from "./NavLinks";
 
 function MenuIcon(props) {
@@ -40,23 +41,14 @@ function AccountButton() {
   const { data: session } = useSession();
   if (session) {
     return (
-      <button
-        type="button"
-        onClick={() => signOut()}
-        className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-      >
+      <Button variant="outline" onClick={() => signOut()}>
         Log out
-      </button>
+      </Button>
     );
   }
   return (
     <Link href="/auth/signin" aria-label="Home" className="flex items-center">
-      <button
-        type="button"
-        className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-      >
-        Log in
-      </button>
+      <Button variant="outline">Log in</Button>
     </Link>
   );
 }

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

@@ -1,3 +1,4 @@
+import type { AuthOptions } from "next-auth";
 import NextAuth from "next-auth";
 import DiscordProvider from "next-auth/providers/discord";
 import EmailProvider from "next-auth/providers/email";
@@ -31,7 +32,7 @@ if (process.env.DISCORD_CLIENT_ID) {
   );
 }
 
-export const authOptions = {
+export const authOptions: AuthOptions = {
   // Ensure we can store user data in a database.
   adapter: PrismaAdapter(prisma),
   providers,

website/src/pages/api/new_task/[task_type].ts

@@ -1,5 +1,6 @@
 import { getToken } from "next-auth/jwt";
 
+import prisma from "src/lib/prismadb";
 import { authOptions } from "src/pages/api/auth/[...nextauth]";
 
 /**
@@ -10,7 +11,7 @@ import { authOptions } from "src/pages/api/auth/[...nextauth]";
  * 3) Send and Ack to the Task Backend with our local id for the task.
  * 4) Return everything to the client.
  */
-export default async (req, res) => {
+const handler = async (req, res) => {
   const { task_type } = req.query;
 
   const token = await getToken({ req });
@@ -69,3 +70,5 @@ export default async (req, res) => {
   // Send the results to the client.
   res.status(200).json(registeredTask);
 };
+
+export default handler;

website/src/pages/api/update_task.ts

@@ -1,5 +1,6 @@
 import { getToken } from "next-auth/jwt";
 
+import prisma from "src/lib/prismadb";
 import { authOptions } from "src/pages/api/auth/[...nextauth]";
 
 /**
@@ -11,7 +12,7 @@ import { authOptions } from "src/pages/api/auth/[...nextauth]";
  * 3) (TODO) Acks the new task with our local task ID to the Task Backend.
  * 4) Returns the newly created task to the client.
  */
-export default async (req, res) => {
+const handler = async (req, res) => {
   const token = await getToken({ req });
 
   // Return nothing if the user isn't registered.
@@ -76,3 +77,5 @@ export default async (req, res) => {
   // Send the next task in the sequence to the client.
   res.status(200).json(newRegisteredTask);
 };
+
+export default handler;

website/src/pages/grading/grade-output.tsx

@@ -134,7 +134,7 @@ const GradeOutput = () => {
           <button
             type="button"
             onClick={() => submitResponse(tasks[0])}
-            className="nline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
           >
             Submit
           </button>