Event page template and Kubecon page #17299

kimberleyamackenzie · 2026-01-27T22:43:52Z

Create a template for event pages that will be reusable across multiple event pages. This is a starting point - as we see how this fits with future events and requirements, I would expect this will shift a little to become more flexible in some places and more rigid in others. Additionally, right now we have quite a bit of styling in the stylesheet for this template because we're fighting against globally applied styles elsewhere; this should also eventually be chipped away at as we transition more pages to the new/templated style.

Also implements a page using the template for Kubecon Europe 2026.

claude · 2026-01-27T22:46:07Z

Documentation Review

I've reviewed the event page template system and KubeCon 2026 page implementation. Overall, this is a well-structured templating system with good documentation. Here are my findings:

Issues Found

1. Missing trailing newline in deleted file

File: layouts/page/kubecon.html (line 582 in diff)

The deleted file doesn't end with a newline character (note the "No newline at end of file" indicator in the diff)
While this file is being deleted, it's worth noting for context

2. Incorrect file reference in documentation

File: EVENT-PAGE-TEMPLATE-GUIDE.md (line 261)

References layouts/page/kubecon.html as "Main event page layout"
However, kubecon.html was deleted and replaced with event-page.html
Fix: Update line to reference layouts/page/event-page.html instead

3. Heading capitalization inconsistencies

File: EVENT-PAGE-TEMPLATE-GUIDE.md

Multiple H2 headings use Title Case instead of Sentence case:

Line 19: "How It Works" → "How it works"
Line 26: "Available Widgets" → "Available widgets"
Line 209: "Creating a New Event Page" → "Creating a new event page"
Line 248: "Icon Colors" → "Icon colors"
Line 257: "File Locations" → "File locations"
Line 278: "Benefits of This Architecture" → "Benefits of this architecture"

According to STYLE-GUIDE.md, H2 and deeper headings should use Sentence case.

4. Redundant "Benefits" sections

File: EVENT-PAGE-TEMPLATE-GUIDE.md (lines 278-295)

Two separate "Benefits" sections exist: "Benefits of This Architecture" (line 278) and "Benefits" (line 287)
The content overlaps significantly - both discuss consistency, maintainability, flexibility, and DRY principles
Recommendation: Consolidate these into a single section to eliminate redundancy

5. Grammar: Extra space in testimonial attribution

File: content/kubecon/_index.md (line 444)

author: " — Platform Engineering Team, BMW"

Has a leading space before the em dash
Fix: Remove the leading space: author: "— Platform Engineering Team, BMW"

6. Empty title field in testimonial

File: content/kubecon/_index.md (line 445)

title: ""

The title field is empty
Recommendation: Remove the empty title: field entirely rather than leaving it as an empty string

7. TBD placeholders in content

File: content/kubecon/_index.md (lines 303, 325, 458)

Multiple "[TBD]" placeholders for booth number throughout the page
Note: These should be filled in before the page goes live, but are acceptable for a draft/early version

8. Alt text best practice note

File: Multiple template files

Several templates use image_alt with a default fallback to title (e.g., {{ $imageAlt := .image_alt | default $title }})
While functional, page titles are often not descriptive enough for accessibility
Recommendation: The guide should emphasize that alt text should describe what's visually in the image, not just repeat the title

Positive Observations

✓ Well-structured, modular template system with clear separation of concerns
✓ Comprehensive documentation with examples for each widget type
✓ Good use of Hugo partials and parameterization
✓ Responsive design considerations in templates (mobile-first approach)
✓ Proper markdown support in descriptions via markdownify
✓ Clean SCSS organization with mixins for consistent styling
✓ Accessibility considerations (alt text parameters, semantic HTML)
✓ Font Awesome icon integration is straightforward
✓ Good use of Tailwind utilities for layout

Summary

This PR introduces a solid foundation for reusable event pages. The main issues are:

Must Fix:

Incorrect file reference in documentation (kubecon.html → event-page.html)
Multiple H2 headings need correction from Title Case to Sentence case
Redundant "Benefits" sections should be consolidated

Should Fix:

Extra space in testimonial author field
Empty title field in testimonial
TBD placeholders before going live

Consider:

Adding guidance about descriptive alt text vs. title fallbacks

The template system itself is well-designed and the code quality is good. The Hugo templating is clean and the SCSS follows good practices with mixins.

Mention @claude if you'd like me to help fix any of these issues or review additional changes.

pulumi-bot · 2026-01-27T22:50:45Z

Your site preview for commit 2afdefc is ready! 🎉

