Actual mobile toc; dark mode; speed up site loading

documentation/asciidoc/accessories/sense-hat/software.adoc

@@ -104,7 +104,7 @@ After installation, example code can be found under `/usr/src/sense-hat/examples
 
 Complete documentation for the library can be found at https://sense-hat.readthedocs.io/en/latest/[sense-hat.readthedocs.io].
 
-=== Use the Sense HAT with {cpp}
+=== Use the Sense HAT with C++
 
 https://github.com/RPi-Distro/RTIMULib[RTIMULib] is a {cpp} and Python library that makes it easy to use 9-dof and 10-dof IMUs with embedded Linux systems. A pre-calibrated settings file is provided in `/etc/RTIMULib.ini`, which is also copied and used by `sense-hat`. The included examples look for `RTIMULib.ini` in the current working directory, so you may wish to copy the file there to get more accurate data.
 

documentation/asciidoc/microcontrollers/c_sdk/official_sdk.adoc

@@ -1,4 +1,4 @@
-== Raspberry Pi Pico C/{cpp} SDK
+== Raspberry Pi Pico C/C++ SDK
 
 Our official C SDK can be used from the command line, or from popular integrated development environments like Visual Studio Code, Eclipse, and CLion. To get started, download our C/{cpp} SDK and Examples, and take a look at our 'https://datasheets.raspberrypi.com/pico/getting-started-with-pico.pdf[getting started]' documentation. Or for a quick setup see the next section.
 

jekyll-assets/_includes/head.html

@@ -7,7 +7,7 @@
 <meta property="og:title" content="{{ page.title }}">
 <meta property="og:description" content="The official documentation for Raspberry Pi computers and microcontrollers">
 <meta property="og:url" content="https://www.raspberrypi.com{{ page.url | relative_url }}">
-<meta property="og:image" content="https://www.raspberrypi.com{{ "/images/opensocial.png" | relative_url }}">
+<meta property="og:image" content="https://www.raspberrypi.com{{ '/images/opensocial.png' | relative_url }}">
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:site" content="@Raspberry_Pi">
 <meta name="twitter:title" content="{{ page.title }}">
@@ -20,76 +20,13 @@
 <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>
+<link rel="stylesheet" href="{{ site.baseurl }}/css/tocbot.css?ver={{ site.time | date: '%s' }}">
+<script type="text/javascript" src="{{ site.baseurl }}/scripts/theme.js?ver={{ site.time | date: '%s' }}"></script>
+<script type="text/javascript" src="{{ site.baseurl }}/scripts/tocbot.js?ver={{ site.time | date: '%s' }}"></script>
+<script type="text/javascript" src="{{ site.baseurl }}/scripts/toc.js?ver={{ site.time | date: '%s' }}"></script>
+<script type="text/javascript" src="{{ site.baseurl }}/scripts/asciidoctor-tabs.js?ver={{ site.time | date: '%s' }}"></script>
+<script async src="{{ site.baseurl }}/scripts/clipboard.min.js?ver={{ site.time | date: '%s' }}"></script>
+<script async src="{{ site.baseurl }}/scripts/copy-to-clipboard.js?ver={{ site.time | date: '%s' }}"></script>
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-V8TFXM3BKJ"></script>
 <script>
   window.dataLayer = window.dataLayer || [];

jekyll-assets/_layouts/docs.html

@@ -99,7 +99,7 @@ <h1 id="docs-header-title">
                               <a class="level3" href="{{ site.baseurl }}{{ item.path }}#{{ entry.anchor }}" >
                                 <a id="{{ item.path }}#{{entry.anchor}}-toc" class="toc-item" alt="expand documentation category" title="expand documentation category"
                                 >
-                                <style onload="if (window.location.hash.includes('{{ entry.anchor }}')) { document.getElementById('{{ item.path }}#{{entry.anchor}}-toc').setAttribute('style', 'font-weight:bold'); document.getElementById('{{ item.path }}#{{ entry.anchor }}').checked = true; }"></style>
+                                <script type="text/javascript">if (window.location.hash.includes('{{ entry.anchor }}')) { document.getElementById('{{ item.path }}#{{entry.anchor}}-toc').setAttribute('style', 'font-weight:bold'); document.getElementById('{{ item.path }}#{{ entry.anchor }}').checked = true; }</script>
                                   {{ entry.heading | markdownify }}
                                 </a>
                               </a>
@@ -110,7 +110,7 @@ <h1 id="docs-header-title">
                                   onclick="document.getElementById('mobile-toggle').checked = false;"
                                   class="toc-item no-dropdown"
                                   >
-                                  <style onload="if (window.location.hash.includes('{{ entry.anchor }}')) { document.getElementById('{{ item.path }}#{{entry.anchor}}-toc').setAttribute('style', 'font-weight:bold'); document.getElementById('{{ item.path }}#{{ entry.anchor }}').checked = true; }"> </style>
+                                  <script type="text/javascript">if (window.location.hash.includes('{{ entry.anchor }}')) { document.getElementById('{{ item.path }}#{{entry.anchor}}-toc').setAttribute('style', 'font-weight:bold'); document.getElementById('{{ item.path }}#{{ entry.anchor }}').checked = true; }</script>
                                   {{ entry.heading | markdownify }}
                                 </a>
                               </a>
@@ -132,7 +132,7 @@ <h1 id="docs-header-title">
                                         href="{{ site.baseurl }}{{ item.path }}#{{ subentry.anchor }}" onclick="document.getElementById('mobile-toggle').checked = false;"
                                         id="{{ item.path }}#{{subentry.anchor}}-toc"
                                       >
-                                      <style onload="if (window.location.hash.includes('{{ subentry.anchor }}')) { document.getElementById('{{ item.path }}#{{subentry.anchor}}-toc').setAttribute('style', 'font-weight:bold'); document.getElementById('{{ item.path }}#{{ entry.anchor }}').checked = true; document.getElementById('{{ item.path }}#{{entry.anchor}}-toc').setAttribute('style', 'font-weight:bold'); }"></style>
+                                      <script type="text/javascript">if (window.location.hash.includes('{{ subentry.anchor }}')) { document.getElementById('{{ item.path }}#{{subentry.anchor}}-toc').setAttribute('style', 'font-weight:bold'); document.getElementById('{{ item.path }}#{{ entry.anchor }}').checked = true; document.getElementById('{{ item.path }}#{{entry.anchor}}-toc').setAttribute('style', 'font-weight:bold'); }</script>
                                         {{ subentry.heading | markdownify }}
                                       </a>
                                     </a>
@@ -176,7 +176,6 @@ <h5>On this page</h5>
     </div>
 
     {% include footer.html %}
-    {% include scripts.html %}
     {% include search.html %}
 
   </body>

jekyll-assets/css/syntax-highlighting.css

@@ -35,7 +35,7 @@
 .highlight .na { color: #bbbbbb } /* Name.Attribute */
 .highlight .nb { color: var(--brand-colour) } /* Name.Builtin */
 .highlight .nc { color: #447fcf; text-decoration: underline } /* Name.Class */
-.highlight .no { color: #40ffff } /* Name.Constant */
+.highlight .no { color: #40aaaa } /* Name.Constant */
 .highlight .nd { color: #ffa500 } /* Name.Decorator */
 .highlight .ni { color: var(--textcolor) } /* Name.Entity */
 .highlight .ne { color: #bbbbbb } /* Name.Exception */
@@ -45,7 +45,7 @@
 .highlight .nx { color: var(--textcolor) } /* Name.Other */
 .highlight .py { color: var(--textcolor) } /* Name.Property */
 .highlight .nt { color: #6ab825; font-weight: bold } /* Name.Tag */
-.highlight .nv { color: #40ffff } /* Name.Variable */
+.highlight .nv { color: #40aaaa } /* Name.Variable */
 .highlight .ow { color: #6ab825; font-weight: bold } /* Operator.Word */
 .highlight .w { color: #666666 } /* Text.Whitespace */
 .highlight .mf { color: #3677a9 } /* Literal.Number.Float */
@@ -64,9 +64,9 @@
 .highlight .s1 { color: #ed9d13 } /* Literal.String.Single */
 .highlight .ss { color: #ed9d13 } /* Literal.String.Symbol */
 .highlight .bp { color: #24909d } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #40ffff } /* Name.Variable.Class */
-.highlight .vg { color: #40ffff } /* Name.Variable.Global */
-.highlight .vi { color: #40ffff } /* Name.Variable.Instance */
+.highlight .vc { color: #40aaaa } /* Name.Variable.Class */
+.highlight .vg { color: #40aaaa } /* Name.Variable.Global */
+.highlight .vi { color: #40aaaa } /* Name.Variable.Instance */
 .highlight .il { color: #3677a9 } /* Literal.Number.Integer.Long */
 
 .highlight .gp, .highlight .gp + .w {