Migrate to Docusaurus V2 🐱‍🐉 (#412)

* Migrate to Docusaurus V2

* Add redirects

Only covers most recent version

* Add omitted scripts folder

* Include working yarn.lock

.gitignore

@@ -1,14 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
 .DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-node_modules
-
-lib/core/metadata.js
-lib/core/MetadataBlog.js
-
-website/translated_docs
-website/build/
-website/yarn.lock
-website/package-lock.json
-website/node_modules
-website/i18n/*
-!website/i18n/en.json
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.nvmrc

@@ -1 +1 @@
-8
+lts/*

blog/2018-06-01-071-custom-panels.md

@@ -3,7 +3,7 @@ author: Paulus Schoutsen
 authorURL: https://twitter.com/balloob
 authorImageURL: /img/profile/paulus.jpg
 authorTwitter: balloob
-title: 0.71: Improved custom panels and minor changes for custom UI
+title: "0.71: Improved custom panels and minor changes for custom UI"
 ---
 
 Efforts to modernize and localize the frontend are moving full speed. This blog post will touch upon the upcoming features for Home Assistant 0.71 which should hit the beta channel today and is planned for a release a week from now.

blog/2019-05-22-internet-of-things-and-the-modern-web.md

@@ -6,37 +6,13 @@ authorTwitter: balloob
 title: Internet of Things and the Modern Web
 ---
 
-<style markdown="0">
-  #demo {
-    width: 100%;
-    height: 475px;
-    border: 2px solid #03A9F4;
-    border-radius: 4px;
-  }
-  #discourse-comments {
-    margin-top: 2em;
-  }
-  .show-small {
-    display: none;
-  }
-  .onPageNav {
-    display: none;
-  }
-  @media (max-width: 600px) {
-    .hide-small {
-      display: none;
-    }
-    .show-small {
-      display: initial;
-    }
-  }
-</style>
+import DiscussionBox from '../static/js/discourse_discussion.jsx'
 
 [Home Assistant](https://www.home-assistant.io) is world's biggest open-source home automation platform. It [supports](https://www.home-assistant.io/components/) over 1000 devices and services, and it is used everywhere: homes, [boats](https://hasspodcast.io/ha048/) and [museums](https://twitter.com/sjvanterpool/status/1124035433212649475).
 
 Today I want to talk about our UI, what we're trying to solve and how we solve it. <span class='hide-small'>Before we dive into why, what and how, let's take a look at our user interface. This is an embedded version of <a href='https://demo.home-assistant.io' target='_blank'>our demo</a>, which is fully interactive.</span>
 
-<iframe id='demo' class='hide-small' src="https://demo.home-assistant.io""></iframe>
+<iframe id='demo' class='hide-small' src="https://demo.home-assistant.io"></iframe>
 
 <p class='show-small'><i>The embedded demo has been hidden because the screen is too small. <a href='https://demo.home-assistant.io' target='_blank'>Open the demo in a new screen.</a></i></p>
 
@@ -125,14 +101,9 @@ We do a lot of cool things, but the work is never done. Here are some challenges
 * **Stop using local storage.** We use local storage to store the auth tokens, the language preference and if the sidebar is shown. Since local storage is accessed synchronously, the browser will stop executing anything on the page while it is waiting for the local storage to be read from disk. Browser vendors are working on alternatives like [kv-storage](https://github.com/WICG/kv-storage) which are asynchronously and might become a viable alternative.
 * **Swap out Paper elements for [Material Web Components](https://github.com/material-components/material-components-web-components).** The Paper elements are no longer maintained and Material Web Components will be the successor, however they are still under development. The MWC components use Lit Element under the hood and rely on the material.io VanillaJS implementation of Material design. This means that they will be a lot lighter than the current Paper elements and will actually be maintained.
 
+## Comments
+
 <div id='discourse-comments'></div>
 
-<script markdown="0">
-  DiscourseEmbed = { discourseUrl: 'https://community.home-assistant.io/',
-                     discourseEmbedUrl: 'https://developers.home-assistant.io/blog/2019/05/22/internet-of-things-and-the-modern-web.html' };
-  (function() {
-    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
-    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
-    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
-  })();
-</script>
+<DiscussionBox discourseUrl="https://community.home-assistant.io/"
+      discourseEmbedUrl="https://developers.home-assistant.io/blog/2019/05/22/internet-of-things-and-the-modern-web.html" />

blog/2019-07-03-climate-cleanup.md

@@ -6,6 +6,8 @@ authorTwitter: balloob
 title: Climate Cleanup
 ---
 
+import DiscussionBox from '../static/js/discourse_discussion.jsx'
+
 _This post is about the upcoming changes for the Home Assistant climate integration. These changes are being implemented right now and are no longer up for discussion. If you want to see changes, consider opening [an architecture issue](https://github.com/home-assistant/architecture/issues)._
 
 Starting with Home Assistant 0.96, we're shipping a big architectural clean up of our climate integrations. This effort is lead by Pascal Vizeli.
@@ -34,14 +36,9 @@ If you are a maintainer of an integration that has a climate platform or maintai
 
 <!--truncate-->
 
+## Comments
+
 <div id='discourse-comments'></div>
 
-<script markdown="0">
-  DiscourseEmbed = { discourseUrl: 'https://community.home-assistant.io/',
-                     discourseEmbedUrl: 'https://developers.home-assistant.io/blog/2019/07/03/climate-cleanup.html' };
-  (function() {
-    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
-    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
-    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
-  })();
-</script>
+<DiscussionBox discourseUrl="https://community.home-assistant.io/"
+      discourseEmbedUrl="https://developers.home-assistant.io/blog/2019/07/03/climate-cleanup.html" />

blog/2019-07-19-building-all-the-things.md

@@ -6,6 +6,8 @@ authorTwitter: balloob
 title: Building All The Things
 ---
 
+import DiscussionBox from '../static/js/discourse_discussion.jsx'
+
 _How Home Assistant is using Azure Pipelines to automate all the things._
 
 Here at Home Assistant, we love automation! Not only in our homes, but also when doing development work. We do a release every three weeks and it includes code from over 80 different people. All is managed by only two people working on this full-time (thanks [Nabu Casa](https://www.nabucasa.com)!).
@@ -46,7 +48,7 @@ CircleCI had a nice feature that it could distribute your tests over multiple wo
 With Azure, we get more runners which are more powerful and faster, but no parallelization. This means that an individual build will take longer, however, with many builds coming in, the individual build time remains roughly the same, as we are not experiencing any backlog.
 
 <center>
-![Screenshot of the Home Assistant CI pipeline.](/img/en/blog/2019-07-building-all-the-things/test-results.png)<br>
+![Screenshot of the Home Assistant CI pipeline.](/img/en/blog/2019-07-building-all-the-things/test-results.png)<br />
 Screenshot of the [test results](https://dev.azure.com/home-assistant/Home%20Assistant/_build/results?buildId=3976&view=ms.vss-test-web.build-test-results-tab).
 </center>
 
@@ -59,7 +61,7 @@ The Azure Pipelines agents are using the amd64 CPU architecture. It is possible
 We use a feature on Azure Pipelines called [self-hosted agents](https://docs.microsoft.com/en-us/azure/devops/pipelines/agents/agents?view=azure-devops#install) to host build agents on our own hardware with the right architecture. Azure Pipelines manages the pipeline definition and the orchestration, but the execution runs blazing fast on our own hardware.
 
 <center>
-![Screenshot of the Home Assistant CI pipeline.](/img/en/blog/2019-07-building-all-the-things/build-cabinet.jpg)<br>
+![Screenshot of the Home Assistant CI pipeline.](/img/en/blog/2019-07-building-all-the-things/build-cabinet.jpg)<br />
 Our build cabinet.
 </center>
 
@@ -102,14 +104,9 @@ Building out a wide range of automations has really helped Home Assistant scale
 - [Home Assistant on Azure Pipelines](https://dev.azure.com/home-assistant/Home%20Assistant/_build)
 - [Hass.io on Azure Pipelines](https://dev.azure.com/home-assistant/Hass.io/_build)
 
+## Comments
+
 <div id='discourse-comments'></div>
 
-<script markdown="0">
-  DiscourseEmbed = { discourseUrl: 'https://community.home-assistant.io/',
-                     discourseEmbedUrl: 'https://developers.home-assistant.io/blog/2019/07/19/building-all-the-things.html' };
-  (function() {
-    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
-    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
-    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
-  })();
-</script>
+<DiscussionBox discourseUrl="https://community.home-assistant.io/"
+      discourseEmbedUrl="https://developers.home-assistant.io/blog/2019/07/19/building-all-the-things.html" />

blog/2019-09-27-hacktoberfest.md

@@ -6,6 +6,8 @@ authorTwitter: balloob
 title: Hacktoberfest 2019
 ---
 
+import DiscussionBox from '../static/js/discourse_discussion.jsx'
+
 This year we're again participating in [Hacktoberfest](https://hacktoberfest.digitalocean.com). Hacktoberfest is a worldwide event to celebrate open source. If you make four pull request in the month of October, you'll get a free Hacktoberfest t-shirt.
 
 Home Assistant is currently racing towards our magical 1.0 release. Home Assistant 1.0 is all about user friendliness. As part of this, we have recently introduced device automations and are expanding how scenes work in Home Assistant.
@@ -69,14 +71,10 @@ For Hacktoberfest, let's see if we can expand the number of supported types! To
 - [Documentation on how to run tests](https://almond.stanford.edu/doc/thingpedia-testing.md)
 - Run Almond at [home](https://github.com/stanford-oval/almond-server), use [the Android version](https://play.google.com/store/apps/details?id=edu.stanford.thingengine.engine&hl=en_US) or [the Gnome version](https://flathub.org/apps/details/edu.stanford.Almond)
 
+
+## Comments
+
 <div id='discourse-comments'></div>
 
-<script markdown="0">
-  DiscourseEmbed = { discourseUrl: 'https://community.home-assistant.io/',
-                     discourseEmbedUrl: 'https://developers.home-assistant.io/blog/2019/09/27/hacktoberfest.html' };
-  (function() {
-    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
-    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
-    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
-  })();
-</script>
+<DiscussionBox discourseUrl="https://community.home-assistant.io/"
+      discourseEmbedUrl="https://developers.home-assistant.io/blog/2019/09/27/hacktoberfest.html" />

blog/2019-10-05-simple-mode.md

@@ -6,6 +6,8 @@ authorTwitter: balloob
 title: Simple Mode in Home Assistant 1.0
 ---
 
+import DiscussionBox from '../static/js/discourse_discussion.jsx'
+
 > This blog post references simple and advanced mode. This has since been renamed to standard mode and advanced mode.
 
 The Home Assistant UI has two different modes. There is a simple mode and an advanced mode. Simple mode has been introduced recently in [Home Assistant 0.96](https://www.home-assistant.io/blog/2019/07/17/release-96/#advanced-mode). In this post I want to outline my vision for simple mode in Home Assistant 1.0.
@@ -84,12 +86,5 @@ Another ongoing effort that will make it easier for everyone is our Hacktoberfes
 
 <div id='discourse-comments'></div>
 
-<script markdown="0">
-  DiscourseEmbed = { discourseUrl: 'https://community.home-assistant.io/',
-                     discourseEmbedUrl: 'https://developers.home-assistant.io/blog/2019/10/05/simple-mode.html' };
-  (function() {
-    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
-    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
-    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
-  })();
-</script>
+<DiscussionBox discourseUrl="https://community.home-assistant.io/"
+      discourseEmbedUrl="https://developers.home-assistant.io/blog/2019/10/05/simple-mode.html" />

blog/2020-02-04-new-zwave.md

@@ -6,6 +6,8 @@ authorTwitter: balloob
 title: Update on the Z-Wave integration
 ---
 
+import DiscussionBox from '../static/js/discourse_discussion.jsx'
+
 At the State of the Union we [introduced that we're working on a new Z-Wave integration](https://youtu.be/tc17q1Zn0Xs?t=4482). It's based on a new project by the Open Z-Wave project called [OZWDaemon](https://github.com/OpenZWave/qt-openzwave) and we will communicate with it over MQTT.
 
 This new approach allows us to integrate directly with the core of Open Z-Wave without relying on bindings via other languages. This allows us to easily keep up to date with the latest Open Z-Wave versions.
@@ -25,12 +27,5 @@ Once the integration is mature enough, it will become part of Home Assistant Cor
 
 <div id='discourse-comments'></div>
 
-<script markdown="0">
-  DiscourseEmbed = { discourseUrl: 'https://community.home-assistant.io/',
-                     discourseEmbedUrl: 'https://developers.home-assistant.io/blog/2020/02/04/new-zwave.html' };
-  (function() {
-    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
-    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
-    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
-  })();
-</script>
+<DiscussionBox discourseUrl="https://community.home-assistant.io/"
+      discourseEmbedUrl="https://developers.home-assistant.io/blog/2020/02/04/new-zwave.html" />

crowdin.yaml

@@ -1,53 +0,0 @@
-project_identifier_env: CROWDIN_DOCUSAURUS_PROJECT_ID
-api_key_env: CROWDIN_DOCUSAURUS_API_KEY
-base_path: "./"
-preserve_hierarchy: true
-
-files:
-  -
-    source: '/docs/*.md'
-    translation: '/website/translated_docs/%locale%/%original_file_name%'
-    languages_mapping: &anchor
-      locale:
-        'af': 'af'
-        'ar': 'ar'
-        'bs-BA': 'bs-BA'
-        'ca': 'ca'
-        'cs': 'cs'
-        'da': 'da'
-        'de': 'de'
-        'el': 'el'
-        'es-ES': 'es-ES'
-        'fa': 'fa-IR'
-        'fi': 'fi'
-        'fr': 'fr'
-        'he': 'he'
-        'hu': 'hu'
-        'id': 'id-ID'
-        'it': 'it'
-        'ja': 'ja'
-        'ko': 'ko'
-        'mr': 'mr-IN'
-        'nl': 'nl'
-        'no': 'no-NO'
-        'pl': 'pl'
-        'pt-BR': 'pt-BR'
-        'pt-PT': 'pt-PT'
-        'ro': 'ro'
-        'ru': 'ru'
-        'sk': 'sk-SK'
-        'sr': 'sr'
-        'sv-SE': 'sv-SE'
-        'tr': 'tr'
-        'uk': 'uk'
-        'vi': 'vi'
-        'zh-CN': 'zh-CN'
-        'zh-TW': 'zh-TW'
-  -
-    source: '/website/i18n/en.json'
-    translation: '/website/i18n/%locale%.json'
-    languages_mapping: *anchor
-  #-
-  #  source: '/website/versioned_docs/**/*.md'
-  #  translation: '/website/translated_docs/%locale%/**/%original_file_name%'
-  #  languages_mapping: *anchor

docs/architecture_components.md

@@ -5,7 +5,9 @@ sidebar_label: "Components"
 
 Home Assistant can be extended with **components**. Each component is responsible for a specific domain within Home Assistant. Components can listen for or trigger events, offer services, and maintain states. Components are written in Python and can do all the goodness that Python has to offer. Out of the box, Home Assistant offers a bunch of [built-in components](https://www.home-assistant.io/components/).
 
-<img src='/img/en/architecture/component_interaction.png' alt='Diagram showing interaction between components and the Home Assistant core.'>
+<img class='invertDark' 
+src='/img/en/architecture/component_interaction.png'
+alt='Diagram showing interaction between components and the Home Assistant core.' />
 
 There are two types of components within Home Assistant: components that interact with an Internet of Things domain, and components that respond to events that happen within Home Assistant. Read on to learn about each type!
 
@@ -45,7 +47,7 @@ In the event of the sun setting:
 
 When we put all the different pieces of Home Assistant together, it's a close match for the initial home automation overview sketch. The smart home AI has not been implemented yet, so it's not included in this picture.
 
-<img
+<img class='invertDark'
   src='/img/en/architecture/ha_full_architecture.png'
   alt='Overview of the full Home Assistant architecture with a couple of loaded components and platforms'
 />

docs/architecture_entities.md

@@ -3,7 +3,9 @@ title: "Entity Architecture"
 sidebar_label: Entity
 ---
 
-![Architecture overview of Hass.io](/img/en/architecture/entities_architecture.png)
+<img class='invertDark'
+  src='/img/en/architecture/entities_architecture.png'
+  alt='Architecture Overview of Home Assistant' />
 
 ## Configuration
 

docs/architecture_hassio.md

@@ -3,7 +3,8 @@ title: "Hass.io Architecture"
 sidebar_label: Hass.io
 ---
 
-![Architecture overview of Hass.io](/img/en/architecture/hassio.png)
+<img class='invertDark' src='/img/en/architecture/hassio.png'
+  alt='Architecture Overview of Home Assistant' />
 
 ## Host Control (HC)
 

docs/architecture_index.md

@@ -11,7 +11,7 @@ For more information about each part in this overview, <a href='https://www.home
  * Home Automation triggers commands based on user configurations.
  * Smart Home triggers commands based on previous behavior.
 
-<img
+<img class='invertDark'
   src='/img/en/architecture/home_automation_landscape.svg'
   alt='Home Automation landscape'
 />
@@ -23,7 +23,7 @@ The Home Assistant core is responsible for Home Control. Home Assistant contains
  * **Service Registry**: listens on the event bus for `call_service` events and allows other code to register services.
  * **Timer**: sends a `time_changed` event every 1 second on the event bus.
 
-<img
+<img class='invertDark'
   alt='Overview of the Home Assistant core architecture'
   src='/img/en/architecture/ha_architecture.svg'
 />

docs/auth_api.md

@@ -25,8 +25,9 @@ If you require a different redirect url (ie, if building a native app), you can
 Home Assistant will scan the first 10kB of a website for link tags.
 
 ## Authorize
-
-[![Authorization flow sequence diagram](/img/en/auth/authorize_flow.png)](https://www.websequencediagrams.com/?lz=dGl0bGUgQXV0aG9yaXphdGlvbiBGbG93CgpVc2VyIC0-IENsaWVudDogTG9nIGludG8gSG9tZSBBc3Npc3RhbnQKABoGIC0-IFVzZXI6AEMJZSB1cmwgAD4JACgOOiBHbyB0bwAeBWFuZCBhAC0ICgBQDgB1DACBFw5jb2RlAHELAE4RZXQgdG9rZW5zIGZvcgAoBgBBGlQAJQUK&s=qsd)
+<a href='https://www.websequencediagrams.com/?lz=dGl0bGUgQXV0aG9yaXphdGlvbiBGbG93CgpVc2VyIC0-IENsaWVudDogTG9nIGludG8gSG9tZSBBc3Npc3RhbnQKABoGIC0-IFVzZXI6AEMJZSB1cmwgAD4JACgOOiBHbyB0bwAeBWFuZCBhAC0ICgBQDgB1DACBFw5jb2RlAHELAE4RZXQgdG9rZW5zIGZvcgAoBgBBGlQAJQUK&s=qsd'>
+<img class='invertDark' src='/img/en/auth/authorize_flow.png' alt='Overview of how the different parts interact' />
+</a>
 
 > All example URLs here are shown with extra spaces and new lines for display purposes only.
 

docs/auth_auth_module.md

@@ -36,7 +36,8 @@ Each MFA module need to implement a setup flow handler extends from `mfa_modules
 
 ## Workflow
 
-![Multi Factor Authentication Workflow](/img/en/auth/mfa_workflow.png)
+<img class='invertDark' src='/img/en/auth/mfa_workflow.png'
+  alt='Multi Factor Authentication Workflow' />
 
 <!--
 Source: https://drive.google.com/file/d/12_nANmOYnOdqM56BND01nPjJmGXe-M9a/view

docs/auth_index.md

@@ -5,7 +5,8 @@ sidebar_label: Introduction
 
 Home Assistant has a built-in authentication system allowing different users to interact with Home Assistant. The authentication system consist of various parts.
 
-![Overview of how the different parts interact](/img/en/auth/architecture.png)
+<img class='invertDark' src='/img/en/auth/architecture.png'
+  alt='Overview of how the different parts interact' />
 
 ## Authentication providers
 

docs/config_entries_index.md

@@ -16,10 +16,10 @@ Config Entries are configuration data that are persistently stored by Home Assis
 | migration error | The config entry had to be migrated to a newer version, but the migration failed.
 | failed unload | The config entry was attempted to be unloaded, but this was either not supported or it raised an exception.
 
-<svg width="508pt" height="188pt" viewBox="0.00 0.00 508.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class='invertDark' width="508pt" height="188pt" viewBox="0.00 0.00 508.00 188.00" xmlns="http://www.w3.org/2000/svg">
 <g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
 <title>G</title>
-<polygon fill="white" stroke="white" points="-4,5 -4,-184 505,-184 505,5 -4,5"></polygon>
+<polygon fill="none" stroke="none" points="-4,5 -4,-184 505,-184 505,5 -4,5"></polygon>
 <g id="node1" class="node"><title>not loaded</title>
 <ellipse fill="none" stroke="black" cx="168" cy="-162" rx="51.3007" ry="18"></ellipse>
 <text text-anchor="middle" x="168" y="-157.8" font-family="Times,serif" font-size="14.00">not loaded</text>

docs/creating_platform_code_review.md

@@ -23,7 +23,7 @@ A checklist of things to do when you're adding a new platform.
 ### 2. Configuration
 
  1. If the platform can be set up directly, add a voluptuous schema for [configuration validation](development_validation.md)
- 2. Voluptuous schema extends schema from component<br>(e.g., `hue.light.PLATFORM_SCHEMA` extends `light.PLATFORM_SCHEMA`)
+ 2. Voluptuous schema extends schema from component<br />(e.g., `hue.light.PLATFORM_SCHEMA` extends `light.PLATFORM_SCHEMA`)
  3. Default parameters specified in voluptuous schema, not in `setup_platform(...)`
  4. Your `PLATFORM_SCHEMA` should use as many generic config keys as possible from `homeassistant.const`
  5. Never depend on users adding things to `customize` to configure behavior inside your platform.

docs/dev_101_hass.md

@@ -20,11 +20,11 @@ The Home Assistant instance contains four objects to help you interact with the
 
 Depending on what you're writing, there are different ways the `hass` object is made available.
 
-**Component**<br>
+**Component**<br />
 Passed into `setup(hass, config)` or `async_setup(hass, config)`.
 
-**Platform**<br>
+**Platform**<br />
 Passed into `setup_platform(hass, config, add_devices, discovery_info=None)` or `async_setup_platform(hass, config, async_add_devices, discovery_info=None)`.
 
-**Entity**<br>
+**Entity**<br />
 Available as `self.hass` once the entity has been added via the `add_devices` callback inside a platform.

docs/dev_101_index.md

@@ -5,7 +5,7 @@ sidebar_label: Introduction
 
 The goal of development 101 is to get you familiar with the basics of developing for Home Assistant. Before we start, please make sure you familiarize yourself with the [architecture](architecture_index.md).
 
-To get our code running inside Home Assistant we're going to create a custom component. The first step is to locate your config folder. You can find the path to your config folder by opening the Home Assistant frontend, click on the <img src='/img/dev-tools/about-icon.png' alt='service developer tool icon' class="inline" width="38" />. It's the path after the text "Path to configuration.yaml".
+To get our code running inside Home Assistant we're going to create a custom component. The first step is to locate your config folder. You can find the path to your config folder by opening the Home Assistant frontend, click on the <img src='/img/dev-tools/about-icon.png' alt='service developer tool icon' class="inline" height="18px" />. It's the path after the text "Path to configuration.yaml".
 
 Inside your configuration directory create a new folder called `custom_components`. It might be that one already exists, that's fine too. This is the folder that Home Assistant will look at when looking for custom code.
 

docs/device_registry_index.md

@@ -5,7 +5,7 @@ sidebar_label: Introduction
 
 The device registry is a registry where Home Assistant keeps track of devices. A device is represented in Home Assistant via one or more entities. For example, a battery-powered temperature and humidity sensor might expose entities for temperature, humidity and battery level.
 
-<img
+<img class='invertDark'
   src='/img/en/device_registry/overview.png'
   alt='Device registry overview'
 />

docs/entity_media_player.md

@@ -69,6 +69,7 @@ Required. Returns one of the defined constants from the below list that matches
 
 ### Available device classes
 Optional. What type of media device is this. It will possibly map to google device types.
+
 | Value | Description
 | ----- | -----------
 | tv | Device is a television type device.

docs/external_api_rest.md

@@ -531,7 +531,7 @@ It will return a message if event forwarding was set up successfully.
 
 #### DELETE /api/event_forwarding
 
-Cancel event forwarding to another Home Assistant instance.<br>
+Cancel event forwarding to another Home Assistant instance.<br />
 
 Requires a JSON object that represents the API to cancel forwarding to.
 

docs/intent_index.md

@@ -6,7 +6,7 @@ sidebar_label: "Introduction"
 An intent is a description of a user's intention. Intents are generated by user actions, like asking Amazon Echo to turn on a light.
 
 <a href='https://docs.google.com/drawings/d/1i9AsOQNCBCaeM14QwEglZizV0lZiWKHZgroZc9izB0E/edit'>
-  <img
+  <img class='invertDark'
     src='/img/en/intents/overview.png'
     alt='Architectural overview of intents in Home Assistant'
   />

docs/internationalization_translation.md

@@ -22,7 +22,7 @@ Some translation strings will contain special placeholders that will be replaced
 2. Stick to [Material Design guidelines](https://material.io/guidelines/style/writing.html).
 3. Don't translate or change proper nouns like `Home Assistant`, `Hass.io` or `Hue`.
 4. For a region specific translation, keys that will be the same as the base translation should be filled with `[VOID]`. These will be replaced during our translation build process.
-5. Translations under the `state_badge` keys will be used for the notification badge display. These translations should be short enough to fit in the badge label without overflowing. This can be tested in the Home Assistant UI either by editing the label text with your browsers development tools, or by using the States <img src='/img/dev-tools/states-icon.png' alt='states dev tool icon' class="inline" width="38" /> developer tool in the Home Assistant UI. In the UI, enter a new entity ID (`device_tracker.test`), and enter the text you want to test in state.
+5. Translations under the `state_badge` keys will be used for the notification badge display. These translations should be short enough to fit in the badge label without overflowing. This can be tested in the Home Assistant UI either by editing the label text with your browsers development tools, or by using the States tab of developer tools in the Home Assistant UI. In the UI, enter a new entity ID (`device_tracker.test`), and enter the text you want to test in state.
 6. If text will be duplicated across different translation keys, make use of the Lokalise key reference feature where possible. The base translation provides examples of this underneath the `states` translations. Please see the [Lokalise key referencing](https://docs.lokalise.com/en/articles/1400528-key-referencing) documentation for more details.
 
 ## Adding a new language

docusaurus.config.js

@@ -0,0 +1,74 @@
+module.exports = {
+  title: 'Home Assistant Developer Docs',
+  tagline: 'All you need to start developing for Home Assistant',
+  url: 'https://developers.home-assistant.io',
+  baseUrl: '/',
+  favicon: 'img/favicon.png',
+  organizationName: 'facebook', // Usually your GitHub org/user name.
+  projectName: 'docusaurus', // Usually your repo name.
+  themeConfig: {
+    googleAnalytics: {
+      trackingID: 'UA-57927901-3',
+    },
+    navbar: {
+      title: 'Developer Docs',
+      logo: {
+        alt: 'Home Assistant',
+        src: 'img/logo-pretty.svg',
+      },
+      links: [
+        {to: 'docs/architecture_index', label: 'Architecture', position: 'left'},
+        {to: 'docs/frontend_index', label: 'Frontend', position: 'left'},
+        {to: 'docs/development_index', label: 'Backend', position: 'left'},
+        {to: 'docs/misc', label: 'Misc', position: 'left'},
+        {to: 'blog', label: 'Blog', position: 'left'},
+      ],
+    },
+    footer: {
+      logo: {
+        alt: 'Home Assistant',
+        src: 'img/logo-white.svg',
+        href: 'https://www.home-assistant.io',
+      },
+      style: 'dark',
+      links: [
+        {
+          title: 'Social',
+          items: [
+            {
+              label: 'Blog',
+              to: 'blog',
+            },
+            {
+              label: 'GitHub',
+              href: 'https://github.com/home-assistant/developers.home-assistant',
+            },
+            {
+              label: 'Twitter',
+              href: 'https://twitter.com/hass_devs',
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} Home Assistant, Inc. Built with Docusaurus.`,
+    },
+  },
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          sidebarPath: require.resolve('./sidebars.js'),
+          editUrl:
+            'https://github.com/home-assistant/developers.home-assistant/edit/master/',
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+        blog: {
+          postsPerPage: 10,
+        },
+      },
+    ],
+  ],
+};

