517 lines
23 KiB
HTML
517 lines
23 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" class="sidebar-visible no-js light">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Hitch Hiker Linux</title>
|
||
|
|
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||
|
|
<meta name="description" content="">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<meta name="theme-color" content="#ffffff" />
|
||
|
|
|
||
|
|
<link rel="icon" href="/favicon.svg">
|
||
|
|
<link rel="shortcut icon" href="/favicon.png">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="/handbook/css/variables.css">
|
||
|
|
<link rel="stylesheet" href="/handbook/css/general.css">
|
||
|
|
<link rel="stylesheet" href="/handbook/css/chrome.css">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="/handbook/css/print.css" media="print">
|
||
|
|
|
||
|
|
<!-- Fonts -->
|
||
|
|
<link rel="stylesheet" href="/handbook/FontAwesome/css/font-awesome.css">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="/handbook/fonts/fonts.css">
|
||
|
|
|
||
|
|
<!-- Highlight.js Stylesheets -->
|
||
|
|
<link rel="stylesheet" href="/handbook/highlight.css">
|
||
|
|
<link rel="stylesheet" href="/handbook/tomorrow-night.css">
|
||
|
|
<link rel="stylesheet" href="/handbook/ayu-highlight.css">
|
||
|
|
|
||
|
|
<!-- Custom Stylesheets -->
|
||
|
|
<link rel="stylesheet" href="/hhl.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- Provide site root to javascript -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
var path_to_root = "/handbook";
|
||
|
|
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
try {
|
||
|
|
var theme = localStorage.getItem('mdbook-theme');
|
||
|
|
var sidebar = localStorage.getItem('mdbook-sidebar');
|
||
|
|
|
||
|
|
if (theme.startsWith('"') && theme.endsWith('"')) {
|
||
|
|
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
||
|
|
}
|
||
|
|
|
||
|
|
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
||
|
|
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
||
|
|
}
|
||
|
|
} catch (e) { }
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Set the theme before any content is loaded, prevents flash -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
var theme;
|
||
|
|
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
||
|
|
if (theme === null || theme === undefined) { theme = default_theme; }
|
||
|
|
var html = document.querySelector('html');
|
||
|
|
html.classList.remove('no-js')
|
||
|
|
html.classList.remove('light')
|
||
|
|
html.classList.add(theme);
|
||
|
|
html.classList.add('js');
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Hide / unhide sidebar before it is displayed -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
var html = document.querySelector('html');
|
||
|
|
var sidebar = 'hidden';
|
||
|
|
if (document.body.clientWidth >= 1080) {
|
||
|
|
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
||
|
|
sidebar = sidebar || 'visible';
|
||
|
|
}
|
||
|
|
html.classList.remove('sidebar-visible');
|
||
|
|
html.classList.add("sidebar-" + sidebar);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
||
|
|
<div class="sidebar-scrollbox">
|
||
|
|
<ol class="chapter">
|
||
|
|
<li class="chapter-item affix ">
|
||
|
|
<a href="/">Home</a>
|
||
|
|
</li>
|
||
|
|
<li class="chapter-item affix ">
|
||
|
|
<a href="/news/">News</a>
|
||
|
|
</li>
|
||
|
|
<li class="chapter-item affix ">
|
||
|
|
<a href="/about/">About</a>
|
||
|
|
</li>
|
||
|
|
<li class="chapter-item affix ">
|
||
|
|
<a href="/pub/">Download</a>
|
||
|
|
</li>
|
||
|
|
<li class="chapter-item affix ">
|
||
|
|
<a href="https://git.hitchhiker-linux.org">Source</a>
|
||
|
|
</li>
|
||
|
|
<li class="spacer"></li>
|
||
|
|
<li class="chapter-item affix ">
|
||
|
|
<a href="/handbook/">Handbook</a>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
||
|
|
</nav>
|
||
|
|
<div id="page-wrapper" class="page-wrapper">
|
||
|
|
<div class="page">
|
||
|
|
<div id="menu-bar-hover-placeholder"></div>
|
||
|
|
<div id="menu-bar" class="menu-bar sticky bordered">
|
||
|
|
<div class="left-buttons">
|
||
|
|
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
||
|
|
<i class="fa fa-bars"></i>
|
||
|
|
</button>
|
||
|
|
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
||
|
|
<i class="fa fa-paint-brush"></i>
|
||
|
|
</button>
|
||
|
|
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
||
|
|
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
||
|
|
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
||
|
|
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
||
|
|
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
||
|
|
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<h1 class="menu-title">
|
||
|
|
Hitch Hiker Linux
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
||
|
|
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
||
|
|
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
||
|
|
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<div id="content" class="content">
|
||
|
|
<main>
|
||
|
|
|
||
|
|
<h1><a class="header" href="#recent" id="recent">Website Redesign</a></h1>
|
||
|
|
<p class="subtitle"><strong>2021-02-18</strong></p>
|
||
|
|
<p>I know a little bit about a lot of things, and one of the things that I know
|
||
|
|
only in passing is web development.<span id="continue-reading"></span> I am by no means qualified at
|
||
|
|
or excited about web design. However, in the spirit of DIY I have always muddled
|
||
|
|
through all of my own projects. This has in the past meant using a CMS of some
|
||
|
|
sort, and a rather long time ago I settled on Mezzanine, a Django-based CMS
|
||
|
|
written in Python.</p>
|
||
|
|
<p>This worked out all right in most ways. However, a few weeks back I had a server
|
||
|
|
outage that I traced back to the update from Python 3.8 to Python 3.9. The
|
||
|
|
virtualenv that I had set up simply stopped working, causing the web server to be
|
||
|
|
unable to start as the default handler was DOA. Now, a Python virtualenv is a
|
||
|
|
supposedly complete standalone environment containing the Python interpretor and
|
||
|
|
libraries frozen to be version compatible with your application. It is supposed
|
||
|
|
to be self contained and not dependent upon the system-wide Python installation.
|
||
|
|
The fact that bumping a minor version number caused it to fail is distressing
|
||
|
|
and has soured my already low opinion of Python somewhat.</p>
|
||
|
|
<p>Additionally, I have long desired to incorporate a full handbook into the website
|
||
|
|
and do so in a way that looks seemless with the rest of the site. HitchHiker is
|
||
|
|
not going to be a turnkey system for most people and will need good documentation.
|
||
|
|
I have tried a few things that were available online, including Mezzanine Wiki,
|
||
|
|
but nothing is really suitable and many packages are broken and/or unmaintained
|
||
|
|
(including Mezzanine Wiki at the time I tried it).</p>
|
||
|
|
<p>Being impressed with the quality of the documentation for Rust I looked into what
|
||
|
|
they use. The Rust Book is built using <a href="https://github.com/rust-lang/mdBook">mdbook</a>,
|
||
|
|
which is a wonderful static markdown to html generator that does exaclt what it
|
||
|
|
claims to do and does it exceptionally well. After messing with it for all of two
|
||
|
|
minutes I was sold - it's just plain phenominal in use.</p>
|
||
|
|
<p>Having settled on mdbook for the forthcoming "<strong>Hitch Hiker's Guide to Hitch Hiker
|
||
|
|
Linux</strong>" I decided that if we're going static pages there, it would be a good
|
||
|
|
time to go static pages everywhere. I set about looking for a static site generator
|
||
|
|
that would give me enough flexibility for my needs and still be simple to use.</p>
|
||
|
|
<p>While there is no shortage of SSG's available right now, there were several popular
|
||
|
|
ones that I never really considered based on implementation. Jekyll, for one, is
|
||
|
|
written in Ruby and I'm not looking to pollute my machine with more interpreted
|
||
|
|
language cruft.</p>
|
||
|
|
<p>I gave <a href="https://gohugo.io/">Hugo</a> a long, hard look and went so far as to install
|
||
|
|
it and do some testing. Hugo is written in Go, seems to work well, and is definitely
|
||
|
|
fast. However, none of the available themes were going to be suitable without a
|
||
|
|
good deal of hacking.</p>
|
||
|
|
<p>At first glance, <a href="https://www.getzola.org/">Zola</a> appeared to have the same
|
||
|
|
strengths and the same issues as Hugo for my use case. I really couldn't see
|
||
|
|
applying any of the themes that I found directly without a lot of customization,
|
||
|
|
and there were a couple that I tried that were flat out broken. On top of whatever
|
||
|
|
customization I was going to have to do to whatever theme I picked, I was also
|
||
|
|
going to have to adapt to an mdbook theme as well....or was there another way?</p>
|
||
|
|
<p>It turns out that the default set of themes that ship with mdbook are pretty much
|
||
|
|
already great, and would look great adapted to an entire site. Now, mdbook itself
|
||
|
|
is pretty much not suitable for generating the entire site, as I need a front
|
||
|
|
page, I want to keep my blog, and I'd like to be able to incorporate other pages
|
||
|
|
as well that aren't going into the table of contents for the book. But what I
|
||
|
|
thought I could do is to create my own Zola template using the css from the mdbook
|
||
|
|
themes.</p>
|
||
|
|
<p>So in the end that's what I did. Zola, written in Rust, is actually quite a bit
|
||
|
|
simpler than Hugo and after a few initial trip ups getting started I'm finding
|
||
|
|
the template system to be something I can navigate all right. I'm left with a two
|
||
|
|
step rendering process to build the full site, as I'm rendering most of the site
|
||
|
|
using Zola and the book using mdbook. But hey, I've already proven that I can do
|
||
|
|
a good bit of automation using <code>make</code>, right?</p>
|
||
|
|
<p>While there's a bit more work left to finish migrating the old site, I have to
|
||
|
|
say that I'm completely satisfied with my choices as of now. Both Zola and mdbook
|
||
|
|
do things for me that were not going to be easily achievable in Mezzanine and come
|
||
|
|
with a lot of benefits right out of the box. As a for instance, built in syntax
|
||
|
|
highlighting for code snippets! Here's <code>echo</code> in Rust:</p>
|
||
|
|
<pre style="background-color:#2b303b;">
|
||
|
|
<code class="language-Rust" data-lang="Rust"><span style="color:#c0c5ce;">#![</span><span style="color:#bf616a;">warn</span><span style="color:#c0c5ce;">(clippy::all, clippy::pedantic)]
|
||
|
|
</span><span style="color:#b48ead;">use </span><span style="color:#c0c5ce;">std::env;
|
||
|
|
|
||
|
|
</span><span style="color:#b48ead;">fn </span><span style="color:#8fa1b3;">main</span><span style="color:#c0c5ce;">() {
|
||
|
|
</span><span style="color:#b48ead;">let</span><span style="color:#c0c5ce;"> args: Vec<String> = env::args().</span><span style="color:#96b5b4;">collect</span><span style="color:#c0c5ce;">();
|
||
|
|
</span><span style="color:#b48ead;">let</span><span style="color:#c0c5ce;"> len = args.</span><span style="color:#96b5b4;">len</span><span style="color:#c0c5ce;">();
|
||
|
|
</span><span style="color:#b48ead;">let</span><span style="color:#c0c5ce;"> n = len > </span><span style="color:#d08770;">1 </span><span style="color:#c0c5ce;">&& args[</span><span style="color:#d08770;">1</span><span style="color:#c0c5ce;">] == "</span><span style="color:#a3be8c;">-n</span><span style="color:#c0c5ce;">";
|
||
|
|
</span><span style="color:#b48ead;">let</span><span style="color:#c0c5ce;"> i = </span><span style="color:#b48ead;">if</span><span style="color:#c0c5ce;"> n { </span><span style="color:#d08770;">2 </span><span style="color:#c0c5ce;">} </span><span style="color:#b48ead;">else </span><span style="color:#c0c5ce;">{ </span><span style="color:#d08770;">1 </span><span style="color:#c0c5ce;">};
|
||
|
|
</span><span style="color:#b48ead;">for </span><span style="color:#c0c5ce;">(index, arg) in args.</span><span style="color:#96b5b4;">iter</span><span style="color:#c0c5ce;">().</span><span style="color:#96b5b4;">enumerate</span><span style="color:#c0c5ce;">().</span><span style="color:#96b5b4;">skip</span><span style="color:#c0c5ce;">(i) {
|
||
|
|
</span><span style="color:#b48ead;">if</span><span style="color:#c0c5ce;"> index < len - </span><span style="color:#d08770;">1 </span><span style="color:#c0c5ce;">{
|
||
|
|
print!("</span><span style="color:#d08770;">{} </span><span style="color:#c0c5ce;">", arg);
|
||
|
|
} </span><span style="color:#b48ead;">else </span><span style="color:#c0c5ce;">{
|
||
|
|
print!("</span><span style="color:#d08770;">{}</span><span style="color:#c0c5ce;">", arg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</span><span style="color:#b48ead;">if </span><span style="color:#c0c5ce;">!n {
|
||
|
|
println!();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</span></code></pre>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
<p class="subtitle"><strong>Tags for this post:</strong></p>
|
||
|
|
|
||
|
|
<a class="tags" href="/tags/site-news/">Site News</a>
|
||
|
|
|
||
|
|
<a class="tags" href="/tags/web-programming/">Web Programming</a>
|
||
|
|
|
||
|
|
<a class="tags" href="/tags/css/">css</a>
|
||
|
|
|
||
|
|
<a class="tags" href="/tags/html/">html</a>
|
||
|
|
|
||
|
|
<a class="tags" href="/tags/zola/">Zola</a>
|
||
|
|
|
||
|
|
<a class="tags" href="/tags/mdbook/">mdbook</a>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
(function themes() {
|
||
|
|
var html = document.querySelector('html');
|
||
|
|
var themeToggleButton = document.getElementById('theme-toggle');
|
||
|
|
var themePopup = document.getElementById('theme-list');
|
||
|
|
var themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
|
||
|
|
var stylesheets = {
|
||
|
|
ayuHighlight: document.querySelector("[href$='ayu-highlight.css']"),
|
||
|
|
tomorrowNight: document.querySelector("[href$='tomorrow-night.css']"),
|
||
|
|
highlight: document.querySelector("[href$='highlight.css']"),
|
||
|
|
};
|
||
|
|
|
||
|
|
function showThemes() {
|
||
|
|
themePopup.style.display = 'block';
|
||
|
|
themeToggleButton.setAttribute('aria-expanded', true);
|
||
|
|
themePopup.querySelector("button#" + get_theme()).focus();
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideThemes() {
|
||
|
|
themePopup.style.display = 'none';
|
||
|
|
themeToggleButton.setAttribute('aria-expanded', false);
|
||
|
|
themeToggleButton.focus();
|
||
|
|
}
|
||
|
|
|
||
|
|
function get_theme() {
|
||
|
|
var theme;
|
||
|
|
try { theme = localStorage.getItem('mdbook-theme'); } catch (e) { }
|
||
|
|
if (theme === null || theme === undefined) {
|
||
|
|
return default_theme;
|
||
|
|
} else {
|
||
|
|
return theme;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function set_theme(theme, store = true) {
|
||
|
|
let ace_theme;
|
||
|
|
|
||
|
|
if (theme == 'coal' || theme == 'navy') {
|
||
|
|
stylesheets.ayuHighlight.disabled = true;
|
||
|
|
stylesheets.tomorrowNight.disabled = false;
|
||
|
|
stylesheets.highlight.disabled = true;
|
||
|
|
|
||
|
|
ace_theme = "ace/theme/tomorrow_night";
|
||
|
|
} else if (theme == 'ayu') {
|
||
|
|
stylesheets.ayuHighlight.disabled = false;
|
||
|
|
stylesheets.tomorrowNight.disabled = true;
|
||
|
|
stylesheets.highlight.disabled = true;
|
||
|
|
ace_theme = "ace/theme/tomorrow_night";
|
||
|
|
} else {
|
||
|
|
stylesheets.ayuHighlight.disabled = true;
|
||
|
|
stylesheets.tomorrowNight.disabled = true;
|
||
|
|
stylesheets.highlight.disabled = false;
|
||
|
|
ace_theme = "ace/theme/dawn";
|
||
|
|
}
|
||
|
|
|
||
|
|
setTimeout(function () {
|
||
|
|
themeColorMetaTag.content = getComputedStyle(document.body).backgroundColor;
|
||
|
|
}, 1);
|
||
|
|
|
||
|
|
if (window.ace && window.editors) {
|
||
|
|
window.editors.forEach(function (editor) {
|
||
|
|
editor.setTheme(ace_theme);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var previousTheme = get_theme();
|
||
|
|
|
||
|
|
if (store) {
|
||
|
|
try { localStorage.setItem('mdbook-theme', theme); } catch (e) { }
|
||
|
|
}
|
||
|
|
|
||
|
|
html.classList.remove(previousTheme);
|
||
|
|
html.classList.add(theme);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Set theme
|
||
|
|
var theme = get_theme();
|
||
|
|
|
||
|
|
set_theme(theme, false);
|
||
|
|
|
||
|
|
themeToggleButton.addEventListener('click', function () {
|
||
|
|
if (themePopup.style.display === 'block') {
|
||
|
|
hideThemes();
|
||
|
|
} else {
|
||
|
|
showThemes();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
themePopup.addEventListener('click', function (e) {
|
||
|
|
var theme = e.target.id || e.target.parentElement.id;
|
||
|
|
set_theme(theme);
|
||
|
|
});
|
||
|
|
|
||
|
|
themePopup.addEventListener('focusout', function(e) {
|
||
|
|
// e.relatedTarget is null in Safari and Firefox on macOS (see workaround below)
|
||
|
|
if (!!e.relatedTarget && !themeToggleButton.contains(e.relatedTarget) && !themePopup.contains(e.relatedTarget)) {
|
||
|
|
hideThemes();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Should not be needed, but it works around an issue on macOS & iOS: https://github.com/rust-lang/mdBook/issues/628
|
||
|
|
document.addEventListener('click', function(e) {
|
||
|
|
if (themePopup.style.display === 'block' && !themeToggleButton.contains(e.target) && !themePopup.contains(e.target)) {
|
||
|
|
hideThemes();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener('keydown', function (e) {
|
||
|
|
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
|
||
|
|
if (!themePopup.contains(e.target)) { return; }
|
||
|
|
|
||
|
|
switch (e.key) {
|
||
|
|
case 'Escape':
|
||
|
|
e.preventDefault();
|
||
|
|
hideThemes();
|
||
|
|
break;
|
||
|
|
case 'ArrowUp':
|
||
|
|
e.preventDefault();
|
||
|
|
var li = document.activeElement.parentElement;
|
||
|
|
if (li && li.previousElementSibling) {
|
||
|
|
li.previousElementSibling.querySelector('button').focus();
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 'ArrowDown':
|
||
|
|
e.preventDefault();
|
||
|
|
var li = document.activeElement.parentElement;
|
||
|
|
if (li && li.nextElementSibling) {
|
||
|
|
li.nextElementSibling.querySelector('button').focus();
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 'Home':
|
||
|
|
e.preventDefault();
|
||
|
|
themePopup.querySelector('li:first-child button').focus();
|
||
|
|
break;
|
||
|
|
case 'End':
|
||
|
|
e.preventDefault();
|
||
|
|
themePopup.querySelector('li:last-child button').focus();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
|
||
|
|
(function sidebar() {
|
||
|
|
var html = document.querySelector("html");
|
||
|
|
var sidebar = document.getElementById("sidebar");
|
||
|
|
var sidebarLinks = document.querySelectorAll('#sidebar a');
|
||
|
|
var sidebarToggleButton = document.getElementById("sidebar-toggle");
|
||
|
|
var sidebarResizeHandle = document.getElementById("sidebar-resize-handle");
|
||
|
|
var firstContact = null;
|
||
|
|
|
||
|
|
function showSidebar() {
|
||
|
|
html.classList.remove('sidebar-hidden')
|
||
|
|
html.classList.add('sidebar-visible');
|
||
|
|
Array.from(sidebarLinks).forEach(function (link) {
|
||
|
|
link.setAttribute('tabIndex', 0);
|
||
|
|
});
|
||
|
|
sidebarToggleButton.setAttribute('aria-expanded', true);
|
||
|
|
sidebar.setAttribute('aria-hidden', false);
|
||
|
|
try { localStorage.setItem('mdbook-sidebar', 'visible'); } catch (e) { }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
var sidebarAnchorToggles = document.querySelectorAll('#sidebar a.toggle');
|
||
|
|
|
||
|
|
function toggleSection(ev) {
|
||
|
|
ev.currentTarget.parentElement.classList.toggle('expanded');
|
||
|
|
}
|
||
|
|
|
||
|
|
Array.from(sidebarAnchorToggles).forEach(function (el) {
|
||
|
|
el.addEventListener('click', toggleSection);
|
||
|
|
});
|
||
|
|
|
||
|
|
function hideSidebar() {
|
||
|
|
html.classList.remove('sidebar-visible')
|
||
|
|
html.classList.add('sidebar-hidden');
|
||
|
|
Array.from(sidebarLinks).forEach(function (link) {
|
||
|
|
link.setAttribute('tabIndex', -1);
|
||
|
|
});
|
||
|
|
sidebarToggleButton.setAttribute('aria-expanded', false);
|
||
|
|
sidebar.setAttribute('aria-hidden', true);
|
||
|
|
try { localStorage.setItem('mdbook-sidebar', 'hidden'); } catch (e) { }
|
||
|
|
}
|
||
|
|
|
||
|
|
// Toggle sidebar
|
||
|
|
sidebarToggleButton.addEventListener('click', function sidebarToggle() {
|
||
|
|
if (html.classList.contains("sidebar-hidden")) {
|
||
|
|
var current_width = parseInt(
|
||
|
|
document.documentElement.style.getPropertyValue('--sidebar-width'), 10);
|
||
|
|
if (current_width < 150) {
|
||
|
|
document.documentElement.style.setProperty('--sidebar-width', '150px');
|
||
|
|
}
|
||
|
|
showSidebar();
|
||
|
|
} else if (html.classList.contains("sidebar-visible")) {
|
||
|
|
hideSidebar();
|
||
|
|
} else {
|
||
|
|
if (getComputedStyle(sidebar)['transform'] === 'none') {
|
||
|
|
hideSidebar();
|
||
|
|
} else {
|
||
|
|
showSidebar();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
sidebarResizeHandle.addEventListener('mousedown', initResize, false);
|
||
|
|
|
||
|
|
function initResize(e) {
|
||
|
|
window.addEventListener('mousemove', resize, false);
|
||
|
|
window.addEventListener('mouseup', stopResize, false);
|
||
|
|
html.classList.add('sidebar-resizing');
|
||
|
|
}
|
||
|
|
function resize(e) {
|
||
|
|
var pos = (e.clientX - sidebar.offsetLeft);
|
||
|
|
if (pos < 20) {
|
||
|
|
hideSidebar();
|
||
|
|
} else {
|
||
|
|
if (html.classList.contains("sidebar-hidden")) {
|
||
|
|
showSidebar();
|
||
|
|
}
|
||
|
|
pos = Math.min(pos, window.innerWidth - 100);
|
||
|
|
document.documentElement.style.setProperty('--sidebar-width', pos + 'px');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//on mouseup remove windows functions mousemove & mouseup
|
||
|
|
function stopResize(e) {
|
||
|
|
html.classList.remove('sidebar-resizing');
|
||
|
|
window.removeEventListener('mousemove', resize, false);
|
||
|
|
window.removeEventListener('mouseup', stopResize, false);
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('touchstart', function (e) {
|
||
|
|
firstContact = {
|
||
|
|
x: e.touches[0].clientX,
|
||
|
|
time: Date.now()
|
||
|
|
};
|
||
|
|
}, { passive: true });
|
||
|
|
|
||
|
|
document.addEventListener('touchmove', function (e) {
|
||
|
|
if (!firstContact)
|
||
|
|
return;
|
||
|
|
|
||
|
|
var curX = e.touches[0].clientX;
|
||
|
|
var xDiff = curX - firstContact.x,
|
||
|
|
tDiff = Date.now() - firstContact.time;
|
||
|
|
|
||
|
|
if (tDiff < 250 && Math.abs(xDiff) >= 150) {
|
||
|
|
if (xDiff >= 0 && firstContact.x < Math.min(document.body.clientWidth * 0.25, 300))
|
||
|
|
showSidebar();
|
||
|
|
else if (xDiff < 0 && curX < 300)
|
||
|
|
hideSidebar();
|
||
|
|
|
||
|
|
firstContact = null;
|
||
|
|
}
|
||
|
|
}, { passive: true });
|
||
|
|
|
||
|
|
// Scroll sidebar to current active section
|
||
|
|
var activeSection = document.getElementById("sidebar").querySelector(".active");
|
||
|
|
if (activeSection) {
|
||
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
|
||
|
|
activeSection.scrollIntoView({ block: 'center' });
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|