[FEATURE] Localization, adds multi-language support

README.md

@@ -29,6 +29,7 @@
 - Easy single-file YAML-based configuration, which can also be configured directly through the UI
 - Small bundle size, fully responsive UI and PWA makes the app easy to use on any device
 - Easy to setup with Docker, or on bare metal, or with 1-Click cloud deployment
+- Multi-language support, with additional languages coming soon
 - Plus lots more...
 
 ## Demo ⚡
@@ -304,6 +305,21 @@ From the Settings Menu in Dashy, you can download, backup, edit and rest your co
 
 ---
 
+## Language Switching 🌎
+
+Dashy has the ability to support multiple languages and locales. When available, you're language should be automatically detected and applied on load, based on your browser or systems settings. But you can also select a language through the UI, under Config --> Switch Language.
+
+Alternatively, set you're language in the config file, under `appConfig.language`. The language must be specified as either a 2-digit [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) (such as `en`), or where available, the 2-digit code followed by a region or dialect (e.g. `en-GB`).
+
+#### Supported Languages
+- 🇬🇧 **English**: `en`
+
+#### Add your Language
+I would love for Dashy to be available and comfortable to use for all, including non-native English speakers. If you speak another language, and have a few minutes to sapir, you're help with translating it would be very much appreciated.
+There's not too much text to translate, 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 [Development Guides Docs](https://github.com/Lissy93/dashy/blob/master/docs/development-guides.md#adding-translations), and feel free to reach out if you need any support.
+
+---
+
 ## Sections & Items 🗃️
 
 Dashy is made up of a series of sections, each containing a series of items.

docs/configuring.md

@@ -54,6 +54,7 @@ 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.
 **`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

docs/developing.md

@@ -1,22 +1,22 @@
 
-## Developing
+# Developing
 
-This article outlines how to get Dashy running in a development environment, and outlines the basics of the architecture. 
+This article outlines how to get Dashy running in a development environment, and outlines the basics of the architecture.
+If you're adding new features, you may want to check out the [Development Guides](./docs/development-guides.md) docs, for tutorials covering basic tasks.
 
 - [Setting up the Development Environment](#setting-up-the-dev-environment)
 - [Resources for Beginners](#resources-for-beginners)
 - [Style Guide](#style-guide)
 - [Frontend Components](#frontend-components)
-- [Common Tasks](#common-tasks)
 - [Project Structure](#directory-structure)
 - [Dependencies and Packages](#dependencies-and-packages)
 
-### Setting up the Dev Environment
+## Setting up the Dev Environment
 
-#### Prerequisites
+### Prerequisites
 You will need either the latest or LTS version of **[Node.js](https://nodejs.org/)** to build and serve the application and **[Git](https://git-scm.com/downloads)** to easily fetch the code, and push any changes. If you plan on running or deploying the container, you'll also need **[Docker](https://docs.docker.com/get-docker/)**. To avoid any unexpected issues, ensure you've got at least **[NPM](https://www.npmjs.com/get-npm)** V 7.5 or **[Yarn](https://classic.yarnpkg.com/en/docs/install/#windows-stable)** 1.22 (you may find [NVM](https://github.com/nvm-sh/nvm) helpful for switching/ managing versions).
 
-#### Running the Project
+### Running the Project
 
 1. Get Code: `git clone git@github.com:Lissy93/dashy.git`
 2. Navigate into the directory: `cd dashy`
@@ -25,7 +25,7 @@ You will need either the latest or LTS version of **[Node.js](https://nodejs.org
 
 Dashy should now be being served on http://localhost:8080/. Hot reload is enabled, so making changes to any of the files will trigger them to be rebuilt and the page refreshed.
 
-#### Project Commands
+### Project Commands
 
 - `yarn dev` - Starts the development server with hot reloading
 - `yarn build` - Builds the project for production, and outputs it into `./dist`
@@ -47,7 +47,7 @@ Note:
 - If you are using NPM, replace `yarn` with `npm run`
 - If you are using Docker, precede each command with `docker exec -it [container-id]`. Container ID can be found by running `docker ps`
 
-### Environmental Variables
+## Environmental Variables
 - `PORT` - The port in which the application will run (defaults to `4000` for the Node.js server, and `80` within the Docker container)
 - `NODE_ENV` - Which environment to use, either `production`, `development` or `test`
 - `VUE_APP_DOMAIN` - The URL where Dashy is going to be accessible from. This should include the protocol, hostname and (if not 80 or 443), then the port too, e.g. `https://localhost:3000`, `http://192.168.1.2:4002` or `https://dashy.mydomain.com`
