feat: Refactor homepage filters with dedicated components and improved URL synchronization, update content, and dependencies.

Author: jnton

package-lock.json

@@ -39,10 +39,11 @@
     "country-list": "^2.4.1",
     "debug": "^4.3.7",
     "framer-motion": "^11.11.1",
-    "glob": "^11.0.0",
+    "glob": "^11.1.0",
     "next": "^14.2.5",
     "node-fetch": "^2.6.7",
-    "puppeteer": "^24.4.0",
+    "prop-types": "^15.8.1",
+    "puppeteer": "^24.15.0",
     "react": "^18.2.0",
     "react-country-flag": "^3.1.0",
     "react-dom": "^18.2.0",

package.json

@@ -417,4 +417,3 @@ This page provides a filterable list of all resources. You can also download the
 *Compensation:* Donation
 
 ---
-

public/index.html.md

@@ -1,6 +1,6 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { resources } from '../src/data/resources.js';
 import { EU_COUNTRIES } from '../src/data/constants.js';
 
@@ -17,136 +17,136 @@ function generateStatsMarkdown() {
 
   const resourcesByCountry = resources.reduce((acc, resource) => {
     if (resource.countries && resource.countries.length > 0) {
-      resource.countries.forEach(country => {
+      for (const country of resource.countries) {
         const countryName = country === 'European Union' || EU_COUNTRIES.includes(country) ? 'European Union' : country;
         acc[countryName] = (acc[countryName] || 0) + 1;
-      });
+      }
     } else {
       acc['Worldwide'] = (acc['Worldwide'] || 0) + 1;
     }
     return acc;
   }, {});
 
   const resourcesByDataType = resources.reduce((acc, resource) => {
-      (resource.dataTypes || []).forEach(type => {
-          const baseType = type.startsWith('Wearable data') ? 'Wearable data' : type;
-          acc[baseType] = (acc[baseType] || 0) + 1;
-      });
-      return acc;
+    for (const type of (resource.dataTypes || [])) {
+      const baseType = type.startsWith('Wearable data') ? 'Wearable data' : type;
+      acc[baseType] = (acc[baseType] || 0) + 1;
+    }
+    return acc;
   }, {});
 
   const resourcesByCompensation = resources.reduce((acc, resource) => {
-      const type = resource.compensationType || 'donation';
-      acc[type] = (acc[type] || 0) + 1;
-      return acc;
+    const type = resource.compensationType || 'donation';
+    acc[type] = (acc[type] || 0) + 1;
+    return acc;
   }, {});
 
   const resourcesByEntityType = resources.reduce((acc, resource) => {
-      const category = resource.entityCategory || 'Other';
-      const subType = resource.entitySubType || 'Not Specified';
+    const category = resource.entityCategory || 'Other';
+    const subType = resource.entitySubType || 'Not Specified';
 
-      if (!acc[category]) {
-          acc[category] = { count: 0, subTypes: {} };
-      }
-      acc[category].count++;
-      acc[category].subTypes[subType] = (acc[category].subTypes[subType] || 0) + 1;
-      return acc;
+    if (!acc[category]) {
+      acc[category] = { count: 0, subTypes: {} };
+    }
+    acc[category].count++;
+    acc[category].subTypes[subType] = (acc[category].subTypes[subType] || 0) + 1;
+    return acc;
   }, {});
-  
+
   const topCountries = Object.entries(resourcesByCountry)
-      .sort(([, a], [, b]) => b - a)
-      .slice(0, 10);
+    .sort(([, a], [, b]) => b - a)
+    .slice(0, 10);
 
   const dataTypesDistribution = Object.entries(resourcesByDataType)
-      .sort(([, a], [, b]) => b - a);
+    .sort(([, a], [, b]) => b - a);
 
   const compensationDistribution = Object.entries(resourcesByCompensation)
-      .sort(([, a], [, b]) => b - a);
-  
+    .sort(([, a], [, b]) => b - a);
+
   const entityTypeDistribution = Object.entries(resourcesByEntityType)
-      .map(([name, data]) => ({
-          name,
-          count: data.count,
-          subTypes: Object.entries(data.subTypes).sort(([, a], [, b]) => b - a),
-      }))
-      .sort((a, b) => b.count - a.count);
+    .map(([name, data]) => ({
+      name,
+      count: data.count,
+      subTypes: Object.entries(data.subTypes).sort(([, a], [, b]) => b - a),
+    }))
+    .sort((a, b) => b.count - a.count);
 
   const euBreakdownStats = Object.entries(resources.reduce((acc, resource) => {
-      if (resource.countries) {
-          resource.countries.forEach(country => {
-              if (country === 'European Union') {
-                  acc['EU-Wide'] = (acc['EU-Wide'] || 0) + 1;
-              } else if (EU_COUNTRIES.includes(country)) {
-                  acc[country] = (acc[country] || 0) + 1;
-              }
-          });
+    if (resource.countries) {
+      for (const country of resource.countries) {
+        if (country === 'European Union') {
+          acc['EU-Wide'] = (acc['EU-Wide'] || 0) + 1;
+        } else if (EU_COUNTRIES.includes(country)) {
+          acc[country] = (acc[country] || 0) + 1;
+        }
       }
-      return acc;
+    }
+    return acc;
   }, {})).sort(([, a], [, b]) => b - a);
 
 
   // --- Generate Markdown Content ---
 
   let mdContent = `# Project Statistics\n\n`;
   mdContent += `An overview of the resources available on Yourself to Science, providing insights into the landscape of citizen science contribution.\n\n`;
-  
+
   mdContent += `## Overview\n\n`;
   mdContent += `- **Total Resources:** ${totalResources}\n\n`;
 
   mdContent += `## Compensation Types\n\n`;
-  compensationDistribution.forEach(([type, count]) => {
+  for (const [type, count] of compensationDistribution) {
     mdContent += `- **${type.charAt(0).toUpperCase() + type.slice(1)}:** ${count}\n`;
-  });
+  }
   mdContent += `\n`;
 
   mdContent += `## Top 10 Service Availability by Country\n\n`;
-  topCountries.forEach(([country, count]) => {
+  for (const [country, count] of topCountries) {
     mdContent += `- **${country}:** ${count}\n`;
     if (country === 'European Union') {
       mdContent += `    - **Breakdown:**\n`;
-      euBreakdownStats.forEach(([euCountry, euCount]) => {
+      for (const [euCountry, euCount] of euBreakdownStats) {
         mdContent += `        - **${euCountry}:** ${euCount}\n`;
-      });
+      }
     }
-  });
+  }
   mdContent += `\n`;
 
   mdContent += `## Data Type Distribution\n\n`;
-  dataTypesDistribution.forEach(([type, count]) => {
+  for (const [type, count] of dataTypesDistribution) {
     mdContent += `- **${type}:** ${count}\n`;
-  });
+  }
   mdContent += `\n`;
-  
+
   mdContent += `## Entity Type Distribution\n\n`;
-  entityTypeDistribution.forEach(entity => {
-      mdContent += `- **${entity.name}:** ${entity.count}\n`;
-      if (entity.subTypes.length > 1) {
-          entity.subTypes.forEach(([subType, subCount]) => {
-              mdContent += `    - **${subType}:** ${subCount}\n`;
-          });
+  for (const entity of entityTypeDistribution) {
+    mdContent += `- **${entity.name}:** ${entity.count}\n`;
+    if (entity.subTypes.length > 1) {
+      for (const [subType, subCount] of entity.subTypes) {
+        mdContent += `    - **${subType}:** ${subCount}\n`;
       }
-  });
+    }
+  }
   mdContent += `\n`;
 
   mdContent += `## Live Data Access\n\n`;
   mdContent += `Use these persistent URLs for automated access to always get the latest version of the dataset.\n\n`;
   mdContent += `- **CSV Endpoint:** https://yourselftoscience.org/resources.csv\n`;
   mdContent += `- **JSON Endpoint:** https://yourselftoscience.org/resources.json\n`;
-  
+
   const outputPath = path.join(__dirname, '../public/stats.md');
   fs.writeFileSync(outputPath, mdContent);
   console.log(`Successfully generated ${outputPath}`);
 }
 
 function generateHomepageMarkdown() {
   console.log('Generating index.html.md...');
-  
+
   let mdContent = `# Yourself to Science: Contribute to Science\n\n`;
-  mdContent += `YourselfToScience.org is an open-source website providing a comprehensive list of services that allow individuals to contribute to scientific research with their data, genome, body, and more.\n\n`;
+  mdContent += `Yourself to Science™ is an open-source project providing a comprehensive list of services that allow individuals to contribute to scientific research with their data, genome, body, and more.\n\n`;
   mdContent += `This page provides a filterable list of all resources. You can also download the full dataset as CSV or JSON.\n\n`;
   mdContent += `## All Resources\n\n`;
 
-  resources.forEach(resource => {
+  for (const [index, resource] of resources.entries()) {
     mdContent += `### [${resource.title}](https://yourselftoscience.org/resource/${resource.slug})\n\n`;
     mdContent += `*Description:* ${resource.description}\n\n`;
     if (resource.dataTypes) {
@@ -158,72 +158,80 @@ function generateHomepageMarkdown() {
     if (resource.compensationType) {
       mdContent += `*Compensation:* ${resource.compensationType.charAt(0).toUpperCase() + resource.compensationType.slice(1)}\n\n`;
     }
-    mdContent += `---\n\n`;
-  });
+    // Add separator only if it's not the last item
+    if (index < resources.length - 1) {
+      mdContent += `---\n\n`;
+    } else {
+      mdContent += `---`; // End with separator but no extra newlines
+    }
+  }
+
+  // Ensure single trailing newline
+  mdContent += '\n';
 
   const outputPath = path.join(__dirname, '../public/index.html.md');
   fs.writeFileSync(outputPath, mdContent);
   console.log(`Successfully generated ${outputPath}`);
 }
 
 function generateClinicalTrialsMarkdown() {
-    console.log('Generating clinical-trials.md...');
-    const clinicalTrialResources = resources.filter(r => r.dataTypes.includes('Clinical trials'));
-    
-    let mdContent = `# Clinical Trials\n\n`;
-    mdContent += `This page lists resources related to contributing to clinical trials.\n\n`;
-    mdContent += `## Clinical Trial Resources\n\n`;
-
-    clinicalTrialResources.forEach(resource => {
-        mdContent += `### [${resource.title}](https://yourselftoscience.org/resource/${resource.slug})\n\n`;
-        mdContent += `*Description:* ${resource.description}\n\n`;
-        if (resource.dataTypes) {
-            mdContent += `*Data Types:* ${resource.dataTypes.join(', ')}\n\n`;
-        }
-        if (resource.countries) {
-            mdContent += `*Countries:* ${resource.countries.join(', ')}\n\n`;
-        }
-        if (resource.compensationType) {
-            mdContent += `*Compensation:* ${resource.compensationType.charAt(0).toUpperCase() + resource.compensationType.slice(1)}\n\n`;
-        }
-        mdContent += `---\n\n`;
-    });
+  console.log('Generating clinical-trials.md...');
+  const clinicalTrialResources = resources.filter(r => r.dataTypes.includes('Clinical trials'));
+
+  let mdContent = `# Clinical Trials\n\n`;
+  mdContent += `This page lists resources related to contributing to clinical trials.\n\n`;
+  mdContent += `## Clinical Trial Resources\n\n`;
+
+  for (const resource of clinicalTrialResources) {
+    mdContent += `### [${resource.title}](https://yourselftoscience.org/resource/${resource.slug})\n\n`;
+    mdContent += `*Description:* ${resource.description}\n\n`;
+    if (resource.dataTypes) {
+      mdContent += `*Data Types:* ${resource.dataTypes.join(', ')}\n\n`;
+    }
+    if (resource.countries) {
+      mdContent += `*Countries:* ${resource.countries.join(', ')}\n\n`;
+    }
+    if (resource.compensationType) {
+      mdContent += `*Compensation:* ${resource.compensationType.charAt(0).toUpperCase() + resource.compensationType.slice(1)}\n\n`;
+    }
+    mdContent += `---\n\n`;
+  }
 
-    const outputPath = path.join(__dirname, '../public/clinical-trials.md');
-    fs.writeFileSync(outputPath, mdContent);
-    console.log(`Successfully generated ${outputPath}`);
+  const outputPath = path.join(__dirname, '../public/clinical-trials.md');
+  fs.writeFileSync(outputPath, mdContent);
+  console.log(`Successfully generated ${outputPath}`);
 }
 
 function generateOrganBodyTissueDonationMarkdown() {
-    console.log('Generating organ-body-tissue-donation.md...');
-    const donationResources = resources.filter(r => 
-        r.dataTypes.includes('Organ') || 
-        r.dataTypes.includes('Body') || 
-        r.dataTypes.includes('Tissue')
-    );
-    
-    let mdContent = `# Organ, Body & Tissue Donation\n\n`;
-    mdContent += `This page lists resources related to donating organs, bodies, or tissues for scientific research.\n\n`;
-    mdContent += `## Organ, Body & Tissue Donation Resources\n\n`;
-
-    donationResources.forEach(resource => {
-        mdContent += `### [${resource.title}](https://yourselftoscience.org/resource/${resource.slug})\n\n`;
-        mdContent += `*Description:* ${resource.description}\n\n`;
-        if (resource.dataTypes) {
-            mdContent += `*Data Types:* ${resource.dataTypes.join(', ')}\n\n`;
-        }
-        if (resource.countries) {
-            mdContent += `*Countries:* ${resource.countries.join(', ')}\n\n`;
-        }
-        if (resource.compensationType) {
-            mdContent += `*Compensation:* ${resource.compensationType.charAt(0).toUpperCase() + resource.compensationType.slice(1)}\n\n`;
-        }
-        mdContent += `---\n\n`;
-    });
+  console.log('Generating organ-body-tissue-donation.md...');
+  const donationResources = resources.filter(r =>
+    r.dataTypes.includes('Organ') ||
+    r.dataTypes.includes('Body') ||
+    r.dataTypes.includes('Tissue')
+  );
+
+  let mdContent = `# Organ, Body & Tissue Donation\n\n`;
+  mdContent += `This page lists resources related to donating organs, bodies, or tissues for scientific research.\n\n`;
+  mdContent += `## Organ, Body & Tissue Donation Resources\n\n`;
+
+  for (const resource of donationResources) {
+    mdContent += `### [${resource.title}](https://yourselftoscience.org/resource/${resource.slug})\n\n`;
+    mdContent += `*Description:* ${resource.description}\n\n`;
+    if (resource.dataTypes) {
+      mdContent += `*Data Types:* ${resource.dataTypes.join(', ')}\n\n`;
+    }
+    if (resource.countries) {
+      mdContent += `*Countries:* ${resource.countries.join(', ')}\n\n`;
+    }
+    if (resource.compensationType) {
+      mdContent += `*Compensation:* ${resource.compensationType.charAt(0).toUpperCase() + resource.compensationType.slice(1)}\n\n`;
+    }
+    mdContent += `---\n\n`;
+  }
 
-    const outputPath = path.join(__dirname, '../public/organ-body-tissue-donation.md');
-    fs.writeFileSync(outputPath, mdContent);
-    console.log(`Successfully generated ${outputPath}`);
+  const outputPath = path.join(__dirname, '../public/organ-body-tissue-donation.md');
+  fs.writeFileSync(outputPath, mdContent);
+  console.log(`Successfully generated ${outputPath}`);
 }
 
 function generateGetInvolvedMarkdown() {
@@ -234,18 +242,18 @@ function generateGetInvolvedMarkdown() {
 
   let mdContent = `# Get Involved\n\n`;
   mdContent += `Our mission is to provide a transparent, accessible, and comprehensive list of services to advance scientific research. This project is built by the community, for the community, and every contribution is incredibly valuable.\n\n`;
-  
+
   mdContent += `## Join the Discussion\n\n`;
   mdContent += `The best place to start. Suggest new services, share ideas, and get feedback from the community. Perfect for all users.\n\n`;
   mdContent += `[Suggest on Reddit](${redditSuggestUrl})\n\n`;
-  
+
   mdContent += `## Go Direct\n\n`;
   mdContent += `For developers and those comfortable with GitHub. Use our template to add your suggestion directly to our project tracker.\n\n`;
   mdContent += `[Suggest on GitHub](${githubSuggestUrl})\n\n`;
 
   mdContent += `## Contact Us\n\n`;
   mdContent += `Have a question, suggestion, or collaboration idea? We’d love to hear from you. Email us at [[email protected]](mailto:[email protected]).\n\n`
-  
+
   mdContent += `Want to help in other ways? Explore our [project repository](https://github.com/yourselftoscience/yourselftoscience.org) for documentation, code, and more.\n`;
 
   const outputPath = path.join(__dirname, '../public/get-involved.md');
@@ -255,11 +263,11 @@ function generateGetInvolvedMarkdown() {
 
 
 function generateAllMarkdown() {
-    generateStatsMarkdown();
-    generateHomepageMarkdown();
-    generateClinicalTrialsMarkdown();
-    generateOrganBodyTissueDonationMarkdown();
-    generateGetInvolvedMarkdown();
+  generateStatsMarkdown();
+  generateHomepageMarkdown();
+  generateClinicalTrialsMarkdown();
+  generateOrganBodyTissueDonationMarkdown();
+  generateGetInvolvedMarkdown();
 }
 
 generateAllMarkdown();