Consolidate Card component - #3366
Conversation
…lated Card now supports an optional `icon` prop as an alternative to imgSrc/imgAlt (mutually exclusive via a discriminated union), and drops the unused `padded`/`related-topics` variants in favour of a single `featured` variant. IconTile, Related, and the now-unused List/Youtube icons are removed since Card covers their use cases. Updates every existing Card usage that relied on the removed variants (patterns/index.mdx, getting-started.mdx, components.mdx), reuses the shared card styles in ArticleList/main.css instead of separate post-list/related CSS, and renames the .simple-grid/ .simple-grid-3 classes to .col-2/.col-3. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds Docker, Kubernetes, Kustomize, Octopus, Windows, and Yaml icon
components (Docker/Kubernetes/Windows unused for now, added for upcoming
pages). Kubernetes docs now use icon={...} cards instead of logo images
for the Helm/YAML/Kustomize/Octopus UI links.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Replace the Kustomize icon with the new brand mark (white K on a solid tile, layered with translucent background squares). Add an optional monochrome mode to the Octopus icon and a matching iconProps pass-through on Card, then use it on the Kubernetes overview page so the Octopus icon matches the other monochrome icon cards instead of standing out in blue. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Drop the per-usage monochrome opt-in on the Octopus icon and the iconProps pass-through it required on Card. Pushing color control up to call sites just invited an inconsistent blue icon to reappear elsewhere; since Octopus is only ever used as a monochrome icon alongside its siblings (Docker, Kubernetes, Helm, Kustomize, Windows, Yaml), it now always renders with currentColor like the rest of that icon set. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Restructures the Card examples so each variant (default, featured) shows its no-image/image/icon options together, instead of grouping by image type across variants. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Pull request environment is available at https://stoctodocspr3366.z22.web.core.windows.net. You can view the ephemeral environment status in Octopus Deploy. This environment will be automatically deprovisioned when the pull request is closed, or after 7 days of inactivity. |
Resolves duplicate headings, list/table/fence formatting, and trailing newline issues flagged by the Markdown lint job, and adds "evenodd" to the custom dictionary for the new Kubernetes icon's SVG fill-rule. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
|
||
| 7. Save the variable by clicking **Save**. | ||
| 8. In this example, we’ll reference this variable from a **Run a Script** step. | ||
| 8. In this example, we'll reference this variable from a **Run a Script** step. |
There was a problem hiding this comment.
All these will likely conflict with the "mass format" here: #3358
should avoid unrelated docs changes like this in the future.
I would suggest waiting and then specifically calling out this pr what it does and rebasing, did you actually make any docs changes? apart from automatic ones?
There was a problem hiding this comment.
Thanks @enf0rc3
On this page I had only wanted to update the Learn More section to remove the cards it was using, the rest of the changes were automatic ones
There was a problem hiding this comment.
This looks like it's just a copy of helm.svg but in a .astro file.
Can we just commit the SVG itself?
There was a problem hiding this comment.
I need the .astro file in order to specify the icon colour and make sure it respsects the theme.
Claude's technical explanation:
Each path has
fill="currentColor", which lets the icon inherit its color from CSS. That only works if the SVG is inlined in the DOM, which is what the.astrowrapper gives us — loading it as a raw<img src="helm.svg">would break that, sincecurrentColordoesn't work through an image reference.
There was a problem hiding this comment.
Hmm. We do color-theming for images that are part of the interface, like the chevrons on the nav menu, or the toolbar images...
But this is content within an individual page. We have about 2000 png files and we don't have light/dark mode variants of them, wouldn't things like the helm logo fall in that bucket?
| description="Learn more about how you can use Octopus variables for Helm values in our Helm documentation." | ||
| imgAlt="Helm logo" | ||
| imgSrc="/docs/img/helm-logo.png" | ||
| icon={Helm} |
There was a problem hiding this comment.
One thing which bit me about this kind of thing. Referencing an image directly as a component causes it to be emitted directly into the HTML output.
It's only referenced one time in the document, so it isn't a big deal, but if the image were referenced, say, 10 times, we'd end up with 10 duplicates of the image which makes the HTML larger and correspondingly slower for the end user (and terrible for LLM's if they happened to consume the HTML variant of the page). I did this by accident with the chevrons in the nav-list. There were dozens of them 🤦
Except for niches I think we'd be better off to reference images via svg/png files rather than inlining the HTML
There was a problem hiding this comment.
I got Claude to fix this (pushed in the latest commit) so icon now takes the URL of an SVG file instead of a component. I've removed the .astro icon files I introduced 🙂
The card component still supports themed icons (this is a deliberate design decision) but I've added a branded variant that preserves the colours in the source SVG file. This can be used for logos:
Removes standalone icon Astro components in favor of raw SVGs referenced directly by Card, and adds/resizes the octopus logo asset. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
4 participants
Card component
Cardinto a single component:icon/imgSrcvariantsfeaturedvariant that can be used on homepage to emphasise content (has larger title and description).paddedandrelated-topicsvariants.IconTilecomponent → now fully covered byCard.Relatedcomponent.ArticleListto use card styling → this also isn't currently in use but I left it in place for now.Important
I relied on Claude to fully remove the
RelatedandIconTilecomponents, and to updateArticleListto use card styling.Default size
Featured size
Updated pages
Patterns
deployments/patterns updated to use card with no icon or image.
Variables
projects/variables/getting-started replaced card with normal list.
Kubernetes
kubernetes updated to icon variant.
Components showcase
components updated with new card showcase.
Icons