diff --git a/.devcontainer/configuration.yaml b/.devcontainer/configuration.yaml new file mode 100644 index 00000000..9b01ded0 --- /dev/null +++ b/.devcontainer/configuration.yaml @@ -0,0 +1,4 @@ +default_config: +lovelace: + mode: yaml +demo: \ No newline at end of file diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 00000000..89c9a531 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,31 @@ +// See https://aka.ms/vscode-remote/devcontainer.json for format details. +{ + "name": "Boilerplate Card Development", + "image": "ludeeus/devcontainer:monster", + "context": "..", + "appPort": ["5000:5000", "9123:8123"], + "postCreateCommand": "npm install", + "runArgs": [ + "-v", + "${env:HOME}${env:USERPROFILE}/.ssh:/tmp/.ssh" // This is added so you can push from inside the container + ], + "extensions": [ + "github.vscode-pull-request-github", + "tabnine.tabnine-vscode", + "dbaeumer.vscode-eslint", + "ms-vscode.vscode-typescript-tslint-plugin", + "esbenp.prettier-vscode", + "bierner.lit-html", + "runem.lit-plugin", + "ms-python.python" + ], + "settings": { + "files.eol": "\n", + "editor.tabSize": 4, + "terminal.integrated.shell.linux": "/bin/bash", + "editor.formatOnPaste": false, + "editor.formatOnSave": true, + "editor.formatOnType": true, + "files.trimTrailingWhitespace": true + } +} diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml new file mode 100644 index 00000000..31c08eb9 --- /dev/null +++ b/.devcontainer/ui-lovelace.yaml @@ -0,0 +1,7 @@ +resources: + - url: http://127.0.0.1:5000/boilerplate-card.js + type: module +views: + - cards: + - type: "custom:boilerplate-card" + name: Boilerplace card development diff --git a/README.md b/README.md index a0003933..eb9e1844 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ A community driven boilerplate of best practices for Home Assistant Lovelace cus ### Step 1 -Clone this repo +Clone this repository ### Step 2 @@ -54,16 +54,41 @@ Do a test lint & build on the project. You can see available scripts in the pack ### Step 4 -Search the repo for all instances of "TODO" and handle the changes/suggestions +Search the repository for all instances of "TODO" and handle the changes/suggestions ### Step 5 Customize to suit your needs and contribute it back to the community -[Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins) + +## Starting a new card from boilerplate-card with [devcontainer][devcontainer] + +1. Fork and clone the repository. +2. Open the [devcontainer][devcontainer] and run `npm start` when it's ready. +3. The compiled `.js` file will be accessible on + `http://127.0.0.1:5000/custom-header.js`. +4. On a running Home Assistant installation add this to your Lovelace + `resources:` + +```yaml +- url: "http://127.0.0.1:5000/custom-header.js" + type: module +``` + +_Change "127.0.0.1" to the IP of your development machine._ + +### Bonus + +If you need a fresh test instance you can install a fresh Home Assistant instance inside the devcontainer as well. + +1. Run the command `dc start`. +2. Home Assistant will install and will eventually be running on port `9123` + +## [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins) [commits-shield]: https://img.shields.io/github/commit-activity/y/custom-cards/boilerplate-card.svg?style=for-the-badge [commits]: https://github.com/custom-cards/boilerplate-card/commits/master +[devcontainer]: https://code.visualstudio.com/docs/remote/containers [discord]: https://discord.gg/5e9yvq [discord-shield]: https://img.shields.io/discord/330944238910963714.svg?style=for-the-badge [forum-shield]: https://img.shields.io/badge/community-forum-brightgreen.svg?style=for-the-badge diff --git a/package.json b/package.json index de34451b..be31a057 100644 --- a/package.json +++ b/package.json @@ -1,46 +1,47 @@ { - "name": "boilerplate-card", - "version": "1.1.1", - "description": "Lovelace boilerplate-card", - "keywords": [ - "home-assistant", - "homeassistant", - "hass", - "automation", - "lovelace", - "custom-cards" - ], - "module": "boilerplate-card.js", - "repository": "git@github.com:custom_cards/boilerplate-card.git", - "author": "Ian Richardson ", - "license": "MIT", - "dependencies": { - "custom-card-helpers": "^1.3.5", - "home-assistant-js-websocket": "^4.4.0", - "lit-element": "^2.2.1" - }, - "devDependencies": { - "@babel/core": "^7.6.4", - "@babel/plugin-proposal-class-properties": "^7.5.5", - "@babel/plugin-proposal-decorators": "^7.4.0", - "@typescript-eslint/eslint-plugin": "^2.6.0", - "@typescript-eslint/parser": "^2.6.0", - "eslint": "^6.6.0", - "eslint-config-airbnb-base": "^14.0.0", - "eslint-plugin-import": "^2.18.2", - "prettier": "^1.18.2", - "rollup": "^1.26.0", - "rollup-plugin-babel": "^4.3.3", - "rollup-plugin-node-resolve": "^5.2.0", - "rollup-plugin-terser": "^5.1.2", - "rollup-plugin-typescript2": "^0.24.3", - "rollup-plugin-uglify": "^6.0.3", - "typescript": "^3.6.4" - }, - "scripts": { - "start": "rollup -c --watch", - "build": "npm run lint && npm run rollup", - "lint": "eslint src/*.ts", - "rollup": "rollup -c" - } + "name": "boilerplate-card", + "version": "1.1.1", + "description": "Lovelace boilerplate-card", + "keywords": [ + "home-assistant", + "homeassistant", + "hass", + "automation", + "lovelace", + "custom-cards" + ], + "module": "boilerplate-card.js", + "repository": "git@github.com:custom_cards/boilerplate-card.git", + "author": "Ian Richardson ", + "license": "MIT", + "dependencies": { + "custom-card-helpers": "^1.3.5", + "home-assistant-js-websocket": "^4.4.0", + "lit-element": "^2.2.1" + }, + "devDependencies": { + "@babel/core": "^7.6.4", + "@babel/plugin-proposal-class-properties": "^7.5.5", + "@babel/plugin-proposal-decorators": "^7.4.0", + "@typescript-eslint/eslint-plugin": "^2.6.0", + "@typescript-eslint/parser": "^2.6.0", + "eslint": "^6.6.0", + "eslint-config-airbnb-base": "^14.0.0", + "eslint-plugin-import": "^2.18.2", + "prettier": "^1.18.2", + "rollup": "^1.26.0", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-node-resolve": "^5.2.0", + "rollup-plugin-serve": "^1.0.1", + "rollup-plugin-terser": "^5.1.2", + "rollup-plugin-typescript2": "^0.24.3", + "rollup-plugin-uglify": "^6.0.3", + "typescript": "^3.6.4" + }, + "scripts": { + "start": "rollup -c --watch", + "build": "npm run lint && npm run rollup", + "lint": "eslint src/*.ts", + "rollup": "rollup -c" + } } diff --git a/rollup.config.js b/rollup.config.js index 891d8b4b..f14a456f 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,19 +1,30 @@ -import resolve from 'rollup-plugin-node-resolve'; -import typescript from 'rollup-plugin-typescript2'; -import babel from 'rollup-plugin-babel'; +import resolve from "rollup-plugin-node-resolve"; +import typescript from "rollup-plugin-typescript2"; +import babel from "rollup-plugin-babel"; +import serve from "rollup-plugin-serve"; import { terser } from "rollup-plugin-terser"; export default { - input: ['src/boilerplate-card.ts'], + input: ["src/boilerplate-card.ts"], output: { - dir: './dist', - format: 'es', + dir: "./dist", + format: "es" }, plugins: [ resolve(), typescript(), babel({ - exclude: 'node_modules/**' + exclude: "node_modules/**" }), - terser()] + terser(), + serve({ + contentBase: "./dist", + host: "0.0.0.0", + port: 5000, + allowCrossOrigin: true, + headers: { + "Access-Control-Allow-Origin": "*" + } + }) + ] };