dmijatovic commented 1 year ago

Custom Imperial College homepage starter

This is the starter/example/template of custom homepage for Imperial College London. @dalonsoa Maybe you can use this PR/branch as a starter?

Used frontend technologies (knowledge required/use documentation):

Basic setup

To add a custom landing page for imperial we use the following two-stage approach:

There is a frontend/components/home/imperial folder located in this repo that contains the components needed for the Imperial landing page. An simple template is provided (see below for more details) which can be extended.
There is a separate deployment/imperial folder (in the .gitignore of this repo) which contains data items like settings.json, index.css, fonts, etc. As there can only be one copy of these files, the different implementations (default, helmholtz, imperial) have different value and will clash. We therefore mount this folder separately in the docker-compose.yml (example provided in the PR). This allows each instance of the RSD to use its own styles. An example of the content of this folder is provided in imperial.zip. See below for more details.

Changes proposed in this pull request:

Added support for imperial host name in the homepage route (/frontend/pages/index.tsx)
Added ignore rule to ignore /deployment/imperial folder. This is the folder where all custom settings should be saved. The content of this folder is mounted into the frontend image for docker development using make frontend-docker
Mounted deployment/imperial folders in the docker-compose.yml (as demo how it should be done).
Added frontend/components/home/imperial folder and the starter components.
- CounterBox.tsx: simple/basic example of counter component. Further customization needed
- index.tsx: main entry point for custom Imperial College Homepage. It has basic meta tags, default app header and footer and custom main content (see next component)
- MainContentImperialCollege.tsx: This component is starter where custom content and additional custom imperial components are placed.
- useImperialData.tsx: is custom React hook that can be used to perform additional api calls that are specific for this custom page

How to test:

download imperial.zip file. It contains the custom files that can be used. Unzip the content into deployment folder. After unzipping you should have following structure in the deployment/imperial folder:
- data: holds settings.json where you can specify host.name, other contact information and the theme collors. I changed few values: host name, logo, contact email, primary and secondary colors. Further adjustments of settings.json are needed.
- images: all images are stored in this folder. I added imperial-college-logo.svg. Add all other custom images you will be using.
- styles: index.css is global css file imported in the main template (see frontend/pages/_document.tsx - line 44). Here you can specify additional global custom styles and the custom fonts. The attached file currently defines RSD custom fonts. The file should be updated to custom Imperial College fonts and RSD fonts removed if you do not want to use them.
make frontend-docker to run development in docker and have the custom settings and styles mounted. The homepage should look like image below
The frontend is on http://localhost:3000/
Note! You will need to reload the page manually after changing the values in /deployment/imperial/data/settings.json. For example by changing host.name from imperial to rsd will load default rsd home page content, or when using helmholtz you should see custom Helmholtz page.

{
  "host": {
    "name": "imperial",
    "email": "rsd@imperial-college.com",
    "emailHeaders": [],
    "logo_url": "/images/imperial-college-logo.svg",
    "website": "https://www.imperial.ac.uk/",
    "feedback": {
      "enabled": true,
      "url": "rsd@esciencecenter.nl",
      "issues_page_url": "https://github.com/research-software-directory/RSD-as-a-service/issues"
    },
    "login_info_url":"https://research-software-directory.github.io/documentation/getting-access.html",
    "terms_of_service_url": "/page/terms-of-service/",
    "privacy_statement_url": "/page/privacy-statement/"
  },
 ... other settings
}

Current state of custom homepage for Imprial College London

PR Checklist:

[ ] Increase version numbers in docker-compose.yml
[ ] Link to a GitHub issue
[ ] Update documentation
[ ] Tests

dalonsoa commented 1 year ago

Hi @dmijatovic , many thanks for putting this together. It is incredibly useful and will make our life way easier.

I cannot give you a date for us to work on this, but I suspect that it will be while you're away. I am sure we will manage, so don't worry too much. Chances are this will be tackled by @cc-a , who leads the project from our side, and @CWestICL , another member of our team who has experience with React.

We will keep in touch.