Merge branch 'md-book-settings-table-ui' into configuration-docs-generation

docs/book.toml

@@ -9,8 +9,8 @@ site-url = "/docs/"
 [output.html]
 no-section-label = true
 preferred-dark-theme = "light"
-additional-css = ["theme/page-toc.css"]
-additional-js  = ["theme/page-toc.js"]
+additional-css = ["theme/page-toc.css", "theme/settings-table.css"]
+additional-js  = ["theme/page-toc.js", "theme/settings-table.js"]
 
 [output.html.print]
 enable = false

docs/theme/css/variables.css

@@ -44,8 +44,8 @@
   --warning-bg: hsl(42, 100%, 60%, 0.1);
   --warning-icon: hsl(42, 100%, 30%);
 
-  --table-border-color: hsl(219, 93%, 42%, 0.15);
-  --table-header-bg: hsl(0, 0%, 80%);
+  --table-border-color: hsl(219, 10%, 42%, 0.15);
+  --table-header-bg: hsl(219, 18%, 68%, 0.15);
   --table-alternate-bg: hsl(0, 0%, 97%);
 
   --searchbar-border-color: #aaa;

docs/theme/index.hbs

@@ -196,6 +196,7 @@
                             <p class="toc-title">On this page</p>
                           </nav>
                       </div>
+                      <div id="settings-container"></div>
                       {{{ content }}}
                     </main>
                 </div>

docs/theme/settings-table.css

@@ -0,0 +1,78 @@
+.settings-list {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font);
+  color: var(--fg);
+  background-color: var(--bg);
+}
+
+.setting-container {
+  padding: 12px 0;
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  border-bottom: 1px solid var(--table-border-color);
+}
+
+.setting-header {
+  grid-column: span 2 / span 2;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 0.5em 1em 0.5rem 0;
+}
+
+.setting-name {
+  font-family: monospace;
+  font-size: 1.4rem;
+  font-weight: bold;
+  color: var(--sidebar-fg);
+}
+
+.setting-type {
+  font-family: monospace;
+  font-size: 1.4rem;
+  color: var(--fg);
+}
+
+.setting-status {
+  width: fit-content;
+  padding: 0.2em 0.5em;
+  background-color: var(--sidebar-active-bg);
+  font-size: 1.2rem;
+  font-family: monospace;
+  color: #000;
+}
+
+.setting-details {
+  grid-column: span 4 / span 4;
+  width: 100%;
+}
+
+.setting-details tr:nth-child(even) {
+  background-color: transparent;
+}
+
+.setting-details td {
+  padding: 0.5em 0 0.5em 1em;
+}
+
+.setting-label {
+  font-size: 1.2rem;
+  width: 15%;
+  border: none;
+}
+
+.setting-value {
+  font-size: 1.4rem;
+  width: 70%;
+  border: none;
+}
+
+.settings-list code {
+  font-family: var(--mono-font);
+  font-size: 1.4rem;
+  background-color: var(--quote-bg);
+  padding: 2px 4px;
+  border-radius: 3px;
+  color: var(--inline-code-color);
+}

docs/theme/settings-table.js

@@ -0,0 +1,132 @@
+// - status/channel - None (stable) | Preview | Nightly | Experiemental | Unstable
+// - namespace?/key?
+// - name
+// - type (boolean, string, ...)
+// - default_value
+// - values[] | "See {name} for more →"
+// - short_description
+// - long_description? / examples? -> these ones get pulled out into sections
+
+// Every row should have a #permalink
+// Create a table from an array of settings
+
+const settings = [
+  {
+    status: "Preview",
+    key: "ui",
+    name: "font_weight",
+    type: "string",
+    default_value: 400,
+    values: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    short_description: "The weight of the ui font",
+    description: "The weight of the ui font",
+  },
+  {
+    status: "Nightly",
+    key: "ui",
+    name: "font_weight",
+    type: "number",
+    default_value: 400,
+    values: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    short_description: "The weight of the ui font",
+    description: "The weight of the ui font",
+  },
+];
+
+const render_tag = (text, variant = "default") => {
+  let classes = "tag";
+
+  if (variant !== "default") {
+    switch (variant) {
+      case "info":
+        classes += "tag-info;";
+        break;
+      case "warning":
+        classes += "tag-warning;";
+        break;
+      case "error":
+        classes += "tag-error";
+        break;
+      default:
+        classes;
+    }
+  }
+
+  return `<span class="${classes}">${text}</span>`;
+};
+
+function createSettingsTable(settings) {
+  const container = document.createElement("div");
+  container.className = "settings-list";
+
+  settings.forEach((setting) => {
+    const settingContainer = document.createElement("div");
+    settingContainer.className = "setting-container";
+    settingContainer.id = `setting-${setting.key}-${setting.name}`;
+
+    // Header
+    const header = document.createElement("div");
+    header.className = "setting-header";
+
+    const nameContainer = document.createElement("div");
+    nameContainer.className = "setting-name";
+    let nameText = `${setting.key}.${setting.name}`;
+    nameContainer.textContent = nameText;
+
+    const typeContainer = document.createElement("div");
+    typeContainer.className = "setting-type";
+    typeContainer.textContent = Array.isArray(setting.type)
+      ? setting.type.join(", ")
+      : setting.type;
+
+    header.appendChild(nameContainer);
+    header.appendChild(typeContainer);
+
+    if (setting.status) {
+      const statusContainer = document.createElement("div");
+      statusContainer.className = "setting-status";
+      statusContainer.innerHTML = render_tag(setting.status, "info");
+      header.appendChild(statusContainer);
+    }
+
+    // Details table
+    const detailsTable = document.createElement("table");
+    detailsTable.className = "setting-details";
+
+    const rows = [
+      ["Default", setting.default_value],
+      [
+        "Values",
+        Array.isArray(setting.values)
+          ? setting.values.join(", ")
+          : setting.values,
+      ],
+      ["Description", setting.short_description],
+    ];
+
+    rows.forEach(([label, value]) => {
+      const row = detailsTable.insertRow();
+      const labelCell = row.insertCell();
+      labelCell.textContent = label;
+      labelCell.className = "setting-label";
+      const valueCell = row.insertCell();
+      valueCell.textContent = value;
+      valueCell.className = "setting-value";
+    });
+
+    settingContainer.appendChild(header);
+    settingContainer.appendChild(detailsTable);
+    container.appendChild(settingContainer);
+  });
+
+  return container;
+}
+
+// Usage
+document.addEventListener("DOMContentLoaded", () => {
+  const settingsContainer = document.getElementById("settings-container");
+  if (settingsContainer) {
+    const settingsList = createSettingsTable(settings);
+    settingsContainer.appendChild(settingsList);
+  }
+});