feat: enhance resource schema, update badge design with integrated logo, and standardize resource routing to use ID instead of slug

Author: mariomarcolongo

scripts/generateOpenApi.js

@@ -93,7 +93,16 @@ const openApiSchema = {
               "properties": {
                 "name": { "type": "string" },
                 "wikidataId": { "type": ["string", "null"] },
-                "rorId": { "type": ["string", "null"] }
+                "rorId": { "type": ["string", "null"] },
+                "rorName": { "type": ["string", "null"] },
+                "rorTypes": {
+                  "type": "array",
+                  "items": { "type": "string" }
+                },
+                "rorCountry": { "type": ["string", "null"] },
+                "rorCity": { "type": ["string", "null"] },
+                "rorEstablished": { "type": ["string", "null"] },
+                "rorAutoMatched": { "type": "boolean" }
               }
             }
           },
@@ -103,15 +112,33 @@ const openApiSchema = {
               "type": "object",
               "properties": {
                 "title": { "type": "string" },
-                "link": { "type": "string", "format": "uri" }
+                "link": { "type": "string", "format": "uri" },
+                "wikidataId": { "type": ["string", "null"] }
               }
             }
           },
-          "permalink": { "type": ["string", "null"] },
-          "rorTypes": {
+          "instructions": {
+            "type": "array",
+            "items": { "type": "string" }
+          },
+          "macroCategories": {
             "type": "array",
             "items": { "type": "string" }
           },
+          "dataTypeMappings": {
+            "type": "object",
+            "additionalProperties": { "type": ["string", "null"] }
+          },
+          "countryMappings": {
+            "type": "object",
+            "additionalProperties": { "type": ["string", "null"] }
+          },
+          "compensationWikidataId": {
+            "type": ["string", "array", "null"],
+            "items": { "type": "string" }
+          },
+          "permalink": { "type": ["string", "null"] },
+          "isCitedOnWikidata": { "type": "boolean" },
           "wikidataReferenceUrl": { "type": ["string", "null"], "format": "uri" }
         }
       }

scripts/generateResourceJSON.js

@@ -20,8 +20,15 @@ try {
     rorData = JSON.parse(readFileSync(rorPath, 'utf8'));
   } catch(e) {}
 
