docs: Added docs and minor changes

README.md

@@ -2,9 +2,24 @@
 
 This is a custom template compiler for FastCentrik. It allows you to create templates with and compile them into injectable JavaScript.
 
-## Usage
+## How does it work
 
-// Work in progress
+First in your project you have your pages, for each page you have your own set of patches.
+
+For determining the page you can either use regex, file `route.regexpr`, simple pathname `route` file, or custom JavaScript function that has to return boolean, file `route.js`.
+
+Each page is folder in the root of your project. Patches in pages can be stacked so multiple pages may be triggered at the same time. For example you can create page with name "global" that has this regex: `^[\s\S]*$` and patches in this page will be used throughout the whole webpage.
+
+Each page can have multiple patches, that are in the `templates` folder in the page folder. There are 2 types of patches:
+
+1. Custom patches
+    This patch can have only style.css that is not scoped and script.js. These are just normally injected into the project and can be used for minor modifications or for global styles.
+2. Template patches
+    These patches are more complex and are expplained in [TEMPLATE_PATCHES.md](TEMPLATE_PATCHES.md)
+
+## Known bugs
+
+- You can't use `@keyframe` in the scoped .css file (in the templates folder). You will have to define your keyframe in your global CSS file for the specific page.
 
 ## TODO
 - [ ] Add option to disable the default styles

TEMPLATE_PATCHES.md

@@ -0,0 +1,52 @@
+# Template patches
+
+These patches have 3 main runtime stages:
+
+1. Scrape
+    File called scrape.js is ran to scrape the original part of the webpage that will then be completly replaced. For example here you will scrape your posts section for the current posts displayed. This scrape function has to return object that is then passed into your handlebars template
+2. Template rendering
+    For template I used Handlebars. You build your Handlebars template and all of your scraped data are injected directly into it
+3. Replacement
+    Then the whole old component is removed and replaced with the new rendered template
+
+## Scoped CSS
+
+Here you can also use `style.css` file that is scoped to only that specific section.
+
+## Post JS
+
+This is JavaScript file that is then ran after the 3 stages are completed and the section is successfully rendered. This file should be used for subscribing event or custom JS animations.
+
+## Configuration
+
+You can configure the replacement in the `config.yaml` file
+
+### Hiding original element instead of replacing
+
+If other scripts or original webpage scripts heavily rely on the original component to work, you can hide it instead of replace it.
+
+You can configure it using this config in your config.yaml file:
+
+```yaml
+template_replacer:
+  replace_type: "hide"
+```
+
+`replace_type` is either `hide` or `replace`
+
+### Rerending component
+
+If you set `replace_type` to `hide` you can then rerender your new component if the old component changes. This is used for refreshing state data that was scraped by the scraper.
+
+First you will have to register a rerender key for that specific patch:
+
+```yaml
+scraper:
+  rerender_key: "HEADER"
+```
+
+Then anywhere in your website (even other compoennt) you can run this function to rerender that specific patch:
+
+```js
+window.Rerender.rerenderComponent("HEADER") // This will rerender the new header component
+```

src/compiler/models_impl.rs

@@ -1,7 +1,6 @@
 use indoc::indoc;
 use serde_json;
 
-// use crate::compiler::config::{Config, ReplaceType}; // Removed unused imports
 use crate::css::{minify_css, scope_css};
 
 use crate::compiler::models::{PageRoute, Project, Template, TemplateConfig};
@@ -184,10 +183,10 @@ impl Template {
                 let rerender_registration = if let Some(key) = rerender_key {
                     format!(
                         r#"
-                        window.Rerender.components["{key}"] = function() {{
+                            window.Rerender.components["{key}"] = function() {{
-                            render();
+                                render();
-                        }};
+                            }};
-                    "#,
+                        "#,
                         key = key
                     )
                 } else {

src/main.rs

@@ -11,7 +11,7 @@ pub mod js;
 #[command(
     name = "template-compiler",
     version = env!("CARGO_PKG_VERSION"),
-    about = "Template compiler for FastCentrik templates.",
+    about = "Template compiler for FastCentrik template patches.",
     author = "Jakub Žitník",
     group = ArgGroup::new("command")
         .args(&["new", "compile"])
@@ -36,4 +36,8 @@ fn main() {
     if cli.compile {
         compile();
     }
+
+    if cli.new {
+        println!("TODO: Create example project");
+    }
 }