Extract a CSV from component.gallery page with all the links to the design system and page metadata

Scrape component gallery page to CSV

// Get the parent <ul> element
const parentUl = document.querySelector('ul.l-grid');

// Get all <li> elements within the parent <ul>
const listItemElements = parentUl.getElementsByTagName('li');

// Array to store the extracted data
const extractedData = [];

// Extract additional info from the page
const pageTitle = document.querySelector('h1').innerText;
const pageDescription = document.querySelector('div.mt-2.text-lg.body-text.ml-0 p').innerText;
const currentDate = new Date().toISOString().split('T')[0];


let otherNamesElement = document.querySelector('p.mt-2.text-lg.italic');
let otherNames = '';
if (otherNamesElement) {
  otherNames = otherNamesElement.innerText.replace('Other names: ', '');
  otherNames = `"${otherNames}"`;
}

// Add the additional info to the extracted data array
extractedData.push(
  { 'Key': 'Component', 'Value': pageTitle },
  { 'Key': 'Other names', 'Value': otherNames },
  { 'Key': 'Description', 'Value': pageDescription },
  { 'Key': 'URL', 'Value': window.location.href },
  { 'Key': 'Date', 'Value': currentDate },
  { 'Key': '', 'Value': ''},
  { 'Key': 'Design System', 'Value': 'URL'}
);
// Iterate over each <li> element
for (let i = 0; i < listItemElements.length; i++) {
  const listItem = listItemElements[i];

  // Check if the <li> element contains an <a> element and is not wrapped in <li class="badge">
  const anchorElement = listItem.querySelector('a');
  if (anchorElement && !listItem.classList.contains('badge')) {
    // Extract the href
    const href = anchorElement.getAttribute('href');

    // Extract the text from the <h3> element
    const h3Element = listItem.querySelector('h3');
    const text = h3Element.innerText;

    // Store the extracted data as an object
    const extractedItem = {
      	'Design System': text,
	URL: href,
    };

    // Add the object to the extracted data array
    extractedData.push(extractedItem);
  }
}

// Function to convert the data array to CSV format
function convertToCSV(data) {
  const rows = data.map(item => Object.values(item).join(','));
  return `${rows.join('\n')}`;
}

// Generate the CSV content
const csvContent = convertToCSV(extractedData);

// Create a Blob object with the CSV data
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });

// Create a download link
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);

// Generate the filename
const filename = `${pageTitle}-${currentDate}.csv`;
downloadLink.download = filename;

// Append the download link to the document body
document.body.appendChild(downloadLink);

// Simulate a click on the download link
downloadLink.click();

// Remove the download link from the document body
document.body.removeChild(downloadLink);