docs: Added docs and minor changes

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
+```