diff --git a/README.md b/README.md index 3ed0e9a9..8fce76b0 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,8 @@ Demo

+![More themes and screens](https://i.ibb.co/M6nyvqW/dashy-options-screen.png) + --- ## Running the App 🏃‍♂️ @@ -96,6 +98,7 @@ All fields are optional, unless otherwise stated. - `theme`- String: The default theme for first load (you can change this later from the UI) - `cssThemes` - String[]: An array of custom theme names which can be used in the theme switcher dropdown - _See **theming** below_ - `externalStyleSheet` - String or String[] - Either a URL to an external stylesheet or an array or URLs, which can be applied as themes within the UI +- `customCss` - String: Raw CSS that will be applied to the page. Please minify it first. **`sections`** - Section[]: (required) An array of sections - _See **`section`** below_ @@ -104,11 +107,16 @@ All fields are optional, unless otherwise stated. - `items` - Item[]: (required) An array of items - _See **`item`** below_ - `displayData`: An object with the following fields (all optional) - `collapsed` - Boolean: If true, the section will be collapsed initially (defaults to `false`) - - `rows` - Int: Number of rows the section should span vertically, e.g. 2 (defaults to `1`) - - `cols` - Int: Number of columns the section should span horizontally, e.g. 2 (defaults to `1`) - `color` - String: A custom accent color for the section, as a hex code or HTML color (e.g. `#fff`) - `customStyles` - String: Custom CSS properties that should be applied to that section, e.g. `border: 2px dashed #ff0000;` - `itemSize` - String: Specify the size for items within this group, either `small`, `medium` or `large` + - `rows` - Int: Number of rows the section should span vertically, e.g. 2 (defaults to `1`) + - `cols` - Int: Number of columns the section should span horizontally, e.g. 2 (defaults to `1`) + - `layout` - Enum: `auto` or `grid`. If `grid` is selected, then the number of items per row can be set + - `itemCountX` - Int: Number of items horizontally (for `layout: grid`) + - `itemCountY` - Int: Number of items vertically (for `layout: grid`) + +Note about `rows` and `cols`: These are defined as a proportion of the screen (rather than by number of child items), and is built using [`grid-layout`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout). For more info, see [this example](https://i.ibb.co/HXRWVRK/how-rows-and-cols-work-in-dashy.png). In order to set the number of items that will display horizontally or vertically within a section, first set `display: grid`, and then specify values for `itemCountX`, and optionally `itemCountY`. **`item`** - `title` - String: The text to display on the item @@ -174,8 +182,9 @@ This wouldn't have been quite so possible without the following components, kudo - [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) - Tab view component by @jairoblatt `MIT` - [`VJsoneditor`](https://github.com/yansenlei/VJsoneditor) - Interactive JSON editor component by @yansenlei `MIT` - Forked from [`JsonEditor`](https://github.com/josdejong/jsoneditor) by @josdejong `Apache-2.0 License` - - And using [`ajv`](https://github.com/ajv-validator/ajv) `MIT` JSON schema Validator [`ace`](https://github.com/ajaxorg/ace) `BSD` code editor - [`vue-toasted`](https://github.com/shakee93/vue-toasted) - Toast notification component by @shakee93 `MIT` +- [`vue-prism-editor`](https://github.com/koca/vue-prism-editor) - Lightweight code editor by @koca `MIT` + - Forked from [`prism.js`](https://github.com/PrismJS/prism) `MIT` Utils: - [`crypto-js`](https://github.com/brix/crypto-js) - Encryption implementations by @evanvosberg and community `MIT` diff --git a/package.json b/package.json index 4293e0e8..e0e1a4d3 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ "axios": "^0.21.1", "connect": "^3.7.0", "crypto-js": "^4.0.0", + "highlight.js": "^11.0.0", + "prismjs": "^1.23.0", "register-service-worker": "^1.6.2", "remedial": "^1.0.8", "serve-static": "^1.14.1", @@ -20,6 +22,7 @@ "vue-cli-plugin-yaml": "^1.0.2", "vue-js-modal": "^2.0.0-rc.6", "vue-material-tabs": "^0.0.7", + "vue-prism-editor": "^1.2.2", "vue-router": "^3.0.3", "vue-select": "^3.11.2", "vue-toasted": "^1.1.28" diff --git a/public/manifest.json b/public/manifest.json index 7fe43945..1c006cc5 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -509,6 +509,6 @@ ], "start_url": "./index.html", "display": "standalone", - "background_color": "#000000", + "background_color": "#0b1021", "theme_color": "#4DBA87" } \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index c5aad223..d6446210 100644 --- a/src/App.vue +++ b/src/App.vue @@ -20,11 +20,21 @@ export default { }, data: () => ({ // pageInfo: this.getPageInfo(conf.pageInfo), - appConfig: conf.appConfig || Defaults.appConfig, showFooter: Defaults.visibleComponents.footer, }), computed: { - pageInfo: function pi() { return this.getPageInfo(conf.pageInfo); }, + pageInfo() { + return this.getPageInfo(conf.pageInfo); + }, + appConfig() { + if (localStorage[localStorageKeys.APP_CONFIG]) { + return JSON.parse(localStorage[localStorageKeys.APP_CONFIG]); + } else if (conf.appConfig) { + return conf.appConfig; + } else { + return Defaults.appConfig; + } + }, }, methods: { /* Returns either page info from the config, or default values */ @@ -53,6 +63,17 @@ export default { } return ''; }, + injectCustomStyles(usersCss) { + const style = document.createElement('style'); + style.textContent = usersCss; + document.head.append(style); + }, + }, + mounted() { + if (this.appConfig.customCss) { + const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, ''); + this.injectCustomStyles(cleanedCss); + } }, }; diff --git a/src/assets/interface-icons/config-custom-css.svg b/src/assets/interface-icons/config-custom-css.svg new file mode 100644 index 00000000..1b400c6f --- /dev/null +++ b/src/assets/interface-icons/config-custom-css.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Configuration/CloudBackupRestore.vue b/src/components/Configuration/CloudBackupRestore.vue index 8fb4dda0..afb7bc9a 100644 --- a/src/components/Configuration/CloudBackupRestore.vue +++ b/src/components/Configuration/CloudBackupRestore.vue @@ -3,7 +3,7 @@

Cloud Backup & Restore

- Cloud backup and restore is an optional feature, that enabled you to upload your + Cloud backup and restore is an optional feature, that enables you to upload your config to the internet, and then restore it on any other device or instance of Dashy.

All data is fully end-to-end encrypted with AES, using your password as the key. diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue index d8d8fb2c..8dba7106 100644 --- a/src/components/Configuration/ConfigContainer.vue +++ b/src/components/Configuration/ConfigContainer.vue @@ -1,6 +1,6 @@ diff --git a/src/components/Configuration/CustomCss.vue b/src/components/Configuration/CustomCss.vue new file mode 100644 index 00000000..93e8de5c --- /dev/null +++ b/src/components/Configuration/CustomCss.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/src/components/Configuration/EditSiteMeta.vue b/src/components/Configuration/EditSiteMeta.vue index abbf9d7b..e029fd1e 100644 --- a/src/components/Configuration/EditSiteMeta.vue +++ b/src/components/Configuration/EditSiteMeta.vue @@ -77,7 +77,7 @@ export default { title: this.config.pageInfo.title, description: this.config.pageInfo.description, footerText: this.config.pageInfo.footerText, - navLinks: this.config.pageInfo.navLinks, + navLinks: this.config.pageInfo.navLinks || [], }, }; }, diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue index e07c02df..712254d0 100644 --- a/src/components/Configuration/JsonEditor.vue +++ b/src/components/Configuration/JsonEditor.vue @@ -38,7 +38,7 @@ export default { methods: { save() { localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(this.jsonData)); - this.$toasted.show('Changes seved succesfully'); + this.$toasted.show('Changes saved succesfully'); }, }, }; diff --git a/src/components/LinkItems/IframeModal.vue b/src/components/LinkItems/IframeModal.vue index 2637b868..12f9454a 100644 --- a/src/components/LinkItems/IframeModal.vue +++ b/src/components/LinkItems/IframeModal.vue @@ -1,5 +1,5 @@