http://www-testing-pulumi-docs-origin-pr-17299-2afdefce.s3-website.us-west-2.amazonaws.com.

EVENT-PAGE-TEMPLATE-GUIDE.md

content/kubecon/_index.md

vctrfrnndz · 2026-01-28T15:33:07Z

@kimberleyamackenzie Meta Image

content/kubecon/_index.md

Copy changes

SaraDPH · 2026-01-28T15:46:03Z

@kimberleyamackenzie I was going to leave comments, but then I realized they were all copy changes, so I updated them myself. Design feedback was given to @vctrfrnndz

SaraDPH · 2026-01-28T15:48:52Z

@kimberleyamackenzie Meta Image

@vctrfrnndz did you create it on Figma or Canva? Can you share, as we have some book demo / book meeting landing pages that need an image too, that way they all match.

pulumi-bot · 2026-01-28T15:54:17Z

Your site preview for commit 34d93dd is ready! 🎉

http://www-testing-pulumi-docs-origin-pr-17299-34d93ddd.s3-website.us-west-2.amazonaws.com.

content/kubecon/_index.md

SaraDPH · 2026-01-28T16:29:05Z

@kimberleyamackenzie on the quote, BMW appears twice. I can't tell by looking at the file why it happens.

SaraDPH · 2026-01-28T16:33:28Z

Note @kimberleyamackenzie @vctrfrnndz, for event pages, the map is temporary until we have an image that shows where the booth is located in the venue. We currently don't have the booth number, so only that is set will Traci be able to provide the location.

Co-authored-by: Sara <100384099+SaraDPH@users.noreply.github.com>

vctrfrnndz · 2026-01-28T19:35:30Z

Nits:

Would use the logos from the designs (Mercedes and BMW smaller marks). And use similar separation and dimensions (maximum height of 54px, around 100px separation between them).

Same for the design in the customer card, use the smaller mark:

cnunciato · 2026-01-28T19:48:09Z

Ok! One thing I'm seeing is that the size of the copy (which feels like a touch (~.25-.5rem-ish?) too large overall) and the whitespace are somehow conspiring to push the CTAs too far down on the page. Assuming this'll act as a template for others to follow, we'll definitely need those CTAs to end up higher above the fold. Here's how they look on my MacBook, for example:

Compare to, say, an example from Buildkite, which is closer to where we'll need to be in terms where the elements fall on the page:

If it helps, when I Cmd-- twice, I end up closer to where I'd expect — for the hero, but also for most of the other elements on on the page, FWIW (broadly speaking of course):

Thoughts on scaling things down just a notch @vctrfrnndz @kimberleyamackenzie? (I also realize this may conflict with our current theme sizing somewhat relevantly.)

vctrfrnndz · 2026-01-28T19:53:47Z

@cnunciato Agreed, some of these adjustments are already reducing the base text. We can tone down more elements like heading text further!

#17299 (comment)

cnunciato · 2026-01-28T19:57:18Z

@vctrfrnndz Ok great, thanks! Yeah, overall our current design somewhat suffers from how "big" everything is, so bringing it all down a notch or two should help in many ways I think.

Something tells me we might still end up a little too big with those values, but let's see!

cnunciato · 2026-01-28T20:18:27Z

This image also feels like it needs to be larger — in part just to make better use of the space, but more importantly because the text within it is too small to read (and out of proportion with the size of the text around it):

cnunciato · 2026-01-28T21:04:37Z

Two things on this:

I realize this particular issue could totally be handled by shortening the copy, but it's worth thinking through how a design system would handle this. If we think of these as components, and the icons as inline with the text, we'll inevitably hit wrapping-related issues like these at different sizes (and not always know it). Figured I'd raise it up now just as something to think about. For example, on mobile:

The other thing has to do with the icons — and I can't quite put my finger on it. The bot icon doesn't quite carry the right vibe IMO, but we can switch that out easily enough. Maybe it's the spacing between the image and the text (a bit too much?), or that both are flat black, or that by being icons, they call more attention to themselves than they need to, or they make text feel more "indented" (so out of alignment with the copy below it) ... I'm not sure what it is. Somehow, it feels slightly flat, or unbalanced, so it seemed worth mentioning, since I'm sure we'll use this pattern a lot.

cnunciato · 2026-01-28T21:19:05Z

layouts/partials/template-partials/template-location.html

+        </div>
+        <div class="hidden md:block">
+            {{ if $mapEmbed }}
+            <div class="w-full md:max-w-2xl md:h-96">


