add website pages
This commit is contained in:
NhanPT
parent
ce1c8d0d70
commit
da40b7bbcc
12 changed files with 208 additions and 2 deletions
12
.vscode/launch.json
vendored
12
.vscode/launch.json
vendored
|
|
@ -17,6 +17,18 @@
|
|||
],
|
||||
"outputCapture": "std",
|
||||
"attachSimplePort": 9229
|
||||
},
|
||||
{
|
||||
"request": "launch",
|
||||
"name": "Docsify Serve",
|
||||
"type": "pwa-node",
|
||||
"cwd": "${workspaceFolder}",
|
||||
"runtimeExecutable": "docsify",
|
||||
"runtimeArgs": [
|
||||
"serve",
|
||||
"./docs",
|
||||
],
|
||||
"outputCapture": "std",
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -3,8 +3,8 @@ Personal dashboard inspired by flame, highly customizable, lightweight and respo
|
|||
|
||||
|
||||
|
||||
## Feature
|
||||
* Light weight, fast, run with Deno
|
||||
## Features
|
||||
* Lightweight, fast, run with Deno
|
||||
* Run as static Html website
|
||||
* Support multiple language
|
||||
* Highly customizable, you can replace everything you want
|
||||
|
|
|
|||
0
docs/.nojekyll
Normal file
0
docs/.nojekyll
Normal file
11
docs/README.md
Normal file
11
docs/README.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
# Magma Dashboard
|
||||
Personal dashboard inspired by flame, highly customizable, lightweight and responsive.
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
* Light weight, fast, run with Deno
|
||||
* Run as static Html website
|
||||
* Support multiple language
|
||||
* Highly customizable, you can replace everything you want
|
||||
* Addons support (WIP)
|
||||
13
docs/_coverpage.md
Normal file
13
docs/_coverpage.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
|
||||
|
||||
# Magma Dashboard <small>1.0</small>
|
||||
|
||||
> A personal dashboard / start page
|
||||
|
||||
- Simple, lightweight, fast
|
||||
- Multiple language
|
||||
- Multiple themes
|
||||
- Highly customizable
|
||||
|
||||
[GitHub](https://github.com/help-14/magma)
|
||||
[Get Started](/getting-started)
|
||||
9
docs/_sidebar.md
Normal file
9
docs/_sidebar.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<!-- docs/_sidebar.md -->
|
||||
|
||||
* [Home](/)
|
||||
* [Get Started](getting-started.md)
|
||||
* [Configuration](config.md)
|
||||
* Customization
|
||||
* [Overview](customization/overview.md)
|
||||
* [Colors, Background, CSS](customization/css.md)
|
||||
* [Create new theme](customization/new-theme.md)
|
||||
33
docs/config.md
Normal file
33
docs/config.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# Configuration
|
||||
|
||||
Your configuration is in `/public/config.json` like this:
|
||||
|
||||
```
|
||||
{
|
||||
"website": {
|
||||
"theme": "flame",
|
||||
"title": "Magma Dashboard",
|
||||
"description": "",
|
||||
"language": "en",
|
||||
"localization": "en-us",
|
||||
"useMetric": true
|
||||
},
|
||||
"addons": []
|
||||
}
|
||||
```
|
||||
|
||||
| Field | Type | Meaning |
|
||||
|-|-|-|
|
||||
| website | Object | Website configuration |
|
||||
| addons | Array | List of addon to run. E.g: `["addon-1", "addon-2"]` |
|
||||
|
||||
Website configuration:
|
||||
|
||||
| Field | Type | Meaning |
|
||||
|-|-|-|
|
||||
| theme | string | Name of your selected theme, default is `flame` |
|
||||
| title | string | Title of your website, will be inject into `<title></title>` |
|
||||
| description | string | Description of your website, will be inject into `<meta name="description" content="" />` |
|
||||
| language | string | Selected language file in `/private/languages` without `.json` extension. |
|
||||
| localization | string | Localization that will be use to show date/time |
|
||||
| useMetric | boolean | Set to `true` to use `°C`, `false` to use `°F` |
|
||||
27
docs/customization/css.md
Normal file
27
docs/customization/css.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
# Customize CSS
|
||||
|
||||
## Changing background, color pallete
|
||||
|
||||
In order to change those default values, edit `/public/css/core.css`.
|
||||
|
||||
```
|
||||
:root {
|
||||
--bgColor: #2d3436;
|
||||
--bgImage: url("https://images.wallpaperscraft.com/image/single/leaf_plant_green_136967_2560x1440.jpg");
|
||||
--accentColor: #ffc107;
|
||||
--foreground: #ffffff;
|
||||
}
|
||||
```
|
||||
|
||||
| Key | Required | Meaning |
|
||||
|-|-|-|
|
||||
| --bgColor | Yes | Background color of `<body>`, also use as overlay color of background image. |
|
||||
| --bgImage | Yes | An image place on top of `<body>` background color, with opacite 60%, scale 1.1, margin-top: -5% |
|
||||
| --accentColor | Yes | Accent color use in highlight place like weather icon, group title, ... |
|
||||
| --foreground | Yes | Default text color. |
|
||||
|
||||
## Custom CSS styles
|
||||
|
||||
If you want to add custom CSS style to element, please don't put it in `core.css`, use `custom.css` instead.
|
||||
|
||||
`custom.css` will be loaded at the last position, so it will override other CSS styles.
|
||||
15
docs/customization/new-theme.md
Normal file
15
docs/customization/new-theme.md
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
# Create new theme
|
||||
|
||||
## Preparing
|
||||
|
||||
There are two choice here:
|
||||
- If you are a developer, you know what you are doing then considering public your theme to Magma repo for everybody to use. Fork magma repo, create a folder in `/private/themes/` and add your theme there. Test your theme carefully before create a `Pull Request`.
|
||||
- You are an user with some coding knowleague or you want to test your theme before submit it, then create `index.html` in `/public` and start from there.
|
||||
|
||||
## Your first theme
|
||||
|
||||
Your `index.html` will be almost exactly what you want your dashboard look like, so design your layout first.
|
||||
|
||||
In current version your data and config will be injected on page loaded using Javascript, so you need to custom it too.
|
||||
|
||||
In future release there will be a markup like `{{bookmarks}}` and your data will be injected by compile task into there.
|
||||
15
docs/customization/overview.md
Normal file
15
docs/customization/overview.md
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
# Customization Overview
|
||||
|
||||
Look at the source code, in `/src` folder, you will notice two folder `/private` and `/public`, this is what it mean:
|
||||
* `/private`: the source code of Magma, contains `/themes` as theme collection, `/languages` as language collection. This folder is not expose in Docker and shouldn't be edit by user.
|
||||
* `/public`: Expose by Docker and meant to be editted by user in order to customize the dashboard. File in `/public` folder will replace file in `/private/themes/{selected theme}` which had the same path in runtime. For example, if you created `/public/index.html` then the default `index.html` file in `/private/themes/flame/index.html` will be ignored.
|
||||
* `/temp`: This folder will be created in runtime, will not be exposed, contain final files that beeing serve to user at `http://localhost:7001`
|
||||
|
||||
|
||||
|
||||
When the web server started, it will run a compile task and copying file into /temp folder. In the future update, compile task will also be run if files in `/public` folder changed.
|
||||
|
||||
This is how the compile task work:
|
||||
* Read files in `/private/themes/{selected theme}` -> Inject code -> Minify -> Save to `/temp`
|
||||
* Read files in `/public` -> Inject code -> Minify -> Save to `/temp` (override if exists)
|
||||
* Read selected language from `/private/languages/{lang}.json` -> Minify -> Save to `/temp`
|
||||
43
docs/getting-started.md
Normal file
43
docs/getting-started.md
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
# Getting started
|
||||
|
||||
## Install Docker
|
||||
|
||||
If you don't have Docker and Docker Compose yet, use the command below to install.
|
||||
|
||||
```
|
||||
curl -fsSL https://get.docker.com -o get-docker.sh
|
||||
sudo sh get-docker.sh
|
||||
```
|
||||
|
||||
```
|
||||
sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
|
||||
sudo chmod +x /usr/local/bin/docker-compose
|
||||
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
|
||||
```
|
||||
|
||||
## Getting Magma
|
||||
|
||||
Create [docker-compose.yml](https://github.com/help-14/magma/blob/main/docker-compose.yml) or download it from Github:
|
||||
|
||||
```
|
||||
version "3.0"
|
||||
```
|
||||
|
||||
Start the container:
|
||||
|
||||
```
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
Go to your dashboard `http://localhost:7001` to check if everything go smoothly.
|
||||
|
||||
## Update Magma automatically
|
||||
|
||||
To get our regular update, you should install watchtower too.
|
||||
|
||||
```
|
||||
docker run --detach \
|
||||
--name watchtower \
|
||||
--volume /var/run/docker.sock:/var/run/docker.sock \
|
||||
containrrr/watchtower
|
||||
```
|
||||
28
docs/index.html
Normal file
28
docs/index.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Magma Dashboard</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="Description">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'Magma Dashboard',
|
||||
repo: 'help-14/magma',
|
||||
loadSidebar: true,
|
||||
subMaxLevel: 2,
|
||||
coverpage: true
|
||||
}
|
||||
</script>
|
||||
<!-- Docsify v4 -->
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue