diff --git a/alternate-views.md b/alternate-views.md index e69de29..de72cd1 100644 --- a/alternate-views.md +++ b/alternate-views.md @@ -0,0 +1,47 @@ +# Alternate Views & Opening Methods + +## Views +As well as the default start view, Dashy has several other start pages, for different tasks. You can switch views with the view-switcher button in the top-right, or set a default starting view using the `appConfig.startingView` attribute (can be `default`, `minimal` or `workspace`). + +### Default +This is the main page that you will land on when you first launch the application. Here all of your sections and items will be visible, you can modify settings and search + launch your applications. + +
+ Example of Default View
+
+
+ Example of Workspace View
+
+
+ Example of Minimal View
+
+
+ +
+ +If you get a 'Refused to Connect' error in the modal or workspace views, then the target app has it's X-Frame-Options HTTP set to block requests from embedded content. You can easily fix this by setting this header to ALLOW, for instructions on how to do so, see the [Troubleshooting Docs](/docs/troubleshooting.md#refused-to-connect-in-modal-or-workspace-view). diff --git a/assets/CONTRIBUTORS.svg b/assets/CONTRIBUTORS.svg index 1f922fa..e1e6061 100644 --- a/assets/CONTRIBUTORS.svg +++ b/assets/CONTRIBUTORS.svg @@ -3,7 +3,22 @@+ - **BTC**: `3853bSxupMjvxEYfwGDGAaLZhTKxB2vEVC` - **ETH**: `0x0fc98cBf8bea932B4470C46C0FbE1ed1f6765017` / `aliciasykes.eth` -- **XMR**: `471KZdxb6N63aABR4WYwMRjTVkc1p1x7wGsUTEF7AMYzL8L94A5pCuYWkosgJQ5Ze8Y2PscVCGZFJa3hDPg6MaDq47GUm8r`# +- **XMR**: `471KZdxb6N63aABR4WYwMRjTVkc1p1x7wGsUTEF7AMYzL8L94A5pCuYWkosgJQ5Ze8Y2PscVCGZFJa3hDPg6MaDq47GUm8r` +
+@@ -26,17 +33,17 @@ |
-
-
+
+
- Begin + EVOTk |
-
-
+
+
- Ryan Turner + Erik Vroon |
@@ -45,12 +52,49 @@
Snyk Bot + |
+
+
+
+ + αͺΡΞ½ΞΉΞ· α·Ο Π½Κ + + |
+
+
+
+ + UrekD + + |
+
+
+ + Begin + + |
+
+
+
+ + DeepSource Bot + + |
+
+
+
+ + Ryan Turner + |
@@ -131,7 +175,7 @@
This app definitely wouldn't have been quite so possible without the making use of the following package and components. Full credit and big kudos to their respective authors, who've done an amazing job in building and maintaining them. For a full breakdown of dependency licenses, please see [Legal](https://github.com/Lissy93/dashy/blob/master/.github/LEGAL.md)
##### Core
-At it's core, the application uses [Vue.js](https://github.com/vuejs/vue), as well as it's services. Styling is done with [SCSS](https://github.com/sass/sass), JavaScript is currently [Babel](https://github.com/babel/babel), (but I am in the process of converting to [TypeScript](https://github.com/Microsoft/TypeScript)), linting is done with [ESLint](https://github.com/eslint/eslint), the config is defined in [YAML](https://github.com/yaml/yaml), and there is a simple [Node.js](https://github.com/nodejs/node) server to serve up the static app.
+At it's core, the application uses [Vue.js](https://github.com/vuejs/vue), as well as it's services. Styling is done with [SCSS](https://github.com/sass/sass), JavaScript is currently [Babel](https://github.com/babel/babel), (but I am in the process of converting to [TypeScript](https://github.com/Microsoft/TypeScript)). Linting is done with [ESLint](https://github.com/eslint/eslint) and [Prettier](https://prettier.io/), both following the [AirBnB Styleguide](https://github.com/airbnb/javascript). The config is defined in [YAML](https://github.com/yaml/yaml), and there is a simple [Node.js](https://github.com/nodejs/node) server to serve up the static app and the optional API endpoints.
##### Utilities
- [`crypto-js`](https://github.com/brix/crypto-js) - Encryption implementations by @evanvosberg and community `MIT`
@@ -147,15 +191,13 @@ At it's core, the application uses [Vue.js](https://github.com/vuejs/vue), as we
- [`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`
- [`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`
- [`vue-swatches`](https://github.com/saintplay/vue-swatches) - Color palete picker by @saintplay `MIT`
##### Backup & Sync Server
Although the app is purely frontend, there is an optional cloud backup and restore feature. This is built as a serverless function on [Cloudflare workers](https://workers.cloudflare.com/) using [KV](https://developers.cloudflare.com/workers/runtime-apis/kv) and [web crypto](https://developers.cloudflare.com/workers/runtime-apis/web-crypto)
##### External Services
-The 1-Click deploy demo uses [Play-with-Docker Labs](https://play-with-docker.com/). Code is hosted on [GitHub](https://github.com), Docker image is hosted on [DockerHub](https://hub.docker.com/), and the demos are hosted on [Netlify](https://www.netlify.com/).
+The 1-Click deploy demo uses [Play-with-Docker Labs](https://play-with-docker.com/). Code is hosted on [GitHub](https://github.com), Docker images are hosted on [DockerHub](https://hub.docker.com/), and the demos are hosted on [Netlify](https://www.netlify.com/).
---
diff --git a/deployment.md b/deployment.md
index 036070e..5dfd1e6 100644
--- a/deployment.md
+++ b/deployment.md
@@ -3,14 +3,14 @@
Welcome to Dashy, so glad you're here :) Deployment is super easy, and there are several methods available depending on what type of system you're using. If you're self-hosting, then deploying with Docker (or similar container engine) is the recommended approach.
#### Quick Start
-If you want to skip the fuss, and get straight down to it, then you can spin up a new instance of Dashy by running:
+If you want to skip the fuss, and [get straight down to it](/docs/quick-start.md), then you can spin up a new instance of Dashy by running:
```
docker run -p 8080:80 lissy93/dashy
```
-See [Management Docs](./docs/management.md) for info about securing, monitoring, updating, health checks, auto starting, web server configuration, etc
+See [Management Docs](/docs/management.md) for info about securing, monitoring, updating, health checks, auto starting, web server configuration, etc
-Once you've got Dashy up and running, you'll want to configure it with your own content. You can either reference the [configuring docs]() or follow this [step-by-step guide]().
+Once you've got Dashy up and running, you'll want to configure it with your own content, for this you can reference the [configuring docs](/docs/configuring.md).
## Deployment Methods
@@ -25,6 +25,19 @@ Once you've got Dashy up and running, you'll want to configure it with your own
### Deploy with Docker
+**Container Info**: [
+![Docker Supported Architecture](https://img.shields.io/badge/Architectures-amd64%20|%20arm32v7%20|%20arm64v8-6ba6e5)
+![Docker Base Image](https://img.shields.io/badge/Base_Image-Alpine_3.14-6ba6e5)
+![Docker Hosted on](https://img.shields.io/badge/Hosted_on-DockerHub-6ba6e5)
+](https://hub.docker.com/r/lissy93/dashy) +**Status**: [ +![Docker Build Status](https://img.shields.io/docker/cloud/build/lissy93/dashy?label=Docker%20Build) +![Docker Pulls](https://img.shields.io/docker/pulls/lissy93/dashy?color=ecb2f7) +![Docker Stars](https://img.shields.io/docker/stars/lissy93/dashy?color=f7f754&label=Docker%20Stars) +![Docker Image Size](https://img.shields.io/docker/image-size/lissy93/dashy/latest?color=1eea76) +![Docker Cloud Build](https://img.shields.io/docker/cloud/automated/lissy93/dashy?color=f4a966&label=Docker%20Build) +](https://hub.docker.com/r/lissy93/dashy) + Dashy has a built container image hosted on [Docker Hub](https://hub.docker.com/r/lissy93/dashy). You will need [Docker](https://docs.docker.com/get-docker/) installed on your system. @@ -43,17 +56,21 @@ Explanation of the above options: - `-v` Specify volumes, to pass data from your host system to the container, in the format of `[host-path]:[container-path]`, you can use this to pass your config file, directory of assets (like icons), custom CSS or web assets (like favicon.ico, manifest.json etc) - `--name` Give your container a human-readable name - `--restart=always` Spin up the container when the daemon starts, or after it has been stopped -- `lissy93/dashy:latest` This last option is the image the container should be built from, you can also use a specific version, by replacing `:latest` with one of tthe [tags](https://hub.docker.com/r/lissy93/dashy/tags) +- `lissy93/dashy:latest` This last option is the image the container should be built from, you can also use a specific version or architecture type, by replacing `:latest` with one of the [tags](https://hub.docker.com/r/lissy93/dashy/tags) For all available options, and to learn more, see the [Docker Run Docs](https://docs.docker.com/engine/reference/commandline/run/) +Dashy is also available through GHCR: `docker pull ghcr.io/lissy93/dashy:latest` + +If you're deploying Dashy on a modern ARM-based board, such as a Raspberry Pi (2+), then you'll need to use one of Dashy's ARM images. Set the base image + tag to either `lissy93/dashy:arm64v8` or `lissy93/dashy:arm32v7`, depending on your system architecture. You can also use the `multi-arch` image, which should work on all system architectures. + +The image defaults to `:latest`, but you can instead specify a specific version, e.g. `docker pull lissy93/dashy:release-1.5.0` + ### Using Docker Compose -Using Docker Compose can be useful for saving your specific config in files, without having to type out a long run command each time. Save compose config as a YAML file, and then run `docker compose up` (optionally use the `-f` flag to specify file location, if it isn't located at `./docker-compose.yml`). +Using Docker Compose can be useful for saving your specific config in files, without having to type out a long run command each time. Save compose config as a YAML file, and then run `docker compose up` (optionally use the `-f` flag to specify file location, if it isn't located at `./docker-compose.yml`). Compose is also useful if you are using clusters, as the format is very similar to stack files, used with Docker Swarm. -Compose is also useful if you are using clusters, as the format is very similar to stack files, used with Docker Swarm. - -The following is a complete example of a `docker-compose.yml` for Dashy. Run it as is, or uncomment the additional options you need. +The following is a complete example of a [`docker-compose.yml`](https://github.com/Lissy93/dashy/blob/master/docker-compose.yml) for Dashy. Run it as is, or uncomment the additional options you need. ```yaml --- @@ -85,23 +102,20 @@ services: retries: 3 start_period: 40s ``` +You can use a different tag, by for example setting `image: lissy93/dashy:arm64v8`, or pull from GHCR instead by setting `image: ghcr.io/lissy93/dashy`. + +If you are building from source, and would like to use one of the [other Dockerfiles](https://github.com/Lissy93/dashy/tree/master/docker), then under `services.dashy` first set `context: .`, then specify the the path to the dockerfile, e.g. `dockerfile: ./docker/Dockerfile-arm32v7` ### Build from Source If you do not want to use Docker, you can run Dashy directly on your host system. For this, you will need both [git](https://git-scm.com/downloads) and the latest or LTS version of [Node.js](https://nodejs.org/) installed, and optionally [yarn](https://yarnpkg.com/) -1. Get Code: `git clone git@github.com:Lissy93/dashy.git` and `cd dashy` +1. Get Code: `git clone https://github.com/Lissy93/dashy.git` and `cd dashy` 2. Configuration: Fill in you're settings in `./public/conf.yml` 3. Install dependencies: `yarn` 4. Build: `yarn build` 5. Run: `yarn start` -### Run as executable - -### Install with NPM - -### Use managed instance - ### Deploy to cloud service If you don't have a home server, then fear not - Dashy can be deployed to pretty much any cloud provider. The above Docker and NPM guides will work exactly the same on a VPS, but I've also setup some 1-Click deploy links for 10+ of the most common cloud providers, to make things easier. Note that if your instance is exposed to the internet, it will be your responsibility to adequately secure it. @@ -110,8 +124,8 @@ Some hosting providers required a bit of extra configuration, which was why I've **Note** If you use a static hosting provider, then status checks, writing new config changes to disk from the UI, and triggering a rebuild through the UI will not be availible. This is because these features need endpoints provided by Dashy's local Node server. Everything else should work just the same though. -#### Netlify -[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/dashy) +#### Netlify +[![Deploy to Netlify](https://i.ibb.co/GtKMysT/deploy-netlify-button.png)](https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/dashy) [Netlify](https://www.netlify.com/) offers Git-based serverless cloud hosting for web applications. Their services are free to use for personal use, and they support deployment from both public and private repos, as well as direct file upload. The free plan also allows you to use your own custom domain or sub-domain, and is easy to setup. @@ -120,8 +134,8 @@ To deploy Dashy to Netlify, use the following link https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/dashy ``` -#### Heroku -[![Deploy to Heroku](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/Lissy93/dashy) +#### Heroku +[![Deploy to Heroku](https://i.ibb.co/GdMFzBP/deploy-heroku-button.png)](https://heroku.com/deploy?template=https://github.com/Lissy93/dashy) [Heroku](https://www.heroku.com/) is a fully managed cloud platform as a service. You define app settings in a Procfile and app.json, which specifying how the app should be build and how the server should be started. Heroku is free to use for unlimited, non-commercial, single dyno apps, and supports custom domains. Heroku's single-dyno service is not as quite performant as some other providers, and the app will have a short wake-up time when not visited for a while @@ -130,8 +144,8 @@ To deploy Dashy to Heroku, use the following link https://heroku.com/deploy?template=https://github.com/Lissy93/dashy ``` -#### Cloudflare Workers -[![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/lissy93/dashy/tree/deploy_cloudflare) +#### Cloudflare Workers +[![Deploy to Cloudflare Workers](https://i.ibb.co/jf9xVdm/deploy-cloudflare-button.png)](https://deploy.workers.cloudflare.com/?url=https://github.com/lissy93/dashy/tree/deploy_cloudflare) [Cloudflare Workers](https://workers.cloudflare.com/) is a simple yet powerful service for running cloud functions and hosting web content. It requires a Cloudflare account, but is completely free for smaller projects, and very reasonably priced ($0.15/million requests per month) for large applications. You can use your own domain, and applications are protected with Cloudflare's state of the art DDoS protection. For more info, see the docs on [Worker Sites](https://developers.cloudflare.com/workers/platform/sites) @@ -140,8 +154,8 @@ To deploy Dashy to Cloudflare, use the following link https://deploy.workers.cloudflare.com/?url=https://github.com/lissy93/dashy/tree/deploy_cloudflare ``` -#### Vercel -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/project?template=https://github.com/lissy93/dashy) +#### Vercel +[![Deploy with Vercel](https://i.ibb.co/mJF3R7m/deploy-vercel-button.png)](https://vercel.com/new/project?template=https://github.com/lissy93/dashy) [Vercel](https://vercel.com/) is a performance-focused platform for hosting static frontend apps. It comes bundled with some useful tools for monitoring and anaylzing application performance and other metrics. Vercel is free for personal use, allows for custom domains and has very reasonable limits. @@ -150,8 +164,8 @@ To deploy Dashy to Vercel, use the following link https://vercel.com/new/project?template=https://github.com/lissy93/dashy ``` -#### DigitalOcean -[![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/lissy93/dashy/tree/deploy_digital-ocean&refcode=3838338e7f79) +#### DigitalOcean +[![Deploy to DO](https://i.ibb.co/PFt0PkB/deploy-digital-ocean-button.png)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/lissy93/dashy/tree/deploy_digital-ocean&refcode=3838338e7f79) [DigitalOcan](https://www.digitalocean.com/) is a cloud service providing affordable developer-friendly virtual machines from $5/month. But they also have an app platform, where you can run web apps, static sites, APIs and background workers. CDN-backed static sites are free for personal use. @@ -159,8 +173,8 @@ https://vercel.com/new/project?template=https://github.com/lissy93/dashy https://cloud.digitalocean.com/apps/new?repo=https://github.com/lissy93/dashy/tree/deploy_digital-ocean ``` -#### Google Cloud Platform -[![Run on Google Cloud](https://deploy.cloud.run/button.svg)](https://deploy.cloud.run/?git_repo=https://github.com/lissy93/dashy.git) +#### Google Cloud Platform +[![Run on Google Cloud](https://i.ibb.co/LkvHttd/deploy-google-cloud-button.png)](https://deploy.cloud.run/?git_repo=https://github.com/lissy93/dashy.git) [Cloud Run](https://cloud.google.com/run/) is a service offered by [Google Cloud](https://cloud.google.com/). It's a fully managed serverless platform, for developing and deploying highly scalable containerized applications. Similar to AWS and Azure, GCP offers a wide range of cloud services, which are billed on a payβperβuse basis, but Cloud Run has a [free tier](https://cloud.google.com/run/pricing) offering 180,000 vCPU-seconds, 360,000 GiB-seconds, and 2 million requests per month. @@ -169,8 +183,8 @@ To deploy Dashy to GCP, use the following link https://deploy.cloud.run/?git_repo=https://github.com/lissy93/dashy.git ``` -#### Platform.sh -[![Deploy to Platform.sh](https://platform.sh/images/deploy/deploy-button-lg-blue.svg)](https://console.platform.sh/projects/create-project/?template=https://github.com/lissy93/dashy&utm_campaign=deploy_on_platform?utm_medium=button&utm_source=affiliate_links&utm_content=https://github.com/lissy93/dashy) +#### Platform.sh +[![Deploy to Platform.sh](https://i.ibb.co/nPnJgJP/deploy-platform-sh-button.png)](https://console.platform.sh/projects/create-project/?template=https://github.com/lissy93/dashy&utm_campaign=deploy_on_platform?utm_medium=button&utm_source=affiliate_links&utm_content=https://github.com/lissy93/dashy) [Platform.sh](https://platform.sh) is an end-to-end solution for developing and deploying applications. It is geared towards enterprise users with large teams, and focuses on allowing applications to scale up and down. Unlike the above providers, Platform.sh is not free, although you can deploy a test app to it without needing a payment method @@ -179,8 +193,8 @@ To deploy Dashy to Platform.sh, use the following link https://console.platform.sh/projects/create-project/?template=https://github.com/lissy93/dashy ``` -#### Render -[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/lissy93/dashy/tree/deploy_render) +#### Render +[![Deploy to Render](https://i.ibb.co/QXNCbxT/deploy-render-button.png)](https://render.com/deploy?repo=https://github.com/lissy93/dashy/tree/deploy_render) [Render](https://render.com) is cloud provider that provides easy deployments for static sites, Docker apps, web services, databases and background workers. Render is great for developing applications, and very easy to use. Static sites are free, and services start at $7/month. Currently there are only 2 server locations - Oregon, USA and Frankfurt, Germany. For more info, see the [Render Docs](https://render.com/docs) @@ -189,8 +203,8 @@ To deploy Dashy to Render, use the following link https://render.com/deploy?repo=https://github.com/lissy93/dashy/tree/deploy_render ``` -#### Scalingo -[![Deploy on Scalingo](https://cdn.scalingo.com/deploy/button.svg)](https://my.scalingo.com/deploy?source=https://github.com/lissy93/dashy#master) +#### Scalingo +[![Deploy on Scalingo](https://i.ibb.co/nj0KxyH/deploy-scalingo-button.png)](https://my.scalingo.com/deploy?source=https://github.com/lissy93/dashy#master) [Scalingo](https://scalingo.com/) is a scalable container-based cloud platform as a service. It's focus is on compliance and uptime, and is geared towards enterprise users. Scalingo is also not free, although they do have a 3-day free trial that does not require a payment method @@ -199,8 +213,8 @@ To deploy Dashy to Scalingo, use the following link https://my.scalingo.com/deploy?source=https://github.com/lissy93/dashy#master ``` -#### Play-with-Docker -[![Try in PWD](https://raw.githubusercontent.com/play-with-docker/stacks/cff22438/assets/images/button.png)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml) +#### Play-with-Docker +[![Try in PWD](https://i.ibb.co/SfbH7Zy/deploy-pwd-button.png)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml) [Play with Docker](https://labs.play-with-docker.com/) is a community project by Marcos Liljedhal and Jonathan Leibiusky and sponsored by Docker, intended to provide a hands-on learning environment. Their labs let you quickly spin up a Docker container or stack, and test out the image in a temporary, sandboxed environment. There's no need to sign up, and it's completely free. @@ -209,9 +223,10 @@ To run Dashy in PWD, use the following URL: https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml ``` -#### Surge.sh -[Surge.sh](http://surge.sh/) is quick and easy static web publishing platform for frontend-apps. +#### Surge.sh +![Follow instructions below](https://i.ibb.co/XkcKzKz/deploy-surge-button.png) +[Surge.sh](http://surge.sh/) is quick and easy static web publishing platform for frontend-apps. Surge supports [password-protected projects](https://surge.sh/help/adding-password-protection-to-a-project). You can also [add a custom domain](https://surge.sh/help/adding-a-custom-domain) and then [force HTTPS by default](https://surge.sh/help/using-https-by-default) and optionally [set a custom SSL certificate](https://surge.sh/help/securing-your-custom-domain-with-ssl) To deploy Dashy to Surge.sh, first clone and cd into Dashy, install dependencies, and then use the following commands diff --git a/developing.md b/developing.md index ef9186b..d1249b6 100644 --- a/developing.md +++ b/developing.md @@ -18,7 +18,7 @@ You will need either the latest or LTS version of **[Node.js](https://nodejs.org ### Running the Project -1. Get Code: `git clone git@github.com:Lissy93/dashy.git` +1. Get Code: `git clone https://github.com/Lissy93/dashy.git` 2. Navigate into the directory: `cd dashy` 3. Install dependencies: `yarn` 4. Start dev server: `yarn dev` @@ -154,7 +154,7 @@ As well as Node, Git and Docker- you'll also need an IDE (e.g. [VS Code](https:/ ## Style Guide -Linting is done using [ESLint](https://eslint.org/), and using the [Vue.js Styleguide](https://github.com/vuejs/eslint-config-standard), which is very similar to the [AirBnB Stylguide](https://github.com/airbnb/javascript). You can run `yarn lint` to report and fix issues. While the dev server is running, issues will be reported to the console automatically. Any lint errors will trigger the build to fail. Note that all lint checks must pass before any PR can be merged. Linting is also run as a git pre-commit hook +Linting is done using [ESLint](https://eslint.org/), and using the [Vue.js Styleguide](https://github.com/vuejs/eslint-config-standard), which is very similar to the [AirBnB Stylguide](https://github.com/airbnb/javascript). You can run `yarn lint` to report and fix issues. While the dev server is running, issues will be reported to the console automatically, and any lint errors will trigger the build to fail. Note that all lint checks must pass before any PR can be merged. Linting is also run as a git pre-commit hook The most significant things to note are: - Indentation should be done with two spaces @@ -167,7 +167,9 @@ The most significant things to note are: - All multiline blocks must use braces - Avoid console statements in the frontend -For the full styleguide, see: [github.com/airbnb/javascript](https://github.com/airbnb/javascript) +Styleguides: +- Vue: [Vue styleguide](https://vuejs.org/v2/style-guide/) +- JavaScript: [github.com/airbnb/javascript](https://github.com/airbnb/javascript) --- @@ -229,7 +231,7 @@ For the full styleguide, see: [github.com/airbnb/javascript](https://github.com/ β β βββ Nav.vue # Navigation bar, includes a list of links β β β°ββ PageTitle.vue # Page title and sub-title, visible within the Header β β°ββ Settings # Components relating to the quick-settings, in the top-right -β βββ AppButtons.vue # Logout button and other app info +β βββ AuthButtons.vue # Logout button and other app info β βββ ConfigLauncher.vue # Icon that when clicked will launch the Configuration component β βββ CustomThemeMaker.vue # Color pickers for letting user build their own theme β βββ ItemSizeSelector.vue # Set of buttons used to set and save item size diff --git a/development-guides.md b/development-guides.md index 72022f2..c31cf81 100644 --- a/development-guides.md +++ b/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 + |