@@ -58,7 +58,7 @@ If you do add new variables, ensure that there is always a fallback (define it i
 
 Any environmental variables used by the frontend are preceded with `VUE_APP_`. Vue will merge the contents of your `.env` file into the app in a similar way to the ['dotenv'](https://github.com/motdotla/dotenv) package, where any variables that you set on your system will always take preference over the contents of any `.env` file.
 
-### Environment Modes
+## Environment Modes
 Both the Node app and Vue app supports several environments: `production`, `development` and `test`. You can set the environment using the `NODE_ENV` variable (either with your OS, in the Docker script or in an `.env` file - see [Environmental Variables](#environmental-variables) above).
 
 The production environment will build the app in full, minifying and streamlining all assets. This means that building takes longer, but the app will then run faster. Whereas the dev environment creates a webpack configuration which enables HMR, doesn't hash assets or create vendor bundles in order to allow for fast re-builds when running a dev server. It supports sourcemaps and other debugging tools, re-compiles and reloads quickly but is not optimized, and so the app will not be as snappy as it could be. The test environment is intended for test running servers, it ignores assets that aren't needed for testing, and focuses on running all the E2E, regression and unit tests. For more information, see [Vue CLI Environment Modes](https://cli.vuejs.org/guide/mode-and-env.html#modes).
@@ -67,7 +67,7 @@ By default:
 - `production` is used by `yarn build` (or `vue-cli-service build`) and `yarn build-and-start` and `yarn pm2-start`
 - `development` is used by `yarn dev` (or `vue-cli-service serve`)
 - `test` is used by `yarn test` (or `vue-cli-service test:unit`)
-### Resources for Beginners
+## Resources for Beginners
 New to Web Development? Glad you're here! Dashy is a pretty simple app, so it should make a good candidate for your first PR. Presuming that you already have a basic knowledge of JavaScript, the following articles should point you in the right direction for getting up to speed with the technologies used in this project:
 - [Introduction to Vue.js](https://v3.vuejs.org/guide/introduction.html)
 - [Vue.js Walkthrough](https://www.taniarascia.com/getting-started-with-vue/)
@@ -82,7 +82,7 @@ New to Web Development? Glad you're here! Dashy is a pretty simple app, so it sh
 
 As well as Node, Git and Docker- you'll also need an IDE (e.g. [VS Code](https://code.visualstudio.com/) or [Vim](https://www.vim.org/)) and a terminal (Windows users may find [WSL](https://docs.microsoft.com/en-us/windows/wsl/) more convenient). 
 
-### Style Guide
+## 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
 
@@ -99,7 +99,7 @@ The most significant things to note are:
 
 For the full styleguide, see: [github.com/airbnb/javascript](https://github.com/airbnb/javascript) 
 
-### Frontend Components
+## Frontend Components
 
 All frontend code is located in the `./src` directory, which is split into 5 sub-folders:
 - Components - All frontend web components are located here. Each component should have a distinct, well defined and simple task, and ideally should not be too long. The components directory is organised into a series of sub-directories, representing a specific area of the application
@@ -116,37 +116,21 @@ The structure of the components directory is similar to that of the frontend app
 
 <p align="center"><img src="https://i.ibb.co/wJCt0Lq/dashy-page-structure.png" width="600"/></p>
 
-### Common Tasks
-
-#### Creating a new theme
-
-See [Theming](./theming.md)
-
-#### Adding a new option in the config file
-
-All application config is specified in `./public/conf.yml` - see [Configuring Docs](./configuring.md) for info. Before adding a new option in the config file, first ensure that there is nothing similar available, that is is definitely necessary, it will not conflict with any other options and most importantly that it will not cause any breaking changes. Ensure that you choose an appropriate and relevant section to place it under.
-
-Checklist:
-- Update the [Schema](https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.js) with the parameters for your new option
-- Set a default value (if required) within [`defaults.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js)
-- Document the new value in [`configuring.md`](./configuring.md)
-- Test that the reading of the new attribute is properly handled, and will not cause any errors when it is missing or populated with an unexpected value
-
-#### Updating Dependencies
+### 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.
 
-### Development Tools
+## Development Tools
 
-#### Performance - Lighthouse
+### Performance - Lighthouse
 The easiest method of checking performance is to use Chromium's build in auditing tool, Lighthouse. To run the test, open Developer Tools (usually F12) --> Lighthouse and click on the 'Generate Report' button at the bottom.
 
-#### Dependencies - BundlePhobia
+### Dependencies - BundlePhobia
 [BundlePhobia](https://bundlephobia.com/) is a really useful app that lets you analyze the cost of adding any particular dependency to an application
 
-### Directory Structure
+## Directory Structure
 
-#### Files in the Root: `./`
+### Files in the Root: `./`
 ```
 ╮
 ├── package.json        # Project meta-data, dependencies and paths to scripts
@@ -163,7 +147,7 @@ The easiest method of checking performance is to use Chromium's build in auditin
 ╯
 ```
 
-#### Frontend Source: `./src/`
+### Frontend Source: `./src/`
 
 ```
 ./src
@@ -219,17 +203,17 @@ The easiest method of checking performance is to use Chromium's build in auditin
 ```
 ---
 
-### Dependencies and Packages
+## Dependencies and Packages
 
 During development I made the conscious decision to not reinvent the wheel if not necessary. It is often really tempting to try an build everything yourself, but sometimes it's just not practical. Often there's packages out there, developed by amazing individuals which are probably built better than I could have done. That being said, I have looked through the code of most these dependencies, to verify that they are both legitimate and efficient.
 
 The following packages are used. Full credit, and massive kudos to each of their authors.
 
-#### Core
+### 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.
 
-#### Frontend Components
+### Frontend Components
 
 - [`vue-select`](https://github.com/sagalbot/vue-select) - Dropdown component by @sagalbot `MIT`
 - [`vue-js-modal`](https://github.com/euvl/vue-js-modal) - Modal component by @euvl `MIT`
@@ -241,23 +225,23 @@ At it's core, the application uses [Vue.js](https://github.com/vuejs/vue), as we
 - [`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`
 
-#### Utilities
+### Utilities
 
 - [`crypto-js`](https://github.com/brix/crypto-js) - Encryption implementations by @evanvosberg and community `MIT`
 - [`axios`](https://github.com/axios/axios) - Promise based HTTP client by @mzabriskie and community `MIT`
 - [`ajv`](https://github.com/ajv-validator/ajv) - JSON schema Validator by @epoberezkin and community `MIT`
 
-#### Server
+### Server
 
 - [`connect`](https://github.com/senchalabs/connect) - Minimilistic middleware layer for chaining together Node.js requests handled by the server file `MIT`
 - [`serve-static`](https://github.com/expressjs/serve-static) - Lightweight static Node file server `MIT`
 
-##### External Services
+#### 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/).
 
-### Notes
+## Notes
 
-#### Known Warnings
+### Known Warnings
 
 When running the build command, several warnings appear. These are not errors, and do not affect the security or performance of the application. They will be addressed in a future update