From 39d08e1577e8286b7549d6b89e8a31aa03e945bf Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 8 Aug 2024 13:23:34 -0400 Subject: [PATCH 1/3] init --- docs/book.toml | 4 +- docs/theme/css/variables.css | 2 +- docs/theme/index.hbs | 1 + docs/theme/settings-table.css | 47 +++++++++++++ docs/theme/settings-table.js | 124 ++++++++++++++++++++++++++++++++++ 5 files changed, 175 insertions(+), 3 deletions(-) create mode 100644 docs/theme/settings-table.css create mode 100644 docs/theme/settings-table.js diff --git a/docs/book.toml b/docs/book.toml index 1f439be205..45c3477c47 100644 --- a/docs/book.toml +++ b/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 diff --git a/docs/theme/css/variables.css b/docs/theme/css/variables.css index 15dc370e71..999a17b585 100644 --- a/docs/theme/css/variables.css +++ b/docs/theme/css/variables.css @@ -45,7 +45,7 @@ --warning-icon: hsl(42, 100%, 30%); --table-border-color: hsl(219, 93%, 42%, 0.15); - --table-header-bg: hsl(0, 0%, 80%); + --table-header-bg: hsl(219, 18%, 68%, 0.15); --table-alternate-bg: hsl(0, 0%, 97%); --searchbar-border-color: #aaa; diff --git a/docs/theme/index.hbs b/docs/theme/index.hbs index 8976b54bd9..99025a1f78 100644 --- a/docs/theme/index.hbs +++ b/docs/theme/index.hbs @@ -196,6 +196,7 @@

On this page

+
{{{ content }}} diff --git a/docs/theme/settings-table.css b/docs/theme/settings-table.css new file mode 100644 index 0000000000..1fe6fb73f5 --- /dev/null +++ b/docs/theme/settings-table.css @@ -0,0 +1,47 @@ +.settings-table { + width: 100%; + border-collapse: collapse; + margin-bottom: 1em; + font-family: var(--font); + color: var(--fg); + background-color: var(--bg); +} + +.settings-table th, +.settings-table td { + border: 1px solid var(--table-border-color); + padding: 8px; + text-align: left; +} + +.settings-table th { + background-color: var(--table-header-bg); + font-weight: bold; + color: var(--sidebar-fg); +} + +.settings-table tr:nth-child(even) { + background-color: var(--table-alternate-bg); +} + +.settings-table tr:hover { + background-color: var(--theme-hover); +} + +.settings-table a { + color: var(--links); + text-decoration: none; +} + +.settings-table a:hover { + text-decoration: underline; +} + +.settings-table code { + font-family: var(--mono-font); + font-size: var(--code-font-size); + background-color: var(--quote-bg); + padding: 2px 4px; + border-radius: 3px; + color: var(--inline-code-color); +} diff --git a/docs/theme/settings-table.js b/docs/theme/settings-table.js new file mode 100644 index 0000000000..1dfa18ce5f --- /dev/null +++ b/docs/theme/settings-table.js @@ -0,0 +1,124 @@ +// - 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 #peralink +// Create a table from an array of settings + +const settings = [ + { + status: null, + key: "ui", + name: "font_weight", + type: ["string" | "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", + }, + { + status: null, + key: "ui", + name: "font_size", + type: ["string", "number"], + default_value: 16, + values: [12, 14, 16, 18, 20, 24], + short_description: "The size of the ui font", + description: "The size of the ui font in pixels", + }, + { + status: "Preview", + key: "ui", + name: "theme", + type: "string", + default_value: "light", + values: ["light", "dark", "auto"], + short_description: "The UI theme", + description: "The overall theme for the user interface", + }, + { + status: null, + key: "editor", + name: "line_numbers", + type: "boolean", + default_value: true, + values: [true, false], + short_description: "Show line numbers", + description: "Whether to display line numbers in the editor", + }, +]; + +function createSettingsTable(settings) { + const table = document.createElement("table"); + table.className = "settings-table"; + + // Create table header + const thead = document.createElement("thead"); + const headerRow = document.createElement("tr"); + ["Name", "Type", "Default", "Values", "Description"].forEach((text) => { + const th = document.createElement("th"); + th.textContent = text; + headerRow.appendChild(th); + }); + thead.appendChild(headerRow); + table.appendChild(thead); + + // Create table body + const tbody = document.createElement("tbody"); + settings.forEach((setting) => { + const row = document.createElement("tr"); + row.id = `setting-${setting.key}-${setting.name}`; + + // Name (including key and status if available) + const nameCell = document.createElement("td"); + let nameText = `${setting.key}.${setting.name}`; + if (setting.status) { + nameText += ` - ${setting.status}`; + } + nameCell.textContent = nameText; + row.appendChild(nameCell); + + // Type + const typeCell = document.createElement("td"); + typeCell.textContent = Array.isArray(setting.type) + ? setting.type.join(", ") + : setting.type; + row.appendChild(typeCell); + + // Default + const defaultCell = document.createElement("td"); + defaultCell.textContent = setting.default_value; + row.appendChild(defaultCell); + + // Values + const valuesCell = document.createElement("td"); + valuesCell.textContent = Array.isArray(setting.values) + ? setting.values.join(", ") + : setting.values; + row.appendChild(valuesCell); + + // Description + const descCell = document.createElement("td"); + descCell.textContent = setting.short_description; + row.appendChild(descCell); + + tbody.appendChild(row); + }); + table.appendChild(tbody); + + return table; +} + +// Usage +document.addEventListener("DOMContentLoaded", () => { + const tableContainer = document.getElementById("settings-table-container"); + if (tableContainer) { + const table = createSettingsTable(settings); + tableContainer.appendChild(table); + } +}); From 8cef8da0e710d810838fa0f47a23a144b335ab30 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Thu, 8 Aug 2024 16:01:46 -0300 Subject: [PATCH 2/3] add tweaks to table design --- docs/theme/index.hbs | 2 +- docs/theme/settings-table.css | 63 +++++++++----- docs/theme/settings-table.js | 150 +++++++++++++++++----------------- 3 files changed, 119 insertions(+), 96 deletions(-) diff --git a/docs/theme/index.hbs b/docs/theme/index.hbs index 99025a1f78..6673de7376 100644 --- a/docs/theme/index.hbs +++ b/docs/theme/index.hbs @@ -196,7 +196,7 @@

