Add ability to see docs within nudel

pastagang · Feb 23, 2025 · fc91d80 · fc91d80
1 parent b5877d0
commit fc91d80
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -20,11 +20,22 @@
         <button id="add-pane-button">+ add Pane</button>
         <button id="remove-pane-button">- scrap Pane</button>
         <button id="export-button">⇓ Export</button>
+        <button id="docs-button">🕮 Docs</button>
         <a class="button" href="https://github.com/pastagang/nudel" target="_blank">♨ Source</a>
         <button id="about-button">? About</button>
       </div>
     </div>
 
+    <!----------- SIDEBAR ----------->
+    <div id="sidebar-container">
+      <select id="docs-selector">
+        <option value="https://strudel.cc/workshop/getting-started/">strudel</option>
+        <option value="https://hydra.ojack.xyz/docs/">hydra</option>
+        <option value="https://kabel.salat.dev/learn/">kabelsalat</option>
+      </select>
+      <iframe src="https://strudel.cc/workshop/getting-started/" height="100%" width="100%" id="docs-frame"></iframe>
+    </div>
+
     <!----------- TABS ----------->
     <div class="tabs">
       <div class="left">

diff --git a/src/menu.js b/src/menu.js
@@ -10,6 +10,9 @@ const aboutButton = document.querySelector('#about-button');
 const helpButton = document.querySelector('#help-button');
 const aboutDialog = document.querySelector('#about-dialog');
 const playButton = document.querySelector('#about-yes-button');
+const docsButton = document.querySelector("#docs-button");
+
+const root = document.documentElement;
 
 menuButton?.addEventListener('click', (e) => {
   menuContainer?.classList.toggle('open');
@@ -34,6 +37,14 @@ aboutButton?.addEventListener('click', () => {
   playButton?.focus();
 });
 
+docsButton?.addEventListener('click', () => {
+  if (root?.classList.contains('sidebarOpen')) {
+    root?.classList.remove('sidebarOpen');
+  } else {
+    root?.classList.add('sidebarOpen');
+  }
+})
+
 const html = document.documentElement;
 
 html.addEventListener('click', (e) => {

diff --git a/src/settings.js b/src/settings.js
@@ -61,6 +61,7 @@ const defaultSettings = {
   workerTimers2: true,
   customRoomEnabled: false,
   customRoomName: getRandomName(3),
+  docsURL: 'https://strudel.cc/workshop/getting-started/'
 };
 
 const usernameInput = document.querySelector('#settings-username');
@@ -87,6 +88,8 @@ const customRoomNameInput = document.querySelector('#settings-room-name');
 const roomPickerFieldset = document.querySelector('#room-picker');
 const usernamePreview = document.querySelector('#username-preview');
 const userHueRange = document.querySelector('#settings-color');
+const docsURLPicker = document.querySelector("#docs-selector");
+const docsFrame = document.querySelector("#docs-frame");
 
 function inferSettingsFromDom() {
   const inferredSettings = {
@@ -111,6 +114,7 @@ function inferSettingsFromDom() {
     strudelHighlightsEnabled: strudelHighlightsEnabledCheckbox?.checked ?? defaultSettings.strudelHighlightsEnabled,
     customRoomEnabled: customRoomEnabledRadio?.checked ?? defaultSettings.customRoomEnabled,
     customRoomName: customRoomNameInput?.value ?? defaultSettings.customRoomName,
+    docsURL: docsURLPicker?.value ?? defaultSettings.docsURL
   };
   return inferredSettings;
 }
@@ -135,6 +139,7 @@ function inferSettingsFromDom() {
   strudelHighlightsEnabledCheckbox,
   roomPickerFieldset,
   customRoomNameInput,
+  docsURLPicker
   // userHueRange,
 ].forEach((v) => v?.addEventListener('change', setSettingsFromDom));
 [usernameInput, userHueRange].forEach((v) => v?.addEventListener('input', setSettingsFromDom));
@@ -215,6 +220,7 @@ export async function applySettingsToNudel(settings = getSettings()) {
   customRoomDisabledRadio && (customRoomDisabledRadio.checked = !next.customRoomEnabled);
   customRoomEnabledRadio && (customRoomEnabledRadio.checked = next.customRoomEnabled);
   customRoomNameInput && (customRoomNameInput.value = next.customRoomName);
+  docsURLPicker && (docsURLPicker.value = next.docsURL);
 
   if (isSettingChanged('customRoomEnabled', diff)) {
     customRoomNameInput?.toggleAttribute('disabled', !next.customRoomEnabled);
@@ -313,6 +319,10 @@ export async function applySettingsToNudel(settings = getSettings()) {
     document.documentElement.style.cssText = `--font-family: ${next.fontFamily}`;
   }
 
+  if (isSettingChanged('docsURL', diff)) {
+    docsFrame?.setAttribute("src", next.docsURL)
+  }
+
   pastamirror.updateExtensions(diff);
   appliedSettings = { ...next };
 

diff --git a/src/style.css b/src/style.css
@@ -479,6 +479,7 @@ iframe#kabelsalat {
   z-index: 1000;
   top: 0;
   right: 0;
+  padding: 0.25em;
 }
 
 #menu-content {
@@ -502,6 +503,37 @@ iframe#kabelsalat {
   display: flex;
 }
 
+#sidebar-container {
+  position: fixed;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  width: 20%;
+  min-width: 350px;
+  visibility: hidden;
+}
+
+#docs-selector {
+  width: calc(100% - 0.5em);
+  margin: 0.25em;
+}
+
+#docs-frame {
+  border: none;
+}
+
+.sidebarOpen {
+  #sidebar-container {
+    visibility: visible;
+  }
+  .slots {
+    padding-left: calc(max(20%, 350px));
+  }
+  .tabs {
+    padding-left: calc(max(20%, 350px));
+  }
+}
+
 .development {
   display: none;
 }