updates designs; adds new page-wide layout

GSA · Feb 16, 2024 · 8dc3221 · 8dc3221
1 parent ade5257
commit 8dc3221
Show file tree

Hide file tree

Showing 5 changed files with 250 additions and 123 deletions.
diff --git a/_includes/layouts/page-wide.html b/_includes/layouts/page-wide.html
@@ -0,0 +1,11 @@
+---
+layout: layouts/base
+---
+
+{% comment %}
+This template is for a full-bleed page that does not have a date associated with it.
+{% endcomment %}
+
+<div id="main-content" class="usa-layout-docs padding-top-5">
+  {{content}}
+</div>
diff --git a/pages/about.html b/pages/about.html
@@ -0,0 +1,134 @@
+---
+excerpt: Who developed Data.gov? With what technology is Data.gov built?
+link: https://www.data.gov/about
+redirect_from:
+- /faq/
+- /climate/faq/
+slug: about
+title: About Us
+layout: layouts/page-wide
+---
+
+<div id="top"></div>
+
+<div class="grid-container">
+  <div class="usa-prose">
+    <h1 id="about">{{ title }}</h1>
+  </div>
+  <section class="usa-section">
+    <div class="grid-row grid-gap-lg">
+      <div class="grid-col-12 desktop:grid-col-5 ">
+        <h4 id="mission">Mission</h4>
+        <div>
+          The United States Government's open data site is designed to unleash the power of government open data to
+          <b>inform decisions by the public and policymakers, drive innovation and economic activity, achieve agency
+            missions, and strengthen the foundation of an open and transparent government.</b>
+        </div>
+        <div class="margin-top-4">
+          <a href="{% page '/timeline/' %}" class="usa-button usa-button--secondary">
+            Explore the Timeline {% usa_icon "arrow_forward" %}
+          </a>
+        </div>
+
+      </div>
+      <div class="grid-col-12 desktop:grid-col-7 mobile-top-padding">
+        <img src="https://s3-us-gov-west-1.amazonaws.com/cg-0817d6e3-93c4-4de8-8b32-da6919464e61/mission-graphic.svg"
+          alt="Datagov mission">
+      </div>
+    </div>
+  </section>
+</div>
+<!-- full bleed break -->
+<section class="usa-section mission-bg padding-y-5">
+  <div class="grid-container">
+    <div class="grid-row grid-gap-lg">
+      <div class="grid-col-12 desktop:grid-col-6 ">
+        <h2 id="who">Who developed Data.gov?</h2>
+        <div>
+          Data.gov was launched in 2009 and is managed and hosted by the U.S. General Services Administration, <a
+            href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services"
+            target="_blank" class="usa-link usa-link--external">Technology Transformation Service</a>.
+        </div>
+      </div>
+      <div class="grid-col-12 desktop:grid-col-6 mobile-top-padding">
+        <h2 id="technology">With what technology is Data.gov built?</h2>
+        <div>
+          Data.gov is powered by two open source applications, <a href="https://ckan.org" target="_blank"
+            class="usa-link usa-link--external">CKAN</a> and
+          <a href="https://www.11ty.dev/" target="_blank" class="usa-link usa-link--external">11ty</a> and it is
+          developed publicly on <a href="https://github.com/GSA/catalog-deploy" target="_blank"
+            class="usa-link usa-link--external">GitHub</a>.
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<div class="grid-container">
+  <section class="usa-section">
+    <div class="grid-row grid-gap-lg">
+      <div class="grid-col-12">
+        <h2 id="standards">What standards were used to develop the metadata displayed on Data.gov?</h2>
+
+        Data.gov follows the <a href="https://resources.data.gov/schemas/dcat-us/v1.1/" target="_blank"
+          class="usa-link usa-link--external">DCAT-US Schema v1.1 (Project Open Data Metadata
+          Schema</a> – a set of required fields (Title, Description,
+        Tags, Last Update, Publisher, Contact Name, etc.) for every data set displayed on Data.gov.
+      </div>
+    </div>
+  </section>
+  <section class="usa-section">
+    <h2>Get Data on Data.gov</h2>
+    <h4>How are the datasets on Data.gov collected?</h4>
+    <div class="grid-row grid-gap-lg padding-top-2">
+      <div class="grid-col-12 desktop:grid-col-6 ">
+        Under the OPEN Government Data Act, which is Title II of the <a
+          href="https://www.congress.gov/115/plaws/publ435/PLAW-115publ435.pdf" target="_blank"
+          class="usa-link usa-link--external">Foundations for Evidence-Based Policymaking
+          Act</a>, government data is required to be made
+        available in open, machine-readable formats, while continuing to ensure privacy and security.
+
+        Government data publishers looking to get their data on Data.gov should read the detailed guide: <a
+          href="https://resources.data.gov/tools/how-to-get-your-open-data-on-datagov/" target="_blank"
+          class="usa-link usa-link--external">How to
+          get your open data on Data.gov</a>. The Data.gov team typically works with a designated open data point of
+        contact as a liaison for each agency. Data publishers should consult with their agency point of contact to
+        include any additional datasets on Data.gov. If you need help determining who your open data point of contact
+        is, please <a href="{% page '/contact/'%}">contact us</a>.
+
+      </div>
+      <div class="grid-col-12 desktop:grid-col-6 mobile-top-padding">
+        <b>Federal agencies are required to:</b>
+        <ul>
+          <li>Create a Single Agency Data Inventory.** Agencies are required to catalog their data assets, just like
+            they would inventory computers or desk chairs, to better manage and use these resources.</li>
+          <li>Publish a Public Data Listing.** Agencies are required to publish a list of their data assets that are
+            public, or could be made public. This list is made available as a data.json hosted at the primary domain
+            of
+            the agency (e.g.) <a href="https://open.gsa.gov/data.json" target="_blank"
+              class="usa-link usa-link--external">gsa.gov/data.json</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="grid-row grid-gap-lg padding-top-3">
+      <div class="grid-col-12">
+        Agency Public Data Listings are made available on agency websites as JSON files following the <a
+          href="https://resources.data.gov/resources/dcat-us/" class="usa-link usa-link--external">DCAT-US Schema
+          v1.1</a>, and are then harvested into the central catalog for
+        Data.gov. Each agency is responsible for its own data.
+      </div>
+    </div>
+  </section>
+
+  <div class="grid-row grid-gap-lg padding-bottom-5">
+    <div class="grid-col-12">
+      <div class="mediabox">
+        <h1 id="media">Media inquiries</h1>
+        If you are preparing an article or creating an event, and are interested in finding information, a speaker,
+        or
+        other help in communicating about open data, contact the Data.gov team at
+        <a href="mailto:[email protected]">[email protected]</a>.
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/pages/about.md b/pages/about.md
diff --git a/pages/index.html b/pages/index.html
@@ -10,28 +10,22 @@
   <div class="hero__content">
     <div class="hero__copy">
       <h1>The Home of the U.S. Government's Open Data</h1>
-      <div>Here you will find data, tools, and resources to conduct research, develop web and mobile applications, design data
+      <div>Here you will find data, tools, and resources to conduct research, develop web and mobile applications,
+        design data
         visualizations, and more.</div>
       <div class="hero__dataset-count">
         {% if catalog and catalog.results and catalog.results.datasets %}
-          <h4 class="text-uppercase">
-            <span class="text-color-red">{{ catalog.results.datasets | toLocaleString }}</span>
-            datasets available</h4>
+        <h4 class="text-uppercase">
+          <span class="text-color-red">{{ catalog.results.datasets | toLocaleString }}</span>
+          datasets available
+        </h4>
         {% endif %}
       </div>
     </div>
     <section aria-label="Search component" class="hero__search">
-      <form
-        class="usa-search"
-        role="search"
-        method="get"
-        action="https://catalog.data.gov/dataset">
+      <form class="usa-search" role="search" method="get" action="https://catalog.data.gov/dataset">
         <label class="usa-sr-only" for="search-field">Search</label>
-        <input
-          class="usa-input"
-          id="search-field"
-          type="search"
-          name="q" />
+        <input class="usa-input" id="search-field" type="search" name="q" />
         <button class="usa-button" type="submit">
           <span class="usa-search__submit-text">Search</span>
           {% datagov_icon "search--white.svg" "usa-search__submit-icon"%}
@@ -46,15 +40,15 @@ <h4 class="text-uppercase">
   <div class="grid-container">
     <div class="grid-row grid-gap-lg">
       {% for filter in site.catalog_filters %}
-        <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-3">
-          {% assign iconName = filter.iconName | escape %}
-          <a href="{% link filter.url %}">
-            <div class="icon-container text-center">
-              {% datagov_icon iconName "usa-icon--size-5"%}
-              <div class="name">{{ filter.name }}</div>
-            </div>
-          </a>
-        </div>
+      <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-3">
+        {% assign iconName = filter.iconName | escape %}
+        <a href="{% link filter.url %}">
+          <div class="icon-container text-center">
+            {% datagov_icon iconName "usa-icon--size-5"%}
+            <div class="name">{{ filter.name }}</div>
+          </div>
+        </a>
+      </div>
       {% endfor %}
     </div>
   </div>
@@ -64,11 +58,13 @@ <h4 class="text-uppercase">
 <section class="usa-section mission">
   <div class="grid-container">
     <div class="grid-row grid-gap-lg">
-      <div class="grid-col-12 desktop:grid-col-12">
+      <div class="grid-col-12 desktop:grid-col-12 mission__copy">
         <h1>Mission</h1>
         <div>
-          The United States Government’s open data site is designed to unleash the power of government open data to <b>inform 
-          decisions by the public and policymakers</b>, <b>drive innovation and economic activity</b>, <b>achieve agency missions</b>, and 
+          The United States Government’s open data site is designed to unleash the power of government open data to
+          <b>inform
+            decisions by the public and policymakers</b>, <b>drive innovation and economic activity</b>, <b>achieve
+            agency missions</b>, and
           <b>strengthen the foundation of an open and transparent government</b>.
         </div>
         <div class="grid-row-auto margin-top-3">
@@ -88,31 +84,34 @@ <h1>Mission</h1>
       <div class="grid-col-12 desktop:grid-col-8">
         <!-- Key Metric by Organization Type -->
         {% if catalog and catalog.metrics and catalog.metrics.orgBarMetric %}
-          {% include "metrics_widgets/bar-chart.html" name: 'org' metric: catalog.metrics.orgBarMetric %}
+        {% include "metrics_widgets/bar-chart.html" name: 'org' metric: catalog.metrics.orgBarMetric %}
         {% endif %}
       </div>
       <div class="grid-col-12 desktop:grid-col-4">
         <div class="grid-row">
           <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-12 margin-top-1 desktop:margin-top-0">
             <!-- Dataset Age -->
             {% if catalog and catalog.metrics and catalog.metrics.datasetsBarMetric %}
-              {% include "metrics_widgets/bar-chart.html" name: 'datasets' metric: catalog.metrics.datasetsBarMetric class: 'usa-tooltip' toolTipText: 'Datasets grouped by when metadata was last modified' %}
+            {% include "metrics_widgets/bar-chart.html" name: 'datasets' metric: catalog.metrics.datasetsBarMetric
+            class: 'usa-tooltip' toolTipText: 'Datasets grouped by when metadata was last modified' %}
             {% endif %}
           </div>
           <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-12 margin-top-1">
             <!-- Dataset Distribution -->
             {% if catalog and catalog.metrics and catalog.metrics.pieMetric %}
-              {% include "metrics_widgets/pie-chart.html" metric: catalog.metrics.pieMetric url: 'user-guide/#dataset-totals' class: 'usa-tooltip' toolTipText: 'Click to learn more about collections in our user guide' %}
+            {% include "metrics_widgets/pie-chart.html" metric: catalog.metrics.pieMetric url:
+            'user-guide/#dataset-totals' class: 'usa-tooltip' toolTipText: 'Click to learn more about collections in our
+            user guide' %}
             {% endif %}
           </div>
         </div>
       </div>
       <div class="grid-col-12">
         <div class="grid-row metrics__fetch-date">
-            {% if catalog and catalog.meta and catalog.meta.date %}
-            {% assign date = 'Last Updated: ' | append: catalog.meta.date %}
-              <p>{{date}}</p>
-            {% endif %}
+          {% if catalog and catalog.meta and catalog.meta.date %}
+          {% assign date = 'Last Updated: ' | append: catalog.meta.date %}
+          <p>{{date}}</p>
+          {% endif %}
         </div>
       </div>
     </div>
@@ -129,27 +128,27 @@ <h1>Mission</h1>
             {% image "resources-logo.svg" "Resources Logo" false %}
           </a>
         </div>
-          <ul class="quick-links--resources">
-            {% for link in site.resource_quick_links %}
-              <li>
-                <a href="{% link link.url %}">{{ link.title }} {% usa_icon 'launch' %}</a>
-              </li>
-            {% endfor %}
-          </ul>
+        <ul class="quick-links--resources">
+          {% for link in site.resource_quick_links %}
+          <li>
+            <a href="{% link link.url %}">{{ link.title }} {% usa_icon 'launch' %}</a>
+          </li>
+          {% endfor %}
+        </ul>
       </div>
       <div class="grid-col-12 desktop:grid-col-6">
         <div class="logo">
           <a href="{% link site.links.sites.strategy %}">
             {% image "strategy-logo.svg" "Strategy Logo" false %}
           </a>
         </div>
-          <ul class="quick-links--strategy">
-            {% for link in site.strategy_quick_links %}
-              <li>
-                <a href="{% link link.url %}">{{ link.title }} {% usa_icon 'launch' %}</a>
-              </li>
-            {% endfor %}
-          </ul>
+        <ul class="quick-links--strategy">
+          {% for link in site.strategy_quick_links %}
+          <li>
+            <a href="{% link link.url %}">{{ link.title }} {% usa_icon 'launch' %}</a>
+          </li>
+          {% endfor %}
+        </ul>
       </div>
     </div>
   </div>