dsh/slovocast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganize the TSX to handle making the pages.

Browse Source
This commit is contained in:
Dave Smith-Hayes 2024-03-03 21:28:33 -05:00
parent a6fccd61be
commit c3ddda83db
6 changed files with 81 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/src/frontend/layout.tsx
View File

@ -1,20 +1,23 @@
import { FC } from 'hono/jsx';
import Header from './layout/header';
import Footer from './layout/footer';
import { html } from 'hono/html';
const Layout: FC = (props) => {
return (
export const Layout = (props: { title: string, children?: any }) => {
return html`<!DOCTYPE html>
<html>
<head>
<title>{props.siteData.title}</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>${props.title}</title>
</head>
<body>
<Header title={props.siteData.title} />
{props.children}
<Footer title={props.siteData.copyright} />
<header>
<h1>Slovocast</h1>
</header>
<main>${props.children}</main>
<footer>
<p>&copy; 2024, Slovocast</p>
</footer>
</body>
</html>
)
</html>`;
}
export default Layout;

31
app/src/frontend/layout/login-form.tsx Normal file
View File

@ -0,0 +1,31 @@
import { FC } from "hono/jsx"
const Error: FC = (props) => {
return (
<div class="form-error">
{props.message}
</div>
);
};
export const LoginForm: FC = (props) => {
return (
<>
{props.error ? <Error message={props.error.message} /> : null}
<form action="/login" method="POST">
<label for="email">
<div>Email</div>
<input type="text" name="email" required />
</label>
<label for="password">
<div>Password</div>
<input type="password" name="password" required />
</label>
<div>
<input type="submit" name="login" value="Login" />
</div>
</form>
</>
);
};

11
app/src/frontend/pages/login.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Layout } from '../layout';
const LoginPage = (props: { error?: any }) => {
return (
<Layout title="Login">
<LoginForm action="/login" error=error />
</Layout>
);
};
export default LoginPage;

17
app/src/index.tsx
View File

@ -1,17 +1,18 @@
import { Hono } from 'hono';
import Layout from './frontend/layout';
import { SiteConfig, configMiddleware } from './middleware/config';
import LoginForm from './frontend/user/login';
const app = new Hono();
app.use(configMiddleware);
app.get('/', async (c) => {
const siteData: SiteConfig = await c.get('config');
const siteData: SiteConfig = c.get('config');
const layout = (
<Layout siteData={siteData}>
<main>
<h1>Slovocast</h1>
<h1>Welcome to Slovocast</h1>
</main>
</Layout>
);
@ -19,4 +20,16 @@ app.get('/', async (c) => {
return c.html(layout);
});
app.get('/login', async (c) => {
const config: SiteConfig = c.get('config');
return c.html(
<Layout siteData={config}>
<main>
<LoginForm action="/login" />
</main>
</Layout>
);
});
export default app;

12
app/src/middleware/config.ts
View File

@ -1,16 +1,10 @@
import { Hono } from 'hono';
import { Context } from 'hono';
type SiteConfig = {
name: string,
description: string,
baseUrl: string
copyright: string,
};
import SiteData from '../model/SiteData';
const currentYear = new Date().getFullYear();
const config: SiteConfig = {
const config: SiteData = {
name: "Slovocast",
description: "A no-nonesense Podcast hosting platform.",
baseUrl: "dev.slovocast.com",
@ -22,4 +16,4 @@ const configMiddleware = async function(c: Context, next) {
await next();
};
export { SiteConfig, configMiddleware };
export { configMiddleware };

8
app/src/model/SiteData.ts
View File

@ -1,4 +1,8 @@
export default interface SiteData {
title: string,
type SiteData = {
name: string,
description: string,
baseUrl: string
copyright: string,
};
export default SiteData;