feat(frontend): incomplete port to next.js

This commit is contained in:
Sam 2022-08-16 00:01:54 +02:00
parent b9c30379ee
commit eec01dc070
50 changed files with 2874 additions and 3163 deletions

18
frontend/pages/_app.tsx Executable file
View file

@ -0,0 +1,18 @@
import "../styles/globals.css";
import type { AppProps } from "next/app";
import Container from "../components/Container";
import Navigation from "../components/Navigation";
import { RecoilRoot } from "recoil";
function MyApp({ Component, pageProps }: AppProps) {
return (
<RecoilRoot>
<Navigation />
<Container>
<Component {...pageProps} />
</Container>
</RecoilRoot>
);
}
export default MyApp;

View file

@ -0,0 +1,13 @@
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html>
<Head />
<body className="bg-white dark:bg-slate-800 text-black dark:text-white">
<Main />
<NextScript />
</body>
</Html>
);
}

13
frontend/pages/api/hello.ts Executable file
View file

@ -0,0 +1,13 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
name: string
}
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
res.status(200).json({ name: 'John Doe' })
}

23
frontend/pages/index.tsx Executable file
View file

@ -0,0 +1,23 @@
import ReactMarkdown from "react-markdown";
// this is a temporary home page, which is why the markdown content is embedded
const md = `This will (one day) be a site to create pronoun cards for yourself,
similarly to [Pronouny](https://pronouny.xyz/) and [Pronouns.page](https://en.pronouns.page/).
You'll be able to create multiple profiles that are linked together,
useful for plurality ([what?](https://morethanone.info/)) and kin, or even just for fun!
For now though, there's just this landing page <3
(And no, the "Log in" button doesn't do anything either.)
Check out the (work in progress) source code on [Codeberg](https://codeberg.org/u1f320/pronouns.cc)!`;
function Home() {
return (
<div className="prose prose-slate dark:prose-invert">
<ReactMarkdown>{md}</ReactMarkdown>
</div>
);
}
export default Home;