actionsforge · jajera · Dec 31, 2024 · Dec 31, 2024
diff --git a/.github/workflows/commitmsg-conform.yml b/.github/workflows/commitmsg-conform.yml
@@ -0,0 +1,11 @@
+name: commit-message-conformance
+on:
+  pull_request: {}
+permissions:
+  statuses: write
+  checks: write
+  contents: read
+  pull-requests: read
+jobs:
+  commitmsg-conform:
+    uses: actionsforge/actions/.github/workflows/commitmsg-conform.yml@main
diff --git a/.github/workflows/markdown-lint.yml b/.github/workflows/markdown-lint.yml
@@ -0,0 +1,11 @@
+name: markdown-lint
+on:
+  pull_request: {}
+permissions:
+  statuses: write
+  checks: write
+  contents: read
+  pull-requests: read
+jobs:
+  markdown-lint:
+    uses: actionsforge/actions/.github/workflows/markdown-lint.yml@main
diff --git a/.github/workflows/update-metrics.yml b/.github/workflows/update-metrics.yml
@@ -0,0 +1,67 @@
+name: update-gh-pages-metrics
+
+on:
+  schedule:
+    - cron: '0 0 * * 1' # Weekly schedule
+  workflow_dispatch: # Manual trigger
+
+permissions:
+  contents: write
+  statuses: write
+
+jobs:
+  update-metrics:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Step 1: Checkout the repository
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Step 2: Install jq for JSON processing
+      - name: Install jq
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y jq
+
+      # Step 3: Fetch and generate metrics.json
+      - name: Generate metrics.json
+        env:
+          API_URL: "https://api.github.com/orgs/${{ github.repository_owner }}/repos"
+          METRICS_FILE: "data/metrics.json"
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          # Validate token availability
+          if [[ -z "$GITHUB_TOKEN" ]]; then
+              echo "Error: GITHUB_TOKEN is not available."
+              exit 1
+          fi
+
+          # Prepare directories
+          rm -rf data && mkdir -p data
+
+          # Fetch repository data
+          status_code=$(curl -s -o response.json -w "%{http_code}" -H "Authorization: token $GITHUB_TOKEN" "$API_URL")
+
+          # Check HTTP status code
+          if [ "$status_code" -ne 200 ]; then
+              echo "Failed to fetch repository data. HTTP Status: $status_code"
+              echo "Response:"
+              cat response.json
+              exit 1
+          fi
+
+          # Parse and sort repositories by stargazers_count (top 5)
+          repos=$(jq -r '.[] | {(.name): .stargazers_count}' response.json | jq -s add | jq -r 'to_entries | sort_by(-.value)[:5] | from_entries')
+
+          # Generate metrics.json
+          echo "$repos" | jq -r '.' > "$METRICS_FILE"
+
+          echo "metrics.json generated successfully."
+
+      # Step 4: Commit and push changes
+      - name: Commit and push changes
+        uses: EndBug/add-and-commit@v9
+        with:
+          message: "Update metrics.json with top repositories"
+          add: "data/metrics.json"
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# actionsforge.github.io
+# actionsforge.github.io
diff --git a/data/metrics.json b/data/metrics.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ActionsForge Dashboard</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>ActionsForge Organization Dashboard</h1>
+        <p>Visualizing top repositories by GitHub stars</p>
+    </header>
+
+    <main>
+        <section id="chart-section">
+            <canvas id="repoContributions" width="400" height="200"></canvas>
+        </section>
+
+        <section id="data-table-section">
+            <h2>Top Repositories Data</h2>
+            <table id="data-table">
+                <thead>
+                    <tr>
+                        <th>Repository</th>
+                        <th>Stars</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <!-- Data will be injected here -->
+                </tbody>
+            </table>
+        </section>
+    </main>
+
+    <footer>
+        <p>Powered by <a href="https://github.com/actionsforge" target="_blank">ActionsForge</a>. Data updates weekly.</p>
+    </footer>
+
+    <script src="scripts.js"></script>
+</body>
+</html>
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,42 @@
+// Fetch and display the top repositories
+fetch('./data/metrics.json')
+    .then(response => response.json())
+    .then(data => {
+        // Prepare data for Chart.js
+        const labels = Object.keys(data);
+        const starCounts = Object.values(data);
+
+        // Populate the chart
+        const ctx = document.getElementById('repoContributions').getContext('2d');
+        new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Stars',
+                    data: starCounts,
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
+                }
+            }
+        });
+
+        // Populate the table
+        const tableBody = document.querySelector('#data-table tbody');
+        labels.forEach((repo, index) => {
+            const row = document.createElement('tr');
+            row.innerHTML = `<td>${repo}</td><td>${starCounts[index]}</td>`;
+            tableBody.appendChild(row);
+        });
+    })
+    .catch(error => {
+        console.error('Error fetching or processing data:', error);
+    });
diff --git a/style.css b/style.css
@@ -0,0 +1,72 @@
+/* General Styles */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #181818; /* Deep dark gray */
+    color: #d4d4d4; /* Soft light gray for text */
+    text-align: center;
+}
+
+header {
+    background-color: #1e1e1e; /* Slightly lighter dark gray */
+    color: #d4d4d4;
+    padding: 20px;
+    border-bottom: 2px solid #5e5e5e; /* Subtle gray highlight */
+}
+
+main {
+    padding: 20px;
+}
+
+h1, h2 {
+    margin: 10px 0;
+    color: #ffffff; /* Bright white for headings */
+}
+
+/* Chart Section */
+#chart-section {
+    margin: 20px auto;
+    max-width: 600px;
+}
+
+/* Table Styles */
+#data-table {
+    margin: 20px auto;
+    border-collapse: collapse;
+    width: 80%;
+    background-color: #242424; /* Dark gray for table background */
+    color: #d4d4d4; /* Light gray text */
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+#data-table th, #data-table td {
+    border: 1px solid #333333; /* Subtle dark border */
+    padding: 12px 16px;
+    text-align: left;
+}
+
+#data-table th {
+    background-color: #333333; /* Slightly lighter dark gray for headers */
+    color: #f0f0f0; /* Off-white text for headers */
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+#data-table tr:nth-child(even) {
+    background-color: #2a2a2a; /* Slightly lighter for alternating rows */
+}
+
+#data-table tr:hover {
+    background-color: #3a3a3a; /* Hover effect with medium gray */
+    color: #ffffff; /* Bright white text on hover */
+    cursor: pointer;
+}
+
+/* Footer */
+footer {
+    margin-top: 20px;
+    font-size: 0.9em;
+    color: #666666; /* Muted gray for footer text */
+}