netlify.toml

@@ -0,0 +1,19 @@
+# Settings in the [build] context are global and are applied to all contexts
+# unless otherwise overridden by more specific contexts.
+# See: https://docs.netlify.com/configure-builds/file-based-configuration
+[build]
+  # Directory to change to before starting a build.
+  # This is where we will look for package.json/.nvmrc/etc.
+  base = ""
+
+  # Directory (relative to root of your repo) that contains the deploy-ready
+  # HTML files and assets generated by the build. If a base directory has
+  # been specified, include it in the publish directory path.
+  publish = "build"
+
+  # Default build command.
+  command = "yarn build"
+
+[[redirects]]
+    from = "/docs/en/*.html"
+    to = "/docs/:splat"

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "developers-home-assistant-v-2",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy"
+  },
+  "dependencies": {
+    "@docusaurus/core": "^2.0.0-alpha.41",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.41",
+    "classnames": "^2.2.6",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

script/bootstrap

@@ -2,5 +2,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-cd website
 yarn

script/netlify

@@ -1,16 +1,3 @@
 #!/bin/sh
 
-cd website
-npm install
-npm run write-translations
-
-wget -q https://downloads.crowdin.com/cli/v2/crowdin-cli.zip
-
-unzip crowdin-cli.zip -d crowdin-cli
-
-cp crowdin-cli/**/crowdin-cli.jar .
-
-java -jar crowdin-cli.jar --config ../crowdin.yaml upload sources --auto-update -b master
-java -jar crowdin-cli.jar --config ../crowdin.yaml download -b master
-
-npm run build
+yarn build

script/server

@@ -4,5 +4,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-cd website
 yarn start

sidebars.js

@@ -1,4 +1,11 @@
-{
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {
   "Architecture": {
     "Architecture": [
       "architecture_index",
@@ -154,5 +161,5 @@
       "hassio_addon_security"
     ],
     "Maintainer docs": ["maintenance", "releasing"]
-  }
-}
+  },
+};

