From 9e0ad448c28a91255e95c8348707d546fb370b1d Mon Sep 17 00:00:00 2001
From: Ashhhleyyy <ash@ashhhleyyy.dev>
Date: Wed, 27 Jul 2022 21:56:32 +0100
Subject: [PATCH] feat: footer + about page

---
 components/Banner.tsx                     | 12 +++++--
 components/Button.tsx                     | 12 ++-----
 components/Footer.tsx                     | 19 ++++++++++
 pages/_app.tsx                            | 10 ++++--
 pages/about.tsx                           | 43 +++++++++++++++++++++++
 pages/comic/[comic]/transcribe/[page].tsx | 36 +++----------------
 styles/globals.css                        |  7 ++++
 7 files changed, 93 insertions(+), 46 deletions(-)
 create mode 100644 components/Footer.tsx
 create mode 100644 pages/about.tsx

diff --git a/components/Banner.tsx b/components/Banner.tsx
index 8200978..57de650 100644
--- a/components/Banner.tsx
+++ b/components/Banner.tsx
@@ -1,12 +1,20 @@
 import { ReactNode } from 'react';
 
+type Style = 'error' | 'warning' | 'info';
+
 interface Props {
     children: ReactNode;
-    style: 'error' | 'info';
+    style: Style;
 }
 
+const COLOUR_MAP: { [P in Style]: string } = {
+    info: 'bg-blue-400 border-blue-600',
+    error: 'bg-red-900 border-red-700',
+    warning: 'bg-orange-900 border-orange-700',
+};
+
 export default function Banner(props: Props) {
-    return <div className={'border-2 rounded-lg p-3 ' + (props.style === 'info' ? 'bg-blue-400 border-blue-600' : 'bg-red-900 border-red-700')}>
+    return <div className={'border-2 rounded-lg p-3 ' + (COLOUR_MAP[props.style])}>
         {props.children}
     </div>
 }
