diff options
| -rw-r--r-- | README.md | 36 | ||||
| -rw-r--r-- | src/main.rs | 11 | ||||
| -rw-r--r-- | templates/index.luax | 41 | ||||
| -rw-r--r-- | templates/style.css | 59 |
4 files changed, 133 insertions, 14 deletions
@@ -1,8 +1,38 @@ # reluax -`reluax` is a Rust webserver that generates its pages through LuaX, an extended -form of Lua with support for inline HTML that gets preprocessed into tables. +`reluax` lets you easily create dynamic websites in a custom dialect of Lua, +inspired by JSX. The service has been written in Rust, and uses `luajit` as +its Lua runtime for performance and ease of integration of other libraries. + +## Requirements +- `luajit` + +## Installation +This project is available through GitHub releases as a prebuild binary, or +from `crates.io` through `cargo install reluax`, if you have the Rust +toolchain installed. Alternatively, it is packaged as a Nix flake: +if you have Nix installed, you can `nix run github:Duckonaut/reluax`. + +## Usage +``` +Commands: + serve Serve a directory of LuaX files in production mode + build Build a directory of LuaX files + dev Serve a directory of LuaX files in development mode + new Create a new project + init Initialize a new project in the current directory + help Print this message or the help of the given subcommand(s) + +Options: + -h, --help Print help + +Examples: + reluax serve + reluax dev -P public/ -C luax/ +``` + +To create an example project, run `reluax new my-first-project`. ## Inspiration -The project was heavily, heavily inspired by Ben Visness' blog post, +The project was heavily inspired by Ben Visness' blog post, [I made JSX for Lua (because I hate static sites)](https://bvisness.me/luax/), which I highly recommend reading. diff --git a/src/main.rs b/src/main.rs index 058ce05..9715ef6 100644 --- a/src/main.rs +++ b/src/main.rs @@ -300,6 +300,12 @@ fn create_project(name: &str) -> Result<()> { println!("🌴 Created project {}", name.bright_yellow()); + println!( + "🛠️ To start a development server, change to the {} directory and run {}.", + name.bright_yellow(), + "reluax dev".bright_green() + ); + Ok(()) } @@ -317,6 +323,11 @@ fn init_project() -> Result<()> { println!("🌴 Initialized project {}", name.bright_yellow()); + println!( + "🛠️ To start a development server, run {}.", + "reluax dev".bright_green() + ); + Ok(()) } diff --git a/templates/index.luax b/templates/index.luax index 6785491..7104964 100644 --- a/templates/index.luax +++ b/templates/index.luax @@ -1,14 +1,33 @@ return function() - return <html> - <head> - <title>PROJECT_NAME</title> - </head> - <body> - <h1>PROJECT_NAME</h1> - <p>Random number for you: {$ tostring(math.floor(math.random() * 100)) $}</p> - <p style={ "font-size: " .. tostring(math.floor(math.random() * 100)) .. 'px' }> - What font size is this? - </p> - </body> + local font_sizes = { 12, 14, 18, 24 } + local font_size = font_sizes[math.floor(math.random() * #font_sizes) + 1] + return + <html> + <head> + <meta charset="utf-8" /> + <link rel="stylesheet" + href="//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css" /> + <link rel="stylesheet" href="style.css" /> + <title>PROJECT_NAME</title> + </head> + <body> + <div id="app-main"> + <h1>PROJECT_NAME</h1> + <p class="description"> + Welcome to <strong class="project">PROJECT_NAME</strong>! + </p> + <p class="description"> + This project runs on + <a class="reluax" href="https://github.com/Duckonaut/reluax">Reluax</a>. + </p> + <p> + Random number for you: + <span class="rand">{$ tostring(math.floor(math.random() * 100)) $}</span> + </p> + <p class="randsize" style={ "font-size: " .. tostring(font_size) .. 'pt' }> + What font size is this? + </p> + </div> + </body> </html> end diff --git a/templates/style.css b/templates/style.css new file mode 100644 index 0000000..d770cea --- /dev/null +++ b/templates/style.css @@ -0,0 +1,59 @@ +:root { + font-weight: 400; + + color-scheme: dark; + color: var(--color-fg); + background-color: var(--color-bg); + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; + + /* variables */ + --color-bg: #161f30; + --color-fg: #a3b3d9; + --color-light-blue: #a3b3d9; + --color-yellow: #e5c07b; +} + +#app-main { + max-width: 1280px; + margin: 0 auto; + padding: 1rem 1rem 1rem 1rem; + text-align: center; + font-family: Hack, monospace; +} + +h1 { + font-size: 30pt; + color: var(--color-yellow); + text-align: center; + font-weight: bold; +} + +.project { + color: var(--color-light-blue); +} + +.description { + font-size: 15pt; + text-align: center; + font-family: "Trebuchet MS", Helvetica, sans-serif; + font-weight: bold; +} + +.rand, .reluax { + color: var(--color-yellow); +} + +a:link { + color: var(--color-light-blue); + text-decoration: none; +} + +a:visited { + color: var(--color-light-blue); + text-decoration: none; +} |