Actual mobile toc; dark mode; speed up site loading #3950
There are no files selected for viewing
|
There was a problem hiding this comment. This file (as with If you make changes here, they'll be lost whenever we need to update it for changes to the header or footer or are you wanting to break away from the site-wide versions and have a documentation-only version? There was a problem hiding this comment. To support dark mode, we do need to tweak the header and footer files, as otherwise they'll remain in light mode at all times. I've kept the tweaks minimal (mostly colour based, with some padding trimmed from the header to reduce excess space usage), so we could try to mostly share. But unless we add dark mode to the main site as well, this will require deviation. There was a problem hiding this comment. Given that this PR is modifying both the navigation and also adding a dark-mode, I wonder if it might be worth splitting that into two separate PRs? I.e. get the navigation changes merged in, and then add dark-mode theme as separate (later) step? 🤔 Or would it be far too much work to disentangle the two things? Also, we'll probably want @jackbenwillis to design us some "light mode" and "dark mode" icons which would integrate with the design better than the generic sun and moon icons that you're currently using? There was a problem hiding this comment. Rather than modifying There was a problem hiding this comment. Great point. Opened https://github.com/raspberrypi/raspberrypi.com-header-and-footer/pull/81 to address this -- once we've merged that, I'll update this PR to use that new approach (and likely some new header and footer-specific variables). |
| 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"> | ||
|
There was a problem hiding this comment. Is this different to the default behaviour of using https://www.raspberrypi.com/favicon.ico? There was a problem hiding this comment. Currently, local builds of the docs yell at you on the CLI about a missing favicon and lack a favicon entirely. I added this to fix the issue locally, and I think it shouldn't break anything. Though your sanity check is appreciated. Hopefully that makes sense now. |
||
| <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"> | ||
|
|
@@ -17,9 +18,78 @@ | |
| <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/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'); | ||
| // 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 !== '🌚') { | ||
| // 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'); | ||
| } | ||
| } | ||
| </script> | ||
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-V8TFXM3BKJ"></script> | ||
| <script> | ||
| window.dataLayer = window.dataLayer || []; | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.