Skip to content

Commit 2f19cd6

Browse files
pusewiczpusewicz
committed
Posts redesign
1 parent 2039877 commit 2f19cd6

2 files changed

Lines changed: 423 additions & 12 deletions

File tree

‎_layouts/post.html‎

Lines changed: 114 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,126 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
{% include header.html %}
4+
{% include redesign_head.html %}
55
</head>
66
<body>
7+
{% include redesign_nav.html %}
8+
<main>
9+
<header class="article-header">
10+
<div class="article-header__inner">
11+
{% assign first_cat = page.categories | first %}
12+
{% if first_cat.size > 1 %}
13+
{% assign display_cat = first_cat | capitalize %}
14+
{% elsif page.categories %}
15+
{% assign display_cat = page.categories | capitalize %}
16+
{% endif %}
17+
{% if display_cat or page.date %}
18+
<div class="article-header__meta">
19+
{% if display_cat %}<span class="article-header__category">{{ display_cat }}</span>{% endif %}
20+
{% if display_cat and page.date %}<span class="article-header__meta-sep" aria-hidden="true">—</span>{% endif %}
21+
{% if page.date %}<time class="article-header__date" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%d %b %Y" }}</time>{% endif %}
22+
</div>
23+
{% endif %}
24+
<h1 class="article-header__title">{{ page.title }}</h1>
25+
</div>
26+
</header>
727

8-
{% include navigation.html %}
28+
<div class="article-body">
29+
<div class="article-body__inner">
30+
<aside class="article-toc" id="article-toc" aria-label="Table of contents">
31+
<p class="article-toc__label">Contents</p>
32+
<nav class="article-toc__nav" id="article-toc-nav"></nav>
33+
</aside>
34+
<article class="article-content">
35+
{{ content }}
36+
</article>
37+
</div>
38+
</div>
39+
</main>
40+
{% include redesign_footer.html %}
941

10-
<div class="container">
11-
<div class="row clearfix">
42+
<script>
43+
(function () {
44+
// Mobile nav
45+
var btn = document.querySelector('.site-nav__hamburger');
46+
var links = document.getElementById('site-nav-links');
47+
if (btn && links) {
48+
btn.addEventListener('click', function () {
49+
var expanded = btn.getAttribute('aria-expanded') === 'true';
50+
btn.setAttribute('aria-expanded', String(!expanded));
51+
links.classList.toggle('is-open', !expanded);
52+
});
53+
}
1254

13-
<div class="col-md-12 column">
55+
// TOC generation
56+
var content = document.querySelector('.article-content');
57+
var tocNav = document.getElementById('article-toc-nav');
58+
var tocAside = document.getElementById('article-toc');
59+
if (!content || !tocNav) return;
1460

15-
{{ content }}
61+
var headings = content.querySelectorAll('h1, h2, h3');
62+
if (headings.length === 0) {
63+
if (tocAside) tocAside.hidden = true;
64+
return;
65+
}
1666

17-
</div>
18-
</div>
19-
</div>
67+
var list = document.createElement('ul');
68+
list.className = 'article-toc__list';
69+
headings.forEach(function (h) {
70+
if (!h.id) return;
71+
var li = document.createElement('li');
72+
var depth = parseInt(h.tagName[1], 10);
73+
li.className = 'article-toc__item' + (depth > 1 ? ' article-toc__item--sub' : '');
74+
var a = document.createElement('a');
75+
a.href = '#' + h.id;
76+
a.textContent = h.textContent;
77+
a.className = 'article-toc__link';
78+
li.appendChild(a);
79+
list.appendChild(li);
80+
});
81+
82+
if (list.children.length === 0) {
83+
if (tocAside) tocAside.hidden = true;
84+
return;
85+
}
86+
87+
tocNav.appendChild(list);
88+
89+
// Scrollspy — highlight active TOC item
90+
var tocLinks = tocNav.querySelectorAll('.article-toc__link');
91+
var tocItems = tocNav.querySelectorAll('.article-toc__item');
92+
93+
function setActive(id) {
94+
tocItems.forEach(function (item) {
95+
item.classList.remove('article-toc__item--active');
96+
});
97+
tocLinks.forEach(function (link) {
98+
if (link.getAttribute('href') === '#' + id) {
99+
link.closest('.article-toc__item').classList.add('article-toc__item--active');
100+
}
101+
});
102+
}
103+
104+
var observer = new IntersectionObserver(function (entries) {
105+
entries.forEach(function (entry) {
106+
if (entry.isIntersecting) {
107+
setActive(entry.target.id);
108+
}
109+
});
110+
}, {
111+
rootMargin: '-' + (56 + 32) + 'px 0px -70% 0px',
112+
threshold: 0
113+
});
20114

21-
{% include footer.html %}
115+
headings.forEach(function (h) {
116+
if (h.id) observer.observe(h);
117+
});
22118

119+
// Set first item active on load
120+
if (headings.length > 0 && headings[0].id) {
121+
setActive(headings[0].id);
122+
}
123+
})();
124+
</script>
23125
</body>
24-
</html>
126+
</html>

0 commit comments

Comments
 (0)