🔀 Merge pull request #212 from Lissy93/CI/repo-management-actions

[CI] GH Actions for Repo Management
This commit is contained in:
Alicia Sykes 2021-09-09 20:10:14 +01:00 committed by GitHub
commit 28a1a57f5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 506 additions and 78 deletions

View File

@ -1,5 +1,12 @@
# Changelog
## 👷 1.7.3 - CI with GH Actions [PR #212](https://github.com/Lissy93/dashy/pull/212)
- Adds a series of GH actions for repository maintenance and administration
- Auto-labels PR and issues, adds helpful info to PRs based on files changed
- Lints, tests, builds and deploys the app when PR submitted
- Checks app size, dependencies, security, accessibility etc when PR submitted
- Closes incomplete, stale or spammy issues and leaves a comment
## ✨ 1.7.2 - Item Sort Options [PR #203](https://github.com/Lissy93/dashy/pull/203)
- Adds option for user to specify `sortBy` to order items within a section
- Can sort by last clicked, most used, alphabetically and more

15
.github/issue-auto-comments.yml vendored Normal file
View File

@ -0,0 +1,15 @@
comment:
header: Hello 👋
footer: |
---
> I am a bot, and this is an automated message 🤖
labels:
- name: invalid
labeled:
issue:
body: Please follow the issue templates.
action: close
pr:
body: Thank you @{{ pull_request.user.login }} for suggesting this. Please follow the pull request templates.
action: close

24
.github/issue-report-config.json vendored Normal file
View File

@ -0,0 +1,24 @@
[
{
"section": "Feature Requests",
"labels": [
"🦄 Feature Request"
],
"threshold": 100
},
{
"section": "Bugs",
"labels": [
"🐛 Bug"
],
"threshold": 100
},
{
"section": "Questions & Feedback",
"labels": [
"🤷‍♂️ Question",
"🌈 Feedback"
],
"threshold": 100
}
]

View File

@ -1,17 +1,101 @@
comment:
on-update: recreate
on-update: edit
header: |
Thank you for contributing to Dashy! ✨
Hi {{ prAuthor }}! Thank you for contributing to Dashy! ✨
footer: |
---
> I'm a bot, and this is an automated comment 🤖
snippets:
- id: docs-changes
files:
- '*.md'
- '**/*.md'
files: ['*.md', '**/*.md']
body: |
When making changes to the documentation, be sure to double check that:
- Link and images URLs properly resolve
- Your spelling and grammar is correct
- Any markdown formatting is valid
- id: vue-config
files:
- vue.config.js
body: >
You're making changes to the main Vue app config. Please test the app thoroughly,
as any misconfigurations here may cause the app to stop functioning.
- id: server-entry
files:
- server.js
body: >
You're making changes to the main server entry point. Please test the app thoroughly,
as any misconfigurations here may cause the app to stop functioning.
- id: dependency-changes
files:
- yarn.lock
body: >
When updating dependencies, take a moment to verify that there are not security
issues associated with any added or modified packages. If adding a new dependency,
ensure that it is totally necessary, and check the packages size is not too large,
as this will increase overall bundle size.
- id: environmental-vars
files: [ '.env', '*.env', '.env*' ]
body: >
You're making changes to the main server entry point. Please test the app thoroughly,
as any misconfigurations here may cause the app to stop functioning.
- id: license
files: [ 'LICENSE', '**/**/LICENSE*' ]
body: >
Dashy is licensed under MIT. Your modifying the license file, which shouldn't usually
need to be changed. Please ensure that you intended to make this update before continuing.
- id: cname-file
files:
- CNAME
body: >
Are you sure you want to modify the CNAME file? This may stop the documentation
website hosted on GitHub pages from working.
- id: git-ignore
files:
- .gitignore
body: >
When modifying the .gitignore, please do not remove any of the existing paths,
as this may cause files and directories to be unintentionally committed to git
- id: netlify-file
files:
- netlify.toml
body: >
Please ensure you've tested the app on Netlify, so that the 1-Click deployment
does not break, before merging these changes
- id: heroku-ignore
files:
- Procfile
body: >
Please ensure you've tested the app on Heroku, so that the 1-Click deployment
does not break, before merging these changes
- id: ignored-dist
files:
- /dist
body: >
Please do not commit the built application to git. The contents of the dist
directory will be generated after the app is compiled
- id: ignored-dependencies
files:
- /node_modules
body: >
Please do not commit dependencies to git. Node modules will be pulled down
when yarn is run, prior to building the app
- id: code-owners
files:
- /.github/CODEOWNERS
body: >
Are you adding yourself as a code owner? Please specify the file path as specific
as possible, and only assign yourself to files that you created and wish to help
maintain (such as a language file, specific feature or widget).
If the above is not met, your PR will be declined or modified.

