Merge branch 'golang' of github.com:help-14/magma into golang
This commit is contained in:
Help-14
commit
58b5a26122
8 changed files with 107 additions and 34 deletions
|
|
@ -4,6 +4,5 @@
|
|||
* [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)
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Changing background, color pallete
|
||||
|
||||
In order to change those default values, edit `/public/css/core.css`.
|
||||
In order to change those default values, edit `/common/css/core.css`.
|
||||
|
||||
```
|
||||
:root {
|
||||
|
|
|
|||
|
|
@ -2,14 +2,45 @@
|
|||
|
||||
## 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.
|
||||
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 `/src/themes/` and add your theme there. Test your theme carefully before create a `Pull Request`.
|
||||
|
||||
If you are not a developer, you can start from `src/themes/custom` and use it as a starter kit.
|
||||
|
||||
## Your first theme
|
||||
|
||||
Your `index.html` will be almost exactly what you want your dashboard look like, so design your layout first.
|
||||
Your `index.html` will be a [Go template](https://pkg.go.dev/text/template) file. Just like a normal html but with Go actions in `{{}}` to render the data. Currently those data will be pass to you in runtime:
|
||||
|
||||
In current version your data and config will be injected on page loaded using Javascript, so you need to custom it too.
|
||||
|Name|Type|Description|
|
||||
|-|-|-|
|
||||
|Config|WebsiteConfig|Configuration defined in `/common/config.yaml` |
|
||||
|Language|Language|Current language loaded from `/languages/en.yaml`|
|
||||
|Contents|GroupData[]|Array of content defined in `/common/data.yaml`|
|
||||
|
||||
In future release there will be a markup like `{{bookmarks}}` and your data will be injected by compile task into there.
|
||||
```
|
||||
type WebsiteConfig struct {
|
||||
Title string `yaml:"title"`
|
||||
Description string `yaml:"description"`
|
||||
Language string `yaml:"language"`
|
||||
Localization string `yaml:"localization"`
|
||||
UseMetric bool `yaml:"useMetric"`
|
||||
Theme string `yaml:"theme"`
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
type GroupData struct {
|
||||
Title string `yaml:"title"`
|
||||
Columns []ColumnData `yaml:"columns"`
|
||||
}
|
||||
|
||||
type ColumnData struct {
|
||||
Title string `yaml:"title"`
|
||||
Bookmarks []BookmarkData `yaml:"bookmarks"`
|
||||
}
|
||||
|
||||
type BookmarkData struct {
|
||||
Name string `yaml:"name"`
|
||||
Icon string `yaml:"icon"`
|
||||
Url string `yaml:"url"`
|
||||
}
|
||||
```
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
# 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`
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"greeting": {
|
||||
"morning": "Chào buổi sáng!",
|
||||
"afternoon": "Chiều làm việc hiệu quả!",
|
||||
"evening": "Chiều tối vui vẻ!",
|
||||
"night": "Chúc ngủ ngon!"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{.Config.Language}}">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{.Config.Title}}</title>
|
||||
<meta name="description" content="{{.Config.Description}}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/png" href="common/assets/favicon.ico" />
|
||||
<link rel="stylesheet" href="common/css/core.css">
|
||||
<link rel="stylesheet" href="common/css/custom.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="common/js/core.js"></script>
|
||||
<script src="common/js/custom.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="{{.Config.Language}}">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<meta name="description" content="" />
|
||||
<title>{{.Config.Title}}</title>
|
||||
<meta name="description" content="{{.Config.Description}}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/png" href="common/assets/favicon.ico" />
|
||||
<link rel="stylesheet" href="theme/css/font.css">
|
||||
|
|
|
|||
46
src/themes/leaf/index.html
Normal file
46
src/themes/leaf/index.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{.Config.Language}}">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{.Config.Title}}</title>
|
||||
<meta name="description" content="{{.Config.Description}}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/png" href="common/assets/favicon.ico" />
|
||||
<link rel="stylesheet" href="common/css/core.css">
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="common/css/custom.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container mx-auto w-full">
|
||||
<div class="columns-3xs gap-8">
|
||||
{{range .Contents}}
|
||||
<div class="row group-title">
|
||||
<h4 class="strong">{{.Title}}</h4>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{range .Columns}}
|
||||
<div class="flex bg-stone-700"></div>
|
||||
<h6 class="accent">{{.Title}}</h6>
|
||||
{{range .Bookmarks}}
|
||||
<div>
|
||||
<a href="{{.Url}}">
|
||||
<div class="icon-container">
|
||||
<i class="{{.Icon}} fa-xl icon"></i>
|
||||
</div>
|
||||
<h6>{{.Name}}</h6>
|
||||
</a>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<script src="common/js/core.js"></script>
|
||||
<script src="common/js/custom.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue