Merge pull request #93 from OxfordRSE/templateise-front-page

Templatise the institute specific parts of the site for easy replacement
OxfordRSE · Oct 30, 2023 · c4707f5 · c4707f5
2 parents 341397c + 7f15cba
commit c4707f5
Show file tree

Hide file tree

Showing 15 changed files with 142 additions and 57 deletions.
diff --git a/.env b/.env
@@ -5,6 +5,7 @@
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
 MATERIAL_DIR=".material"
+YAML_TEMPLATE="config/oxford.yaml"
 NEXT_PUBLIC_MATERIAL_URL="https://github.com/UNIVERSE-HPC/course-material"
 NEXT_PUBLIC_BASEPATH=""
 NEXTAUTH_URL=http://localhost:3002/gutenberg/api/auth

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,15 +1,22 @@
 import React from 'react'
+import { GetStaticProps } from 'next'
+import { makeSerializable } from 'lib/utils'
 import Image from 'next/image'
 import { HiArrowCircleLeft, HiArrowCircleRight } from 'react-icons/hi'
 import ExternalLink from './ui/ExternalLink'
 import { ThemeButton } from './ui/ThemeSwitcher'
+import { PageTemplate } from 'lib/pageTemplate'
+import { Markdown } from 'components/content/Content'
 
 interface Props {
   prevUrl?: string,
-  nextUrl?: string
+  nextUrl?: string,
+  pageInfo?: PageTemplate,
 }
 