I like the actual map-embed (as opposed to static image — more useful = better in my book!), but it'd be great to apply the corner treatments in the design (i.e., the roundings) here as well. Possible, with some border and overflow magic maybe?

Also, little thing, but having a spot for a copyable addresses (even if I have to double-click and paste it into my maps app of choice) is always super useful in this context.

cnunciato · 2026-01-28T21:45:08Z

layouts/partials/template-partials/template-hero.html

+            <div class="flex flex-col sm:flex-row items-start gap-4">
+                <a href="{{ $ctaLink }}" class="btn-primary-template-variant inline-flex items-center gap-2">
+                    <span>{{ $ctaText }}</span>
+                    <span>→</span>
+                </a>
+                {{ if $ctaSecondaryText }}
+                <a href="{{ $ctaSecondaryLink }}" class="btn-secondary-template-variant inline-flex items-center gap-2">
+                    <span>{{ $ctaSecondaryText }}</span>
+                    <span>→</span>
+                </a>
+                {{ end }}
+            </div>


The primary button is just a bit too large compared to the secondary — maybe because borders:

pulumi-bot · 2026-01-28T21:52:09Z

Your site preview for commit 37fb07d is ready! 🎉

http://www-testing-pulumi-docs-origin-pr-17299-37fb07dc.s3-website.us-west-2.amazonaws.com.

cnunciato · 2026-01-28T21:53:36Z

This particular it of data (the date and time of the event) needs to stand out more clearly in this context. Somehow with the gray, it's easy to miss, and blends in with the text below it (and the bold doesn't seem to help). Any ideas? Maybe just a darker gray/more contrast?

Not a designer, but going a bit darker (gray-800) and losing the pipe and the slash (which were competing a bit and making it harder to parse) reads a it more clearly to me, but wonder what you think:

cnunciato · 2026-01-28T22:04:23Z

We might still be tweaking these, so apologies if so, but the Deloitte logo seems disproportionally large compared to the others:

Maaaybe something more like this?

kimberleyamackenzie · 2026-01-28T22:11:37Z

Okay, tried some stuff in the latest rev:

I tinkered around with the code image to make it larger, let me know how it feels
Font sizes adjusted per the design tokens @vctrfrnndz shared - I also took the section level descriptions down to 20 from 24px which IMO feels better - @vctrfrnndz let me know your thoughts, or if these were intended to be 18 as well
Decreased vertical spacing a little to help with the CTA below the fold as well
Add a height of 54px to all icons, 100px gap, updated logos to use shortened versions.
Added border radius to the location
Fixed the buttons
Took the feedback about moving the CTA in the cards, and fixed up the date as well
Re the deloitte logo - this is tricky, because all the logos are 54px tall - but because the deloitte one's styling + how it goes flush to the edge, it ends up looking much bigger. As a one off, I would just update this sizing to be smaller (which we could still do here), but there is probably a better solution that involves updating all our logos to come from one place so they can scale more equally. Thoughts @vctrfrnndz ?

Tried to mess around with the icon headers a bit - I suspect @vctrfrnndz's magic is needed here, but I at least made it so that when the text overflows it keeps the icon in its own column

pulumi-bot · 2026-01-28T22:24:15Z

Your site preview for commit 19fd2f0 is ready! 🎉

http://www-testing-pulumi-docs-origin-pr-17299-19fd2f0d.s3-website.us-west-2.amazonaws.com.

SaraDPH · 2026-01-28T22:59:58Z

FYI this section is still missing the CTA buttons

kimberleyamackenzie · 2026-01-28T23:47:23Z

@SaraDPH thanks for the reminder, done!

pulumi-bot · 2026-01-28T23:54:29Z

Your site preview for commit 4b5910d is ready! 🎉

http://www-testing-pulumi-docs-origin-pr-17299-4b5910dd.s3-website.us-west-2.amazonaws.com.

cnunciato · 2026-01-29T02:01:46Z

Thank you @kimberleyamackenzie! It's looking amazing. I'll go through this latest rev tonight and get y'all some feedback for tomorrow.

I may make a few copy-only tweaks (sentence-case-ification, etc.) in the meantime — mind if I push a commit with that?

kimberleyamackenzie · 2026-01-29T03:49:24Z

@cnunciato for sure! push any changes you'd like

cnunciato · 2026-01-30T00:08:02Z

Ok, more feedback for y'all. 💜