+  const { dataTypeToMacroCategory } = await import('../src/data/resources.js');
+  
   const enrichedResources = wikidataResources.map(resource => {
-    // Merge ROR data into organizations
+    // 1. Compute Macro Categories (consistent with src/data/resources.js)
+    const macroCategories = Array.from(new Set(
+      (resource.dataTypes || []).map(type => dataTypeToMacroCategory[type]).filter(Boolean)
+    )).sort();
+
+    // 2. Merge ROR data into organizations
     const enrichedOrgs = (resource.organizations || []).map(org => {
       const ror = rorData[org.name];
       if (ror && ror.rorId && ror.name) {
@@ -42,6 +49,7 @@ try {
     return {
       ...resource,
       organizations: enrichedOrgs,
+      macroCategories,
       permalink: `https://yourselftoscience.org/resource/${resource.id}`,
       isCitedOnWikidata: resource.resourceWikidataId ? citedQIDs.has(resource.resourceWikidataId) : false,
       wikidataReferenceUrl: (resource.resourceWikidataId && citedQIDs.has(resource.resourceWikidataId)) ? `https://www.wikidata.org/wiki/${resource.resourceWikidataId}` : null

src/app/api/badge/[slug]/route.js

@@ -1,10 +1,14 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
 import ObjectData from '@/../public/resources_wikidata.json';
 
-export const runtime = 'edge';
+// We remove 'edge' runtime to allow Node.js 'fs' access during the 'next build' 
+// static generation phase for the 'output: export' configuration.
+export const runtime = 'nodejs';
 
 // Optionally statically generate standard badges
 export async function generateStaticParams() {
-  return ObjectData.map((resource) => ({ slug: resource.slug }));
+  return ObjectData.map((resource) => ({ slug: resource.id }));
 }
 
 export async function GET(request, { params }) {
@@ -15,6 +19,17 @@ export async function GET(request, { params }) {
     return new Response('Not Found', { status: 404 });
   }
 
+  // Read official logo content from public directory
+  let logoSvgContent = '';
+  try {
+    const logoPath = join(process.cwd(), 'public/logo-tm.svg');
+    logoSvgContent = readFileSync(logoPath, 'utf8');
+    // Clean up the SVG for nesting: remove XML declaration and doctype
+    logoSvgContent = logoSvgContent.replace(/<\?xml.*\?>/g, '').replace(/<!DOCTYPE.*?>/g, '');
+  } catch (error) {
+    console.error('Failed to read logo-tm.svg:', error);
+  }
+
   // Calculate prestige completeness
   const isComplete = resource.yearLaunched != null && 
                      resource.isActivelyRecruiting != null && 
@@ -25,12 +40,15 @@ export async function GET(request, { params }) {
   const rightText = isComplete ? "Complete Data Source" : "Verified Data Source";
 
   // Approximate width calculation (standard fonts)
-  const leftWidth = 120;
+  const logoWidth = 24;
+  const leftTextWidth = 185; // Increased to fit "Yourself to Science™" comfortably
+  const leftWidth = logoWidth + leftTextWidth;
   const rightWidth = isComplete ? 135 : 130;
   const totalWidth = leftWidth + rightWidth;
 
   // Official Theme Colors
-  const colorLeft = "#1A1C1E"; // m3-on-surface (black title color)
+  const colorLeft = "#ffffff"; // Header match (white)
+  const textColor = "#202124"; // google-text
   // Gold badge vs standard blue badge
   const colorRight = isComplete ? "#FDBB2D" : "#1156B0"; // stroke-yellow-dark / google-blue
 
@@ -40,6 +58,10 @@ export async function GET(request, { params }) {
       <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
       <stop offset="1" stop-opacity=".1"/>
     </linearGradient>
+    <linearGradient id="g" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#ffd92d"/>
+      <stop offset="100%" stop-color="#B35F00"/>
+    </linearGradient>
     <clipPath id="r">
       <rect width="${totalWidth}" height="20" rx="3" fill="#fff"/>
     </clipPath>
@@ -48,11 +70,20 @@ export async function GET(request, { params }) {
       <rect x="${leftWidth}" width="${rightWidth}" height="20" fill="${colorRight}"/>
       <rect width="${totalWidth}" height="20" fill="url(#s)"/>
     </g>
-    <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110">
-      <text aria-hidden="true" x="${leftWidth * 5}" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="${(leftWidth - 20) * 10}">${leftText}</text>
-      <text x="${leftWidth * 5}" y="140" transform="scale(.1)" fill="#fff" textLength="${(leftWidth - 20) * 10}">${leftText}</text>
-      <text aria-hidden="true" x="${(leftWidth + rightWidth / 2) * 10}" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="${(rightWidth - 20) * 10}">${rightText}</text>
-      <text x="${(leftWidth + rightWidth / 2) * 10}" y="140" transform="scale(.1)" fill="#fff" textLength="${(rightWidth - 20) * 10}">${rightText}</text>
+    <g font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110">
+      <!-- Official 'Yourself to Science' Logo Integrated via File Read -->
+      <g transform="translate(4, 2) scale(0.069)">
+        ${logoSvgContent}
+      </g>
+      
+      <g transform="scale(.1)">
+        <text x="${(logoWidth + (leftTextWidth / 2)) * 10}" y="140" fill="${textColor}" text-anchor="middle">
+          <tspan font-weight="500">Your</tspan><tspan fill="url(#g)" stroke="#ffd92d" stroke-width="3" font-weight="bold">self</tspan><tspan font-weight="500"> to Science</tspan>
+          <tspan font-size="70" baseline-shift="super">™</tspan>
+        </text>
+      </g>
+      
+      <text x="${(leftWidth + rightWidth / 2) * 10}" y="140" transform="scale(.1)" fill="#fff" text-anchor="middle" textLength="${(rightWidth - 20) * 10}">${rightText}</text>
     </g>
   </svg>`;
 

src/app/explore/page.js

@@ -492,7 +492,7 @@ export default function ExplorePage() {
                         {col.key === 'title' ? (
                           <div>
                             <Link
-                              href={`/resource/${resource.slug}`}
+                              href={`/resource/${resource.id}`}
                               className="font-medium text-slate-900 hover:text-blue-600 transition-colors group-hover:text-blue-600"
                             >
                               {resource.title}

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

@@ -405,11 +405,11 @@ export default function ResourcePage({ params }) {
               <h4 className="text-lg font-semibold text-gray-800 mb-2">Showcase your commitment to Open Science</h4>
               <p className="text-sm text-gray-600 mb-4">By embedding this verified reference badge on your website, you publicly confirm your project&apos;s transparency metrics and establish your verifiable link to the global knowledge graph monitored by researchers, policy makers, and ecosystem investors.</p>
               <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">
-                <img src={`/api/badge/${resource.slug}`} alt="Dataset Status Badge" className="h-5" />
+                <img src={`/api/badge/${resource.id}`} alt="Dataset Status Badge" className="h-5" />
                 <div className="text-xs font-mono text-gray-500 break-all w-full text-center md:text-left selection:bg-blue-100">
-                  {`[![Verified Source](https://yourselftoscience.org/api/badge/${resource.slug})](https://yourselftoscience.org/resource/${resource.slug})`}
+                  {`[![Verified Source](https://yourselftoscience.org/api/badge/${resource.id})](https://yourselftoscience.org/resource/${resource.id})`}
                 </div>
-                <CopyButton text={`[![Verified Source](https://yourselftoscience.org/api/badge/${resource.slug})](https://yourselftoscience.org/resource/${resource.slug})`} />
+                <CopyButton text={`[![Verified Source](https://yourselftoscience.org/api/badge/${resource.id})](https://yourselftoscience.org/resource/${resource.id})`} />
               </div>
               <div className="mt-4 text-sm text-blue-600">
                 <a href={`mailto:science@yourselftoscience.org?subject=Open%20Science%20Verification%3A%20${encodeURIComponent(resource.title)}`} className="hover:underline font-medium inline-flex items-center">

src/data/resources.js

@@ -1816,7 +1816,7 @@ export const rawResources = [
 ];
 
 
-const dataTypeToMacroCategory = {
+export const dataTypeToMacroCategory = {
   // Organ, Body & Tissue Donation
   'Body': 'Organ, Body & Tissue Donation',
   'Organ': 'Organ, Body & Tissue Donation',
@@ -1846,7 +1846,6 @@ const dataTypeToMacroCategory = {
 
   'Conversational AI data': 'Health & Digital Data',
 
-
   // Clinical Trials
   'Clinical trials': 'Clinical Trials',
 };