Home page, about page and build your own Data Commons page, and footer

server/__init__.py

@@ -310,6 +310,8 @@ def create_app(nl_root=DEFAULT_NL_ROOT):
       "config/home_page/topics.json")
   app.config['HOMEPAGE_PARTNERS'] = libutil.get_json(
       "config/home_page/partners.json")
+  app.config['HOMEPAGE_SAMPLE_QUESTIONS'] = libutil.get_json(
+      "config/home_page/sample_questions.json")
 
   if cfg.TEST or cfg.LITE:
     app.config['MAPS_API_KEY'] = ''
@@ -443,8 +445,10 @@ def add_language_code(endpoint, values):
   @app.context_processor
   def inject_common_parameters():
     common_variables = {
+      #TODO: replace HEADER_MENU with V2
       'HEADER_MENU': json.dumps(libutil.get_json("config/base/header.json")),
-      'FOOTER_MENU': json.dumps(libutil.get_json("config/base/footer.json"))
+      'FOOTER_MENU': json.dumps(libutil.get_json("config/base/footer.json")),
+      'HEADER_MENU_V2': json.dumps(libutil.get_json("config/base/header_v2.json")),
     }
     locale_variable = dict(locale=get_locale())
     return {**common_variables, **locale_variable}

server/config/base/header_v2.json

@@ -0,0 +1,203 @@
+[
+  {
+    "label": "Overview",
+    "ariaLabel": "Data Commons overview",
+    "introduction": "Data Commons is an open-source platform aggregating global public data for easy exploration using natural language.",
+    "primarySectionGroups": [
+      {
+        "title": "Key Features",
+        "items": [
+          {
+            "title": "Large harmonized public dataset",
+            "description": "240 billion data points across 260K statistical variables, harmonized from governmental, inter-governmental, academic and non-profit organizations"
+          },
+          {
+            "title": "Natural language interface",
+            "description": "Data Commons uses AI for natural language queries, making public data accessible and useful to all"
+          }
+        ]
+      },
+      {
+        "title": "Build your Data Commons",
+        "items": [
+          {
+            "title": "Tailor your own Data Commons",
+            "description": "Launch your own Data Commons and customize it with your own data to better engage your specific audience"
+          },
+          {
+            "title": "Explore your data with natural language",
+            "description": "Ask questions in your own words and get answers directly from your data"
+          },
+          {
+            "title": "Actionable Insights",
+            "description": "Gain actionable insights from your data in connection to global data",
+            "links": [
+              {
+                "title": "Learn more & build yours today",
+                "url": "{place.place}"
+              }
+            ]
+          }
+        ]
+      }
+    ],
+    "secondarySectionGroups": [
+      {
+        "title": "Other Data Commons",
+        "items": [
+          {
+            "title": "Partners",
+            "description": "Featured organizations who organizations have tailored their own Data Commons to meet their specific needs and goals",
+            "links": [
+              {
+                "title": "United Nations",
+                "url": "https://www.un.org",
+                "linkType": "external"
+              },
+              {
+                "title": "One.org",
+                "url": "https://one.org",
+                "linkType": "external"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "label": "Tools",
+    "ariaLabel": "Show exploration tools",
+    "introduction": "Explore a variety of tools to visualize, analyze, and interact with the Data Commons knowledge graph and its extensive datasets.",
+    "primarySectionGroups": [
+      {
+        "items": [
+          {
+            "title": "Knowledge Graph",
+            "url": "{browser.browser_main}",
+            "description": "Explore what data is available and understand the graph structure"
+          },
+          {
+            "title": "Statistical Variable Explorer",
+            "url": "{tools.stat_var}",
+            "description": "Explore statistical variable details including metadata and observations"
+          },
+          {
+            "title": "Data Download Tool",
+            "url": "{tools.download}",
+            "description": "Download data for selected statistical variables"
+          }
+        ]
+      },
+      {
+        "items": [
+          {
+            "title": "Map Explorer",
+            "url": "{tools.visualization}#visType=map",
+            "description": "Study how a selected statistical variable can vary across geographic regions"
+          },
+          {
+            "title": "Scatter Plot Explorer",
+            "url": "{tools.visualization}#visType=scatter",
+            "description": "Visualize the correlation between two statistical variables"
+          },
+          {
+            "title": "Timelines Explorer",
+            "url": "{tools.visualization}#visType=timeline",
+            "description": "See trends over time for selected statistical variables"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "label": "Documentation",
+    "ariaLabel": "Show documentation links",
+    "introduction": "Access in-depth tutorials, guides, and API references to unlock the full potential of Data Commons and integrate it into your projects.",
+    "primarySectionGroups": [
+      {
+        "items": [
+          {
+            "title": "Docs",
+            "url": "https://docs.datacommons.org",
+            "description": "Learn how to leverage the Data Commons unified database with comprehensive documentation, tutorials, and guides."
+          },
+          {
+            "title": "API",
+            "url": "https://docs.datacommons.org/api",
+            "description": "Access a unified knowledge graph with standardized data from diverse sources using Data Commons APIs."
+          }
+        ]
+      },
+      {
+        "items": [
+          {
+            "title": "Tutorials",
+            "url": "https://docs.datacommons.org/tutorials",
+            "description": "Get familiar with the Data Commons Knowledge Graph and APIs using analysis examples in Google Colab notebooks written in Python."
+          },
+          {
+            "title": "Contributions",
+            "url": "https://docs.datacommons.org/contributing/",
+            "description": "Become part of Data Commons by contributing data, tools, educational materials, or sharing your analysis and insights. Collaborate and help expand the knowledge graph!"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "label": "About",
+    "ariaLabel": "Show about links",
+    "introduction": "Data Commons is an initiative from Google. Discover how Data Commons is changing data analysis. Explore diverse data, learn to use its tools through Python examples, and stay updated on the latest news and research.",
+    "primarySectionGroups": [
+      {
+        "items": [
+          {
+            "title": "Why Data Commons",
+            "url": "{static.about}",
+            "description": "Discover why Data Commons is revolutionizing data access and analysis. Learn how its unified knowledge graph empowers you to explore diverse, standardized data."
+          },
+          {
+            "title": "Data Sources",
+            "url": "https://docs.datacommons.org/datasets/",
+            "description": "Get familiar with the Data Commons Knowledge Graph and APIs using analysis examples in Google Colab notebooks written in Python.",
+            "links": [
+              {
+                "title": "Data Updates",
+                "url": "https://www.datacommons.org/rss",
+                "linkType": "rss"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "items": [
+          {
+            "title": "FAQ",
+            "url": "{static.faq}",
+            "description": "Find quick answers to common questions about Data Commons, its usage, data sources, and available resources."
+          },
+          {
+            "title": "Blog",
+            "url": "https://blog.datacommons.org/",
+            "description": "Stay up-to-date with the latest news, updates, and insights from the Data Commons team. Explore new features, research, and educational content related to the project.",
+            "links": [
+              {
+                "title": "Blog posts",
+                "url": "https://blog.datacommons.org/rss",
+                "linkType": "rss"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "label": "Feedback",
+    "ariaLabel": "Give feedback",
+    "url": "{static.feedback}",
+    "exposeInMobileBanner": true
+  }
+]

server/config/home_page/sample_questions.json

@@ -0,0 +1,50 @@
+[
+  {
+    "category": "Sustainability",
+    "questions": [
+      "Which counties in the US have the most smoke pollution?",
+      "Which countries have the most greenhouse gas emissions?",
+      "What is the solar energy consumption around the world?"
+    ]
+  },
+  {
+    "category": "Economics",
+    "questions": [
+      "Tell me about the economy in Brazil.",
+      "Show me the breakdown of businesses by industry type in the US.",
+      "What is the GDP in Iran?"
+    ]
+  },
+  {
+    "category": "Equity",
+    "questions": [
+      "Which countries have the lowest Gini index?",
+      "Which counties in the US have the highest rates of uninsured?",
+      "What about health equity in Florida?"
+    ]
+  },
+  {
+    "category": "Education, housing and commute",
+    "questions": [
+      "When were the houses in NYC built?",
+      "Which countries have the highest college-educated population in the world?",
+      "How much time do people in San Francisco spend commuting?"
+    ]
+  },
+  {
+    "category": "Demographics",
+    "questions": [
+      "Demographics around the world",
+      "Which country has the most old people?",
+      "Which state in the US has the most Tamil speakers?"
+    ]
+  },
+  {
+    "category": "Health",
+    "questions": [
+      "How does life expectancy vary across countries in Africa?",
+      "What is the prevalence of asthma across California counties?",
+      "What are the rates of child immunization in Pakistan?"
+    ]
+  }
+]

server/routes/static.py

@@ -41,14 +41,23 @@ def homepage():
       "homepage.html",
       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', [])))
+      partners=json.dumps(current_app.config.get('HOMEPAGE_PARTNERS', [])),
+      sample_questions=json.dumps(current_app.config.get('HOMEPAGE_SAMPLE_QUESTIONS', [])))
 
 
 @bp.route('/about')
 def about():
   return lib_render.render_page("static/about.html", "about.html")
 
 
+@bp.route('/build')
+def build():
+  return lib_render.render_page(
+      "static/build.html",
+      "build.html",
+      partners=json.dumps(current_app.config.get('HOMEPAGE_PARTNERS', [])))
+
+
 @bp.route('/faq')
 def faq():
   current_date = date.today().strftime('%-d %b %Y')

server/templates/base.html

@@ -20,6 +20,8 @@
   page_id: DOM Element ID for the html element
 
   Optional variables:
+
+  is_show_header_search_bar: boolean, if true, a search bar will appear in the header. Default false.
   is_hide_full_footer: boolean, if true, hides the full expanded footer. Default false
   is_hide_sub_footer: boolean, if true, hides the sub footer. Default false
   locale: string, value for html lang attr
@@ -64,6 +66,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@300;400;500;700&family=Google+Sans+Text:wght@300;400;500;700&display=swap"
     rel="stylesheet">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined&display=block">
+  <link rel="stylesheet" href={{url_for('static', filename='css/core.min.css', t=config['VERSION'])}}>
   {% block head %}
   {% endblock %}
   {% if OVERRIDE_CSS_PATH %}
@@ -95,12 +98,13 @@
 
 <body>
 <div id="metadata-base" class="d-none"
-  data-header="{{ HEADER_MENU }}"
+  data-header="{{ HEADER_MENU_V2 }}"
   data-footer="{{ FOOTER_MENU }}"
   data-logo-path="{{ LOGO_PATH }}"
   data-name="{{ NAME }}"
   data-show-disaster="{{ SHOW_DISASTER }}"
   data-show-sustainability="{{ SHOW_SUSTAINABILITY }}"
+  data-show-header-search-bar="{{ is_show_header_search_bar }}"
   data-hide-full-footer="{{ is_hide_full_footer }}"
   data-hide-sub-footer="{{ is_hide_sub_footer }}"
   data-subfooter-extra="{{ subfooter_extra_content|safe }}"
@@ -114,7 +118,9 @@
 <script src={{url_for('static', filename='base.js', t=config['VERSION'])}} async></script>
 
 <div id="main">
-  <div id="app-header-container"></div>
+  <div id="app-header-container">
+    <div id="app-header-loader"></div>
+  </div>
   <main id="{{ main_id }}" class="main-content">
     {% block content %}
     {% endblock %}