-const Footer: React.FC<Props> = ({ prevUrl, nextUrl }) => {
+
+const Footer: React.FC<Props> = ({ prevUrl, nextUrl, pageInfo}) => {
+  const footerAttrib = pageInfo?.footer;
   return (
     <footer className="mt-4 mb-2 mx-2 p-2 bg-white rounded-lg shadow md:flex md:items-center md:justify-between dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
       {prevUrl && (
@@ -18,9 +25,9 @@ const Footer: React.FC<Props> = ({ prevUrl, nextUrl }) => {
         </a>
       )}
       <span className="flex flex-wrap text-sm text-gray-500 sm:text-center dark:text-gray-400">
-        {"© 2023 "}  
-          University of Oxford, <ExternalLink href="https://www.rse.ox.ac.uk/"> Oxford Research Software
-          Engineering</ExternalLink>
+        {footerAttrib && (
+          <Markdown markdown={"© 2023 " + footerAttrib}/>
+          )}
       </span>
       <p className="flex flex-wrap items-center mt-3 text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
         For attribution and license information click the @ symbol on the top right

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,21 +1,31 @@
 import React from 'react'
 import Head from 'next/head'
 import { Course, Theme } from 'lib/material';
+import { PageTemplate } from 'lib/pageTemplate';
 var fs = require('fs');
 
 type Props = {
   theme?: Theme,
   course?: Course,
+  pageInfo?: PageTemplate,
 }
 
 //const style = fs.readFileSync('./node_modules/highlight.js/styles/github.css', "utf8");
 
-const Header: React.FC<Props> = ( props ) =>  {
+const Header: React.FC<Props> = ({ theme, course, pageInfo } ) =>  {
+  const logoSrc = pageInfo?.logo.src;
+  const logoAlt = pageInfo?.logo.alt;
+  const description = pageInfo?.description;
   return (
     <Head>
       <title>OxRSE Training</title>
-      <meta name="description" content="Created by OxRSE team" />
-      <link rel="icon" href="/ox_rse.svg" />
+      {pageInfo && (
+        <meta name="description" content={description} />
+      )}
+      {pageInfo &&(
+        <link rel="icon" href={logoSrc}/>
+      )}
+
 
       <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.css" rel="stylesheet" />
     </Head>

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -19,6 +19,7 @@ import Navbar from './Navbar'
 import { useSidebarOpen } from 'lib/hooks/useSidebarOpen'
 import useActiveEvent from 'lib/hooks/useActiveEvents'
 import { RecoilRoot } from 'recoil'
+import { PageTemplate, pageTemplate } from 'lib/pageTemplate'
 
 
 type Props = {
@@ -27,9 +28,10 @@ type Props = {
   course?: Course,
   section?: Section,
   children: ReactNode,
+  pageInfo?: PageTemplate,
 }
 
-const Layout: React.FC<Props> = ({ material, theme, course, section, children }) => {
+const Layout: React.FC<Props> = ({ material, theme, course, section, children, pageInfo }) => {
   const [ activeEvent, setActiveEvent ] = useActiveEvent();
   const router = useRouter()
   const { data: session } = useSession()
@@ -69,13 +71,13 @@ const Layout: React.FC<Props> = ({ material, theme, course, section, children })
   return (
     <RecoilRoot>
       <div className="container mx-auto">
-        <Header theme={theme} course={course}/>
+        <Header theme={theme} course={course} pageInfo={pageInfo}/>
         <main>
           <Navbar material={material} theme={theme} course={course} section={section} activeEvent={activeEvent} sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} showAttribution={showAttribution} setShowAttribution={setShowAttribution}/>  
           <Overlay material={material} course={course} theme={theme} activeEvent={activeEvent} section={section} sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen}  showAttribution={showAttribution} setShowAttribution={setShowAttribution} prevUrl={prevUrl} nextUrl={nextUrl} />
           {children}
         </main>
-        <Footer />
+        <Footer pageInfo={pageInfo}/>
       </div>
     </RecoilRoot>
   )

diff --git a/config/oxford.yaml b/config/oxford.yaml
@@ -0,0 +1,28 @@
+title:
+  OxRSE Training
+logo:
+  src: /ox_rse.svg
+  alt: OxRSE logo
+description:
+  Created by OxRSE team
+frontpage:
+  intro:
+    This is the teaching website for the [Oxford Research Software
+    Engineering Group](https://www.rse.ox.ac.uk/ ). Please see our list of past and upcoming courses
+    on the left.
+
+
+    The material for these courses is generated from a 
+    set of [markdown materials](https://github.com/UNIVERSE-HPC/course-material) collated by 
+    the [UNIVERSE-HPC project](https://universe-hpc.github.io),
+    a joint collaboration between RSE teams at Oxford, Southampton,
+    Imperial and Edinburgh, the Software Sustainability Institute and the
+    Edinburgh Parallel Computing Centre.
+
+
+    These materials have been collated from a variety of sources published under different [CC-BY licenses](https://creativecommons.org/about/cclicenses/) . The
+    attributions for each course and section are given on the relevant
+    pages, alongside the exact license of the original work.
+footer:
+  University of Oxford, [Oxford Research Software Engineering](https://www.rse.ox.ac.uk/)
+
diff --git a/lib/pageTemplate.ts b/lib/pageTemplate.ts
@@ -0,0 +1,23 @@
+import * as fs from 'fs';
+import * as yaml from 'js-yaml';
+
+
+const yamlTemplate = process.env.YAML_TEMPLATE || 'config/oxford.yaml';
+
+export type PageTemplate = {
+    title: string;
+    logo: {src: string, alt: string}
+    description: string;
+    frontpage: {intro: string}
+    footer: string
+}
+
+export const pageTemplate: PageTemplate | undefined = (() => {
+    try {
+        const fileContents = fs.readFileSync(yamlTemplate, 'utf8');
+        const data = yaml.load(fileContents) as PageTemplate;
+        return data
+    } catch (e) {
+        console.error(e);
+      }
+})();
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
     "@types/dompurify": "^2.3.4",
+    "@types/js-yaml": "^4.0.0",
     "@types/marked": "^4.0.7",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/uuid": "^9.0.0",
@@ -41,6 +42,7 @@
     "front-matter": "^4.0.2",
     "isomorphic-dompurify": "^0.23.0",
     "isomorphic-git": "^1.21.0",
+    "js-yaml": "^4.1.0",
     "marked": "^4.1.1",
     "next": "^13.4.9-canary.1",
     "next-auth": "^4.20.1",

diff --git a/pages/event/[eventId].tsx b/pages/event/[eventId].tsx
@@ -30,14 +30,16 @@ import SelectField from 'components/forms/SelectField'
 import Checkbox from 'components/forms/Checkbox'
 import SubTitle from 'components/ui/SubTitle'
 import EventCommentThreads from 'components/EventCommentThreads'
+import { PageTemplate, pageTemplate } from 'lib/pageTemplate'
 
 type EventProps = {
   material: Material,
   event: Event,
+  pageInfo?: PageTemplate,
 }
 
 
-const Event: NextPage<EventProps> = ({ material, event }) => {
+const Event: NextPage<EventProps> = ({ material, event, pageInfo}) => {
   // don't show date/time until the page is loaded (due to rehydration issues)
   const [showDateTime, setShowDateTime] = useState(false);
   useEffect(() => {
@@ -178,7 +180,7 @@ const Event: NextPage<EventProps> = ({ material, event }) => {
     </form>
   )
   return (
-    <Layout material={material}>
+    <Layout material={material} pageInfo={pageInfo}>
       { eventData && isAdmin ? (
         <Tabs.Group style="underline" >
         <Tabs.Item active icon={MdPreview} title="Event">
@@ -205,6 +207,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 
 export const getStaticProps: GetStaticProps = async (context) => {
+  const pageInfo = pageTemplate
   const eventId = parseInt(context?.params?.eventId as string);
   const event = await prisma.event.findUnique({ where: { id: eventId } });
   if (!event) {
@@ -216,7 +219,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
   remove_markdown(material, undefined)
 
   return { 
-    props: makeSerializable({ event, material }),
+    props: makeSerializable({ event, material, pageInfo }),
   }
 }
 

diff --git a/pages/event/[eventId]/[eventGroupId].tsx b/pages/event/[eventId]/[eventGroupId].tsx
@@ -24,14 +24,16 @@ import DateTimeField from 'components/forms/DateTimeField'
 import SelectField from 'components/forms/SelectField'
 import IntegerField from 'components/forms/IntegerField'
 import SubTitle from 'components/ui/SubTitle'
+import { PageTemplate, pageTemplate } from 'lib/pageTemplate'
 
 type EventGroupProps = {
   material: Material,
   event: Event,
   eventGroupId: number,
+  pageInfo?: PageTemplate,
 }
 
-const EventGroupPage: NextPage<EventGroupProps> = ({ material, event, eventGroupId }) => {
+const EventGroupPage: NextPage<EventGroupProps> = ({ material, event, eventGroupId, pageInfo }) => {
   // don't show date/time until the page is loaded (due to rehydration issues)
   const [showDateTime, setShowDateTime] = useState(false);
   useEffect(() => {
@@ -165,7 +167,7 @@ const EventGroupPage: NextPage<EventGroupProps> = ({ material, event, eventGroup
 
 
   return (
-    <Layout material={material}>
+    <Layout material={material} pageInfo={pageInfo}>
       { isAdmin ? (
         <Tabs.Group style="underline" >
         <Tabs.Item active icon={MdPreview} title="Event">
@@ -197,6 +199,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 
 export const getStaticProps: GetStaticProps = async (context) => {
+  const pageInfo = pageTemplate
   const eventId = parseInt(context?.params?.eventId as string);
   const eventGroupId = parseInt(context?.params?.eventGroupId as string);
   const event = await prisma.event.findUnique({ where: { id: eventId } });
@@ -209,7 +212,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
   remove_markdown(material, undefined)
 
   return { 
-    props: makeSerializable({ event, material, eventGroupId }),
+    props: makeSerializable({ event, material, eventGroupId, pageInfo }),
   }
 }
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,4 +1,5 @@
 import type { NextPage, GetStaticProps } from 'next'
+import React from 'react'
 import prisma from 'lib/prisma'
 import Layout from 'components/Layout'
 import { makeSerializable } from 'lib/utils'
@@ -7,20 +8,23 @@ import { basePath } from 'lib/basePath'
 import { Event } from 'lib/types';
 import { Button, Card } from 'flowbite-react'
 import EventsView from 'components/EventsView'
-import ExternalLink from 'components/ui/ExternalLink'
+import { pageTemplate, PageTemplate} from 'lib/pageTemplate'
+import { Markdown } from 'components/content/Content'
+
 
 type HomeProps = {
   material: Material,
   events: Event[],
+  pageInfo: PageTemplate,
 }
 
 
-
-const Home: NextPage<HomeProps> = ({ material, events }) => {
+const Home: NextPage<HomeProps> = ({ material, events, pageInfo }) => {
+  const intro = pageInfo.frontpage.intro;
 
   const linkClassName = "text-blue-500 hover:underline"
   return (
-    <Layout material={material}>
+    <Layout material={material} pageInfo={pageInfo}>
       <div className="px-2 md:px-10 lg:px-10 xl:px-20 2xl:px-32  grid grid-cols-1 lg:grid-cols-2 gap-4 items-start">
       <Card>
         <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
@@ -36,25 +40,7 @@ const Home: NextPage<HomeProps> = ({ material, events }) => {
           Course Material
         </h5>
         <div className="font-normal text-gray-700 dark:text-gray-400">
-
-          <p className="pb-2">
-          This is the teaching website for the <ExternalLink href="https://www.rse.ox.ac.uk/"> Oxford Research Software
-          Engineering Group</ExternalLink>. Please see our list of past and upcoming courses
-          on the left.</p>
-
-          <p className="pb-2">The material for these courses is generated from a 
-          set of <ExternalLink href="https://github.com/UNIVERSE-HPC/course-material">markdown materials</ExternalLink> collated by 
-          the <ExternalLink href="https://universe-hpc.github.io/">UNIVERSE-HPC project</ExternalLink>,
-          a joint collaboration between RSE teams at Oxford, Southhampton,
-          Imperial and Edinburgh, the Software Sustainability Institute and the
-          Edinburgh Parallel Computing Centre.</p>
-
-          <p className="pb-2">These materials have been
-          collated from a variety of sources published under different <ExternalLink href="https://creativecommons.org/about/cclicenses/">CC-BY</ExternalLink> licenses. The
-          attributions for each course and section are given on the relevant
-          pages, alongside the exact license of the original work.</p>
-
-          {/* <p>To see a graph of all the materials provided here and the dependencies between them, click on the button below</p> */}
+          {intro && (<Markdown markdown={intro}/>)}
         </div>
         <Button href={`${basePath}/material`}>
           <p>View the teaching materials</p>
@@ -80,6 +66,7 @@ const Home: NextPage<HomeProps> = ({ material, events }) => {
 
 
 export const getStaticProps: GetStaticProps = async (context) => {
+  const pageInfo = pageTemplate
 
   const events = await prisma.event.findMany({
     where: { hidden: false },
@@ -94,6 +81,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
     props: {
       material: makeSerializable(material),
       events: makeSerializable(events),
+      pageInfo: makeSerializable(pageInfo),
     },
   }
 }

diff --git a/pages/material/[themeId].tsx b/pages/material/[themeId].tsx
@@ -7,16 +7,18 @@ import Content from 'components/content/Content'
 import NavDiagram from 'components/NavDiagram'
 import Title from 'components/ui/Title'
 import { Event } from 'lib/types'
+import { PageTemplate, pageTemplate } from 'lib/pageTemplate'
 
 type ThemeComponentProps = {
   theme: Theme,
   material: Material
   events: Event[],
+  pageInfo?: PageTemplate,
 }
 
-const ThemeComponent: NextPage<ThemeComponentProps> = ({ theme, material, events }) => {
+const ThemeComponent: NextPage<ThemeComponentProps> = ({ theme, material, events, pageInfo }) => {
   return (
-    <Layout material={material} theme={theme}>
+    <Layout material={material} theme={theme} pageInfo={pageInfo}>
       <Title text={theme.name} />
       <NavDiagram material={material} theme={theme} />
       <Content markdown={theme.markdown} theme={theme} />
@@ -34,6 +36,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 
 export const getStaticProps: GetStaticProps = async (context) => {
+  const pageInfo = pageTemplate
   const events = await prisma.event.findMany({
     where: { hidden: false },
   }).catch((e) => {
@@ -52,7 +55,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
   remove_markdown(material, theme)
 
   return { 
-    props: makeSerializable({ material, theme, events }),
+    props: makeSerializable({ material, theme, events, pageInfo }),
   }
 }