Hi Zendesk community,

It seems Zendesk's theming API has been upgraded from v3 to v4.

I have a question regarding the change to {{categories}} and the fact that "articles" has been removed entirely from being called from the categories object on the homepage. Our custom design relies on being able to list articles on the homepage under sections. Does this mean articles can be called via another object or has it been removed entirely?

Requirement

How can I call a list of articles that belong to a specific section on the home_page.hbs template?

Currently, on API v3 I use:

{{#each categories}}
{{#each sections}}

{{#is id 123456789}}
<div>
{{#each articles}}
   <a href="{{url}}">
<div>
   <h4 >{{excerpt title characters=40}}</h4>
   <p>{{excerpt body characters=100}}</p>
</div>
   </a>
{{/each}}
</div>
{{/is}}

Will I instead need to inject a list of articles via a script? If so, will I face an issue with API rate limiting or API limits?

Potential solution

I've been testing our a script which works well but I am running into an issue whereby the browser is downloading all attachments associated with the article as it's in the .json data.

My aim is to have two types of lists in the home_page.hbs.

A list of articles that live under a section. Only the title is required along with understanding if it's an internal article or promoted.
A preview of the articles that live under a section. Only the title and an excerpt are required.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 $(document).ready(function() {
   // Function to sanitize HTML by removing tags that could fetch external resources
   function sanitizeHtml(html) {
     let tempDiv = document.createElement("div");
     tempDiv.innerHTML = html;
     // Remove all media-related tags
     const elementsToRemove = tempDiv.querySelectorAll("img, video, audio, source, iframe, embed");
     elementsToRemove.forEach(el => el.remove());
     return tempDiv.innerHTML;
   }
   // Function to fetch and display articles for a given container and type
   function fetchAndDisplayArticles(container, type) {
     const sectionId = container.getAttribute('data-section-id');
     const hcUrl = "https://your_subdomain.zendesk.com";
     if (sectionId) {
       const url = `${hcUrl}/api/v2/help_center/sections/${sectionId}/articles.json`;
       $.ajax({
         url: url,
         type: "GET",
         dataType: "json",
         success: function(data) {
           let articlesHtml = '';
           data.articles.forEach(article => {
             // Sanitize the body to remove any attachments
             const sanitizedBody = sanitizeHtml(article.body);
             const title = article.title.substring(0, 40);
             const excerpt = sanitizedBody.substring(0, 100);
             if (type === 'list') {
               articlesHtml += `
                 <li>
                   <a href="${article.html_url}">
                     ${article.promoted ? '<span>★</span>' : ''}
                     ${title}
                     ${article.internal ? '<span>(Internal)</span>' : ''}
                   </a>
                 </li>
               `;
             } else if (type === 'preview') {
               articlesHtml += `
                 <a href="${article.html_url}">
                   <div>
                     <h4>${title}</h4>
                     <p>${excerpt}</p>
                   </div>
                 </a>
               `;
             }
           });
           container.innerHTML = articlesHtml;
         },
         error: function(error) {
           console.error('Error fetching articles for section', sectionId, ':', error);
         }
       });
     }
   }
   // Select and process all divs with the class 'articles-list'
   const articlesLists = document.querySelectorAll('.articles-list');
   articlesLists.forEach(container => fetchAndDisplayArticles(container, 'list'));
   // Select and process all divs with the class 'articles-preview'
   const articlesPreviews = document.querySelectorAll('.articles-preview');
   articlesPreviews.forEach(container => fetchAndDisplayArticles(container, 'preview'));
 });
</script>

How can I stop the browser/script from downloading the attachments associated with the article the script is access via the API?
And how can I also limit the article list to a maximum of 6 and include a "See all X articles? button?

Thank you in advance!