From 32d8a011c783ef7d787bcce1a457df97fae273e3 Mon Sep 17 00:00:00 2001
From: granny <contact@granny.dev>
Date: Sat, 30 Mar 2024 03:43:51 -0700
Subject: [PATCH 01/10] chore: remove inline styling & use clsx consistently

---
 src/components/Config.tsx                     | 33 +++++++++----------
 .../ConfigurationStructureDiagram.tsx         | 15 ++++++---
 src/components/Projects.tsx                   |  2 +-
 src/components/StartScriptGenerator.tsx       |  9 ++---
 src/css/configuration-explorer-layout.css     |  1 +
 src/css/custom.css                            |  6 ++++
 src/theme/DocCard/index.tsx                   |  2 +-
 7 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index 3d08022b9..0ca912068 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -6,6 +6,7 @@ import VersionFormattedCode from "./VersionFormattedCode";
 import Link from "@docusaurus/Link";
 import useBrokenLinks from "@docusaurus/core/lib/client/exports/useBrokenLinks";
 import Admonition from "@theme/Admonition";
+import clsx from "clsx";
 
 const INDENT_SIZE = 30;
 
@@ -163,16 +164,23 @@ const YamlNodeWithDescription = ({
 
   return (
     <div
-      style={{ paddingLeft: `${root ? 0 : INDENT_SIZE}px` }}
+      style={{ paddingLeft: `${root ? 0 : INDENT_SIZE}px` }} // TODO: dynamic class
       id={createUrlHash(parentKey, name)}
       className={"config-tagged-for-algolia"}
     >
-      <div className={`description_word_wrap`} style={{ marginBottom: showDescription ? 10 : 0 }}>
+      <div className={"description_word_wrap"}>
         <button
           onClick={() => {
             setShowDescription(!showDescription);
           }}
-          className={`config-node with-value${showDescription ? "-active" : ""} clean-btn button--link notranslate`}
+          className={clsx(
+            "config-node",
+            "with-value",
+            showDescription && "with-value-active",
+            "clean-btn",
+            "button--link",
+            "notranslate"
+          )}
           translate={"no"}
         >
           {parseItalics(name)}
@@ -185,10 +193,7 @@ const YamlNodeWithDescription = ({
             separator
           )}
         </button>
-        <div
-          className="indent-2"
-          style={{ marginBottom: 10, display: !showDescription ? "none" : "" }}
-        >
+        <div className={clsx("indent-2", "margin-bottom--sm", !showDescription && "display--none")}>
           <div className="outlined-box description-text color-offset-box">
             <ReactMarkdown className={style.reactMarkDown}>
               {parseDescriptionForVersioning(node.description.toString())}
@@ -246,14 +251,10 @@ const YamlTreeNode = ({
     <div
       key={name}
       className={`highlight-config-node`}
-      style={{ paddingLeft: `${root ? 0 : INDENT_SIZE}px` }}
+      style={{ paddingLeft: `${root ? 0 : INDENT_SIZE}px` }} // TODO: dynamic class
       id={hash}
     >
-      <div
-        className={`config-auxiliary-node notranslate`}
-        style={{ display: "inline-flex" }}
-        translate={"no"}
-      >
+      <div className={"config-auxiliary-node notranslate"} translate={"no"}>
         {parseItalics(name)}
         {removeTrailingSpaces(separator)}
       </div>
@@ -265,11 +266,7 @@ const YamlTreeNode = ({
       />
       {warning && (
         <div className={`inline-admonition-warning`}>
-          <Admonition
-            type={"danger"}
-            title={warning.title}
-            children={<p style={{ whiteSpace: "initial" }}>{warning.message}</p>}
-          />
+          <Admonition type={"danger"} title={warning.title} children={<p>{warning.message}</p>} />
         </div>
       )}
       {renderYamlData(
diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index d6f8e1c58..d13b709bd 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import "@site/src/css/configuration-explorer-layout.css";
 import { Icon } from "@iconify/react";
+import clsx from "clsx";
 
 const folderIcon = "mdi:folder";
 const fileIcon = "mdi:file";
@@ -138,10 +139,12 @@ export default function ConfigurationStructureDiagram(): JSX.Element {
         {level > 0 && <IndentationArrow level={level} />}
 
         <a
-          className={`${"config-explorer-file-" + (isFolder ? "folder-" : "") + "node"}
-                   ${!hasUrl ? "config-explorer-file-node" : "config-explorer-file-node-with-link"}`}
+          className={clsx(
+            !isFolder && "config-explorer-file-node",
+            isFolder && "config-explorer-file-folder-node",
+            hasUrl && "config-explorer-file-node-with-link"
+          )}
           href={node.url}
-          style={{ cursor: hasUrl ? "pointer" : "default" }}
         >
           <span className={"config-node-contents-wrapper"}>
             <Icon
@@ -163,8 +166,10 @@ export default function ConfigurationStructureDiagram(): JSX.Element {
         {hasDescription && (
           <div className={"config-explorer-popup-window-container"}>
             <div
-              className={"config-explorer-popup-window"}
-              style={{ display: popupNode === node ? "block" : "none" }}
+              className={clsx(
+                "config-explorer-popup-window",
+                popupNode !== node && "display--none"
+              )}
             >
               <strong>Description:</strong>
               <br />
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index e17fbfd66..6db432fc4 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -49,7 +49,7 @@ function Project(project: Project) {
           to={`https://github.com/${project.repo}`}
         >
           {project.title}
-          {project.eol && <Icon style={{ marginLeft: "8px" }} icon={"mdi:archive"} height={25} />}
+          {project.eol && <Icon className={"margin-left--sm"} icon={"mdi:archive"} height={25} />}
         </Link>
         <p>{project.description}</p>
       </div>
diff --git a/src/components/StartScriptGenerator.tsx b/src/components/StartScriptGenerator.tsx
index 1b8fba169..658a488de 100644
--- a/src/components/StartScriptGenerator.tsx
+++ b/src/components/StartScriptGenerator.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef } from "react";
 import "@site/src/css/start-script-generator.css";
+import clsx from "clsx";
 
 const markerPoints = [4, 8, 12, 16, 20];
 
@@ -177,7 +178,7 @@ const StartScriptGenerator: React.FC = () => {
             <div
               key={point}
               className="slider-marker"
-              style={{ left: `${((point - 0.5) / 23.5) * 100}%` }}
+              style={{ left: `${((point - 0.5) / 23.5) * 100}%` }} // TODO: dynamic class
             >
               {point}GB
             </div>
@@ -207,7 +208,7 @@ const StartScriptGenerator: React.FC = () => {
                 {Object.values(FLAGS).map((flag) => (
                   <div
                     key={flag.label}
-                    className={`dropdown-item ${flag === selectedFlag ? "selected" : ""}`}
+                    className={clsx("dropdown-item", flag === selectedFlag && "selected")} // TODO: there is no "selected" (or "dropdown-item-selected"?) class. mistake?
                     onClick={() => {
                       setSelectedFlag(flag);
                       setDropdownVisible(false);
@@ -224,7 +225,7 @@ const StartScriptGenerator: React.FC = () => {
       </div>
       <div className="config-section">
         <div className={"gui-container"}>
-          <label style={{ marginRight: "10px" }}>GUI:</label>
+          <label className={"margin-right--sm"}>GUI:</label>
           <input
             type="checkbox"
             id="gui-toggle"
@@ -234,7 +235,7 @@ const StartScriptGenerator: React.FC = () => {
           <label htmlFor="gui-toggle" className="switch"></label>
         </div>
         <div className={"gui-container"}>
-          <label style={{ marginRight: "10px" }}>Auto-Restart:</label>
+          <label className={"margin-right--sm"}>Auto-Restart:</label>
           <input
             type="checkbox"
             id="restart-toggle"
diff --git a/src/css/configuration-explorer-layout.css b/src/css/configuration-explorer-layout.css
index 3e4ce0180..453192205 100644
--- a/src/css/configuration-explorer-layout.css
+++ b/src/css/configuration-explorer-layout.css
@@ -12,6 +12,7 @@
   width: fit-content;
   flex-shrink: 0;
   white-space: nowrap;
+  cursor: default;
 }
 
 .config-explorer-file-node-with-link {
diff --git a/src/css/custom.css b/src/css/custom.css
index c6de884d9..e80d5e62d 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -211,6 +211,10 @@ html[data-theme="dark"] {
   margin-left: 20px;
 }
 
+.display--none {
+  display: none !important;
+}
+
 .description_word_wrap {
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -255,6 +259,7 @@ html[data-theme="dark"] {
 }
 
 .config-auxiliary-node {
+  display: inline-flex;
   padding-left: 2px;
   color: var(--default-config-node-text-color);
 }
@@ -288,6 +293,7 @@ html[data-theme="dark"] {
 
 .inline-admonition-warning {
   margin-top: 1em;
+  white-space: initial;
 }
 
 ul.yaml-list-elem {
diff --git a/src/theme/DocCard/index.tsx b/src/theme/DocCard/index.tsx
index 6c166b11a..2330bca58 100644
--- a/src/theme/DocCard/index.tsx
+++ b/src/theme/DocCard/index.tsx
@@ -80,7 +80,7 @@ type EmojiPropsSidebarItemLink = PropSidebarItemLink & {
 
 function CardLink({ item }: { item: EmojiPropsSidebarItemLink }): JSX.Element {
   const icon = item.customEmoji ? (
-    <Icon style={{ marginRight: "8px" }} icon={item.customEmoji} height={25} />
+    <Icon className={"margin-right--sm"} icon={item.customEmoji} height={25} />
   ) : isInternalUrl(item.href) ? (
     "📄️"
   ) : (

From 5e1251a86ed7fc2f2e31f3c89ed43486a5a846df Mon Sep 17 00:00:00 2001
From: granny <contact@granny.dev>
Date: Sat, 30 Mar 2024 04:41:20 -0700
Subject: [PATCH 02/10] remove two more internal styles

---
 src/components/Config.tsx | 6 ++----
 src/css/custom.css        | 5 +++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index 0ca912068..7d85480b7 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -164,9 +164,8 @@ const YamlNodeWithDescription = ({
 
   return (
     <div
-      style={{ paddingLeft: `${root ? 0 : INDENT_SIZE}px` }} // TODO: dynamic class
       id={createUrlHash(parentKey, name)}
-      className={"config-tagged-for-algolia"}
+      className={clsx("config-tagged-for-algolia", !root && "config-node-indent-size")}
     >
       <div className={"description_word_wrap"}>
         <button
@@ -250,8 +249,7 @@ const YamlTreeNode = ({
   return (
     <div
       key={name}
-      className={`highlight-config-node`}
-      style={{ paddingLeft: `${root ? 0 : INDENT_SIZE}px` }} // TODO: dynamic class
+      className={clsx("highlight-config-node", !root && "config-node-indent-size")}
       id={hash}
     >
       <div className={"config-auxiliary-node notranslate"} translate={"no"}>
diff --git a/src/css/custom.css b/src/css/custom.css
index e80d5e62d..5fc816860 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -14,6 +14,7 @@
   --default-config-node-text-color: rgb(148, 148, 148);
   --config-node-highlight-text-color: black;
   --config-explorer-file-node-text-color: rgba(0, 0, 0, 0.03);
+  --config-node-indent-size: 30px;
 
   /* EOL Message */
   --eol-message-background-color: rgb(255, 112, 119);
@@ -258,6 +259,10 @@ html[data-theme="dark"] {
   cursor: pointer;
 }
 
+.config-node-indent-size {
+  padding-left: var(--config-node-indent-size);
+}
+
 .config-auxiliary-node {
   display: inline-flex;
   padding-left: 2px;

From 9acfc44050de4d2a74bd233c262a1ebe170adaef Mon Sep 17 00:00:00 2001
From: granny <contact@granny.dev>
Date: Sat, 30 Mar 2024 15:55:54 -0700
Subject: [PATCH 03/10] combine class strings

---
 src/components/Config.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index 7d85480b7..4511c0c4a 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -173,12 +173,8 @@ const YamlNodeWithDescription = ({
             setShowDescription(!showDescription);
           }}
           className={clsx(
-            "config-node",
-            "with-value",
-            showDescription && "with-value-active",
-            "clean-btn",
-            "button--link",
-            "notranslate"
+            "config-node with-value clean-btn button--link notranslate",
+            showDescription && "with-value-active"
           )}
           translate={"no"}
         >

From 064ecc0e1af1df098c1db07d7eba70ebae14a3e3 Mon Sep 17 00:00:00 2001
From: granny <contact@granny.dev>
Date: Sat, 30 Mar 2024 16:15:39 -0700
Subject: [PATCH 04/10] add dropdown-item-selected class

---
 src/components/StartScriptGenerator.tsx | 5 ++++-
 src/css/start-script-generator.css      | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/StartScriptGenerator.tsx b/src/components/StartScriptGenerator.tsx
index 658a488de..33c82df7c 100644
--- a/src/components/StartScriptGenerator.tsx
+++ b/src/components/StartScriptGenerator.tsx
@@ -208,7 +208,10 @@ const StartScriptGenerator: React.FC = () => {
                 {Object.values(FLAGS).map((flag) => (
                   <div
                     key={flag.label}
-                    className={clsx("dropdown-item", flag === selectedFlag && "selected")} // TODO: there is no "selected" (or "dropdown-item-selected"?) class. mistake?
+                    className={clsx(
+                      "dropdown-item",
+                      flag === selectedFlag && "dropdown-item-selected"
+                    )}
                     onClick={() => {
                       setSelectedFlag(flag);
                       setDropdownVisible(false);
diff --git a/src/css/start-script-generator.css b/src/css/start-script-generator.css
index 2bf8cff20..d5d3cb961 100644
--- a/src/css/start-script-generator.css
+++ b/src/css/start-script-generator.css
@@ -132,7 +132,7 @@ input[type="range"]:focus::-webkit-slider-thumb {
   outline: 1px solid white;
 }
 
-.dropdown-item:hover {
+.dropdown-item-selected, .dropdown-item:hover {
   background-color: var(--background-gen-color-active);
 }
 

From 9a7d377d4751a6335e21800f0856e4aeb80db99e Mon Sep 17 00:00:00 2001
From: granny <contact@granny.dev>
Date: Sat, 30 Mar 2024 16:35:27 -0700
Subject: [PATCH 05/10] use flexbox on the slider markers

---
 src/components/StartScriptGenerator.tsx | 6 +-----
 src/css/start-script-generator.css      | 7 ++-----
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/StartScriptGenerator.tsx b/src/components/StartScriptGenerator.tsx
index 33c82df7c..94e09b07c 100644
--- a/src/components/StartScriptGenerator.tsx
+++ b/src/components/StartScriptGenerator.tsx
@@ -175,11 +175,7 @@ const StartScriptGenerator: React.FC = () => {
         />
         <div className="slider-markers">
           {markerPoints.map((point) => (
-            <div
-              key={point}
-              className="slider-marker"
-              style={{ left: `${((point - 0.5) / 23.5) * 100}%` }} // TODO: dynamic class
-            >
+            <div key={point} className="slider-marker">
               {point}GB
             </div>
           ))}
diff --git a/src/css/start-script-generator.css b/src/css/start-script-generator.css
index d5d3cb961..4b1d21ca5 100644
--- a/src/css/start-script-generator.css
+++ b/src/css/start-script-generator.css
@@ -35,18 +35,15 @@ html[data-theme="dark"] {
 }
 
 .slider-markers {
-  position: relative;
   width: 100%;
   height: 10px;
+  display: flex;
+  justify-content: space-evenly;
 }
 
 .slider-marker {
-  position: absolute;
-  transform: translateX(-50%);
-  display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-end;
   color: var(--gen-text-color);
   font-size: 12px;
 }

From 5531b14f2e61121acc4d950f24ea3735c168ee9f Mon Sep 17 00:00:00 2001
From: granny <contact@granny.dev>
Date: Sat, 30 Mar 2024 16:41:29 -0700
Subject: [PATCH 06/10] run prettier

---
 src/css/start-script-generator.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/css/start-script-generator.css b/src/css/start-script-generator.css
index 4b1d21ca5..83a28d429 100644
--- a/src/css/start-script-generator.css
+++ b/src/css/start-script-generator.css
@@ -129,7 +129,8 @@ input[type="range"]:focus::-webkit-slider-thumb {
   outline: 1px solid white;
 }
 
-.dropdown-item-selected, .dropdown-item:hover {
+.dropdown-item-selected,
+.dropdown-item:hover {
   background-color: var(--background-gen-color-active);
 }
 

From 56e71629734353b904bd620624c748b702106ee6 Mon Sep 17 00:00:00 2001
From: granny <contact@granny.dev>
Date: Mon, 1 Apr 2024 02:15:47 -0700
Subject: [PATCH 07/10] more accurate slider

---
 src/components/StartScriptGenerator.tsx | 11 +++++++----
 src/css/start-script-generator.css      | 17 +++++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/StartScriptGenerator.tsx b/src/components/StartScriptGenerator.tsx
index 94e09b07c..cb98a4997 100644
--- a/src/components/StartScriptGenerator.tsx
+++ b/src/components/StartScriptGenerator.tsx
@@ -169,17 +169,20 @@ const StartScriptGenerator: React.FC = () => {
           min={0.5}
           max={24}
           step={0.5}
+          list="slide-markers-datalist"
           value={memory}
           onChange={(e) => setMemory(parseFloat(e.target.value))}
           aria-labelledby="memory-slider-label"
         />
-        <div className="slider-markers">
+        <datalist id="slide-markers-datalist" className="slider-markers">
+          <option className="slider-marker"></option>
           {markerPoints.map((point) => (
-            <div key={point} className="slider-marker">
+            <option key={point} className="slider-marker">
               {point}GB
-            </div>
+            </option>
           ))}
-        </div>
+          <option className="slider-marker"></option>
+        </datalist>
       </div>
       <div className={"middle-flex-wrapper"}>
         <div className="config-section">
diff --git a/src/css/start-script-generator.css b/src/css/start-script-generator.css
index 83a28d429..2f3a45966 100644
--- a/src/css/start-script-generator.css
+++ b/src/css/start-script-generator.css
@@ -2,6 +2,8 @@
   --background-gen-color: #e8e8e8;
   --background-gen-color-active: #cccccc;
   --gen-text-color: #000;
+  --slider-marker-count: 5;
+  --slider-marker-offset: 5px;
 }
 
 html[data-theme="dark"] {
@@ -35,17 +37,24 @@ html[data-theme="dark"] {
 }
 
 .slider-markers {
-  width: 100%;
   height: 10px;
   display: flex;
-  justify-content: space-evenly;
 }
 
 .slider-marker {
-  flex-direction: column;
-  align-items: center;
   color: var(--gen-text-color);
   font-size: 12px;
+  display: inline-block;
+  width: calc(100% / (var(--slider-marker-count) + 1));
+  text-align: center;
+}
+
+.slider-marker:first-child {
+  width: calc((100% / (var(--slider-marker-count) + 1) / 2) - var(--slider-marker-offset));
+}
+
+.slider-marker:last-child {
+  width: calc((100% / (var(--slider-marker-count) + 1) / 2));
 }
 
 input[type="text"],

From 92973ea9cc97ff5fcf9a50d2f89bf3f7c76c8968 Mon Sep 17 00:00:00 2001
From: granny <contact@granny.dev>
Date: Thu, 4 Apr 2024 19:00:05 -0700
Subject: [PATCH 08/10] address ollie's comment

---
 src/components/Config.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index 4511c0c4a..bc5f14f36 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -167,14 +167,15 @@ const YamlNodeWithDescription = ({
       id={createUrlHash(parentKey, name)}
       className={clsx("config-tagged-for-algolia", !root && "config-node-indent-size")}
     >
-      <div className={"description_word_wrap"}>
+      <div className={clsx("description_word_wrap", showDescription && "margin-bottom--sm")}>
         <button
           onClick={() => {
             setShowDescription(!showDescription);
           }}
           className={clsx(
-            "config-node with-value clean-btn button--link notranslate",
-            showDescription && "with-value-active"
+            "config-node clean-btn button--link notranslate",
+            showDescription && "with-value-active",
+            !showDescription && "with-value"
           )}
           translate={"no"}
         >

From 40514eb6797d5896954bca8f6950ee9f9f8cbc73 Mon Sep 17 00:00:00 2001
From: granny <contact@granny.dev>
Date: Thu, 4 Apr 2024 19:01:50 -0700
Subject: [PATCH 09/10] combine class strings

---
 src/components/Config.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index bc5f14f36..e4d8a3a53 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -189,7 +189,7 @@ const YamlNodeWithDescription = ({
             separator
           )}
         </button>
-        <div className={clsx("indent-2", "margin-bottom--sm", !showDescription && "display--none")}>
+        <div className={clsx("indent-2 margin-bottom--sm", !showDescription && "display--none")}>
           <div className="outlined-box description-text color-offset-box">
             <ReactMarkdown className={style.reactMarkDown}>
               {parseDescriptionForVersioning(node.description.toString())}

From e330a84f5bcf77ce5fe5dfd1840b3a33105b919b Mon Sep 17 00:00:00 2001
From: granny <contact@granny.dev>
Date: Thu, 4 Apr 2024 19:06:08 -0700
Subject: [PATCH 10/10] remove duplicate margin class, it doesn't actually do
 anything

---
 src/components/Config.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index e4d8a3a53..fcfef3212 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -167,7 +167,7 @@ const YamlNodeWithDescription = ({
       id={createUrlHash(parentKey, name)}
       className={clsx("config-tagged-for-algolia", !root && "config-node-indent-size")}
     >
-      <div className={clsx("description_word_wrap", showDescription && "margin-bottom--sm")}>
+      <div className={"description_word_wrap"}>
         <button
           onClick={() => {
             setShowDescription(!showDescription);