diff --git a/components/Banner.tsx b/components/Banner.tsx index 57de650..3077738 100644 --- a/components/Banner.tsx +++ b/components/Banner.tsx @@ -14,7 +14,9 @@ const COLOUR_MAP: { [P in Style]: string } = { }; export default function Banner(props: Props) { - return
- {props.children} -
+ return ( +
+ {props.children} +
+ ); } diff --git a/components/Button.tsx b/components/Button.tsx index 9d03c93..ecf0eac 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -2,9 +2,8 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, - RefAttributes, } from 'react'; -import Link, { LinkProps } from 'next/link'; +import Link from 'next/link'; interface CustomProps { noDefaultColous?: boolean; @@ -44,7 +43,10 @@ type LinkButtonProps = AnchorHTMLAttributes; export function LinkButton({ className, children, ...props }: LinkButtonProps) { return ( - + {children} diff --git a/components/CompletionBar.tsx b/components/CompletionBar.tsx index cfdbd59..3f8a384 100644 --- a/components/CompletionBar.tsx +++ b/components/CompletionBar.tsx @@ -6,7 +6,23 @@ interface Props { export default function CompletionBar(props: Props) { const progress = (props.completed / props.total) * 100; - return - - + return ( + + + + ); } diff --git a/components/Footer.tsx b/components/Footer.tsx index 6eb8ffc..859fafd 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,19 +1,23 @@ -import { LinkButton } from "./Button"; +import { LinkButton } from './Button'; export default function Footer() { - return
-
    -
  • - Created by Ashhhleyyy. -
    • + return ( +
    +
      +
    • + Created by{' '} + + Ashhhleyyy + + . +
      • -
    • - Comics are Copyright (c) their original authors -
      • +
    • Comics are Copyright (c) their original authors
      • -
    • - About -
      • -
    -
    +
  • + About +
    • +
+
+ ); } diff --git a/components/NavBar.tsx b/components/NavBar.tsx index a934004..7fb395c 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -19,7 +19,9 @@ export default function NavBar() { {status === 'loading' && <>...} {status === 'unauthenticated' && ( Log in @@ -32,7 +34,6 @@ export default function NavBar() { )} - ); } diff --git a/pages/about.tsx b/pages/about.tsx index 356a178..ffa9558 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -1,43 +1,53 @@ -import Head from "next/head"; -import Banner from "../components/Banner"; -import { LinkButton } from "../components/Button"; +import Head from 'next/head'; +import Banner from '../components/Banner'; +import { LinkButton } from '../components/Button'; export default function About() { - return
- - About Comicbox - + return ( +
+ + About Comicbox + -
-

About Comicbox

+
+

About Comicbox

-

- Comicbox is an open-source website for - crowdsourcing transcriptions for webcomics. Anyone can log in and help - transcribing pages. -

-
+

+ Comicbox is an{' '} + + open-source + {' '} + website for crowdsourcing transcriptions for webcomics. + Anyone can log in and + help transcribing pages. +

+
-
-

How to help?

+
+

How to help?

-

- You can log in with Discord or GitHub right away to start, just pick - a comic on the homepage and use the 'Random Page' links from there. +

+ You can log in with + Discord or GitHub right away to start, just pick a comic on + the homepage and use the + 'Random Page' links from there. +
+ 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. +

-
- - 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. -

- - - 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. - -
-
+ + 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. + + +
+ ); } diff --git a/pages/comic/[comic]/index.tsx b/pages/comic/[comic]/index.tsx index baa4f57..2aa7818 100644 --- a/pages/comic/[comic]/index.tsx +++ b/pages/comic/[comic]/index.tsx @@ -37,40 +37,55 @@ export default function ComicPage({ comic, completion }: Props) { {completion.totalPages} pages have been transcribed!

- +
); diff --git a/pages/comic/[comic]/transcribe/[page].tsx b/pages/comic/[comic]/transcribe/[page].tsx index 230cd50..91aa89d 100644 --- a/pages/comic/[comic]/transcribe/[page].tsx +++ b/pages/comic/[comic]/transcribe/[page].tsx @@ -173,18 +173,25 @@ export default function TranscribePage(props: Props) { {props.page.id > 1 && ( + href={`/comic/${ + props.page.comic.slug + }/transcribe/${props.page.id - 1}`} + > ← Previous page )} + href={`/comic/${props.page.comic.slug}/transcribe/random`} + > Random page + href={`/comic/${ + props.page.comic.slug + }/transcribe/${props.page.id + 1}`} + > Next page → diff --git a/pages/index.tsx b/pages/index.tsx index df9367a..ac0dd90 100755 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,5 @@ import { Comic } from '@prisma/client'; -import type { GetServerSideProps, NextPage } from 'next'; +import type { GetServerSideProps } from 'next'; import Head from 'next/head'; import { LinkButton } from '../components/Button'; import CompletionBar from '../components/CompletionBar'; @@ -15,7 +15,7 @@ interface Props { }[]; } -const Home: NextPage = (props) => { +const Home = (props: Props) => { return (
@@ -32,24 +32,34 @@ const Home: NextPage = (props) => { {props.comics.map(({ comic, completion }) => { - return - - - {comic.title} - - - - - - ({completion.completePages}/{completion.totalPages} pages) - - - - - {new URL(comic.url).host} - - - + return ( + + + + {comic.title} + + + + + + ({completion.completePages}/ + {completion.totalPages} pages) + + + + + {new URL(comic.url).host} + + + + ); })} @@ -61,33 +71,36 @@ export default Home; export const getServerSideProps: GetServerSideProps = async () => { const comics = await prisma.comic.findMany(); - const comicsWithCompletions = await Promise.all(comics.map(async (comic) => { - const pages = await prisma.comicPage.findMany({ - where: { - comicId: comic.id, - }, - select: { - _count: { - select: { - bubbles: true, + const comicsWithCompletions = await Promise.all( + comics.map(async (comic) => { + const pages = await prisma.comicPage.findMany({ + where: { + comicId: comic.id, + }, + select: { + _count: { + select: { + bubbles: true, + }, }, }, - }, - }); + }); - return { - comic, - completion: { - totalPages: pages.length, - completePages: pages.filter((page) => page._count.bubbles !== 0) - .length, - }, - } - })); + return { + comic, + completion: { + totalPages: pages.length, + completePages: pages.filter( + (page) => page._count.bubbles !== 0 + ).length, + }, + }; + }) + ); return { props: { comics: comicsWithCompletions, - } - } -} + }, + }; +}; diff --git a/pages/login.tsx b/pages/login.tsx index 3a13e73..f65bee1 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -16,8 +16,10 @@ export default function Login() { ? router.query.callbackUrl[0] : router.query.callbackUrl) || '/'; - - const error = Array.isArray(router.query.error) ? router.query.error[0] : router.query.error; + + const error = Array.isArray(router.query.error) + ? router.query.error[0] + : router.query.error; return (
@@ -30,14 +32,20 @@ export default function Login() {

Login

- {error && <> -
+ {error && ( + <> +
- - {error === 'SessionRequired' && <>You must login to view this page.} - {error === 'Default' && <>An error occurred {':('} Please try again.} - - } + + {error === 'SessionRequired' && ( + <>You must login to view this page. + )} + {error === 'Default' && ( + <>An error occurred {':('} Please try again. + )} + + + )}
diff --git a/styles/globals.css b/styles/globals.css index 54b64a6..de1cac6 100755 --- a/styles/globals.css +++ b/styles/globals.css @@ -10,7 +10,7 @@ @layer components { .dots-between > li:not(:last-child)::after { - content: "⦁"; + content: '⦁'; padding: 0 8px; } }