65
.github/pr-badge.yml vendored
View File

@ -1,22 +1,33 @@
# Config file for pull-request-badge. Enables badges to be assigned to certain PRs.
# Config file for pull-request-badge. See: https://pullrequestbadge.com/
# Enables badges to be inserted into the PR description, based on certain conditions
# Checks if the required sections are missing
- label: "Missing"
- label: "⚠️Missing"
message: "Category"
color: "#f25265"
when: "$payload.pull_request.body.includes('Category') === false"
- label: "Missing"
- label: "⚠️Missing"
message: "Overview"
color: "#f25265"
when: "$payload.pull_request.body.includes('Overview') === false"
- label: "Missing"
- label: "⚠️Missing"
message: "Quality Checklist"
color: "#f25265"
when: "$payload.pull_request.body.includes('Code Quality Checklist') === false"
- label: "Description"
when: "$payload.pull_request.body.length < 25"
- label: "⚠Description"
message: "Incomplete"
color: "#f25265"
when: "$payload.pull_request.body.length < 25"
- label: "⚠Missing"
message: "Label"
color: "#f25265"
when: "$labels.length == 0"
# Show note when in draft mode
- label: "Status"
message: "Draft"
when: "$isDraft"
color: "#ffa933"
# Add size label based on very large or tiny PRs
- label: "PR Size"
@ -32,14 +43,50 @@
- label: "#$prNumber"
message: "$payload.pull_request.user.login /$payload.pull_request.head.ref → $payload.repository.full_name"
color: "#ab5afc"
url: "https://github.com/$slug/tree/$branchName"
# Show total code added minus deleted
- label: "New Code"
message: "Commits: $payload.pull_request.commits | Files Changed: $payload.pull_request.changed_files | Additions: $payload.pull_request.additions-$payload.pull_request.deletions"
color: "#dddd00"
# Show submitting user's username
- label: Submitted by
# Show submitting user's username and profile link
- label: 💕 Submitted by
message: "$payload.pull_request.user.login"
color: "#fc7bf1"
color: "#f73ae6"
when: "$payload.pull_request.author_association !== 'OWNER'"
url: "https://github.com/$payload.pull_request.user.login"
# Show a badge indicating the PR category
- label: "Type"
message: "✨ Feature"
color: "#39b0fd"
when: "$labels.includes('✨ New Feature')"
- label: "Type"
message: "🐛 Fix"
color: "#39b0fd"
when: "$labels.includes('🦋 Bug Fix')"
- label: "Type"
message: "📕 Docs"
color: "#39b0fd"
when: "$labels.includes('📕 Docs')"
- label: "Type"
message: "🛠️ Build Changes"
color: "#39b0fd"
when: "$labels.includes('🛠️ Build Changes')"
- label: "Type"
message: "🛠️ Build Changes"
color: "#39b0fd"
when: "$labels.includes('🛠️ Build Changes')"
- label: "Type"
message: "🚚 Refactor"
color: "#39b0fd"
when: "$labels.includes('🚚 Refactor')"
- label: "Type"
message: "💄 Stylistic Changes"
color: "#39b0fd"
when: "$labels.includes('💄 Stylistic Changes')"
- label: "Type"
message: "🌟 Showcase Addition"
color: "#39b0fd"
when: "$labels.includes('💯 Showcase')"

View File

@ -0,0 +1,27 @@
# Based on a label applied to an issue, the bot will add a comment with some additional info
name: Post Status from Label
on:
issues:
types:
- labeled
- unlabeled
pull_request_target:
types:
- labeled
- unlabeled
permissions:
contents: read
issues: write
pull-requests: write
jobs:
comment:
runs-on: ubuntu-20.04
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Label Commenter
uses: peaceiris/actions-label-commenter@v1
with:
config_file: ./path_to/your_config.yml
github_token: ${{ secrets.BOT_GITHUB_TOKEN }}

16
.github/workflows/auto-tag-pr.yml vendored Normal file
View File

