From 53393666e8f3e59e8d5cc1527c3e034d0d3cb6fa Mon Sep 17 00:00:00 2001 From: David Sherret Date: Sun, 28 Jun 2026 16:32:50 -0400 Subject: [PATCH 1/2] Add repo/docs links to plugins and switch site to light theme - info.json: add `website` to plugins that have a dprint.dev docs page - derive each plugin's GitHub `repoUrl` during the info build - show `repo`/`docs` links beneath each plugin name and index them in search - recolor the site from the dark palette to a light/white theme --- homeView.tsx | 40 +++++++++++++-- info.json | 18 +++++++ plugins.ts | 2 + readInfoFile.ts | 5 ++ style.css | 126 ++++++++++++++++++++++++++++++------------------ 5 files changed, 142 insertions(+), 49 deletions(-) diff --git a/homeView.tsx b/homeView.tsx index 7f2ca52..ee70a44 100644 --- a/homeView.tsx +++ b/homeView.tsx @@ -10,7 +10,7 @@ export function renderHomeHtml(pluginsData: PluginsData) { - + Plugins - dprint @@ -105,6 +105,8 @@ function pluginSearchText(plugin: PluginData) { plugin.version, plugin.description, plugin.configKey, + plugin.repoUrl, + plugin.website, ...(plugin.keywords ?? []), ...(plugin.fileExtensions ?? []), ...(plugin.fileNames ?? []), @@ -158,8 +160,13 @@ function renderPlugin(plugin: PluginData) {
- {plugin.name} - {plugin.version ? {plugin.version} : null} +
+
+ {plugin.name} + {plugin.version ? {plugin.version} : null} +
+ {renderPluginLinks(plugin)} +
{plugin.url} @@ -176,3 +183,30 @@ function renderPlugin(plugin: PluginData) {
); } + +// the repo and docs links shown beneath a plugin's name. both are optional: the +// repo url is derived during the build and docs only exist for plugins with a +// dprint.dev page. +function renderPluginLinks(plugin: PluginData) { + if (plugin.repoUrl == null && plugin.website == null) { + return null; + } + return ( +
+ {plugin.repoUrl + ? ( + + repo ↗ + + ) + : null} + {plugin.website + ? ( + + docs ↗ + + ) + : null} +
+ ); +} diff --git a/info.json b/info.json index 644a3f5..7c4dfd9 100644 --- a/info.json +++ b/info.json @@ -5,6 +5,7 @@ { "name": "dprint-plugin-typescript", "description": "TypeScript/JavaScript code formatter.", + "website": "https://dprint.dev/plugins/typescript/", "selected": true, "configKey": "typescript", "keywords": [ @@ -31,6 +32,7 @@ { "name": "dprint-plugin-json", "description": "JSON/JSONC code formatter.", + "website": "https://dprint.dev/plugins/json/", "selected": true, "configKey": "json", "keywords": [ @@ -48,6 +50,7 @@ { "name": "dprint-plugin-markdown", "description": "Markdown code formatter.", + "website": "https://dprint.dev/plugins/markdown/", "selected": true, "configKey": "markdown", "keywords": [ @@ -68,6 +71,7 @@ { "name": "dprint-plugin-toml", "description": "TOML code formatter.", + "website": "https://dprint.dev/plugins/toml/", "selected": true, "configKey": "toml", "keywords": [ @@ -82,6 +86,7 @@ { "name": "dprint-plugin-dockerfile", "description": "Dockerfile code formatter.", + "website": "https://dprint.dev/plugins/dockerfile/", "selected": false, "configKey": "dockerfile", "keywords": [ @@ -100,6 +105,7 @@ { "name": "dprint-plugin-biome", "description": "Biome (JS/TS/JSON) wrapper plugin.", + "website": "https://dprint.dev/plugins/biome/", "selected": false, "configKey": "biome", "keywords": [ @@ -128,6 +134,7 @@ { "name": "dprint-plugin-oxc", "description": "Oxc (JS/TS) wrapper plugin.", + "website": "https://dprint.dev/plugins/oxc/", "selected": false, "configKey": "oxc", "keywords": [ @@ -153,6 +160,7 @@ { "name": "dprint-plugin-mago", "description": "Mago (PHP) wrapper plugin.", + "website": "https://dprint.dev/plugins/mago/", "selected": false, "configKey": "mago", "keywords": [ @@ -168,6 +176,7 @@ { "name": "dprint-plugin-ruff", "description": "Ruff (Python) wrapper plugin.", + "website": "https://dprint.dev/plugins/ruff/", "selected": false, "configKey": "ruff", "keywords": [ @@ -185,6 +194,7 @@ { "name": "dprint-plugin-jupyter", "description": "Jupyter notebook code block formatter.", + "website": "https://dprint.dev/plugins/jupyter/", "selected": false, "configKey": "jupyter", "keywords": [ @@ -201,6 +211,7 @@ { "name": "jakebailey/gofumpt", "description": "Gofumpt (Go) wrapper plugin.", + "website": "https://dprint.dev/plugins/gofumpt/", "selected": false, "configKey": "gofumpt", "keywords": [ @@ -217,6 +228,7 @@ { "name": "g-plane/malva", "description": "CSS, SCSS, Sass and Less formatter.", + "website": "https://dprint.dev/plugins/malva/", "selected": true, "configKey": "malva", "keywords": [ @@ -239,6 +251,7 @@ { "name": "g-plane/markup_fmt", "description": "HTML, Vue, Svelte, Astro, Angular, Jinja, Twig, Nunjucks, and Vento formatter.", + "website": "https://dprint.dev/plugins/markup_fmt/", "selected": true, "configKey": "markup", "keywords": [ @@ -284,6 +297,7 @@ { "name": "g-plane/pretty_yaml", "description": "YAML formatter.", + "website": "https://dprint.dev/plugins/pretty_yaml/", "selected": true, "configKey": "yaml", "keywords": [ @@ -301,6 +315,7 @@ { "name": "g-plane/pretty_graphql", "description": "GraphQL formatter.", + "website": "https://dprint.dev/plugins/pretty_graphql/", "selected": false, "configKey": "graphql", "keywords": [ @@ -422,6 +437,7 @@ { "name": "dprint-plugin-prettier", "description": "Prettier wrapper plugin (consider faster dedicated plugins for JS/TS, CSS, etc.).", + "website": "https://dprint.dev/plugins/prettier/", "selected": false, "configKey": "prettier", "keywords": [ @@ -466,6 +482,7 @@ { "name": "dprint-plugin-roslyn", "description": "C# and Visual Basic code formatter (Roslyn).", + "website": "https://dprint.dev/plugins/roslyn/", "selected": false, "configKey": "roslyn", "keywords": [ @@ -486,6 +503,7 @@ { "name": "dprint-plugin-exec", "description": "Formats code using formatting CLIs installed on the host machine (rustfmt, clang-format, shfmt, etc.).", + "website": "https://dprint.dev/plugins/exec/", "selected": false, "configKey": "exec", "keywords": [ diff --git a/plugins.ts b/plugins.ts index 06a1eb8..47a161e 100644 --- a/plugins.ts +++ b/plugins.ts @@ -149,6 +149,8 @@ export async function getLatestInfo(username: string, repoName: string, origin: : `${origin}/${username}/${displayRepoName}-${releaseInfo.tagName}.${extension}`, version: releaseInfo.tagName.replace(/^v/, ""), checksum: releaseInfo.checksum, + // the GitHub repo this plugin is published from (full name already resolved above) + repoUrl: `https://github.com/${username}/${repoName}`, // identifies this plugin's download analytics: the `username/repo` key that // downloads are recorded under and the tag of the latest release downloadKey: `${username}/${repoName}`, diff --git a/readInfoFile.ts b/readInfoFile.ts index 3081b29..323974f 100644 --- a/readInfoFile.ts +++ b/readInfoFile.ts @@ -16,6 +16,10 @@ export interface PluginData { currentVersion: number; allVersions: number; }; + // links shown on the site: the GitHub repo (derived during the build) and the + // optional dprint.dev docs page (carried over from info.json) + repoUrl?: string; + website?: string; // descriptive fields carried over from info.json, used to index the search description?: string; configKey?: string; @@ -152,6 +156,7 @@ async function buildInfoFile(origin: string): Promise> { ...plugin, version: info.version, url: info.url, + repoUrl: info.repoUrl, downloadCount: { currentVersion: currentVersionDownloads(counts, info.tag), allVersions: counts?.allVersions ?? 0, diff --git a/style.css b/style.css index 1dcc371..c6d142e 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ /* ===================== base / theme ===================== */ :root { - --accent: #8b93a1; + --accent: #6b7280; --max: 1320px; } @@ -19,14 +19,14 @@ body { font-family: "IBM Plex Mono", ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background: #1e1e1e; - color: #c2c8d0; + background: #ffffff; + color: #3a3f44; min-height: 100vh; } ::selection { - background: #3a3f49; - color: #fff; + background: #d8dde4; + color: #1e1e1e; } a { @@ -56,44 +56,44 @@ a { max-width: 360px; font-family: inherit; font-size: 14px; - color: #e8e8ea; - background: #181a1e; - border: 1px solid #33373f; + color: #1e1e1e; + background: #ffffff; + border: 1px solid #d5d9df; border-radius: 8px; padding: 9px 13px; outline: none; transition: border-color 0.15s; } .plugin-search::placeholder { - color: #6e7681; + color: #9aa1ab; } .plugin-search:focus { - border-color: #4d5564; + border-color: #9aa1ab; } .docs-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; - color: #cdd2da; - border: 1px solid #33373f; + color: #3a3f44; + border: 1px solid #d5d9df; border-radius: 8px; padding: 8px 14px; transition: color 0.15s, border-color 0.15s; } .docs-link:hover { - border-color: #4d5564; - color: #fff; + border-color: #9aa1ab; + color: #111; } .docs-link span { - color: #6e7681; + color: #9aa1ab; } /* ===================== registry table ===================== */ .plugin-table { - background: #181a1e; - border: 1px solid #33373f; + background: #ffffff; + border: 1px solid #e3e6ea; border-radius: 14px; overflow: hidden; } @@ -106,44 +106,44 @@ a { padding: 14px 22px; } .plugin-table-head { - background: #1f2228; - border-bottom: 1px solid #2a2e35; + background: #f6f7f9; + border-bottom: 1px solid #e3e6ea; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; - color: #6e7681; + color: #8a909a; } .plugin-table-head .num-col { text-align: right; } .plugin-row { - border-top: 1px solid #23262d; + border-top: 1px solid #eceef1; transition: background 0.15s; } .plugin-row:first-of-type { border-top: none; } .plugin-row:hover { - background: #1d2025; + background: #f6f7f9; } .plugin-row[hidden] { display: none; } .no-matches { - background: #181a1e; - border: 1px solid #33373f; + background: #ffffff; + border: 1px solid #e3e6ea; border-radius: 14px; padding: 30px 22px; margin-top: 12px; - color: #6e7681; + color: #8a909a; font-size: 14px; text-align: center; } .col-name { display: flex; - align-items: center; + align-items: flex-start; gap: 11px; min-width: 0; } @@ -152,12 +152,45 @@ a { height: 8px; border-radius: 2px; flex-shrink: 0; + margin-top: 6px; background: var(--accent); } +.col-name .name-block { + display: flex; + flex-direction: column; + gap: 5px; + min-width: 0; +} +.col-name .name-line { + display: flex; + align-items: center; + gap: 11px; + min-width: 0; +} +.plugin-links { + display: flex; + align-items: center; + gap: 14px; + font-size: 12px; +} +.plugin-links a { + display: inline-flex; + align-items: center; + gap: 4px; + color: #6b7280; + transition: color 0.15s; +} +.plugin-links a:hover { + color: #111; +} +.plugin-links a span { + color: #9aa1ab; + font-size: 11px; +} .col-name .name-text { font-size: 14.5px; font-weight: 600; - color: #e8e8ea; + color: #1e1e1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -166,8 +199,8 @@ a { flex-shrink: 0; font-size: 11px; color: var(--accent); - background: #23262d; - border: 1px solid #2f333b; + background: #f0f2f4; + border: 1px solid #e3e6ea; border-radius: 999px; padding: 2px 8px; } @@ -179,7 +212,7 @@ a { display: block; font-family: inherit; font-size: 13px; - color: #c2c8d0; + color: #4b5159; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -187,38 +220,39 @@ a { .col-downloads { font-size: 13.5px; - color: #a1a9b5; + color: #6b7280; text-align: right; white-space: nowrap; } .col-downloads .dl-label { display: none; - color: #6e7681; + color: #9aa1ab; } .col-action { text-align: right; } .copy-btn { - background: #23262d; - border: 1px solid #383d47; + background: #f0f2f4; + border: 1px solid #d5d9df; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; - color: #9aa1ad; + color: #5a616b; padding: 7px 14px; transition: color 0.15s, border-color 0.15s, background 0.15s; } .copy-btn:hover { - border-color: #4d5564; - color: #fff; + border-color: #9aa1ab; + color: #111; } .copy-btn.copied { - color: #a7d39b; - border-color: #3f5340; + color: #3f8f4f; + border-color: #b7dcb9; + background: #eef7ee; } @media (max-width: 820px) { @@ -246,8 +280,8 @@ a { .col-url code { white-space: normal; word-break: break-all; - background: #0f1114; - border: 1px solid #2a2e35; + background: #f6f7f9; + border: 1px solid #e3e6ea; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; @@ -270,7 +304,7 @@ a { margin: 0 0 16px; font-size: 16px; font-weight: 600; - color: #f0f1f3; + color: #1e1e1e; } .commands ul { margin: 0; @@ -283,14 +317,14 @@ a { .commands li { font-size: 14px; line-height: 1.6; - color: #a1a9b5; + color: #5a616b; } .commands code { font-family: inherit; font-size: 13px; - color: #fff; - background: #181a1e; - border: 1px solid #2a2e35; + color: #111; + background: #f6f7f9; + border: 1px solid #e3e6ea; border-radius: 6px; padding: 3px 8px; } From c232af3b1c478ed59e5c8627293acd8036743b9a Mon Sep 17 00:00:00 2001 From: David Sherret Date: Sun, 28 Jun 2026 16:34:26 -0400 Subject: [PATCH 2/2] Revert light theme, restore dark palette Keeps the plugin repo/docs links; only undoes the color changes. --- homeView.tsx | 2 +- style.css | 97 ++++++++++++++++++++++++++-------------------------- 2 files changed, 49 insertions(+), 50 deletions(-) diff --git a/homeView.tsx b/homeView.tsx index ee70a44..2ed7ba7 100644 --- a/homeView.tsx +++ b/homeView.tsx @@ -10,7 +10,7 @@ export function renderHomeHtml(pluginsData: PluginsData) { - + Plugins - dprint diff --git a/style.css b/style.css index c6d142e..be29e54 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ /* ===================== base / theme ===================== */ :root { - --accent: #6b7280; + --accent: #8b93a1; --max: 1320px; } @@ -19,14 +19,14 @@ body { font-family: "IBM Plex Mono", ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background: #ffffff; - color: #3a3f44; + background: #1e1e1e; + color: #c2c8d0; min-height: 100vh; } ::selection { - background: #d8dde4; - color: #1e1e1e; + background: #3a3f49; + color: #fff; } a { @@ -56,44 +56,44 @@ a { max-width: 360px; font-family: inherit; font-size: 14px; - color: #1e1e1e; - background: #ffffff; - border: 1px solid #d5d9df; + color: #e8e8ea; + background: #181a1e; + border: 1px solid #33373f; border-radius: 8px; padding: 9px 13px; outline: none; transition: border-color 0.15s; } .plugin-search::placeholder { - color: #9aa1ab; + color: #6e7681; } .plugin-search:focus { - border-color: #9aa1ab; + border-color: #4d5564; } .docs-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; - color: #3a3f44; - border: 1px solid #d5d9df; + color: #cdd2da; + border: 1px solid #33373f; border-radius: 8px; padding: 8px 14px; transition: color 0.15s, border-color 0.15s; } .docs-link:hover { - border-color: #9aa1ab; - color: #111; + border-color: #4d5564; + color: #fff; } .docs-link span { - color: #9aa1ab; + color: #6e7681; } /* ===================== registry table ===================== */ .plugin-table { - background: #ffffff; - border: 1px solid #e3e6ea; + background: #181a1e; + border: 1px solid #33373f; border-radius: 14px; overflow: hidden; } @@ -106,37 +106,37 @@ a { padding: 14px 22px; } .plugin-table-head { - background: #f6f7f9; - border-bottom: 1px solid #e3e6ea; + background: #1f2228; + border-bottom: 1px solid #2a2e35; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; - color: #8a909a; + color: #6e7681; } .plugin-table-head .num-col { text-align: right; } .plugin-row { - border-top: 1px solid #eceef1; + border-top: 1px solid #23262d; transition: background 0.15s; } .plugin-row:first-of-type { border-top: none; } .plugin-row:hover { - background: #f6f7f9; + background: #1d2025; } .plugin-row[hidden] { display: none; } .no-matches { - background: #ffffff; - border: 1px solid #e3e6ea; + background: #181a1e; + border: 1px solid #33373f; border-radius: 14px; padding: 30px 22px; margin-top: 12px; - color: #8a909a; + color: #6e7681; font-size: 14px; text-align: center; } @@ -177,20 +177,20 @@ a { display: inline-flex; align-items: center; gap: 4px; - color: #6b7280; + color: #8b93a1; transition: color 0.15s; } .plugin-links a:hover { - color: #111; + color: #fff; } .plugin-links a span { - color: #9aa1ab; + color: #6e7681; font-size: 11px; } .col-name .name-text { font-size: 14.5px; font-weight: 600; - color: #1e1e1e; + color: #e8e8ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -199,8 +199,8 @@ a { flex-shrink: 0; font-size: 11px; color: var(--accent); - background: #f0f2f4; - border: 1px solid #e3e6ea; + background: #23262d; + border: 1px solid #2f333b; border-radius: 999px; padding: 2px 8px; } @@ -212,7 +212,7 @@ a { display: block; font-family: inherit; font-size: 13px; - color: #4b5159; + color: #c2c8d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -220,39 +220,38 @@ a { .col-downloads { font-size: 13.5px; - color: #6b7280; + color: #a1a9b5; text-align: right; white-space: nowrap; } .col-downloads .dl-label { display: none; - color: #9aa1ab; + color: #6e7681; } .col-action { text-align: right; } .copy-btn { - background: #f0f2f4; - border: 1px solid #d5d9df; + background: #23262d; + border: 1px solid #383d47; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; - color: #5a616b; + color: #9aa1ad; padding: 7px 14px; transition: color 0.15s, border-color 0.15s, background 0.15s; } .copy-btn:hover { - border-color: #9aa1ab; - color: #111; + border-color: #4d5564; + color: #fff; } .copy-btn.copied { - color: #3f8f4f; - border-color: #b7dcb9; - background: #eef7ee; + color: #a7d39b; + border-color: #3f5340; } @media (max-width: 820px) { @@ -280,8 +279,8 @@ a { .col-url code { white-space: normal; word-break: break-all; - background: #f6f7f9; - border: 1px solid #e3e6ea; + background: #0f1114; + border: 1px solid #2a2e35; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; @@ -304,7 +303,7 @@ a { margin: 0 0 16px; font-size: 16px; font-weight: 600; - color: #1e1e1e; + color: #f0f1f3; } .commands ul { margin: 0; @@ -317,14 +316,14 @@ a { .commands li { font-size: 14px; line-height: 1.6; - color: #5a616b; + color: #a1a9b5; } .commands code { font-family: inherit; font-size: 13px; - color: #111; - background: #f6f7f9; - border: 1px solid #e3e6ea; + color: #fff; + background: #181a1e; + border: 1px solid #2a2e35; border-radius: 6px; padding: 3px 8px; }