Add repo/docs links

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) {
     <div class="plugin-row" role="row" key={plugin.name} data-search={pluginSearchText(plugin)}>
       <div class="col-name" role="cell">
         <span class="swatch"></span>
-        <span class="name-text">{plugin.name}</span>
-        {plugin.version ? <span class="version-tag">{plugin.version}</span> : null}
+        <div class="name-block">
+          <div class="name-line">
+            <span class="name-text">{plugin.name}</span>
+            {plugin.version ? <span class="version-tag">{plugin.version}</span> : null}
+          </div>
+          {renderPluginLinks(plugin)}
+        </div>
       </div>
       <div class="col-url" role="cell">
         <code>{plugin.url}</code>
@@ -176,3 +183,30 @@ function renderPlugin(plugin: PluginData) {
     </div>
   );
 }
+
+// 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 (
+    <div class="plugin-links">
+      {plugin.repoUrl
+        ? (
+          <a href={plugin.repoUrl} target="_blank" rel="noopener noreferrer">
+            repo <span>↗</span>
+          </a>
+        )
+        : null}
+      {plugin.website
+        ? (
+          <a href={plugin.website} target="_blank" rel="noopener noreferrer">
+            docs <span>↗</span>
+          </a>
+        )
+        : null}
+    </div>
+  );
+}

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": [

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}`,

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<Readonly<PluginsData>> {
           ...plugin,
           version: info.version,
           url: info.url,
+          repoUrl: info.repoUrl,
           downloadCount: {
             currentVersion: currentVersionDownloads(counts, info.tag),
             allVersions: counts?.allVersions ?? 0,

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;