https://github.com/ayushmantripathy/uhc
the useful html compiler
https://github.com/ayushmantripathy/uhc
compiler html
Last synced: 4 months ago
JSON representation
the useful html compiler
- Host: GitHub
- URL: https://github.com/ayushmantripathy/uhc
- Owner: AyushmanTripathy
- License: mit
- Created: 2021-12-07T15:18:58.000Z (over 3 years ago)
- Default Branch: release
- Last Pushed: 2025-01-03T15:36:57.000Z (5 months ago)
- Last Synced: 2025-01-03T16:46:14.704Z (5 months ago)
- Topics: compiler, html
- Language: JavaScript
- Homepage:
- Size: 213 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
UHC, the useful html compiler, for when you don't need a javascript framework.
## Why?
- fealt like making this, was also bored
- html components.
```html
```
- variables.
```html
hello ${foo}
```
- conditional flow & loops.
- basic html routing.
- minimal configration needed.
- sass, postcss and html-minifier support by default.
- compiles to raw html.
- and much much more!
## How?
1. install uhc globally
```
npm install uhc -g
```
2. start a new project
- use a skeleton uhc app.
```
uhc init app_name
```
- or start from scratch with -g to generate uhc.config.json
3. run `uhc` to compile.
4. run `uhc dev` to start dev mode
plz create an [issue](https://github.com/AyushmanTripathy/uhc/issues) to report any **bugs** or recommend us **features** we should add.
#### thank you for using uhc
# Documentation
---
## Config
- use `uhc -g` to generate uhc.config.json.
- by default uhc will look for uhc.config.json in current working directory.
use `-c` to pass a custom path.
- all other paths in uhc.config.json should be relative to src and build dir accordingly.
- an example uhc.config.json
```json
{
"uhc": "",
"src_dir": "src",
"build_dir": "public",
"template": "template.html",
"minify": true,
"css": {
"autoprefix": true,
"prefix": "@import \"./global.scss\";",
"sass": true
},
"vars": {
"foo": "bar"
},
"routes": {
"/": "index.html"
}
}
```
- uhc uses [html-minifier](https://github.com/kangax/html-minifier) to minify output html files.
- you can pass your own html minifier options. for example
```json
"minify": {
"minifyCSS": false
}
```
- you can pass options to [sass](https://www.npmjs.com/package/sass) in the same way.
- you can load environment variables with dotenv by setting load property. these will be avaliable as variables.
```json
"load": ["key1","key2"]
```
- some functions can be disabled by setting property to false.
| functions | property |
| -------------------- | --------- |
| variables | vars |
| if statments & loops | statments |
| comments | comments |
| html minifier | minify |
## Cli
### options
| option | function |
| ------ | -------------------------- |
| h | help |
| g | generate uhc.config.json |
| c | load custion config file |
| w | watch path |
| v | show dependencies verisons |
### Commands
#### Init
- run `uhc init` to create a skeleton uhc app.
- by default it creates a project named uhc-app, run `uhc init ` to pass
a name.
#### Dev
- run `uhc dev` and see your site on [localhost:8080](http://localhost:8080/),
uhc will also watch for file changes (using chokidar) in src directory and will
recompile and reload the browser (using live-server) on changes.
- PORT can be passed as environment variable.
## Component format
- stylesheets added using link tag are not compiled.
- load path for sass is the index file.
- an example component
```html
// css or sass styles
main {
color: red;
}
title
some text
```
## Importing
- import component using import tag.
```html
```
- import svg using type attribute.
- the imported svg can be styled from the parent component.
- you can pass attributes to svg from th import tag.
- in this example, svg will get a id attribute.
```html
```
## Variables
- variables can be used by `${}` syntax.
- `${}` can perform javascript.
```html
hello ${ foo + "something" }
```
- vars can be globally declared from uhc.config.json.
- setting vars to false will disable vars.
```json
"vars": {
"foo": "bar"
},
```
- vars can be passed to component from import tag.
- components inherit vars from thier parents.
```html
```
## Conditional Flow
- `(){}` syntax become an if statment if input is a boolean.
```html
(10 == n) {
hello world
}
```
- else if / else are not supported yet. coming soon.
## Loops
- `(){}` syntax becomes an loop if input is a number.
```html
(n) {
hello world
}
```
## Routes
- Routes are used to compile diffrent html files.
```json
"routes": {
"/": "index.html",
"project": {
"/": "project.html",
"table": "table.html"
},
"settings": "settings.html"
}
```
| url | html |
| ------------------------------ | ------------- |
| website.com/ | index.html |
| website.com/project/ | project.html |
| website.com/project/table.html | table.html |
| website.com/settings.html | settings.html |
- Directory structure it creates.
```
build/
├── index.html
├── project
│ ├── index.html
│ └── table.html
└── settings.html
```
## Template
- template are used share code across diffrent routes.
- templates must have a body and head tag where compiled code is injected.
- templates itself will not be compiled.
- compiled code will replace %head% & %body% respectively.
```
"template":"template.html",
```
- an example template
```html
Website
%head%
%body%
```