diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md index b04d0a7c..0c1b2c18 100644 --- a/.github/CHANGELOG.md +++ b/.github/CHANGELOG.md @@ -1,5 +1,10 @@ # Changelog +## ✨ 1.5.9 - New Minimal/ Startpage View [PR #155](https://github.com/Lissy93/dashy/issues/155) +- Adds a new view, called minimal view, designed to be like a light-weight startpage +- Implemented all the required features (filtering, opening methods, icons, etc) into minimal view +- Adds `appConfig.startingView` into schema, for specifying the initial default view to be loaded + ## ✨ 1.5.8 - Multi-Tasking Support in Workspace View [PR #146](https://github.com/Lissy93/dashy/pull/146) - Adds option to keep launched apps open in the background, to reduce friction when switching between websites, Re: #144 - This can be enabled by setting `appConfig.enableMultiTasking: true` diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index e653ca6a..baf42f9f 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -13,4 +13,3 @@ src/assets/locales/nl.json @evroon # Bot PR Permissions docs/assets/CONTRIBUTORS.svg @liss-bot -docs/*.md @liss-bot diff --git a/README.md b/README.md index 0b36d9a7..201ad187 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,6 @@ [![Awesome Self-Hosted](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/awesome-selfhosted/awesome-selfhosted#personal-dashboards) ![Docker Pulls](https://img.shields.io/docker/pulls/lissy93/dashy?logo=docker&style=flat-square) -![Stars](https://flat.badgen.net/github/stars/lissy93/dashy?icon=github) ![GitHub Status](https://flat.badgen.net/github/status/lissy93/dashy?icon=github) ![License MIT](https://img.shields.io/badge/License-MIT-09be48?style=flat-square&logo=opensourceinitiative) ![Current Version](https://img.shields.io/github/package-json/v/lissy93/dashy?style=flat-square&logo=azurepipelines&color=00af87) @@ -29,12 +28,13 @@ @@ -216,18 +216,18 @@ Both sections and items can have an icon associated with them, and defined under --- -## Cloud Backup & Sync ☁ +## Status Indicators 🚦 -> For full backup documentation, see: [**Cloud Backup & Sync**](./docs/backup-restore.md) +> For full monitoring documentation, see: [**Status Indicators**](./docs/status-indicators.md) -Dashy has an **optional** built-in feature for securely backing up your config to a hosted cloud service, and then restoring it on another instance. This feature is totally optional, and if you do not enable it, then Dashy will not make any external network requests. +Dashy has an optional feature that can display a small icon next to each of your running services, indicating it's current status. This is useful if you are using Dashy as your homelab's start page, as it gives you an overview of the health of each of your running services. Hovering over the indicator will show additional information, including average response time and an error message for services which are down. -This is useful not only for backing up your configuration off-site, but it also enables Dashy to be used without having write a YAML config file, and makes it possible to use a public hosted instance, without the need to self-host. +By default, this feature is off, but you can enable it globally by setting `appConfig.statusCheck: true`, or enable/ disable it for an individual item, with `item[n].statusCheck`. -All data is encrypted before being sent to the backend. In Dashy, this is done in [`CloudBackup.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/CloudBackup.js), using [crypto.js](https://github.com/brix/crypto-js)'s AES method, using the users chosen password as the key. The data is then sent to a [Cloudflare worker](https://developers.cloudflare.com/workers/learning/how-workers-works) (a platform for running serverless functions), and stored in a [KV](https://developers.cloudflare.com/workers/learning/how-kv-works) data store. +You can also specify an time interval in seconds under `appConfig.statusCheckInterval`, between checks, if this value is `0`, then status is only checked on initial page load, which is the default behavior. Status checks use the `url` attribute, but to call a different endpoint instead, you can set `statusCheckUrl`. Custom headers can also be specified using `statusCheckHeaders`.

- + Status Checks demo

