GitHub: https://github.com/Sokhavuth/deno-fresh
Deno Deploy: https://khmerweb-fresh.deno.dev/
// routes/index.tsx
/** @jsx h */
import { h } from "preact";
import { setting } from "setting";
import { Handlers, PageProps } from "$fresh/server.ts";
import Home from '../components/front/home.jsx';
export const handler: Handlers = {
async GET(req, ctx) {
const config = setting();
config.message = "Welcome to Fresh framework!";
return await ctx.render({ "setting": config });
},
}
export default function Template(props: PageProps){
return (
<Home data={props.data} />
)
}
// components/front/home.jsx
/** @jsx h */
import { h } from "preact";
import Base from "../base.jsx";
function HomeJsx(props){
return(
<div>{props.data.setting.message}</div>
)
}
export default function Home(props){
props.data.page = HomeJsx;
return(
<Base data={props.data} />
)
}
// components/base.jsx
/** @jsx h */
import { h } from "preact";
export default function Base(props){
const Page = props.data.page
return(
<html>
<head>
<meta charSet="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{props.data.setting.site_title} | {props.data.setting.page_title}</title>
<link href="/styles/base.css" rel="stylesheet" />
<link href="/fonts/setup.css" rel="stylesheet" />
<script src="/scripts/jquery.js"></script>
</head>
<body>
<Page data={props.data} />
</body>
</html>
)
}
// setting.js
function setting(){
const configure = {
site_title: "Multimedia",
page_title: "Home",
message: "",
}
return configure
}
export { setting }
/* static/styles/base.css */
:root{
--background-light: #26f8ad;
--background: lightgrey;
--background-dark: #149165;
--body-font: 14px/1.5 Vidaloka, OdorMeanChey;
--link: #17a372;
--color: black;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: var(--link);
}
a:hover{
opacity: .7;
}
.region{
max-width: 1100px;
margin: 0 auto;
}
body{
color: var(--color);
font: var(--body-font);
background: var(--background);
}
Top comments (0)