Khmer Web | Boilerplate Code

// mod.ts

import app from "./app.ts"

const port = parseInt(Deno.env.get("PORT") ?? "3000")
app.set("port", port)

const env = Deno.env.get("DENO_ENV") ?? "development"
app.set("env", env)

app.listen(port, () => console.log(`listening on port ${port}`))

// denon run --allow-net --allow-read --allow-env mod.ts

// app.ts

import {
  dirname,
  fromFileUrl,
  join,
  json,
  opine,
  serveStatic,
  urlencoded,
} from "./deps.ts"

import indexRouter from "./routes/index.js"
import adminRouter from "./routes/admin.js"

const __dirname = fromFileUrl(dirname(import.meta.url))

const app = opine()

app.use(json())
app.use(urlencoded())

app.use(serveStatic(join(__dirname, "static")))

app.use("/", indexRouter)
app.use("/admin", adminRouter)

export default app

//deps.ts

export {
  dirname,
  fromFileUrl,
  join,
} from "https://deno.land/std@0.147.0/path/mod.ts"

export {
  json,
  opine,
  Router,
  serveStatic,
  urlencoded,
} from "https://deno.land/x/opine@2.2.0/mod.ts"

export { h, renderSSR } from "https://deno.land/x/nano_jsx@v0.0.33/mod.ts"

// routes/index.js

import { Router } from "../deps.ts"
const router = Router()

import home from './front/home.js'
router.use('/', home)

export default router

// routes/front/home.js

import { Router } from "../../deps.ts"
const router = Router()

import home from '../../controllers/front/home.jsx'

router.get('/', async (req, res) => {
  home.getItem(req, res)
})

export default router

// controllers/front/home.jsx

/** @jsx h */
import { h, renderSSR } from "../../deps.ts"
import config from '../../config.js'
import Home_ from '../../views/front/home.jsx'

class Home{
  async getItem(req, res){
    this.config = await config()
    this.config.pageTitle = 'ទំព័រដើម'
    this.config.route = '/'

    const str = renderSSR(<Home_ config={this.config} />)
    const html = `<!DOCTYPE html>${str}`
    res.send(html)
  }
}

export default new Home()

// views/front/home.jsx

/** @jsx h */
import { h } from "../../deps.ts"

function Home(props){
    return(
      <html>
        <head>
          <meta charset="UTF-8"/>
          <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
          <title>{props.config.siteTitle} | {props.config.pageTitle}</title>
          <link href="/images/siteLogo.png" rel="icon" />
          <link href="/styles/base.css" rel="stylesheet" />
          <link href="/fonts/setup.css" rel="stylesheet" />
          <script src="/scripts/jquery.js"></script>
        </head>
        <body>
          <p>{props.config.pageTitle}</p>
        </body>
      </html>
    )
}

export default Home

/* static/styles/base.css */

:root{
    --background-light: lightgrey;
    --background: grey;
    --background-dark: #272727;
    --body-font: 14px/1.5 Vidaloka, OdorMeanChey;
    --link: teal;
    --color: white;
}
  
*{
    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);
}

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

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