**[⬆️ Back to Top](#dashy)** @@ -258,24 +258,6 @@ At present, access control is handled on the frontend, and therefore in security

-**[⬆️ Back to Top](#dashy)** - ---- - -## Status Indicators 🚦 - -> For full monitoring documentation, see: [**Status Indicators**](./docs/status-indicators.md) - -Dashy has an optional feature that can display a small icon next to each of your running services, indicating it's current status. This is useful if you are using Dashy as your homelab's start page, as it gives you an overview of the health of each of your running services. Hovering over the indicator will show additional information, including average response time and an error message for services which are down. - -By default, this feature is off, but you can enable it globally by setting `appConfig.statusCheck: true`, or enable/ disable it for an individual item, with `item[n].statusCheck`. - -You can also specify an time interval in seconds under `appConfig.statusCheckInterval`, between checks, if this value is `0`, then status is only checked on initial page load, which is the default behavior. Status checks use the `url` attribute, but to call a different endpoint instead, you can set `statusCheckUrl`. Custom headers can also be specified using `statusCheckHeaders`. - -

- Status Checks demo -

- **[⬆️ Back to Top](#dashy)** --- @@ -292,17 +274,34 @@ One of the primary purposes of Dashy is to make launching commonly used apps and Even if the target is not set (or is set to `sametab`), you can still launch any given app in an alternative method: Alt + Click will open the modal, and Ctrl + Click will open in a new tab. You can also right-click on any item to see all options (as seen in the screenshot below). This custom context menu can be disabled by setting `appConfig.disableContextMenu: true`. +In the workspace view, you can keep previously opened websites/ apps open in the background, by setting `appConfig.enableMultiTasking: true`. This comes at the cost of performance, but does mean that your session with each app is preserved, enabling you to quickly switch between your apps. +

-The modal and workspace views work by rendering the target application in an iframe. For this to work, the HTTP response header [`X-Frame-Options`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) for a given application needs to be set to `ALLOW`. If you are getting a `Refused to Connect` error then this header is set to `DENY` (or `SAMEORIGIN` and it's on a different host). +The modal and workspace views work by rendering the target application in an iframe. For this to work, the HTTP response header [`X-Frame-Options`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) for a given application needs to be set to `ALLOW`. If you are getting a `Refused to Connect` error then this header is set to `DENY` (or `SAMEORIGIN` and it's on a different host). Here are [instructions on how to do this](./docs/troubleshooting.md#refused-to-connect-in-modal-or-workspace-view) with common web servers. + +--- + +## Alternate Views 👓 + +As well as the default homepage, there is also: +- A minimal view, useful for use as a browser start page +- A workspace view, useful for visiting many apps simultaneously + +You can change the view from the UI, using the switch icon in the top-right corner, or select a default view in the config, under `appConfig.startingView` attribute (can be either `default`, `minimal` or `workspace`). Clicking the page title on any view will take you back to your default starting view. -Here's a quick demo of the workspace view:

+ Example of Workspace View
Workspace view demo

+

+ Example of Minimal View
+ Workspace view demo +

+ **[⬆️ Back to Top](#dashy)** --- @@ -345,6 +344,24 @@ A full list of available config options can be found [here](./docs/configuring.m --- +## Cloud Backup & Sync ☁ + +> For full backup documentation, see: [**Cloud Backup & Sync**](./docs/backup-restore.md) + +Dashy has an **optional** built-in feature for securely backing up your config to a hosted cloud service, and then restoring it on another instance. This feature is totally optional, and if you do not enable it, then Dashy will not make any external network requests. + +This is useful not only for backing up your configuration off-site, but it also enables Dashy to be used without having write a YAML config file, and makes it possible to use a public hosted instance, without the need to self-host. + +All data is encrypted before being sent to the backend. In Dashy, this is done in [`CloudBackup.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/CloudBackup.js), using [crypto.js](https://github.com/brix/crypto-js)'s AES method, using the users chosen password as the key. The data is then sent to a [Cloudflare worker](https://developers.cloudflare.com/workers/learning/how-workers-works) (a platform for running serverless functions), and stored in a [KV](https://developers.cloudflare.com/workers/learning/how-kv-works) data store. + +

+ +

+ +**[⬆️ Back to Top](#dashy)** + +--- + ## Language Switching 🌎 > For full internationalization documentation, see: [**Multi-Language Support**](./docs/multi-language-support.md) @@ -358,8 +375,8 @@ Dashy has the ability to support multiple languages and locales. When available, - 🇸🇮 **Slovenian**: `sl` - Contributed by **[@UrekD](https://github.com/UrekD)** #### Add your Language -It would be awesome for open source projects to be available to everyone, without language being a barrier to entry for non-native English speakers. If you have a few minutes to sapir, you're help with translating it would be very much appreciated. -There's not too much text to cover, and it's all located in [a single JSON file](https://github.com/Lissy93/dashy/tree/master/src/assets/locales), and you don't have to translate it all, as any missing items will just fallback to English. For more info, see the [Adding a New Language Docs](./docs/multi-language-support.md#adding-a-new-language), and feel free to reach out if you need any support. +I would love for Dashy to be available to everyone, without language being a barrier to entry for non-native English speakers. If you have a few minutes to sapir, you're help with translating it would be very much appreciated. +It's quite a quick task, all text is in [a single JSON file](https://github.com/Lissy93/dashy/tree/master/src/assets/locales), and you don't have to translate it all. For more info, see the [Adding a New Language Docs](./docs/multi-language-support.md#adding-a-new-language), and feel free to reach out if you need any support. **[⬆️ Back to Top](#dashy)** @@ -367,15 +384,7 @@ There's not too much text to cover, and it's all located in [a single JSON file] ## Setting Dashboard Info 🌳 -Page settings are defined under [`pageInfo`](https://github.com/Lissy93/dashy/blob/master/docs/configuring.md#pageinfo). Here you can set things like title, sub-title, navigation links, footer text, etc - -- `title` - Your dashboard title, displayed in the header and browser tab -- `description` - Description of your dashboard, also displayed as a subtitle -- `logo` - The path to an image to display in the header (to the right of the title). This can be either local, where `/` is the root of `./public`, or any remote image, such as `https://i.ibb.co/yhbt6CY/dashy.png` -- `navLinks` - Optional list of a maximum of 6 links, which will be displayed in the navigation bar, see [`pageInfo.navLinks`](https://github.com/Lissy93/dashy/blob/master/docs/configuring.md#pageinfonavlinks-optional) for structure -- `footerText` - Text to display in the footer (note that this will override the default footer content). This can also include HTML and inline CSS - -For example, a `pageInfo` section might look something like this: +Page settings are defined under [`pageInfo`](https://github.com/Lissy93/dashy/blob/master/docs/configuring.md#pageinfo). Here you can set things like title, sub-title, navigation links, footer text, etc. For example: ```yaml pageInfo: @@ -423,11 +432,14 @@ Found a bug, or something that isn't working as you'd expect? Please raise it as If you're using Dashy, and would like to help support it's development, then that would be awesome! Contributions of any type, however small are always very much appreciated, and you will be appropriately credited for your effort. Several areas that we need a bit of help with at the moment are: -- Adding translations - Help make Dashy available to non-native English speakers by adding text for you're language +- Adding translations - Help make Dashy available to non-native English speakers by [adding text for you're language](./docs/multi-language-support.md#adding-a-new-language) - Donate a small amount, by [Sponsoring @Lissy93 on GitHub](https://github.com/sponsors/Lissy93) (only if you can afford to), and you'll also receive some extra perks! -- Community Engagement: Join the [discussion](https://github.com/Lissy93/dashy/discussions), and help answer other users questions, or spread the word by sharing Dashy online +- Complete a [short survey](https://n9fy6xak9yd.typeform.com/to/gl0L68ou), to have your say about future features - Share your dashboard in the [Showcase](https://github.com/Lissy93/dashy/blob/master/docs/showcase.md#dashy-showcase-), to help provide inspiration for others +- Community Engagement: Join the [discussion](https://github.com/Lissy93/dashy/discussions), and help answer other users questions, suggest features, share tips and ask questions +- Spread the word, by sharing Dashy online, to help new users discover it - Submit a PR, to add a new feature, fix a bug, update the docs, add a theme or something else +- Star Dashy on GitHub/ DockerHub or leave an upvote / review on [these platforms](https://github.com/Lissy93/dashy/blob/master/docs/contributing.md#star-upvote-or-leave-a-review) [![Sponsor Lissy93 on GitHub](./docs/assets/sponsor-button.svg)](https://github.com/sponsors/Lissy93) @@ -463,7 +475,7 @@ Huge thanks to the sponsors helping to support Dashy's development! #### Contributors -![Auto-generated contributors](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/CONTRIBUTORS.svg) +[![Auto-generated contributors](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/CONTRIBUTORS.svg)](./docs/credits.md) #### Packages Dashy was made possible thanks to the following packages and components. For more details on each, see [Dependency Credits](./docs/credits.md#dependencies-). Full credit to their respective authors. @@ -482,6 +494,8 @@ Dashy was made possible thanks to the following packages and components. For mor [![Open Project in VS Code](https://img.shields.io/badge/Open_in-VS_Code-863cfc?style=for-the-badge&logo=visualstudiocode)](https://open.vscode.dev/Lissy93/Dashy) +Before getting started, you'll need [Git](https://git-scm.com/downloads), [Node](https://nodejs.org/en/download/) and optionally [Yarn](https://yarnpkg.com/) (run `npm i -g yarn`) installed. + To set up the development environment: 1. Get Code: `git clone git@github.com:Lissy93/dashy.git` and `cd dashy` 2. Install dependencies: `yarn` @@ -498,7 +512,7 @@ Like most Git repos, we are following the [Github Flow](https://guides.github.co Branch names are specified in the following format: `[TYPE]/[TICKET]_[TITLE]`. E.g. `FEATURE/420_Awesome-feature` or `FIX/690_login-server-error`. -Most commit messages use git [commit emojis](https://gist.github.com/parmentf/035de27d6ed1dce0b36a) - e.g. ✨ = New feature, 🐛 = Bug fix, 💄 = UI stuff, 🚧 = Work in progress, 🔖 = New release, and so on. Take a look at [gitmoji.dev](https://gitmoji.dev/) for a list of what each emoji indicates +Most commit messages use git [commit emojis](https://gist.github.com/parmentf/035de27d6ed1dce0b36a) - e.g. ✨ = New feature, 🐛 = Bug fix, 💄 = UI stuff, 🚧 = Work in progress, 🌐 = Language, 🔖 = New release, and so on. Take a look at [gitmoji.dev](https://gitmoji.dev/) for a list of what each emoji indicates Before you submit your pull request, please ensure you've checked off all the boxes in the template. For your PR to be merged, it must: - Must be backwards compatible @@ -509,11 +523,11 @@ Before you submit your pull request, please ensure you've checked off all the bo If you're new to web development, I've put together a short [list of resources](https://github.com/Lissy93/dashy/blob/master/docs/developing.md#resources-for-beginners), to help beginners get started **Repo Status**: -![Open PRs](https://flat.badgen.net/github/open-prs/lissy93/dashy?icon=github) -![Total PRs](https://flat.badgen.net/github/prs/lissy93/dashy?icon=github) -![GitHub commit activity](https://img.shields.io/github/commit-activity/m/lissy93/dashy?style=flat-square) -![Last Commit](https://flat.badgen.net/github/last-commit/lissy93/dashy?icon=github) -![Contributors](https://flat.badgen.net/github/contributors/lissy93/dashy?icon=github) +[![Open PRs](https://flat.badgen.net/github/open-prs/lissy93/dashy?icon=github)](https://github.com/Lissy93/dashy/pulls) +[![Total PRs](https://flat.badgen.net/github/prs/lissy93/dashy?icon=github)](https://github.com/Lissy93/dashy/pulls?q=) +[![GitHub commit activity](https://img.shields.io/github/commit-activity/m/lissy93/dashy?style=flat-square)](https://github.com/Lissy93/dashy/commits/master) +[![Last Commit](https://flat.badgen.net/github/last-commit/lissy93/dashy?icon=github)](https://github.com/Lissy93/dashy/commits/master) +[![Contributors](https://flat.badgen.net/github/contributors/lissy93/dashy?icon=github)](https://github.com/Lissy93/dashy/graphs/contributors) **[⬆️ Back to Top](#dashy)** @@ -575,6 +589,7 @@ There are a few self-hosted web apps, that serve a similar purpose to Dashy. If - [Organizr](https://organizr.app/) (`GPL-3.0 License`) - [Heimdall](https://github.com/linuxserver/Heimdall) (`MIT`) - [Smashing](https://github.com/Smashing/smashing) (`MIT`) +- See more 👉 [Awesome Self-Hosted](https://github.com/awesome-selfhosted/awesome-selfhosted#personal-dashboards) **[⬆️ Back to Top](#dashy)** diff --git a/docs/assets/minimal-view-demo.gif b/docs/assets/minimal-view-demo.gif new file mode 100644 index 00000000..1984d69b Binary files /dev/null and b/docs/assets/minimal-view-demo.gif differ diff --git a/docs/configuring.md b/docs/configuring.md index b763c2a1..c9f4dc22 100644 --- a/docs/configuring.md +++ b/docs/configuring.md @@ -57,15 +57,16 @@ To disallow any changes from being written to disk via the UI config editor, set **Field** | **Type** | **Required**| **Description** --- | --- | --- | --- **`language`** | `string` | _Optional_ | The 2 (or 4-digit) [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for your language, e.g. `en` or `en-GB`. This must be a language that the app has already been [translated](https://github.com/Lissy93/dashy/tree/master/src/assets/locales) into. If your language is unavailable, Dashy will fallback to English. By default Dashy will attempt to auto-detect your language, although this may not work on some privacy browsers. +**`startingView`** | `enum` | _Optional_ | Which page to load by default, and on the base page or domain root. You can still switch to different views from within the UI. Can be either `default`, `minimal` or `workspace`. Defaults to `default` **`statusCheck`** | `boolean` | _Optional_ | When set to `true`, Dashy will ping each of your services and display their status as a dot next to each item. This can be overridden by setting `statusCheck` under each item. Defaults to `false` **`statusCheckInterval`** | `boolean` | _Optional_ | The number of seconds between checks. If set to `0` then service will only be checked on initial page load, which is usually the desired functionality. If value is less than `10` you may experience a hit in performance. Defaults to `0` **`backgroundImg`** | `string` | _Optional_ | Path to an optional full-screen app background image. This can be either remote (http) or local (/). Note that this will slow down initial load **`enableFontAwesome`** | `boolean` | _Optional_ | Where `true` is enabled, if left blank font-awesome will be enabled only if required by 1 or more icons **`fontAwesomeKey`** | `string` | _Optional_ | If you have a font-awesome key, then you can use it here and make use of premium icons. It is a 10-digit alpha-numeric string from you're FA kit URL (e.g. `13014ae648`) -**`faviconApi`** | `string` | _Optional_ | Only applicable if you are using favicons for item icons. Specifies which service to use to resolve favicons. Set to `local` to do this locally, without using an API. Services running locally will use this option always. Available options are: `local`, `faviconkit`, `google`, `clearbit`, `webmasterapi` and `allesedv`. Defaults to `faviconkit`. See [Icons](/docs/icons.md#favicons) for more info +**`faviconApi`** | `enum` | _Optional_ | Only applicable if you are using favicons for item icons. Specifies which service to use to resolve favicons. Set to `local` to do this locally, without using an API. Services running locally will use this option always. Available options are: `local`, `faviconkit`, `google`, `clearbit`, `webmasterapi` and `allesedv`. Defaults to `faviconkit`. See [Icons](/docs/icons.md#favicons) for more info **`auth`** | `array` | _Optional_ | An array of objects containing usernames and hashed passwords. If this is not provided, then authentication will be off by default, and you will not need any credentials to access the app. Note authentication is done on the client side, and so if your instance of Dashy is exposed to the internet, it is recommend to configure your web server to handle this. See [`auth`](#appconfigauth-optional) -**`layout`** | `string` | _Optional_ | App layout, either `horizontal`, `vertical`, `auto` or `sidebar`. Defaults to `auto`. This specifies the layout and direction of how sections are positioned on the home screen. This can also be modified from the UI. -**`iconSize`** | `string` | _Optional_ | The size of link items / icons. Can be either `small`, `medium,` or `large`. Defaults to `medium`. This can also be set directly from the UI. +**`layout`** | `enum` | _Optional_ | App layout, either `horizontal`, `vertical`, `auto` or `sidebar`. Defaults to `auto`. This specifies the layout and direction of how sections are positioned on the home screen. This can also be modified from the UI. +**`iconSize`** | `enum` | _Optional_ | The size of link items / icons. Can be either `small`, `medium,` or `large`. Defaults to `medium`. This can also be set directly from the UI. **`theme`** | `string` | _Optional_ | The default theme for first load (you can change this later from the UI) **`cssThemes`** | `string[]` | _Optional_ | An array of custom theme names which can be used in the theme switcher dropdown **`customColors`** | `object`| _Optional_ | Enables you to apply a custom color palette to any given theme. Use the theme name (lowercase) as the key, for an object including key-value-pairs, with the color variable name as keys, and 6-digit hex code as value. See [Theming](/docs/theming.md#modifying-theme-colors) for more info diff --git a/docs/development-guides.md b/docs/development-guides.md index 72022f2c..c31cf81c 100644 --- a/docs/development-guides.md +++ b/docs/development-guides.md @@ -34,14 +34,14 @@ Note that if you're theme is just for yourself, and you're not submitting a PR, ## Writing Translations +For full docs about Dashy's multi-language support, see [Multi-Language Support](./multi-language-support.md) + Dashy is using [vue-i18n](https://vue-i18n.intlify.dev/guide/) to manage multi-language support. Adding a new language is pretty straightforward, with just three steps: ##### 1. Create a new Language File Create a new JSON file in `./src/assets/locales` name is a 2-digit [ISO-639 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for your language, E.g. for German `de.json`, French `fr.json` or Spanish `es.json` - You can find a list of all ISO codes at [iso.org](https://www.iso.org/obp/ui). -If your language is a specific dialect or regional language, then use the Posfix [CLDR](http://cldr.unicode.org/) format, where, e.g. `en-GB.json` (British), `es-MX.json` (Spanish, in Mexico) or `zh-CN.json` (Chinese, simplified) - A list of which can be found [here](https://github.com/unicode-org/cldr-json/blob/master/cldr-json/cldr-core/availableLocales.json) - ##### 2. Translate! Using [`en.json`](https://github.com/Lissy93/dashy/tree/master/src/assets/locales/en.json) as an example, translate the JSON values to your language, while leaving the keys as they are. It's fine to leave out certain items, as if they're missing they will fall-back to English. If you see any attribute which include curly braces (`{xxx}`), then leave the inner value of these braces as is, as this is for variables. @@ -84,7 +84,7 @@ export const languages = [ }, ]; ``` -You can also add your new language to the readme, under the [Language Switching](https://github.com/Lissy93/dashy#language-switching-) section and optionally include your name/ username if you'd like to be credited for your work. Done! +You can also add your new language to the readme, under the [Language Switching](https://github.com/Lissy93/dashy#language-switching-) section, and optionally include your name/ username if you'd like to be credited for your work. Done! If you are not comfortable with making pull requests, or do not want to modify the code, then feel free to instead send the translated file to me, and I can add it into the application. I will be sure to credit you appropriately. @@ -137,4 +137,42 @@ Checklist: ## Updating Dependencies -Running `yarn upgrade` will updated all dependencies based on the ranges specified in the `package.json`. The `yarn.lock` file will be updated, as will the contents of `./node_modules`, for more info, see the [yarn upgrade documentation](https://classic.yarnpkg.com/en/docs/cli/upgrade/). It is important to thoroughly test after any big dependency updates. \ No newline at end of file +Running `yarn upgrade` will updated all dependencies based on the ranges specified in the `package.json`. The `yarn.lock` file will be updated, as will the contents of `./node_modules`, for more info, see the [yarn upgrade documentation](https://classic.yarnpkg.com/en/docs/cli/upgrade/). It is important to thoroughly test after any big dependency updates. + +--- + +## Hiding Page Furniture on Certain Routes +For some pages (such as the login page, the minimal start page, etc) the basic page furniture, (like header, footer, nav, etc) is not needed. This section explains how you can hide furniture on a new view (step 1), or add a component that should be hidden on certain views (step 2). + +##### 1. Add the route name to the should hide array + +In [`./src/utils/defaults.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js), there's an array called `hideFurnitureOn`. Append the name of the route (the same as it appears in [`router.js`](https://github.com/Lissy93/dashy/blob/master/src/router.js)) here. + +##### 2. Add the conditional to the structural component to hide + +First, import the helper function: +```javascript +import { shouldBeVisible } from '@/utils/MiscHelpers'; +``` + +Then you can create a computed value, that calls this function, passing in the route name: +```javascript +export default { + ... + computed: { + ... + isVisible() { + return shouldBeVisible(this.$route.name); + }, + }, +}; +``` + +Finally, in the markup of your component, just add a `v-if` statement, referencing your computed value +```vue +
+ ... +
+``` + +--- \ No newline at end of file diff --git a/package.json b/package.json index 61e9ef98..d6b300f3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Dashy", - "version": "1.5.8", + "version": "1.5.9", "license": "MIT", "main": "server", "scripts": { diff --git a/src/assets/interface-icons/application-change-view.svg b/src/assets/interface-icons/application-change-view.svg new file mode 100644 index 00000000..d8759070 --- /dev/null +++ b/src/assets/interface-icons/application-change-view.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/interface-icons/application-home.svg b/src/assets/interface-icons/application-home.svg new file mode 100644 index 00000000..2c1abdbb --- /dev/null +++ b/src/assets/interface-icons/application-home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/interface-icons/application-minimal.svg b/src/assets/interface-icons/application-minimal.svg new file mode 100644 index 00000000..c8ee865d --- /dev/null +++ b/src/assets/interface-icons/application-minimal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/MinimalView/MinimalHeading.vue b/src/components/MinimalView/MinimalHeading.vue new file mode 100644 index 00000000..5b99c9f2 --- /dev/null +++ b/src/components/MinimalView/MinimalHeading.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/components/MinimalView/MinimalSearch.vue b/src/components/MinimalView/MinimalSearch.vue new file mode 100644 index 00000000..1fae2a45 --- /dev/null +++ b/src/components/MinimalView/MinimalSearch.vue @@ -0,0 +1,131 @@ + + + + + diff --git a/src/components/MinimalView/MinimalSection.vue b/src/components/MinimalView/MinimalSection.vue new file mode 100644 index 00000000..b20112ec --- /dev/null +++ b/src/components/MinimalView/MinimalSection.vue @@ -0,0 +1,116 @@ + + + + + diff --git a/src/components/PageStrcture/Footer.vue b/src/components/PageStrcture/Footer.vue index 77529692..252c2abb 100644 --- a/src/components/PageStrcture/Footer.vue +++ b/src/components/PageStrcture/Footer.vue @@ -1,8 +1,8 @@ diff --git a/src/components/PageStrcture/Header.vue b/src/components/PageStrcture/Header.vue index 754f3313..6fb4679e 100644 --- a/src/components/PageStrcture/Header.vue +++ b/src/components/PageStrcture/Header.vue @@ -1,5 +1,5 @@