Home page, about page and build your own Data Commons page, and footer #4599
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Add semicolon to server script * Update .gitignore for IDE * Moved the onload functionality into a separate function and fixed typing. * Conversion of homepage.html to React. The homepage now passes template variables to main.ts, which initializes a React app. All homepage components are now implemented via this React app. Typing files that could potentially be shared later were put into typing files in the shared directory. * The backend is now sending the topics to the homepage as json, removing the need for json treatment on the front-end. * The header and footer of the base template are now React apps. A note that we will have to convert in a subsequent push all existing onLoad calls for existing React Apps to use an event listener to allow multiple apps to be called on one page from different places. There is also room for some refactoring and cleanup. * Converted the extraction of translated label meta-data into a loop rather than having it be explicit. * Conversion of window.onload calls to window.addEventListener. The trigger for this change is the chance that we might get multiple window.onload assignments in different places (with only the last applied assignment being run). This became an issue when the base template was given JavaScript (for the header and footer). It isn't a further issue yet because those are using addEventListener, but by pre-emptively converting all window.onloads, we prevent future clashes. * With the goal both of abstracting the data from the content of the header and footer (the menus) and to facilitate customization, the base components have been reworked. The metadata passed to the front-end via the Jinja templates have been separated out from the main template, and the dictionaries they tie into are no longer strict TypeScript objects, but records. They store as keys the original text, and as a value the translation. The objects themselves are proxies that return the original text back if a translation does not exist. This makes the interaction between the templates, the TypeScript/JavaScript and the React components more flexible. The routing has been reworked in the same way. The header and footer menus themselves are json files located in a data directory inside the base app section. They can be overridden to make custom menus by saving them as "header_custom_dc.json" in the same directory and customizing that file (likewise with footer). The webpack configuration is updated to facilitate these optional imports. * The json that supplies the header and footer menu items is now moved to the backend and injected into the context of every endpoint. We still need to consider a simple way to allow for the overriding of this for custom templates. * Update .gitignore for IDE * Moved the onload functionality into a separate function and fixed typing. * Conversion of homepage.html to React. The homepage now passes template variables to main.ts, which initializes a React app. All homepage components are now implemented via this React app. Typing files that could potentially be shared later were put into typing files in the shared directory. * The backend is now sending the topics to the homepage as json, removing the need for json treatment on the front-end. * The header and footer of the base template are now React apps. A note that we will have to convert in a subsequent push all existing onLoad calls for existing React Apps to use an event listener to allow multiple apps to be called on one page from different places. There is also room for some refactoring and cleanup. * Converted the extraction of translated label meta-data into a loop rather than having it be explicit. * Conversion of window.onload calls to window.addEventListener. The trigger for this change is the chance that we might get multiple window.onload assignments in different places (with only the last applied assignment being run). This became an issue when the base template was given JavaScript (for the header and footer). It isn't a further issue yet because those are using addEventListener, but by pre-emptively converting all window.onloads, we prevent future clashes. * With the goal both of abstracting the data from the content of the header and footer (the menus) and to facilitate customization, the base components have been reworked. The metadata passed to the front-end via the Jinja templates have been separated out from the main template, and the dictionaries they tie into are no longer strict TypeScript objects, but records. They store as keys the original text, and as a value the translation. The objects themselves are proxies that return the original text back if a translation does not exist. This makes the interaction between the templates, the TypeScript/JavaScript and the React components more flexible. The routing has been reworked in the same way. The header and footer menus themselves are json files located in a data directory inside the base app section. They can be overridden to make custom menus by saving them as "header_custom_dc.json" in the same directory and customizing that file (likewise with footer). The webpack configuration is updated to facilitate these optional imports. * The json that supplies the header and footer menu items is now moved to the backend and injected into the context of every endpoint. We still need to consider a simple way to allow for the overriding of this for custom templates. * Updated the home page to use the newer routing flow introduced during work on the base section. * Update Ids set in loop to be set based on a sluggified version of the label. --------- Co-authored-by: Jennifer Blumberg <[email protected]>
- The Github Repository link is added into the footer. - A fix has been applied so that boolean flags pulled from the templates are recognized regardless of the case (this solves the issue where the full footer was always displaying). - TRANSLATORS tags are returned to the templates. Note that some `trans` tags did not have TRANSLATOR tags in the original templates (this is easier to see now that the tags are all in one place). - Comments have been added to functions exported from utilities. - general.ts has been folded into base.ts.
…data-hompeage" (for future collision-proofing), added copywrite note and descriptor to typing files that did not have them.
…e page as the new homepage diverges, we are forking the new homepage to a "_v2". Currently, we are only generating a version two of the JavaScript file, but as we restyle, we will generate a version 2 of the CSS as well. This way, templates that include the old .js and .css files will continue to work as they do now.
… page, and some minor TypeScript fixes. We also added in some missing comments.
We were somewhat limited in how efficiently we could clean up the labels with macros because of the translators tags.
…and non-existent routes now throw errors.
…as not been styled to match the design. As part of this commit, we have defined the header structure for the data source that populates the rich menu (a somewhat more complicated structure than the previous header). We have separated the natural languages search bar component into a parent that calls one of two variant implementations in order to accommodate both the header version (which will be quite different in how it looks) and the standard version.
…uch as feeback) that do not trigger a rich menu. This also pushes an initial (very WIP) setup for the mobile menu.
… single bottom border sliding to accommodate the size of the content. Added some transitions to animate the incoming content.
…new-pages # Conflicts: # static/js/apps/build/app.tsx
…atacommons-website into feature/new-pages
…econd slider until we receive the actual content).
…atacommons-website into feature/new-pages
dwnoble
reviewed
Sep 9, 2024
| @@ -0,0 +1,40 @@ | |||
| /** | |||
| * Copyright 2023 Google LLC | |||
| @@ -0,0 +1,37 @@ | |||
| /** | |||
| * Copyright 2023 Google LLC | |||
…e the header footer. We are now passing this up in the base section's header app, and through to the header component. Note that this still requires styling.
…atacommons-website into feature/new-pages
beets
approved these changes
Sep 9, 2024
| * limitations under the License. | ||
| */ | ||
|
|
||
| /* Styles for the build your own component located on the about page */ |
There was a problem hiding this comment.
Suggested change
| /* Styles for the build your own component located on the about page */ | |
| /* Styles for the build your own component located on the build page */ |
| @@ -0,0 +1,40 @@ | |||
| .text-columns { | |||
There was a problem hiding this comment.
super nit: please add the copyright
| * Styles for the topics component located on the home page | ||
| */ | ||
|
|
||
| .topics { |
There was a problem hiding this comment.
P2: We use "topics" quite a bit across the site, so would prefer if this was renamed (or prefixed).
Comment on lines
+21
to
+27
| @import "./components/hero_video"; | ||
| @import "./components/sample_questions"; | ||
| @import "./components/tools"; | ||
| @import "./components/partners"; | ||
| @import "./components/build_your_own"; | ||
| @import "./components/topics"; | ||
| @import "./components/slide_carousel"; |
There was a problem hiding this comment.
also P2: would prefer if these were in a subfolder for these static or article style pages (as opposed to our data or topic explorer tools)
static/css/new_variables.scss
Outdated
There was a problem hiding this comment.
P2: we can drop "new" from the filename.
| @@ -128,3 +128,11 @@ export const extractLabels = (elementId = "metadata-labels"): Labels => { | |||
|
|
|||
| return labels; | |||
| }; | |||
|
|
|||
| //A breakpoints constant object for responsiveness, for access on the TypeScript side. | |||
There was a problem hiding this comment.
P2: we should add a pointer to this file from the css so it's kept in sync.
# Conflicts: # static/css/core.scss # static/js/apps/base/components/header_bar/header_bar.tsx # static/js/apps/base/components/header_bar/menu_desktop.tsx # static/js/apps/base/components/header_bar/menu_desktop_rich_menu.tsx # static/js/apps/base/components/header_bar/menu_mobile.tsx # static/js/apps/base/components/header_bar/menu_mobile_rich_menu.tsx # static/js/apps/base/header_app.tsx # static/js/apps/base/main.ts # static/js/apps/homepage/app_v2.tsx # static/js/shared/types/base.ts
beets
pushed a commit
to beets/website
that referenced
this pull request
Sep 11, 2024
datacommonsorg#4599) ### Description This PR implements the new home, about page and “build your own Data Commons” page, as well as the footer. The about page is located at `/about` and the “build your own Data Commons” is located at `/build`. As part of this PR, we have begun a process of refactoring some of the functionality into components, including generic components that can be used in other areas of the application later (such as text, text/media, quote and carousel components). ### A Note This PR is not fully finished yet. There is some work pending on the carousel, as well some fine-tuning of some of the styling and some refactoring. However, it is substantially ready for review. ### Description This PR implements the new home, about page and “build your own Data Commons” page, as well as the footer. The about page is located at `/about` and the “build your own Data Commons” is located at `/build`. As part of this PR, we have begun a process of refactoring some of the functionality into components, including generic components that can be used in other areas of the application later (such as text, text/media, quote and carousel components). ### A Note This PR is not fully finished yet. There is some work pending on the carousel, as well some fine-tuning of some of the styling and some refactoring. However, it is substantially ready for review. --------- Co-authored-by: Jennifer Blumberg <[email protected]> Co-authored-by: Pablo Noel <[email protected]>
nick-next
added a commit
that referenced
this pull request
Oct 31, 2024
## Description This PR contains miscellaneous updates and improvements triggered from comments in an earlier PR: [4599](#4599) It contains the following updates: * The TypeScript breakpoint object is standardized to defaults, and comments now reference the TypeScript and SCSS version so that they can be kept in sync with further changes. * The `Topics` component has been generalized into a `LinkChips` component, making it a more reusable content component. This update was triggered by the request to change the CSS class from "topics" (which was also done along with this larger change). We can generalize other content components in later PRs. * The directory for the SCSS files relating to content components is now renamed to make that structure more clear. * Updates to comments, copyright notices and the variable import file name.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR implements the new home, about page and “build your own Data Commons” page, as well as the footer.
The about page is located at
/aboutand the “build your own Data Commons” is located at/build.As part of this PR, we have begun a process of refactoring some of the functionality into components, including generic components that can be used in other areas of the application later (such as text, text/media, quote and carousel components).
A Note
This PR is not fully finished yet. There is some work pending on the carousel, as well some fine-tuning of some of the styling and some refactoring. However, it is substantially ready for review.
Description
This PR implements the new home, about page and “build your own Data Commons” page, as well as the footer.
The about page is located at
/aboutand the “build your own Data Commons” is located at/build.As part of this PR, we have begun a process of refactoring some of the functionality into components, including generic components that can be used in other areas of the application later (such as text, text/media, quote and carousel components).
A Note
This PR is not fully finished yet. There is some work pending on the carousel, as well some fine-tuning of some of the styling and some refactoring. However, it is substantially ready for review.