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

Add a footer to the layouts.

Browse Source
This commit is contained in:
Dave Smith-Hayes 2024-03-02 13:09:42 -05:00
parent 5dbcd597cd
commit a6fccd61be
5 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import { FC } from 'hono/jsx'; import { FC } from 'hono/jsx';
import Header from './layout/header'; import Header from './layout/header';
import Footer from './layout/footer';
const Layout: FC = (props) => { const Layout: FC = (props) => {
return ( return (
@ -8,8 +9,9 @@ const Layout: FC = (props) => {
<title>{props.siteData.title}</title> <title>{props.siteData.title}</title>
</head> </head>
<body> <body>
<Header title={props.siteData.title}/> <Header title={props.siteData.title} />
{props.children} {props.children}
<Footer title={props.siteData.copyright} />
</body> </body>
</html> </html>
) )

13
app/src/frontend/layout/footer.tsx Normal file
View File

@ -0,0 +1,13 @@
import { FC } from 'hono/jsx';
const currentYear = new Date().getFullYear();
const Footer: FC = (props) => {
return (
<footer>
<div>{props.copyright}</div>
</footer>
);
};
export default Footer;

4
app/src/frontend/layout/header.tsx
View File

@ -1,4 +1,6 @@
const Header = (props) => { import { FC } from 'hono/jsx';
const Header: FC = (props) => {
return ( return (
<header> <header>
<div class="title">{props.title}</div> <div class="title">{props.title}</div>

10
app/src/index.tsx
View File

@ -1,14 +1,12 @@
import { Hono } from 'hono'; import { Hono } from 'hono';
import SiteData from './model/SiteData';
import Layout from './frontend/layout'; import Layout from './frontend/layout';
import { SiteConfig, configMiddleware } from './middleware/config';
const app = new Hono(); const app = new Hono();
app.use(configMiddleware);
app.get('/', (c) => { app.get('/', async (c) => {
const siteData: SiteData = { const siteData: SiteConfig = await c.get('config');
title: "Slovocast",
description: "A no-nonsense podcast hosting platform."
};
const layout = ( const layout = (
<Layout siteData={siteData}> <Layout siteData={siteData}>

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

@ -5,18 +5,21 @@ type SiteConfig = {
name: string, name: string,
description: string, description: string,
baseUrl: string baseUrl: string
copyright: string,
}; };
const currentYear = new Date().getFullYear();
const config: SiteConfig = { const config: SiteConfig = {
name: "Slovocast", name: "Slovocast",
description: "A no-nonesense Podcast hosting platform.", description: "A no-nonesense Podcast hosting platform.",
baseUrl: "dev.slovocast.com" baseUrl: "dev.slovocast.com",
copyright: `Copyright ${currentYear} Slovocast`,
}; };
const configMiddleware = new Hono(); const configMiddleware = async function(c: Context, next) {
configMiddleware.use((c: Context, next) => {
c.set('config', config); c.set('config', config);
next(); await next();
}); };
export SiteConfig, configMiddleware; export { SiteConfig, configMiddleware };