Khmer Web | Boilerplate Code

// 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.tsx';


export const handler: Handlers = {
  async GET(req, ctx) {
    const message = "Welcome to Khmer Web Fresh framework!!";
    return await ctx.render({"message":message,"setting":setting()});
  },
}


export default function Template(props: PageProps){
  return (
    <Home data={props.data} />
  )
}

// components/front/home.tsx

/** @jsx h */
import { h } from "preact";
import { Handlers, PageProps } from "$fresh/server.ts";
import Base from "../base.tsx";

function HomeJsx(props: PageProps){
    return(
        <div>{props.data.message}</div>
    )
}
  

export default function Home(props: PageProps){
    props.data.page = HomeJsx;
    return(
        <Base data={props.data} />
    )
}

// components/base.tsx

/** @jsx h */
import { h } from "preact";
import { PageProps } from "$fresh/server.ts";


export default function Base(props: PageProps){
    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>
    )
  }

/* 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);
}

// setting.ts

function setting(){
    const config = {
        site_title: "ពហុព័ត៌មាន",
        page_title: "ទំព័រដើម",
        message: "",
        count: 0,
        post_amount: 10,
    }

    return config;
}

///////////////////////////////////

export { setting };

GitHub: https://github.com/Sokhavuth/khmerweb-fresh

Deno Deploy: https://khmerweb.deno.dev/