Blog revitalization: homepage section, post tagging, and landing page by vdemeester · Pull Request #705 · tektoncd/website

vdemeester · 2026-03-10T18:07:36Z

Changes

Revitalize the blog presence on tekton.dev by adding blog visibility to the homepage, categorizing all existing posts with tags, displaying tags across all blog views, and improving the blog landing page.

What this PR does

1. Homepage: "Latest from the Blog" section

New Hugo shortcode (layouts/shortcodes/recent-blog-posts.html) that renders the 3 most recent blog posts as cards
Each card shows: date, tag badges, title (linked), description excerpt, and author
Includes a "View all posts" call-to-action button linking to /blog/
Cards have hover animation styling consistent with the Docsy theme
Inserted between the features and partners sections on the homepage

2. Blog post tagging (all 11 posts)

All existing blog posts now have descriptive tags in their front matter:

release: v1.0.0, v1.9.0 LTS, GHCR migration
security: SLSA 2, HTTP resolver digest verification, Chains signing secrets
tutorial: distributed traces, container image build caching
deep-dive: Tekton Pruner
community: graduation, cdCon + GitOpsCon
Component tags: pipelines, chains, pruner, infrastructure, events

3. Tags displayed across all blog views

Tags are rendered as badges in three places:

Homepage cards — light badges next to the date
Blog list page (/blog/) — primary badges next to the date/section info (overridden Docsy blog/list.html)
Individual blog posts — primary badges below the author/date byline (overridden Docsy blog/content.html)

4. Blog landing page improvement

Added a description and intro text to content/en/blog/_index.md
Includes a call-to-action for blog contributions linking to the blog guidelines

Why

The blog currently has zero visibility on the homepage — it is only accessible via a nav link. This is a missed opportunity since the blog has quality content (release announcements, security deep dives, tutorials). This is Phase 1 of the tekton.dev website revitalization effort.

Files changed

layouts/shortcodes/recent-blog-posts.html — new homepage blog shortcode
layouts/blog/content.html — overridden Docsy template for blog post tag display
layouts/blog/list.html — overridden Docsy template for blog list tag display
assets/scss/_styles_project.scss — card hover effects and tag badge styling
content/en/_index.html — homepage shortcode insertion
content/en/blog/_index.md — improved blog landing page
content/en/blog/**/index.md — tags added to all 11 blog posts

Submitter Checklist

These are the criteria that every PR should meet, please check them off as you
review them:

Includes docs (if user facing)
Commit messages follow commit message best practices

See the contribution guide
for more details.

Revitalize the blog presence on tekton.dev: - Add a 'Latest from the Blog' section to the homepage showing the 3 most recent posts as cards with title, date, tags, description, and author, plus a 'View all posts' CTA button - Tag all 11 existing blog posts with descriptive categories: release, security, tutorial, deep-dive, community, and component-specific tags (pipelines, chains, pruner, etc.) - Display tags as badges on blog post pages and the blog list - Improve the blog landing page with a description and a call-to-action for blog contributions Implemented via Hugo shortcode (recent-blog-posts.html) and overridden Docsy blog templates (content.html, list.html).

afrittoli

Thank you!!
/approve

afrittoli · 2026-03-12T11:04:14Z

NIT: we may miss new updates from future Docsy versions with this, but not big deal

afrittoli · 2026-03-12T11:06:58Z

I think I've seen this type of list on other websites, perhaps it's a good candidate for submission upstream in https://github.com/google/docsy as well :)

twoGiants

Great job! Looks good! Great PR description by the way. 😺 👍

This one is not working: _Added a description and intro text to content/en/blog/index.md.

See my comment below.

twoGiants · 2026-03-14T15:33:27Z

+Stay up to date with the latest Tekton developments. Our blog features release announcements,
+security best practices, tutorials, and insights from contributors across the ecosystem.
+
+**Want to contribute a post?** Check out our [blog guidelines](/docs/contribute/blog-guidelines/)
+to learn how to submit your article.


This is not shown in the blog page layouts/blog/list.html. You need to add {{ .Content }} to it.

You can add it to list.html above {{- if .Pages -}}.

<div class="col-12"> {{ with .Content }} <div class="mb-4"> {{ . }} </div> {{ end }} {{- if .Pages -}}