diff --git a/components/Button.tsx b/components/Button.tsx
index 72589e2..9d03c93 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -39,18 +39,12 @@ export default function Button({
     return <button className={classes.join(' ')} {...props} />;
 }
 
-type LinkButtonProps = Omit<
-    AnchorHTMLAttributes<HTMLAnchorElement>,
-    keyof LinkProps
-> &
-    LinkProps & {
-        children?: React.ReactNode;
-    } & RefAttributes<HTMLAnchorElement>;
+type LinkButtonProps = AnchorHTMLAttributes<HTMLAnchorElement>;
 
 export function LinkButton({ className, children, ...props }: LinkButtonProps) {
     return (
-        <Link {...props}>
-            <a className={'text-blue-200 hover:underline ' + (className || '')}>
+        <Link href={props.href || ''}>
+            <a className={'text-blue-200 hover:underline ' + (className || '')} {...props}>
                 {children}
             </a>
         </Link>
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..6eb8ffc
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,19 @@
+import { LinkButton } from "./Button";
+
+export default function Footer() {
+    return <footer className='w-full h-12 bg-gray-900 p-4 gap-1 shadow'>
+        <ul className='flex flex-row items-center dots-between'>
+            <li>
+                Created by <LinkButton href='https://ashhhleyyy.dev'>Ashhhleyyy</LinkButton>.
+            </li>
+
+            <li>
+                Comics are Copyright (c) their original authors
+            </li>
+
+            <li>
+                <LinkButton href='/about'>About</LinkButton>
+            </li>
+        </ul>
+    </footer>
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index b7f1bbf..b8ec568 100755
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,15 +2,19 @@ import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import { SessionProvider } from 'next-auth/react';
 import NavBar from '../components/NavBar';
+import Footer from '../components/Footer';
 
 function MyApp({ Component, pageProps }: AppProps) {
     return (
-        <>
+        <div className='min-h-screen flex flex-col'>
             <SessionProvider>
                 <NavBar />
-                <Component {...pageProps} />
+                <div className='flex-1'>
+                    <Component {...pageProps} />
+                </div>
+                <Footer />
             </SessionProvider>
-        </>
+        </div>
     );
 }
 
diff --git a/pages/about.tsx b/pages/about.tsx
new file mode 100644
index 0000000..356a178
--- /dev/null
+++ b/pages/about.tsx
@@ -0,0 +1,43 @@
+import Head from "next/head";
+import Banner from "../components/Banner";
+import { LinkButton } from "../components/Button";
+
+export default function About() {
+    return <main className='p-4 max-w-2xl'>
+        <Head>
+            <title>About Comicbox</title>
+        </Head>
+
+        <section>
+            <h1 className='text-4xl'>About Comicbox</h1>
+
+            <p>
+                Comicbox is an <LinkButton href='https://git.ashhhleyyy.dev/ash/comicbox'>open-source</LinkButton> website for
+                crowdsourcing transcriptions for webcomics. Anyone can <LinkButton href='/login'>log in</LinkButton> and help
+                transcribing pages.
+            </p>
+        </section>
+
+        <section>
+            <h2 className='text-3xl'>How to help?</h2>
+
+            <p>
+                You can <LinkButton href='/login'>log in</LinkButton> with Discord or GitHub right away to start, just pick
+                a comic on the <LinkButton href='/'>homepage</LinkButton> and use the 'Random Page' links from there.
+
+                <br />
+
+                On the transcription page, you can draw boxes around each bubble on the page, and once you have checked
+                the order, click 'Extract text' to attempt to automatically extract the text from each bubble. This may
+                take a few seconds to complete, and once it has, then all the boxes will be filled with the text. You can
+                then select these to edit the text and assign the correct character. Once you are done with a page, you can
+                click save to submit your changes.
+            </p>
+
+            <Banner style="warning">
+                I would recommend that you have fully read any comics you choose before starting, as otherwise you may
+                see pages you haven't read yet.
+            </Banner>
+        </section>
+    </main>
+}
diff --git a/pages/comic/[comic]/transcribe/[page].tsx b/pages/comic/[comic]/transcribe/[page].tsx
index 0984bb9..230cd50 100644
--- a/pages/comic/[comic]/transcribe/[page].tsx
+++ b/pages/comic/[comic]/transcribe/[page].tsx
@@ -161,12 +161,7 @@ export default function TranscribePage(props: Props) {
                         <nav className='flex flex-row w-full'>
                             <LinkButton
                                 className='flex-1 w-full'
-                                href={{
-                                    pathname: '/comic/[comic]',
-                                    query: {
-                                        comic: props.page.comic.slug,
-                                    },
-                                }}
+                                href={`/comic/${props.page.comic.slug}`}
                             >
                                 &larr; Back to {props.page.comic.title}
                             </LinkButton>
@@ -178,41 +173,18 @@ export default function TranscribePage(props: Props) {
                             {props.page.id > 1 && (
                                 <LinkButton
                                     className='flex-1 w-full text-center'
-                                    href={{
-                                        pathname:
-                                            '/comic/[comic]/transcribe/[page]',
-                                        query: {
-                                            comic: props.page.comic.slug,
-                                            page: props.page.id - 1,
-                                        },
-                                    }}
-                                >
+                                    href={`/comic/${props.page.comic.slug}/transcribe/${props.page.id - 1}`}>
                                     &larr; Previous page
                                 </LinkButton>
                             )}
                             <LinkButton
                                 className='flex-1 w-full text-center'
-                                href={{
-                                    pathname:
-                                        '/comic/[comic]/transcribe/random',
-                                    query: {
-                                        comic: props.page.comic.slug,
-                                    },
-                                }}
-                            >
+                                href={`/comic/${props.page.comic.slug}/transcribe/random`}>
                                 Random page
                             </LinkButton>
                             <LinkButton
                                 className='flex-1 w-full text-center'
-                                href={{
-                                    pathname:
-                                        '/comic/[comic]/transcribe/[page]',
-                                    query: {
-                                        comic: props.page.comic.slug,
-                                        page: props.page.id + 1,
-                                    },
-                                }}
-                            >
+                                href={`/comic/${props.page.comic.slug}/transcribe/${props.page.id + 1}`}>
                                 Next page &rarr;
                             </LinkButton>
                         </nav>
diff --git a/styles/globals.css b/styles/globals.css
index 1cb350b..54b64a6 100755
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -7,3 +7,10 @@
         @apply bg-gray-800 text-gray-200;
     }
 }
+
+@layer components {
+    .dots-between > li:not(:last-child)::after {
+        content: "⦁";
+        padding: 0 8px;
+    }
+}