Add roadmap component + page

Author: wmnnd

Diff for: src/components/GitHubIssueList.astro

@@ -0,0 +1,20 @@
+---
+import GitHubIssue from "./GitHubIssue.astro";
+
+interface Props {
+  open: boolean;
+  issues: list;
+  elClass: string;
+}
+
+const { open, issues, elClass } = Astro.props;
+---
+
+<details class={`pb-0 mb-5 ${elClass}`} open={open}>
+  <summary class="px-5 py-7 cursor-pointer"
+    ><h2 class="inline"><slot /></h2></summary
+  >
+  <div class="flex flex-col gap-5 p-5">
+    {issues.map((issue) => <GitHubIssue issue={issue} />)}
+  </div>
+</details>

Diff for: src/components/GitHubRoadmap.astro

@@ -0,0 +1,89 @@
+---
+import axios from "axios";
+import GitHubIssueList from "./GitHubIssueList.astro";
+import { useTranslations } from "../utils/i18n";
+
+const lang = Astro.currentLocale as language;
+const t = useTranslations(lang);
+
+const issues = { backlog: [], inProgress: [], done: [], planned: [] };
+
+const query = `
+    query {
+      organization(login: "pentacent") {
+        projectV2(number: 2) {
+          items(first: 100) {
+            nodes {
+              status: fieldValueByName(name: "Status") {
+                  ... on ProjectV2ItemFieldSingleSelectValue {
+                    name
+                  }
+              }
+              content {
+                ... on Issue {
+                  title
+                  number
+                  html_url: url
+                  closed
+                  closedAt
+                  comments {
+                    total_count: totalCount
+                  }
+                  reactions {total_count: totalCount}
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  `;
+
+try {
+  const response = await axios.post(
+    "https://api.github.com/graphql",
+    { query: query },
+    {
+      headers: {
+        Authorization: `Bearer ${import.meta.env.GITHUB_PROJECT_TOKEN}`,
+        "Content-Type": "application/json",
+      },
+    },
+  );
+
+  const nodes = response.data.data.organization.projectV2.items.nodes;
+
+  nodes.forEach((node) => {
+    switch (node.status.name) {
+      case "Planned":
+        return issues.planned.push(node.content);
+      case "In Progress":
+        return issues.inProgress.push(node.content);
+      case "Done":
+        return issues.done.push(node.content);
+      case "Contributions Welcome":
+        return issues.planned.push(node.content);
+      case "Backlog":
+        return issues.backlog.push(node.content);
+    }
+  });
+} catch (error) {
+  console.warn(`Unable to fetch GitHub project information`, error);
+}
+---
+
+<GitHubIssueList open="true" elClass="bg-emerald-200" issues={issues.inProgress}
+  >{t("roadmap.inProgress")}</GitHubIssueList
+>
+
+<GitHubIssueList open={true} elClass="bg-blue-200" issues={issues.planned}
+  >{t("roadmap.planned")}</GitHubIssueList
+>
+
+<GitHubIssueList elClass="bg-purple-100" issues={issues.backlog}
+  >{t("roadmap.backlog")}</GitHubIssueList
+>
+
+<GitHubIssueList elClass="bg-emerald-100" issues={issues.done} open
+  >{t("roadmap.completed")}</GitHubIssueList
+>

Diff for: src/content/articles/de/roadmap.mdx

@@ -0,0 +1,10 @@
+---
+title: Roadmap
+description: Dies ist die öffentliche Roadmap für das Keila-Projekt.
+---
+
+Keila entwickelt sich immer weiter. Hier sind einige Dinge, an denen wir gerade arbeiten oder die für zukünftige Versionen geplant sind.
+
+Wenn du eigene Vorschläge oder Ideen hast, kannst du sie in unserer [Community bei GitHub](https://github.com/pentacent/keila) teilen oder uns einfach eine E-Mail an <Email user="hello" domain="keila.io" /> senden.
+
+<GitHubRoadmap />

Diff for: src/content/articles/en/roadmap.mdx

@@ -0,0 +1,10 @@
+---
+title: Roadmap
+description: This is the public roadmap for the Keila project. Here we share what we're working on right now and what's planned for future releases.
+---
+
+Keila is constantly evolving. Here are some things we’re currently working on and things that we have planned for future releases.
+
+If you have suggestions or ideas, please feel free to [join our community on GitHub](https://github.com/pentacent/keila) or reach out directly at <Email user="hello" domain="keila.io" />.
+
+<GitHubRoadmap />

Diff for: src/layouts/ArticleLayout.astro

@@ -6,6 +6,7 @@ import KeilaImage from "../components/KeilaImage.astro";
 import Email from "../components/Email.astro";
 import Plans from "../components/Plans.astro";
 import GitHubIssue from "../components/GitHubIssue.astro";
+import GitHubRoadmap from "../components/GitHubRoadmap.astro";
 import LibreFriends from "../components/LibreFriends.astro";
 import I18NLink from "../components/I18nLink.astro";
 
@@ -32,6 +33,7 @@ const { Content, components } = await entry.render();
         components={{
           ...components,
           GitHubIssue,
+          GitHubRoadmap,
           I18NLink,
           KeilaImage,
           LibreFriends,

Diff for: src/utils/translations.ts

@@ -91,6 +91,10 @@ export const strings = {
     "managed-note.heading": "Note:",
     "managed-note.body":
       "This document only applies if you are using Keila Cloud.<br />If you are using a self-hosted instance, these instructions won’t work.",
+    "roadmap.planned": "Planned",
+    "roadmap.inProgress": "In Progress",
+    "roadmap.backlog": "Further Ideas",
+    "roadmap.completed": "Completed",
   },
   de: {
     lang: "Deutsch",
@@ -167,6 +171,10 @@ export const strings = {
     "managed-note.heading": "Hinweis:",
     "managed-note.body":
       "Diese Anleitung gilt nur, wenn du Keila Cloud verwemdest.<br />Wenn du eine eigene Instanz betreibst, werden die hier gezeigten Schritte nicht funktionieren.",
+    "roadmap.planned": "Geplant",
+    "roadmap.inProgress": "In Arbeit",
+    "roadmap.backlog": "Weitere Ideen",
+    "roadmap.completed": "Abgeschlossen",
   },
   fr: {
     lang: "Français",