Docs, pretty template, more info in `new` and `init`

4 files changed, 133 insertions, 14 deletions

diff --git a/README.md b/README.md
index 357938b..1f44a83 100644
--- a/README.md
+++ b/README.md
@@ -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;
+}