jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-30 04:36:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Installation page: fix links in aside TOC (#27406)

Browse Source
This commit is contained in:
c0ffeeca7 2023-05-17 08:40:34 +02:00 committed by GitHub
parent c45b4c3ca4
commit 78712eae09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 4 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
source/_includes/guides.html
View File

@ -28,7 +28,7 @@
<article class="w-full md:w-3/4 md:pr-20 snap"> <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> <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"> <div class="content guide-content">
{{ content }} {{ content | output_modder }}
</div> </div>
</article> </article>
</div> </div>

79
source/_layouts/guide.html
View File

@ -2,81 +2,4 @@
layout: default layout: default
--- ---
<!-- main div start --> {% include guides.html %}
<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">
{{page.content | output_modder }}
</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>
<!-- main div end -->

2
source/_layouts/page.html
View File

@ -2,7 +2,9 @@
layout: default layout: default
--- ---
{% if page.toc %} {% if page.toc %}
{% include guides.html %} {% include guides.html %}
<!-- main div end --> <!-- main div end -->