On this page

-
+
{{{ content }}} diff --git a/docs/theme/settings-table.css b/docs/theme/settings-table.css index 1fe6fb73f5..f810c5f3d0 100644 --- a/docs/theme/settings-table.css +++ b/docs/theme/settings-table.css @@ -1,45 +1,64 @@ -.settings-table { - width: 100%; - border-collapse: collapse; - margin-bottom: 1em; +.settings-list { + display: flex; + flex-direction: column; font-family: var(--font); color: var(--fg); background-color: var(--bg); } -.settings-table th, -.settings-table td { - border: 1px solid var(--table-border-color); - padding: 8px; - text-align: left; +.setting-container { + padding: 12px 0; + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + border-bottom: 1px solid var(--table-border-color); } -.settings-table th { - background-color: var(--table-header-bg); +.setting-header { + grid-column: span 2 / span 2; + display: flex; + flex-direction: column; + padding: 0.5em 1em 0.5rem 0; +} + +.setting-name { + font-size: 1.4rem; font-weight: bold; color: var(--sidebar-fg); } -.settings-table tr:nth-child(even) { - background-color: var(--table-alternate-bg); +.setting-type { + font-size: 1.4rem; + color: var(--fg); } -.settings-table tr:hover { - background-color: var(--theme-hover); +.setting-details { + grid-column: span 4 / span 4; + width: 100%; } -.settings-table a { - color: var(--links); - text-decoration: none; +.setting-details tr:nth-child(even) { + background-color: transparent; } -.settings-table a:hover { - text-decoration: underline; +.setting-details td { + padding: 0.5em 0 0.5em 1em; } -.settings-table code { +.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: var(--code-font-size); + font-size: 1.4rem; background-color: var(--quote-bg); padding: 2px 4px; border-radius: 3px; diff --git a/docs/theme/settings-table.js b/docs/theme/settings-table.js index 1dfa18ce5f..4b5d3482bb 100644 --- a/docs/theme/settings-table.js +++ b/docs/theme/settings-table.js @@ -7,7 +7,7 @@ // - short_description // - long_description? / examples? -> these ones get pulled out into sections -// Every row should have a #peralink +// Every row should have a #permalink // Create a table from an array of settings const settings = [ @@ -24,101 +24,105 @@ const settings = [ { status: null, key: "ui", - name: "font_size", - type: ["string", "number"], - default_value: 16, - values: [12, 14, 16, 18, 20, 24], - short_description: "The size of the ui font", - description: "The size of the ui font in pixels", - }, - { - status: "Preview", - key: "ui", - name: "theme", - type: "string", - default_value: "light", - values: ["light", "dark", "auto"], - short_description: "The UI theme", - description: "The overall theme for the user interface", - }, - { - status: null, - key: "editor", - name: "line_numbers", - type: "boolean", - default_value: true, - values: [true, false], - short_description: "Show line numbers", - description: "Whether to display line numbers in the editor", + name: "font_weight", + type: ["string" | "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 `${text}`; +}; + function createSettingsTable(settings) { - const table = document.createElement("table"); - table.className = "settings-table"; + const container = document.createElement("div"); + container.className = "settings-list"; - // Create table header - const thead = document.createElement("thead"); - const headerRow = document.createElement("tr"); - ["Name", "Type", "Default", "Values", "Description"].forEach((text) => { - const th = document.createElement("th"); - th.textContent = text; - headerRow.appendChild(th); - }); - thead.appendChild(headerRow); - table.appendChild(thead); - - // Create table body - const tbody = document.createElement("tbody"); settings.forEach((setting) => { - const row = document.createElement("tr"); - row.id = `setting-${setting.key}-${setting.name}`; + const settingContainer = document.createElement("div"); + settingContainer.className = "setting-container"; + settingContainer.id = `setting-${setting.key}-${setting.name}`; - // Name (including key and status if available) - const nameCell = document.createElement("td"); + // 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}`; if (setting.status) { nameText += ` - ${setting.status}`; } - nameCell.textContent = nameText; - row.appendChild(nameCell); + nameContainer.textContent = nameText; - // Type - const typeCell = document.createElement("td"); - typeCell.textContent = Array.isArray(setting.type) + const typeContainer = document.createElement("div"); + typeContainer.className = "setting-type"; + typeContainer.textContent = Array.isArray(setting.type) ? setting.type.join(", ") : setting.type; - row.appendChild(typeCell); - // Default - const defaultCell = document.createElement("td"); - defaultCell.textContent = setting.default_value; - row.appendChild(defaultCell); + header.appendChild(nameContainer); + header.appendChild(typeContainer); - // Values - const valuesCell = document.createElement("td"); - valuesCell.textContent = Array.isArray(setting.values) - ? setting.values.join(", ") - : setting.values; - row.appendChild(valuesCell); + // Details table + const detailsTable = document.createElement("table"); + detailsTable.className = "setting-details"; - // Description - const descCell = document.createElement("td"); - descCell.textContent = setting.short_description; - row.appendChild(descCell); + const rows = [ + ["Default", setting.default_value], + [ + "Values", + Array.isArray(setting.values) + ? setting.values.join(", ") + : setting.values, + ], + ["Description", setting.short_description], + ]; - tbody.appendChild(row); + 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); }); - table.appendChild(tbody); - return table; + return container; } // Usage document.addEventListener("DOMContentLoaded", () => { - const tableContainer = document.getElementById("settings-table-container"); - if (tableContainer) { - const table = createSettingsTable(settings); - tableContainer.appendChild(table); + const settingsContainer = document.getElementById("settings-container"); + if (settingsContainer) { + const settingsList = createSettingsTable(settings); + settingsContainer.appendChild(settingsList); } }); From 788a6ae14a8c2b51f28d94556c7957c8e9960e78 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Thu, 8 Aug 2024 16:25:54 -0300 Subject: [PATCH 3/3] tweak the status display --- docs/theme/css/variables.css | 2 +- docs/theme/settings-table.css | 12 ++++++++++++ docs/theme/settings-table.js | 18 +++++++++++------- 3 files changed, 24 insertions(+), 8 deletions(-) diff --git a/docs/theme/css/variables.css b/docs/theme/css/variables.css index 999a17b585..2accdd14ad 100644 --- a/docs/theme/css/variables.css +++ b/docs/theme/css/variables.css @@ -44,7 +44,7 @@ --warning-bg: hsl(42, 100%, 60%, 0.1); --warning-icon: hsl(42, 100%, 30%); - --table-border-color: hsl(219, 93%, 42%, 0.15); + --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%); diff --git a/docs/theme/settings-table.css b/docs/theme/settings-table.css index f810c5f3d0..e25ee92b9f 100644 --- a/docs/theme/settings-table.css +++ b/docs/theme/settings-table.css @@ -17,20 +17,32 @@ 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%; diff --git a/docs/theme/settings-table.js b/docs/theme/settings-table.js index 4b5d3482bb..2076d8d034 100644 --- a/docs/theme/settings-table.js +++ b/docs/theme/settings-table.js @@ -12,20 +12,20 @@ const settings = [ { - status: null, + status: "Preview", key: "ui", name: "font_weight", - type: ["string" | "number"], + 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: null, + status: "Nightly", key: "ui", name: "font_weight", - type: ["string" | "number"], + type: "number", default_value: 400, values: [100, 200, 300, 400, 500, 600, 700, 800, 900], short_description: "The weight of the ui font", @@ -71,9 +71,6 @@ function createSettingsTable(settings) { const nameContainer = document.createElement("div"); nameContainer.className = "setting-name"; let nameText = `${setting.key}.${setting.name}`; - if (setting.status) { - nameText += ` - ${setting.status}`; - } nameContainer.textContent = nameText; const typeContainer = document.createElement("div"); @@ -85,6 +82,13 @@ function createSettingsTable(settings) { 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";