Move frontend docs (#512)

docs/frontend_creating_custom_ui.md

@@ -1,123 +0,0 @@
----
-title: "Creating custom UI"
----
-
-:::warning Deprecated
-This feature has been deprecated and is no longer supported. To add custom UI to Home Assistant, build a [custom Lovelace card](lovelace_custom_card.md) instead.
-:::
-### State card
-
-If you would like to use your own [State card](frontend_add_card.md) without merging your code into [home-assistant-polymer](https://github.com/home-assistant/home-assistant-polymer/) you can create your own implementation.
-
-Put the element source file and its dependencies in `www/custom_ui/` directory under your Home Assistant [configuration](https://www.home-assistant.io/docs/configuration/) directory.
-
-For example if creating a state card for the `light` domain named `state-card-my-custom-light` put `state-card-my-custom-light.html` in `www/custom_ui/`.
-
-That file should implement `<state-card-my-custom-light>` tag with Polymer.
-
-In `state-card-my-custom-light.html` you should use `<link rel="import">` to import all the dependencies **not** used by Home Assistant's UI.
-Do not import any dependencies used by the Home Assistant UI.
-Importing those will work in `development: 1` mode, but will fail in production mode.
-
-1. In the `customize:` section of the `configuration.yaml` file put `custom_ui_state_card: state-card-my-custom-light`.
-2. In the `frontend` section use `extra_html_url` to specify the URL to load.
-
-Example:
-
-`configuration.yaml`:
-
-```yaml
-homeassistant:
-  customize:
-    light.bedroom:
-      custom_ui_state_card: state-card-my-custom-light
-
-frontend:
-  extra_html_url:
-    - /local/custom_ui/state-card-my-custom-light.html
-```
-
-`www/custom_ui/state-card-my-custom-light.html`:
-
-```html
-<script>
-{
-  // show the version of your custom UI in the HA dev info panel (HA 0.66.0+):
-  const _NAME = 'My custom light';
-  const _URL = 'https://home-assistant.io/developers/frontend_creating_custom_ui/';
-  const _VERSION = '20180312';
-
-  if (!window.CUSTOM_UI_LIST) window.CUSTOM_UI_LIST = [];
-  window.CUSTOM_UI_LIST.push({
-    name: _NAME,
-    url: _URL,
-    version: _VERSION
-  });
-}
-</script>
-<dom-module id='state-card-my-custom-light'>
-  <template>
-    <style>
-
-    </style>
-    <textarea>[[_toStr(stateObj)]]</textarea>
-  </template>
-</dom-module>
-
-<script>
-class StateCardMyCustomLight extends Polymer.Element {
-  static get is() { return 'state-card-my-custom-light'; }
-
-  static get properties() {
-    return {
-      // Home Assistant object
-      hass: Object,
-      // inDialog is true if shown as more-info-card
-      inDialog: {
-        type: Boolean,
-        value: false,
-      },
-      // includes state, config and more information of the entity
-      stateObj: Object,
-    };
-  }
-
-  _toStr(obj) {
-    return JSON.stringify(obj, null, 2);
-  }
-}
-customElements.define(StateCardMyCustomLight.is, StateCardMyCustomLight);
-</script>
-```
-
-:::tip
-Some browsers don't support latest ECMAScript standards, these require a separate ES5 compatible file (`extra_html_url_es5`).
-:::
-
-For more possibilities, see the [Custom UI section](https://www.home-assistant.io/cookbook/#user-interface) on our Examples page.
-
-### More info dialog
-
-_Introduced in Home Assistant 0.69._
-
-Similar to the custom State card, if you would like to use your own [More info dialog](frontend_add_more_info.md) you can create your own implementation.
-
-Following a similar example, if creating a more info dialog a light named `more-info-my-custom-light` put `more-info-my-custom-light.html` in `www/custom_ui/`.
-
-1. In the `customize:` section of the `configuration.yaml` file put `custom_ui_more_info: more-info-my-custom-light`.
-2. In the `frontend` section use `extra_html_url` to specify the URL to load.
-
-Example:
-
-`configuration.yaml`:
-
-```yaml
-homeassistant:
-  customize:
-    light.bedroom:
-      custom_ui_more_info: more-info-my-custom-light
-
-frontend:
-  extra_html_url:
-    - /local/custom_ui/more-info-my-custom-light.html
-```

docs/lovelace_index.md

@@ -1,8 +0,0 @@
----
-title: "Lovelace UI"
-sidebar_label: Introduction
----
-
-This page has been moved to https://www.home-assistant.io/lovelace/
-
-<script>document.location = 'https://www.home-assistant.io/lovelace/';</script>

docusaurus.config.js

@@ -29,7 +29,7 @@ module.exports = {
               label: "Core",
               to: "docs/development_index",
             },
-            { to: "docs/frontend_index", label: "Frontend" },
+            { to: "docs/frontend", label: "Frontend" },
             { to: "docs/add-ons", label: "Add-ons" },
             { to: "docs/internationalization", label: "Internationalization" },
           ],

sidebars.js

@@ -38,6 +38,31 @@ module.exports = {
     "documenting/standards",
     "documenting/create-page",
   ],
+  Frontend: [
+    "frontend",
+    "frontend/architecture",
+    "frontend/development",
+    "frontend/data",
+    "frontend/external-authentication",
+    "frontend/external-bus",
+    {
+      type: "category",
+      label: "Extending the frontend",
+      items: [
+        "frontend/extending/adding-state-card",
+        "frontend/extending/adding-more-info-dialogs",
+        "frontend/extending/websocket-api",
+      ],
+    },
+    {
+      type: "category",
+      label: "Custom UI",
+      items: [
+        "frontend/custom-ui/lovelace-custom-card",
+        "frontend/custom-ui/creating-custom-panels",
+      ],
+    },
+  ],
   Internationalization: [
     "internationalization",
     "internationalization/core",
@@ -82,22 +107,6 @@ module.exports = {
     "Device Registry": ["device_registry_index"],
     "Area Registry": ["area_registry_index"],
   },
-  "Extending Frontend": {
-    Frontend: [
-      "frontend_index",
-      "frontend_architecture",
-      "frontend_development",
-      "frontend_data",
-      "frontend_external_auth",
-      "frontend_external_bus",
-    ],
-    "Extending the frontend": [
-      "frontend_add_card",
-      "frontend_add_more_info",
-      "frontend_add_websocket_api",
-    ],
-    "Custom UI": ["lovelace_custom_card", "frontend_creating_custom_panels"],
-  },
   "Extending Home Assistant": {
     "Development Workflow": [
       "development_index",

static/_redirects

@@ -13,6 +13,16 @@
 /docs/documentation_standards /docs/documenting/standards
 /docs/external_api_rest /docs/api/rest
 /docs/external_api_websocket /docs/api/websocket
+/docs/frontend_add_card /docs/frontend/extending/adding-state-card
+/docs/frontend_add_more_info /docs/frontend/extending/adding-more-info-dialogs
+/docs/frontend_add_websocket_api /docs/frontend/extending/websocket-api
+/docs/frontend_architecture /docs/frontend/architecture
+/docs/frontend_creating_custom_panels /docs/frontend/custom-ui/creating-custom-panels
+/docs/frontend_data /docs/frontend/data
+/docs/frontend_development /docs/frontend/development
+/docs/frontend_external_auth /docs/frontend/external-authentication
+/docs/frontend_external_bus /docs/frontend/external-bus
+/docs/frontend_index /docs/frontend
 /docs/hassio_addon_communication /docs/add-ons/communication
 /docs/hassio_addon_config /docs/add-ons/configuration
 /docs/hassio_addon_index /docs/add-ons
@@ -26,3 +36,4 @@
 /docs/internationalization_custom_component_localization /docs/internationalization/custom_integration
 /docs/internationalization_index /docs/internationalization
 /docs/internationalization_translation /docs/translations
+/docs/lovelace_custom_card /docs/frontend/custom-ui/lovelace-custom-card