Complete the addendum implementation

Signed-off-by: Akashdeep Dhar <akashdeep.dhar@gmail.com>

Author: gridhead

frontend/src/features/call.js

@@ -21,7 +21,6 @@ export const callUnit = createApi({
     "QRInvite",
     "Sanction",
     "Campaign",
-    "About",
   ],
   endpoints: (builder) => ({
     retrieveIdentity: builder.query({
@@ -274,13 +273,6 @@ export const callUnit = createApi({
       }),
       invalidatesTags: (result, error, { user_id }) => [{ type: "Identity", id: user_id }, "IdentitySearch"],
     }),
-    retrieveAbout: builder.query({
-      query: () => ({
-        url: "about",
-        method: "GET",
-      }),
-      providesTags: ["About"],
-    }),
   }),
 });
 
@@ -309,6 +301,5 @@ export const {
   useUpdationIdentityMutation,
   useRetrieveCampaignQuery,
   useToggleIdentityOptOutMutation,
-  useRetrieveAboutQuery,
 } = callUnit;
 export default callUnit.reducer;

frontend/src/main.jsx

@@ -9,6 +9,7 @@ import ModeWrap from "./components/modewrap.jsx";
 import { data } from "./features/data.js";
 import Accolade from "./routes/accolade.jsx";
 import AccoList from "./routes/accolist.jsx";
+import Addendum from "./routes/addendum.jsx";
 import Callback from "./routes/callback.jsx";
 import Campaign from "./routes/campaign.jsx";
 import Category from "./routes/category.jsx";
@@ -22,7 +23,6 @@ import Rankings from "./routes/rankings.jsx";
 import Rarities from "./routes/rarities.jsx";
 import Recently from "./routes/recently.jsx";
 import UserPast from "./routes/userpast.jsx";
-import About from "./routes/about.jsx";
 
 createRoot(document.getElementById("root")).render(
   <Provider store={data}>
@@ -32,7 +32,7 @@ createRoot(document.getElementById("root")).render(
           <Route element={<Callback />} path="/callback" />
           <Route element={<MainArea />} path="/">
             <Route element={<Homepage />} index />
-            <Route element={<About />} path="about" />
+            <Route element={<Addendum />} path="addendum" />
             <Route element="" path="/profiles" />
             <Route element="" path="/userdata" />
             <Route element="" path="/operator" />

frontend/src/routes/about.jsx

@@ -0,0 +1,95 @@
+import { mdiHome } from "@mdi/js";
+import Icon from "@mdi/react";
+import { useEffect, useState } from "react";
+import { Button, Card } from "react-bootstrap";
+import Markdown from "react-markdown";
+import { useDispatch, useSelector } from "react-redux";
+import { Link } from "react-router";
+
+import { hideLoad, showLoad } from "../features/part.js";
+
+export default function Addendum() {
+  const dispatch = useDispatch();
+  const vibe = useSelector((data) => data.area.vibe);
+  const [content, setContent] = useState(null);
+
+  useEffect(() => {
+    dispatch(showLoad());
+    fetch("/docs/about.md")
+      .then((resp) => resp.text())
+      .then((text) => {
+        setContent(text);
+        dispatch(hideLoad());
+      })
+      .catch(() => {
+        setContent("Failed to load about page content.");
+        dispatch(hideLoad());
+      });
+  }, [dispatch]);
+
+  return (
+    <div className="row g-2">
+      <div className="col-12 col-lg-3">
+        <Card className="mb-2 vibe-border" style={{ "--vibe": vibe }}>
+          <Card.Body className="p-2">
+            <Card.Title className="dataelem text-truncate">Fedora Badges</Card.Title>
+            <Card.Text className="small">
+              Fedora Badges is an application built to recognize contributors to the Fedora Project, help budding and
+              existing Fedora Project members discover different ways to get involved, and encourage the general
+              improvement to free and open source software.
+            </Card.Text>
+          </Card.Body>
+        </Card>
+        <div className="d-grid gap-2">
+          <Button
+            as={Link}
+            to="/"
+            variant="outline-secondary"
+            className="d-grid d-inline-flex align-items-center ps-1 vibe-border"
+            size="sm"
+            style={{ "--vibe": vibe }}
+          >
+            <Icon path={mdiHome} size={0.875} className="me-1" />
+            Return home
+          </Button>
+        </div>
+      </div>
+      <div className="col-12 col-lg-9">
+        <Card className="mb-2 vibe-border" style={{ "--vibe": vibe }}>
+          <Card.Body className="ps-0 pe-0 pt-2 pb-0">
+            <Card.Title className="mb-0 ps-2 dataelem">About this project</Card.Title>
+            <hr className="mt-2 mb-0" />
+            <div className="p-2">
+              {content ? (
+                <Markdown
+                  components={{
+                    h1: ({ children }) => <h5 className="dataelem fw-bold">{children}</h5>,
+                    h2: ({ children }) => <h5 className="dataelem fw-bold">{children}</h5>,
+                    p: ({ children }) => (
+                      <p className="small" style={{ textAlign: "justify" }}>
+                        {children}
+                      </p>
+                    ),
+                    li: ({ children }) => <li className="small">{children}</li>,
+                    img: ({ src, alt }) => (
+                      <div className="text-center">
+                        <img src={src} alt={alt} className="img-fluid" />
+                      </div>
+                    ),
+                    a: ({ href, children }) => (
+                      <a href={href} target="_blank" rel="noopener noreferrer">
+                        {children}
+                      </a>
+                    ),
+                  }}
+                >
+                  {content}
+                </Markdown>
+              ) : null}
+            </div>
+          </Card.Body>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/routes/addendum.jsx

@@ -1,4 +1,12 @@
-import { mdiCrosshairsGps, mdiHeart, mdiHistory, mdiStarFourPoints, mdiTrophy, mdiViewGridPlus } from "@mdi/js";
+import {
+  mdiCrosshairsGps,
+  mdiHeart,
+  mdiHistory,
+  mdiInformationOutline,
+  mdiStarFourPoints,
+  mdiTrophy,
+  mdiViewGridPlus,
+} from "@mdi/js";
 import Icon from "@mdi/react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -128,6 +136,17 @@ export default function Homepage() {
             <Icon path={mdiCrosshairsGps} size={0.875} className="me-1" />
             Explore badges
           </Button>
+          <Button
+            as={Link}
+            to="/addendum"
+            variant="outline-secondary"
+            className="d-grid d-inline-flex align-items-center ps-1 vibe-border"
+            size="sm"
+            style={{ "--vibe": vibe }}
+          >
+            <Icon path={mdiInformationOutline} size={0.875} className="me-1" />
+            Service information
+          </Button>
           <Button
             as="a"
             href="https://chat.fedoraproject.org/#/room/#badges:fedoraproject.org"

frontend/src/routes/homepage.jsx

@@ -230,11 +230,3 @@ def json_rarities(rare=None):
             for rare in data["rarity"]
         }
         return jsonify(rslt)
-
-
-@bp.route("/json/about", methods=["GET"])
-def json_about():
-    """Endpoint that returns the about page content as HTML."""
-    from tahrir.utils.docs import load_docs
-    content = load_docs("about")
-    return jsonify({"content": str(content)})