Merge pull request #1071 from DuendeSoftware/mb/experiments/contributors-list

Add contributors to sidebar

Author: maartenba

.github/workflows/ci.yml

@@ -17,6 +17,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Setup .NET
         uses: actions/setup-dotnet@v4
@@ -30,6 +32,8 @@ jobs:
 
       - name: Build container
         run: dotnet build.cs container
-        
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          
       - name: Run tests
         run: dotnet build.cs dotnet-test

.gitignore

@@ -16,6 +16,9 @@ yarn-error.log*
 pnpm-debug.log*
 
 
+# generated build data
+astro/src/data/contributors.json
+
 # environment variables
 .env
 .env.production

astro/astro.config.mjs

@@ -18,6 +18,7 @@ import { duendeOpenGraphImage } from "./src/plugins/duende-og-image.js";
 import removeMarkdownExtensions from "./src/plugins/remove-markdown-extensions.js";
 import staticRedirects from "./src/plugins/static-redirects.js";
 import markdownOutput from "./src/plugins/markdown-output.js";
+import contributorMapping from "./src/plugins/contributor-mapping.js";
 
 // https://astro.build/config
 export default defineConfig({
@@ -35,6 +36,10 @@ export default defineConfig({
     },
   ],
   integrations: [
+    contributorMapping({
+      include: ["src/content/docs/**"],
+      repo: "DuendeSoftware/docs.duendesoftware.com",
+    }),
     starlight({
       customCss: ["./src/styles/custom.css"],
       routeMiddleware: ["./src/plugins/search-topic-middleware.ts"],
@@ -188,6 +193,7 @@ export default defineConfig({
         Banner: "./src/components/Banner.astro",
         Head: "./src/components/Head.astro",
         Pagination: "./src/components/Pagination.astro",
+        PageSidebar: "./src/components/PageSidebar.astro",
       },
       sidebar: [
         {

astro/src/components/PageSidebar.astro

@@ -0,0 +1,144 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+import MobileTableOfContents from 'virtual:starlight/components/MobileTableOfContents';
+import TableOfContents from 'virtual:starlight/components/TableOfContents';
+import contributorsData from '../data/contributors.json';
+
+const { editUrl, toc } = Astro.locals.starlightRoute;
+const filePath = Astro.locals.starlightRoute.entry.filePath;
+
+// Look up contributors for this page's source file
+const contributors = filePath ? (contributorsData as Record<string, { username: string; avatarUrl: string; profileUrl: string }[]>)[filePath] ?? [] : [];
+---
+
+{toc && (
+  <>
+    <div class="lg:sl-hidden">
+      <MobileTableOfContents />
+    </div>
+    <div class="right-sidebar-panel sl-hidden lg:sl-block">
+      <div class="sl-container">
+        <TableOfContents />
+
+        <div class="sidebar-meta">
+          {contributors.length > 0 && (
+            <div class="meta-section">
+              <h2>Page Contributors</h2>
+              <div class="contributor-avatars">
+                {contributors.map((c) => (
+                    <a href={c.profileUrl} title={c.username} target="_blank" rel="noopener noreferrer">
+                      <img
+                        src={c.avatarUrl}
+                        alt={c.username}
+                        width="24"
+                        height="24"
+                        loading="lazy"
+                        decoding="async"
+                      />
+                    </a>
+                  ))}
+              </div>
+            </div>
+          )}
+
+          {editUrl && (
+            <div class="meta-section">
+              <a href={editUrl} class="edit-link sl-flex print:hidden" target="_blank" rel="noopener noreferrer">
+                <Icon name="pencil" size="1.2em" />
+                {Astro.locals.t('page.editLink')}
+              </a>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  </>
+)}
+
+<style>
+  @layer starlight.core {
+    .right-sidebar-panel {
+      padding: 1rem var(--sl-sidebar-pad-x);
+    }
+    .sl-container {
+      width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
+    }
+    .right-sidebar-panel :global(h2) {
+      color: var(--sl-color-white);
+      font-size: var(--sl-text-h5);
+      font-weight: 600;
+      line-height: var(--sl-line-height-headings);
+      margin-bottom: 0.5rem;
+    }
+    .right-sidebar-panel :global(:where(a)) {
+      display: block;
+      font-size: var(--sl-text-xs);
+      text-decoration: none;
+      color: var(--sl-color-gray-3);
+      overflow-wrap: anywhere;
+    }
+    .right-sidebar-panel :global(:where(a):hover) {
+      color: var(--sl-color-white);
+    }
+    @media (min-width: 72rem) {
+      .sl-container {
+        max-width: calc(
+          (
+            (
+                100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 *
+                  var(--sl-sidebar-pad-x)
+              ) * 0.25
+          )
+        );
+      }
+    }
+  }
+
+  .sidebar-meta {
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--sl-color-gray-6);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .meta-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .meta-section h2 {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .contributor-avatars {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    align-items: flex-start;
+  }
+
+  .contributor-avatars a {
+    display: inline-flex;
+    line-height: 0;
+  }
+
+  .contributor-avatars img {
+    border-radius: 50%;
+  }
+
+  .edit-link {
+    gap: 0.5rem;
+    align-items: center;
+    font-size: var(--sl-text-xs);
+    color: var(--sl-color-gray-3);
+    text-decoration: none;
+  }
+
+  .edit-link:hover {
+    color: var(--sl-color-white);
+  }
+</style>