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.  @@ -11,8 +10,136 @@ Lightweight and heavily customizable Go application!  ## 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. -Coming soon +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.) + +If you want to use buttons, you must follow this structure: +```html + +``` +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 @@ -
world, what's up?
-Lectus pulvinar lorem mi enim pharetra sed aliqua et cursus. Sit sem ut elit amet labore lectus sed at vulputate.
- -