docs(info): add config section in readme
This commit is contained in:
Anhgelus Morhtuuzh
parent
42a96cbb6e
commit
17c7e46f3b
2 changed files with 131 additions and 21 deletions
135
README.md
135
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
|
||||
<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
|
||||
|
||||
|
|
|
|||
17
test.html
17
test.html
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue