Improve Getting Started Page

Author: tehelsper

docs/.vuepress/config.js

@@ -1,10 +1,47 @@
+const path = require('path')
+
 const siteUrl = 'https://docs.mynodebtc.com'
 const defaultSocialImage = 'https://mynodebtc.com/images/og_image_2.jpg'
 
 module.exports = {
   title: "Guides and Documentation",
   description: "Helpful guides and documentation for using MyNode and getting the most out of all it has to offer!",
   base: "/",
+  // `fsevents` (chokidar's native macOS watcher) isn't installed for this
+  // Node/arch combo — it's an old native module with no build for newer
+  // Node on Apple Silicon. Without it, webpack's file watcher (watchpack,
+  // which watches per-directory with `atomic: false`) can lose track of
+  // a file after a few edits, especially if the editor saves atomically
+  // (write-temp-then-rename), leaving `yarn docs:dev` showing stale/blank
+  // content until it's restarted. `poll` forces polling instead, which
+  // just re-stats files on an interval — slower to notice a change (up to
+  // ~1s) but immune to missed/misordered native fs events.
+  //
+  // This also excludes .vuepress/dist from the watcher, since running
+  // `yarn docs:build` while `yarn docs:dev` is running would otherwise
+  // flood it with the build's writes.
+  //
+  // Note: this key replaces (does not merge with) VuePress's default
+  // devServer.watchOptions, so the `ignored` fn below also reimplements
+  // the default node_modules exclusion — and its carve-out for VuePress's
+  // own temp dir, which lives under node_modules and must stay watched
+  // for HMR of generated routes/theme files to keep working.
+  devServer: {
+    watchOptions: {
+      poll: 1000,
+      ignored: [
+        (testPath) => {
+          if (testPath.includes(path.join('node_modules', '@vuepress', '.temp'))) {
+            return false
+          }
+          if (testPath.includes(path.join('.vuepress', 'dist'))) {
+            return true
+          }
+          return /node_modules/.test(testPath)
+        }
+      ]
+    }
+  },
   head: [
     // Must be first — sets data-theme before any CSS renders to prevent flash.
     ['script', {}, `(function(){var t=localStorage.getItem('mn-theme');if(t==='light')document.documentElement.setAttribute('data-theme','light');})()`],

docs/.vuepress/styles/index.styl

@@ -728,6 +728,94 @@ div[class*='language-'] button:hover
 .theme-default-content .details-body > *:last-child
   margin-bottom 0 !important
 
+// ─── Segmented tabs (mn-tabs) ──────────────────────────────────────────────
+// Pure-CSS, JS-free tab switcher driven by a hidden radio group. Markup is
+// radio+label pairs (one per tab, in the order they should appear as
+// buttons) followed by one .mn-tabs-panel per tab:
+//
+//   <div class="mn-tabs">
+//   <input type="radio" id="my-tab-a" name="my-tabs" checked>
+//   <label for="my-tab-a" class="mn-tabs-button">Tab A</label>
+//   <input type="radio" id="my-tab-b" name="my-tabs">
+//   <label for="my-tab-b" class="mn-tabs-button">Tab B</label>
+//
+//   <div class="mn-tabs-panel" data-tab-panel="my-tab-a">…</div>
+//   <div class="mn-tabs-panel" data-tab-panel="my-tab-b">…</div>
+//   </div>
+//
+// Button styling below is fully generic. Showing/hiding the right panel
+// needs one #id:checked ~ [data-tab-panel="id"] rule per tab (pure CSS
+// can't match an attribute value against a sibling's id) — add a pair
+// whenever a new tab group is introduced. Give every group its own
+// name="…" and prefix ids per page (e.g. "gs-" below) so groups on
+// different pages never collide.
+
+.theme-default-content .mn-tabs
+  position relative !important
+  display flex !important
+  flex-wrap wrap !important
+  align-items flex-start !important
+  margin 1.5rem 0 !important
+
+// Visually hidden but still focusable/keyboard-operable (native radio
+// group behavior — Tab to focus, arrow keys to switch, Space to select).
+.theme-default-content .mn-tabs-radio
+  position absolute !important
+  width 1px !important
+  height 1px !important
+  padding 0 !important
+  margin -1px !important
+  overflow hidden !important
+  clip-path inset(50%) !important
+  white-space nowrap !important
+  border 0 !important
+
+.theme-default-content .mn-tabs-button
+  display inline-flex !important
+  align-items center !important
+  justify-content center !important
+  padding 0.6em 1.2em !important
+  margin 0 0.6rem 0.85rem 0 !important
+  border 1px solid var(--mn-border) !important
+  border-radius 8px !important
+  background var(--mn-card-bg) !important
+  color var(--mn-text) !important
+  font-size 0.9rem !important
+  font-weight 600 !important
+  line-height 1.2 !important
+  cursor pointer !important
+  user-select none !important
+  white-space nowrap !important
+  transition background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important
+
+.theme-default-content .mn-tabs-button:hover
+  border-color var(--mn-orange) !important
+  color var(--mn-orange) !important
+
+// Active button — generic, driven by adjacency to its own radio.
+.theme-default-content .mn-tabs-radio:checked + .mn-tabs-button
+  background var(--mn-orange) !important
+  border-color var(--mn-orange) !important
+  color #000 !important
+
+.theme-default-content .mn-tabs-radio:focus-visible + .mn-tabs-button
+  box-shadow 0 0 0 3px rgba(240,142,32,0.35) !important
+
+.theme-default-content .mn-tabs-panel
+  display none !important
+  flex 1 1 100% !important
+  margin-top 0.25rem !important
+  padding-left 1.1rem !important
+  border-left 2px solid var(--mn-border) !important
+
+.theme-default-content .mn-tabs-panel > *:last-child
+  margin-bottom 0 !important
+
+// Getting Started — "Power On Device" (Build Your Own Device / Model Two)
+#gs-tab-build:checked ~ [data-tab-panel="gs-tab-build"],
+#gs-tab-model-two:checked ~ [data-tab-panel="gs-tab-model-two"]
+  display block !important
+
 // ─── Page edit / prev-next nav ────────────────────────────────────────────
 
 .page-edit

docs/intro/getting-started.md

@@ -11,22 +11,24 @@ sidebarDepth: 0
 
 # Getting Started with MyNode
 
-Choose the section that corresponds to your situation and expand the details to get started.
+Welcome! Setting up a new MyNode device can be done in a few simple steps and you will soon be running a Bitcoin and Lightning node!
 
-## Building your Own Device
+## Assemble your Device
 
-Expand this section if you are building a MyNode device.
+Select your MyNode device or "Build Your Own" to get setup steps specific to your situation.
 
-<details>
-<summary><b>Show Details</b></summary>
+<div class="mn-tabs">
 
-<div class="details-body">
+<input type="radio" id="gs-tab-build" name="gs-device-tabs" class="mn-tabs-radio" checked>
+<label for="gs-tab-build" class="mn-tabs-button">Build Your Own Device</label>
+<input type="radio" id="gs-tab-model-two" name="gs-device-tabs" class="mn-tabs-radio">
+<label for="gs-tab-model-two" class="mn-tabs-button">Model Two</label>
 
-Setting up a new MyNode device can be done in a few simple steps!
+<div class="mn-tabs-panel" data-tab-panel="gs-tab-build">
 
 **Acquire Parts**
 
-First, you need to acquire the parts you will need to assemble the device. A full parts list can be found on the <a href="https://mynodebtc.com/download" target="_blank">MyNode download page</a>.
+First, you need to acquire parts to assemble the device. A full parts list can be found on the <a href="https://mynodebtc.com/download" target="_blank">MyNode download page</a>.
 
 In general, you will need:
 - A Mini PC or Raspberry Pi 5
@@ -65,17 +67,8 @@ For external storage, follow these steps:
 Your node is now booting and will be accessible shortly!
 
 </div>
-</details>
 
-
-## Model Two
-
-Expand this section if you purchased a MyNode Model Two.
-
-<details>
-<summary><b>Show Details</b></summary>
-
-<div class="details-body">
+<div class="mn-tabs-panel" data-tab-panel="gs-tab-model-two">
 
 **Setup Device**
 
@@ -90,7 +83,8 @@ Expand this section if you purchased a MyNode Model Two.
 Your node is now booting and will be accessible shortly!
 
 </div>
-</details>
+
+</div>
 
 ## Connecting to MyNode