https://github.com/mrvandalo/landingpage
a simple html file using json to render a bookmark page to be shared across teams.
https://github.com/mrvandalo/landingpage
html javascript json landing-page static-site static-website
Last synced: over 1 year ago
JSON representation
a simple html file using json to render a bookmark page to be shared across teams.
- Host: GitHub
- URL: https://github.com/mrvandalo/landingpage
- Owner: mrVanDalo
- Created: 2016-09-21T21:08:12.000Z (almost 10 years ago)
- Default Branch: main
- Last Pushed: 2024-02-29T13:39:25.000Z (over 2 years ago)
- Last Synced: 2025-04-06T11:03:58.613Z (over 1 year ago)
- Topics: html, javascript, json, landing-page, static-site, static-website
- Language: Nix
- Homepage: https://mrvandalo.github.io/landingpage/
- Size: 636 KB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A simple HTML file using JSON to create a list of links.
This is useful to collect links for projects or the teams you are working in.
Have a look at [this github page](https://mrvandalo.github.io/landingpage/) for a working example.
## structure
You define everything via JSON (or nix if you use the nix module).
```json
{
"title": "title",
"text": "text",
"items" : [
{
"label": "go to example.com",
"href": "https://example.com",
"image": "https://media.giphy.com/media/xrrvZiFNuK7Xa/giphy.gif"
},
{
"label": "go to other example.com",
"href": "https://other-example.com",
"image": "https://media.giphy.com/media/xrrvZiFNuK7Xa/giphy.gif"
}
]
}
```
## Using JavaScript
Just download the [index.html](./docs/index.html) from the `docs` folder.
Edit the script variable `contentItmes` and you voilà, you have you own landing page.
## Using NixPkgs
The nix-flake provides a package that can be used to generate a fully static html page.
``` nix
services.nginx.virtualHosts."example.org" = {
locations."/" = {
root = pkgs.landingpage.override {
jsonConfig = [{
title = "title";
text = "text";
items = [
{
label = "go to example.com";
href = "https://example.com";
image = "https://media.giphy.com/media/xrrvZiFNuK7Xa/giphy.gif";
}
{
label = "go to example.com";
href = "https://example.com";
image = "https://media.giphy.com/media/xrrvZiFNuK7Xa/giphy.gif";
}
];
}];
};
};
};
```
### parameter to override
- `title`: browser tab title
- `max-width`: width of the content block
- `background-color`: background color of the whole page
- `title-color`: color of the title block
- `title-background-color`: background color of the title block
- `text-color`: text color of the text block
- `text-background-color`: background color of the text block
- `item-color`: text color of the items
- `item-background-color`: background color of the items
- `image-width`: width of the images
- `image-height`: height of the images
- `jsonConfig`: the content defined under structure