From a4be81d0dd853415bcf1238d5f40ca8233f51e49 Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Mon, 11 May 2020 12:07:17 +0200 Subject: [PATCH] Move frontend docs (#512) --- docs/{frontend_index.md => frontend.md} | 0 .../architecture.md} | 0 .../custom-ui/creating-custom-panels.md} | 0 .../custom-ui/lovelace-custom-card.md} | 0 docs/{frontend_data.md => frontend/data.md} | 0 .../development.md} | 0 .../extending/adding-more-info-dialogs.md} | 0 .../extending/adding-state-card.md} | 0 .../extending/websocket-api.md} | 0 .../external-authentication.md} | 0 .../external-bus.md} | 0 docs/frontend_creating_custom_ui.md | 123 ------------------ docs/lovelace_index.md | 8 -- docusaurus.config.js | 2 +- sidebars.js | 41 +++--- static/_redirects | 11 ++ 16 files changed, 37 insertions(+), 148 deletions(-) rename docs/{frontend_index.md => frontend.md} (100%) rename docs/{frontend_architecture.md => frontend/architecture.md} (100%) rename docs/{frontend_creating_custom_panels.md => frontend/custom-ui/creating-custom-panels.md} (100%) rename docs/{lovelace_custom_card.md => frontend/custom-ui/lovelace-custom-card.md} (100%) rename docs/{frontend_data.md => frontend/data.md} (100%) rename docs/{frontend_development.md => frontend/development.md} (100%) rename docs/{frontend_add_more_info.md => frontend/extending/adding-more-info-dialogs.md} (100%) rename docs/{frontend_add_card.md => frontend/extending/adding-state-card.md} (100%) rename docs/{frontend_add_websocket_api.md => frontend/extending/websocket-api.md} (100%) rename docs/{frontend_external_auth.md => frontend/external-authentication.md} (100%) rename docs/{frontend_external_bus.md => frontend/external-bus.md} (100%) delete mode 100644 docs/frontend_creating_custom_ui.md delete mode 100644 docs/lovelace_index.md diff --git a/docs/frontend_index.md b/docs/frontend.md similarity index 100% rename from docs/frontend_index.md rename to docs/frontend.md diff --git a/docs/frontend_architecture.md b/docs/frontend/architecture.md similarity index 100% rename from docs/frontend_architecture.md rename to docs/frontend/architecture.md diff --git a/docs/frontend_creating_custom_panels.md b/docs/frontend/custom-ui/creating-custom-panels.md similarity index 100% rename from docs/frontend_creating_custom_panels.md rename to docs/frontend/custom-ui/creating-custom-panels.md diff --git a/docs/lovelace_custom_card.md b/docs/frontend/custom-ui/lovelace-custom-card.md similarity index 100% rename from docs/lovelace_custom_card.md rename to docs/frontend/custom-ui/lovelace-custom-card.md diff --git a/docs/frontend_data.md b/docs/frontend/data.md similarity index 100% rename from docs/frontend_data.md rename to docs/frontend/data.md diff --git a/docs/frontend_development.md b/docs/frontend/development.md similarity index 100% rename from docs/frontend_development.md rename to docs/frontend/development.md diff --git a/docs/frontend_add_more_info.md b/docs/frontend/extending/adding-more-info-dialogs.md similarity index 100% rename from docs/frontend_add_more_info.md rename to docs/frontend/extending/adding-more-info-dialogs.md diff --git a/docs/frontend_add_card.md b/docs/frontend/extending/adding-state-card.md similarity index 100% rename from docs/frontend_add_card.md rename to docs/frontend/extending/adding-state-card.md diff --git a/docs/frontend_add_websocket_api.md b/docs/frontend/extending/websocket-api.md similarity index 100% rename from docs/frontend_add_websocket_api.md rename to docs/frontend/extending/websocket-api.md diff --git a/docs/frontend_external_auth.md b/docs/frontend/external-authentication.md similarity index 100% rename from docs/frontend_external_auth.md rename to docs/frontend/external-authentication.md diff --git a/docs/frontend_external_bus.md b/docs/frontend/external-bus.md similarity index 100% rename from docs/frontend_external_bus.md rename to docs/frontend/external-bus.md diff --git a/docs/frontend_creating_custom_ui.md b/docs/frontend_creating_custom_ui.md deleted file mode 100644 index 1983cf0a..00000000 --- a/docs/frontend_creating_custom_ui.md +++ /dev/null @@ -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 `` tag with Polymer. - -In `state-card-my-custom-light.html` you should use `` 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 - - - - - - -``` - -:::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 -``` diff --git a/docs/lovelace_index.md b/docs/lovelace_index.md deleted file mode 100644 index 40c4e67d..00000000 --- a/docs/lovelace_index.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: "Lovelace UI" -sidebar_label: Introduction ---- - -This page has been moved to https://www.home-assistant.io/lovelace/ - - diff --git a/docusaurus.config.js b/docusaurus.config.js index e91f1230..28e341f0 100644 --- a/docusaurus.config.js +++ b/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" }, ], diff --git a/sidebars.js b/sidebars.js index 504051d1..fff549ea 100644 --- a/sidebars.js +++ b/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", diff --git a/static/_redirects b/static/_redirects index b3cd9920..733d63d3 100644 --- a/static/_redirects +++ b/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 \ No newline at end of file