@ -0,0 +1,16 @@
# Creates a new tag, whenever the app version (in package.json) is updated in master
name: Create Tag
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: butlerlogic/action-autotag@stable
with:
GITHUB_TOKEN: '${{ secrets.BOT_GITHUB_TOKEN }}'
strategy: package
commit_message_template: "🔖 {{number}} {{message}} (by {{author}})\nSHA: {{sha}}\n."

View File

@ -0,0 +1,21 @@
# Close any issue that does not match any of the issue templates
name: Close Non-Compliant Issues
on:
issues:
types: [opened, edited]
jobs:
auto_close_issues:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v1
- name: Automatically close issues that don't follow the issue template
uses: lucasbento/auto-close-issues@v1.0.2
with:
github-token: ${{ secrets.BOT_GITHUB_TOKEN }}
closed-issues-label: '🙁 Auto-Closed'
issue-close-message: |
Hello @${issue.user.login} 👋
Unfortunately your issue does not follow the format outlined in the template, and has therefore been auto-closed.
To ensure that all relevant info is included, please either update or recreate your issue, and complete the sub-headings provided.
Thank you :)

View File

@ -0,0 +1,29 @@
# Closes any issues that no longer have user interaction
name: 'Close stale issues and PRs'
on:
workflow_dispatch:
schedule:
- cron: '0 1 * * *' # Run at 01:00 each day
jobs:
stale:
runs-on: ubuntu-latest
steps:
- uses: actions/stale@v4
with:
repo-token: ${{ secrets.BOT_GITHUB_TOKEN }}
days-before-stale: 42
days-before-close: 5
operations-per-run: 30
remove-stale-when-updated: true
enable-statistics: true
stale-issue-message: 'This issue has gone 6 weeks without an update. To keep the ticket open, please indicate that it is still relevant in a comment below. Otherwise it will be closed in 5 working days.'
stale-pr-message: 'This PR is stale because it has been open 6 weeks with no activity. Either remove the stale label or comment below with a short update, otherwise this PR will be closed in 5 days.'
close-issue-message: 'This issue was automatically closed because it has been stalled for over 6 weeks with no activity.'
close-pr-message: 'This pull request was automatically closed because it has been stalled for over 6 weeks with no activity.'
stale-issue-label: '⚰️ Stale'
close-issue-label: '🕸️ Inactive'
stale-pr-label: '⚰️ Stale'
close-pr-label: '🕸️ Inactive'
exempt-issue-labels: '📌 Keep Open'
exempt-pr-labels: '📌 Keep Open'
labels-to-add-when-unstale: '📌 Keep Open'

View File

@ -1,7 +1,6 @@
# Lints code merged into master branch
name: Lint Code Base
on:
push:
pull_request:
branches: [master]
jobs:

25
.github/workflows/code-spell-check.yml vendored Normal file
View File

@ -0,0 +1,25 @@
# Finds typos in the English language within the app, submits a PR with fixes
name: Auto-Fix Spelling
on:
- push
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
if: startsWith(github.head_ref, 'AUTO/') == false
uses: actions/checkout@v2
- name: Spell Check
if: startsWith(github.head_ref, 'AUTO/') == false
uses: sobolevn/misspell-fixer-action@master
- name: Create PR
uses: peter-evans/create-pull-request@v3.10.1
if: startsWith(github.head_ref, 'AUTO/') == false
with:
token: ${{ secrets.BOT_GITHUB_TOKEN }}
commit-message: ':pencil2: Auto-fix typos in text'
title: '[AUTO] Fix spelling and language'
branch: 'AUTO/spelling-corrections'
committer: 'Liss-Bot <alicia-gh-bot@mail.as93.net>'
assignees: Lissy93
reviewers: Lissy93

View File

@ -0,0 +1,37 @@
# An action to generate summary of current and past issues in Md form, for east searching
name: Generate Issues Summary
on:
workflow_dispatch: # Manual dispatch
schedule:
- cron: '0 1 * * 0' # At 01:00 on Sunday.
env:
OUTPUT_FILE_NAME: .github/ISSUE_REPORT.md
COMMITTER_EMAIL: liss-bot@d0h.co
COMMITTER_NAME: Alicia Bot
COMMITTER_USERNAME: liss-bot
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: brcrista/summarize-issues@v3
with:
title: 'Dashy Historical Issue Report'
configPath: '.github/issue-report-config.json'
outputPath: ${{ env.OUTPUT_FILE_NAME }}
token: ${{ secrets.BOT_GITHUB_TOKEN }}
- name: "Commit if any changes were made"
run: |
git remote add github "https://$COMMITTER_USERNAME:${{ secrets.BOT_GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY.git"
git pull github ${GITHUB_REF} --ff-only
if [[ `git status --porcelain` ]]; then
git add ${OUTPUT_FILE_NAME}
git config --global user.email $COMMITTER_EMAIL
git config --global user.name $COMMITTER_NAME
git commit -m "Update $OUTPUT_FILE_NAME"
git push github HEAD:${GITHUB_REF}
fi

