Merge pull request #589 from EBISPOT/meta

add page metadata (#588)
EBISPOT · Nov 22, 2023 · ad664a3 · ad664a3
2 parents 03451bc + 0b113b7
commit ad664a3
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 4 deletions.
diff --git a/frontend/index.html.in b/frontend/index.html.in
@@ -15,7 +15,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="OLS is a repository for biomedical ontologies that aims to provide a single point of access to the latest ontology versions"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { Fragment, useEffect } from "react";
 import {
   BrowserRouter,
   Navigate,
@@ -20,10 +20,16 @@ import OntologyPage from "./pages/ontologies/OntologyPage";
 import EntityPage from "./pages/ontologies/entities/EntityPage";
 import { getEntity } from "./pages/ontologies/ontologiesSlice";
 import Search from "./pages/search/Search";
+import {Helmet} from "react-helmet";
 
 class App extends React.Component {
   render() {
     return (
+      <Fragment>
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>Ontology Lookup Service (OLS)</title>
+        </Helmet>
       <BrowserRouter basename={process.env.PUBLIC_URL!}>
         <Routes>
           <Route path={`*`} element={<Error />} />
@@ -84,6 +90,7 @@ class App extends React.Component {
         </Routes>
         <Footer />
       </BrowserRouter>
+      </Fragment>
     );
   }
 }

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -1,7 +1,9 @@
 import { Link } from "react-router-dom";
 import urlJoin from "url-join";
+import { Helmet } from 'react-helmet';
 
 export default function Header({ section }: { section?: string }) {
+
   return (
     <header
       className="bg-black bg-right bg-cover"
@@ -12,6 +14,10 @@ export default function Header({ section }: { section?: string }) {
           "')",
       }}
     >
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>{caps(section)} - Ontology Lookup Service</title>
+        </Helmet>
       <div className="container mx-auto px-4 flex flex-col md:flex-row md:gap-10">
         <div className="py-6 self-center">
           <a href={urlJoin(process.env.PUBLIC_URL!, "/")}>
@@ -95,3 +101,8 @@ export default function Header({ section }: { section?: string }) {
     </header>
   );
 }
+
+function caps(str) {
+    return str[0].toUpperCase() + str.slice(1);
+}
+
diff --git a/frontend/src/pages/ontologies/OntologyPage.tsx b/frontend/src/pages/ontologies/OntologyPage.tsx
@@ -29,6 +29,7 @@ import EntityTree from "./entities/EntityTree";
 import MetadataTooltip from "./entities/entityPageSections/MetadataTooltip";
 import addLinksToText from "./entities/entityPageSections/addLinksToText";
 import { getOntology } from "./ontologiesSlice";
+import {Helmet} from 'react-helmet';
 
 export default function OntologyPage() {
   const params = useParams();
@@ -91,10 +92,18 @@ export default function OntologyPage() {
     if (errorMessage) navigate("/error", { state: { message: errorMessage } });
   }, [errorMessage, navigate]);
 
-  document.title = ontology?.getName() || ontologyId;
+
+  let pageTitle = ontology?.getName() || ontologyId.toUpperCase();
+  let pageDesc = ontology?.getDescription();
+
   return (
     <div>
       <Header section="ontologies" />
+        <Helmet>
+          <meta charSet="utf-8" />
+          {pageTitle && <title>{ontologyId.toUpperCase()} - Ontology Lookup Service</title>}
+          {pageDesc && <meta name="description" content={ontology?.getDescription()}/>}
+        </Helmet>
       <main className="container mx-auto px-4">
         {ontology ? (
           <div className="my-8">

diff --git a/frontend/src/pages/ontologies/entities/EntityPage.tsx b/frontend/src/pages/ontologies/entities/EntityPage.tsx
@@ -45,6 +45,7 @@ import PropertyCharacteristicsSection from "./entityPageSections/PropertyCharact
 import PropertyInverseOfSection from "./entityPageSections/PropertyInverseOfSection";
 import RangeSection from "./entityPageSections/RangeSection";
 import addLinksToText from "./entityPageSections/addLinksToText";
+import { Helmet } from 'react-helmet'
 
 export default function EntityPage({
   entityType,
@@ -143,10 +144,17 @@ export default function EntityPage({
     if (errorMessage) navigate("/error", { state: { message: errorMessage } });
   }, [errorMessage, navigate]);
 
-  document.title = entity?.getShortForm() || entity?.getName() || ontologyId;
+  let pageTitle = entity?.getShortForm() || entity?.getName() || ontologyId;
+  let pageDesc = entity?.getDescription() || entity?.getName();
+
   return (
     <div>
       <Header section="ontologies" />
+        <Helmet>
+          <meta charSet="utf-8" />
+          {pageTitle && <title>{pageTitle}</title>}
+          {pageDesc && <meta name="description" content={pageDesc}/>}
+        </Helmet>
       <main className="container mx-auto px-4">
         {ontology && entity ? (
           <div className="my-8">