Patreon contributors

[mitsuki-jpg]

Part 1

Go to the Patreon Developer Portal.

• Log in or create a Patreon account if you don't have one.
• Create a new client and obtain your client ID and client secret.

Set Up OAuth2 Authentication:

• Use OAuth2 to authenticate your application with the Patreon API. This involves obtaining an access token.
• You can find details about the OAuth2 flow in the Patreon API documentation.

Retrieve Patreon Data:

• Use the access token to make requests to the Patreon API and retrieve information about your Patreon supporters.
• Specifically, you'll want to make a request to the campaigns endpoint to get information about your campaign.

Parse the Data:

• Parse the JSON response from the Patreon API to extract the information you need, such as the names or usernames of your newest supporters.

Part 2

Add in file src/templates/pages/contributors.html

<script>
    // Use JavaScript to fetch Patreon data and dynamically populate the supporters on your website
    // Example code for making an API request using fetch:
    fetch('YOUR_PATREON_API_ENDPOINT', {
      headers: {
        Authorization: 'Bearer YOUR_ACCESS_TOKEN',
      },
    })
    .then(response => response.json())
    .then(data => {
      // Iterate through the data and dynamically populate the HTML
      const patreonSupportersContainer = document.getElementById('patreonSupporters');
      data.data.relationships.memberships.data.forEach(member => {
        const supporterCard = document.createElement('div');
        supporterCard.className = 'card';
        supporterCard.innerHTML = `
          <div class="card-body">
            <h5 class="card-title">${member.attributes.user.name}</h5>
            <p class="card-text">Supporter since ${new Date(member.attributes.created).toLocaleDateString()}</p>
          </div>
        `;
        patreonSupportersContainer.appendChild(supporterCard);
      });
    })
    .catch(error => console.error('Error fetching Patreon data:', error));
  </script>

And add inside card

<!-- Bot Detector Newest Patreon supporters -->
<h1 class="h3 mt-2  text-center">Newest supporters</h1>
<div class="container mt-5">
    <div id="patreonSupporters" class="card-columns mt-3">
      <!-- Display Patreon supporters dynamically here -->
    </div>
</div>

Replace 'YOUR_PATREON_API_ENDPOINT' and 'YOUR_ACCESS_TOKEN' with the appropriate values.

Note:

Always make sure to keep your access tokens secure and not expose them on the client side. Use a server-side component to handle authentication if needed. Additionally, you might need to adapt it based on your specific requirements and the structure of the Patreon API responses.

[extreme4all]

i'd do server side rendering so in our case python not javascript

[mitsuki-jpg]

i'd do server side rendering so in our case python not javascript

Sounds good for me