A wider website and documentation navigation revamp (#33601)

Co-authored-by: c0ffeeca7 <38767475+c0ffeeca7@users.noreply.github.com>
Co-authored-by: Franck Nijhof <git@frenck.dev>
This commit is contained in:
Madelena Mak 2024-07-16 07:40:34 -04:00 committed by GitHub
parent 9d46397597
commit 138aa062ea
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
36 changed files with 843 additions and 443 deletions

View File

@ -139,26 +139,48 @@ defaults:
footer: true
sharing: true
sidebar: true
toc: true
# Enable table of contents for integrations and installations
#
# To set toc as a default value, we need to set the scope with an empty path
# and the collection as type
# https://github.com/toshimaru/jekyll-toc/issues/116#issuecomment-644205770
#
- scope:
path: ""
type: dashboards
values:
toc: true
- scope:
path: ""
type: integrations
values:
toc: true
- scope:
path: ""
type: docs
values:
toc: true
- scope:
path: "installation/*"
values:
toc: true
no_toc: true
- scope:
path: "common-tasks/*"
values:
toc: true
- scope:
path: "getting-started/*"
values:
toc: true
- scope:
path: "more-info/*"
values:
toc: true
- scope:
path: "voice_control/*"
values:
toc: true
- scope:
path: "hassio/*"
values:

View File

@ -1,7 +1,7 @@
@charset "UTF-8";
.page h1.title.indent {
font-size: 3.125em;
h1.title.indent {
font-size: 3.5rem;
}
.title.delta, .title.epsilon {
border-bottom: none;
@ -19,15 +19,192 @@
}
@media only screen and (max-width: $menu-collapse) {
html {
font-size: .95em;
font-size: .95rem;
}
.page h1.title.indent {
font-size: 2.875em;
h1.title.indent {
font-size: 3rem;
overflow-wrap: break-word;
hyphens: auto;
}
}
// Wider page width
.grid-wrapper {
padding: 0 24px;
@media only screen and (min-width: $desk-start) {
padding: 0 48px;
}
}
@media only screen and (min-width: $desk-wide-start) {
.integration-page, .documentation-page, .blog-post {
.grid-wrapper>.grid.grid-center {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
}
#sidebar {
.vertical-nav, .recent-categories, .recent-posts, .categories {
background: none;
padding: 0 16px 0 0;
}
}
.documentation-page, .blog-post {
#sidebar #toc-module {
display: none;
}
}
}
// Documentation index
.docs-index {
margin: 0;
&>li {
list-style-type: none;
font-size: 1.5rem;
font-weight: 600;
&>iconify-icon {
margin: 2px 8px 0 0;
transform-origin: left;
transform: scale(1) translateY(10px);
background: #007fa8;
color: white;
padding: 10px;
border-radius: 32px;
}
&>a {
text-decoration: none !important;
&::after {
content: '';
}
}
&>ul {
font-family: $sans-serif;
font-size: 1rem;
font-weight: 500;
text-transform: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
column-gap: 24px;
margin: 0 0 0 28px;
margin: 16px 0 48px !important;
padding: 20px 24px;
background: rgba(0, 0, 0, .01);
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, .1);
a {
text-decoration: none !important;
}
&>li {
list-style-type: none;
&>ul {
margin-left: 20px;
font-size: .85rem;
font-weight: normal;
&>li {
margin: 4px 0;
&:first-child {
margin-top: 8px;
}
&:nth-child(1n+7) {
display: none;
}
&:nth-child(6) {
&::before {
content: 'More...';
}
&>a {
display: none;
}
}
&:last-child {
margin-bottom: 16px;
}
}
}
}
}
}
}
// Vertical Nav
.vertical-nav {
.divided.sidebar-menu {
&>li {
iconify-icon {
margin-right: 8px;
}
ul {
list-style-type: none;
margin: 16px 0 16px 28px;
li {
margin: 8px 0;
}
}
&>ul {
margin: 16px 0 8px 28px;
}
}
}
}
// Table of Contents
#toc-bar {
display: none;
position: sticky;
top: 80px;
padding-left: 32px;
.aside-module {
background: none;
padding: 0;
}
}
@media only screen and (min-width: $desk-wide-start) {
.documentation-page #toc-bar, .integration-page #toc-bar, .blog-post #toc-bar {
display: inline-block;
}
#integration-sidebar #toc-module {
display: none;
}
.documentation-page #sidebar #toc-module {
background: none;
padding: 0;
}
}
// Rounded background for numbered lists
article> {
ol {
@ -109,6 +286,10 @@ ul, ol, dd {
margin-bottom: 27px;
}
.menu > li > a.active {
font-weight: bold;
}
.dark .menu > li > a:hover,
.dark .menu > li > a:focus {
box-shadow: inset 0px -5px rgba($white, .5);
@ -316,7 +497,65 @@ a.material-card:hover {
}
// Blog archive material cards
#archive-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
h2 {
grid-column: 1/-1;
margin: 16px 0 0;
}
a {
text-decoration: none;
}
.material-card {
.img {
background-color: $grayLighter;
width: calc(100%-8px);
aspect-ratio: 120/63;
background-size: cover;
background-position: center;
border-radius: 8px;
margin: 4px;
}
.caption {
padding: 8px 16px 12px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1rem;
.title {
font-weight: 500;
margin-bottom: 4px;
}
.subtitle{
font-size: .85em;
color: $gray;
}
}
svg {
min-width: 24px;
height: 24px;
}
}
}
.feedback {
margin-top: 64px;
h4 {
margin: 0 0 8px !important;
@ -544,9 +783,8 @@ a.material-card:hover {
.seen-press {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
column-gap: 24px;
row-gap: 24px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 24px;
margin: 48px 0;
h2 {
@ -582,6 +820,16 @@ a.material-card:hover {
.round {
border-radius: 50%;
}
@media only screen and (max-width: $lap-end) {
grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
gap: 16px;
img {
max-height: 96px;
}
}
}
.sponsored-by {
@ -597,7 +845,7 @@ a.material-card:hover {
}
}
@media screen and (max-width: 700px) {
@media screen and (max-width: $lap-end) {
.frontpage .events .event {
.caption {
padding-top: 4px;
@ -672,7 +920,25 @@ article.listing {
&>table,
&>.entry-content>table {
background-color: #f3fcf5;
background-color: #fff;
table-layout: auto;
&>thead {
background-color: rgba(0, 0, 0, .025);
// border: 1px solid rgba(0, 0, 0, .1);
border-radius: 16px 16px 0 0;
font-size: .85em;
}
&>tbody {
tr {
border-bottom: 1px solid rgba(0, 0, 0, .1);
&:last-of-type {
border-bottom: 0;
}
}
}
}
p.img {
@ -725,6 +991,7 @@ article.listing {
h2 {
margin-top: 1.75em;
line-height: 1.4;
}
h3 {
@ -858,6 +1125,9 @@ ul.sidebar-menu {
a.active {
color: #000;
font-weight: bold;
border-left: 4px solid $primary-color;
padding: 0 8px;
display: inline-block;
}
ul {
@ -992,7 +1262,7 @@ div.config-vars {
code {
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 0.8em;
color: $primary-color;
color: $link-color;
word-spacing: normal;
word-break: normal;
word-wrap: normal;

View File

@ -1,5 +1,5 @@
$use-grids: true;
$site-width: 1100px;
$site-width: 1560px;
$responsive: true;
$use-gridfix: true;
@ -28,7 +28,7 @@ $white: #fff !default;
// Accent colors
// -------------------------
$blue: #1abcf2 !default;
$blueDark: #0064cd !default;
$blueDark: #007fa8 !default;
$green: #46a546 !default;
$red: #9d261d !default;
$yellow: #ffc40d !default;

View File

@ -16,6 +16,10 @@ body, html {
margin-top: 0;
padding-top: 88px;
width: 100%;
&>.grid-wrapper:last-of-type {
min-height: calc(100vh - 714px);
}
}
h1, h2, h3, h4, h5, h6 {

View File

@ -107,7 +107,7 @@ ul.menu li {
&:hover,
&:focus {
background: $grayLighter;
background: rgba($primary-color, .1);
}
}
}
@ -169,7 +169,7 @@ header .grid {
.menu li a:hover,
.menu li a:focus {
background: $grayLighter;
background: rgba($primary-color, .1);
box-shadow: inset 5px 0px $primary-color;
padding: 15px 15px 15px 25px;
}

View File

@ -20,7 +20,7 @@
}
}
#sidebar {
#sidebar, #left-sidebar, #toc-bar, #integration-sidebar {
position: sticky;
top: 88px;
max-height: calc(100vh - 104px);
@ -43,7 +43,7 @@
}
@media only screen and (max-width: $lap-end) {
#sidebar {
#sidebar, #left-sidebar, #toc-bar, #integration-sidebar {
max-height: fit-content;
.grid {

View File

@ -76,6 +76,7 @@
#HAdemo {
width: 100%;
max-width: 400px;
height: 800px;
border-radius: 48px;
border: 12px double white;

View File

@ -6,7 +6,6 @@
letter-spacing: .005em;
color: $gray;
text-transform: uppercase;
padding-top: 8px;
}
}
.component-search {
@ -38,9 +37,8 @@
// styles for the cards
.hass-option-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
margin: -10px; // grid trick, has to match option-card's margin
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 24px;
div.alert, p.alert-content {
width: 100%;
@ -48,11 +46,9 @@
.option-card {
flex: 0 0 auto;
min-width: 192px;
height: 192px;
aspect-ratio: 1;
display: inline-block;
background-color: #f8f8f8;
margin: 10px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, .12);
padding: 8px;
@ -136,13 +132,14 @@ a.option-card:hover {
@media only screen and (max-width: $palm-end) {
.hass-option-cards {
grid-template-columns: 1fr;
.option-card {
width: calc(100% - 24px) !important;
width: 100% !important;
flex-direction: row;
display: flex;
align-items: center;
height: 80px;
margin: 8px;
.img-container {
margin: 8px;
@ -161,9 +158,8 @@ a.option-card:hover {
}
#components-page {
.hass-option-cards {
grid-template-columns: 1fr;
.option-card {
width: calc(50% - 24px);
}
}
.category_select {
@ -182,6 +178,7 @@ a.option-card:hover {
flex-wrap: wrap;
margin-bottom: 16px;
align-items: flex-end;
gap: 8px;
&>div {
margin-right: 8px;
@ -232,12 +229,13 @@ a.option-card:hover {
}
.btn {
font-size: 1rem;
display: block;
background: 0;
color: black;
box-shadow: none;
text-shadow: none;
padding: 2px;
padding: 4px 0;
border-radius: 0;
&.current {

View File

@ -72,7 +72,7 @@ $responsive: true!default;
* Responsiveness for widescreen/high resolution desktop monitors and beyond?
* Note: `$responsive` variable above must be set to true before enabling this.
*/
$responsive-extra: false!default;
$responsive-extra: true!default;
/**
* Responsive push and pull produce a LOT of code, only turn them on if you
@ -103,7 +103,7 @@ $desk-pull: false!default;
*/
$lap-start: 481px!default;
$desk-start: 1024px!default;
$desk-wide-start: 1200px!default;
$desk-wide-start: 1280px!default;

View File

@ -2,7 +2,6 @@
title: "Script Syntax"
description: "Documentation for the Home Assistant Script Syntax."
toc: true
no_toc: true
---
Scripts are a sequence of {% term actions %} that Home Assistant will execute. Scripts are available as an entity through the standalone [Script integration] but can also be embedded in {% term automations %} and [Alexa/Amazon Echo] configurations.

View File

@ -2,7 +2,6 @@
title: "Conditions"
description: "Documentation about all available conditions."
toc: true
no_toc: true
---
Conditions can be used within a {% term script %} or {% term automation %} to prevent further execution. When a condition evaluates true, the script or automation will be executed. If any other value is returned, the script or automation stops executing. A condition will look at the system at that moment. For example, a condition can test if a switch is currently turned on or off.

View File

@ -1,11 +1,11 @@
<section class="aside-module grid__item one-whole lap-one-half">
<section class="categories aside-module grid__item one-whole lap-one-half">
<h1 class="title epsilon">{% icon "mdi:category" %} Categories</h1>
<ul class="divided">
{% assign categories = site.categories | sort %}
{% for category in categories %}
{% assign category_name = category | first | downcase %}
{% if category_name != "core"%}
<li><a href="/blog/categories/{{ category_name }}/">{{ category | first | replace: '-', ' '}}</a></li>
<li><a href="/blog/categories/{{ category_name }}/">{{ category | first | replace: '-', ' '}} <span class="count">{{ category[1] | size }}</span></a></li>
{% endif %}
{% endfor %}
</ul>

View File

@ -1,22 +1,14 @@
<section class="aside-module grid__item one-whole lap-one-half">
<section class="vertical-nav aside-module grid__item one-whole lap-one-half">
{% assign elements = site.dashboards | sort_natural: 'title' %}
<div class="section">
<h1 class="title epsilon"><iconify-icon icon="mdi:view-dashboard"></iconify-icon> Dashboards</h1>
<ul class="divided sidebar-menu">
<li>{% active_link /dashboards/ Introduction %}</li>
<li>
{% active_link /dashboards/dashboards/ Multiple dashboards %}
</li>
<li>
{% active_link /dashboards/views/ Views %}
</li>
<li>
{% active_link /dashboards/cards/ Cards %}
</li>
<li>
{% active_link /dashboards/badges/ Badges %}
</li>
<li>{% active_link /dashboards/dashboards/ Multiple dashboards %}</li>
<li>{% active_link /dashboards/views/ Views %}</li>
<li>{% active_link /dashboards/cards/ Cards %}</li>
<li>{% active_link /dashboards/badges/ Badges %}</li>
</ul>
</div>
@ -48,14 +40,12 @@
<li>{% active_link /dashboards/features/ Features %}</li>
<li>{% active_link /dashboards/header-footer/ Headers & footers %}</li>
<li>{% active_link /dashboards/actions/ Actions %}</li>
<li>
<a
<li><a
class="external-link"
href="https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card/"
>Developing custom cards
{% icon "tabler:external-link" %}
</a>
</li>
</a></li>
</ul>
</div>
</section>

View File

@ -1,190 +1,16 @@
<section class="aside-module grid__item one-whole lap-one-half">
<section class="vertical-nav aside-module grid__item one-whole lap-one-half">
<div class="section">
<h1 class="title epsilon">Topics</h1>
<h1 class="title epsilon">{% icon "mdi:bookshelf" %} Documentation</h1>
<ul class="divided sidebar-menu">
<li>
<b>{% active_link /faq/ FAQ %}</b>
{% active_link /docs/ Overview %}
|
<b>{% active_link /docs/glossary/ Glossary %}</b>
</li>
<li>
<b>{% icon "mdi:rocket-launch-outline" %} Getting started</b>
<ul>
<li>{% active_link /installation Installation %}</li>
<li>{% active_link /getting-started Getting started & onboarding %}</li>
<li>{% active_link /common-tasks/os/ Common tasks %}</li>
<li>
{% active_link /docs/troubleshooting/ Troubleshooting installation
%}
</li>
<li>
{% active_link /docs/troubleshooting_general/ General troubleshooting %}
</li>
</ul>
</li>
<li>
<b>{% icon "mdi:view-dashboard" %} {% active_link /docs/frontend/ Frontend %}</b>
<ul>
<li>{% active_link /dashboards Dashboards, views, cards %}</li>
<li>{% active_link /docs/organizing/ Organizing: areas, floors, labels, categories, ... %}</li>
<li>{% active_link /docs/frontend/icons/ Icons%}</li>
</ul>
</li>
<li>
<b>{% icon "mdi:cog" %} Configuration</b>
<ul>
<li>{% active_link /docs/configuration/ Configuration.yaml %}</li>
<li>{% active_link /docs/configuration/yaml/ YAML syntax%}</li>
<li>
{% active_link /docs/configuration/basic/ Basic information %}
</li>
<li>
{% active_link /docs/configuration/customizing-devices/ Customizing
entities %}
</li>
<li>
{% active_link /docs/configuration/troubleshooting/ Troubleshooting configuration %}
</li>
<li>
{% active_link /docs/configuration/securing/ Security check points
%}
</li>
</ul>
</li>
<li>
<b>{% icon "mdi:solar-power-variant" %} {% active_link /docs/energy/ Home Energy Management %}</b>
<ul>
<li>{% active_link /docs/energy/electricity-grid/ Electricity grid %}</li>
<li>{% active_link /docs/energy/solar-panels/ Solar panels %}</li>
<li>{% active_link /docs/energy/individual-devices/ Individual devices %}</li>
<li>{% active_link /docs/energy/faq/ FAQ %}</li>
</ul>
</li>
<li>
{% icon "fa-solid:cogs" %} Advanced configuration
<ul>
<li>{% active_link /docs/configuration/remote/ Remote access %}</li>
<li>
{% active_link /docs/configuration/splitting_configuration/
Splitting up the configuration %}
</li>
<li>{% active_link /docs/configuration/packages/ Packages %}</li>
<li>
{% active_link /docs/configuration/secrets/ Storing secrets %}
</li>
<li>{% active_link /docs/configuration/templating/ Templating %}</li>
<li>
{% active_link /docs/configuration/platform_options/ Entity
component platform options %}
</li>
</ul>
</li>
<li>
<b>{% icon "mdi:account-security" %} {% active_link /docs/authentication/ Authentication %}</b>
<ul>
<li>
{% active_link /docs/authentication/providers/ Auth providers %}
</li>
<li>
{% active_link /docs/authentication/multi-factor-auth/ Multi factor
auth %}
</li>
<li>
{% active_link /docs/locked_out/ I'm locked out %}
</li>
</ul>
</li>
<li>
{% icon "clarity:objects-solid" %} Core objects
<ul>
<li>{% active_link /docs/configuration/events/ Events %}</li>
<li>
{% active_link /docs/configuration/state_object/ State objects %}
</li>
</ul>
</li>
<li>
<b><iconify-icon icon="mdi:robot-happy"></iconify-icon> {% active_link /docs/automation/ Automation %}</b>
<ul>
<li>{% active_link /docs/automation/using_blueprints/ Using automation blueprints %}</li>
<li>{% active_link /docs/automation/basics/ Automation basics %}</li>
<li>{% active_link /docs/automation/editor/ Editor %}</li>
<li>{% active_link /docs/automation/trigger/ Triggers %}</li>
<li>{% active_link /docs/automation/condition/ Conditions %}</li>
<li>{% active_link /docs/automation/action/ Actions %}</li>
<li>{% active_link /docs/automation/modes/ Run modes %}</li>
<li>{% active_link /docs/automation/services/ Services %}</li>
<li>{% active_link /docs/automation/templating/ Templates %}</li>
<li>{% active_link /docs/automation/yaml/ YAML %}</li>
<li>
{% active_link /docs/automation/troubleshooting/ Troubleshooting automation %}
</li>
</ul>
</li>
<li>
<b>{% icon "carbon:floorplan" %} {% active_link /docs/blueprint/ Blueprints %}</b>
<ul>
<li>{% active_link /docs/blueprint/tutorial/ Tutorial %}</li>
<li>{% active_link /docs/blueprint/schema/ Blueprint schema %}</li>
<li>{% active_link /docs/blueprint/selectors/ Selectors %}</li>
</ul>
</li>
<li>
<b>{% icon "mdi:database" %} {% active_link /docs/backend/ Backend %}</b>
<ul>
<li>{% active_link /docs/backend/database/ Database %}</li>
</ul>
</li>
<li>
<b>{% icon "mdi:script-text" %} {% active_link /docs/scripts/ Scripts %}</b>
<ul>
<li>{% active_link /docs/scripts/service-calls/ Service calls %}</li>
<li>{% active_link /docs/scripts/conditions/ Conditions %}</li>
</ul>
</li>
<li>
<b>{% icon "mdi:script-text" %} {% active_link /docs/scene/ Scenes %}</b>
<ul>
<li>{% active_link /docs/scene/editor/ Editor %}</li>
</ul>
</li>
<li>
<b>{% icon "mdi:palette" %} {% active_link /docs/tools/ Tools and helpers %}</b>
<ul>
<li>{% active_link /docs/tools/dev-tools/ Developer tools %}</li>
<li>{% active_link /docs/tools/quick-bar/ Quick bar %}</li>
<li>{% active_link /docs/tools/hass/ hass %}</li>
<li>{% active_link /docs/tools/check_config/ check_config %}</li>
</ul>
</li>
<li>
<b>{% icon "simple-icons:mqtt" %} {% active_link /integrations/mqtt MQTT %}</b>
<ul>
<li>{% active_link /integrations/mqtt/#broker-configuration Broker %}</li>
<li>{% active_link /integrations/mqtt/#advanced-broker-configuration Certificate %}</li>
<li>{% active_link /integrations/mqtt/#mqtt-discovery Discovery %}</li>
<li>{% active_link /integrations/mqtt/#publish--dump-services Publish service %}</li>
<li>
{% active_link /integrations/mqtt/#birth-and-last-will-messages Birth and last will messages %}
</li>
<li>{% active_link /integrations/mqtt/#testing-your-setup Testing your setup %}</li>
<li>{% active_link /integrations/mqtt/#logging Logging %}</li>
</ul>
</li>
<li>
<b>{% icon "bitcoin-icons:node-hardware-filled" %} Hardware</b>
<ul>
<li>
<a href="https://green.home-assistant.io/">Home Assistant Green</a>
</li>
<li>
<a href="https://yellow.home-assistant.io/">Home Assistant Yellow</a>
</li>
<li>
<a href="https://connectzbt1.home-assistant.io/">Home Assistant Connect ZBT-1</a>
</li>
</ul>
{% active_link /faq/ FAQ %}
|
{% active_link /docs/glossary/ Glossary %}
</li>
{% include asides/docs_sitemap.html %}
</ul>
</div>
</section>

View File

@ -0,0 +1,277 @@
<li>
<iconify-icon icon="mdi:robot-happy"></iconify-icon> {% active_link /docs/automation/ Automations %}
{% if doc == 'automation' or doc == 'blueprint' or doc == 'scripts' or doc == 'scene' or include.docs_index %}
<ul>
<li>
{% icon "mdi:robot-happy" %} {% active_link /docs/automation/basics/ Basic automations %}
{% if doc == 'automation' or include.docs_index %}
<ul>
<li>{% active_link /docs/automation/using_blueprints/ Using automation blueprints %}</li>
<li>{% active_link /docs/automation/editor/ Editor %}</li>
<li>{% active_link /docs/automation/trigger/ Triggers %}</li>
<li>{% active_link /docs/automation/condition/ Conditions %}</li>
<li>{% active_link /docs/automation/action/ Actions %}</li>
<li>{% active_link /docs/automation/modes/ Run modes %}</li>
<li>{% active_link /docs/automation/services/ Services %}</li>
<li>{% active_link /docs/automation/templating/ Templates %}</li>
<li>{% active_link /docs/automation/yaml/ YAML %}</li>
<li>{% active_link /docs/automation/troubleshooting/ Troubleshooting automation %}</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:palette" %} {% active_link /docs/scene/ Scenes %}
{% if doc == 'scene' or include.docs_index %}
<ul>
<li>{% active_link /docs/scene/editor/ Editor %}</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:palette-swatch" %} {% active_link /docs/blueprint/ Blueprints %}
{% if doc == 'blueprint' or include.docs_index %}
<ul>
<li>{% active_link /docs/blueprint/tutorial/ Tutorial %}</li>
<li>{% active_link /docs/blueprint/schema/ Blueprint schema %}</li>
<li>{% active_link /docs/blueprint/selectors/ Selectors %}</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:script-text" %} {% active_link /docs/scripts/ Scripts %}
{% if doc == 'scripts' or include.docs_index %}
<ul>
<li>{% active_link /docs/scripts/service-calls/ Service calls %}</li>
<li>{% active_link /docs/scripts/conditions/ Conditions %}</li>
</ul>
{% endif %}
</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:gauge" %} {% active_link /dashboards Dashboards %}
{% if root == 'dashboards' or include.docs_index %}
<ul>
{% assign elements = site.dashboards | sort_natural: 'title' %}
<li>
<iconify-icon icon="mdi:about-circle"></iconify-icon> Dashboard basics
<ul>
<li>{% active_link /dashboards/ Introduction %}</li>
<li>{% active_link /dashboards/dashboards/ Multiple dashboards %}</li>
<li>{% active_link /dashboards/views/ Views %}</li>
<li>{% active_link /dashboards/cards/ Cards %}</li>
<li>{% active_link /dashboards/badges/ Badges %}</li>
</ul>
</li>
<li>
<iconify-icon icon="mdi:view-dashboard"></iconify-icon> View types
<ul>
{% for element in elements %}
{% if element.type == "view" %}
<li>{% active_link {{element.url}} {{element.sidebar_label}} %}</li>
{% endif %}
{% endfor %}
</ul>
</li>
<li>
{% icon "mdi:card-multiple" %} Card types
<ul>
{% for element in elements %}
{% if element.type == "card" %}
<li>{% active_link {{element.url}} {{element.sidebar_label}} %}</li>
{% endif %}
{% endfor %}
</ul>
</li>
<li>
{% icon "mdi:cog" %} Advanced
<ul>
<li>{% active_link /dashboards/features/ Features %}</li>
<li>{% active_link /dashboards/header-footer/ Headers & footers %}</li>
<li>{% active_link /dashboards/actions/ Actions %}</li>
<li><a
class="external-link"
href="https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card/"
>Developing custom cards
{% icon "tabler:external-link" %}
</a></li>
</ul>
</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:microphone" %} {% active_link /voice_control/ Voice assistants %}
{% if root == 'voice_control' or include.docs_index %}
<ul>
<li><iconify-icon icon="mdi:devices"></iconify-icon> Devices
<ul>
<li>{% active_link /voice_control/android/ Assist for Android %}</li>
<li>{% active_link /voice_control/apple/ Assist for Apple %}</li>
<li>{% active_link /voice_control/start_assist_from_dashboard/ Starting Assist from your dashboard %}</li>
</ul>
</li>
<li>{% icon "mdi:comment-processing-outline" %} {% active_link /voice_control/ Voice assistants %}
<ul>
<li>{% active_link /voice_control/voice_remote_local_assistant/ Configuring a local assistant %}</li>
<li>{% active_link /voice_control/voice_remote_cloud_assistant/ Configuring a cloud assistant %}</li>
<li>{% active_link /voice_control/voice_remote_expose_devices/ Exposing devices to voice assistant %}</li>
<li>{% active_link /voice_control/install_wake_word_add_on/ Enabling a wake word %}</li>
<li>{% active_link /voice_control/about_wake_word/ About wake words %}</li>
<li>{% active_link /voice_control/builtin_sentences/ Built-in sentences %}</li>
<li>{% active_link /voice_control/custom_sentences/ Custom sentences %}</li>
<li>{% active_link /voice_control/aliases/ Using aliases %}</li>
<li>{% active_link /voice_control/using_tts_in_automation/ Using Piper TTS in automations %}</li>
<li>{% active_link /voice_control/assist_create_open_ai_personality/ Creating a personality with AI %}</li>
</ul>
</li>
<li>{% icon "mdi:checkbox-marked" %} Projects
<ul>
<li>{% active_link /voice_control/s3_box_voice_assistant/ Tutorial: ESP32-S3-BOX voice assistant %}</li>
<li>{% active_link /voice_control/s3-box-customize/ Tutorial: Customize the S3-BOX %}</li>
<li>{% active_link /voice_control/thirteen-usd-voice-remote/ Tutorial: $13 voice assistant %}</li>
<li>{% active_link /voice_control/worlds-most-private-voice-assistant/ Tutorial: World's most private voice assistant %}</li>
<li>{% active_link /voice_control/create_wake_word/ Tutorial: Create your own wake word %}</li>
<li>{% active_link /voice_control/assist_daily_summary/ Tutorial: Your daily summary by Assist %}</li>
</ul>
</li>
<li>{% icon "mdi:account-help" %} Troubleshooting
<ul>
<li>{% active_link /voice_control/troubleshooting/ Troubleshooting Assist %}</li>
<li>{% active_link /voice_control/troubleshooting_the_s3_box/ Troubleshooting the ESP32-S3-BOX %}</li>
</ul>
</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:category" %} {% active_link /docs/organizing/ Organization %}
{% if doc == 'organizing' or include.docs_index %}
<ul>
<li>{% active_link /docs/organizing/ Grouping your assets %}</li>
<li>{% active_link /docs/organizing/tables Working with tables %}</li>
<li>{% active_link /docs/organizing/areas/ Areas %}</li>
<li>{% active_link /docs/organizing/floors/ Floors %}</li>
<li>{% active_link /docs/organizing/labels/ Labels %}</li>
<li>{% active_link /docs/organizing/categories/ Categories %}</li>
<li>{% active_link /docs/frontend/icons/ Icons %}</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:solar-power-variant" %} {% active_link /docs/energy/ Home energy management %}
{% if doc == 'energy' or include.docs_index %}
<ul>
<li>{% active_link /docs/energy/electricity-grid/ Electricity grid %}</li>
<li>{% active_link /docs/energy/solar-panels/ Solar panels %}</li>
<li>{% active_link /docs/energy/individual-devices/ Individual devices %}</li>
<li>{% active_link /docs/energy/faq/ FAQ %}</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:update" %} {% active_link /common-tasks/os/ Common tasks %}
{% if root == 'common-tasks' or include.docs_index %}
<ul>
<li>{% active_link /common-tasks/os/ Home Assistant Operating System %}</li>
<li>{% active_link /common-tasks/container/ Home Assistant Container %}</li>
<li>{% active_link /common-tasks/core/ Home Assistant Core %}</li>
<li>{% active_link /common-tasks/supervised/ Home Assistant Supervised %}</li>
<li>{% active_link /common-tasks/general/ Installation independent %}</li>
<li>{% active_link /docs/troubleshooting_general/ General troubleshooting %}</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:cogs" %} {% active_link /docs/configuration/ Advanced configuration %}
{% if doc == 'configuration' or include.docs_index %}
<ul>
<li>{% active_link /docs/configuration/yaml/ YAML syntax %}</li>
<li>{% active_link /docs/configuration/basic/ Basic information %}</li>
<li>{% active_link /docs/configuration/customizing-devices/ Customizing entities %}</li>
<li>{% active_link /docs/configuration/troubleshooting/ Troubleshooting configuration %}</li>
<li>{% active_link /docs/configuration/securing/ Security check points %}</li>
<li>{% active_link /docs/configuration/remote/ Remote access %}</li>
<li>{% active_link /docs/configuration/splitting_configuration/ Splitting up the configuration %}</li>
<li>{% active_link /docs/configuration/packages/ Packages %}</li>
<li>{% active_link /docs/configuration/secrets/ Storing secrets %}</li>
<li>{% active_link /docs/configuration/events/ Events %}</li>
<li>{% active_link /docs/configuration/state_object/ State objects %}</li>
<li>{% active_link /docs/configuration/templating/ Templating %}</li>
<li>{% active_link /docs/configuration/platform_options/ Entity component platform options %}</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:account-security" %} {% active_link /docs/authentication/ Authentication %}
{% if doc == 'authentication' or include.docs_index %}
<ul>
<li>{% active_link /docs/authentication/providers/ Auth providers %}</li>
<li>{% active_link /docs/authentication/multi-factor-auth/ Multi-factor authentication %}</li>
<li>{% active_link /docs/locked_out/ I'm locked out %}</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:database" %} {% active_link /docs/backend/ Backend %}
{% if doc == 'backend' or include.docs_index %}
<ul>
<li>{% active_link /docs/frontend/ User interface %}</li>
<li>{% active_link /docs/backend/database/ Database %}</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:palette" %} {% active_link /docs/tools/ Tools and helpers %}
{% if doc == 'tools' or include.docs_index %}
<ul>
<li>{% active_link /docs/tools/dev-tools/ Developer tools %}</li>
<li>{% active_link /docs/tools/quick-bar/ Quick bar %}</li>
<li>{% active_link /docs/tools/hass/ hass %}</li>
<li>{% active_link /docs/tools/check_config/ check_config %}</li>
</ul>
{% endif %}
</li>
<li>
{% icon "mdi:cellphone" %} <a href="https://companion.home-assistant.io/docs">iOS and Android apps {% icon "tabler:external-link" %}</a>
</li>
<li>
{% icon "simple-icons:mqtt" %} {% active_link /integrations/mqtt MQTT %}
{% if doc == 'mqtt' or include.docs_index %}
<ul>
<li>{% active_link /integrations/mqtt/#broker-configuration Broker %}</li>
<li>{% active_link /integrations/mqtt/#advanced-broker-configuration Certificate %}</li>
<li>{% active_link /integrations/mqtt/#mqtt-discovery Discovery %}</li>
<li>{% active_link /integrations/mqtt/#publish--dump-services Publish service %}</li>
<li>{% active_link /integrations/mqtt/#birth-and-last-will-messages Birth and last will messages %}</li>
<li>{% active_link /integrations/mqtt/#testing-your-setup Testing your setup %}</li>
<li>{% active_link /integrations/mqtt/#logging Logging %}</li>
</ul>
{% endif %}
</li>
<li>
{% icon "bitcoin-icons:node-hardware-filled" %} Official hardware
<ul>
<li><a href="https://green.home-assistant.io/">Home Assistant Green {% icon "tabler:external-link" %}</a></li>
<li><a href="https://yellow.home-assistant.io/">Home Assistant Yellow {% icon "tabler:external-link" %}</a></li>
<li><a href="https://connectzbt1.home-assistant.io/">Home Assistant Connect ZBT-1 {% icon "tabler:external-link" %}</a></li>
</ul>
</li>

View File

@ -1,24 +1,34 @@
<section class="aside-module grid__item one-whole lap-one-half">
{% assign url_parts = page.url | split: '/' %}
{% assign root = url_parts[1] %}
{% assign doc = url_parts[2] %}
<section class="vertical-nav aside-module grid__item one-whole lap-one-half">
<div class="section">
<h1 class="title epsilon">{% icon "mdi:rocket-launch-outline" %} Getting started</h1>
<ul class="divided sidebar-menu">
<li>{% active_link /installation/ Installation %}</li>
<li>{% active_link /installation/ Installation %}
{% if root == 'installation' %}
<ul>
<li><a href="https://green.home-assistant.io/">Home Assistant Green {% icon "tabler:external-link" %}</a></li>
<li><a href="https://yellow.home-assistant.io/">Home Assistant Yellow {% icon "tabler:external-link" %}</a></li>
<li>{% active_link /installation/raspberrypi Raspberry Pi %}</li>
<li>{% active_link /installation/odroid ODROID %}</li>
<li>{% active_link /installation/generic-x86-64 Generic x86-64 %}</li>
<li>{% active_link /installation/linux Linux %}</li>
<li>{% active_link /installation/macos macOS %}</li>
<li>{% active_link /installation/windows Windows %}</li>
<li>{% active_link /installation/alternative Other systems %}</li>
</ul>
{% endif %}
</li>
<li>{% active_link /getting-started/onboarding/ Onboarding %}</li>
<li>{% active_link /getting-started/concepts-terminology/ Concepts and terminology %}</li>
<li>{% active_link /getting-started/onboarding_dashboard/ Edit the dashboard %}</li>
<li>{% active_link /getting-started/integration/ Integration %}</li>
<li>{% active_link /getting-started/automation/ Automation %}</li>
<li>
{% active_link /getting-started/presence-detection/ Presence detection
%}
</li>
<li>
{% active_link /getting-started/join-the-community/ Join the community
%}
</li>
<li>
{% active_link /getting-started/configuration/ Next steps %}
</li>
<li>{% active_link /getting-started/onboarding_dashboard/ Editing the dashboard %}</li>
<li>{% active_link /getting-started/integration/ Adding integrations %}</li>
<li>{% active_link /getting-started/automation/ Automating devices %}</li>
<li>{% active_link /getting-started/presence-detection/ Presence detection %}</li>
<li>{% active_link /getting-started/join-the-community/ Join the community %}</li>
<li>{% active_link /getting-started/configuration/ Next steps %}</li>
</ul>
</div>
</section>

View File

@ -5,17 +5,9 @@
<ul class="divided sidebar-menu">
<li>{% active_link /docs/organizing/ Grouping your assets %}</li>
<li>{% active_link /docs/organizing/tables Working with tables %}</li>
<li>
{% active_link /docs/organizing/areas/ Areas %}
</li>
<li>
{% active_link /docs/organizing/floors/ Floors %}
</li>
<li>
{% active_link /docs/organizing/labels/ Labels %}
</li>
<li>
{% active_link /docs/organizing/categories/ Categories %}
</li>
<li>{% active_link /docs/organizing/areas/ Areas %}</li>
<li>{% active_link /docs/organizing/floors/ Floors %}</li>
<li>{% active_link /docs/organizing/labels/ Labels %}</li>
<li>{% active_link /docs/organizing/categories/ Categories %}</li>
</ul>
</div>

View File

@ -0,0 +1,14 @@
{% capture recent_categories %}{% for post in site.posts limit: 20 %}{{ post.categories | join: ", " }}, {% endfor %}{% endcapture %}
{% assign recent_categories = recent_categories | split: ", " | uniq | compact %}
<section class="recent-categories aside-module grid__item one-whole lap-one-half">
<h1 class="title epsilon">{% icon "mdi:category" %} Recent categories</h1>
<ul class="divided">
{% for category in recent_categories limit: 10 %}
{% assign category_link = category | downcase %}
{{ category_name }}
<li><a href="/blog/categories/{{ category_link }}/">{{ category | replace: '-', ' '}} <span class="count">{{ site.categories[category] | size }}</span></a></li>
{% endfor %}
<li><a href="/blog/categories/announcements/">View all categories</a></li>
</ul>
</section>

View File

@ -1,7 +1,9 @@
<section id="recent-posts" class="aside-module grid__item one-whole lap-one-half">
{% assign posts_to_show = include.posts | default: 5 %}
<section class="recent-posts aside-module grid__item one-whole lap-one-half">
<h1 class="title epsilon">{% icon "mdi:newspaper-variant-multiple" %} Recent Posts</h1>
<ul class="divided">
{% for post in site.posts limit: site.recent_posts %}
{% for post in site.posts limit: posts_to_show %}
{% if post.url != page.url %}
<li class="post">
<a href="{{ post.url }}">{{ post.title }}</a>

View File

@ -1,6 +1,4 @@
<section class="aside-module grid__item one-whole lap-one-half">
{% assign elements = site.dashboards | sort_natural: 'title' %}
<div class="section">
<h1 class="title epsilon"><iconify-icon icon="mdi:devices"></iconify-icon> Devices</h1>
<ul class="divided sidebar-menu">

View File

@ -1,19 +1,21 @@
{% capture category %}{{ post.categories | size }}{% endcapture %}
<div class="grid">
<div class="grid__item one-fifth palm-one-whole">
<time datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate>
{{ post.date | date: "<span class='month'>%b</span> <span class='day'>%d</span>"}}
</time>
</div>
<div class="grid__item four-fifths palm-one-whole">
<h1 class="gamma"><a href="{{ post.url }}">{{post.title}}</a></h1>
{% if category != '0' %}
<footer class="meta">
{% include blog/post/tags.html %}
</footer>
{% endif %}
<a href="{{ post.url }}">
<div class="material-card">
<div class="img" style="background-image: url({{ post.og_image }})"></div>
<div class="caption">
<div>
<div class="title">
{{ post.title }}
</div>
<div class="subtitle">
<time datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate>
{{ post.date | date: "<span class='month'>%b</span> <span class='day'>%d</span>"}}
</time>
</div>
</div>
<svg viewBox="0 0 24 24">
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/>
</svg>
</div>
</div>
</a>
</div>

View File

@ -4,7 +4,7 @@
<a href="{{ post.url }}">{{ post.title }}</a>
</h1>
{% else %}
<h1 class="title indent">{{ page.title }}</h1>
<h1>{{ page.title }}</h1>
{% endif %}
{% unless post.meta == false %}

View File

@ -1,4 +1,6 @@
{% assign recent_release_post = site.categories['Core'].first %}
{% assign url_parts = page.url | split: '/' %}
{% assign root = url_parts[1] %}
<div class="grid-wrapper">
<div class="grid">
@ -23,33 +25,22 @@
data-close="⨉"
></label>
<ul class="menu pull-right">
<li><a href="/getting-started/">Getting started</a></li>
<li><a {% if root == 'getting-started' or root == 'installation' %}class="active"{% endif %} href="/getting-started/">Getting started</a></li>
<li>
<a href="/docs/"
>Documentation {% icon "mdi:chevron-down" %}</i
></a>
<a {% if root == 'docs' or root == 'dashboards' or root == 'voice_control' or root == 'common-tasks' %}class="active"{% endif %} href="/docs/">Documentation {% icon "mdi:chevron-down" %}</a>
<ul>
<li><a href="/installation/">{% icon "simple-icons:homeassistant" %} Installation</a></li>
<li>
<a href="/docs/configuration/">{% icon "mdi:cog" %} Configuration</a>
</li>
<li>
<a href="/docs/automation/">{% icon "mdi:robot-happy" %} Automation</a>
</li>
<li>
<a href="/docs/scripts/">{% icon "mdi:script-text" %} Scripting</a>
</li>
<li>
<a href="/dashboards/">{% icon "mdi:view-dashboard" %} Dashboards</a>
</li>
<li>
<a href="/voice_control/">{% icon "mdi:comment-processing-outline" %} Voice assistant</a>
</li>
<li><a href="/docs/automation/">{% icon "mdi:robot-happy" %} Automations</a></li>
<li><a href="/dashboards/">{% icon "mdi:gauge" %} Dashboards</a></li>
<li><a href="/voice_control/">{% icon "mdi:comment-processing-outline" %} Voice assistants</a></li>
<li><a href="/docs/organizing/">{% icon "mdi:view-grid" %} Device organization</a></li>
<li><a href="/docs/energy/">{% icon "mdi:solar-power-variant" %} Energy management</a></li>
<li><a href="/docs/configuration/">{% icon "mdi:cog" %} Advanced configuration</a></li>
</ul>
</li>
<li><a href="/integrations/">Integrations</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/help/">Need help?</a></li>
<li><a {% if root == 'integrations' %}class="active"{% endif %} href="/integrations/">Integrations</a></li>
<li><a {% if root == 'blog' %}class="active"{% endif %} href="/blog/">Blog</a></li>
<li><a {% if root == 'help' %}class="active"{% endif %} href="/help/">Need help?</a></li>
<li>
<div class="docsearch" id="docsearch"></div>
</li>

View File

@ -4,7 +4,7 @@
<div class="grid__item flex__item three-fifths lap-one-whole palm-one-whole">
{% include custom/welcome.html %}
</div>
<div class="grid__item flex__item two-fifths lap-one-whole palm-one-whole">
<div class="grid__item flex__item two-fifths lap-one-whole palm-one-whole" style="text-align: center;">
<iframe id="HAdemo" title="Home Assistant Demo"
src="https://demo.home-assistant.io/?frontpage">
</iframe>

View File

@ -0,0 +1,3 @@
<div class="grid">
{% include site/vertical_nav.html side="left" %}
</div>

View File

@ -1,46 +1,9 @@
<div class="grid">
{% assign url_parts = page.url | split: '/' %}
{% assign root = url_parts[1] %}
{% if root == 'integrations' %}
{% include asides/component_navigation.html %}
{% elsif root == 'installation' %}
{% include asides/installation_navigation.html %}
{% elsif root == 'common-tasks' %}
{% include asides/common_tasks_navigation.html %}
{% elsif root == 'dashboards' %}
{% include asides/dashboards_navigation.html %}
{% elsif root == 'docs' and url_parts[2] == "organizing" %}
{% include asides/organizing_navigation.html %}
{% elsif root == 'developers' or root == 'help' %}
{% include asides/help_navigation.html %}
{% elsif root == 'getting-started' %}
{% include asides/getting_started_navigation.html %}
{% elsif root == 'docs' %}
{% include asides/docs_navigation.html %}
{% elsif root == 'projects' %}
{% include asides/docs_navigation.html %}
{% elsif root == 'faq' %}
{% include asides/faq_navigation.html %}
{% elsif root == 'voice_control' %}
{% include asides/voice_navigation.html %}
{% elsif root == 'hassio' or root == 'addons' %}
{% include asides/hassio_navigation.html %}
{% elsif root == 'cloud' %}
{% include asides/cloud_navigation.html %}
{% elsif root == 'conference' %}
{% include asides/conference_navigation.html %}
{% else %}
{% if page.blog_index %}
{% include asides/categories.html %}
{% else %}
{% include post/sharing.html %}
{% include asides/recent_posts.html %}
{% endif %}
{% include asides/about.html %}
{% endif %}
{% include site/vertical_nav.html %}
{% if page.toc %}
{%- unless page.no_toc -%}
<section class="aside-module grid__item one-whole lap-one-half">
<section id="toc-module" class="aside-module grid__item one-whole lap-one-half">
<div class='section'>
<h1 class="title epsilon">{% icon "mdi:toc" %} On this page</h1>
{{ content | toc_only }}
@ -50,7 +13,7 @@
{% endif %}
{%- if page.ha_category.first -%}
<section class="aside-module grid__item one-whole lap-one-half">
<section id="category-module" class="aside-module grid__item one-whole lap-one-half">
<div class='section'>
<h1 class="title epsilon">{% icon "mdi:category" %} Categories</h1>
<ul class='divided'>
@ -64,17 +27,3 @@
</section>
{%- endif -%}
</div>
<script type="text/javascript">
// Some sidebars are longer than the screen so they can't be locked.
document.addEventListener('DOMContentLoaded', function() {
const sidebar = document.querySelector("#sidebar").querySelector(".grid");
const footer = document.querySelector("footer").querySelector(".grid")
if (sidebar) {
const content = document.querySelector(".page-content").querySelector(".grid-wrapper");
const windowHeight = window.innerHeight - 82;
if (sidebar.clientHeight > content.clientHeight || sidebar.clientHeight > windowHeight - footer.clientHeight) {
sidebar.style.display = "contents"
}
}
});
</script>

View File

@ -0,0 +1,49 @@
{% assign url_parts = page.url | split: '/' %}
{% assign root = url_parts[1] %}
{% assign doc = url_parts[2] %}
{% if root == 'integrations' %}
{% include asides/component_navigation.html %}
{% elsif root == 'getting-started' %}
{% include asides/getting_started_navigation.html %}
{% elsif root == 'installation' %}
{% include asides/getting_started_navigation.html %}
{% elsif root == 'common-tasks' %}
{% include asides/docs_navigation.html %}
{% elsif root == 'dashboards' %}
{% include asides/docs_navigation.html %}
{% elsif root == 'voice_control' %}
{% include asides/docs_navigation.html %}
{% elsif root == 'docs' %}
{% include asides/docs_navigation.html %}
{% elsif root == 'projects' %}
{% include asides/docs_navigation.html %}
{% elsif root == 'developers' or root == 'help' %}
{% include asides/help_navigation.html %}
{% elsif root == 'faq' %}
{% include asides/faq_navigation.html %}
{% elsif root == 'hassio' or root == 'addons' %}
{% include asides/hassio_navigation.html %}
{% elsif root == 'cloud' %}
{% include asides/cloud_navigation.html %}
{% elsif root == 'conference' %}
{% include asides/conference_navigation.html %}
{% else %}
{% if page.blog_index %}
{% include asides/recent_categories.html %}
{% include asides/recent_posts.html posts='5' %}
{% else %}
{% if doc == 'categories' %}
{% include asides/categories.html %}
{% elsif root == 'blog' %}
{% include asides/recent_posts.html posts='10' %}
{% include post/sharing.html %}
{% else %}
{% include post/sharing.html %}
{% endif %}
{% endif %}
{% endif %}

View File

@ -1,17 +1,16 @@
---
title: "Blog index"
layout: page
feedback: false
---
<div id="archive-list">
{% for post in site.categories[page.category] %}
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% unless year == this_year %}
{% assign year = this_year %}
<h2>{{ year }}</h2>
{% endunless %}
<article>
{% include blog/archive_post.html %}
</article>
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% unless year == this_year %}
{% assign year = this_year %}
<h2>{{ year }}</h2>
{% endunless %}
{% include blog/archive_post.html %}
{% endfor %}
</div>

View File

@ -1,5 +1,9 @@
{% assign url_parts = page.url | split: '/' %}
{% assign root = url_parts[1] %}
{% assign doc = url_parts[2] %}
{% include site/head.html %}
<body {% if page.body_id %} id="{{ page.body_id }}"{% elsif page.layout == "landingpage" %} id="landingpage"{% endif %}>
<body {% if page.body_id %} id="{{ page.body_id }}"{% elsif page.layout == "landingpage" %} id="landingpage"{% endif %} class="{% if root == 'docs' or root == 'dashboards' or root == 'voice_control' or root == 'installation' or root == 'getting-started' or root == 'common-tasks' %}documentation-page{% endif %}{% if root == 'integrations' %}integration-page{% endif %}{% if root == 'blog' %}blog-post{% endif %}">
<header class='site-header {% if page.dark_header %}dark{% endif %}'>
{% include site/header.html %}
</header>
@ -12,12 +16,30 @@
<div class="grid-wrapper">
<div class="grid grid-center">
{% if page.toc %}
{%- unless page.no_toc -%}
<aside id="toc-bar" class="grid__item desk-wide-one-sixth">
<section class="aside-module grid__item one-whole">
<div class='section'>
<h1 class="title epsilon">{% icon "mdi:toc" %} On this page</h1>
{{ content | toc_only }}
</div>
</section>
</aside>
{%- endunless -%}
{% endif %}
{% if page.is_post and page.sidebar == false %}
<div class="grid__item four-fifths lap-one-whole palm-one-whole">
<div class="grid__item four-fifths desk-wide-three-quarters lap-one-whole palm-one-whole">
{% elsif page.no_toc == true %}
<div class="grid__item one-whole desk-wide-three-quarters">
{% elsif page.is_homepage or page.layout == "landingpage" %}
<div class="grid__item one-whole">
{% elsif doc=="categories" %}
<div class="grid__item two-thirds desk-wide-three-quarters lap-one-whole palm-one-whole">
{% else %}
<div class="grid__item two-thirds lap-one-whole palm-one-whole">
<div class="grid__item two-thirds desk-wide-seven-twelfths lap-one-whole palm-one-whole">
{% endif %}
{% if page.is_homepage or page.layout == "landingpage" %}
@ -27,8 +49,13 @@
{% endif %}
</div>
{% unless page.sidebar == false or page.layout == "landingpage" %}
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
{% unless page.sidebar == false or page.layout == "landingpage" %}
{% if root == 'integrations' %}
<aside id="integration-sidebar" class="grid__item one-third desk-wide-one-quarter lap-one-whole palm-one-whole">
{% else %}
<aside id="sidebar" class="grid__item one-third desk-wide-one-quarter lap-one-whole palm-one-whole">
{% endif %}
{% include site/sidebar.html %}
</aside>
{% endunless %}

View File

@ -20,7 +20,11 @@ layout: default
</div>
{% endif %}
<h1 class="title indent">
{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}
{% if page.title contains "Category:" %}
{{ page.title | replace: "-", " " | replace: "Category: ", "" }}
{% else %}
{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}
{% endif %}
</h1>
</header>
{% if page.collection == "integrations" %}

View File

@ -1,6 +1,7 @@
---
layout: default
is_post: true
feedback: false
---
<article class="post">

View File

@ -2,21 +2,25 @@
layout: default
regenerate: true
blog_index: true
feedback: false
---
{% assign index = true %}
{% for post in paginator.posts %}
<article class="listing">
{% include blog/post/article.html %}
</article>
<hr>
{% endfor %}
<div class="pagination">
{% if paginator.next_page %}
<a class="btn pull-left" href="{{paginator.next_page_path}}">&larr; Older</a>
{% endif %}
{% assign index = true %}
<h1 class="title indent">Blog</h1>
{% if paginator.previous_page %}
<a class="btn pull-right" href="{{paginator.previous_page_path}}">Newer &rarr;</a>
{% endif %}
</div>
{% for post in paginator.posts %}
<article class="listing">
{% include blog/post/article.html %}
</article>
<hr>
{% endfor %}
<div class="pagination">
{% if paginator.next_page %}
<a class="btn pull-left" href="{{paginator.next_page_path}}">&larr; Older</a>
{% endif %}
{% if paginator.previous_page %}
<a class="btn pull-right" href="{{paginator.previous_page_path}}">Newer &rarr;</a>
{% endif %}
</div>

17
source/docs/index.html Normal file
View File

@ -0,0 +1,17 @@
---
title: "Documentation"
description: "Documentation for Home Assistant"
feedback: false
no_toc: true
---
<p>The documentation covers beginner to advanced topics around the installation, setup, configuration, and usage of Home Assistant.</p>
<p>
To see what Home Assistant can do, take a look at the <a href="https://demo.home-assistant.io">demo page</a>.
</p>
<ul class="docs-index">
{% include asides/docs_sitemap.html docs_index=true %}
</ul>

View File

@ -1,50 +0,0 @@
---
title: "Documentation"
description: "Documentation for Home Assistant"
feedback: false
---
The documentation covers beginner to advanced topics around the installation, setup, configuration, and usage of Home Assistant.
<div class="text-center hass-option-cards" markdown="0">
<a class='option-card' href='/getting-started/'>
<div class='img-container'>
<img src='https://brands.home-assistant.io/homeassistant/icon.png' />
</div>
<div class='title'>Installation</div>
</a>
<a class='option-card' href='/docs/configuration/'>
<div class='img-container'>
<img src='/images/supported_brands/pencil.png' />
</div>
<div class='title'>Configuration</div>
</a>
<a class='option-card' href='/integrations/mqtt/'>
<div class='img-container'>
<img src='https://brands.home-assistant.io/mqtt/icon.png' />
</div>
<div class='title'>MQTT</div>
</a>
<a class='option-card' href='/dashboards/'>
<div class='img-container'>
<img src='/images/supported_brands/view-dashboard.png' />
</div>
<div class='title'>Dashboards</div>
</a>
<a class='option-card' href='https://companion.home-assistant.io/'>
<div class='img-container'>
<img src='https://brands.home-assistant.io/mobile_app/icon.png' />
</div>
<div class='title'>Android and iOS</div>
</a>
<a class='option-card' href='/voice_control/'>
<div class='img-container'>
<img src='/images/assist/assist-icon.svg' />
</div>
<div class='title'>Voice assistant</div>
</a>
</div>
<br/>
To see what Home Assistant can do, take a look at the [demo page](https://demo.home-assistant.io).

View File

@ -2,9 +2,12 @@
title: "Getting started"
description: "Getting started with Home Assistant"
body_id: getting_started
feedback: false
show_title: true
---
Thanks for choosing Home Assistant for your smart home. Here are the basic steps to get you started on the journey to a more private, powerful, and sustainable home.
<!-- textlint-disable -->
{% include getting-started/next_step.html step="Installation" link="/installation/" icon="simple-icons:homeassistant" %}
<!-- textlint-enable -->

View File

@ -1,7 +1,6 @@
---
title: "Reporting issues"
description: "Reporting issues about Home Assistant"
sidebar: false
related:
- docs: /docs/configuration/
title: Configuration.yaml file