mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-31 21:18:03 +00:00
Learn page: map getting started content, add layout (#26846)
Co-authored-by: Franck Nijhof <frenck@frenck.nl> Co-authored-by: Stefan Agner <stefan@agner.ch>
This commit is contained in:
parent
03b977bd51
commit
81d774e446
@ -137,6 +137,7 @@ defaults:
|
||||
- scope:
|
||||
path: ""
|
||||
values:
|
||||
layout: page
|
||||
comments: false
|
||||
footer: true
|
||||
sharing: true
|
||||
|
@ -1,28 +0,0 @@
|
||||
---
|
||||
layout: guide
|
||||
metaTitle: Get started - Learn
|
||||
title: Get started
|
||||
order: 1
|
||||
icon: images/icon/get-started.svg
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas eget sit euismod volutpat nisl arcu suspendisse mauris. Diam, eu pulvinar eget amet mauris. Erat facilisis lobortis ac odio sem risus turpis vitae. Id commodo purus nam aliquet urna augue. Suscipit felis leo sagittis habitasse vitae, justo, ut molestie. Commodo, gravida enim tortor elementum integer arcu. Eget dui in sagittis neque bibendum bibendum aliquam et nunc. Mus blandit pretium id enim egestas venenatis aenean. Elit sit nibh ornare congue malesuada odio convallis est condimentum. Amet, nibh volutpat faucibus non. Viverra eros purus sem ac. In magna dictum consequat mauris elementum maecenas quis tempus. Ipsum eget varius nec facilisi iaculis sollicitudin fringilla. Duis consequat, venenatis porttitor phasellus enim at velit hendrerit. Pulvinar adipiscing natoque cursus arcu dis neque tellus, id. Risus viverra ultricies varius ullamcorper. Mauris ornare ullamcorper ultricies et sed ut.
|
||||
|
||||
## Devices
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas eget sit euismod volutpat nisl arcu suspendisse mauris. Diam, eu pulvinar eget amet mauris. Erat facilisis lobortis ac odio sem risus turpis vitae. Id commodo purus nam aliquet urna augue. Suscipit felis leo sagittis habitasse vitae, justo, ut molestie. Commodo, gravida enim tortor elementum integer arcu. Eget dui in sagittis neque bibendum bibendum aliquam et nunc. Mus blandit pretium id enim egestas venenatis aenean. Elit sit nibh ornare congue malesuada odio convallis est condimentum. Amet, nibh volutpat faucibus non. Viverra eros purus sem ac. In magna dictum consequat mauris elementum maecenas quis tempus. Ipsum eget varius nec facilisi iaculis sollicitudin fringilla. Duis consequat, venenatis porttitor phasellus enim at velit hendrerit. Pulvinar adipiscing natoque cursus arcu dis neque tellus, id. Risus viverra ultricies varius ullamcorper. Mauris ornare ullamcorper ultricies et sed ut.
|
||||
|
||||
## Downloads
|
||||
|
||||
Rutrum volutpat, vel, massa nisl proin. Potenti dictum enim, in urna sed vulputate blandit. Sapien facilisi ut sapien sed nunc. Viverra tortor tincidunt iaculis nec, nibh in. Neque massa vitae quam dolor faucibus. Eget risus cras sagittis hendrerit convallis lacus proin cursus nibh. Nunc tempor iaculis nisl, tempus posuere donec. Porta consectetur cursus risus in commodo adipiscing vestibulum consequat. Vitae habitasse sit neque ultrices dolor, lacus. Volutpat, purus, est amet a. Eleifend quis mollis venenatis, orci donec a. Aliquam vel sit tristique aliquet nisl. Sit lorem lacus bibendum scelerisque eu arcu scelerisque.
|
||||
|
||||
## OS
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas eget sit euismod volutpat nisl arcu suspendisse mauris. Diam, eu pulvinar eget amet mauris. Erat facilisis lobortis ac odio sem risus turpis vitae. Id commodo purus nam aliquet urna augue. Suscipit felis leo sagittis habitasse vitae, justo, ut molestie. Commodo, gravida enim tortor elementum integer arcu. Eget dui in sagittis neque bibendum bibendum aliquam et nunc. Mus blandit pretium id enim egestas venenatis aenean. Elit sit nibh ornare congue malesuada odio convallis est condimentum. Amet, nibh volutpat faucibus non. Viverra eros purus sem ac. In magna dictum consequat mauris elementum maecenas quis tempus. Ipsum eget varius nec facilisi iaculis sollicitudin fringilla. Duis consequat, venenatis porttitor phasellus enim at velit hendrerit. Pulvinar adipiscing natoque cursus arcu dis neque tellus, id. Risus viverra ultricies varius ullamcorper. Mauris ornare ullamcorper ultricies et sed ut.
|
||||
|
||||
## Troubleshoot
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas eget sit euismod volutpat nisl arcu suspendisse mauris. Diam, eu pulvinar eget amet mauris. Erat facilisis lobortis ac odio sem risus turpis vitae. Id commodo purus nam aliquet urna augue. Suscipit felis leo sagittis habitasse vitae, justo, ut molestie. Commodo, gravida enim tortor elementum integer arcu. Eget dui in sagittis neque bibendum bibendum aliquam et nunc. Mus blandit pretium id enim egestas venenatis aenean. Elit sit nibh ornare congue malesuada odio convallis est condimentum. Amet, nibh volutpat faucibus non. Viverra eros purus sem ac. In magna dictum consequat mauris elementum maecenas quis tempus. Ipsum eget varius nec facilisi iaculis sollicitudin fringilla. Duis consequat, venenatis porttitor phasellus enim at velit hendrerit. Pulvinar adipiscing natoque cursus arcu dis neque tellus, id. Risus viverra ultricies varius ullamcorper. Mauris ornare ullamcorper ultricies et sed ut.
|
77
source/_includes/guides.html
Normal file
77
source/_includes/guides.html
Normal file
@ -0,0 +1,77 @@
|
||||
<!-- main div start -->
|
||||
<section class="container mx-auto relative pt-20 md:pt-[180px]">
|
||||
<div class="top-rect">
|
||||
</div>
|
||||
<div class="h-[375px] absolute min-w-[107%] overflow-x-clip">
|
||||
<img src="{{ site.baseurl }}{{page.icon}}" class="absolute leading-[0px] top-[150px] w-[50%] left-auto right-[50px] opacity-50" alt="{{guide.title}}" loading="lazy">
|
||||
</div>
|
||||
<div class="relative z-20 md:flex">
|
||||
<div class="px-5 md:flex pt-10">
|
||||
<!-- left section -->
|
||||
<div class="w-full md:w-1/4 sticky self-start top-10 mr-16 h-full">
|
||||
<a href="{{ site.baseurl }}learn">
|
||||
<div class="flex text-grey opacity-50 cursor-pointer mb-5">
|
||||
<img src="{{ site.baseurl }}images/icon/arrow-left.svg" alt="arrow-left" loading="lazy">
|
||||
<p class="ml-5 hidden md:block">Back</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="relative h-full hidden md:block guide-sidebar">
|
||||
<div class="relative guide grid mt-5">
|
||||
{% toc %}
|
||||
</div>
|
||||
<div class="absolute right-[2px] top-0 w-[1px] bg-border-line h-full"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right section -->
|
||||
<article class="w-full md:w-3/4 md:pr-20 snap">
|
||||
<h1 class="text-[32px] md:text-[64px] font-semibold text-black md:pb-0 font-bold mb-0">{{page.title}}</h1>
|
||||
<div class="content guide-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
const guideTocMenus = document.querySelectorAll(".toc-entry");
|
||||
|
||||
for (let li of guideTocMenus) {
|
||||
li.addEventListener("click", function(){
|
||||
// 1. Remove Class from All Lis
|
||||
for (let li of guideTocMenus) {
|
||||
li.classList.remove('guide-active');
|
||||
}
|
||||
|
||||
// 2. Add Class to Relevant Li
|
||||
this.classList.add('guide-active');
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const headings = document.querySelectorAll('h2 a[name]');
|
||||
|
||||
document.addEventListener('scroll', (e) => {
|
||||
headings.forEach(ha => {
|
||||
const rect = ha.getBoundingClientRect();
|
||||
if(rect.top > 0 && rect.top < 200) {
|
||||
const location = window.location.toString().split('#')[0];
|
||||
history.replaceState(null, null, location + '#' + ha.name);
|
||||
|
||||
for (let li of guideTocMenus) {
|
||||
const aHref = li.getElementsByTagName('a')[0].getAttribute("href");
|
||||
|
||||
if(aHref === ('#' + ha.name)) {
|
||||
li.classList.add('guide-active');
|
||||
} else {
|
||||
li.classList.remove('guide-active');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
@ -1,5 +1,6 @@
|
||||
{% include head.html %}
|
||||
<body class="{% if page.layout == 'blog' or page.layout == 'post' %}bg-grey-primary{% endif %} relative">
|
||||
<body {% if page.body_id %} id="{{ page.body_id }}"{% elsif page.layout == "landingpage" %} id="landingpage"{% endif %}
|
||||
class="{% if page.layout == 'blog' or page.layout == 'post' %}bg-grey-primary{% endif %} relative">
|
||||
<!-- header -->
|
||||
{% include header.html %}
|
||||
<!-- searchBox -->
|
||||
|
@ -78,6 +78,5 @@ layout: default
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
<!-- main div end -->
|
@ -6,6 +6,19 @@ layout: default
|
||||
<div class="relative z-20">
|
||||
<h1 class="pt-[80px] sm:pt-[200px] pb-[55px] md:pb-[120px] text-white text-[32px] md:text-[68px] text-center font-bold">{{page.title}}</h1>
|
||||
<div class="learn-grid grid md:grid-cols-2 lg:grid-cols-3 tracking-[-0.02em] text-black">
|
||||
<div class="border-border-line border rounded-[40px] mb-10 p-7 md:py-14 md:px-2 bg-white text-center mx-2 md:mx-5">
|
||||
<div class="h-[34px] md:h-[70px] mb-10 text-center"><a href="{{guide.url}}"><img src="{{ site.baseurl }}images/icon/get-started.svg" class="m-auto h-full" alt="Get started" loading="lazy"></a></div>
|
||||
<a href="{{guide.url}}" class="text-lg md:text-4xl font-bold">Get started</a>
|
||||
<div class="hidden md:block mt-8">
|
||||
<a href="/installation/" class="text-lg font-medium mb-5 block">Installation</a>
|
||||
<a href="/getting-started/onboarding/" class="text-lg font-medium mb-5 block">Onboarding</a>
|
||||
<a href="/getting-started/concepts-terminology/" class="text-lg font-medium mb-5 block">Concepts and terminology</a>
|
||||
<a href="/getting-started/automation/" class="text-lg font-medium mb-5 block">Automation</a>
|
||||
<a href="/getting-started/presence-detection/" class="text-lg font-medium mb-5 block">Presence detection</a>
|
||||
<a href="/getting-started/join-the-community/" class="text-lg font-medium mb-5 block">Join the community</a>
|
||||
<a href="/getting-started/configuration/" class="text-lg font-medium mb-5 block">Advanced configuration</a>
|
||||
</div>
|
||||
</div>
|
||||
{% assign sortedGuides = site.guides | sort: 'order' %}
|
||||
{% for guide in sortedGuides %}
|
||||
<div class="border-border-line border rounded-[40px] mb-10 p-7 md:py-14 md:px-2 bg-white text-center mx-2 md:mx-5">
|
||||
|
@ -2,6 +2,12 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
{% if page.toc %}
|
||||
{% include guides.html %}
|
||||
|
||||
<!-- main div end -->
|
||||
{% else %}
|
||||
|
||||
<div class="container relative mx-auto h-[100px] md:h-[150px]">
|
||||
<div
|
||||
class="hidden md:block bg-white absolute w-[110%] top-0 left-1/2 translate-x-[-50%] h-[0] md:h-[170%] rounded-b-3xl">
|
||||
@ -18,8 +24,10 @@ layout: default
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
<div class="content post-content">
|
||||
{{ page.content | markdownify | output_modder }}
|
||||
{{ content | markdownify | output_modder }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
{% endif %}
|
97
source/_styles/custom/getting-started.css
Normal file
97
source/_styles/custom/getting-started.css
Normal file
@ -0,0 +1,97 @@
|
||||
#getting_started .intro {
|
||||
padding-bottom:16px
|
||||
}
|
||||
#getting_started .installations h2 {
|
||||
font-size:0;
|
||||
margin:0
|
||||
}
|
||||
#getting_started .installations .installations-card {
|
||||
text-decoration:none !important;
|
||||
color:black !important
|
||||
}
|
||||
#getting_started .installations .installations-card .material-card {
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
margin:8px 0
|
||||
}
|
||||
#getting_started .installations .installations-card .material-card .content-container {
|
||||
display:flex
|
||||
}
|
||||
#getting_started .installations .installations-card .material-card .content-container div:first-of-type {
|
||||
margin-right:24px;
|
||||
}
|
||||
#getting_started .installations .installations-card .material-card .content-container div:first-of-type img,
|
||||
#getting_started .installations .installations-card .material-card .content-container div:first-of-type svg {
|
||||
max-width:170px;
|
||||
max-height:170px;
|
||||
min-width:170px;
|
||||
min-height:170px;
|
||||
padding:32px;
|
||||
border-radius:3px;
|
||||
box-shadow:rgba(0,0,0,0.06) 0 0 10px;
|
||||
vertical-align:middle;
|
||||
border:5px solid #fff
|
||||
}
|
||||
#getting_started .installations .installations-card .material-card .content-container div:last-of-type b {
|
||||
font-size:28px
|
||||
}
|
||||
#getting_started .installations .installations-card .material-card .content-container div:last-of-type p {
|
||||
font-size:0.8em;
|
||||
margin:0
|
||||
}
|
||||
#getting_started .installations .installations-card .material-card .content-container div:last-of-type ul {
|
||||
font-size:0.8em;
|
||||
margin-left:24px;
|
||||
margin-top:1rem
|
||||
}
|
||||
#getting_started .installations .installations-card .material-card .content-container div:last-of-type ul li {
|
||||
margin:0
|
||||
}
|
||||
#getting_started .installations .installations-card .material-card svg {
|
||||
height:42px;
|
||||
max-width:42px;
|
||||
min-width:42px;
|
||||
align-self:center
|
||||
}
|
||||
#getting_started .compare-installations td,
|
||||
#getting_started .compare-installations th {
|
||||
text-align:center
|
||||
}
|
||||
#getting_started table.compare-installations {
|
||||
background-color:#ffffff !important;
|
||||
border-radius:2px !important;
|
||||
box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2) !important
|
||||
}
|
||||
#getting_started table.compare-installations td,
|
||||
#getting_started table.compare-installations th {
|
||||
text-align:center
|
||||
}
|
||||
#getting_started table.compare-installations tr td:first-of-type {
|
||||
text-align:left
|
||||
}
|
||||
#getting_started table.compare-installations tr:nth-child(even) {
|
||||
background-color:#fafafa
|
||||
}
|
||||
.link-card {
|
||||
text-decoration:none !important;
|
||||
color:black !important
|
||||
}
|
||||
.link-card div {
|
||||
margin:32px 0;
|
||||
height:64px;
|
||||
display:flex;
|
||||
justify-content:space-between
|
||||
}
|
||||
.link-card div svg {
|
||||
height:32px;
|
||||
width:32px;
|
||||
max-width:32px
|
||||
}
|
||||
.link-card div p {
|
||||
margin:0;
|
||||
align-self:center
|
||||
}
|
||||
.next-step p {
|
||||
text-transform:uppercase
|
||||
}
|
@ -10,6 +10,7 @@
|
||||
@import "./custom/guide.css";
|
||||
@import "./custom/topic.css";
|
||||
@import "./custom/integrations.css";
|
||||
@import "./custom/getting-started.css";
|
||||
|
||||
@import 'home.css';
|
||||
@import 'post.css';
|
||||
|
Loading…
x
Reference in New Issue
Block a user