feat(sigs): dynamic grid layout and content adapters modernization by TineoC · Pull Request #654 · kubernetes/contributor-site

TineoC · 2026-02-13T05:14:56Z

This PR modernizes the community groups section by implementing Hugo Content Adapters and a new responsive grid layout.

Key Changes:

Hugo Content Adapters: Replaced fragile bash-based generation with dynamic, in-build page creation for SIGs, WGs, and Committees.
Dynamic Content: READMEs and Charters are now fetched directly from the kubernetes/community repo during the Hugo build.
Grid Layout: Implemented a modern, responsive grid component for the community groups index with improved search and filtering.
Cleanup: Removed legacy User Groups and deleted obsolete static markdown files.

Netlify Configuration (Required for Production):
This PR introduces authenticated remote resource fetching to prevent GitHub API rate limiting during site builds.
An environment variable named HUGO_GITHUB_TOKEN must be added to the Netlify site settings.

Token Scope: A fine-grained Personal Access Token (PAT) with read-only access to public repositories is recommended.
Fallback: The build will still attempt to fetch resources without a token (unauthenticated) if the variable is missing, but it may fail due to rate limits in high-traffic CI environments.

Fixes: #653

k8s-ci-robot · 2026-02-13T05:15:02Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: TineoC
Once this PR has been reviewed and has the lgtm label, please assign palnabarun for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

TineoC · 2026-02-13T05:37:56Z

While this is a nice feature to add, it significantly adds to our build times, especially at the gen-content step. We could wait till this is merged so we can add these changes after.

TineoC · 2026-02-15T03:26:36Z

/hold /label draft

TineoC · 2026-02-15T03:41:26Z

I would like to hear your thoughts on this idea @kaslin @chris-short

TineoC · 2026-02-20T00:13:28Z

/remove-hold

lmktfy · 2026-02-21T15:25:55Z

If you didn't also consider a content adapter to render one page per SIG, then bear in mind that that is also an option.

I quite like the two-column layout, though.

TineoC · 2026-02-21T16:57:20Z

/hold

…ject This addresses kubernetes#653 and prepares for kubernetes#654

… adapters and SEO improvements

TineoC · 2026-03-22T17:33:47Z

/unhold

lmktfy

Thanks! It's impressive.

I can spot a lot of minor problems, but actually the main thing that gets in the way of adding LGTM is the mobile-viewport rendering.

See this video to illustrate what is wrong:
Scroll behavior

I think we should improve that before we merge. The other nits and minor feedback, you can fix if you feel you'd like to. I recommend fixing at least the alias clash.

lmktfy · 2026-03-23T21:17:14Z

.gitignore

+# Ingested documents
+data/sigs.yaml


Is this needed? I think it no longer is.

lmktfy · 2026-03-23T21:17:43Z

content/en/community/.gitignore

 mentoring.md
 values.md
+sigs.yaml
+community-groups/**


Do we need this ignore?

lmktfy · 2026-03-23T21:18:04Z

layouts/partials/head.html

 <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
 {{ end -}}

+<link rel="canonical" href="{{ .Permalink }}">


Why this change?

Also, could it go in layouts/partials/hooks/head-end.html instead? That's the usual home for custom additions.

Why this change?

This is for SEO to make sure that no matter the version of the sub-page they're visiting, for the search engine, it is the same content.

So it doesn't treat these like different pages, like for example:

1. https://contributor.kubernetes.io/blog/my-post/ (The "official" URL) 2. https://contributor.kubernetes.io/blog/my-post (No trailing slash) 3. http://contributor.kubernetes.io/blog/my-post/ (Insecure version) 4. https://contributor.kubernetes.io/blog/my-post/?utm_source=twitter (With tracking parameters)

It would look like: <link rel="canonical" href="https://contributor.kubernetes.io/blog/my-post/">

Will this overwrite the canonicalUrl defined in blog posts' front matter, where k8s.io or etcd.io is the canonical? My testing shows this breaks that. I ask because I'd like this to be future-proof. We may want something more flexible, like:

<link rel="canonical" href="{{ with .Params.canonicalURL }}{{ . }}{{ else }}{{ .Permalink }}{{ end }}">

FWIW, k8s.io is using this currently, which would also work:

{{ with .Params.canonicalUrl }} <link rel="canonical" href="{{ . }}"> {{ end }}

c92cbea This should allow to override those params

This appears to be working as desired. Thank you, @TineoC!

lmktfy · 2026-03-23T21:18:41Z

layouts/shortcodes/sigs-list.html

+{{/* layouts/shortcodes/sigs-list.html */}}
+
+{{- $showOnly := .Get "show_only" | default "all" -}}
+{{- $sigsUrl := "https://raw.githubusercontent.com/kubernetes/community/master/sigs.yaml" -}}