View File

@ -1,5 +1,6 @@
# Will add a comment and close new issues opened by users that may be spam, or have not starred
# Is still a work in progress, will also detect if user has previous activity in repo and check when joined GH
name: Issue Spam Control
on:
issues:
types: [opened, reopened]

View File

@ -9,3 +9,5 @@ jobs:
with:
github-token: ${{ secrets.BOT_GITHUB_TOKEN }}
config-file: .github/pr-auto-comments.yml
template-variables: |
{ "prAuthor": "${{ github.event.pull_request.user.login }}" }

View File

@ -0,0 +1,13 @@
# Finds any TODO notes within the code, and opens up an issue for it to be fixed
name: Open issue for Todos
on: ["push"]
jobs:
build:
runs-on: "ubuntu-latest"
steps:
- uses: "actions/checkout@master"
- name: "TODO to Issue"
uses: "alstr/todo-to-issue-action@v4.2"
id: "todo"
with:
TOKEN: ${{ secrets.BOT_GITHUB_TOKEN }}

View File

@ -1,4 +1,5 @@
# Adds a comment to all issues & PRs that were fixed on a new release
name: Release Issue Commenter
on:
release:
types: [published]

View File

@ -0,0 +1,11 @@
# After a PR is merged, the linked issue will be updated with a comment, based on commit message
name: Update Issue After PR
on: push
jobs:
checkCommit:
name: Comment From Commit
runs-on: ubuntu-latest
steps:
- uses: adamzolyak/commit-issue-commenter-action@master
env:
GITHUB_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN }}

View File

