Skip to content

Instantly share code, notes, and snippets.

@justinnoel
Last active December 19, 2023 13:47
Show Gist options
  • Save justinnoel/288e304a6b5183363389f148bf15fbd9 to your computer and use it in GitHub Desktop.
Save justinnoel/288e304a6b5183363389f148bf15fbd9 to your computer and use it in GitHub Desktop.
Hono Tailwind for Dev and Production
{
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build && vite build --mode client && npx tailwindcss -i ./src/index.css -o ./dist/static/assets/index.css --minify",
"format": "prettier --config .prettierrc --ignore-path .prettierignore '**/*.{json,js,jsx,ts,tsx,css,scss,md}' --write",
"lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --ignore-path .eslintignore . --max-warnings 0 --fix",
"prepare": "husky install"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.+(js|mjs|ts|tsx|css|md|yml)": [
"prettier --config .prettierrc --ignore-path .prettierignore --write"
],
"*.+(js|jsx|ts|tsx)": [
"eslint --ignore-path .eslintignore --max-warnings 0"
]
},
...
}
}
import "hono";
import {jsxRenderer} from "hono/jsx-renderer";
import style from "@/index.css?inline";
declare module "hono" {
interface ContextRenderer {
(content : string | Promise < string >, props? : {
title?: string;
description?: string
},): Response;
}
}
export const renderer = jsxRenderer(({children, title, description}) => {
return (<html>
<head>
<title> {title}</title>
<meta name="description"
content={description}/>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
<meta name="robots" content="index, follow"/>
<link rel="icon" href="static/assets/favicon.ico"/> {
!import
.meta
.env
.PROD && style
? (<>
<style dangerouslySetInnerHTML={
{__html: style}
}/>
</>)
: (<>
<link rel="stylesheet" href="/static/assets/index.css"/>
</>)
}
{
import
.meta
.env
.PROD
? (<>
<script defer type="module" src="/static/contact.script.js"></script>
<script defer type="module" src="/static/audio-player.script.js"></script>
</>
) : (
<>
<script defer type="module" src="/src/scripts/contact.script.ts"></script>
<script defer type="module" src="/src/scripts/audio-player.script.ts"></script>
</>
)}
<script defer src="static/lib/[email protected]"></script>
</head>
<body> {children}
{
import
.meta
.env
.PROD && style
? (<>
<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
<noscript>
<img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt=""/>
</noscript>
</>
) : null}
</body>
</html>
</html>
);
},,
{
docType: true
},);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment