Merge pull request #2640 from home-assistant/dev

20190130.1

.eslintrc-hound.json

@@ -1,5 +1,5 @@
 {
-  "extends": "airbnb-base",
+  "extends": ["airbnb-base", "prettier"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true,
@@ -8,7 +8,8 @@
   },
   "settings": {
     "react": {
-      "pragma": "h"
+      "pragma": "h",
+      "version": "15.0"
     },
     "import/resolver": {
       "webpack": {
@@ -18,6 +19,7 @@
   },
   "globals": {
     "__DEV__": false,
+    "__DEMO__": false,
     "__BUILD__": false,
     "__VERSION__": false,
     "__STATIC_PATH__": false,
@@ -67,13 +69,11 @@
     "react/no-find-dom-node": 2,
     "react/no-is-mounted": 2,
     "react/jsx-no-comment-textnodes": 2,
-    "react/jsx-curly-spacing": 2,
     "react/jsx-no-undef": 2,
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
-    "no-restricted-syntax": [0, "ForOfStatement"]
+    "no-restricted-syntax": [0, "ForOfStatement"],
+    "prettier/prettier": "error"
   },
-  "plugins": [
-    "react"
-  ]
+  "plugins": ["react", "prettier"]
 }

.gitattributes

@@ -0,0 +1,13 @@
+# Ensure Docker script files uses LF to support Docker for Windows.
+# Ensure "git config --global core.autocrlf input" before you clone
+*     text eol=lf
+*.ts  whitespace=error
+*.js  whitespace=error
+
+*.ico binary
+*.jpg binary
+*.png binary
+*.zip binary
+*.mp3 binary
+
+demo/public/api/camera_proxy_stream/* binary

.gitignore

@@ -6,6 +6,7 @@ npm-debug.log
 hass_frontend/*
 hass_frontend_es5/*
 .reify-cache
+demo/hademo-icons.html
 
 # Python stuff
 *.py[cod]
@@ -22,7 +23,8 @@ bin
 dist
 
 # vscode
-.vscode
+.vscode/*
+!.vscode/extensions.json
 
 # Secrets
 .lokalise_token

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "eg2.tslint",
+        "esbenp.prettier-vscode",
+        "bierner.lit-html"
+    ]
+}

config/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../.eslintrc.json",
+  "rules": {
+    "import/no-extraneous-dependencies": 0,
+    "global-require": 0
+  }
+}

config/babel.js

@@ -0,0 +1,35 @@
+module.exports.babelLoaderConfig = ({ latestBuild }) => {
+  if (latestBuild === undefined) {
+    throw Error("latestBuild not defined for babel loader config");
+  }
+  return {
+    test: /\.m?js$|\.ts$/,
+    use: {
+      loader: "babel-loader",
+      options: {
+        presets: [
+          !latestBuild && [
+            require("@babel/preset-env").default,
+            { modules: false },
+          ],
+          require("@babel/preset-typescript").default,
+        ].filter(Boolean),
+        plugins: [
+          // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
+          [
+            "@babel/plugin-proposal-object-rest-spread",
+            { loose: true, useBuiltIns: true },
+          ],
+          // Only support the syntax, Webpack will handle it.
+          "@babel/syntax-dynamic-import",
+          [
+            "@babel/transform-react-jsx",
+            {
+              pragma: "h",
+            },
+          ],
+        ],
+      },
+    },
+  };
+};

config/minimizer.js

@@ -0,0 +1,29 @@
+const BabelMinifyPlugin = require("babel-minify-webpack-plugin");
+
+module.exports.minimizer = [
+  // Took options from Polymer build tool
+  // https://github.com/Polymer/tools/blob/master/packages/build/src/js-transform.ts
+  new BabelMinifyPlugin(
+    {
+      // Disable the minify-constant-folding plugin because it has a bug relating
+      // to invalid substitution of constant values into export specifiers:
+      // https://github.com/babel/minify/issues/820
+      evaluate: false,
+
+      // TODO(aomarks) Find out why we disabled this plugin.
+      simplifyComparisons: false,
+
+      // Prevent removal of things that babel thinks are unreachable, but sometimes
+      // gets wrong: https://github.com/Polymer/tools/issues/724
+      deadcode: false,
+
+      // Disable the simplify plugin because it can eat some statements preceeding
+      // loops. https://github.com/babel/minify/issues/824
+      simplify: false,
+
+      // This is breaking ES6 output. https://github.com/Polymer/tools/issues/261
+      mangle: false,
+    },
+    {}
+  ),
+];

demo/public/index.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
+    <link rel="icon" href="/static/icons/favicon.ico" />
+    <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
+    <link
+      rel="preload"
+      href="/static/fonts/roboto/Roboto-Regular.ttf"
+      as="font"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/static/fonts/roboto/Roboto-Medium.ttf"
+      as="font"
+      crossorigin
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/static/icons/favicon-apple-180x180.png"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="msapplication-square70x70logo"
+      content="/static/icons/tile-win-70x70.png"
+    />
+    <meta
+      name="msapplication-square150x150logo"
+      content="/static/icons/tile-win-150x150.png"
+    />
+    <meta
+      name="msapplication-wide310x150logo"
+      content="/static/icons/tile-win-310x150.png"
+    />
+    <meta
+      name="msapplication-square310x310logo"
+      content="/static/icons/tile-win-310x310.png"
+    />
+    <meta name="msapplication-TileColor" content="#03a9f4ff" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="referrer" content="same-origin" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#03a9f4" />
+    <meta property="fb:app_id" content="338291289691179" />
+    <meta property="og:title" content="Home Assistant Demo" />
+    <meta property="og:site_name" content="Home Assistant" />
+    <meta property="og:url" content="https://demo.home-assistant.io/" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:description"
+      content="Open source home automation that puts local control and privacy first."
+    />
+    <meta
+      property="og:image"
+      content="https://www.home-assistant.io/images/default-social.png"
+    />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@home_assistant" />
+
+    <meta name="twitter:title" content="Home Assistant" />
+    <meta
+      name="twitter:description"
+      content="Open source home automation that puts local control and privacy first."
+    />
+    <meta
+      name="twitter:image"
+      content="https://www.home-assistant.io/images/default-social.png"
+    />
+    <title>Home Assistant Demo</title>
+    <script src="./custom-elements-es5-adapter.js"></script>
+    <script src="./compatibility.js"></script>
+    <script src="./main.js" async></script>
+    <style>
+      body {
+        font-family: Roboto, Noto, sans-serif;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-weight: 400;
+        height: 100vh;
+        margin: 0;
+        padding: 0;
+      }
+      #ha-init-skeleton::before {
+        display: block;
+        content: "";
+        height: 112px;
+        background-color: #03a9f4;
+      }
+    </style>
+  </head>
+  <body>
+    <ha-demo><div id="ha-init-skeleton"></div></ha-demo>
+    <script>
+      var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
+      (function(d, t) {
+        var g = d.createElement(t),
+          s = d.getElementsByTagName(t)[0];
+        g.src =
+          ("https:" == location.protocol ? "//ssl" : "//www") +
+          ".google-analytics.com/ga.js";
+        s.parentNode.insertBefore(g, s);
+      })(document, "script");
+    </script>
+  </body>
+</html>

demo/public/manifest.json

@@ -0,0 +1,33 @@
+{
+  "background_color": "#FFFFFF",
+  "description": "Open-source home automation platform running on Python 3.",
+  "dir": "ltr",
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "/static/icons/favicon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/favicon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/favicon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/favicon-1024x1024.png",
+      "sizes": "1024x1024",
+      "type": "image/png"
+    }
+  ],
+  "lang": "en-US",
+  "name": "Home Assistant Demo",
+  "short_name": "Demo",
+  "start_url": "/?homescreen=1",
+  "theme_color": "#03A9F4"
+}

demo/script/build_demo

@@ -0,0 +1,19 @@
+#!/bin/sh
+# Build the demo
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+OUTPUT_DIR=dist
+
+rm -rf $OUTPUT_DIR
+mkdir $OUTPUT_DIR
+node script/gen-icons.js
+
+cd ..
+DEMO=1 ./node_modules/.bin/gulp build-translations gen-icons
+cd demo
+
+NODE_ENV=production ../node_modules/.bin/webpack -p --config webpack.config.js

demo/script/develop_demo

@@ -0,0 +1,15 @@
+#!/bin/sh
+# Develop the demo
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+node script/gen-icons.js
+
+cd ..
+DEMO=1 ./node_modules/.bin/gulp build-translations gen-icons
+cd demo
+
+../node_modules/.bin/webpack-dev-server

demo/script/gen-icons.js

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const {
+  findIcons,
+  generateIconset,
+  genMDIIcons,
+} = require("../../gulp/tasks/gen-icons.js");
+
+function genHademoIcons() {
+  const iconNames = findIcons("./src", "hademo");
+  fs.writeFileSync("./hademo-icons.html", generateIconset("hademo", iconNames));
+}
+
+genMDIIcons();
+genHademoIcons();

demo/src/configs/arsaboo/index.ts

@@ -0,0 +1,13 @@
+import { DemoConfig } from "../types";
+import { demoLovelaceArsaboo } from "./lovelace";
+import { demoEntitiesArsaboo } from "./entities";
+import { demoThemeArsaboo } from "./theme";
+
+export const demoArsaboo: DemoConfig = {
+  authorName: "Arsaboo",
+  authorUrl: "https://github.com/arsaboo/homeassistant-config/",
+  name: "ARS Home",
+  lovelace: demoLovelaceArsaboo,
+  entities: demoEntitiesArsaboo,
+  theme: demoThemeArsaboo,
+};

demo/src/configs/arsaboo/theme.ts

@@ -0,0 +1 @@
+export const demoThemeArsaboo = () => ({});

demo/src/configs/demo-configs.ts

@@ -0,0 +1,31 @@
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { Lovelace } from "../../../src/panels/lovelace/types";
+import { DemoConfig } from "./types";
+
+export const demoConfigs: Array<() => Promise<DemoConfig>> = [
+  () => import("./arsaboo").then((mod) => mod.demoArsaboo),
+  () => import("./teachingbirds").then((mod) => mod.demoTeachingbirds),
+  () => import("./kernehed").then((mod) => mod.demoKernehed),
+  () => import("./jimpower").then((mod) => mod.demoJimpower),
+];
+
+export let selectedDemoConfigIndex: number = 0;
+export let selectedDemoConfig: Promise<DemoConfig> = demoConfigs[
+  selectedDemoConfigIndex
+]();
+
+export const setDemoConfig = async (
+  hass: MockHomeAssistant,
+  lovelace: Lovelace,
+  index: number
+) => {
+  const confProm = demoConfigs[index]();
+  const config = await confProm;
+
+  selectedDemoConfigIndex = index;
+  selectedDemoConfig = confProm;
+
+  hass.addEntities(config.entities(), true);
+  lovelace.saveConfig(config.lovelace());
+  hass.mockTheme(config.theme());
+};

demo/src/configs/jimpower/index.ts

@@ -0,0 +1,13 @@
+import { DemoConfig } from "../types";
+import { demoLovelaceJimpower } from "./lovelace";
+import { demoEntitiesJimpower } from "./entities";
+import { demoThemeJimpower } from "./theme";
+
+export const demoJimpower: DemoConfig = {
+  authorName: "Jimpower",
+  authorUrl: "https://github.com/JamesMcCarthy79/Home-Assistant-Config",
+  name: "Kingia Castle",
+  lovelace: demoLovelaceJimpower,
+  entities: demoEntitiesJimpower,
+  theme: demoThemeJimpower,
+};

demo/src/configs/jimpower/theme.ts

@@ -0,0 +1,49 @@
+export const demoThemeJimpower = () => ({
+  "text-primary-color": "var(--primary-text-color)",
+  "paper-item-icon-color": "var(--primary-text-color)",
+  "primary-color": "#5294E2",
+  "label-badge-red": "var(--accent-color)",
+  "paper-tabs-selection-bar-color": "green",
+  "paper-slider-knob-color": "var(--accent-color)",
+  "light-primary-color": "var(--accent-color)",
+  "primary-background-color": "#383C45",
+  "primary-text-color": "#FFFFFF",
+  "paper-item-selected_-_background-color": "#434954",
+  "paper-slider-active-color": "var(--accent-color)",
+  "secondary-background-color": "#383C45",
+  "paper-slider-container-color":
+    "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
+  "paper-slider-disabled-active-color": "var(--disabled-text-color)",
+  "disabled-text-color": "#7F848E",
+  "paper-item-icon_-_color": "green",
+  "paper-grey-200": "#414A59",
+  "label-badge-background-color": "#2E333A",
+  "paper-card-header-color": "var(--accent-color)",
+  "sidebar-icon-color": "var(--paper-item-icon-color)",
+  "paper-listbox-background-color": "#2E333A",
+  "table-row-background-color": "#353840",
+  "paper-grey-50": "var(--primary-text-color)",
+  "paper-toggle-button-checked-button-color": "var(--accent-color)",
+  "paper-dialog-background-color": "#434954",
+  "secondary-text-color": "#5294E2",
+  "google-red-500": "#E45E65",
+  "divider-color": "rgba(0, 0, 0, .12)",
+  "paper-toggle-button-unchecked-ink-color": "var(--disabled-text-color)",
+  "google-green-500": "#39E949",
+  "paper-toggle-button-unchecked-button-color": "var(--disabled-text-color)",
+  "label-badge-border-color": "green",
+  "paper-listbox-color": "var(--primary-color)",
+  "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
+  "paper-toggle-button-checked-ink-color": "var(--accent-color)",
+  "paper-card-background-color": "#434954",
+  "label-badge-text-color": "var(--primary-text-color)",
+  "paper-slider-knob-start-color": "var(--accent-color)",
+  "paper-toggle-button-unchecked-bar-color": "var(--disabled-text-color)",
+  "dark-primary-color": "var(--accent-color)",
+  "paper-slider-secondary-color": "var(--secondary-background-color)",
+  "paper-slider-pin-color": "var(--accent-color)",
+  "paper-item-icon-active-color": "#F9C536",
+  "accent-color": "#E45E65",
+  "paper-toggle-button-checked-bar-color": "var(--accent-color)",
+  "table-row-alternative-background-color": "#3E424B",
+});

demo/src/configs/kernehed/index.ts

@@ -0,0 +1,13 @@
+import { DemoConfig } from "../types";
+import { demoLovelaceKernehed } from "./lovelace";
+import { demoEntitiesKernehed } from "./entities";
+import { demoThemeKernehed } from "./theme";
+
+export const demoKernehed: DemoConfig = {
+  authorName: "Kernehed",
+  authorUrl: "https://github.com/kernehed",
+  name: "Hem",
+  lovelace: demoLovelaceKernehed,
+  entities: demoEntitiesKernehed,
+  theme: demoThemeKernehed,
+};

demo/src/configs/kernehed/lovelace.ts

@@ -0,0 +1,485 @@
+import { LovelaceConfig } from "../../../../src/data/lovelace";
+
+export const demoLovelaceKernehed: () => LovelaceConfig = () => ({
+  name: "Hem",
+  resources: [
+    // {
+    //   url: "/local/custom-lovelace/monster-card.js",
+    //   type: "js",
+    // },
+    // {
+    //   url: "/local/custom-lovelace/mini-media-player-bundle.js?v=0.9.8",
+    //   type: "module",
+    // },
+    // {
+    //   url: "/local/custom-lovelace/slideshow-card.js?=1.1.0",
+    //   type: "js",
+    // },
+    // {
+    //   url: "/local/custom-lovelace/fold-entity-row.js?v=3ae2c4",
+    //   type: "js",
+    // },
+    // {
+    //   url: "/local/custom-lovelace/swipe-card/swipe-card.js?v=2.0.0",
+    //   type: "module",
+    // },
+    // {
+    //   url: "/local/custom-lovelace/upcoming-media-card/upcoming-media-card.js",
+    //   type: "js",
+    // },
+    // {
+    //   url: "/local/custom-lovelace/tracker-card.js?v=0.1.5",
+    //   type: "js",
+    // },
+    // {
+    //   url: "/local/custom-lovelace/card-tools.js?v=6ce5d0",
+    //   type: "js",
+    // },
+    // {
+    //   url: "/local/custom-lovelace/krisinfo.js?=0.0.1",
+    //   type: "js",
+    // },
+  ],
+  views: [
+    {
+      cards: [
+        { type: "custom:ha-demo-card" },
+        {
+          cards: [
+            {
+              cards: [
+                {
+                  image: "/assets/kernehed/oscar.jpg",
+                  elements: [
+                    {
+                      style: {
+                        color: "white",
+                        top: "93%",
+                        left: "20%",
+                      },
+                      type: "state-label",
+                      entity: "sensor.oskar_devices",
+                    },
+                    {
+                      style: {
+                        color: "white",
+                        top: "93%",
+                        left: "90%",
+                      },
+                      type: "state-label",
+                      entity: "sensor.battery_oskar",
+                    },
+                    {
+                      style: {
+                        color: "white",
+                        top: "93%",
+                        left: "55%",
+                      },
+                      type: "state-label",
+                      entity: "sensor.oskar_tid_till_hem",
+                    },
+                  ],
+                  type: "picture-elements",
+                },
+                {
+                  image: "/assets/kernehed/bella.jpg",
+                  elements: [
+                    {
+                      style: {
+                        color: "white",
+                        top: "92%",
+                        left: "20%",
+                      },
+                      type: "state-label",
+                      entity: "sensor.bella_devices",
+                    },
+                    {
+                      style: {
+                        color: "white",
+                        top: "92%",
+                        left: "90%",
+                      },
+                      type: "state-label",
+                      entity: "sensor.battery_bella",
+                    },
+                    {
+                      style: {
+                        color: "white",
+                        top: "92%",
+                        left: "55%",
+                      },
+                      type: "state-label",
+                      entity: "sensor.bella_tid_till_hem",
+                    },
+                  ],
+                  type: "picture-elements",
+                },
+              ],
+              type: "horizontal-stack",
+            },
+          ],
+          type: "vertical-stack",
+        },
+        {
+          entities: [
+            "lock.polycontrol_danalock_v3_btze_locked",
+            "sensor.zwave_battery_front_door",
+            "alarm_control_panel.kernehed_manison",
+            "binary_sensor.dorrklockan",
+          ],
+          show_header_toggle: false,
+          type: "entities",
+          title: "Lock",
+        },
+        // {
+        //   filter: {
+        //     exclude: [
+        //       {
+        //         state: "not_home",
+        //       },
+        //     ],
+        //     include: [
+        //       {
+        //         entity_id: "device_tracker.annasiphone",
+        //       },
+        //       {
+        //         entity_id: "device_tracker.iphone_2",
+        //       },
+        //     ],
+        //   },
+        //   type: "custom:monster-card",
+        //   card: {
+        //     show_header_toggle: false,
+        //     type: "entities",
+        //     title: "G\u00e4ster",
+        //   },
+        //   show_empty: false,
+        // },
+        // {
+        //   filter: {
+        //     exclude: [
+        //       {
+        //         state: "Inget",
+        //       },
+        //       {
+        //         state: "i.u.",
+        //       },
+        //     ],
+        //     include: [
+        //       {
+        //         entity_id: "sensor.pollen_al",
+        //       },
+        //       {
+        //         entity_id: "sensor.pollen_alm",
+        //       },
+        //       {
+        //         entity_id: "sensor.pollen_salg_vide",
+        //       },
+        //       {
+        //         entity_id: "sensor.pollen_bjork",
+        //       },
+        //       {
+        //         entity_id: "sensor.pollen_bok",
+        //       },
+        //       {
+        //         entity_id: "sensor.pollen_ek",
+        //       },
+        //       {
+        //         entity_id: "sensor.pollen_grabo",
+        //       },
+        //       {
+        //         entity_id: "sensor.pollen_gras",
+        //       },
+        //       {
+        //         entity_id: "sensor.pollen_hassel",
+        //       },
+        //     ],
+        //   },
+        //   type: "custom:monster-card",
+        //   card: {
+        //     show_header_toggle: false,
+        //     type: "entities",
+        //     title: "Pollenniv\u00e5er",
+        //   },
+        //   show_empty: false,
+        // },
+        {
+          cards: [
+            {
+              entities: [
+                "switch.rest_julbelysning",
+                "binary_sensor.front_door_sensor",
+                "binary_sensor.unifi_camera",
+                "binary_sensor.back_door_sensor",
+              ],
+              image: "/assets/kernehed/camera.entre.jpg",
+              type: "picture-glance",
+              title: "Entrance camera",
+            },
+            {
+              entities: [
+                "input_select.christmas_pattern",
+                "input_select.christmas_palette",
+              ],
+              type: "entities",
+            },
+          ],
+          type: "vertical-stack",
+        },
+        // {
+        //   url: "https://embed.windy.com/embed2.html",
+        //   type: "iframe",
+        // },
+        {
+          entities: [
+            {
+              name: "Laundry sensor",
+              entity: "binary_sensor.tvattstugan_motion_sensor",
+            },
+            {
+              name: "Pantry sensor",
+              entity: "binary_sensor.skafferiet_motion_sensor",
+            },
+            {
+              name: "Basement sensor",
+              entity: "binary_sensor.kallaren_motion_sensor",
+            },
+            {
+              name: "Stair sensor",
+              entity: "binary_sensor.trapp_motion_sensor",
+            },
+            {
+              name: "Bench sensor",
+              entity: "binary_sensor.banksensor",
+            },
+            {
+              name: "Porch sensor",
+              entity: "binary_sensor.altan_motion_sensor",
+            },
+            {
+              name: "Bathroom sensor",
+              entity: "binary_sensor.badrumssensor",
+            },
+          ],
+          type: "glance",
+          show_state: false,
+        },
+        {
+          entities: ["sensor.oskar_bluetooth"],
+          show_header_toggle: false,
+          type: "entities",
+          title: "Occupancy",
+        },
+        // {
+        //   filter: {
+        //     exclude: [
+        //       {
+        //         state: false,
+        //       },
+        //     ],
+        //     include: [
+        //       {
+        //         entity_id:
+        //           "binary_sensor.fibaro_system_unknown_type0c02_id1003_sensor_2",
+        //       },
+        //       {
+        //         entity_id:
+        //           "binary_sensor.fibaro_system_unknown_type0c02_id1003_sensor_3",
+        //       },
+        //     ],
+        //   },
+        //   type: "custom:monster-card",
+        //   card: {
+        //     show_header_toggle: false,
+        //     type: "entities",
+        //     title: "Brandvarnare",
+        //   },
+        //   show_empty: false,
+        // },
+        {
+          type: "weather-forecast",
+          entity: "weather.smhi_vader",
+        },
+        // {
+        //   cards: [
+        //     {
+        //       max: 50,
+        //       min: -50,
+        //       type: "gauge",
+        //       title: "\u00d6verv\u00e5ning",
+        //       entity:
+        //         "sensor.fibaro_system_unknown_type0c02_id1003_temperature",
+        //     },
+        //     {
+        //       max: 50,
+        //       min: -50,
+        //       type: "gauge",
+        //       title: "Entr\u00e9n",
+        //       entity:
+        //         "sensor.fibaro_system_unknown_type0c02_id1003_temperature_2",
+        //     },
+        //     {
+        //       max: 50,
+        //       min: -50,
+        //       type: "gauge",
+        //       title: "K\u00e4llaren",
+        //       entity:
+        //         "sensor.philio_technology_corporation_phpat02beu_multisensor_2in1_temperature",
+        //     },
+        //   ],
+        //   type: "custom:slideshow-card",
+        //   arrow_color: "var(--primary-text-color)",
+        //   arrow_opacity: 0.7,
+        // },
+      ],
+      title: "Home",
+      path: "home",
+      icon: "mdi:home",
+    },
+    {
+      cards: [
+        {
+          entities: [
+            "sensor.processor_use",
+            "sensor.memory_free",
+            "sensor.disk_free_home",
+            "sensor.last_boot",
+            "sensor.db_size",
+          ],
+          show_header_toggle: false,
+          type: "entities",
+          title: "System",
+        },
+        {
+          entities: [
+            {
+              entity: "sensor.pi_hole_dns_queries_today",
+              name: "DNS Queries Today",
+            },
+            {
+              entity: "sensor.pi_hole_ads_blocked_today",
+              name: "Ads Blocked Today",
+            },
+            {
+              entity: "sensor.pi_hole_dns_unique_clients",
+              name: "DNS Unique Clients",
+            },
+          ],
+          show_header_toggle: false,
+          type: "entities",
+          title: "Pi-Hole",
+        },
+        {
+          entities: [
+            "sensor.plex",
+            "binary_sensor.gaming_pc",
+            "binary_sensor.server_1",
+            "binary_sensor.server_2",
+            "binary_sensor.windows_server",
+            "binary_sensor.teamspeak",
+            "binary_sensor.harmony_hub",
+            // {
+            //   style: {
+            //     height: "1px",
+            //     width: "85%",
+            //     "margin-left": "auto",
+            //     background: "#62717b",
+            //     "margin-right": "auto",
+            //   },
+            //   type: "divider",
+            // },
+            // {
+            //   items: ["sensor.uptime_router", "sensor.installerad_routeros"],
+            //   head: {
+            //     entity: "binary_sensor.router",
+            //   },
+            //   type: "custom:fold-entity-row",
+            //   group_config: {
+            //     icon: "mdi:router",
+            //   },
+            // },
+            // {
+            //   items: [
+            //     "sensor.uptime_router_server",
+            //     "sensor.installerad_routeros_server",
+            //   ],
+            //   head: {
+            //     entity: "binary_sensor.router_server",
+            //   },
+            //   type: "custom:fold-entity-row",
+            //   group_config: {
+            //     icon: "mdi:router",
+            //   },
+            // },
+          ],
+          show_header_toggle: false,
+          type: "entities",
+          title: "Network",
+        },
+        {
+          entities: [
+            "binary_sensor.ubiquiti_controller",
+            "binary_sensor.ubiquiti_switch",
+            "binary_sensor.ubiquiti_nvr",
+            "binary_sensor.entre_kamera",
+            // {
+            //   items: ["sensor.uptime_ap_1"],
+            //   head: {
+            //     entity: "binary_sensor.accesspunkt_1",
+            //   },
+            //   type: "custom:fold-entity-row",
+            //   group_config: {
+            //     icon: "router-wireless",
+            //   },
+            // },
+            // {
+            //   items: ["sensor.uptime_ap_2"],
+            //   head: {
+            //     entity: "binary_sensor.accesspunkt_2",
+            //   },
+            //   type: "custom:fold-entity-row",
+            //   group_config: {
+            //     icon: "router-wireless",
+            //   },
+            // },
+            "sensor.total_clients_wireless",
+          ],
+          show_header_toggle: false,
+          type: "entities",
+          title: "Ubiquiti",
+        },
+        {
+          entities: [
+            "sensor.qbittorrent_up_speed",
+            "sensor.qbittorrent_down_speed",
+            "sensor.qbittorrent_status",
+          ],
+          show_header_toggle: false,
+          type: "entities",
+          title: "Bittorrent",
+        },
+        {
+          entities: [
+            "sensor.speedtest_download",
+            "sensor.speedtest_upload",
+            "sensor.speedtest_ping",
+          ],
+          show_header_toggle: false,
+          type: "entities",
+          title: "Bandbredd",
+        },
+        // {
+        //   title: "Updater",
+        //   type: "custom:tracker-card",
+        //   trackers: [
+        //     "sensor.custom_card_tracker",
+        //     "sensor.custom_component_tracker",
+        //   ],
+        // },
+      ],
+      title: "System & Network",
+      path: "system_network",
+      icon: "mdi:server-network",
+    },
+  ],
+});

demo/src/configs/kernehed/theme.ts

@@ -0,0 +1,50 @@
+// https://community.home-assistant.io/t/slate-a-new-dark-theme/86410
+export const demoThemeKernehed = () => ({
+  "text-primary-color": "var(--primary-text-color)",
+  "paper-item-icon-color": "var(--primary-text-color)",
+  "primary-color": "#2980b9",
+  "label-badge-red": "var(--accent-color)",
+  "paper-tabs-selection-bar-color": "green",
+  "paper-slider-knob-color": "var(--accent-color)",
+  "primary-text-color": "#FFFFFF",
+  "light-primary-color": "var(--accent-color)",
+  "primary-background-color": "#222222",
+  "sidebar-icon-color": "#777777",
+  "paper-item-selected_-_background-color": "#292929",
+  "paper-slider-active-color": "var(--accent-color)",
+  "secondary-background-color": "#222222",
+  "paper-slider-container-color":
+    "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
+  "paper-slider-disabled-active-color": "var(--disabled-text-color)",
+  "disabled-text-color": "#777777",
+  "paper-item-icon_-_color": "green",
+  "paper-grey-200": "#222222",
+  "label-badge-background-color": "#222222",
+  "paper-card-header-color": "var(--accent-color)",
+  "paper-listbox-background-color": "#141414",
+  "table-row-background-color": "#292929",
+  "paper-grey-50": "var(--primary-text-color)",
+  "paper-toggle-button-checked-button-color": "var(--accent-color)",
+  "paper-dialog-background-color": "#292929",
+  "secondary-text-color": "#b58e31",
+  "google-red-500": "#b58e31",
+  "divider-color": "rgba(0, 0, 0, .12)",
+  "paper-toggle-button-unchecked-ink-color": "var(--disabled-text-color)",
+  "google-green-500": "#2980b9",
+  "paper-toggle-button-unchecked-button-color": "var(--disabled-text-color)",
+  "label-badge-border-color": "green",
+  "paper-listbox-color": "#777777",
+  "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
+  "paper-toggle-button-checked-ink-color": "var(--accent-color)",
+  "paper-card-background-color": "#292929",
+  "label-badge-text-color": "var(--primary-text-color)",
+  "paper-slider-knob-start-color": "var(--accent-color)",
+  "paper-toggle-button-unchecked-bar-color": "var(--disabled-text-color)",
+  "dark-primary-color": "var(--accent-color)",
+  "paper-slider-secondary-color": "var(--secondary-background-color)",
+  "paper-slider-pin-color": "var(--accent-color)",
+  "paper-item-icon-active-color": "#b58e31",
+  "accent-color": "#2980b9",
+  "paper-toggle-button-checked-bar-color": "var(--accent-color)",
+  "table-row-alternative-background-color": "#292929",
+});

demo/src/configs/teachingbirds/index.ts

@@ -0,0 +1,13 @@
+import { DemoConfig } from "../types";
+import { demoLovelaceTeachingbirds } from "./lovelace";
+import { demoEntitiesTeachingbirds } from "./entities";
+import { demoThemeTeachingbirds } from "./theme";
+
+export const demoTeachingbirds: DemoConfig = {
+  authorName: "Isabella Gross Alström",
+  authorUrl: "https://github.com/isabellaalstrom/",
+  name: "Isa's mobile friendly LL",
+  lovelace: demoLovelaceTeachingbirds,
+  entities: demoEntitiesTeachingbirds,
+  theme: demoThemeTeachingbirds,
+};