Improve tabs

- They now work as tabs without JS
- Use an include for cleaner markdown
- A little bit nicer code overall, annoying that the split is needed, but otherwise pretty nice now

_includes/tabs.html

@@ -0,0 +1,7 @@
+<div class="tab-container">
+	{% for tab in page.tabs[include.index] %}
+		<input id="tab-{{ tab[0] }}" class="d-none" name="tabs" type="radio" {% if forloop.first %}checked{% endif %}>
+		<label for="tab-{{ tab[0] }}" class="tab-link btn btn-outline-secondary" onclick="setTab('{{ tab[0] }}')">{{ tab[1] }}</label>
+		<div class="tab">{{ include.tabs[forloop.index0] | markdownify }}</div>
+	{% endfor %}
+</div>

assets/css/style.scss

@@ -432,6 +432,39 @@ a.footnote::after {
 	right: unset;
 }
 
+// Tabs
+.tab-container {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.tab-container > .tab {
+	display: none;
+	order: 99;
+	padding-top: 1rem;
+	width: 100%;
+}
+
+input:checked+label+.tab {
+	display: block;
+}
+
+.tab-container > label {
+	margin-right: 0.25rem;
+}
+
+input:checked+label.btn-outline-secondary {
+	color: #fff;
+	background-color: #6c757d;
+	border-color: #6c757d;
+}
+
+input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline-secondary:active, input:checked+label.btn-outline-secondary:focus {
+	color: #fff;
+	background-color: #5c636a;
+	border-color: #565e64;
+}
+
 @media only screen and (min-width: 576px) {
 	// Version of .position-absolute that only triggers for sm+
 	.position-absolute-sm {

assets/js/tabs.js

@@ -1,64 +1,32 @@
-function openTab(event, target) {
+const platforms = {
-	for(let element of target.parentNode.parentNode.children) {
+	"Win32": "tab-windows",
-		if (element.id.includes("tab")) {
+	"MacIntel": "tab-macos"
-			element.style.display = "none";
+};
-		}
-	}
 
-	for(let element of target.parentNode.children) {
+function setTab(tab) {
-		element.classList.remove("btn-secondary");
+	let url = new URL(window.location);
-		element.classList.add("btn-outline-secondary");
+	url.searchParams.set("tab", tab);
-	}
+	history.pushState({}, "", url);
-	
-	document.getElementById(`tab-${target.dataset.tabName}`).style.display = "block";
-	target.classList.remove("btn-outline-secondary");
-	target.classList.add("btn-secondary");
-
-	if(event) {
-		let url = new URL(window.location);
-		url.searchParams.set("tab", target.dataset.tabName);
-		history.pushState({}, "", url);
-	}
 }
 
-// Remove links from tab buttons
+// Open the tabs for the current OS or the one in the URL
-for(a of document.getElementsByClassName("tab-link")) {
-	a.href = "javascript:void(0);";
-}
-
-// Open the tabs for the current OS or the default
 for(let tabGroup of document.getElementsByClassName("tab-container")) {
-	let tab = new URL(window.location).searchParams.get("tab");
+	let tab = null;
-	if(tab) {
-		openTab(null, Array.from(tabGroup.children[0].children).filter(r => r.dataset.tabName ==tab)[0]);
-		break;
-	}
 
-	for(let tab of tabGroup.children[0].children) {
+	// Try get tab from URL
-		if(tabGroup.classList.contains("tab-os")) {
+	let urlTab = new URL(window.location).searchParams.get("tab");
-			if(navigator.platform.includes("Win")) {
+	if(urlTab)
-				if(tab.classList.contains("tab-windows")) {
+		tab = Array.from(tabGroup.children).filter(r => r.id == `tab-${urlTab}`)[0];
-					openTab(null, tab);
+
-					break;
+	// Try get tab for OS
-				} else if(tab.classList.contains("other")) {
+	if(!tab)
-					openTab(null, tab);
+		tab = Array.from(tabGroup.children).filter(r => r.id == platforms[navigator.platform])[0];
-				}
+
-			} else if(navigator.platform.includes("Mac")) {
+	// Fall back to "other" tab
-				if(tab.classList.contains("tab-macos")) {
+	if(!tab)
-					openTab(null, tab);
+		tab = Array.from(tabGroup.children).filter(r => r.id == "tab-other")[0];
-					break;
+
-				} else if(tab.classList.contains("other")) {
+	// If a tab was found, open it
-					openTab(null, tab);
+	if(tab)
-				}
+		tab.click();
-			} else {
-				if(tab.classList.contains("tab-other")) {
-					openTab(null, tab);
-					break;
-				}
-			}
-		} else if(tab.classList.contains("tab-default")) {
-			openTab(null, tab);
-			break;
-		}
-	}
 }

pages/_en-US/ds-index/3ds-forwarders.md

@@ -5,6 +5,9 @@ section: ds-index
 category: guides
 title: DS Game Forwarders (3DS)
 description: How to create CIA forwarders to have your DS games on your 3DS's home menu
+tabs:
+  - tab-sd-card: SD card
+    tab-flashcard: Flashcard
 ---
 
 If you have any issues, check the FAQs on the [GBAtemp thread](https://gbatemp.net/threads/nds-forwarder-cias-for-your-home-menu.426174/).
@@ -85,6 +88,7 @@ After you extract the pack, you can edit `sd:/_nds/nds-bootstrap.ini` and change
 - `BOOST_CPU`: If set to 1, TWL clock speed is used, so lags begone
 - `SOUND_FREQ`: If set to 1, sound will play at 48 kHz, instead of 32 kHz
 {% endcapture%}
+{% assign tab-sd-card = tab-sd-card | split: "<!-->" %}
 
 {% capture tab-flashcard %}
 1. Download one of these packs:
@@ -103,21 +107,10 @@ After you extract the pack for your card, you can edit `sd:/_nds/ntr_forwarder.i
 - `DISABLEANIMATION`: If set to `1` or <kbd class="face">B</kbd> is held, the DS / DSi boot screen is skipped
 - `HEALTHSAFETYMSG`: If set to `1`, the boot screen's health and safety message will appear on the bottom screen, otherwise the bottom screen stays white with no health and safety message
 {% endcapture %}
+{% assign tab-flashcard = tab-flashcard | split: "<!-->" %}
 
-<div class="tab-container">
+{% assign tabs = tab-sd-card | concat: tab-flashcard %}
-	<div class="pb-3">
+{% include tabs.html index=0 tabs=tabs %}
-		<a class="tab-link btn btn-outline-secondary tab-default" href="#tab-sd-card" onclick="openTab(event, event.currentTarget)" data-tab-name="sd-card">SD card</a>
-		<a class="tab-link btn btn-outline-secondary" href="#tab-flashcard" onclick="openTab(event, event.currentTarget)" data-tab-name="flashcard">Flashcard</a>
-	</div>
-	<div id="tab-sd-card">
-		<noscript><h4>SD card</h4></noscript>
-		{{ tab-sd-card | markdownify }}
-	</div>
-	<div id="tab-flashcard">
-		<noscript><h4>Flashcard</h4></noscript>
-		{{ tab-flashcard | markdownify }}
-	</div>
-</div>
 
 ### Part 2: Getting the AP fix files from TWiLight Menu++
 If you already have TWiLight Menu++, skip to the next section.

pages/_en-US/twilightmenu/installing-3ds-manual.md

@@ -1,7 +1,7 @@
 ---
 lang: en-US
 layout: redirect
-destination: installing-3ds?tab=manual#tab-manual
+destination: installing-3ds?tab=manual
 title: Installing (3DS, Manual)
 ---
 

pages/_en-US/twilightmenu/installing-3ds.md

@@ -5,6 +5,10 @@ section: twilightmenu
 category: installing
 title: Installing (3DS)
 description: How to install TWiLight Menu++ on the Nintendo 3DS
+tabs:
+  - working-camera: Working camera
+    non-working-camera: Non-working camera
+    manual: Manual
 ---
 
 You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide](https://3ds.hacks.guide) to install it
@@ -21,6 +25,7 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide
 1. Press <kbd class="face">A</kbd> or tap the download icon in the sidebar and select `TWiLight Menu++` to install it
    - This will take a while
 {% endcapture %}
+{% assign tab-working-camera = tab-working-camera | split: "<!-->" %}
 
 {% capture tab-non-working-camera %}
 1. Download the `Universal-Updater.cia` file from the [Universal-Updater release page](https://github.com/Universal-Team/Universal-Updater/releases)
@@ -35,6 +40,7 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide
 1. Press <kbd class="face">A</kbd> or tap the download icon in the sidebar and select `TWiLight Menu++` to install it
    - This will take a while
 {% endcapture %}
+{% assign tab-non-working-camera = tab-non-working-camera | split: "<!-->" %}
 
 {% capture tab-manual %}
 1. Download the latest version of `TWiLightMenu-3DS.7z` from [the releases page](https://github.com/DS-Homebrew/TWiLightMenu/releases)
@@ -45,24 +51,9 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide
 1. Copy the two `.cia` files to your SD card root
 1. On your 3DS, install the two CIAs with FBI
 {% endcapture %}
+{% assign tab-manual = tab-manual | split: "<!-->" %}
 
 ### Installing
-<div class="tab-container">
+
-   <div class="pb-3">
+{% assign tabs = tab-working-camera | concat: tab-non-working-camera | concat: tab-manual %}
-      <a class="tab-link btn btn-outline-secondary tab-default" href="#tab-working-camera" onclick="openTab(event, event.currentTarget)" data-tab-name="working-camera">Working camera</a>
+{% include tabs.html index=0 tabs=tabs %}
-      <a class="tab-link btn btn-outline-secondary" href="#tab-non-working-camera" onclick="openTab(event, event.currentTarget)" data-tab-name="non-working-camera">Non-working camera</a>
-      <a class="tab-link btn btn-outline-secondary" href="#tab-manual" onclick="openTab(event, event.currentTarget)" data-tab-name="manual">Manual</a>
-   </div>
-   <div id="tab-working-camera">
-      <noscript><h4>Working camera</h4></noscript>
-      {{ tab-working-camera | markdownify }}
-   </div>
-   <div id="tab-non-working-camera">
-      <noscript><h4>Non-working camera</h4></noscript>
-      {{ tab-non-working-camera | markdownify }}
-   </div>
-   <div id="tab-manual">
-      <noscript><h4>Manual</h4></noscript>
-      {{ tab-manual | markdownify }}
-   </div>
-</div>

pages/_en-US/twilightmenu/updating-3ds-manual.md

@@ -1,6 +1,6 @@
 ---
 lang: en-US
 layout: redirect
-destination: updating-3ds?tab=manual#tab-manual
+destination: updating-3ds?tab=manual
 title: Updating (3DS, Manual)
 ---

pages/_en-US/twilightmenu/updating-3ds.md

@@ -5,6 +5,9 @@ section: twilightmenu
 category: updating
 title: Updating (3DS)
 description: How to update TWiLight Menu++ on the Nintendo 3DS
+tabs:
+  - universal-updater: Universal-Updater
+    manual: Manual
 ---
 
 If updating from a version older than v16.4.0, please move your `.sav` files for DS games to a new folder called `saves`, with the `saves` folder being in the same place as the DS roms.
@@ -17,6 +20,7 @@ If updating from a version older than v16.4.0, please move your `.sav` files for
 1. Press <kbd class="face">A</kbd> or tap the download icon in the sidebar and select `TWiLight Menu++` to install it
    - This will take a while
 {% endcapture %}
+{% assign tab-universal-updater = tab-universal-updater | split: "<!-->" %}
 
 {% capture tab-manual %}
 1. Download the latest version of `TWiLightMenu-3DS.7z` from [the releases page](https://github.com/DS-Homebrew/TWiLightMenu/releases)
@@ -26,22 +30,12 @@ If updating from a version older than v16.4.0, please move your `.sav` files for
 1. Copy the two `.cia` files to your SD card root
 1. On your 3DS, install the two CIAs with FBI
 {% endcapture %}
+{% assign tab-manual = tab-manual | split: "<!-->" %}
 
 ### Updating
-<div class="tab-container">
+
-   <div class="pb-3">
+{% assign tabs = tab-universal-updater | concat: tab-manual %}
-      <a class="tab-link btn btn-outline-secondary tab-default" href="#tab-universal-updater" onclick="openTab(event, event.currentTarget)" data-tab-name="universal-updater">Universal-Updater</a>
+{% include tabs.html index=0 tabs=tabs %}
-      <a class="tab-link btn btn-outline-secondary" href="#tab-manual" onclick="openTab(event, event.currentTarget)" data-tab-name="manual">Manual</a>
-   </div>
-   <div id="tab-universal-updater">
-      <noscript><h4>Universal-Updater</h4></noscript>
-      {{ tab-universal-updater | markdownify }}
-   </div>
-   <div id="tab-manual">
-      <noscript><h4>Manual</h4></noscript>
-      {{ tab-manual | markdownify }}
-   </div>
-</div>
 
 ### More steps for the flashcard side