nit: we might want to give a GitHub token to Netlify to ensure that production builds are authenticated and aren't rate limited.

lmktfy · 2026-03-23T21:19:18Z

layouts/shortcodes/sigs-list.html

+  </div>
+</div>
+
+<script>


nit: I'd put this script inside assets/js and load it at site build time.

(can use layouts/partials/hooks/head-end.html for that, if we want)

Want to load a script conditionally? .HasShortcode helps.

lmktfy · 2026-03-23T21:27:51Z

layouts/shortcodes/sigs-list.html

+                    <h5 class="fw-bold mb-0 text-primary h6">
+                      <a href="/community/community-groups/wg/{{ .dir | replaceRE "^sig-" "" | replaceRE "^wg-" "" }}/" class="text-decoration-none text-primary">WG {{ .name }}</a>
+                    </h5>
+                    <a href="https://github.com/kubernetes/community/tree/master/{{ .dir }}" class="text-muted" title="View Source"><i class="fab fa-github"></i></a>


nit: extract the name of the default branch, master, to a variable at the top of this shortcode file.

lmktfy · 2026-03-23T21:27:56Z

layouts/shortcodes/sigs-list.html

+                    <h5 class="fw-bold mb-0 text-primary h6">
+                      <a href="/community/community-groups/committees/{{ .dir | replaceRE "^sig-" "" | replaceRE "^committee-" "" }}/" class="text-decoration-none text-primary">{{ .name }}</a>
+                    </h5>
+                    <a href="https://github.com/kubernetes/community/tree/master/{{ .dir }}" class="text-muted" title="View Source"><i class="fab fa-github"></i></a>


nit: extract the name of the default branch, master, to a variable at the top of this shortcode file.

lmktfy · 2026-03-23T21:28:10Z

content/en/community/community-groups/_content.gotmpl

@@ -0,0 +1,168 @@
+{{/* content/en/community/community-groups/_content.gotmpl */}}
+
+{{ $sigsUrl := "https://raw.githubusercontent.com/kubernetes/community/master/sigs.yaml" }}


nit: extract the name of the default branch, master, to a separate variable.

lmktfy · 2026-03-23T21:29:08Z

layouts/shortcodes/sigs-list.html

