Skip to content

Commit 5001f5c

Browse files
SeramisSeramis
committed
Design improvements. Better hot-reload compatibility. Aside content responsiveness improved. ContentBlock shortcode introduced.
1 parent a0c89f8 commit 5001f5c

17 files changed

Lines changed: 179 additions & 123 deletions

File tree

‎_config/shortcodes.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,17 @@
11
export default function(eleventyConfig) {
2+
eleventyConfig.addPairedShortcode("ContentBlock", function(content, name) {
3+
this.page['contentBlock'] = this.page['contentBlock'] || {};
4+
this.page['contentBlock'][name] = (this.page['contentBlock'][name] || "") + content;
5+
return '';
6+
});
7+
8+
eleventyConfig.addShortcode("RenderContentBlock", function(name) {
9+
if(!this.page['contentBlock']) {
10+
return '';
11+
}
12+
if(!this.page['contentBlock'][name]) {
13+
return '';
14+
}
15+
return this.page['contentBlock'][name] || '';
16+
});
217
};

‎_includes/layouts/base.njk‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<script type="module" src="{% getBundleFileUrl "js", "common" %}"></script>
1818
<script type="module" src="{% getBundleFileUrl "jsraw" %}"></script>
1919
<script type="module" src="{% getBundleFileUrl "js" %}"></script>
20+
{% RenderContentBlock "head" %}
2021
</head>
2122
<body>
2223
<a href="#skip" class="visually-hidden">Skip to main content</a>
@@ -31,14 +32,18 @@
3132
</heading-anchors>
3233
</main>
3334

34-
{% if aside %}
35+
{% if showAside %}
3536
<aside>
3637
{% include "partials/aside.njk" %}
3738
</aside>
3839
{% endif %}
3940

4041
</div>
4142

43+
<div class="bottom-content">
44+
{% RenderContentBlock "bottom-content" %}
45+
</div>
46+
4247
{% include "partials/footer.njk" %}
4348

4449
<!-- This page `{{ page.url | absoluteUrl(metadata.url) }}` was built on {{ renderDate | isoDateTime }} -->

‎_includes/layouts/post.njk‎

Lines changed: 43 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,23 @@ layout: layouts/base.njk
77
{% css %}
88
article {
99
padding-top: 2rem;
10+
text-align: justify;
1011
}
1112

1213
.links-nextprev {
13-
display: flex;
14-
gap: 1rem;
14+
display: grid;
15+
grid-gap: 1rem;
16+
grid-template-columns: 1fr 1fr;
1517
padding: 0;
1618
margin: 0;
1719
list-style: none;
1820
}
21+
@media(max-width: 480px) {
22+
.links-nextprev {
23+
grid-template-columns: 1fr;
24+
}
25+
}
1926
.links-nextprev li {
20-
width: 50%;
2127
padding: 0.5rem;
2228
}
2329
.links-nextprev li.links-nextprev-prev,
@@ -37,16 +43,11 @@ h1.post-title {
3743
margin-top: 1rem;
3844
margin-bottom: 1rem;
3945
}
40-
41-
#giscus-comments {
42-
margin-top: 1rem;
43-
}
44-
4546
{% endcss %}
4647

4748
<article>
4849
{% if imageUrl %}
49-
<img eleventy:ignore src="{{ imageUrl }}" alt="" class="post-header" />
50+
<img eleventy:ignore src="{{ imageUrl }}" alt="" class="banner" />
5051
{% endif %}
5152