twoGiants · 2026-03-14T15:48:42Z

Are you adding this file and list.html because upgrading our docsy to the latest release is not straight forward? We're on 0.6 and in 0.7 there were breaking changes, other than that the releases look ok => https://github.com/google/docsy/releases?page=1

This file looks similar to td-conten.html from docsy main branch.

twoGiants · 2026-03-14T16:03:44Z

/hold

twoGiants · 2026-03-14T16:03:57Z

/approve

twoGiants · 2026-03-14T16:04:04Z

/unhold

twoGiants

Found a few more things! 😸

twoGiants · 2026-03-14T18:29:10Z



+/* Blog cards on homepage */
+.card.shadow-sm {


Maybe just minor.

This is overly broad and will style every bootstrap card anywhere with shadow. I'd add an extra .blog-card to the div and use here to scope the css.

twoGiants · 2026-03-14T18:32:06Z

+	</div>
+	{{ end }}
+	<header class="article-meta">
+		{{ partial "taxonomy_terms_article_wrapper.html" . }}


I think you can remove this. It's not rendered because config.yaml has disableKinds: [taxonomy, taxonomyTerm].

twoGiants · 2026-03-14T18:36:14Z

+    .badge-light {
+        background-color: #e9ecef;
+        font-weight: normal;
+        font-size: 0.75rem;
+    }


Remove unused CSS or maybe it was forgotten to be used on the badge in recent-blog-posts.html?

I tried using it and it looks bad. The darker is badge-light.

twoGiants · 2026-03-14T18:42:50Z

+            </div>
+            <h5 class="card-title">
+              <a href="{{ .RelPermalink }}" class="text-dark">
+                {{ .Params.linkTitle | default .Title }}


You can use a build in method here => https://gohugo.io/methods/page/linktitle/

Suggested change

{{ .Params.linkTitle | default .Title }}

{{ .LinkTitle }}

tekton-robot · 2026-03-14T18:43:18Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: afrittoli

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

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~OWNERS~~ [afrittoli]

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

- Scope .card.shadow-sm CSS selector to .blog-card to avoid styling all bootstrap cards globally - Add {{ .Content }} to blog list.html so _index.md description and intro text are rendered on the blog landing page - Remove taxonomy_terms_article_wrapper.html partial from content.html and list.html since taxonomies are disabled in config.yaml - Use Hugo built-in .LinkTitle method instead of manual .Params.linkTitle | default .Title in recent-blog-posts shortcode - Add comment on .badge-outline-primary CSS class for clarity

vdemeester · 2026-04-09T13:54:02Z

I think I'll close, see tektoncd/community#1268 and #717

tekton-robot requested review from AlanGreene and afrittoli March 10, 2026 18:07

tekton-robot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Mar 10, 2026

vdemeester force-pushed the blog-homepage-revitalization branch from 42cbbab to c689ef7 Compare March 10, 2026 18:11

vdemeester force-pushed the blog-homepage-revitalization branch from c689ef7 to aa7e435 Compare March 10, 2026 18:21

afrittoli reviewed Mar 12, 2026

View reviewed changes

tekton-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Mar 12, 2026

twoGiants self-assigned this Mar 14, 2026

twoGiants approved these changes Mar 14, 2026

View reviewed changes

tekton-robot added the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Mar 14, 2026

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

twoGiants requested changes Mar 14, 2026

View reviewed changes

vdemeester closed this Apr 9, 2026

vdemeester deleted the blog-homepage-revitalization branch April 9, 2026 13:54

Conversation

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

Uh oh!

Changes

What this PR does

1. Homepage: "Latest from the Blog" section

2. Blog post tagging (all 11 posts)

3. Tags displayed across all blog views

4. Blog landing page improvement

Why

Files changed

Submitter Checklist

Uh oh!

afrittoli 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!

twoGiants left a comment • 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!

twoGiants commented Mar 14, 2026

Uh oh!

twoGiants commented Mar 14, 2026

Uh oh!

twoGiants commented Mar 14, 2026

Uh oh!

twoGiants 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!

tekton-robot commented Mar 14, 2026

Uh oh!

vdemeester commented Apr 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vdemeester commented Mar 10, 2026 •

edited

Loading

twoGiants left a comment •

edited

Loading