11. Static Pages¶
There are a number of static pages that are available for the Bento framework. These are traditionally available by navigating to the “About” link on the Navigation Bar. In the example below, the static pages are “Bento”, “Resources”, and “GraphQL”.
Fork the GitHub repo
https://github.com/CBIIT/bento-frontend(representing your GitHub username as
Create a local clone of your fork into a local directory, represented here as
11.3.1. Make and Test the local environment changes changes¶
REACT_APP_ABOUT_CONTENT_URLvariable to gibberish. One example
$(src)/bento-frontend/src/content/prod/aboutPagesContent.yaml, and the system will show the changes
11.3.2. To Create A New Static Page with new Route¶
$(src)/bento/aboutPagesRoutes.jsadd a new path
Add a new copy of yaml property to with page name matching above path
11.3.3. Edit configuration file¶
There is a maximum of 6 pages that can appear under “About”. If no informational pages are configured to be displayed, the “About” menu option will be hidden.
To add contents to the ‘About’ menu, see “Global Navigation Bar” instructions
To edit the title for each page in the ‘About’ menu:
set the variable
titleto have the title of the page.
To set the primary or “hero” image to be tiled onto each page:
primaryContentImagewith the desired image
NOTE: You cannot use the local file for this you should point to an external image url (e.g. publicly-available, on the internet)
To set a secondary image (including, a zoom and scan-around function):
Add the Field secondaryZoomImage to show up the secondary Image
To add content for each page: (including basic formatting of it, i.e. line/paragraph breaks, bold type, hyperlinked text), follow the following syntax guide
Note: The pages need to be in ‘YAML’ format
|Link or Download File from externally hosted file||
|Bold Inline Text||
|Download Submission PDF||
11.4. Best Practices¶
It is recommended to have the title of each page in the ‘About’ menu match the title on the actual page.
The suggested syntax for YAML files is to use 2 spaces for indentation, but YAML will follow whatever indentation system that the individual file uses. In our files we used 2 spaces to represent