Product Directory Refresh #18133
Product Directory Refresh #18133
Conversation
hturan
requested review from
a team,
GregBrimble,
KianNH,
WalshyDev,
haleycode,
kristianfreeman,
marciocloudflare,
maxvp and
pedrosousa
as code owners
There was a problem hiding this comment.
Lots of room for us to de-dupe this and ModelCatalog in the future. Left it be for now until we tackle a third instance of this pattern.
github-actions
bot
assigned
GregBrimble,
haleycode,
KianNH,
kristianfreeman,
marciocloudflare,
maxvp,
pedrosousa and
WalshyDev
| import { getCollection, type CollectionEntry } from "astro:content"; | ||
| import { ThreeCardGrid, LinkCard } from "~/components"; | ||
| // @ts-ignore virtual module | ||
| import iconCollection from "virtual:astro-icon"; |
There was a problem hiding this comment.
I got 90% of the way through this work and then realised we have no good way to render icon / SVGs in react, and astro-icon does some interesting integration/optmimization under the hood. This code here replicates a little of what the Icon component does (https://github.com/natemoo-re/astro-icon/blob/531db17ec5367e22df7958d8f7abdeb880d8342b/packages/core/components/Icon.astro#L92) but just passes optimised SVG path data (as a string) through to React to render.
There was a problem hiding this comment.
I originally had this in the jsx component, but due to how Astro works it was trying to import node modules into the client-side and breaking.
There was a problem hiding this comment.
I also tried directly importing the icons (using import URLs), but you can't style SVG when used as an img src.
Deploying cloudflare-docs with
|
| Latest commit: |
0dfacf2
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b2649889.cloudflare-docs-7ou.pages.dev |
| Branch Preview URL: | https://hturan-products-directory.cloudflare-docs-7ou.pages.dev |
KianNH
left a comment
KianNH
left a comment
There was a problem hiding this comment.
Awesome work, the styling is perfect! This looks great.
I found a few small issues which are hopefully quick fixes.
* Update Products directory * Fix changes to 1.1.1.1 icon * Fixed client-side node imports * Added dark colors * Design tweaks for truncated product names * Fix types, add category deep-links
10 participants
Summary
This PR gives a visual and functional refresh to the Products page (https://developers.cloudflare.com/products), including iconography, product descriptions, and the ability to search.
Screenshots (optional)
Documentation checklist