From 0a4e84c1f0bc7005f21d92fff606a00563e7fe14 Mon Sep 17 00:00:00 2001
From: YuviPanda <yuvipanda@gmail.com>
Date: Thu, 23 May 2024 18:30:02 -0700
Subject: [PATCH] Move about page to frontend rendering

---
 binderhub/app.py                        |  5 ++---
 binderhub/base.py                       | 14 -------------
 binderhub/main.py                       |  3 +++
 binderhub/static/js/App.jsx             | 11 ++++++++++
 binderhub/static/js/pages/AboutPage.jsx | 17 ++++++++++++++++
 binderhub/templates/about.html          | 27 -------------------------
 6 files changed, 33 insertions(+), 44 deletions(-)
 create mode 100644 binderhub/static/js/pages/AboutPage.jsx
 delete mode 100644 binderhub/templates/about.html

diff --git a/binderhub/app.py b/binderhub/app.py
index 279678385..f202627ce 100644
--- a/binderhub/app.py
+++ b/binderhub/app.py
@@ -42,7 +42,7 @@
 )
 from traitlets.config import Application
 
-from .base import AboutHandler, Custom404, VersionHandler
+from .base import Custom404, VersionHandler
 from .build import BuildExecutor, KubernetesBuildExecutor, KubernetesCleaner
 from .builder import BuildHandler
 from .events import EventLog
@@ -993,8 +993,7 @@ def initialize(self, *args, **kwargs):
             # In API only mode the endpoints in the list below
             # are unregistered as they don't make sense in a API only scenario
             handlers += [
-                (r"/about", AboutHandler),
-                (r"/(?:v2/.*)?", MainHandler),
+                (r"/(?:v2/.*|about)?", MainHandler),
                 (r"/repo/([^/]+)/([^/]+)(/.*)?", LegacyRedirectHandler),
                 (r"/api/repoproviders", RepoProvidersHandlers),
                 # for backward-compatible mybinder.org badge URLs
diff --git a/binderhub/base.py b/binderhub/base.py
index 4a3d9f759..51adc1fe4 100644
--- a/binderhub/base.py
+++ b/binderhub/base.py
@@ -229,20 +229,6 @@ def prepare(self):
         raise web.HTTPError(404)
 
 
-class AboutHandler(BaseHandler):
-    """Serve the about page"""
-
-    async def get(self):
-        self.render_template(
-            "about.html",
-            base_url=self.settings["base_url"],
-            submit=False,
-            binder_version=binder_version,
-            message=self.settings["about_message"],
-            extra_footer_scripts=self.settings["extra_footer_scripts"],
-        )
-
-
 class VersionHandler(BaseHandler):
     """Serve information about versions running"""
 
diff --git a/binderhub/main.py b/binderhub/main.py
index 4f733d326..792d038e4 100644
--- a/binderhub/main.py
+++ b/binderhub/main.py
@@ -5,6 +5,7 @@
 from tornado.httputil import url_concat
 from tornado.web import authenticated
 
+from . import __version__ as binder_version
 from .base import BaseHandler
 
 
@@ -23,6 +24,8 @@ def get(self):
             "logoUrl": self.static_url("logo.svg"),
             "logoWidth": "320px",
             "repoProviders": repoproviders_display_config,
+            "aboutMessage": self.settings["about_message"],
+            "binderVersion": binder_version,
         }
         self.render_template(
             "page.html",
diff --git a/binderhub/static/js/App.jsx b/binderhub/static/js/App.jsx
index 022cb4e8d..42e3a74bb 100644
--- a/binderhub/static/js/App.jsx
+++ b/binderhub/static/js/App.jsx
@@ -10,6 +10,7 @@ import "@fontsource/clear-sans/300.css";
 import "@fontsource/clear-sans/400.css";
 import { HomePage } from "./pages/HomePage.jsx";
 import { createRoutesFromElements } from "react-router";
+import { AboutPage } from "./pages/AboutPage.jsx";
 
 export const PAGE_CONFIG = window.pageConfig;
 
@@ -64,6 +65,16 @@ const router = createBrowserRouter(
           element={<LoadingPage baseUrl={BASE_URL} />}
         />
       ))}
+      <Route
+        key="about"
+        path={`${PAGE_CONFIG.baseUrl}about`}
+        element={
+          <AboutPage
+            aboutMessage={PAGE_CONFIG.aboutMessage}
+            binderVersion={PAGE_CONFIG.binderVersion}
+          />
+        }
+      />
     </Route>,
   ),
 );
diff --git a/binderhub/static/js/pages/AboutPage.jsx b/binderhub/static/js/pages/AboutPage.jsx
new file mode 100644
index 000000000..9f1f37a65
--- /dev/null
+++ b/binderhub/static/js/pages/AboutPage.jsx
@@ -0,0 +1,17 @@
+export function AboutPage({ aboutMessage, binderVersion }) {
+  return (
+    <div className="text-center">
+      <h3>BinderHub</h3>
+      <div>
+        <p>
+          This website is powered by{" "}
+          <a href="https://github.com/jupyterhub/binderhub">BinderHub</a> v
+          {binderVersion}
+        </p>
+        {aboutMessage && (
+          <p dangerouslySetInnerHTML={{ __html: aboutMessage }}></p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/binderhub/templates/about.html b/binderhub/templates/about.html
deleted file mode 100644
index b18f14b70..000000000
--- a/binderhub/templates/about.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% extends "page.html" %}
-
-{% block main %}
-<div id="main" class="container">
-  <div class="row">
-    <div class="col-lg-10 col-lg-offset-1">
-      {% block header %}
-      <div id="header" class="text-center">
-        <h3>BinderHub</h3>
-        <div id="explanation">
-          <p>This website is powered by <a href="https://github.com/jupyterhub/binderhub">BinderHub</a> v{{ binder_version }}.
-          </p>
-          {% if message %}
-          <p>
-            {{ message | safe }}
-          </p>
-          {% endif %}
-        </div>
-      </div>
-      {% endblock header %}
-    </div>
-  </div>
-</div>
-{% endblock main %}
-
-{% block footer %}
-{% endblock footer %}