mb/twifeur
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

init

Browse source
This commit is contained in:
JOLIMAITRE Matthieu 2024-05-24 02:04:48 +02:00
commit 2737aadc7f
13 changed files with 391 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

22
pages/components/base.tsx Normal file
View file

@ -0,0 +1,22 @@
/** @jsx jsx */
import { PropsWithChildren, jsx } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
import { _css } from "../../lib/utils.ts";
export function BasePage({ name, children }: PropsWithChildren<{ name: string }>) {
return (
<html lang="en">
<head>
<meta charSet="UTF-8"/>
<title>{name} - Twifeur</title>
<link rel="stylesheet" href="/static/style.css" />
</head>
<body style={_css({
width: "100%",
minHeight: "100%",
})}>
{children}
</body>
</html>
)
}

0
pages/components/footer.tsx Normal file
View file

50
pages/components/heading.tsx Normal file
View file

@ -0,0 +1,50 @@
/** @jsx jsx */
import { jsx } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
import { _css } from "../../lib/utils.ts";
export default function Heading() {
return (
<header style={_css({
width: "100vw",
display: "grid",
placeContent: "center",
backgroundColor: "#202020",
borderBottom: "1px solid #444",
boxShadow: "0px 0px 10px #0008",
position: "fixed",
})}>
<div style={_css({
width: "100vw",
maxWidth: "900px",
display: "flex",
})}>
<div style={_css({
borderLeft: '1px solid #444',
borderRight: '1px solid #444',
})}>
<h1 style={_css({
margin: "0.3rem",
marginLeft: "3rem",
marginRight: "3rem",
})}>TwiFeur</h1>
</div>
<MenuItem name="Content" location="/home"/>
<MenuItem name="About" location="/about"/>
<MenuItem name="User" location="/user"/>
</div>
</header>
)
}
function MenuItem({ name, location }: { name: string, location: string }) {
return (
<a href={location} style={_css({
borderRight: '1px solid #444',
textDecoration: 'none',
color: 'unset'
})}>
<h3 style={_css({ margin: "0.7rem" })}>{name}</h3>
</a>
)
}

9
pages/components/login.tsx Normal file
View file

@ -0,0 +1,9 @@
/** @jsx jsx */
import { jsx } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
export default function Login() {
return (<div>
</div>)
}

51
pages/components/main.tsx Normal file
View file

@ -0,0 +1,51 @@
/** @jsx jsx */
import { PropsWithChildren, jsx, Fragment } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
import { _css } from "../../lib/utils.ts";
export default function Main({ children }: PropsWithChildren) {
return (
<Fragment>
<main style={_css({
width: "100vw",
display: "grid",
placeContent: "center",
})}>
<div style={_css({
width: "100vw",
maxWidth: "1000px",
backgroundColor: "#202020",
borderLeft: "1px solid #444",
borderRight: "1px solid #444",
boxShadow: "0px 0px 10px #0008",
paddingTop: "2rem"
})}>
<div style={_css({
minHeight: "100vh",
padding: "2rem"
})}>
{children}
</div>
</div>
</main>
<footer style={_css({
width: "100vw",
display: "grid",
placeContent: "center",
backgroundColor: "#202020",
borderTop: "1px solid #444",
boxShadow: "0px 0px 10px #0008",
position: "relative",
})}>
<div style={_css({
width: "100vw",
maxWidth: "900px",
display: "flex",
padding: "1rem"
})}>
Footer
</div>
</footer>
</Fragment>
)
}

12
pages/components/post.tsx Normal file
View file

@ -0,0 +1,12 @@
/** @jsx jsx */
import { PropsWithChildren, jsx } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
import { _css } from "../../lib/utils.ts";
export function Post({ children, name }: PropsWithChildren<{ name: string }>) {
return (
<div>
</div>
)
}

15
pages/home.tsx Normal file
View file

@ -0,0 +1,15 @@
/** @jsx jsx */
import { jsx } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
import { BasePage } from "./components/base.tsx"
import Main from "./components/main.tsx";
import Heading from "./components/heading.tsx";
export default function HomePage() {
return (
<BasePage name="Home">
<Heading></Heading>
<Main>Main</Main>
</BasePage>
)
}

23
pages/static/style.css Normal file
View file

@ -0,0 +1,23 @@
html,
body,
header,
main,
footer {
margin: 0;
padding: 0;
}
h1 {
font-size: 1.5rem;
}
h3 {
font-size: 1rem;
}
body {
background-color: #181818;
color: #eee;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
overflow-x: hidden
}