From cd244dd0dfd210eb93433faf520ca8b31301110c Mon Sep 17 00:00:00 2001
From: Matt Powell <fauxparse@gmail.com>
Date: Wed, 7 Sep 2022 15:01:37 +1200
Subject: [PATCH] add a master/main switch

These days an increasing number of repos use `main` rather than `master`.
This commit adds a small toggle that automatically translates between the
two styles so that people copying and pasting the code will have the
correct version.
---
 _includes/layouts/page.njk         |  2 ++
 _includes/partials/master-main.njk | 36 ++++++++++++++++++++++++++++++
 _includes/site.css                 | 32 +++++++++++++++++++++++---
 3 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 _includes/partials/master-main.njk

diff --git a/_includes/layouts/page.njk b/_includes/layouts/page.njk
index 7697ffa2..d45b69ef 100644
--- a/_includes/layouts/page.njk
+++ b/_includes/layouts/page.njk
@@ -19,6 +19,8 @@
 
         {% include "partials/langpicker.njk" %}
 
+        {% include "partials/master-main.njk" %}
+
         <div class="max-width">
             <header class="spaced">
                 <h1 class="centered">{{title}}</h1>
diff --git a/_includes/partials/master-main.njk b/_includes/partials/master-main.njk
new file mode 100644
index 00000000..de562b83
--- /dev/null
+++ b/_includes/partials/master-main.njk
@@ -0,0 +1,36 @@
+<div class="master-main-switch">
+    <label>
+        <input type="radio" name="master-main" value="master" checked="checked"/>
+        <code>master</code>
+    </label>
+    <label>
+        <input type="radio" name="master-main" value="main"/>
+        <code>main</code>
+    </label>
+</div>
+<script async="async">
+    function changeMainBranch(branch) {
+        const branchWas = branch === 'main'
+            ? /\bmaster\b/g
+            : /\bmain\b/g;
+        const nodes = [];
+        const treeWalker = document.createTreeWalker(document.querySelector('main'), NodeFilter.SHOW_TEXT);
+        while (treeWalker.nextNode()) {
+            const node = treeWalker.currentNode;
+            if (node.nodeType === Node.TEXT_NODE && node.textContent.match(branchWas)) {
+                nodes.push(node);
+            }
+        };
+        nodes.forEach(function (node) {
+            node.textContent = node.textContent.replace(branchWas, branch);
+        });
+    }
+    addEventListener('DOMContentLoaded', function () {
+        console.log('DOMContentLoaded');
+        document.querySelectorAll('.master-main-switch [type="radio"]').forEach(function (radio) {
+            radio.addEventListener('change', function () {
+                changeMainBranch(radio.value);
+            });
+        });
+    });
+</script>
diff --git a/_includes/site.css b/_includes/site.css
index d5bab002..6f699537 100644
--- a/_includes/site.css
+++ b/_includes/site.css
@@ -43,16 +43,18 @@ footer {
 footer a {
     color: white;
 }
-.langpicker {
+.langpicker,
+.master-main-switch {
     float: right;
     margin-top: 0.5em;
-    margin-bottom: 2em;
+    margin-bottom: 0.5em;
     overflow: hidden;
 }
 .langpicker * {
     box-sizing: border-box;
 }
-.langpicker-button {
+.langpicker-button,
+.master-main-switch {
     border: 2px solid #222;
     background: none;
     font-size: 1em;
@@ -113,6 +115,30 @@ footer a {
     display: inline-block;
     color: #fff;
 }
+.master-main-switch {
+    clear: right;
+    margin-top: 0;
+    margin-bottom: 2em;
+    height: auto;
+    padding: 0;
+    align-items: center;
+}
+.master-main-switch code {
+    display: block;
+    font: inherit;
+    font-weight: bold;
+    padding: 0.25em 0.5em;
+    cursor: pointer;
+    color: black;
+    background: white;
+}
+.master-main-switch input {
+    display: none;
+}
+.master-main-switch input:checked + code {
+    background: black;
+    color: white;
+}
 .max-width {
     margin: 1em;
     clear: both;