Overview

Custom Data Commons allows customization of the web pages on top of datacommons.org. The customization includes overall color scheme, home page content, landing pages of timeline/scatter/map tools and etc.

Environment Setup

Fork datacommonsorg/website Github repo following these instructions into a new repo, which will be used as the custom Data Commons codebase. Custom Data Commons development and deployment will be based on this forked repo.

To run website in a local environment (Mac, Linux), follow this guide. Use -e custom flag when starting the local Flask server:

./run_server.sh -e custom

Update UI Code

Update Header, Footer and Page Content

Page header and footer can be customized in base.html by updating the html element within <header></header> and <footer></footer>.

Homepage can be customized in homepage.html.

Update CSS and Javascript

The custom Data Commons provides an overrides.css to override CSS styles. It has a default color override. More style changes can be added in that file.

If there are already existing CSS and Javascript files, put them under the /static/custom_dc/custom folder. Then include these files in the <head> section of the corresponding html files as

<link href="/custom_dc/custom/<additional>.css" rel="stylesheet" />

or

<script src="/custom_dc/custom/<additional>.js"></script>

Deploy to GCP

One Time Setup

  • Install the following tools:

  • Install gke-gcloud-auth-plugin

    • gcloud components install gke-gcloud-auth-plugin

Deploy Local Change

After testing locally, follow the instructions below to deploy to GCP. project_id refers to the GCP project where custom Data Commons is installed.

  • Git commit all local changes (no need to push to Github repo). Later steps will build docker image based on the hash of this commit.

  • Run the following code to build and push docker images to the Container Registry.

    ./scripts/push_image.sh <project_id>

    Follow the link from the log to check the status until the push is complete.

  • Deploy the website to GKE:

    ./scripts/deploy_gke.sh -p <project_id>

    Check the deployment from GKE console. Once it’s done, check the UI changes from the website.