This repository presents examples of customisations that can be done to the platform app UI
To customise the platform app:
- Clone the platform-app repository.
- Create a directory somewhere outside the
platform-app
repository where the customisation files will be put. - Add an environment variable called
$CUSTOMISATIONS_DIR
that points to the customisation directory created in the step above. - Inside your customisation directory you can overwrite or add new files following the same directory structure as
src/public
. - When developing new customisations, you can use the
yarn start:customise
script inside theplatform-app
repository to see your customisations reflected in the app while developing. When done developing customisations, run theyarn reset
command. - For production, you can produce a build containing the customisations by running the
yarn build:customise
script inside theplatform-app
repository. This will create abuild
directory containing static assets files (html, css, js) that you can deploy.
To customise the theme, overwrite the theme.js
file by having a theme.js
file in your customisation directory.
To customise the footer, overwrite BasePage.js
with a BasePage
component in the customisation
directory so that it uses a custom Footer component.
One can change the order of sections in the target, disease, drug, and evidence page. To do so, overwrite the configuration.js
and change the order of the strings in the arrays.
To delete sections, remove their corresponding string from the configuration.js
file
To add a section, create a directory that will contain the files related to it. This directory should have an index.js
file.
The index.js
file should have a structure as follows:
// helps to load graphql files
import { loader } from 'graphql.macro';
// the name of your new section
export const id = '<section-id>';
// the nice name you want for your new section
export const name = '<section-name>';
// a function of the response of summaryQuery, to determine whether there is data for this target (and therefore whether to load the detail or not)
export const hasSummaryData = <function>;
// (optional) queries against platform-api, the new graphql api
export const summaryQuery = loader('./summaryQuery.gql');
export const sectionQuery = loader('./sectionQuery.gql');
// react components to render the data:
// typically a string, above the main content section, but could have links
export { default as DescriptionComponent } from './Description';
// typically a string, in the summary widget, but could be more complex
export { default as SummaryComponent } from './Summary';
// the main content section
export { default as SectionComponent } from './Section';
Make sure to include the id
string in the corresponding array in configuration.js and import and export the index.js
in the corresponding sectionIndex.js
file as it's done here.