docs(info): add config section in readme

2 files changed, 131 insertions, 21 deletions

diff --git a/README.md b/README.md
index 4b43725..14f64f1 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,7 @@
 # Now
+Self-hostable bio page website, like carrd, guns.lol and many more!
 
-Self-hostable bio page website!
-
-Lightweight and heavily customizable Go application!
+Lightweight and heavily customizable Go application.
 
 ![Screenshot of the main page](./example.jpg)
 
@@ -11,8 +10,136 @@ Lightweight and heavily customizable Go application!
 ![Screenshot of a custom page](./games.webp)
 
 ## Config
+You must have a `public` directory.
+Everything located inside will be available at the path `/static/PATH` where `PATH` is the relative path inside the
+`public` directory.
+
+You can change the font by adding a file named `font.woff2` inside the `public` directory.
+This font must be compressed by [Woff2](https://en.wikipedia.org/wiki/Web_Open_Font_Format).
+(You can compress them with the command `woff2_compress` avaible in the package `woff2` of many Linux distributions.)
+
+### Main config
+You can create a sample config with the flag `-generate-json-config` (which generates a JSON config) or with 
+`-generate-toml-config` (which generates a TOML config).
+A JSON schema is available for json configs.
+
+The config does not depend on the markup language: a field `foo` will being named `foo` for JSON and TOML.
+The TOML format is used in this section.
+
+The root is defining the background image, the description, the file's path to the legal pages and the path to
+the configs of custom pages.
+```toml
+image = "wallpaper.webp"
+description = "I am a beautiful description!"
+legal = "legal.html"
+custom_pages = ["custom.toml"]
+```
+The path is relative to the execution of the binary.
+If you are using Docker, please use a static path.
+
+The first section is defining who you are.
+`image` is your pfp.
+It must be placed inside the `public` directory.
+```toml
+[person]
+  name = "John Doe"
+  pronouns = "any"
+  image = "pfp.webp"
+
+  [[person.tags]]
+    name = "Hello"
+    description = "World"
+    link = ""
+
+  [[person.tags]]
+    name = "I am"
+    description = "a tag"
+    link = ""
+```
+
+Then, you define the colors of the main page.
+`text` is the text's color.
+`tag_hover` is the background's color of a tag when someone hover it.
+`colors.background` defines the card's background (check the CSS property `gradiant` on 
+[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient)) to have more information.
+`colors.buttons` defines buttons' colors.
+```toml
+[colors]
+  text = "#fff"
+  tag_hover = "#000"
+  [colors.background]
+    type = "linear"
+    angle = 141
+
+    [[colors.background.colors]]
+      color = "#a4a2b8"
+      position = 0
+
+    [[colors.background.colors]]
+      color = "#3b3860"
+      position = 40
+
+    [[colors.background.colors]]
+      color = "#0f0c2c"
+      position = 80
+  [colors.buttons]
+    text = "#4c0850"
+    text_hover = "#57145b"
+    background = "#f399d0"
+    background_hover = "#f5c0e0"
+```
+
+Finally, you define the link at the bottom of your card.
+You have as much as you want. 
+```toml
+[[links]]
+  link = "/foo"
+  content = "Blog"
+
+[[links]]
+  link = "https://www.youtube.com/@anhgelus"
+  content = "YouTube"
+```
+
+### Custom page config
+You can create custom pages with a new config.
+It can also be a JSON or a TOML file.
+
+The root defines the title of the page, the uri (must be unique!), the image and the description.
+`content` is the file's path containing the content of your custom page.
+```toml
+title = "Foo"
+uri = "/bar"
+image = "wallpaper.webp"
+description = "I am a beautiful description!"
+content = "foo-bar.html"
+```
+
+Then, you can define custom colors.
+Check _Main config_'s colors section for more information.
+The `tag_hover` field is useless here.
+
+### HTML content files
+When you define a custom page or when you have to set the legal information, you have to specify the path of an HTML 
+file.
+It contains the content that would be displayed in the page.
+You can use all HTML common tags like `h2`, `p` and `a`.
+(`h1` is already used by the title.)
 
-Coming soon
+If you want to use buttons, you must follow this structure:
+```html
+<nav class="links">
+    <div class="link">
+        <a href="/">home sweet home</a>
+    </div>
+    <div class="link">
+        <a href="/foo">Bar</a>
+    </div>
+</nav>
+```
+Their style is defined by the config.
+You change their style by defining these CSS variables `--text-color`, `--text-color-hover`, `--background` and 
+`--background-hover`.
 
 ## Technologies used
 
diff --git a/test.html b/test.html
deleted file mode 100644
index 616a510..0000000
--- a/test.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<h2>Hello</h2>
-<p>world, what's up?</p>
-<h3>Sed proin quis cursus do lobortis ultricies viverra tempus et.</h3>
-<p>Lectus pulvinar lorem mi enim pharetra sed aliqua et cursus. Sit sem ut elit amet labore lectus sed at vulputate.</p>
-<nav class="links">
-    <div class="link">
-        <a href="/">home sweet home</a>
-    </div>
-    <div class="link">
-        <a href="https://www.steampowered.com">steam</a>
-    </div>
-</nav>
-<ul>
-    <li>Hello 1</li>
-    <li>Not hello 2</li>
-    <li>Final element 3</li>
-</ul>
\ No newline at end of file