Graphite/website/templates/book.html

{% extends "base.html" %}

{% block title %}{% set this = section | default(value = page) %}{{ this.title }}{% endblock title %}

{% block head %}
<link rel="stylesheet" href="/book.css">
<script src="/js/book.js"></script>
{% endblock head %}

{% block content %}
{% set this = section | default(value = page) %}

{# Search this page-or-section's ancestor tree for a section that identifies itself as a book, and save it to a `book` variable #}
{% for ancestor_path in this.ancestors | concat(with = this.relative_path) %}
	{# Get the ancestor section from this ancestor path string #}
	{% if ancestor_path is ending_with("/_index.md") %}
	{% set potential_book = get_section(path = ancestor_path) %}
	{% endif %}

	{# Check if the ancestor section is the root of a book, and if so, set it to a variable accessible outside the loop #}
	{% if potential_book.extra.book %}
	{% set_global book = get_section(path = potential_book.path ~ "_index.md" | trim_start_matches(pat="/")) %}
	{% endif %}
{% endfor %}

{# Map this book's chapter path strings to an array of sections #}
{% set chapters = [] %}
{% for chapter_path in book.subsections %}
	{% set_global chapters = chapters | concat(with = get_section(path = chapter_path)) %}
{% endfor %}
{% set chapters = chapters | sort(attribute = "extra.order") %}

{# A flat list of all pages in the ToC, initialized to just the book root section but updated when we generate the ToC #}
{% set flat_pages = [book] %}
{% set flat_index_of_this = 0 %}

<section class="three-column-layout">
	<aside class="chapters" data-chapters>
		<div class="wrapper-outer">
			<div class="wrapper-inner">
				<button class="hamburger-menu-button close" data-hamburger-menu-button-close></button>
				<ul>
					<li class="title{% if current_path == book.path %} active{% endif %}"><a href="{{ book.path }}" title="{{ book.title }}">{{ book.title }}</a></li>
				</ul>
				{% for chapter in chapters %}
				<ul>
					<li class="chapter{% if current_path == chapter.path %} active{% endif %}"><a href="{{ chapter.path }}" title="{{ chapter.title }}">&raquo; {{ chapter.title }}</a></li>

					{% set_global flat_pages = flat_pages | concat(with = chapter) %}
					{% if chapter == this %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %}

					{% if chapter.pages %}

					{% for page in chapter.pages | sort(attribute = "extra.order") %}

					{% set_global flat_pages = flat_pages | concat(with = page) %}
					{% if page == this %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %}

					<li {% if current_path == page.path %}class="active"{% endif %}><a href="{{ page.path }}" title="{{ page.title }}">&raquo; {{ page.title }}</a></li>

					{% endfor %}

					{% endif %}
				</ul>
				{% endfor %}
			</div>
		</div>
	</aside>

	<section class="reading-material">
		<div class="section">
			<div class="article-title">
				<button class="hamburger-menu-button open" data-hamburger-menu-button-open></button>
				<h1>{{ this.title }}</h1>
			</div>
			<article>
			{{ this.content | safe }}
			</article>

			<hr />

			<div class="prev-next">
				{% if flat_index_of_this >= 1 %}
				{% set prev = flat_pages | nth(n = flat_index_of_this - 1) %}
				{% endif %}
				{% if prev %}
				<a href="{{ prev.path }}" title="{{ prev.title }}">
					<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
						<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
						<polygon points="24.71,10.71 23.29,9.29 12.59,20 23.29,30.71 24.71,29.29 15.41,20" />
					</svg>
					{{ prev.title }}
				</a>
				{% else %}
				<a><!-- Spacer --></a>
				{% endif %}

				{% if flat_index_of_this < flat_pages | length - 1 %}
				{% set next = flat_pages | nth(n = flat_index_of_this + 1) %}
				{% endif %}
				{% if next %}
				<a href="{{ next.path }}" title="{{ next.title }}">
					{{ next.title }}
					<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
						<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
						<polygon points="16.71,9.29 15.29,10.71 24.59,20 15.29,29.29 16.71,30.71 27.41,20" />
					</svg>
				</a>
				{% endif %}
			</div>
		</div>
	</section>

	<aside class="contents">
		<ul>
			<li class="title">
				<a href="#" title="{% if this.toc | length > 0 %}Contents (top ↑){% else %}Back to top ↑{% endif %}">
					{% if this.toc | length > 0 %}Contents<span> (top ↑)</span>{% else %}Back to top ↑{% endif %}
				</a>
			</li>
		</ul>
		<ul>
			{% for depth_1 in this.toc %}
			<li><a href="#{{ depth_1.id }}" title="{{ depth_1.title }}">{{ depth_1.title }}</a></li>
			{% for depth_2 in depth_1.children %}
			<ul>
				<li><a href="#{{ depth_2.id }}" title="{{ depth_2.title }}">{{ depth_2.title }}</a></li>
				{% for depth_3 in depth_2.children %}
				<ul>
					<li><a href="#{{ depth_3.id }}" title="{{ depth_3.title }}">{{ depth_3.title }}</a></li>
					{% for depth_4 in depth_3.children %}
					<ul>
						<li><a href="#{{ depth_4.id }}" title="{{ depth_4.title }}">{{ depth_4.title }}</a></li>
						{% for depth_5 in depth_4.children %}
						<ul>
							<li><a href="#{{ depth_5.id }}" title="{{ depth_5.title }}">{{ depth_5.title }}</a></li>
							{% for depth_6 in depth_5.children %}
							<ul>
								<li><a href="#{{ depth_6.id }}" title="{{ depth_6.title }}">{{ depth_6.title }}</a></li>
							</ul>
							{% endfor %}
						</ul>
						{% endfor %}
					</ul>
					{% endfor %}
				</ul>
				{% endfor %}
			</ul>
			{% endfor %}
			{% endfor %}
		</ul>
	</aside>
</section>
{% endblock content %}