Skip to content

Commit 4e68d70

Browse files
mariomarcolongomariomarcolongo
committed
refactor: update resource breadcrumbs, improve organization URL resolution, and restyle the Open Science badge embed section
1 parent 5d6484b commit 4e68d70

1 file changed

Lines changed: 33 additions & 24 deletions

File tree

‎src/app/resource/[slug]/page.js‎

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ export default function ResourcePage({ params }) {
169169
<span className="text-gray-400">/</span>
170170
</li>
171171
<li>
172-
<Link href="/explore" className="text-blue-600 hover:underline">
172+
<Link href="/resources" className="text-blue-600 hover:underline">
173173
Catalogue
174174
</Link>
175175
</li>
@@ -200,20 +200,25 @@ export default function ResourcePage({ params }) {
200200
)}
201201
<p className="mt-2 text-lg text-gray-600">by {resource.organizations ? resource.organizations.map((o, i) => (
202202
<span key={i}>
203-
{o.wikidataId || o.rorId ? (
204-
<span className="inline-flex items-center gap-2">
205-
<a href={o.rorId || `https://www.wikidata.org/wiki/${o.wikidataId}`} target="_blank" rel="noopener noreferrer" className="hover:text-blue-600 hover:underline">
206-
{o.name}
207-
</a>
208-
{o.rorId && (
209-
<a href={o.rorId} target="_blank" rel="noopener noreferrer" title="View on Research Organization Registry (ROR)" className="text-[10px] text-blue-500 hover:text-blue-700 bg-blue-50 px-1.5 py-0.5 rounded border border-blue-100 uppercase font-bold tracking-tighter">
210-
ROR
203+
{(() => {
204+
const rorUrl = o.rorId && o.rorId !== 'IGNORE' ? (o.rorId.startsWith('http') ? o.rorId : `https://ror.org/${o.rorId}`) : null;
205+
const orgUrl = rorUrl || (o.wikidataId ? `https://www.wikidata.org/wiki/${o.wikidataId}` : null);
206+
207+
return orgUrl ? (
208+
<span className="inline-flex items-center gap-2">
209+
<a href={orgUrl} target="_blank" rel="noopener noreferrer" className="hover:text-blue-600 hover:underline">
210+
{o.name}
211211
</a>
212-
)}
213-
</span>
214-
) : (
215-
o.name
216-
)}
212+
{rorUrl && (
213+
<a href={rorUrl} target="_blank" rel="noopener noreferrer" title="View on Research Organization Registry (ROR)" className="text-[10px] text-blue-500 hover:text-blue-700 bg-blue-50 px-1.5 py-0.5 rounded border border-blue-100 uppercase font-bold tracking-tighter">
214+
ROR
215+
</a>
216+
)}
217+
</span>
218+
) : (
219+
o.name
220+
);
221+
})()}
217222
{i < resource.organizations.length - 1 ? '; ' : ''}
218223
</span>
219224
)) : ''}</p>
@@ -387,7 +392,7 @@ export default function ResourcePage({ params }) {
387392
)}
388393

389394
{/* Metadata & Open Data */}
390-
<div className="mt-12 pt-8 border-t border-gray-200 bg-gray-50 -mx-8 -mb-8 p-8 rounded-b-lg">
395+
<div className="mt-12 pt-10 border-t border-gray-200 bg-gray-50 -mx-8 p-8 md:px-10">
391396
<h3 className="text-xl font-semibold text-gray-900 mb-6 flex items-center">
392397
<FaDatabase className="mr-2 text-blue-600" /> Open Data & Metadata
393398
</h3>
@@ -465,24 +470,28 @@ export default function ResourcePage({ params }) {
465470
</div>
466471
</div>
467472
</div>
473+
</div>
468474

469-
<div className="mt-8 bg-white border border-gray-200 p-6 rounded-md">
470-
<h4 className="text-lg font-semibold text-gray-800 mb-2">Showcase your commitment to Open Science</h4>
471-
<p className="text-sm text-gray-600 mb-4">Embed this badge on your project&apos;s website to showcase your commitment to open science and provide an official link to your public dataset record.</p>
472-
<div className="bg-gray-50 border border-gray-200 p-4 rounded-md flex flex-col md:flex-row items-center justify-between gap-4">
473-
<img src={`/api/badge/${resource.id}`} alt="Dataset Status Badge" className="h-5" />
474-
<div className="text-xs font-mono text-gray-500 break-all w-full text-center md:text-left selection:bg-blue-100">
475+
{/* Institutional Badge Embed */}
476+
<div className="bg-white border-t border-gray-200 -mx-8 -mb-8 p-8 md:px-10 rounded-b-lg">
477+
<div className="bg-indigo-50 border border-indigo-100 p-8 rounded-xl shadow-sm">
478+
<h4 className="text-lg font-bold text-indigo-950 mb-2">Showcase your commitment to Open Science</h4>
479+
<p className="text-sm text-indigo-800 mb-6 opacity-90">Embed this badge on your project&apos;s website to showcase your commitment to open science and provide an official link to your public dataset record.</p>
480+
481+
<div className="bg-white border border-indigo-100 p-5 rounded-lg flex flex-col md:flex-row items-center justify-between gap-5 shadow-sm">
482+
<img src={`/api/badge/${resource.id}`} alt="Dataset Status Badge" className="h-6" />
483+
<div className="text-xs font-mono text-gray-500 break-all w-full text-center md:text-left selection:bg-indigo-100 px-2">
475484
{`[![Indexed by Yourself to Science](https://yourselftoscience.org/api/badge/${resource.id})](https://yourselftoscience.org/resource/${resource.id})`}
476485
</div>
477486
<CopyButton text={`[![Indexed by Yourself to Science](https://yourselftoscience.org/api/badge/${resource.id})](https://yourselftoscience.org/resource/${resource.id})`} />
478487
</div>
479-
<div className="mt-4 text-sm text-gray-500">
480-
<a href={`mailto:science@yourselftoscience.org?subject=Claim%20Record%3A%20${encodeURIComponent(resource.title)}`} className="text-blue-600 hover:text-blue-800 hover:underline font-medium inline-flex items-center">
488+
489+
<div className="mt-6 text-sm">
490+
<a href={`mailto:science@yourselftoscience.org?subject=Claim%20Record%3A%20${encodeURIComponent(resource.title)}`} className="text-indigo-700 hover:text-indigo-900 hover:underline font-semibold inline-flex items-center">
481491
Are you affiliated with this project? Claim or update this record <FaArrowRight className="ml-2 w-3 h-3" />
482492
</a>
483493
</div>
484494
</div>
485-
486495
</div>
487496
</div>
488497
</div>

0 commit comments

Comments
 (0)