신선한 블로그 엔진: 상용구 코드




GitHub: https://github.com/Sokhavuth/deno-fresh
데노 배치: 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);
}

좋은 웹페이지 즐겨찾기