# Now
Self-hostable bio page website, like carrd, guns.lol and many more!

Lightweight and heavily customizable Go application.

![Screenshot of the main page](./example.jpg)

![Screenshot of a custom page](./music.webp)

![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.)

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

- [anhgelus/golatt](https://github.com/anhgelus/golatt)
- Bun