Skip to content

Commit a0cfbbd

Browse files
alshedivatalshedivat
authored
Add TOC to distill blog posts (alshedivat#470)
1 parent 7f10dc3 commit a0cfbbd

File tree

5 files changed

+142
-36
lines changed

5 files changed

+142
-36
lines changed

‎_layouts/distill.html

+18
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,24 @@ <h1>{{ page.title }}</h1>
6767
<d-byline></d-byline>
6868

6969
<d-article>
70+
{% if page.toc %}
71+
<d-contents>
72+
<nav class="l-text figcaption">
73+
<h3>Contents</h3>
74+
{% for section in page.toc %}
75+
<div><a href="#{{ section.name | downcase | replace: ' ','-' }}">{{ section.name }}</a></div>
76+
{% if section.subsections %}
77+
<ul>
78+
{% for subsection in section.subsections %}
79+
<li><a href="#{{ subsection.name | downcase | replace: ' ','-' }}">{{ subsection.name }}</a></li>
80+
{% endfor %}
81+
</ul>
82+
{% endif %}
83+
{% endfor %}
84+
</nav>
85+
</d-contents>
86+
{% endif %}
87+
7088
{{ content }}
7189
</d-article>
7290

‎_posts/2018-12-22-distill.md

+22-15
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,24 @@ authors:
2020

2121
bibliography: 2018-12-22-distill.bib
2222

23+
# Optionally, you can add a table of contents to your post.
24+
# NOTES:
25+
# - make sure that TOC names match the actual section names
26+
# for hyperlinks within the post to work correctly.
27+
# - we may want to automate TOC generation in the future using
28+
# jekyll-toc plugin (https://github.com/toshimaru/jekyll-toc).
29+
toc:
30+
- name: Equations
31+
# if a section has subsections, you can add them as follows:
32+
# subsections:
33+
# - name: Example Child Subsection 1
34+
# - name: Example Child Subsection 2
35+
- name: Citations
36+
- name: Footnotes
37+
- name: Code Blocks
38+
- name: Layouts
39+
- name: Other Typography
40+
2341
# Below is an example of injecting additional post-specific styles.
2442
# If you use this post as a template, delete this _styles block.
2543
_styles: >
@@ -153,8 +171,11 @@ It does not interrupt the normal flow of `.l-body` sized text except on mobile s
153171
<p>.l-gutter</p>
154172
</div>
155173

174+
***
175+
176+
## Other Typography
156177

157-
Emphasis, aka italics, with *asterisks* or _underscores_.
178+
Emphasis, aka italics, with *asterisks* (`*asterisks*`) or _underscores_ (`_underscores_`).
158179

159180
Strong emphasis, aka bold, with **asterisks** or __underscores__.
160181

@@ -253,20 +274,6 @@ Quote break.
253274
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
254275
255276

256-
Three or more...
257-
258-
---
259-
260-
Hyphens
261-
262-
***
263-
264-
Asterisks
265-
266-
___
267-
268-
Underscores
269-
270277
Here's a line for us to start with.
271278

272279
This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

‎_sass/_distill.scss

+82-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
******************************************************************************/
44

55
d-byline {
6-
border-top-color: $grey-color-light !important;
6+
border-top-color: var(--global-divider-color) !important;
77
}
88

99
d-byline h3 {
@@ -18,20 +18,79 @@ d-byline a, d-article d-byline a {
1818
}
1919

2020
d-article {
21-
border-top-color: #e8e8e8 !important;
21+
border-top-color: var(--global-divider-color) !important;
2222
a, p, h1, h2, h3, h4, h5, h6, li, table {
2323
color: var(--global-text-color) !important;
2424
}
25-
a, h1, h2, hr {
26-
border-bottom-color: $grey-color-light !important;
25+
a, h1, h2, hr, table, table th, table td {
26+
border-bottom-color: var(--global-divider-color) !important;
2727
}
2828
a:hover {
2929
border-bottom-color: var(--global-hover-color) !important;
3030
}
31+
b i {
32+
display: inline;
33+
}
34+
35+
d-contents {
36+
align-self: start;
37+
grid-column: 1 / 4;
38+
grid-row: auto / span 4;
39+
justify-self: end;
40+
margin-top: 0em;
41+
padding-left: 2em;
42+
padding-right: 3em;
43+
border-right: 1px solid var(--global-divider-color);
44+
width: calc(max(70%, 300px));
45+
margin-right: 0px;
46+
margin-top: 0em;
47+
display: grid;
48+
grid-template-columns:
49+
minmax(8px, 1fr) [toc] auto
50+
minmax(8px, 1fr) [toc-line] 1px
51+
minmax(32px, 2fr);
52+
53+
nav {
54+
grid-column: toc;
55+
a {
56+
border-bottom: none !important;
57+
&:hover {
58+
border-bottom: 1px solid var(--global-text-color) !important;
59+
}
60+
}
61+
h3 {
62+
margin-top: 0;
63+
margin-bottom: 1em;
64+
}
65+
div {
66+
display: block;
67+
outline: none;
68+
margin-bottom: 0.8em;
69+
color: rgba(0, 0, 0, 0.8);
70+
font-weight: bold;
71+
}
72+
ul {
73+
padding-left: 1em;
74+
margin-top: 0;
75+
margin-bottom: 6px;
76+
list-style-type: none;
77+
li {
78+
margin-bottom: 0.25em;
79+
}
80+
}
81+
}
82+
.figcaption {
83+
line-height: 1.4em;
84+
}
85+
toc-line {
86+
border-right: 1px solid var(--global-divider-color);
87+
grid-column: toc-line;
88+
}
89+
}
3190
}
3291

3392
d-appendix {
34-
border-top-color: $grey-color-light !important;
93+
border-top-color: var(--global-divider-color) !important;
3594
color: var(--global-distill-app-color) !important;
3695
h3, li, span {
3796
color: var(--global-distill-app-color) !important;
@@ -43,3 +102,21 @@ d-appendix {
43102
}
44103
}
45104
}
105+
106+
@media (max-width: 1024px) {
107+
d-article {
108+
d-contents {
109+
display: block;
110+
grid-column-start: 2;
111+
grid-column-end: -2;
112+
padding-bottom: 0.5em;
113+
margin-bottom: 1em;
114+
padding-top: 0.5em;
115+
width: 100%;
116+
border: 1px solid var(--global-divider-color);
117+
nav {
118+
grid-column: none;
119+
}
120+
}
121+
}
122+
}

‎_sass/_layout.scss

+19-15
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,25 @@
22
* Content
33
******************************************************************************/
44

5-
body {
6-
padding-bottom: 70px;
7-
color: var(--global-text-color);
8-
background-color: var(--global-bg-color);
9-
}
10-
11-
body.fixed-top-nav {
12-
// Add some padding for the nav-bar.
13-
padding-top: 56px;
14-
}
15-
16-
body.sticky-bottom-footer {
17-
// Remove padding below footer.
18-
padding-bottom: 0;
19-
}
5+
body {
6+
padding-bottom: 70px;
7+
color: var(--global-text-color);
8+
background-color: var(--global-bg-color);
9+
10+
h1, h2, h3, h4, h5, h6 {
11+
scroll-margin-top: 66px;
12+
}
13+
}
14+
15+
body.fixed-top-nav {
16+
// Add some padding for the nav-bar.
17+
padding-top: 56px;
18+
}
19+
20+
body.sticky-bottom-footer {
21+
// Remove padding below footer.
22+
padding-bottom: 0;
23+
}
2024

2125
.container {
2226
max-width: $max-content-width;

‎assets/css/main.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@charset "utf-8";
55

66
// Dimensions
7-
$max-content-width: {{site.max_width}};
7+
$max-content-width: {{ site.max_width }};
88

99
@import
1010
"variables",

0 commit comments

Comments
 (0)