Welcome to the Developer Site for Griffmonster Walks

Welcome to the Developer pages for Griffmonster Walks. This domain will focus on the code and technology that has been used to bring you both the Griffmonster Walks and Rhodes Great Walks sites. It is the intention that the code will be made publically available in the near future for others to uses.

Both the walk sites and this developer site are built on the Google Blogger platform which entails a complex workflow to achieve the end results. There are regular updates and new functionality being added to the site and the developer posts aim to make the changes transparent to the public.

A few things to note on recent developments:

External code modules have been updated. Many of these were old versions, therefore these were updated for security and to take advantage of new functionality. The modules that have been updated are:

• JQuery
• leafletjs
• additional leafletjs libraries

Walk Lists are now dynamically updated using javascript to return the data from the feeds. Orinially the feeds were returned locally and an XSLT was used to transform them into lists. This required manual effort each time a new walk post was added to the site. Some time ago the feeds that Blogger produced, reduced the maximum number of entries in a feed to 150. It was then identified that, despite setting the number of items to return using the relevant uri paramter, this did not actually return that number and it was not consistent in how many it did return.

Whilst investigating this issue, it was considered that the lists should be generated dynamically using a javascript routine that recursively polls the feeds using the total entries in each one to determine the starting entry in the next request. This is a little slower but it means that all the relevant walk posts get returned.

The code that was used to undertake this is given in the function below.

async function fetchAllAtomFeedEntries(
  baseUrl,
  startIndex = 1,
  maxResults = 150,
  allEntries = [],
  divId
) {
  const url = `${baseUrl}?start-index=${startIndex}&max-results=${maxResults}`;
  
  // Update the progress in the console AND the HTML container
  const statusMessage = `📡 Fetching walks from: ${startIndex}. Total walks found: ${allEntries.length} ...`;
  console.log(statusMessage);
  
  const container = document.getElementById(divId);
  if (container) {
      container.innerHTML = ` <div class="status" > <p>${statusMessage} </p> </div>`;
  }

  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const xmlText = await response.text();
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText, "application/xml");

    if (xmlDoc.querySelector('parsererror')) {
        throw new Error("XML Parsing Error: Invalid XML detected.");
    }

    const entries = Array.from(xmlDoc.querySelectorAll('entry'));
    const pageCount = entries.length;

    allEntries = allEntries.concat(entries);

    if (pageCount > 0) {
      const nextStartIndex = startIndex + pageCount;
      // Recursive call for the next page, passing the divId
      return fetchAllAtomFeedEntries(
        baseUrl,
        nextStartIndex,
        maxResults,
        allEntries,
        divId 
      );
    } else {
      
      return allEntries; // Base Case: Return the final, complete array
    }

  } catch (error) {
    const errorMessage = `❌ Error at index ${startIndex}. Returning collected data.`;
    console.error(errorMessage, error);
    if (container) {
        container.innerHTML = `<p style="color: red;">${errorMessage}</p><p>Check console for details.</p>`;
    }
    return allEntries;
  }
}