Txtweb
Txtweb is a content-driven static HTML generator.
Install
You can install it via cargo or homebrew
- Cargo:
cargo install txtweb - Homebrew:
brew install txtweb
Usage
txtweb new {name}: for initialization
txtweb build: for building
Content Structure
-
/contentsDirectories
This is the directory where you put the main contents in. Each directory in
/contentswould be the HTML files for the matched routes. For example, if you add/contents/exampleand put contents inside of that directory, then the parsed HTML file would serve the route/example. You can add more and more directories even deeper, to serve the mached routes.The directories that are named with a three-digit number, it is considered an error page and they will serve special cases like
/contents/404forNot Found, or/contents/500forServer Internal Error. As you might have guessed, you need to name the directories with the status code.Structure
The root directory(
/contents, not/), should have thebase.txtfile. The base file is the file that all contents are based on. You can add any contents there like adding tags, but you should also put#{name}to include dynamic contents for different routes. The#{name}would point to the file that has the same name and exists in the same directory. The base file would be applied to its children routes too so you do not have to add duplicated contents below it. However, if you addbase.txtsomewhere in the children's directories, it will ignore the base file from the parent but start its own base file and pass it down to its children. -
/componentsThis directory is for the components that you can use throughout your main pages. You can create multiple files(components), but every file should have its name starting with
_not to be confused with normal HTML tags. Lastly, you cannot use components inside of components. -
/publicYou can store images, videos, or any files here to access from
/public/**. -
/stylesYou can store
.cssfiles here to access from/styles/**. -
/distThis is the directory that this tool puts its final result in. You can upload this directory to deploy your project to Cloudflare, Vercel, or anywhere.
.txt grammar
Grammar for basic usage
Before using this tool, you have to know the grammar that it can understand. As the name serves, .txt is the only file extension it can parse. Below is the basic format and rules.
{tag_name} {attr_1} {value_1} | {attr_2} {value_2} | {attr_3} {value_3} > {children} <
- You should start with the name of the tag.
- You can add the pair of attributes and their value for the tag and you can add one single space(
) right after where the attribute is to separate it from its value. If you want to add multiple attributes, you should add a pipe(|) and continue from there. - You should end it with
><to close the tag.><will be parsed into/>which is used for self-closing. If you want to add more content inside of the tag, then you can add it between>and<. However, you cannot add a paragraph of text with tags in it.
Grammar for components definition
To define a component, all you need to do is to add contents that the component should have but with #{number}, where the number is the order in which the value comes in.
If there is a component defined at /components/_better_a.txt,
a href #1 | target #2 > span > #3 < <
You can use it by adding.
_better_a https://github.com/iamseol/txtweb | _blank | click here to the txtweb github repository >
And, it will be parsed like the below.
<a href="https://github.com/iamseol/txtweb" target="_blank"><span>click to txtweb github repository</span></a>
Grammar for components usage
The grammar for components is very similar to the one for basic, except that you do not add pairs, but just values only.
{component_name} {value_1} | {value_2} | {value_3} >
- You should start with the name of the components. The names should always start with
_. - You should add the values matching up with the components' definitions. Every time you add more values, you should add pipes(
|) between them to separate each other. - You should close the tag with
>(not><).
Indentation
The indentation does not matter at all. It does not matter where you add spaces or new lines.
Example
Here are some examples.
- My Homepage
- GitHub: https://github.com/iamseol/homepage
- Website: https://iamseol.com