src/css/custom.css

@@ -0,0 +1,102 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #03a9f4;
+  --ifm-color-primary-dark: #0398dc;
+  --ifm-color-primary-darker: #0390cf;
+  --ifm-color-primary-darkest: #0276ab;
+  --ifm-color-primary-light: #14b4fc;
+  --ifm-color-primary-lighter: #20b8fc;
+  --ifm-color-primary-lightest: #44c3fd;
+  --ifm-code-font-size: 95%;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgb(72, 77, 91);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+a.hero__text{
+  color: var(--ifm-heading-color);
+}
+
+.videoSection {
+  padding: 20px 0;
+}
+
+.videoWrapper {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+  background: #000;
+}
+
+.videoWrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.introSection {
+  padding-bottom: 20px;
+}
+
+img.inline {
+  display: inline-block;
+}
+
+small {
+  font-size: smaller;
+}
+
+@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+}
+
+@media only screen and (min-width: 1024px) {
+}
+
+@media only screen and (max-width: 1023px) {
+}
+
+@media only screen and (min-width: 1400px) {
+}
+
+@media only screen and (min-width: 1500px) {
+}
+
+#demo {
+  width: 100%;
+  height: 475px;
+  border: 2px solid #03A9F4;
+  border-radius: 4px;
+}
+#discourse-comments {
+  margin-top: 2em;
+}
+.show-small {
+  display: none;
+}
+.onPageNav {
+  display: none;
+}
+@media (max-width: 600px) {
+  .hide-small {
+    display: none;
+  }
+  .show-small {
+    display: initial;
+  }
+}
+
+html[data-theme='dark'] .invertDark {
+  filter: invert(1.0)
+}

