Skip to content

fix(website): pass the CSS-module class to homepage feature card links (#323) - #334

Closed
Kshot3000 wants to merge 1 commit into
IntersectMBO:mainfrom
Kshot3000:fix/homepage-feature-card-link-class
Closed

Kshot3000 wants to merge 1 commit into
IntersectMBO:mainfrom
Kshot3000:fix/homepage-feature-card-link-class

Conversation

@Kshot3000

Copy link
Copy Markdown

Fixes #323.

The three homepage feature cards are links, and on hover the browser underline showed through the title and description. The cause is exactly what the issue describes:

  • website/src/components/HomepageFeatures/index.tsx rendered <Link className="featureCardLinks" to={link}> — a plain string.
  • The rule that removes the underline, .featureCardLinks:hover { text-decoration: none; }, lives in styles.module.css, so it is emitted under a hashed class name and the plain string never matches it.

Fix

One line: pass the CSS-module class, as every other class in this component already does:

-      <Link className="featureCardLinks" to={link}>
+      <Link className={styles.featureCardLinks} to={link}>

The card lift and border styles are untouched.

Verification (production build, before / after)

Before, in website/build from main:

  • build/index.html: <a class="featureCardLinks" href="/docs/working-group/">
  • built CSS: .featureCardLinks_kdMv:hover — a different name, so the rule could never apply.

After this change:

  • build/index.html: <a class="featureCardLinks_kdMv" href="/docs/working-group/"> — the same hash the built CSS selector uses, so the hover rule now matches.
  • docusaurus build succeeds and tsc --noEmit is clean.

One environment note: I installed with npm ci --ignore-scripts --no-bin-links and ran the build via node node_modules/@docusaurus/core/bin/docusaurus.mjs build, skipping the prebuild data fetch, so githubData.json is unchanged in this PR.


Independent builder — not affiliated with the Cardano Foundation, IOG or Intersect.

@Kshot9000 (https://x.com/kshot9000) · ADA donations: addr1q8hnl6vl5a6k3rw3n5g3jtte696zcl76kfatzv7gpswa9r0dj7fma6klq55y4ffm7tf0em09udnyhuk4ah92pl5x9jpqjae44v

cc @cardano-foundation @IntersectMBO

IntersectMBO#323)

The Feature component rendered <Link className="featureCardLinks"> as a
plain string, but .featureCardLinks lives in styles.module.css, so the
emitted class is hashed and the plain string never matches it. The
module's .featureCardLinks:hover { text-decoration: none } rule was
therefore dead and the cards showed the browser link underline on hover.

Pass styles.featureCardLinks instead, like every other class in the
component. Verified against production builds: before, build/index.html
carries class="featureCardLinks" while the built CSS selector is
.featureCardLinks_kdMv:hover (no match); after, the anchors carry
class="featureCardLinks_kdMv", the same hash as the selector.
docusaurus build and tsc --noEmit both pass.
@Kshot3000

Copy link
Copy Markdown
Author

Closing this as a duplicate — @IanoNjuguna's #332 landed the identical one-line fix (className={styles.featureCardLinks}) a few minutes after I opened this, and main already contains it, so there is nothing left for this PR to change.

Thanks for the review and approval, @danbaruka — happy to see #323 fixed either way.

— Kyle Cox (@Kshot9000, https://x.com/kshot9000)
ADA: addr1q8hnl6vl5a6k3rw3n5g3jtte696zcl76kfatzv7gpswa9r0dj7fma6klq55y4ffm7tf0em09udnyhuk4ah92pl5x9jpqjae44v
Independent builder — not affiliated with the Cardano Foundation, IOG or Intersect.

@Kshot3000 Kshot3000 closed this Oct 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Home feature cards still show link underlines

2 participants