New desktop header (datacommonsorg#4598)

### Description This PR is an initial version of the desktop menu for the homepage revamp. The mobile menu is temporarily removed, so that the desktop menu can be reviewed in isolation. *This PR is not intended for merge into master until the completion of the homepage revamp* ### Notes There is still some refactoring and cleanup to do (particularly in the CSS) that will be done as part of a subsequent larger PR that includes the mobile menu. However, the functionality of the desktop can be previewed. --------- Co-authored-by: Nicholas Blumberg <[email protected]> Co-authored-by: Nick B <[email protected]> Co-authored-by: Pablo Noel <[email protected]>
beets · Sep 11, 2024 · 2cbf6fb · 2cbf6fb
1 parent 44b1d3f
commit 2cbf6fb
Show file tree

Hide file tree

Showing 19 changed files with 309 additions and 616 deletions.
diff --git a/server/__init__.py b/server/__init__.py
@@ -445,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}

diff --git a/server/config/base/header_v2.json b/server/config/base/header_v2.json
@@ -1,14 +1,76 @@
 [
   {
-    "id": "tools",
+    "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": {
-      "description": "Explore a variety of tools to visualize, analyze, and interact with the Data Commons knowledge graph and its extensive datasets"
-    },
+    "introduction": "Explore a variety of tools to visualize, analyze, and interact with the Data Commons knowledge graph and its extensive datasets.",
     "primarySectionGroups": [
       {
-        "id": "tools-0",
         "items": [
           {
             "title": "Knowledge Graph",
@@ -28,7 +90,6 @@
         ]
       },
       {
-        "id": "tools-1",
         "items": [
           {
             "title": "Map Explorer",
@@ -50,90 +111,93 @@
     ]
   },
   {
-    "id": "docs",
     "label": "Documentation",
     "ariaLabel": "Show documentation links",
-    "introduction": {
-      "description": "Access in-depth tutorials, guides, and API references to unlock the full potential of Data Commons and integrate it into your projects"
-    },
+    "introduction": "Access in-depth tutorials, guides, and API references to unlock the full potential of Data Commons and integrate it into your projects.",
     "primarySectionGroups": [
       {
-        "id": "docs-0",
         "items": [
           {
             "title": "Docs",
             "url": "https://docs.datacommons.org",
-            "description": "Learn how to access and visualize Data Commons data: docs for the website, APIs, and more, for all users and needs"
+            "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 Data Commons data programmatically, using REST and Python APIs"
+            "description": "Access a unified knowledge graph with standardized data from diverse sources using Data Commons APIs."
           }
         ]
       },
       {
-        "id": "docs-1",
         "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"
+            "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 Data Commons Knowledge Graph"
+            "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!"
           }
         ]
       }
     ]
   },
   {
-    "id": "about",
     "label": "About",
     "ariaLabel": "Show about links",
-    "introduction": {
-      "description": "Data Commons is an initiative from Google. Explore diverse data, learn to use its tools through Python examples, and stay updated on the latest news and research"
-    },
+    "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": [
       {
-        "id": "about-0",
         "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"
+            "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 available in Data Commons"
+            "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"
+              }
+            ]
           }
         ]
       },
       {
-        "id": "about-1",
         "items": [
           {
             "title": "FAQ",
             "url": "{static.faq}",
-            "description": "Find quick answers to common questions about Data Commons, its usage, data sources, and available resources"
+            "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"
+            "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"
+              }
+            ]
           }
         ]
       }
     ]
   },
   {
-    "id": "feedback",
     "label": "Feedback",
     "ariaLabel": "Give feedback",
-    "url": "https://docs.google.com/forms/d/e/1FAIpQLSc_xIinZPbO5RHDjq2a4eMoElkFgfe79U5DQ8-_kVhCNf2FJQ/viewform",
+    "url": "{static.feedback}",
     "exposeInMobileBanner": true
   }
 ]
diff --git a/server/templates/base.html b/server/templates/base.html
@@ -110,7 +110,7 @@
 
 <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 }}"