ash/comicbox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: footer + about page

Browse source
This commit is contained in:
Ashhhleyyy 2022-07-27 21:56:32 +01:00
parent 32b4ca94cd
commit 9e0ad448c2
Signed by: ash
GPG key ID: 83B789081A0878FB
7 changed files with 93 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/Banner.tsx
View file

@ -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>
}

12
components/Button.tsx
View file

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

19
components/Footer.tsx Normal file
View file

@ -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>
}

10
pages/_app.tsx
View file

@ -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>
);
}

43
pages/about.tsx Normal file
View file

@ -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>
}

36
pages/comic/[comic]/transcribe/[page].tsx
View file

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

7
styles/globals.css
View file

@ -7,3 +7,10 @@
@apply bg-gray-800 text-gray-200;
}
}
@layer components {
.dots-between > li:not(:last-child)::after {
content: "⦁";
padding: 0 8px;
}
}