Skip to content

Commit

Permalink
Feature/home page react (#1) (#4588)
Browse files Browse the repository at this point in the history
## Description

This PR converts the home page to React. The conversion keeps the
functionality and appearance of the home page unchanged, but contains
substantial changes to how these pages are composed. This is an interim
step to implementing the redesign of the home page.

*This PR is not intended for merge into master until the completion of
the homepage revamp*

## Notes

In addition to the conversion of the content of home page, this PR also
converts the header and footer of the site to React, also in
anticipation of the home page redesign.

New React apps were added in the homepage (rendered by
`homepage/main.ts`) and the base template (rendered in `base/main.ts`).

To facilitate different modules independently rendering components on
load, the `window.onLoad` assignments have in all modules been converted
to `window.addEventListener` (without this change, only the last
assigned onLoad handler is applied).

We set up a system of standardized transferring of routing and
translation label information from the Jinja templates to the
TypeScript. The routing and translations are now rendered into
respective elements in an auxiliary template that is included by the
base template. These can then be read by any TypeScript module (such as
a `main.ts`) and then passed through to to the relevant apps. Individual
pages can still independently read their own attributes past up through
the templates.

## Considerations

Previously, the menu content in the headers and footers were contained
directly in the templates. The move to rendering with React components
presents an opportunity separate this content from the actual
implementation of the header and footer, with the goal of making it
easier for forks to override the content without having to make any
changes to the component that implements it.

We have tentatively set up a process by which the header and footer
content are sent through from the backend as JSON (in a similar way to
how the partners and topics are sent through to the homepage).

The goal here will be to set up an easy way for a fork to provide a
custom version of the header or footer in their own backend (for
example, with the commonly used `_custom_dc` tag in the filename), to
override in the fork without affecting the core. This could be done
either in a separate PR, or following feedback and discussion, in this
PR.

### Future Fork Customization

Before this project is completed, we will need to consider the potential
fork customization options for the new React structure of the home page
(as we are no longer dealing with a scenario where a significant amount
of the material to be customized lies in the template).

We can consider three levels of customization that a fork might want to
implement:
* Content: This is the simplest customization, referred to above, where
they may which to change the available menus and associated text.
* Style: In this scenario, a fork may which to keep the structure of the
components intact, but style the components (changing fonts, colors, and
the layout to the degree that the structure allows).
* Components: Here, a fork may choose to remove, edit or otherwise
substantially change the components themselves.

These will be considered as development of the homepage revamping
progresses.

---------

Co-authored-by: Nicholas Blumberg <[email protected]>
Co-authored-by: Nick B <[email protected]>
  • Loading branch information
3 people authored Sep 6, 2024
1 parent f5e8e87 commit cd25b8f
Show file tree
Hide file tree
Showing 61 changed files with 2,008 additions and 419 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ screenshots/screenshot_url.json
# Local env.
*.swp
.vscode
.idea
!.vscode/launch.json
.env.list

Expand Down
11 changes: 8 additions & 3 deletions server/__init__.py
Original file line number Diff line number Diff line change
Expand Up @@ -439,10 +439,15 @@ def add_language_code(endpoint, values):
return
values['hl'] = g.locale

# Provides locale parameter in all templates
# Provides locale and other common parameters in all templates
@app.context_processor
def inject_locale():
return dict(locale=get_locale())
def inject_common_parameters():
common_variables = {
'HEADER_MENU': json.dumps(libutil.get_json("config/base/header.json")),
'FOOTER_MENU': json.dumps(libutil.get_json("config/base/footer.json"))
}
locale_variable = dict(locale=get_locale())
return {**common_variables, **locale_variable}

@app.teardown_request
def log_unhandled(e):
Expand Down
90 changes: 90 additions & 0 deletions server/config/base/footer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
[
{
"label": "Tools",
"subMenu": [
{
"href": "{place.place}",
"label": "Place Explorer"
},
{
"href": "{browser.browser_main}",
"label": "Knowledge Graph"
},
{
"href": "{tools.visualization}#visType=timeline",
"label": "Timelines Explorer"
},
{
"href": "{tools.visualization}#visType=scatter",
"label": "Scatter Plot Explorer"
},
{
"href": "{tools.visualization}#visType=map",
"label": "Map Explorer"
},
{
"href": "{tools.stat_var}",
"label": "Statistical Variable Explorer"
},
{
"href": "{tools.download}",
"label": "Data Download Tool"
}
]
},
{
"label": "Documentation",
"subMenu": [
{
"href": "https://docs.datacommons.org",
"label": "Documentation"
},
{
"href": "https://docs.datacommons.org/api",
"label": "APIs"
},
{
"hide": true,
"href": "https://docs.datacommons.org/bigquery",
"label": "BigQuery"
},
{
"href": "https://docs.datacommons.org/tutorials",
"label": "Tutorials"
},
{
"href": "https://docs.datacommons.org/contributing/",
"label": "Contribute"
},
{
"href": "http://github.com/datacommonsorg",
"label": "Github Repository"
}
]
},
{
"label": "Data Commons",
"subMenu": [
{
"href": "{static.about}",
"label": "About Data Commons"
},
{
"href": "https://blog.datacommons.org/",
"label": "Blog"
},
{
"href": "https://docs.datacommons.org/datasets/",
"label": "Data Sources"
},
{
"href": "{static.feedback}",
"label": "Feedback"
},
{
"href": "{static.faq}",
"label": "Frequently Asked Questions"
}
]
}
]
89 changes: 89 additions & 0 deletions server/config/base/header.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
[
{
"label": "Explore",
"ariaLabel": "Show exploration tools",
"subMenu": [
{
"href": "{place.place}",
"label": "Place Explorer"
},
{
"href": "{browser.browser_main}",
"label": "Knowledge Graph"
},
{
"href": "{tools.visualization}#visType=timeline",
"label": "Timelines Explorer"
},
{
"href": "{tools.visualization}#visType=scatter",
"label": "Scatter Plot Explorer"
},
{
"href": "{tools.visualization}#visType=map",
"label": "Map Explorer"
},
{
"href": "{tools.stat_var}",
"label": "Statistical Variable Explorer"
},
{
"href": "{tools.download}",
"label": "Data Download Tool"
}
]
},
{
"label": "Documentation",
"ariaLabel": "Show documentation links",
"subMenu": [
{
"href": "https://docs.datacommons.org",
"label": "Documentation"
},
{
"href": "https://docs.datacommons.org/api",
"label": "APIs"
},
{
"hide": true,
"href": "https://docs.datacommons.org/bigquery",
"label": "BigQuery"
},
{
"href": "https://docs.datacommons.org/tutorials",
"label": "Tutorials"
},
{
"href": "https://docs.datacommons.org/contributing/",
"label": "Contribute"
}
]
},
{
"label": "About",
"ariaLabel": "Show about links",
"subMenu": [
{
"href": "{static.about}",
"label": "About Data Commons"
},
{
"href": "https://blog.datacommons.org/",
"label": "Blog"
},
{
"href": "https://docs.datacommons.org/datasets/",
"label": "Data Sources"
},
{
"href": "{static.faq}",
"label": "FAQ"
},
{
"href": "{static.feedback}",
"label": "Feedback"
}
]
}
]
2 changes: 1 addition & 1 deletion server/routes/static.py
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ def homepage():
return lib_render.render_page(
"static/homepage.html",
"homepage.html",
topics=current_app.config.get('HOMEPAGE_TOPICS', []),
topics=json.dumps(current_app.config.get('HOMEPAGE_TOPICS', [])),
partners_list=current_app.config.get('HOMEPAGE_PARTNERS', []),
partners=json.dumps(current_app.config.get('HOMEPAGE_PARTNERS', [])))

Expand Down
Loading

0 comments on commit cd25b8f

Please sign in to comment.