5253
<h1 class="post-title">{{ title }}</h1>
@@ -60,66 +61,41 @@ h1.post-title {
6061

6162
{% include "partials/socials.njk" %}
6263

63-
<hr />
64+
{% ContentBlock "bottom-content" %}
6465

65-
{% if collections.posts %}
66-
{% set previousPost = collections.posts | getPreviousCollectionItem %}
67-
{% set nextPost = collections.posts | getNextCollectionItem %}
68-
{% if nextPost or previousPost %}
69-
<ul class="links-nextprev">
70-
{% if previousPost %}
71-
<li class="links-nextprev-prev">
72-
<a href="{{ previousPost.url }}">
73-
<img eleventy:ignore src="{{ previousPost.data.imageUrl }}" alt="" /><br>
74-
{{ previousPost.data.title }}
75-
</a>
76-
<span>← Previous</span>
77-
{% else %}
78-
<li>
79-
{% endif %}
80-
</li>
81-
{% if nextPost %}
82-
<li class="links-nextprev-next">
83-
<a href="{{ nextPost.url }}">
84-
<img eleventy:ignore src="{{ nextPost.data.imageUrl }}" alt="" /><br>
85-
{{ nextPost.data.title }}
86-
</a>
87-
<span>Next →</span>
88-
{% else %}
89-
<li>
90-
{% endif %}
91-
</li>
92-
</ul>
66+
{% if collections.posts %}
67+
{% set previousPost = collections.posts | getPreviousCollectionItem %}
68+
{% set nextPost = collections.posts | getNextCollectionItem %}
69+
{% if nextPost or previousPost %}
70+
<ul class="links-nextprev">
71+
{% if previousPost %}
72+
<li class="links-nextprev-prev">
73+
<a href="{{ previousPost.url }}">
74+
<img eleventy:ignore src="{{ previousPost.data.imageUrl }}" alt="" class="banner" /><br>
75+
{{ previousPost.data.title }}
76+
</a>
77+
<span>← Previous</span>
78+
{% else %}
79+
<li>
80+
{% endif %}
81+
</li>
82+
{% if nextPost %}
83+
<li class="links-nextprev-next">
84+
<a href="{{ nextPost.url }}">
85+
<img eleventy:ignore src="{{ nextPost.data.imageUrl }}" alt="" class="banner" /><br>
86+
{{ nextPost.data.title }}
87+
</a>
88+
<span>Next →</span>
89+
{% else %}
90+
<li>
91+
{% endif %}
92+
</li>
93+
</ul>
94+
{% endif %}
9395
{% endif %}
94-
{% endif %}
95-
96-
{% include "./../partials/series.njk" %}
9796

98-
{% if metadata.githubComments.repo %}
99-
<div id="giscus-comments"></div>
100-
<script>
101-
// Wait for the DOM to load or ensure themeManager is available
102-
document.addEventListener("DOMContentLoaded", () => {
103-
const giscusContainer = document.getElementById("giscus-comments");
97+
{% include "./../partials/series.njk" %}
10498

105-
const script = document.createElement("script");
106-
script.src = "https://giscus.app/client.js";
107-
script.setAttribute("data-repo", "{{ metadata.githubComments.repo }}");
108-
script.setAttribute("data-repo-id", "{{ metadata.githubComments.repoId }}");
109-
script.setAttribute("data-category", "{{ metadata.githubComments.category }}");
110-
script.setAttribute("data-category-id", "{{ metadata.githubComments.categoryId }}");
111-
script.setAttribute("data-mapping", "pathname");
112-
script.setAttribute("data-strict", "0");
113-
script.setAttribute("data-reactions-enabled", "1");
114-
script.setAttribute("data-emit-metadata", "0");
115-
script.setAttribute("data-input-position", "top");
116-
script.setAttribute("data-theme", themeManager.get());
117-
script.setAttribute("data-lang", "en");
118-
script.setAttribute("data-loading", "lazy");
119-
script.setAttribute("crossorigin", "anonymous");
120-
script.async = true;
99+
{% include "./../partials/giscus.njk" %}
121100

122-
giscusContainer.appendChild(script);
123-
});
124-
</script>
125-
{% endif %}
101+
{% endContentBlock %}

‎_includes/partials/aside.njk‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,36 @@
11
{% css %}
2+
aside {
3+
width: 18em;
4+
display: flex;
5+
flex-direction: column;
6+
align-items: flex-end;
7+
justify-content: flex-end;
8+
margin-top: 5rem;
9+
margin-bottom: 2rem;
10+
}
11+
@media(max-width: 1024px) {
12+
aside {
13+
display: none;
14+
}
15+
}
16+
17+
.sticky-container {
18+
position: sticky;
19+
bottom: 5rem;
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: space-between;
23+
min-height: calc(100vh - 10rem);
24+
}
25+
226
.aside-content {
3-
margin-top: 2rem;
427
margin-left: 0.5rem;
528
padding: 0.5rem;
629
font-size: 0.9rem;
730
border-left: 1px solid var(--border-color);
831
transition: border-color 0.3s;
932
}
1033

11-
.toc-container {
12-
position: sticky;
13-
top: 5rem;
14-
}
15-
1634
.aside-content ol {
1735
list-style-type: none;
1836
padding: 0;
@@ -25,6 +43,8 @@
2543
}
2644
{% endcss %}
2745

46+
<div class="sticky-container">
47+
2848
<div class="recents-container aside-content">
2949
<span><b>Recents</b></span>
3050
<div>
@@ -42,10 +62,14 @@
4262

4363
{% set outline = content | toc %}
4464
{% if outline %}
45-
<div class="toc-container aside-content">
46-
<span><b>Table of Contents</b></span>
47-
<div>
48-
{{ outline | safe }}
65+
<div class="toc-container">
66+
<div class="toc-sticky aside-content">
67+
<span><b>Table of Contents</b></span>
68+
<div>
69+
{{ outline | safe }}
70+
</div>
4971
</div>
5072
</div>
51-
{% endif %}
73+
{% endif %}
74+
75+
</div>

‎_includes/partials/footer.njk‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{% css "common" %}
22
footer {
3-
position: sticky;
3+
position: fixed;
44
bottom: 0;
5-
margin-top: 1rem;
5+
width: 100%;
66
padding: 0.5em;
77
background-color: var(--bg-color-secondary);
88
transition: background-color 0.3s;
@@ -12,6 +12,7 @@ footer {
1212
@media(max-height: 480px) {
1313
footer {
1414
position: relative;
15+
margin-top: -3rem;
1516
}
1617
}
1718

‎_includes/partials/giscus.njk‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{% css %}
2+
#giscus-comments {
3+
margin-top: 1rem;
4+
width: 100%;
5+
}
6+
{% endcss %}
7+
8+
{% if metadata.githubComments.repo and showComments %}
9+
<div id="giscus-comments"></div>
10+
<script>
11+
// Wait for the DOM to load or ensure themeManager is available
12+
document.addEventListener("DOMContentLoaded", () => {
13+
const giscusContainer = document.getElementById("giscus-comments");
14+
15+
const script = document.createElement("script");
16+
script.src = "https://giscus.app/client.js";
17+
script.setAttribute("data-repo", "{{ metadata.githubComments.repo }}");
18+
script.setAttribute("data-repo-id", "{{ metadata.githubComments.repoId }}");
19+
script.setAttribute("data-category", "{{ metadata.githubComments.category }}");
20+
script.setAttribute("data-category-id", "{{ metadata.githubComments.categoryId }}");
21+
script.setAttribute("data-mapping", "pathname");
22+
script.setAttribute("data-strict", "0");
23+
script.setAttribute("data-reactions-enabled", "1");
24+
script.setAttribute("data-emit-metadata", "0");
25+
script.setAttribute("data-input-position", "top");
26+
script.setAttribute("data-theme", themeManager.get());
27+
script.setAttribute("data-lang", "en");
28+
script.setAttribute("data-loading", "lazy");
29+
script.setAttribute("crossorigin", "anonymous");
30+
script.async = true;
31+
32+
giscusContainer.appendChild(script);
33+
});
34+
</script>
35+
{% endif %}

‎_includes/partials/header.njk‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{% css "common" %}
22
/* Base styles */
33
header {
4-
position: sticky;
4+
position: fixed;
5+
width: 100%;
56
top: 0;
67
padding: 0.5em;
78
box-shadow: 0 2px 4px var(--shadow-color);
@@ -13,6 +14,7 @@ header {
1314
@media(max-height: 480px) {
1415
header {
1516
position: relative;
17+
margin-bottom: -4rem;
1618
}
1719
}
1820

‎_includes/partials/post-card.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<div>
2222
<h2><a href="{{ post.url }}">
2323
{% if post.data.imageUrl %}
24-
<img eleventy:ignore src="{{ post.data.imageUrl }}" alt="{{ post.data.title }}" class="post-card-image" />
24+
<img eleventy:ignore src="{{ post.data.imageUrl }}" alt="{{ post.data.title }}" class="banner" />
2525
{% endif %}
2626

2727
{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}

‎_includes/partials/series.njk‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
}
1313
@media(max-width: 480px) {
1414
.series {
15-
grid-template-columns: 100%;
15+
grid-template-columns: 1fr;
1616
}
1717
}
1818
.series h3 {
@@ -38,7 +38,7 @@
3838
{% for seriePost in v.slice(-3) | reverse %}
3939
<div class="series-post">
4040
<a href="{{ seriePost.url }}">
41-
<img eleventy:ignore src="{{seriePost.data.imageUrl }}" alt="{{ seriePost.data.title }}" class="series-post-image" />
41+
<img eleventy:ignore src="{{seriePost.data.imageUrl }}" alt="{{ seriePost.data.title }}" class="banner" />
4242
{{ seriePost.data.title }}
4343
</a>
4444
<div>{{ seriePost.data.date | readableDate }}</div>

‎content/about.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
eleventyNavigation:
33
key: "About"
44
order: 5
5-
aside: true
5+
showAside: true
66
---
77
# About me
88

0 commit comments

Comments
 (0)