Move about page to frontend rendering

Author: yuvipanda

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

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"""
 

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",

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>,
   ),
 );

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>
+  );
+}