Skip to content

Commit

Permalink
Remove extraneous padding and javascript, add dark mode; todo: mobile…
Browse files Browse the repository at this point in the history
… toc
  • Loading branch information
nathan-contino committed Oct 22, 2024
1 parent e14224a commit 18f7b8f
Show file tree
Hide file tree
Showing 26 changed files with 2,368 additions and 1,557 deletions.
2 changes: 1 addition & 1 deletion Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ html: run_ninja

# Build the html output files and additionally run a small webserver for local previews
serve_html: run_ninja
$(JEKYLL_CMD) serve
$(JEKYLL_CMD) serve --watch

# Delete all the files created by the 'html' target
clean_html:
Expand Down
3 changes: 2 additions & 1 deletion _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ title: Raspberry Pi Documentation
description: >- # this means to ignore newlines until "baseurl:"
Raspberry Pi Documentation.
baseurl: "/documentation" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
url: "https://www.raspberrypi.com/documentation" # the base hostname & protocol for your site, e.g. http://example.com
githuburl: "https://github.com/raspberrypi/documentation/"
mainsite: https://raspberrypi.com/
githubbranch: master
githubbranch_edit: develop

Expand Down
8 changes: 4 additions & 4 deletions jekyll-assets/_includes/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #f5f6f9;
background: var(--near-bg);
overflow: hidden;
}
#__rptl-footer .__rptl-footer-container {
Expand Down Expand Up @@ -63,7 +63,7 @@
}
#__rptl-footer .__rptl-footer-heading {
font-weight: 700;
color: #333333;
color: var(--subtle-text);
margin-bottom: 8px;
}
#__rptl-footer .__rptl-footer-list {
Expand All @@ -75,11 +75,11 @@
}
#__rptl-footer .__rptl-footer-icon {
margin-right: 0.5em;
fill: #333;
fill: var(--subtle-text);
}
#__rptl-footer .__rptl-footer-link, #__rptl-footer .__rptl-footer-link--with-icon {
font-weight: 400;
color: #333;
color: var(--subtle);
text-decoration: none;
}
#__rptl-footer .__rptl-footer-link--with-icon {
Expand Down
80 changes: 79 additions & 1 deletion jekyll-assets/_includes/head.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="{{ site.baseurl }}/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.title | strip_html}}</title>
<meta name="description" content="The official documentation for Raspberry Pi computers and microcontrollers">
Expand All @@ -17,9 +18,86 @@
<link rel="preconnect" href="https://IHWGNTJ1NP-dsn.algolia.net" crossorigin>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/>
<link rel="stylesheet" href="{{ site.baseurl }}/css/style.css?ver={{ site.time | date: '%s' }}">
<link rel="stylesheet" href="{{ site.baseurl }}/css/tabs.css?ver={{ site.time | date: '%s' }}">
<link rel="stylesheet" href="{{ site.baseurl }}/css/asciidoctor-tabs.css?ver={{ site.time | date: '%s' }}">
<link rel="stylesheet" href="{{ site.baseurl }}/css/syntax-highlighting.css?ver={{ site.time | date: '%s' }}">
<link rel="stylesheet" href="{{ site.baseurl }}/css/tocbot.css">
<script src="{{ site.baseurl }}/scripts/tocbot.js"></script>
<script>
/* Trigger Tocbot dynamic TOC, works with tocbot 3.0.2 */
function makeToc() {
var oldtoc = document.getElementById('toc').nextElementSibling;
var newtoc = document.getElementById('tocbot');
newtoc.setAttribute('id', 'tocbot');
newtoc.setAttribute('class', 'js-toc');
oldtoc.parentNode.replaceChild(newtoc, oldtoc);
tocbot.init({ contentSelector: '#content',
headingSelector: 'h1, h2, h3, h4',
smoothScroll: true,
includeHtml: true
});
var handleTocOnResize = function() {
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
if (width < 768) {
tocbot.refresh({ contentSelector: '#content',
headingSelector: 'h1, h2, h3, h4',
collapseDepth: 6,
activeLinkClass: 'ignoreactive',
throttleTimeout: 1000,
smoothScroll: true });
}
else {
tocbot.refresh({ contentSelector: '#content',
headingSelector: 'h1, h2, h3, h4',
smoothScroll: true });
}
};
window.addEventListener('resize', handleTocOnResize);
handleTocOnResize();
}