First, are these buttons intentionally full-width? Could we maybe adjust them to be sized automatically based on their labels — e.g., more like this?
Can we get a higher-density version of the Neo graphic? It looks a bit lossy to me, even on my non-Retina monitor. PNG would be fine, doesn't have to be an SVG, but higher DPI would add some polish (and make it easier to read).
The hero image still isn't working for me — it just feels like a big purple box with a few words in the middle, and the background photo's too dark and muted to make out easily, so the "community" message we're looking for isn't coming through. I wanna see the humans! 😄 (The page is really about encouraging folks to meet up with us after all.)

Definitely no designer, but we could try splitting it up somehow, with the photo (either full color or monochrome, maybe with a tint, if you wanted to keep closer to the palette) and a card with the info and logo somehow broken out? Or make the lower third an opaque solid to set the info against? Or an opaque mini-card floating above the lower third of the photo somehow? The backpacks aren't all that interesting, so it seems like we could use that space well, and still see the photo. What do you think? Splitting the hero section up into thirds (2:1) might help, too — again just throwing some ideas out there.
Mainly for Vic: For this particular page, would it be possible to carve out some additional space for a few more tertiary links? We realized this morning that this page also gives us an opportunity to invite some engagement ahead the event, like:
- Read the blog
- Join the community → https://slack.pulumi.com
- Try Pulumi (with Kubernetes) → https://www.pulumi.com/docs/iac/get-started/kubernetes/,
In my vague imagination, these are compact cards with smaller rectangular images, but you may have other ideas. Thoughts?
It still feels like there's too much emptiness around the customer logos, especially when wrapped. Here's what it looks like on my MacBook, for example:

The gap is currently set to 100px. What do y'all think about tightening this up to something that fits comfortably on at laptop scale, and still looks good when wrapped? Here's 48px/3rem for example:

I'll also see if I can add a little padding around that Deloitte SVG to drop it down a little (for now).
I like the relative placement these buttons (below the copy), but the gap here feels awkward. I'd expect this one to be closer to here, for example:

I realize just moving it up in isolation would create a different problem (gap between the button and the lower edge of the card), but honestly this doesn't look too bad to me:

It's is a common-enough thing, though (i.e., variable-height cards), that we'll probably need to come up with a generalizable design/solution for it somehow.
Lastly, this line-spacing feels a little too tight:

I think that's it for now! 😅 I still have some copy changes to make, but we're close!

pulumi-bot · 2026-01-30T02:24:02Z

Your site preview for commit d66522d is ready! 🎉

http://www-testing-pulumi-docs-origin-pr-17299-d66522d9.s3-website.us-west-2.amazonaws.com.

cnunciato · 2026-01-30T21:22:36Z

@vctrfrnndz @kimberleyamackenzie A few more things I noticed when browsing around on mobile and tablet this morning:

The hero image disappears. For this page template but also in general, we'll need a way to show hero images somehow (videos, interactives, etc.) on mobile & tablet. Maybe we could position them below the copy and CTAs? Or above them, but somehow smallified so the CTAs still show "above the fold"? I suspect there's probably enough room to show the copy and image side-by-side on tablets, though. Thoughts?
Button treatments still feel inconsistent, with some centered, left, full-width, auto, inline, stacked. I know I mentioned using label-relative widths on desktop, but on mobile, I think either could work. No strong prefs from me, other than wanting to be intentional and consistent. It'd be good to make a call, though, both to make things work here and then to see how that call holds up for the next set of layouts.
Inline icons in headings, combined with wrapping, still feels — I don't know, like we're close, but not quite there yet with these. Curious what you think. Aligning-top is probably the right thing to do when we do wrap (let me know if you agree), but yeah, something about this still feels unfinished or not quite right that I can't put my finger on. Would love to get y'all's thoughts on it.
Especially on mobile, it feels like there's a lot of empty space between some of these sections, and the gaps feel a bit inconsistent as well, some of which might be due to margins not collapsing on certain elements, and/or transparent spacing around the images (logos, the Neo image). In the past, we've occasionally used horizontal seams or separators or background colors to give things a stronger visual structure, but I don't know. Would love your thoughts on this one as well.

All right, that's it! Pencils down for me. 😇

kimberleyamackenzie added 2 commits January 27, 2026 14:32

Create event page template and styles; implement for Kubecon 2026

457e821

Direct reference template in markdown; remove kubecon file

2afdefc

kimberleyamackenzie temporarily deployed to testing January 27, 2026 22:43 — with GitHub Actions Inactive

kimberleyamackenzie requested review from SaraDPH, cnunciato and vctrfrnndz January 27, 2026 22:57