3 years ago · da40b7bbcc
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -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",
			
 
				         }
			
 
				     ]
			
 
				 }
			
--- a/README.md
+++ b/README.md
@@ -3,8 +3,8 @@ Personal dashboard inspired by flame, highly customizable, lightweight and respo
 
				 
			
 
				 ![Magma dashboard preview](https://i.imgur.com/XaAvyRC.png)
			
 
				 
			
 
				-## 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
			
--- a/docs/.nojekyll
+++ b/docs/.nojekyll
--- a/docs/README.md
+++ b/docs/README.md
@@ -0,0 +1,11 @@
 
				+# Magma Dashboard
			
 
				+Personal dashboard inspired by flame, highly customizable, lightweight and responsive.
			
 
				+
			
 
				+![Magma dashboard preview](https://i.imgur.com/XaAvyRC.png)
			
 
				+
			
 
				+## 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)
			
--- a/docs/_coverpage.md
+++ b/docs/_coverpage.md
@@ -0,0 +1,13 @@
 
				+![logo](https://i.imgur.com/K4sSC3X.png)
			
 
				+
			
 
				+# 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)
			
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -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)
			
--- a/docs/config.md
+++ b/docs/config.md
@@ -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` |
			
--- a/docs/customization/css.md
+++ b/docs/customization/css.md
@@ -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.
			
--- a/docs/customization/new-theme.md
+++ b/docs/customization/new-theme.md
@@ -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. 
			
--- a/docs/customization/overview.md
+++ b/docs/customization/overview.md
@@ -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`
			
 
				+
			
 
				+![workflow](https://i.imgur.com/X3vXKtW.png)
			
 
				+
			
 
				+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`
			
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -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
			
 
				+```
			
--- a/docs/index.html
+++ b/docs/index.html
@@ -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>