Skip to content

Commit 5800c80

Browse files
mscoutermarshmscoutermarsh
committed
Move TOC to sidebar
1 parent 283d6cc commit 5800c80

31 files changed

+543
-199
lines changed

‎_includes/intro.md‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,6 @@ Generate a png, jpg or webp images with {{ include.language }}. Renders exactly
99
[Get an API Key](https://htmlcsstoimage.com){: .btn .fs-5 .mb-4 .mb-md-0 target="_blank" }
1010
<hr>
1111

12-
Table of contents
13-
{: .text-delta }
14-
- TOC
15-
{:toc}
16-
1712
## Generating images with {{include.language}}
1813
1. The API takes your HTML/CSS and runs it inside a real instance of Google Chrome to **convert your html into an image**.
1914
2. Use {{include.language}} to send the API your HTML/CSS.

‎_includes/toc.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
{% comment %}
2+
Table of Contents generator
3+
Extracts h2 and h3 headings from the page content and generates a TOC
4+
{% endcomment %}
5+
6+
{% assign content_string = include.content %}
7+
{% assign headings_found = false %}
8+
9+
{% comment %} Check if there are any h2 headings with id attributes {% endcomment %}
10+
{% if content_string contains '<h2 id="' %}
11+
{% assign headings_found = true %}
12+
{% endif %}
13+
14+
{% if headings_found %}
15+
<nav aria-label="On this page" class="toc-nav">
16+
<p class="toc-title">On this page</p>
17+
<ul class="toc-list">
18+
{% comment %} Split content by </h2> to get each h2 section {% endcomment %}
19+
{% assign sections = content_string | split: '</h2>' %}
20+
21+
{% for section in sections %}
22+
{% comment %} Check if this section contains an h2 opening tag {% endcomment %}
23+
{% if section contains '<h2 id="' %}
24+
{% comment %} Get the part with the h2 {% endcomment %}
25+
{% assign h2_parts = section | split: '<h2 id="' %}
26+
{% assign h2_content = h2_parts | last %}
27+
28+
{% comment %} Extract the id {% endcomment %}
29+
{% assign id_parts = h2_content | split: '"' %}
30+
{% assign heading_id = id_parts[0] %}
31+
32+
{% comment %} Extract the text after the closing anchor tag {% endcomment %}
33+
{% if h2_content contains '</a>' %}
34+
{% assign after_anchor_parts = h2_content | split: '</a>' %}
35+
{% assign heading_text = after_anchor_parts[1] | strip_html | strip | truncate: 80, "" %}
36+
{% else %}
37+
{% comment %} No anchor, get text after the closing > {% endcomment %}
38+
{% assign after_tag_parts = h2_content | split: '>' %}
39+
{% assign heading_text = after_tag_parts[1] | strip_html | strip | truncate: 80, "" %}
40+
{% endif %}
41+
42+
{% if heading_text != "" and heading_id != "" %}
43+
<li class="toc-item toc-h2">
44+
<a href="#{{ heading_id }}" class="toc-link">{{ heading_text }}</a>
45+
46+
{% comment %} Look for h3 headings in the next section {% endcomment %}
47+
{% assign next_index = forloop.index %}
48+
{% if next_index < sections.size %}
49+
{% assign next_section = sections[next_index] %}
50+
{% if next_section contains '<h3 id="' %}
51+
<ul class="toc-sublist">
52+
{% assign h3_sections = next_section | split: '</h3>' %}
53+
{% for h3_section in h3_sections %}
54+
{% if h3_section contains '<h3 id="' %}
55+
{% assign h3_parts = h3_section | split: '<h3 id="' %}
56+
{% assign h3_content = h3_parts | last %}
57+
58+
{% assign h3_id_parts = h3_content | split: '"' %}
59+
{% assign h3_id = h3_id_parts[0] %}
60+
61+
{% if h3_content contains '</a>' %}
62+
{% assign h3_after_anchor = h3_content | split: '</a>' %}
63+
{% assign h3_text = h3_after_anchor[1] | strip_html | strip | truncate: 60, "" %}
64+
{% else %}
65+
{% assign h3_after_tag = h3_content | split: '>' %}
66+
{% assign h3_text = h3_after_tag[1] | strip_html | strip | truncate: 60, "" %}
67+
{% endif %}
68+
69+
{% if h3_text != "" and h3_id != "" and forloop.index < 8 %}
70+
<li class="toc-item toc-h3">
71+
<a href="#{{ h3_id }}" class="toc-link">{{ h3_text }}</a>
72+
</li>
73+
{% endif %}
74+
{% endif %}
75+
{% endfor %}
76+
</ul>
77+
{% endif %}
78+
{% endif %}
79+
</li>
80+
{% endif %}
81+
{% endif %}
82+
{% endfor %}
83+
</ul>
84+
</nav>
85+
{% endif %}

‎_layouts/default.html‎

Lines changed: 59 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
</symbol>
4141
</svg>
4242

43+
<div class="site-container">
4344
<div class="side-bar">
4445
<div class="site-header">
4546
<a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
@@ -92,59 +93,71 @@
9293
</nav>
9394
{% endif %}
9495
{% endunless %}
95-
<div id="main-content" class="main-content" role="main">
96+
97+
{% comment %} Capture the rendered content for TOC extraction {% endcomment %}
98+
{% capture rendered_content %}
9699
{% if site.heading_anchors != false %}
97100
{% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" %}
98101
{% else %}
99102
{{ content }}
100103
{% endif %}
104+
{% endcapture %}
101105

102-
{% if page.has_children == true and page.has_toc != false %}
103-
<hr>
104-
<h2 class="text-delta">Table of contents</h2>
105-
<ul>
106-
{%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%}
107-
{% for child in children_list %}
108-
<li>
109-
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
110-
</li>
111-
{% endfor %}
112-
</ul>
113-
{% endif %}
106+
<div class="content-with-toc">
107+
<div id="main-content" class="main-content" role="main">
108+
{{ rendered_content }}
114109

115-
{% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
116-
<hr>
117-
<footer>
118-
{% if site.back_to_top %}
119-
<p><a href="#top" id="back-to-top">{{ site.back_to_top_text }}</a></p>
120-
{% endif %}
121-
{% if site.footer_content != nil %}
122-
<p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
123-
{% endif %}
124-
125-
{% if site.last_edit_timestamp or site.gh_edit_link %}
126-
<div class="d-flex mt-2">
127-
{% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_at %}
128-
<p class="text-small text-grey-dk-000 mb-0 mr-2">
129-
Page last modified: <span class="d-inline-block">{{ page.last_modified_at | date: site.last_edit_time_format }}</span>.
130-
</p>
131-
{% endif %}
132-
{% if
133-
site.gh_edit_link and
134-
site.gh_edit_link_text and
135-
site.gh_edit_repository and
136-
site.gh_edit_branch and
137-
site.gh_edit_view_mode
138-
%}
139-
<p class="text-small text-grey-dk-000 mb-0">
140-
<a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}/{{ page.path }}" id="edit-this-page">{{ site.gh_edit_link_text }}</a>
141-
</p>
142-
{% endif %}
143-
</div>
144-
{% endif %}
145-
</footer>
146-
{% endif %}
110+
{% if page.has_children == true and page.has_toc != false %}
111+
<hr>
112+
<h2 class="text-delta">Table of contents</h2>
113+
<ul>
114+
{%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%}
115+
{% for child in children_list %}
116+
<li>
117+
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
118+
</li>
119+
{% endfor %}
120+
</ul>
121+
{% endif %}
122+
123+
{% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
124+
<hr>
125+
<footer>
126+
{% if site.back_to_top %}
127+
<p><a href="#top" id="back-to-top">{{ site.back_to_top_text }}</a></p>
128+
{% endif %}
129+
{% if site.footer_content != nil %}
130+
<p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
131+
{% endif %}
132+
133+
{% if site.last_edit_timestamp or site.gh_edit_link %}
134+
<div class="d-flex mt-2">
135+
{% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_at %}
136+
<p class="text-small text-grey-dk-000 mb-0 mr-2">
137+
Page last modified: <span class="d-inline-block">{{ page.last_modified_at | date: site.last_edit_time_format }}</span>.
138+
</p>
139+
{% endif %}
140+
{% if
141+
site.gh_edit_link and
142+
site.gh_edit_link_text and
143+
site.gh_edit_repository and
144+
site.gh_edit_branch and
145+
site.gh_edit_view_mode
146+
%}
147+
<p class="text-small text-grey-dk-000 mb-0">
148+
<a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}/{{ page.path }}" id="edit-this-page">{{ site.gh_edit_link_text }}</a>
149+
</p>
150+
{% endif %}
151+
</div>
152+
{% endif %}
153+
</footer>
154+
{% endif %}
155+
156+
</div>
147157

158+
<aside class="toc-sidebar">
159+
{% include toc.html content=rendered_content %}
160+
</aside>
148161
</div>
149162
</div>
150163

@@ -158,6 +171,7 @@ <h2 class="text-delta">Table of contents</h2>
158171
<div class="search-overlay"></div>
159172
{% endif %}
160173
</div>
174+
</div> <!-- .site-container -->
161175

162176
<link href="/assets/css/syntax.css" rel="stylesheet" type="text/css" />
163177
<link href="/assets/css/search.css" rel="stylesheet" type="text/css" />

‎_sass/color_schemes/hcti.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ $nav-width-md: 248px !default;
118118
$nav-list-item-height: $sp-6 !default;
119119
$nav-list-item-height-sm: $sp-8 !default;
120120
$nav-list-expander-right: true;
121-
$content-width: 800px !default;
121+
$content-width: 1600px !default;
122122
$header-height: 60px !default;
123123
$search-results-width: $content-width - $nav-width !default;
124124
$transition-duration: 400ms;

0 commit comments

Comments
 (0)