diff --git a/homeView.tsx b/homeView.tsx index 7f2ca52..2ed7ba7 100644 --- a/homeView.tsx +++ b/homeView.tsx @@ -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 ( + + ); +} 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..be29e54 100644 --- a/style.css +++ b/style.css @@ -143,7 +143,7 @@ a { .col-name { display: flex; - align-items: center; + align-items: flex-start; gap: 11px; min-width: 0; } @@ -152,8 +152,41 @@ 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: #8b93a1; + transition: color 0.15s; +} +.plugin-links a:hover { + color: #fff; +} +.plugin-links a span { + color: #6e7681; + font-size: 11px; +} .col-name .name-text { font-size: 14.5px; font-weight: 600;