! Here is your website

website/README.md

@@ -0,0 +1,28 @@
+<h2>how to use website</h2>
+relace   API_KEY in app.js(line NO. 7)  to your GitHub  API_KEY and uncomment it!!
+<br>
+<h2>how to obtain github api key from github--></h2>
+
+<h3> 1) Log in to GitHub: Go to the GitHub website and log in with your account.</h3>
+
+<h3> 2) Access Token Settings:</h3>
+Click on your profile picture in the top right corner.
+Select Settings from the dropdown menu.
+In the left sidebar, click on Developer settings.
+Then, click on Personal access tokens.
+
+<h3> 3) Generate New Token:</h3>
+Click on the Generate new token button.
+Give your token a descriptive name in the Note field.
+Select the scopes or permissions you’d like to grant this token. Scopes determine what access the token has, so be sure to select only the permissions necessary for your use case.
+
+<h3> 4) Set Expiration:</h3>
+Choose an expiration date for your token. It’s a good security practice to set an expiration date that’s not too far in the future.
+
+<h3> 5) Generate Token:</h3>
+Once you’ve configured the settings, click the Generate token button at the bottom of the page.
+
+<h3> Copy Your New Token:</h3>
+After the token is generated, make sure to copy it and store it in a secure place. You won’t be able to see it again once you navigate away from the page.
+
+<h1>-->then start development </h1>

website/app.js

@@ -0,0 +1,91 @@
+// script.js
+document.addEventListener("DOMContentLoaded", function () {
+  const cardContainer = document.getElementById("card-container");
+
+  // Function to fetch GitHub data
+  function fetchGitHubData(url) {
+    // const token = " Your API_KEY"; // Replace with your actual token
+
+    fetch(url, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+      .then((response) => {
+        if (response.status === 403) {
+          // If rate limit exceeded, parse the Retry-After header to calculate wait time
+          const retryAfter = parseInt(response.headers.get("Retry-After"));
+          if (retryAfter) {
+            console.log(
+              `Rate limit exceeded. Retrying after ${retryAfter} seconds.`
+            );
+            setTimeout(() => fetchGitHubData(url), retryAfter * 1000);
+          } else {
+            console.error(
+              "Rate limit exceeded. No Retry-After header present."
+            );
+          }
+        } else if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        } else {
+          return response.json();
+        }
+      })
+      .then((data) => {
+        if (data) {
+          // Process the data
+          const extensionlessFiles = data.filter((file) => {
+            // Exclude files with extensions and specific filenames like 'LICENSE'
+            const isLicense = file.name.toUpperCase() === "LICENSE";
+            const isImage = file.name.toLowerCase() === "images";
+            const iswebsite = file.name.toLowerCase() === "website";
+            return (
+              !file.name.includes(".") && !isLicense && !isImage && !iswebsite
+            );
+          });
+          extensionlessFiles.forEach((file) => {
+            // Fetch README data for each file
+            fetch(
+              `https://api.github.com/repos/jfmartinz/ResourceHub/contents/${file.path}/README.md`,
+              {
+                headers: {
+                  Authorization: `Bearer ${token}`,
+                },
+              }
+            )
+              .then((readmeResponse) => readmeResponse.json())
+              .then((readmeData) => {
+                const card = document.createElement("div");
+                card.className = "card";
+                card.innerHTML = `
+                  <div class="card-content">
+                    <p>${file.name}</p>
+                  </div>
+                `;
+                // Modify the click event for each card
+                card.onclick = function () {
+                  // Save README content in sessionStorage
+                  sessionStorage.setItem(
+                    "readmeContent",
+                    atob(readmeData.content)
+                  );
+                  sessionStorage.setItem("filename", file.name);
+                  // Open the content-display.html page
+                  window.location.href = "content-display.html";
+                };
+                cardContainer.appendChild(card);
+              })
+              .catch((readmeError) =>
+                console.error("Error fetching README: ", readmeError)
+              );
+          });
+        }
+      })
+      .catch((error) => console.error("Error fetching data: ", error));
+  }
+
+  // Initial fetch call
+  fetchGitHubData(
+    "https://api.github.com/repos/jfmartinz/ResourceHub/contents/"
+  );
+});

