فهرست منبع

Merge branch 'golang' of github.com:help-14/magma into golang

Help-14 3 سال پیش
والد
کامیت
58b5a26122

+ 0 - 1
docs/_sidebar.md

@@ -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)

+ 1 - 1
docs/customization/css.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 {

+ 37 - 6
docs/customization/new-theme.md

@@ -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:
+
+|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`|
+
+```
+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"`
+}
 
-In current version your data and config will be injected on page loaded using Javascript, so you need to custom it too. 
+type ColumnData struct {
+	Title     string         `yaml:"title"`
+	Bookmarks []BookmarkData `yaml:"bookmarks"`
+}
 
-In future release there will be a markup like `{{bookmarks}}` and your data will be injected by compile task into there. 
+type BookmarkData struct {
+	Name string `yaml:"name"`
+	Icon string `yaml:"icon"`
+	Url  string `yaml:"url"`
+}
+```

+ 0 - 15
docs/customization/overview.md

@@ -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`
-
-![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`

+ 0 - 8
src/languages/vi.json

@@ -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!"
-    }
-}

+ 20 - 0
src/themes/custom/index.html

@@ -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>

+ 3 - 3
src/themes/flame/index.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 - 0
src/themes/leaf/index.html

@@ -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>