Skip to content

fix: resolve nested link in project cards #540

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AyushMhaisane wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: resolve nested link in project cards #540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .astro/data-store.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.16.6","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[]},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}"]
2 changes: 1 addition & 1 deletion .astro/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"_variables": {
"lastUpdateCheck": 1759260475499
"lastUpdateCheck": 1767591015673
}
}
1 change: 0 additions & 1 deletion .astro/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
/// <reference types="astro/client" />
/// <reference path="content.d.ts" />
56 changes: 38 additions & 18 deletions src/components/ProjectCard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,24 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
---

<div class="Card-Container">
<a class="Card-Real-Link" href={projectLink} target="_blank">
<div class="Card-Header">
<img
class="Project-Logo"
alt="the framework or language that the project is build upon"
src={logoLink}
onerror="this.src='/default.png'"
width="60"
height="60"
/>
<p class="Card-Title">{name}</p>
</div>
{/* FIX: Changed from <a> to <div>. This acts as the layout wrapper but is not a link itself. */}
<div class="Card-Real-Link">

{/* FIX: Wrapped the Header in its own specific link */}
<a href={projectLink} target="_blank" class="Card-Header-Link">
<div class="Card-Header">
<img
class="Project-Logo"
alt="the framework or language that the project is build upon"
src={logoLink}
onerror="this.src='/default.png'"
width="60"
height="60"
/>
<p class="Card-Title">{name}</p>
</div>
</a>

<div class="Card-Body">
<div class="Card-Tag">
{tags.map((tag) => (
Expand All @@ -37,17 +43,29 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
<div class="Card-Description">
<p>{description}</p>
</div>

{/* Issues load here safely now because they are not inside another <a> tag */}
{loadIssues && (
<IssueList projectLink={projectLink} projectName={name} />
)}
</div>
<div class="Card-Link">

{/* FIX: Changed the Button container from <div> to <a> so it is clickable */}
<a class="Card-Link" href={projectLink} target="_blank">
<span>Go to Project</span>
</div>
</a>
</a>

</div>
</div>

<style>
/* FIX: Added this class to ensure the Header link has no underline/color change */
.Card-Header-Link {
text-decoration: none;
color: inherit;
display: block;
}

.Card-Container {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
Expand Down Expand Up @@ -87,6 +105,7 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
}

.Card-Real-Link {
/* Kept this class for layout, but it is applied to a <div> now */
display: block;
text-decoration: none;
color: inherit;
Expand Down Expand Up @@ -155,7 +174,7 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
margin: 0;
}


/* This class is now applied to an <a> tag */
.Card-Link {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
backdrop-filter: blur(20px);
Expand All @@ -170,6 +189,8 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-decoration: none; /* FIX: Added to remove underline from the button link */
display: block; /* FIX: Added to ensure it behaves like a block inside the flex container */
}

.Card-Link::before {
Expand Down Expand Up @@ -218,5 +239,4 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
font-size: 1.1rem;
}
}
</style>

</style>