src/pages/index.js

@@ -0,0 +1,171 @@
+import React from 'react';
+import classnames from 'classnames';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
+//import generateBlogPosts from 'plugin-content-blog'
+
+const features = [
+  {
+    title: <>Document Structure</>,
+    imageUrl: '',
+    description: (
+      <>
+        <p>
+          <b>
+            <a href="docs/architecture_index">Architecture</a>.
+          </b>{" "}
+          Explains various layers that make up Home Assistant.
+        </p>
+        <p>
+          <b>
+            <a href="docs/frontend_index">Frontend</a>.
+          </b>{" "}
+          Explains how to develop the user interface of Home Assistant.
+        </p>
+        <p>
+          <b>
+            <a href="docs/development_index">Backend</a>.
+          </b>{" "}
+          Explains how to build new integrations for Home Assistant.
+        </p>
+        <p>
+          <b>
+            <a href="docs/misc">Misc</a>.
+          </b>{" "}
+          External APIs, Internationalization, asyncio, Hass.io add-ons,
+          updating documentation.
+        </p>
+      </>
+    ),
+  },
+  {
+    title: <>Popular Topics</>,
+    imageUrl: '',
+    description: (
+      <>
+        <ul style={{ flex: "1" }}>
+          <li>
+            <a href="docs/development_index">
+              Add a new integration
+            </a>
+          </li>
+          <li>
+            <a href="docs/internationalization_index">
+              Translate Home Assistant
+            </a>
+          </li>
+          <li>
+            <a href="docs/frontend_index">
+              Improve the frontend
+            </a>
+          </li>
+          <li>
+            <a href="docs/external_api_rest">
+              Extract data from the Home Assistant API
+            </a>
+          </li>
+        </ul>
+        <h3>Source Code</h3>
+        <ul>
+          <li>
+            <a href="https://github.com/home-assistant/home-assistant">
+              Home Assistant
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/home-assistant/home-assistant-polymer">
+              Home Assistant Frontend
+            </a>
+          </li>
+        </ul>
+      </>
+    ),
+  },
+  {
+    title: <>Upcoming Events</>,
+    imageUrl: '',
+    description: (
+      <>
+        <iframe
+          src="https://calendar.google.com/calendar/embed?height=400&amp;wkst=2&amp;bgcolor=%23ffffff&amp;ctz=America%2FLos_Angeles&amp;src=cDA3bjk4Z28xMW9uYW1kMDhkMGttcTZqaHNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%23039BE5&amp;title=Release%20Schedule&amp;mode=AGENDA&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;showNav=0&amp;showDate=0&amp;showTitle=0"
+          style={{ borderWidth: 0, margin: "auto", display: "block" }}
+          width="300"
+          height="200"
+          frameBorder="0"
+          scrolling="no"
+        />
+      </>
+    ),
+  },
+];
+
+
+function Feature({imageUrl, title, description}) {
+  const imgUrl = useBaseUrl(imageUrl);
+  return (
+    <div className={classnames('col col--4', styles.feature)}>
+      {imgUrl && (
+        <div className="text--center">
+          <img className={styles.featureImage} src={imgUrl} alt={title} />
+        </div>
+      )}
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </div>
+  );
+}
+
+function Home() {
+  const context = useDocusaurusContext();
+  const {siteConfig = {}} = context;
+
+  return (
+    <Layout
+      title={`Home Assistant Developer Docs`}
+      description="Get started developing for Home Assistant">
+      <header className={classnames('hero hero--primary', styles.heroBanner)}>
+        <div className="container">
+          <h1 className="hero__title">{siteConfig.title}</h1>
+          <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <p>
+            <a className="hero__text" href="https://www.home-assistant.io">
+              Not a developer? Go to the normal website
+            </a>
+          </p>
+        </div>
+      </header>
+      <main>
+        {features && features.length && (
+          <section className={styles.features}>
+            <div className="container">
+              <div className="row">
+                {features.map((props, idx) => (
+                  <Feature key={idx} {...props} />
+                ))}
+              </div>
+            </div>
+          </section>
+        )}
+        <div className="container">
+          <div className="row">
+            <div className="col col--6 col--offset-3 padding-vert--lg">
+              <iframe
+                width="100%"
+                height="315"
+                src="https://www.youtube.com/embed/Cfasc9EgbMU"
+                frameborder="0"
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen
+              />
+            </div>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  );
+}
+
+export default Home;

src/pages/styles.module.css

@@ -0,0 +1,35 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureImage {
+  height: 200px;
+  width: 200px;
+}