From 81d774e4468eb0d506a65c4c601baa05dcb8b6fc Mon Sep 17 00:00:00 2001
From: c0ffeeca7 <38767475+c0ffeeca7@users.noreply.github.com>
Date: Thu, 11 May 2023 09:33:11 +0200
Subject: [PATCH] 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>
---
 _config.yml                               |  1 +
 source/_guides/get-started.md             | 28 -------
 source/_includes/guides.html              | 77 ++++++++++++++++++
 source/_layouts/default.html              |  3 +-
 source/_layouts/guide.html                |  1 -
 source/_layouts/learn.html                | 13 +++
 source/_layouts/page.html                 | 10 ++-
 source/_styles/custom/getting-started.css | 97 +++++++++++++++++++++++
 source/_styles/main.css                   |  1 +
 9 files changed, 200 insertions(+), 31 deletions(-)
 delete mode 100644 source/_guides/get-started.md
 create mode 100644 source/_includes/guides.html
 create mode 100644 source/_styles/custom/getting-started.css

diff --git a/_config.yml b/_config.yml
index 57195f8c4d6..1b7cda87df5 100644
--- a/_config.yml
+++ b/_config.yml
@@ -137,6 +137,7 @@ defaults:
   - scope:
       path: ""
     values:
+      layout: page
       comments: false
       footer: true
       sharing: true
diff --git a/source/_guides/get-started.md b/source/_guides/get-started.md
deleted file mode 100644
index 698c6ed83e9..00000000000
--- a/source/_guides/get-started.md
+++ /dev/null
@@ -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.
\ No newline at end of file
diff --git a/source/_includes/guides.html b/source/_includes/guides.html
new file mode 100644
index 00000000000..6df2f9363de
--- /dev/null
+++ b/source/_includes/guides.html
@@ -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>
diff --git a/source/_layouts/default.html b/source/_layouts/default.html
index 04762436370..87f79dfcf1a 100644
--- a/source/_layouts/default.html
+++ b/source/_layouts/default.html
@@ -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 -->
diff --git a/source/_layouts/guide.html b/source/_layouts/guide.html
index 8173dc69e2d..13374292244 100644
--- a/source/_layouts/guide.html
+++ b/source/_layouts/guide.html
@@ -78,6 +78,5 @@ layout: default
             });
         });
     });
-
 </script>
 <!-- main div end -->
\ No newline at end of file
diff --git a/source/_layouts/learn.html b/source/_layouts/learn.html
index 061f3a103dd..ec09a999c31 100644
--- a/source/_layouts/learn.html
+++ b/source/_layouts/learn.html
@@ -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">
diff --git a/source/_layouts/page.html b/source/_layouts/page.html
index c2ec85c97f3..a8669f62102 100644
--- a/source/_layouts/page.html
+++ b/source/_layouts/page.html
@@ -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 %}
\ No newline at end of file
diff --git a/source/_styles/custom/getting-started.css b/source/_styles/custom/getting-started.css
new file mode 100644
index 00000000000..9edc4db1d44
--- /dev/null
+++ b/source/_styles/custom/getting-started.css
@@ -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
+}
\ No newline at end of file
diff --git a/source/_styles/main.css b/source/_styles/main.css
index 311dfe651c4..20914e603c6 100644
--- a/source/_styles/main.css
+++ b/source/_styles/main.css
@@ -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';