// toggles the site theme between dark and light
function toggleTheme() {
// fetch the theme from local storage (if it exists)
var theme = localStorage.getItem('theme');
// if theme them has never been set, or is light, set the theme to the dark symbol in local storage to change it
if (localStorage.getItem('theme') !== null && theme == '🌝' ) {
localStorage.setItem('theme', '🌚');
} else {
// otherwise, the theme is currently set to dark, so set the theme to the light symbol in local storage to change it
localStorage.setItem('theme', '🌝');
}
// finally, toggle the light option off or on the body to change the display of the theme
document.body.classList.toggle('light');
}

// initialises the site theme display
// of key interest here: from the user's perspective, the site defaults to the light theme...
// ...unless your browser uses prefers-color-scheme to ask for a dark theme
// from the site's perspective, we default to a dark theme, but toggle it to a light theme on load if the user doesn't ask for dark.
// why do this? To prevent an annoying light 'flash' for dark theme users. light theme users don't really notice or care if there's a dark anti-flash.
function initTheme() {
// fetch the theme from local storage (if it exists)
var theme = localStorage.getItem('theme');
console.log('initialising theme')
// if the theme has been set to light (null check to short circuit if not set)
if(theme !== null && theme === '🌝'
// if we can use matchMedia and the browser supports the dark color scheme
|| (window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches)
&& theme !== '🌚') {
console.log('setting theme to light')
// toggles the theme from the default dark mode to the light version (which actually _shows_ by default to many users)
document.body.classList.toggle('light');
}
}

// make it easy to call this stuff from onload()
function makeTocAndinitTheme() {
initTheme();
makeToc();
}
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-180927933-8"></script>
<script>
window.dataLayer = window.dataLayer || [];
Expand Down
25 changes: 13 additions & 12 deletions jekyll-assets/_includes/header.html

Large diffs are not rendered by default.

56 changes: 0 additions & 56 deletions jekyll-assets/_includes/nav.html

This file was deleted.

83 changes: 1 addition & 82 deletions jekyll-assets/_includes/scripts.html
Original file line number Diff line number Diff line change
@@ -1,90 +1,9 @@
<!-- Script for the TOC toggle -->
<script src="{{ site.baseurl }}/scripts/nav.js?ver={{ site.time | date: '%s' }}" type="text/javascript"></script>

<!-- Asciidoctor tabs -->
<script src="{{ site.baseurl }}/scripts/asciidoctor-tabs.js?ver={{ site.time | date: '%s' }}" type="text/javascript"></script>

<!-- TOCify scripts -->
<script src="{{ site.baseurl }}/scripts/jquery-1.12.4.min.js"></script>
<script src="{{ site.baseurl }}/scripts/jquery-ui-1.13.0.custom.min.js"></script>
<script src="{{ site.baseurl }}/scripts/jquery.tocify.js?ver={{ site.time | date: '%s' }}"></script>

<!-- Copy To Clipboard scripts -->
<script src="{{ site.baseurl }}/scripts/clipboard.min.js"></script>
<script src="{{ site.baseurl }}/scripts/copy-to-clipboard.js?ver={{ site.time | date: '%s' }}"></script>

<!-- Some custom handling for whitepapers -->
<script src="{{ site.baseurl }}/scripts/whitepaper.js?ver={{ site.time | date: '%s' }}"></script>