website/content-display.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>README Content</title>
+    <style>
+        #project-title {
+    text-align: center;
+    font-size: 48px; /* Adjust size as needed */
+    margin-top: 20px;
+    font-family: 'Arial', sans-serif;
+}
+.dark-mode {
+            background-color: #333;
+            color: white;
+        }
+        .light-mode {
+            background-color: white;
+            color: black;
+        }
+        /* Toggle button style */
+        .toggle-button {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background: #f6f8fa;
+            border: none;
+            padding: 10px 20px;
+            cursor: pointer;
+            border-radius: 5px;
+        }
+        body {
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            padding: 20px;
+            max-width: 900px;
+            margin: auto;
+        }
+        h1, h2, h3 {
+            border-bottom: 1px solid #eaecef;
+            padding-bottom: 0.3em;
+        }
+        code {
+            background-color: #f6f8fa;
+            padding: 0.2em 0.4em;
+            margin: 0;
+            font-size: 85%;
+            border-radius: 3px;
+        }
+        pre {
+            background-color: #f6f8fa;
+            padding: 16px;
+            overflow: auto;
+            line-height: 1.45;
+            border-radius: 3px;
+        }
+        ul {
+            padding-left: 20px;
+        }
+        a {
+            color: #0366d6;
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body class="light-mode">
+    <button class="toggle-button" id="dark-mode-toggle">Toggle Dark Mode</button>
+    <h1 id="project-title">project title</h1>
+    <p id="project-description">Project description goes here...</p>
+
+    <h2>Installation</h2>
+    <pre><code>git clone https://github.com/your-username/your-repo.git</code></pre>
+
+    <h2>Usage</h2>
+    <p>Instructions on how to use the project after installation.</p>
+
+    <h2>Contributing</h2>
+    <ul>
+        <li>Fork the repository</li>
+        <li>Create your feature branch: <code>git checkout -b my-new-feature</code></li>
+        <li>Commit your changes: <code>git commit -am 'Add some feature'</code></li>
+        <li>Push to the branch: <code>git push origin my-new-feature</code></li>
+        <li>Submit a pull request</li>
+    </ul>
+
+    <h2>License</h2>
+    <p>This project is licensed under the MIT License - see the <a href="https://github.com/jfmartinz/ResourceHub/blob/main/LICENSE">LICENSE.md</a> file for details</p>
+
+    <script>
+          // Dark mode toggle script
+        const toggleButton = document.getElementById('dark-mode-toggle');
+        toggleButton.addEventListener('click', function() {
+            document.body.classList.toggle('dark-mode');
+            document.body.classList.toggle('light-mode');
+        });
+        // Retrieve README content from sessionStorage
+        const readmeContent = sessionStorage.getItem('readmeContent');
+        const filename = sessionStorage.getItem('filename');
+        document.getElementById('project-title').innerHTML = filename;
+        // Decode and render the README content in the div
+        document.getElementById('project-description').innerHTML = readmeContent;
+    </script>
+</body>
+</html>

website/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ResourceHub</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1 id="main-title">ResourceHub</h1>
+    <div id="rate-limit-message" style="display: none; color: red;"></div>
+    <div id="card-container"></div>
+    <script src="app.js"></script>
+</body>
+</html>
+
+

website/style.css

@@ -0,0 +1,57 @@
+/* styles.css */
+#main-title {
+    text-align: center;
+    font-size: 48px; /* Adjust size as needed */
+    margin-top: 20px;
+    font-family: 'Arial', sans-serif;
+}
+.dark-mode {
+    background-color: #333;
+    color: white;
+}
+.light-mode {
+    background-color: white;
+    color: black;
+}
+/* Toggle button style */
+.toggle-button {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    background: #f6f8fa;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 5px;
+}
+#card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: 16px;
+    padding: 16px;
+}
+
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    transition: 0.3s;
+    width: calc(50% - 22px); /* Adjust width for 3 cards per row, accounting for gap */
+    margin-bottom: 16px; /* Space between rows */
+    border-radius: 5px;
+    overflow: hidden;
+    text-align: center;
+    background-color: #f1f1f1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: large;
+}
+
+.card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
+}
+
+.card-content {
+    padding: 16px;
+}