mirror of
https://github.com/Lissy93/dashy.git
synced 2024-12-23 08:52:28 +03:00
🍻 Death by documentation... This will need spell checking in the morning
This commit is contained in:
parent
8b8bfcfca1
commit
99265d9241
7
docs/assets/sponsor-button.svg
Normal file
7
docs/assets/sponsor-button.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg width="223px" height="30px" version="1.1" viewBox="0 0 223 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Artboard</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<rect id="Rectangle" width="223" height="30" rx="8" fill="#ff5e5b" style="fill-rule:evenodd;fill:#ff8eff"/>
|
||||
<path d="m19.011 10.912c0.57462-1.6874 1.9364-2.531 4.0853-2.531 3.2234 0 4.4184 4.0247 2.7288 6.6559-1.1264 1.7541-3.3978 3.9728-6.8141 6.6559-3.4163-2.6832-5.6877-4.9018-6.8141-6.6559-1.6896-2.6312-0.49462-6.6559 2.7288-6.6559 2.1489 0 3.5107 0.84368 4.0853 2.531z" fill="#ff5e5b" style="fill:none;stroke-width:1.5;stroke:#fff"/>
|
||||
<text x="55" y="20" style="fill:#ffffff;font-family:sans-serif;font-size:16px;letter-spacing:0px;line-height:1.25;word-spacing:0px" xml:space="preserve"><tspan x="31.423412" y="20.493532" style="fill:#ffffff;font-size:16px">Sponsor me on Github</tspan></text>
|
||||
</svg>
|
After Width: | Height: | Size: 879 B |
@ -1,131 +1,49 @@
|
||||
# Contributing
|
||||
|
||||
First off, thank you for considering contributing towards Dashy! 🙌
|
||||
There are several ways that you can help out (but don't feel you have to).
|
||||
Any contributions, every contribution, however small will always be very much appreciated, and you will be appropriately credited in the readme - huge thank you to everyone who has helped so far.
|
||||
|
||||
## Submit a PR
|
||||
Contributing to the code or documentation is super helpful. You can fix a bug, add a new feature or improve an existing one. I've written [several guides](https://github.com/Lissy93/dashy/blob/master/docs/development-guides.md) with step-by-step tutorials of common tasks within Dashy. And I've tried to keep the code neat and documentation thorough, so understanding what everything does should be fairly straight forward, but feel free to ask if you have any questions.
|
||||
|
||||
## Add Translations
|
||||
If you speak another language, then adding translations would be really helpful, and you will be credited in the readme for your work. Multi-language support makes Dashy accessible for non-English speakers, which I feel is important. This is a very quick and easy task, , as all application text is located in [`locales/en.json`](https://github.com/Lissy93/dashy/blob/master/src/assets/locales/en.json), so adding a new language is as simple as copying this file and translating the values. You don't have to translate it all, as any missing attributes will just fallback to English. For a full tutorial, see the [Translating Docs](https://github.com/Lissy93/dashy/blob/master/docs/development-guides.md#adding-translations).
|
||||
|
||||
|
||||
First off, thank you for considering contributing to Dashy! There are two main ways you can help out: [Submitting a Pull Request](#submitting-a-pr) or [Raising an Issue](#raising-an-issue).
|
||||
## Raise a bug
|
||||
If you've found a bug, then please do raise it as an issue. This will help me know if there's something that needs fixing. Try and include as much detail as possible, such as your environment, steps to reproduce, any console output and maybe an example screenshot or recording if necessary. You can [Raise a Bug here](https://github.com/Lissy93/dashy/issues/new?assignees=Lissy93&labels=%F0%9F%90%9B+Bug&template=bug-report---.md&title=%5BBUG%5D) 🐛.
|
||||
|
||||
### Submitting a PR
|
||||
## Join the discussion
|
||||
I've enabled the discussion feature on GitHub, here you can share tips and tricks, useful information, or your dashboard. You can also ask questions, and offer basic support to other users.
|
||||
|
||||
Pull requests are proposed code changes, that can then be directly merged into Dashy's master branch and deployed to users. Even a small PR would be a big help.
|
||||
## Share your dashboard
|
||||
Dashy now has a [Showcase](https://github.com/Lissy93/dashy/blob/master/docs/showcase.md#dashy-showcase-) where you can show off a screenshot of your dashboard, and get inspiration from other users. I also really enjoy seeing how people are using Dashy. To [submit your dashboard](https://github.com/Lissy93/dashy/blob/master/docs/showcase.md#submitting-your-dashboard), please either open a PR or raise an issue.
|
||||
|
||||
Not sure what to work on? Here are some ideas:
|
||||
- Fix a bug, or solve an open issue
|
||||
- Improve the docs
|
||||
- Add a new theme
|
||||
- Implement a new widget
|
||||
- Add more display options
|
||||
- Refactor or improve an area of the code
|
||||
- Implement a new feature, or improve an existing one
|
||||
## Spread the word
|
||||
Dashy is still a relatively young project, and as such not many people know of it. It would be great to see more users, and so it would be awesome if you could consider sharing on social platforms.
|
||||
|
||||
Before you submit your pull request, please ensure the following:
|
||||
- Must be backwards compatible
|
||||
- All lint checks and tests must pass
|
||||
- If a new option in the the config file is added, it needs to be added into the schema, and documented in the configuring guide
|
||||
- If a new dependency is required, it must be essential, and it must be thoroughly checked out for security or efficiency issues
|
||||
## Leave a review
|
||||
Dashy is on the following platforms, and if you could spare a few seconds to give it an upvote or review, this will also help new users find it.
|
||||
- [ProductHunt](https://www.producthunt.com/posts/dashy)
|
||||
- DockerHub
|
||||
- GitHub
|
||||
|
||||
Please also include the following information in your PR:
|
||||
- PR type (bug fix, feature, code style updates, documentation, etc)
|
||||
- Issue number (if applicable)
|
||||
- A brief description of your changes
|
||||
- A note confirming that your code follows the checklist (above)
|
||||
## Make a small donation
|
||||
|
||||
#### Getting Started
|
||||
Please only do this is you can definitely afford to. Don't feel any pressure to donate anything, as Dashy and my other projects will always be 100% free, for everyone, for ever.
|
||||
|
||||
To set up your development environment, and get Dashy running locally, please see: [Developing Docs](/docs/developing.md)
|
||||
[![Sponsor Lissy93 on GitHub]()](https://github.com/sponsors/Lissy93)
|
||||
|
||||
#### For new Contributors
|
||||
Sponsoring will give you several perks, from $1 / £0.70 per month, as well as a sponsor badge on your profile, you can also be credited on the readme, with a link to your website/ profile/ socials, get priority support, have your feature ideas implemented, plus lots more. For more info, see [@Lissy93's Sponsor Page](https://github.com/sponsors/Lissy93).
|
||||
|
||||
If you have never created a pull request before, welcome :tada: :smile: [Here is a great tutorial](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
|
||||
on how to create a pull request..
|
||||
You can also send one-off small contriutions using crypto:
|
||||
- **BTC**: `3853bSxupMjvxEYfwGDGAaLZhTKxB2vEVC`
|
||||
- **ETH**: `0x0fc98cBf8bea932B4470C46C0FbE1ed1f6765017` / `aliciasykes.eth`
|
||||
- **XMR**: `471KZdxb6N63aABR4WYwMRjTVkc1p1x7wGsUTEF7AMYzL8L94A5pCuYWkosgJQ5Ze8Y2PscVCGZFJa3hDPg6MaDq47GUm8r`
|
||||
|
||||
1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
|
||||
and configure the remotes:
|
||||
|
||||
```bash
|
||||
# Clone your fork of the repo into the current directory
|
||||
git clone https://github.com/<your-username>/<repo-name>
|
||||
# Navigate to the newly cloned directory
|
||||
cd <repo-name>
|
||||
# Assign the original repo to a remote called "upstream"
|
||||
git remote add upstream https://github.com/hoodiehq/<repo-name>
|
||||
```
|
||||
|
||||
2. If you cloned a while ago, get the latest changes from upstream:
|
||||
|
||||
```bash
|
||||
git checkout master
|
||||
git pull upstream master
|
||||
```
|
||||
|
||||
3. Create a new topic branch (off the main project development branch) to
|
||||
contain your feature, change, or fix:
|
||||
|
||||
```bash
|
||||
git checkout -b <topic-branch-name>
|
||||
```
|
||||
|
||||
4. Make sure to update, or add to the tests when appropriate. Patches and
|
||||
features will not be accepted without tests. Run `yarn test` to check that
|
||||
all tests pass after you've made changes, and `yarn lint` for linting.
|
||||
|
||||
```bash
|
||||
git add ./path/to/modified/files
|
||||
git commit -m "Fixed #xx by doing xyz"
|
||||
```
|
||||
|
||||
5. If you added or changed a feature, make sure to document it accordingly in
|
||||
the docs and if applicable, in the `README.md` file.
|
||||
|
||||
6. Push your topic branch up to your fork:
|
||||
|
||||
```bash
|
||||
git push origin <topic-branch-name>
|
||||
```
|
||||
|
||||
8. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
|
||||
with a clear title and description.
|
||||
|
||||
You can use emojis in your commit message, to indicate the category of the task.
|
||||
For a reference of what each emoji means in the context of commits, see [gitmoji.dev](https://gitmoji.dev/).
|
||||
|
||||
#### Testing the Production App
|
||||
|
||||
For larger pull requests, please also check that it works as expected in a production environment.
|
||||
|
||||
Testing production app in development environment:
|
||||
- Natively
|
||||
- Build: `yarn build`
|
||||
- Run: `yarn start`
|
||||
- With Docker:
|
||||
- Build: `docker build -t dashy .`
|
||||
- Run: `docker run -p 8080:80 dashy`
|
||||
|
||||
Please also ensure that running the following scripts return no errors:
|
||||
- `yarn lint`
|
||||
- `yarn test`
|
||||
- `yarn validate-config`
|
||||
|
||||
A good resource for testing the Docker image on a totally fresh system, is by using [Play with Docker](https://labs.play-with-docker.com/). This will let you clone or pull your image, and spin up a container. This is useful for checking that everything behaves as it should on an independent system, and should get around the _'works on my computer'_ issue.
|
||||
|
||||
All required checks will be run as a git-hook after doing a git commit. If you have any issues wit this, it can be disabled with the `--no-verify` flag
|
||||
|
||||
#### Merging a PR
|
||||
|
||||
Only maintainers can merge a PR. A pull request can only be merged if:
|
||||
- All CI checks are passing
|
||||
- It has been approved by either the author, or at least two maintainers
|
||||
- It has no requested changes
|
||||
- It is up to date with current master
|
||||
|
||||
---
|
||||
|
||||
### Raising an Issue
|
||||
|
||||
If you've found a bug, or something that isn't working as you'd expect, please raise an issue, so that it can be resolved. If you're having trouble getting things up and running, feel free to ask a question. Feature requests and feedback are also welcome, as it helps Dashy improve.
|
||||
|
||||
Click one of the links below, to open an issue:
|
||||
- [Raise a Bug 🐛](https://github.com/Lissy93/dashy/issues/new?assignees=Lissy93&labels=%F0%9F%90%9B+Bug&template=bug-report---.md&title=%5BBUG%5D) - Found a bug, or something not working as it should?
|
||||
- [Submit a Feature Request 🦄](https://github.com/Lissy93/dashy/issues/new?assignees=Lissy93&labels=%F0%9F%A6%84+Feature+Request&template=feature-request---.md&title=%5BFEATURE_REQUEST%5D) - Is there a feature that you think is missing from Dashy?
|
||||
- [Ask a Question 🤷♀️](https://github.com/Lissy93/dashy/issues/new?assignees=Lissy93&labels=%F0%9F%A4%B7%E2%80%8D%E2%99%82%EF%B8%8F+Question&template=question------.md&title=%5BQUESTION%5D) - Got a question about using, building or developing Dashy?
|
||||
- [Share Feedback 🌈](https://github.com/Lissy93/dashy/issues/new?assignees=&labels=%F0%9F%8C%88+Feedback&template=share-feedback---.md&title=%5BFEEDBACK%5D) - Got any thoughts on the current or future development of Dashy?
|
||||
## Request a feature via BountySource
|
||||
|
||||
---
|
||||
|
||||
|
0
docs/credits.md
Normal file
0
docs/credits.md
Normal file
@ -47,18 +47,22 @@ 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
|
||||
All environmental variables are optional. Currently there are not many environmental variables used, as most of the user preferences are stored under `appConfig` in the `conf.yml` file.
|
||||
|
||||
You can set variables within your local development environment using a `.env` file.
|
||||
|
||||
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.
|
||||
|
||||
- `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`
|
||||
|
||||
All environmental variables are optional. Currently there are not many environmental variables used, as most of the user preferences are stored under `appConfig` in the `conf.yml` file.
|
||||
|
||||
If you do add new variables, ensure that there is always a fallback (define it in [`defaults.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js)), so as to not cause breaking changes. Don't commit your `.env` file to git, but instead take a few moments to document what you've added under the appropriate section. Try and follow the concepts outlined in the [12 factor app](https://12factor.net/config), as these are good practices.
|
||||
If you do add new variables, ensure that there is always a fallback (define it in [`defaults.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js)), so as to not cause breaking changes. Don't commit your `.env` file to git, but instead take a few moments to document what you've added under the appropriate section. Try and follow the concepts outlined in the [12 factor app](https://12factor.net/config).
|
||||
|
||||
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,6 +71,70 @@ 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`)
|
||||
|
||||
---
|
||||
|
||||
## Git Strategy
|
||||
|
||||
### Git Flow
|
||||
Like most Git repos, we are following the [Github Flow](https://guides.github.com/introduction/flow) standard.
|
||||
|
||||
1. Create a branch (or fork if you don'd have write acces)
|
||||
2. Code some awesome stuff, then add and commit your changes
|
||||
3. Create a Pull Request, complete the checklist and ensure the build succeeds
|
||||
4. Follow up with any reviews on your code
|
||||
5. Merge 🎉
|
||||
|
||||
### Git Branch Naming
|
||||
The format of your branch name should be something similar to: `[TYPE]/[TICKET]_[TITLE]`
|
||||
For example, `FEATURE/420_Awesome-feature` or `FIX/690_login-server-error`
|
||||
|
||||
### Commit Emojis
|
||||
Using a single emoji at the start of each commit message, to indicate the type task, makes the commit ledger easier to understand, plus it looks cool.
|
||||
|
||||
- 🎨 `:art:` - Improve structure / format of the code.
|
||||
- ⚡️ `:zap:` - Improve performance.
|
||||
- 🔥 `:fire:` - Remove code or files.
|
||||
- 🐛 `:bug:` - Fix a bug.
|
||||
- 🚑️ `:ambulance:` - Critical hotfix
|
||||
- ✨ `:sparkles:` - Introduce new features.
|
||||
- 📝 `:memo:` - Add or update documentation.
|
||||
- 🚀 `:rocket:` - Deploy stuff.
|
||||
- 💄 `:lipstick:` - Add or update the UI and style files.
|
||||
- 🎉 `:tada:` - Begin a project.
|
||||
- ✅ `:white_check_mark:` - Add, update, or pass tests.
|
||||
- 🔒️ `:lock:` - Fix security issues.
|
||||
- 🔖 `:bookmark:` - Make a Release or Version tag.
|
||||
- 🚨 `:rotating_light:` - Fix compiler / linter warnings.
|
||||
- 🚧 `:construction:` - Work in progress.
|
||||
- ⬆️ `:arrow_up:` - Upgrade dependencies.
|
||||
- 👷 `:construction_worker:` - Add or update CI build system.
|
||||
- ♻️ `:recycle:` - Refactor code.
|
||||
- 🩹 `:adhesive_bandage:` - Simple fix for a non-critical issue.
|
||||
- 🔧 `:wrench:` - Add or update configuration files.
|
||||
- 🍱 `:bento:` - Add or update assets.
|
||||
- 🗃️ `:card_file_box:` - Perform database schema related changes.
|
||||
- ✏️ `:pencil2:` - Fix typos.
|
||||
- 🌐 `:globe_with_meridians:` - Internationalization and translations.
|
||||
|
||||
For a full list of options, see [gitmoji.dev](https://gitmoji.dev/)
|
||||
|
||||
### PR Guidelines
|
||||
Once you've made your changes, and pushed them to your fork or branch, you're ready to open a pull request!
|
||||
|
||||
For a pull request to be merged, it must:
|
||||
- Must be backwards compatible
|
||||
- The build, lint and tests (run by GH actions) must pass
|
||||
- There must not be any merge conflicts
|
||||
|
||||
When you submit your PR, include the required info, by filling out the PR template. Including:
|
||||
- A brief description of your changes
|
||||
- The issue, ticket or discussion number (if applicable)
|
||||
- For UI relate updates include a screenshot
|
||||
- If any dependencies were added, explain why it was needed, state the cost associated, and confirm it does not introduce any security issues
|
||||
- Finally, check the checkboxes, to confirm that the standards are met, and hit submit!
|
||||
|
||||
---
|
||||
## 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)
|
||||
@ -82,6 +150,8 @@ 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
|
||||
|
||||
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,38 +169,13 @@ The most significant things to note are:
|
||||
|
||||
For the full styleguide, see: [github.com/airbnb/javascript](https://github.com/airbnb/javascript)
|
||||
|
||||
## 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
|
||||
- PageStrcture - Components relating to overall page structure (nav, footer, etc)
|
||||
- FormElements - Reusable form elements (button, input field, etc)
|
||||
- LinkItems - Components relating to Dashy's sections and items (item group, item, item icon, etc)
|
||||
- Configuration - Components relating to Dashy's configuration forms (cloud backup, JSON editor, etc)
|
||||
- Views - Each view directly corresponds to a route (defined in the router), and in effectively a page. They should have minimal logic, and just contain a few components
|
||||
- Utils - These are helper functions, or logic that is used within the app does not include an UI elements
|
||||
- Styles - Any SCSS that is used globally throughout that app, and is not specific to a single component goes here. This includes variables, color themes, typography settings, CSS reset and media queries
|
||||
- Assets - Static assets that need to be bundled into the application, but do not require any manipulation go here. This includes interface icons and fonts
|
||||
## Application Structure
|
||||
|
||||
The structure of the components directory is similar to that of the frontend application layout
|
||||
### Directory Structure
|
||||
|
||||
<p align="center"><img src="https://i.ibb.co/wJCt0Lq/dashy-page-structure.png" width="600"/></p>
|
||||
|
||||
### 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
|
||||
|
||||
### 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
|
||||
[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
|
||||
|
||||
### Files in the Root: `./`
|
||||
#### Files in the Root: `./`
|
||||
```
|
||||
╮
|
||||
├── package.json # Project meta-data, dependencies and paths to scripts
|
||||
@ -147,7 +192,7 @@ The easiest method of checking performance is to use Chromium's build in auditin
|
||||
╯
|
||||
```
|
||||
|
||||
### Frontend Source: `./src/`
|
||||
#### Frontend Source: `./src/`
|
||||
|
||||
```
|
||||
./src
|
||||
@ -219,8 +264,36 @@ The easiest method of checking performance is to use Chromium's build in auditin
|
||||
├── Minimal.vue # The minimal view
|
||||
╰── Workspace.vue # The workspace view with apps in sidebar
|
||||
```
|
||||
|
||||
### 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
|
||||
- **PageStrcture** - Components relating to overall page structure (nav, footer, etc)
|
||||
- FormElements - Reusable form elements (button, input field, etc)
|
||||
- LinkItems - Components relating to Dashy's sections and items (item group, item, item icon, etc)
|
||||
- Configuration - Components relating to Dashy's configuration forms (cloud backup, JSON editor, etc)
|
||||
- **Views** - Each view directly corresponds to a route (defined in the router), and in effectively a page. They should have minimal logic, and just contain a few components
|
||||
- **Utils** - These are helper functions, or logic that is used within the app does not include an UI elements
|
||||
- **Styles** - Any SCSS that is used globally throughout that app, and is not specific to a single component goes here. This includes variables, color themes, typography settings, CSS reset and media queries
|
||||
- **Assets** - Static assets that need to be bundled into the application, but do not require any manipulation go here. This includes interface icons and fonts
|
||||
|
||||
The structure of the components directory is similar to that of the frontend application layout
|
||||
|
||||
<p align="center"><img src="https://i.ibb.co/wJCt0Lq/dashy-page-structure.png" width="600"/></p>
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Development Tools
|
||||
|
||||
### 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
|
||||
[BundlePhobia](https://bundlephobia.com/) is a really useful app that lets you analyze the cost of adding any particular dependency to an application
|
||||
|
||||
---
|
||||
## Notes
|
||||
|
||||
### Known Warnings
|
||||
|
@ -4,14 +4,35 @@ A series of short tutorials, to guide you through the most common development ta
|
||||
|
||||
Sections:
|
||||
- [Creating a new theme](#creating-a-new-theme)
|
||||
- [Adding Translations](#adding-translations)
|
||||
- [Writing Translations](#adding-translations)
|
||||
- [Adding a new option in the config file](#adding-a-new-option-in-the-config-file)
|
||||
- [Updating Dependencies](#updating-dependencies)
|
||||
|
||||
## Creating a new theme
|
||||
|
||||
See [Theming](./theming.md)
|
||||
Adding a new theme is really easy. There's two things you need to do: Pass the theme name to Dashy, so that it can be added to the theme selector dropdown menu, and then write some styles!
|
||||
|
||||
## Adding Translations
|
||||
##### 1. Add Theme Name
|
||||
Choose a snappy name for you're theme, and add it to the `builtInThemes` array inside [`defaults.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js#L27).
|
||||
|
||||
##### 2. Write some Styles!
|
||||
Put your theme's styles inside [`color-themes.scss`](https://github.com/Lissy93/dashy/blob/master/src/styles/color-themes.scss).
|
||||
Create a new block, and make sure that `data-theme` matches the theme name you chose above. For example:
|
||||
|
||||
```css
|
||||
html[data-theme='tiger'] {
|
||||
--primary: #f58233;
|
||||
--background: #0b1021;
|
||||
}
|
||||
```
|
||||
|
||||
Then you can go ahead and write you're own custom CSS. Although all CSS is supported here, the best way to define you're theme is by setting the CSS variables. You can find a [list of all CSS variables, here](https://github.com/Lissy93/dashy/blob/master/docs/theming.md#css-variables).
|
||||
|
||||
For a full guide on styling, see [Theming Docs](./theming.md).
|
||||
|
||||
Note that if you're theme is just for yourself, and you're not submitting a PR, then you can instead just pass it under `appConfig.cssThemes` inside your config file. And then put your theme in your own stylesheet, and pass it into the Docker container - [see how](https://github.com/Lissy93/dashy/blob/master/docs/theming.md#adding-your-own-theme).
|
||||
|
||||
## Writing Translations
|
||||
|
||||
Dashy is using [vue-i18n](https://vue-i18n.intlify.dev/guide/) to manage multi-language support.
|
||||
|
||||
@ -110,4 +131,10 @@ 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
|
||||
- [] 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
|
||||
|
||||
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.
|
@ -1,2 +1,20 @@
|
||||
# Troubleshooting
|
||||
|
||||
This document contains common problems and their solutions.
|
||||
|
||||
### Yarn Error
|
||||
|
||||
For more info, see [Issue #1](https://github.com/Lissy93/dashy/issues/1)
|
||||
|
||||
First of all, check that you've got yarn installed correctly - see the [yarn installation docs](https://classic.yarnpkg.com/en/docs/install) for more info.
|
||||
|
||||
If you're getting an error about scenarios, then you've likely installed the wrong yarn... (you're [not](https://github.com/yarnpkg/yarn/issues/2821) the only one!). You can fix it by uninstalling, adding the correct repo, and reinstalling, for example, in Debian:
|
||||
- `sudo apt remove yarn`
|
||||
- `curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -`
|
||||
- `echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list`
|
||||
- `sudo apt update && sudo apt install yarn`
|
||||
|
||||
Alternatively, as a workaround, you have several options:
|
||||
- Try using [NPM](https://www.npmjs.com/get-npm) instead: So clone, cd, then run `npm install`, `npm run build` and `npm start`
|
||||
- Try using [Docker](https://www.docker.com/get-started) instead, and all of the system setup and dependencies will already be taken care of. So from within the directory, just run `docker build -t lissy93/dashy .` to build, and then use docker start to run the project, e.g: `docker run -it -p 8080:80 lissy93/dashy` (see the [deploying docs](https://github.com/Lissy93/dashy/blob/master/docs/deployment.md#deploy-with-docker) for more info)
|
||||
|
||||
Coming Soon...
|
Loading…
Reference in New Issue
Block a user