On this page
+ {{{ content }}} diff --git a/docs/theme/settings-table.css b/docs/theme/settings-table.css new file mode 100644 index 0000000000..e25ee92b9f --- /dev/null +++ b/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); +} diff --git a/docs/theme/settings-table.js b/docs/theme/settings-table.js new file mode 100644 index 0000000000..2076d8d034 --- /dev/null +++ b/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 `${text}`; +}; + +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); + } +});