@ -10,17 +10,17 @@
<a href="https://github.com/awesome-selfhosted/awesome-selfhosted#personal-dashboards">
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Self-Hosted">
</a>
<a href="https://hub.docker.com/r/lissy93/dashy">
<img src="https://img.shields.io/docker/pulls/lissy93/dashy?logo=docker&amp;style=flat-square" alt="Docker Pulls">
</a>
<a href="http://as93.link/dashy-build-status">
<img src="https://flat.badgen.net/github/status/lissy93/dashy?icon=github" alt="GitHub Status">
</a>
<a href="https://github.com/Lissy93/dashy/blob/master/LICENSE">
<img src="https://img.shields.io/badge/License-MIT-09be48?style=flat-square&amp;logo=opensourceinitiative" alt="License MIT">
<img src="https://img.shields.io/badge/License-MIT-0aa8d2?logo=opensourceinitiative&logoColor=fff" alt="License MIT">
</a>
<a href="https://github.com/Lissy93/dashy/blob/master/.github/CHANGELOG.md">
<img src="https://img.shields.io/github/package-json/v/lissy93/dashy?style=flat-square&amp;logo=azurepipelines&amp;color=00af87" alt="Current Version">
<img src="https://img.shields.io/github/package-json/v/lissy93/dashy?logo=azurepipelines&amp;color=0aa8d2" alt="Current Version">
</a>
<a href="https://hub.docker.com/r/lissy93/dashy">
<img src="https://img.shields.io/docker/pulls/lissy93/dashy?logo=docker&color=0aa8d2&logoColor=fff" alt="Docker Pulls">
</a>
<a href="http://as93.link/dashy-build-status">
<img src="https://badgen.net/github/status/lissy93/dashy?icon=github" alt="GitHub Status">
</a>
<a href="https://snyk.io/test/github/lissy93/dashy">
<img src="https://snyk.io/test/github/lissy93/dashy/badge.svg" alt="Known Vulnerabilities">
@ -474,7 +474,7 @@ Found a bug, or something that isn't working as you'd expect? Please raise it as
- [Submit a Feature Request 🦄](https://github.com/Lissy93/dashy/issues/new?template=feature-request.yml)
- [Share Feedback 🌈](https://github.com/Lissy93/dashy/issues/new?assignees=&labels=%F0%9F%8C%88+Feedback&template=share-feedback.md&title=%5BFEEDBACK%5D)
**Issue Status** [![Resolution Time](http://isitmaintained.com/badge/resolution/lissy93/dashy.svg) ![Open Issues](http://isitmaintained.com/badge/open/lissy93/dashy.svg) ![Closed Issues](https://badgen.net/github/closed-issues/lissy93/dashy)](https://isitmaintained.com/project/lissy93/dashy) [![GitHub Discussions](https://img.shields.io/github/discussions/lissy93/dashy)
**Issue Status** [![Resolution Time](http://isitmaintained.com/badge/resolution/lissy93/dashy.svg)](https://isitmaintained.com/project/lissy93/dashy) [![Open Issues](http://isitmaintained.com/badge/open/lissy93/dashy.svg)](https://github.com/Lissy93/dashy/issues) [![Closed Issues](https://badgen.net/github/closed-issues/lissy93/dashy)](https://github.com/Lissy93/dashy/issues?q=is%3Aissue+is%3Aclosed) [![GitHub Discussions](https://img.shields.io/github/discussions/lissy93/dashy)
](https://github.com/Lissy93/dashy/discussions)
**[⬆️ Back to Top](#dashy)**

View File

@ -5,11 +5,22 @@ This article outlines how to get Dashy running in a development environment, and
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)
- [Prerequisites](#prerequisites)
- [Running the App](#running-the-project)
- [Project Commands](#project-commands)
- [Environmental Variables](#environmental-variables)
- [Git Strategy](#git-strategy)
- [Flow](#git-flow)
- [Branches](#git-branch-naming)
- [Commit emojis](#commit-emojis)
- [PR Guidelines](#pr-guidelines)
- [Resources for Beginners](#resources-for-beginners)
- [Style Guide](#style-guide)
- [Frontend Components](#frontend-components)
- [Project Structure](#directory-structure)
- [Dependencies and Packages](#dependencies-and-packages)
- [App Info](#app-info)
- [Code Style Guide](#style-guide)
- [Application Structure](#application-structure)
- [Development Tools](#development-tools)
- [Automated Workflows](#automated-workflows)
- [Misc / Notes](#notes)
## Setting up the Dev Environment
@ -41,7 +52,7 @@ There is also:
Using the Vue CLI:
- The app is build with Vue, and uses the [Vue-CLI Service](https://cli.vuejs.org/guide/cli-service.html) for basic commands.
- If you have [NPX](https://github.com/npm/npx) installed, then you can invoke the Vue CLI binary using `npx vue-cli-service [command]`
- Vue also has a GUI environment that can be used for basic project management, and may be useful for beginners, this can be started by running `vue ui`, and opening up `http://localhost:8000`
- Vue also has a GUI environment that can be used for basic project management, and may be useful for beginners, this can be started by running `npx vue ui`, and opening up `http://localhost:8000`
Note:
- If you are using NPM, replace `yarn` with `npm run`
@ -50,27 +61,19 @@ Note:
### 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`
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).
You can set variables either in your environment, or using the [`.env`](https://github.com/Lissy93/dashy/blob/master/.env) file.
- `NODE_ENV` - Current environment, can be either development, production or test
- `PORT` - The port to expose the running application on
- `HOST` - The host that Dashy is running on, domain or IP
- `BASE_URL` - The default base path for serving up static assets
- `VUE_APP_DOMAIN` - Usually the same as BASE_URL, but accessible in frontend
- `INTEGRITY` - Should enable SRI for build script and link resources
- `IS_DOCKER` - Computed automatically on build. Indicates if running in container
- `VUE_APP_VERSION` - Again, set automatically using package.json during build time
### Environment Modes
You can set the environment using the `NODE_ENV` variable.
The correct environment will be selected based on the script you run by default
The following environments are supported.
- `production`
- `development`
- `test`
For more info, see [Vue CLI Environment Modes](https://cli.vuejs.org/guide/mode-and-env.html#modes).
You can set the environment using the `NODE_ENV` variable. By default, the correct environment should be selected based on the script you run to start the app. The following environments are supported: `production`, `development` and `test`. For more info, see [Vue CLI Environment Modes](https://cli.vuejs.org/guide/mode-and-env.html#modes).
---
@ -135,6 +138,7 @@ When you submit your PR, include the required info, by filling out the PR templa
- 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)
@ -152,6 +156,8 @@ As well as Node, Git and Docker- you'll also need an IDE (e.g. [VS Code](https:/
---
## App Info
## 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, 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
@ -175,8 +181,6 @@ Styleguides:
## Application Structure
### Directory Structure
#### Files in the Root: `./`
```
@ -206,6 +210,7 @@ Styleguides:
├── components # All front-end Vue web components
│ ├── Configuration # Components relating to the user config pop-up
│ │ ├── AppInfoModal.vue # A modal showing core app info, like version, language, etc
│ │ ├── AppVersion.vue # Shows current version from package.json, compares with GitHub
│ │ ├── CloudBackupRestore.vue # Form where the user manages cloud sync options
│ │ ├── ConfigContainer.vue # Main container, wrapping all other config components
│ │ ├── CustomCss.vue # Form where the user can input custom CSS
@ -224,14 +229,24 @@ Styleguides:
│ │ ├── ItemIcon.vue # The icon used by both items and sections
│ │ ├── ItemOpenMethodIcon.vue # A small icon, visible on hover, indicating opening method
│ │ ╰── StatusIndicator.vue # Traffic light dot, showing if app is online or down
│ ├── Minimal View # Components used for the startpage / minimal alternative view
│ │ ├── MinimalHeading.vue # Title part of minimal view
│ │ ├── MinimalSearch.vue # Search bar for minimal view
│ │ ╰── MinimalSection.vue # Tabbed-Item section for minimal view
│ ├── PageStrcture # Components relating the main structure of the page
│ │ ├── Footer.vue # Footer, visible at the bottom of all pages
│ │ ├── Header.vue # Header, visible at the top of pages, and includes title and nav
│ │ ├── LoadingScreen.vue # Splash screen shown on first load
│ │ ├── Nav.vue # Navigation bar, includes a list of links
│ │ ╰── PageTitle.vue # Page title and sub-title, visible within the Header
│ ├── Workspace # Components used for the multi-tasking/ Workspace view
│ │ ├── MultiTaskingWeb.vue # When multi-tasking enabled, generates new iframe
│ │ ├── SideBar.vue # The left sidebar for the workspace view
│ │ ├── SideBarItem.vue # App item for the sidebar view
│ │ ├── SideBarSection.vue # Collapsible collection of items within workspace sidebar
│ │ ╰── WebContent.vue # Workspace iframe view, displays content of current app
│ ╰── Settings # Components relating to the quick-settings, in the top-right
│ ├── AuthButtons.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
@ -248,14 +263,21 @@ Styleguides:
├── utils # Directory of re-used helper functions
│ ├── ArrowKeyNavigation.js # Functionality for arrow-key navigation
│ ├── Auth.js # Handles all authentication related actions
│ ├── CheckSectionVisibility.js # Checks which parts of the page should be visible/ hidden based on config
│ ├── ClickOutside.js # A directive for detecting click, used to hide dropdown, modal or context menu
│ ├── ConfigAccumulator.js # Central place for managing and combining config
│ ├── ConfigHelpers.js # Helper functions for managing configuration
│ ├── CloudBackup.js # Functionality for encrypting, processing and network calls
│ ├── ConfigSchema.json # The schema, used to validate the users conf.yml file
│ ├── ConfigAccumulator.js # Central place for managing and combining config
│ ├── ConfigHelpers.json # Collection of helper functions to process config using accumulator
│ ├── ConfigValidator.js # A helper script that validates the config file against schema
│ ├── CoolConsole.js # Prints info, warning and error messages to browser console, with a cool style
│ ├── defaults.js # Global constants and their default values
│ ├── emojis.json # List of emojis with unicode and shortcode, used for emoji icon feature
│ ├── EmojiUnicodeRegex.js # Regular expression to validate emoji unicode format, for emoji icons
│ ├── ErrorHandler.js # Helper function called when an error is returned
│ ├── InitServiceWorker.js # Initializes and manages service worker, if enabled
│ ├── Search.js # Helper functions for searching/ filtering items in all views
│ ├── JsonToYaml.js # Function that parses and converts raw JSON into valid YAML
│ ├── languages.js # Handles fetching, switching and validating languages
│ ╰── ThemeHelper.js # Function that handles the fetching and setting of user themes
@ -267,24 +289,6 @@ Styleguides:
╰── 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
@ -296,6 +300,63 @@ The easiest method of checking performance is to use Chromium's build in auditin
[BundlePhobia](https://bundlephobia.com/) is a really useful app that lets you analyze the cost of adding any particular dependency to an application
---
## Automated Workflows
Dashy makes heavy use of [GitHub Actions](https://github.com/features/actions) to fully automate the checking, testing, building, deploying of the project, as well as administration tasks like management of issues, tags, releases and documentation. The following section outlines each workflow, along with a link the the action file, current status and short description. A lot of these automations were made possible using community actions contributed to GH marketplace by some amazing people.
### Code Processing
Action | Description
--- | ---
**Code Linter**<br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/code-linter.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/code-linter.yml) | After a pull request is created, all new code changes will be linted, and the CI will fail with a helpful message if the code has any formatting inconsistencies
**Code Spell Check**<br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/code-spell-check.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/code-spell-check.yml) | After a PR submitted, all auto-fixable spelling errors will be detected, then Liss-Bot will create a separate PR to propose the fixes
**Dependency Update Summary** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/dependency-updates-summary.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/dependency-updates-summary.yml) | After a PR is submitted, if any of the dependencies are modified, then Liss-Bot will add a comment, explaining which packages have been added, removed, updated or downgraded, as well as other helpful info
**Get Size** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/get-size.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/get-size.yml) | Adds comment to PR if the size of the built + bundled application has changed compared to the previous version
**Security Scan** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/security-scanning.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/security-scanning.yml) | Uses Snyk to scan the code and dependencies after a PR. Will add a comment and cause the build to fail if a new vulnerability or potential issue is present
### Releases
Action | Description
--- | ---
**Create Tag** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/auto-tag-pr.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/auto-tag-pr.yml) | Whenever the version indicated in package.json is updates, a new GitHub tag will be created for that point in time
**Build App** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/build-app.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/build-app.yml) | After changes are merged into the master branch, the app will be build, with output pushed to the `dev-demo` branch
**Cache Artifacts** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/cache-artifacts.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/cache-artifacts.yml) | After build, returned files will be cached for future actions for that commit
**Docker Publish** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/docker-publish.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/docker-publish.yml) | After PR is merged, the multi-architecture Docker container will be built, and then published to GHCR
### Issue Management
Action | Description
--- | ---
**Close Incomplete Issues** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/close-incomplete-issues.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/close-incomplete-issues.yml) | Issues which do not match any of the issue templates will be closed, and a comment posted explaining why
**Close Stale Issues** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/close-stale-issues.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/close-stale-issues.yml) | Issues which have not been updated for 6 weeks will have a comment posted to them. If the author does not reply within the next week, then the issue will be marked as stale and closed. The original author may still reopen the issue at any time
**Close Potential Spam Issues** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/issue-spam-control.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/issue-spam-control.yml) | Auto-closes issues, and adds a comment if it was submitted by a user who hasn't yet interacted with the repo, is new to GitHub and has not starred the repository. The comment will advise them to check their issue is complete, and then allow them to reopen it
**Issue Translator** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/issue-translator.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/issue-translator.yml) | Auto-translates any comments and issues that were written in any language other than English, and posts the translation as a comment below
**Label Sponsors** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/label-sponsors.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/label-sponsors.yml) | Adds a special label to any issues or pull requests raised by users who are sponsoring the project via GitHub, so that they can get priority support
**LGTM Comment**<br/>[![Add Random LGTM GIF](https://github.com/Lissy93/dashy/actions/workflows/lgtm-comment.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/lgtm-comment.yml) | When a PR review contains the words LGTM (looks good to me), the Liss-Bot will reply with a random celebratory or thumbs up GIF, just as a bit of fun
**Mind your Language** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/mind-your-language.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/mind-your-language.yml) | Replies to any comment (on issue or PR) that contains profanities, offensive or inappropriate language with a polite note reminding the user of the code of conduct
**Release Notifier** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/release-commenter.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/release-commenter.yml) | Once a release has been published which fixes an issue, a comment will be added to the relevant issues informing the user who raised it that it was fixed in the current release
**Update Issue after Merge** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/update-issue-after-pr.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/update-issue-after-pr.yml) | After a PR which fixes an issue is merged, Liss-Bot will add a comment to said issue based on the git commit message
**Auto Add Comment Based on Tag** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/add-comment-from-tag.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/add-comment-from-tag.yml) | Will add comment with useful info to certain issues, based on the tag applied
### PR Management
Action | Description
--- | ---
**PR Commenter** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/pr-commenter.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/pr-commenter.yml) | Adds comment with helpful info to pull requests, based on which files have been changes
**Issue from Todo Code** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/raise-issue-from-todo.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/raise-issue-from-todo.yml) | When a `todo` note is found in the code after a PR, then Liss-Bot will automatically raise an issue, so that the todo can be addressed/ implemented. The issue will be closed once the todo has been implemented or removed
### Documentation & Reports
Action | Description
--- | ---
**Generate Credits** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/generate-credits.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/generate-credits.yml) | Generates a report, including contributors, collaborators, sponsors, bots and helpful users. Will then insert a markdown table with thanks to these GitHub users and links to their profiles into the Credits page, as well as a summary of sponsors and top contributors into the main readme
**Generate Issue Summary** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/generate-issue-summary.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/generate-issue-summary.yml) | Creates a markdown report of opened and closed linked-issues, sorted by category
**Wiki Sync** <br/>[![Workflow Status](https://github.com/Lissy93/dashy/actions/workflows/wiki-sync.yml/badge.svg)](https://github.com/Lissy93/dashy/actions/workflows/wiki-sync.yml) | Generates and publishes the repositories wiki page using the markdown files within the docs directory
---
## Notes
### Known Warnings
@ -306,4 +367,3 @@ When running the build command, several warnings appear. These are not errors, a
`WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).` - For the PWA to support Windows 10, a splash screen asset is required, and is quite large. This throws a warning, however PWA assets are not loaded until needed, so shouldn't have any impact on application performance. A similar warning is thrown for the Raleway font, and that is looking to be addressed.
`glob-parent Security Alert` - This will be fixed soon. The version of glob-parent that is used by the latest version of Vue-CLI has a security issue associated with it. I am waiting on Vue to update their dependencies.

View File

@ -175,4 +175,13 @@ Finally, in the markup of your component, just add a `v-if` statement, referenci
</header>
```
---
---
## Adding / Using 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 either in your environment, or using the [`.env`](https://github.com/Lissy93/dashy/blob/master/.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.
If add any 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 the contents of 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).

View File

@ -1,6 +1,6 @@
{
"name": "Dashy",
"version": "1.7.2",
"version": "1.7.3",
"license": "MIT",
"main": "server",
"scripts": {
@ -92,4 +92,4 @@
"> 1%",
"last 2 versions"
]
}
}

View File

@ -2,15 +2,15 @@
export const welcomeMsg = () => {
const v = process.env.VUE_APP_VERSION ? `V${process.env.VUE_APP_VERSION}` : '';
console.log(`%cDashy ${v} 🚀`, 'color:#00af87; background:#0b1021; font-size:1.5rem; padding: 0 0.5rem 0; margin: 1rem auto; font-family: Rockwell; border: 2px solid #00af87; border-radius: 4px;font-weight: bold; text-shadow: 1px 1px 1px #00af87bf;');
console.log(`\n%cDashy ${v} 🚀`, 'color:#0dd8d8; background:#0b1021; font-size:1.5rem; padding:0.15rem 0.25rem; margin: 1rem auto; font-family: Rockwell; border: 2px solid #0dd8d8; border-radius: 4px;font-weight: bold; text-shadow: 1px 1px 1px #00af87bf;');
};
export const warningMsg = (message) => {
console.info(
`%c⚠ Warning ⚠️%c \n${message} \n\n%cThis is likely not an issue with Dashy, but rather your configuration. If you think it is a bug, please open a ticket on GitHub: https://git.io/JukXk`,
"color:#ceb73f; background: #ceb73f33; font-size:1.2rem; padding:0.15rem; margin: 0.2rem auto 1rem auto; font-family: Rockwell, Tahoma, 'Trebuchet MS', Helvetica; border: 2px solid #ceb73f; border-radius: 4px; font-weight: bold; text-shadow: 1px 1px 1px #000000bf;",
'font-weight: bold; font-size: 0.9rem;color: #ceb73f;',
"color: #ceb73f; font-size: 0.6rem; font-family: Tahoma, 'Trebuchet MS', Helvetica;",
`\n%c⚠ Warning ⚠️%c \n${message} \n\n%cThis is likely not an issue with Dashy, but rather your configuration. If you think it is a bug, please open a ticket on GitHub: https://git.io/JukXk`,
"color:#ceb73f; background: #ceb73f33; font-size:1.5rem; padding:0.15rem; margin: 1rem auto; font-family: Rockwell, Tahoma, 'Trebuchet MS', Helvetica; border: 2px solid #ceb73f; border-radius: 4px; font-weight: bold; text-shadow: 1px 1px 1px #000000bf;",
'font-weight: bold; font-size: 1rem;color: #ceb73f;',
"color: #ceb73f; font-size: 0.75rem; font-family: Tahoma, 'Trebuchet MS', Helvetica;",
);
};