+        tag.classList.replace('text-primary', 'text-white');
+      } else {
+        tag.classList.replace('bg-opacity-100', 'bg-opacity-10');
+        tag.classList.replace('text-white', 'text-primary');


nit: avoid using presentation classes in this kind of script; it means that if we ever add dark mode, we need some basic JavaScript skills in the mix,

lmktfy · 2026-03-23T21:32:40Z

content/en/community/community-groups/_index.md

+  A list of our community groups: Special Interest Groups, Working Groups and Committees.
+weight: 99
+type: docs
+aliases: [ "/groups", "/sigs" ]


This clashes with aliases: [ "/sigs" ] for content/en/community/community-groups/sigs/_index.md

Avoid having two different pages that both say that a different URL is an alias for themselves.

TineoC

Starting review...

TineoC · 2026-03-23T21:58:14Z

content/en/community/community-groups/_index.md

+  A list of our community groups: Special Interest Groups, Working Groups and Committees.
+weight: 99
+type: docs
+aliases: [ "/groups", "/sigs" ]


[MEDIUM] The alias /sigs is defined in both this file and content/en/community/community-groups/sigs/_index.md. This will lead to unpredictable redirect behavior. Choose one location (preferably the SIGs index page) for the /sigs alias.

TineoC · 2026-03-23T21:58:39Z

content/en/community/community-groups/_content.gotmpl

+      {{ end }}
+    {{ end }}
+
+    {{ $page := dict


[HIGH] Fetching remote resources (READMEs and Charters) within a range loop over dozens of groups will significantly increase build times, especially on CI or when the cache is empty. Consider fetching only the main sigs.yaml and using it to generate links, or optimize by minimizing the number of remote calls if possible. Additionally, ensure consistent error handling across SIGs, WGs, and Committees.

The cache, if we add it, should be enough.

I've added a getresource configuration to our Hugo.yaml's internal caching block with a maxAge of 2h. Since resources.GetRemote automatically utilizes this cache.

Let me know if you would like to change this.

TineoC · 2026-03-23T21:58:53Z

layouts/shortcodes/sigs-list.html

+    {{ if eq $showOnly "all" }}
+    <!-- Navigation Area -->
+    <div class="col-lg-12 mb-3">
+      <div class="nav nav-pills shadow-sm rounded bg-white p-2 border flex-nowrap overflow-auto justify-content-lg-center" id="sigsTab" role="tablist" style="scrollbar-width: none; -ms-overflow-style: none;">


[MEDIUM] The use of scrollbar-width: none; -ms-overflow-style: none; effectively hides the scrollbar across all browsers. While it maintains a clean aesthetic, it can result in a confusing user experience on mobile devices where the horizontal scroll of the nav pills is not immediately apparent to the user.

TineoC · 2026-03-23T21:59:07Z

layouts/shortcodes/sigs-list.html

+        wrapper.classList.remove('d-none');
+      } else {
+        wrapper.classList.add('d-none');
+      }


[LOW] The inline script for search and filtering has grown to over 100 lines. To maintain readability and potentially reuse this logic, consider moving the JavaScript to a separate file (e.g., in static/js/) and including it via head-end.html or another partial.

TineoC · 2026-03-23T21:59:21Z

layouts/shortcodes/sigs-list.html

+          <div class="input-group input-group-sm border rounded flex-grow-1" style="max-width: 300px;">
+            <span class="input-group-text bg-white border-0"><i class="fas fa-search"></i></span>
+            <input type="text" id="sigSearchInput" class="form-control border-0" placeholder="Type name, tag, area..." aria-label="Search">
+          </div>


[MEDIUM] The filter bar should include more descriptive ARIA labels to assist users with screen readers. For example, adding aria-label='Filter community groups by name or tag' to the search input and ensuring the topic tags have appropriate roles or labels.

TineoC

📋 Review Summary

The PR successfully modernizes the community groups section with Hugo Content Adapters and a responsive grid layout. However, there are significant performance concerns regarding remote resource fetching and a critical alias clash that needs to be resolved before merging.

🔍 General Feedback

Performance: The current approach of fetching READMEs and Charters for 50+ groups during the Hugo build will likely lead to slow build times and CI timeouts. Consider linking to external READMEs or optimizing the fetching logic.
Alias Clash: The /sigs alias is duplicated, which can cause unpredictable routing.
Mobile UX: The hidden scrollbars on nav pills hinder discoverability of content on smaller screens.
Accessibility: Enhancing ARIA labels in the filter bar will improve the experience for screen reader users.

TineoC · 2026-03-23T22:01:07Z

Thanks! It's impressive.

I can spot a lot of minor problems, but actually the main thing that gets in the way of adding LGTM is the mobile-viewport rendering.

See this video to illustrate what is wrong: Scroll behavior

I think we should improve that before we merge. The other nits and minor feedback, you can fix if you feel you'd like to. I recommend fixing at least the alias clash.

Thank you.

Please re-attach this video, is giving me 404

* Resolve duplicate '/sigs' alias conflict. * Optimize build performance by linking to READMEs/Charters on GitHub instead of remote fetching. * Implement custom layout for SIG/WG pages to display metadata and GitHub links. * Improve accessibility with better ARIA labels in the filter bar. * Enhance mobile UX by removing hidden scrollbars and externalizing JavaScript.

* Remove redundant ignores from .gitignore and community/.gitignore * Move canonical link and script to head-end.html hook * Use generic .active class for topic tags with SCSS styles * Extract master branch variable to reduce hardcoding * Add caching support and optional token for resources.GetRemote * Rename show_only wg to wgs for consistency

TineoC · 2026-03-23T22:28:05Z

@lmktfy Do you want to add the token before merging these changes?

If so, I would set a hold, and please tag anyone who could help with this.

* Update content adapter to fetch READMEs and Charters with caching. * Update community layout to prioritize embedded content. * Add navigation link to Charter sub-page if generated.

lmktfy · 2026-03-24T08:17:04Z

add the token before merging these changes?

Not needed IMO. It's worth you knowing that we could, but it isn't required.

What happens with the build if the GET returns 429? We should (again, my opinion) aim to fail the whole build rather than publish a partial site.

…allback to permalink.

…calURL` parameter casing.

k8s-ci-robot added kind/feature Categorizes issue or PR as related to a new feature. sig/contributor-experience Categorizes an issue or PR as relevant to SIG Contributor Experience. labels Feb 13, 2026

k8s-ci-robot requested review from johnbelamaric and natalisucks February 13, 2026 05:15

k8s-ci-robot added size/L Denotes a PR that changes 100-499 lines, ignoring generated files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. labels Feb 13, 2026

TineoC changed the title ~~feat: improve SIGs and community groups directory layout~~ feat: improve SIGs and community groups layout Feb 13, 2026

TineoC closed this Feb 13, 2026

TineoC reopened this Feb 15, 2026

k8s-ci-robot added the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Feb 15, 2026

k8s-ci-robot removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Feb 20, 2026

k8s-ci-robot added the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Feb 21, 2026

TineoC added a commit to TineoC/contributor-site that referenced this pull request Mar 22, 2026

Cleanup: remove User Groups as they are no longer used by the k8s pro…

a1891a0

…ject This addresses kubernetes#653 and prepares for kubernetes#654

TineoC changed the title ~~feat: improve SIGs and community groups layout~~ feat(sigs): dynamic grid layout and content adapters modernization Mar 22, 2026

TineoC force-pushed the improve-sigs-layout branch from 02785dc to 9d392a0 Compare March 22, 2026 16:57

k8s-ci-robot added size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. and removed size/L Denotes a PR that changes 100-499 lines, ignoring generated files. labels Mar 22, 2026

TineoC force-pushed the improve-sigs-layout branch from 9d392a0 to 49296d4 Compare March 22, 2026 17:00

feat(community): implement dynamic community groups with Hugo content…

3b3b615

… adapters and SEO improvements

TineoC force-pushed the improve-sigs-layout branch from 49296d4 to 3b3b615 Compare March 22, 2026 17:01

k8s-ci-robot removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Mar 22, 2026

lmktfy reviewed Mar 23, 2026

View reviewed changes

TineoC commented Mar 23, 2026

View reviewed changes

TineoC added 3 commits March 23, 2026 18:13

refactor(community): final minor improvements to caching and head hooks

ca114de

TineoC added 3 commits March 23, 2026 18:34

feat(community): restore embedded content for groups

9df1182

* Update content adapter to fetch READMEs and Charters with caching. * Update community layout to prioritize embedded content. * Add navigation link to Charter sub-page if generated.

fix(community): use main branch for remote resources and fix 404s

b751eb5

fix(community): fix Hugo template syntax error in content.html

1fb4048

TineoC added 3 commits March 24, 2026 09:10

feat: allow overriding canonical URL with Params.canonicalUrl and f…

303ba76

…allback to permalink.

feat: add getresource cache configuration

f2d1200

refactor: simplify canonical URL generation logic and correct `canoni…

c92cbea

…calURL` parameter casing.

		@@ -0,0 +1,168 @@
		{{/* content/en/community/community-groups/_content.gotmpl */}}

		{{ $sigsUrl := "https://raw.githubusercontent.com/kubernetes/community/master/sigs.yaml" }}

Conversation

TineoC commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

k8s-ci-robot commented Feb 13, 2026

Uh oh!

TineoC commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TineoC commented Feb 15, 2026

Uh oh!

TineoC commented Feb 15, 2026

Uh oh!

TineoC commented Feb 20, 2026

Uh oh!

lmktfy commented Feb 21, 2026

Uh oh!

TineoC commented Feb 21, 2026

Uh oh!

TineoC commented Mar 22, 2026

Uh oh!

lmktfy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TineoC Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TineoC left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TineoC left a comment

Choose a reason for hiding this comment

📋 Review Summary

🔍 General Feedback

Uh oh!

TineoC commented Feb 13, 2026 •

edited

Loading

TineoC commented Feb 13, 2026 •

edited

Loading

TineoC Mar 24, 2026 •

edited

Loading

TineoC commented Mar 23, 2026 •

edited

Loading