Add a roadmap page for CO2.js

Author: fershad

.eleventy.js

@@ -1,3 +1,4 @@
+require('dotenv').config()
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 const metagen = require('eleventy-plugin-metagen');
 const sitemap = require("@quasibit/eleventy-plugin-sitemap");

.gitignore

@@ -1,3 +1,4 @@
 /dist
 /node_modules
-/.cache
+/.cache
+.env

package-lock.json

@@ -12,7 +12,6 @@
   "license": "ISC",
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0-alpha.10",
-    "@11ty/eleventy-fetch": "^4.0.1",
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@quasibit/eleventy-plugin-sitemap": "^2.2.0",
@@ -26,5 +25,9 @@
     "markdown-it-anchor": "^9.0.1",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3"
+  },
+  "dependencies": {
+    "@octokit/core": "^6.1.2",
+    "dotenv": "^16.4.5"
   }
-}
+}

package.json

@@ -0,0 +1,22 @@
+
+const getGithubData = async () => {
+    const { Octokit } = await import('@octokit/core');
+    const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
+    const issues = await octokit.request('GET /repos/{owner}/{repo}/issues', {
+        owner: 'thegreenwebfoundation',
+        repo: 'co2.js',
+        labels: 'roadmap,release-planned',
+        state: 'open',
+    });
+
+    // Check for any issues that have a label of "funding-required" and add that to the data
+    issues.data.forEach(issue => {
+        if (issue.labels.find(label => label.name === "funding-required")) {
+            issue.fundingRequired = true;
+        }
+    });
+    
+    return issues.data;
+}
+
+module.exports = getGithubData;

src/_data/co2jsRoadmapCurrent.js

@@ -0,0 +1,24 @@
+const getGithubData = async () => {
+    const { Octokit } = await import('@octokit/core');
+    const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
+    const issues = await octokit.request('GET /repos/{owner}/{repo}/issues', {
+        owner: 'thegreenwebfoundation',
+        repo: 'co2.js',
+        labels: 'roadmap',
+        state: 'open',
+    });
+
+    // Remove any issues with the "release-planned" label
+    issues.data = issues.data.filter(issue => !issue.labels.find(label => label.name === "release-planned"));
+
+    // Check for any issues that have a label of "funding-required" and add that to the data
+    issues.data.forEach(issue => {
+        if (issue.labels.find(label => label.name === "funding-required")) {
+            issue.fundingRequired = true;
+        }
+    });
+
+    return issues.data;
+}
+
+module.exports = getGithubData;

src/_data/co2jsRoadmapFuture.js

@@ -0,0 +1,35 @@
+<ul class="list-none roadmap-list">
+    {%- for issue in issues -%}
+        <li class="px-3 py-2">
+            <h3>
+                <a href="{{ issue.html_url }}">
+                    <span class="link link-hover">{{ issue.title | safe }}</span>
+                    {%- if issue.milestone.title -%}
+                        <span class="badge badge-outline ml-3">Release {{ issue.milestone.title }}</span>
+                    {%- elseif issue.fundingRequired -%}
+                        <a href="https://www.thegreenwebfoundation.org/donate/" class="badge badge-accent ml-3 text-white no-underline">Funding
+                            Required</a>
+                    {%- endif -%}
+                </a>
+            </h3>
+            <div class="flex gap-4 flex-row flex-wrap items-center mb-4">
+                <p class="prose-sm not-prose">Comments: {{ issue.comments }}</p>
+                <p class="prose-sm not-prose">Reactions: {{ issue.reactions.total_count }}</p>
+                <p class="prose-sm not-prose">Contributed by:
+                    <span class="roadmap-issue-contributor">
+                        <img class="sm:invisible md:visible" src="{{ issue.user.avatar_url }}" loading="lazy">
+                            <a href="{{ issue.user.html_url }}" class="link">{{ issue.user.login }}</a>
+                        </span>
+                    </p>
+                </div>
+                <div class="flex flex-row flex-wrap items-center gap-6 not-prose font-semibold">
+                    {%- if issue.fundingRequired -%}
+                        <a href="https://www.thegreenwebfoundation.org/donate/" class="link link-accent">Fund this work</a>
+                    {%- endif -%}
+                    <a href="{{ issue.html_url }}" class="link link-hover text-black">
+                        View on GitHub
+                    </a>
+                </div>
+            </li>
+        {%- endfor -%}
+    </ul>