Adds a RFC overview

Author: MinThaMie

app/app-styles/app.css

@@ -121,3 +121,50 @@
   position: absolute;
   right: var(--spacing-5);
 }
+
+[class^="label-"] {
+  width: 160px;
+  height: 20px;
+  border-radius: 24px;
+  display: block;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.label-proposed {
+  color: var(--color-black);
+  background-color: rgb(191 218 220);
+}
+
+.label-exploring {
+  color: var(--color-white);
+  background-color: rgb(28 135 137);
+}
+
+.label-accepted {
+  color: var(--color-white);
+  background-color: var(--color-brand-hc-dark);
+}
+
+.label-ready-for-release {
+  color: var(--color-white);
+  background-color: rgb(133 13 67);
+}
+
+.label-released {
+  color: var(--color-white);
+  background-color: rgb(29 62 124);
+}
+
+.label-recommended {
+  color: var(--color-black);
+  background-color: rgb(80 233 187);
+}
+
+.label-discontinued, .label-closed {
+  color: var(--color-black);
+  background-color: rgb(239 216 9);
+}
+
+

app/router.js

@@ -17,6 +17,7 @@ Router.map(function () {
     this.route('discontinued');
     this.route('closed');
     this.route('ready-for-release');
+    this.route('library');
   });
   this.route('create-rfc');
   this.route('role-core-team');

app/routes/stages/library.js

@@ -0,0 +1,8 @@
+import Route from '@ember/routing/route';
+
+export default class StagesLibraryRoute extends Route {
+  async model() {
+    return (await import('rfcs-app-toc-builder:index.json'))
+      .default;
+  }
+}

app/templates/application.gjs

@@ -30,7 +30,7 @@ import { NavigationNarrator } from 'ember-a11y-refocus';
             </li>
           </ul>
         </li>
-        <li class="toc-heading">RFC library</li>
+        <li class="toc-heading"><LinkTo @route="stages.library">RFC library</LinkTo></li>
         <li class="toc-item">
           <ul class="table-of-contents sub-table-of-contents">
             <li class="toc-item">

app/templates/stages/library.gjs

@@ -0,0 +1,16 @@
+import { pageTitle } from 'ember-page-title';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  {{pageTitle "RFC library"}}
+  <div>
+    <h1>RFC library</h1>
+    <p>The table below shows all the RFCs in chronological order. If you are interested in more information you can click on the RFC or check out the specific stages.</p>
+    {{#each @model as |rfc|}}
+      <div class="rfc-card"><span>#{{rfc.number}}</span><div><LinkTo
+          @route="rfc"
+          @model={{rfc.link}}
+        >{{rfc.title}}</LinkTo></div><span class="label-{{rfc.stage}}">{{rfc.stage}}</span></div>
+    {{/each}}
+  </div>
+</template>

lib/toc-builder.js

@@ -131,6 +131,18 @@ function loadFcpData(contentFolder, dataFolder) {
       result.push(fileContents);
     }
   }
+  // the source code for "virtual-module"
+  return `${JSON.stringify(result, null, 2)}`;
+}
+
+function loadIndexData(contentFolder, dataFolder) {
+  const data = loadRFCData(contentFolder, dataFolder);
+
+  const result = [];
+
+  for (let fileContents of data) {
+      result.push({number: fileContents.number, link: fileContents.rfcFile, title: fileContents.title,stage: fileContents.currentStage});
+  }
 
   // the source code for "virtual-module"
   return `${JSON.stringify(result, null, 2)}`;
@@ -168,6 +180,12 @@ export default function tocBuilder(contentFolder, dataFolder) {
         return loadFcpData(contentFolder, dataFolder);
       }
 
+      if (id.startsWith('rfcs-app-toc-builder:index.json')) {
+        this.addWatchFile(contentFolder);
+        this.addWatchFile(dataFolder);
+        return loadIndexData(contentFolder, dataFolder);
+      }
+
       return null;
     },
   };