<script>
function hasher(text, element) {
return text.toLowerCase().replace(/ /g, "-").replace(/\./g, "-").replace(/[^-\w]/g, "").replace(/-+/g, "-");
}

function waitForElementToDisplay(selector, checkFrequencyInMs, timeoutInMs) {
try {
// wait for all the content to load first...
var startTimeInMs = Date.now();
(function loopSearch() {
// && document.querySelector(selector).getBoundingClientRect().top > 0
if (document.querySelector(selector) != null && document.querySelector(selector).getBoundingClientRect().top > 0) {
scrollToElement(selector);
return;
}
else {
setTimeout(function () {
if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
return;
loopSearch();
}, checkFrequencyInMs);
}
})();
} catch (e) {
console.log("there was an error in scrollToElement:");
console.log(e);
}
}

function scrollToElement(selector) {
try {
var target = document.querySelector(selector);
if (target) {
setTimeout(function () {
target.scrollIntoView({ behavior: "instant" });
setTimeout(function () {
target.scrollIntoView({ behavior: "instant" });
},100);
},1);


} else {
console.log("Target not found :(");
}
} catch (e) {
console.log("there was an error in scrollToElement:");
console.log(e);
}
}

$(function() {
$("#toc").tocify({ showAndHide: false, hashGenerator: hasher, extendPage: false, ignoreSelector: ".discrete" });
// special handling to scroll to tocify elements on the page
if (window.location.hasOwnProperty("hash") && window.location.hash.indexOf("#") > -1) {
var myhash = window.location.hash;
myhash = myhash.replace("#", "");
var selector = "div[data-unique="+myhash+"] + *";
waitForElementToDisplay(selector, 1000, 9000);
}
});
</script>

<script>
var contents = document.getElementById("contents");
contents.addEventListener('mouseenter', e => {
contents.style.overflowY = 'auto';
});

contents.addEventListener('mouseleave', e => {
contents.style.overflowY = 'hidden';
});
</script>
<script src="{{ site.baseurl }}/scripts/whitepaper.js?ver={{ site.time | date: '%s' }}"></script>
3 changes: 0 additions & 3 deletions jekyll-assets/_includes/subtitle404.html

This file was deleted.

3 changes: 3 additions & 0 deletions jekyll-assets/_includes/theme.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div id="theme-toggle-container">
<a id="theme-toggle" alt="toggle site theme" title="toggle site theme" onclick="toggleTheme()"></a>
</div>
4 changes: 0 additions & 4 deletions jekyll-assets/_includes/toptitle.html

This file was deleted.

4 changes: 0 additions & 4 deletions jekyll-assets/_includes/toptitle404.html

This file was deleted.

30 changes: 15 additions & 15 deletions jekyll-assets/_layouts/boxes.html
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<!doctype html>
<html lang="en">
<head>
{% include head.html %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/boxes.css?ver={{ site.time | date: '%s' }}">
{% include head.html %}
</head>
<body>
{% include header.html %}
{% if page.name == "404.adoc" %}
{% include toptitle404.html %}
{% include subtitle404.html %}
{% else %}
{% include toptitle.html %}
{% include subtitle.html %}
{% endif %}
{% include tabs.html %}
<body onload=initTheme()>
{% include header.html %}

<div class="toptitle">
<h1><a href="/documentation/">Raspberry Pi Documentation</a></h1>
<div id="search-theme-toggle-container">
<div id="docsearch"></div>
<a id="theme-toggle-header" alt="toggle site theme" title="toggle site theme" onclick="toggleTheme()"></a>
</div>
{% include tabs.html %}
</div>

<div id="container">
<section id="box-content">
Expand All @@ -35,9 +35,9 @@
</section>
</div>

{% include contribute.html %}
{% include copyright.html %}
{% include footer.html %}
{% include contribute.html %}
{% include copyright.html %}
{% include footer.html %}
{% include search.html %}

</body>
Expand Down
Loading

0 comments on commit 18f7b8f

Please sign in to comment.