Provide a fish shell toggle for swiftly one-liners

Make code blocks wrap on limited horizontal space

Author: cmcgee1024

_includes/install/_linux_platforms_tabs.md

@@ -5,17 +5,42 @@
   <p class="description">
     The Swiftly installer manages Swift and its dependencies. It supports switching between different versions and downloading updates.
   </p>
-  <h4>Run this in a terminal:</h4>
-  <div class="language-plaintext highlighter-rouge"><div class="highlight"><button>Copy</button><pre class="highlight"><code>curl -O https://download.swift.org/swiftly/linux/swiftly-$(uname -m).tar.gz &amp;&amp; \
-tar zxf swiftly-$(uname -m).tar.gz &amp;&amp; \
-./swiftly init --quiet-shell-followup &amp;&amp; \
-. ~/.local/share/swiftly/env.sh &amp;&amp; \
-hash -r
-</code></pre></div></div>
+  <div class="shellcode-intro">Run this in a terminal:<button id="shell" class="toggle">fish</button></div>
+  <div class="language-plaintext highlighter-rouge"><div class="highlight"><button>Copy</button><pre class="highlight"><code id="shellcode" style="white-space: initial;"></code></pre></div></div>
   <h4>License: <a href="https://raw.githubusercontent.com/swiftlang/swiftly/refs/heads/main/LICENSE.txt">Apache-2.0</a> | PGP: <a href="https://download.swift.org/swiftly/linux/swiftly-0.4.0-dev-x86_64.tar.gz.sig">Signature</a></h4>
   <a href="/install/linux/swiftly" class="cta-secondary">Instructions</a>
 </li>
 </ul>
+
+<script>
+var shell = "";
+var shellToggle = document.getElementById("shell");
+var code = document.getElementById("shellcode");
+
+function setShell() {
+  code.innerText = "curl -O https://download.swift.org/swiftly/linux/swiftly-$(uname -m).tar.gz && \\\n"
+  code.innerText += "tar zxf swiftly-$(uname -m).tar.gz && \\\n"
+  code.innerText += "./swiftly init --quiet-shell-followup && \\\n"
+
+  if (shell == "sh") {
+    shell = "fish";
+    code.innerText += ". ~/.swiftly/env.fish"
+    shellToggle.innerText = "sh";
+  } else {
+    shell = "sh";
+    code.innerText += ". ${SWIFTLY_HOME_DIR:-~/.swiftly}/env.sh && \\\n"
+    code.innerText += "hash -r"
+    shellToggle.innerText = "fish";
+  }
+}
+
+setShell();
+
+shellToggle.addEventListener("mousedown", function() {
+  setShell();
+});
+</script>
+
 <ul class="grid-level-0 grid-layout-1-column">
 <li class="grid-level-1">
     <h3>Container</h3>

assets/stylesheets/elements/_grid.scss

@@ -131,3 +131,23 @@ div.highlight {
   margin: 0;
   display: none;
 }
+
+button.toggle {
+  width: fit-content;
+  float: right;
+  margin-right: 1.1rem;
+  background-color: var(--color-fill-tertiary);
+  border: 1px solid var(--color-fill-quaternary);
+  border-radius: var(--border-radius);
+
+  &:hover {
+    color: var(--color-link);
+    background-color: var(--color-fill-quaternary);
+  }
+}
+
+.shellcode-intro {
+  font-size: .8rem;
+  color: var(--color-secondary-label);
+  padding-top: 0.8rem;
+}

install/macos/index.md

@@ -12,13 +12,8 @@ title: Install Swift
   <p class="description">
     To download toolchains from Swift.org, use the Swiftly toolchain installer. Swift.org toolchains include experimental features like Embedded Swift and support for WebAssembly.
   </p>
-  <h4>Run this in a terminal:</h4>
-  <div class="language-plaintext highlighter-rouge"><div class="highlight"><button>Copy</button><pre class="highlight"><code>curl -O https://download.swift.org/swiftly/darwin/swiftly.pkg &amp;&amp; \
-installer -pkg swiftly.pkg -target CurrentUserHomeDirectory &amp;&amp; \
-~/.swiftly/bin/swiftly init --quiet-shell-followup &amp;&amp; \
-. ~/.swiftly/env.sh &amp;&amp; \
-hash -r
-</code></pre></div></div>
+  <div class="shellcode-intro">Run this in a terminal:<button id="shell" class="toggle"></button></div>
+  <div class="language-plaintext highlighter-rouge"><div class="highlight"><button>Copy</button><pre style="white-space: initial;" class="highlight"><code id="shellcode"></code></pre></div></div>
   <h4>License: <a href="https://raw.githubusercontent.com/swiftlang/swiftly/refs/heads/main/LICENSE.txt">Apache-2.0</a></h4>
   <a href="/install/macos/swiftly" class="cta-secondary">Instructions</a>
   </li>
@@ -32,6 +27,35 @@ hash -r
     <a href="https://developer.apple.com/xcode/" class="cta-secondary external">Install Xcode</a>
   </li>
 </ul>
+<script>
+
+var shell = "";
+var shellToggle = document.getElementById("shell");
+var code = document.getElementById("shellcode");
+
+function setShell() {
+  code.innerText = "curl -O https://download.swift.org/swiftly/darwin/swiftly.pkg && \\\n"
+  code.innerText += "installer -pkg swiftly.pkg -target CurrentUserHomeDirectory && \\\n"
+  code.innerText += "~/.swiftly/bin/swiftly init --quiet-shell-followup && \\\n"
+
+  if (shell == "sh") {
+    shell = "fish";
+    code.innerText += ". ~/.swiftly/env.fish"
+    shellToggle.innerText = "sh";
+  } else {
+    shell = "sh";
+    code.innerText += ". ${SWIFTLY_HOME_DIR:-~/.swiftly}/env.sh && \\\n"
+    code.innerText += "hash -r"
+    shellToggle.innerText = "fish";
+  }
+}
+
+setShell();
+
+shellToggle.addEventListener("mousedown", function() {
+  setShell();
+});
+</script>
 
 
 ## Other Install Options