Skip to content

Commit

Permalink
Merge pull request #11 from GSA-TTS/site-style-and-content-updates
Browse files Browse the repository at this point in the history
Site style and content updates
  • Loading branch information
natashapl authored Mar 22, 2024
2 parents cc16976 + 4fd2438 commit 8f70180
Show file tree
Hide file tree
Showing 70 changed files with 5,674 additions and 4,149 deletions.
5 changes: 5 additions & 0 deletions .eleventy.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@ module.exports = function (config) {

// Copy USWDS init JS so we can load it in HEAD to prevent banner flashing
config.addPassthroughCopy({'./node_modules/@uswds/uswds/dist/js/uswds-init.js': 'assets/js/uswds-init.js'});
config.addPassthroughCopy({ './node_modules/@uswds/uswds/dist/img': 'assets/uswds/img' });
config.addPassthroughCopy({ './node_modules/@uswds/uswds/dist/fonts': 'assets/fonts' });
config.addPassthroughCopy({ './theme/img': 'assets/img' });
config.addPassthroughCopy({ './favicon': '/favicon' });
config.addPassthroughCopy({ './favicon/favicon.ico': '/myfavicon.ico' });

// Add plugins
config.addPlugin(pluginRss);
Expand Down
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -119,4 +119,5 @@ web_modules/
# 11ty Related
_site
public
node_modules
/node_modules
/.pnp
58 changes: 58 additions & 0 deletions _data/Stantec_MABD_Export.csv

Large diffs are not rendered by default.

13 changes: 6 additions & 7 deletions _data/assetPaths.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
{
"admin.js": "/assets/js/admin-44W43542.js",
"admin.map": "/assets/js/admin-44W43542.js.map",
"app.js": "/assets/js/app-XWR645AF.js",
"app.map": "/assets/js/app-XWR645AF.js.map",
"uswds.js": "/assets/js/uswds-init.js",
"styles.css": "/assets/styles/styles-TAZ5TOFI.css",
"styles.map": "/assets/styles/styles-TAZ5TOFI.css.map"
"admin.js": "/assets/js/admin-C7YAUYZM.js",
"admin.map": "/assets/js/admin-C7YAUYZM.js.map",
"app.js": "/assets/js/app-DBWFVBND.js",
"app.map": "/assets/js/app-DBWFVBND.js.map",
"index.css": "/assets/styles/index-KNHDIH2P.css",
"index.map": "/assets/styles/index-KNHDIH2P.css.map"
}
11 changes: 11 additions & 0 deletions _data/csvData.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const fs = require('fs');
const { parse } = require('csv-parse/sync');

module.exports = async function() {
const csv = fs.readFileSync('./_data/Stantec_MABD_Export.csv', 'utf8');
const data = parse(csv, {
columns: true,
skip_empty_lines: true
});
return data;
};
61 changes: 19 additions & 42 deletions _data/site.yaml
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
title: Agency Name
email: [email protected]
description: >- # this means to ignore newlines
Agency Name (EAC) Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean et sapien a leo auctor scelerisque quis nec magna. Sed dictum ante a risus vehicula facilisis.
title: Bringing Mutual Aid
description: Bringing Mutual Aid ia a portal could increase the use of mutual aid for building depts., support congressional legislation on disaster resilience, and help communities build back better.
url: "https://bma.gsa.gov"

# Twitter handle. Only the handle, not the URL.
twitter: 18F
# twitter: 18F

#################################################################
#
Expand Down Expand Up @@ -53,45 +51,24 @@ ga:
# Site Navigation
primary_navigation:
- name: Find assistance
children:
- name: Credentialed experts
url: /posts/experts/
- name: Inspections & permits
url: /posts/inspections/
- name: Building code knowledge
url: /posts/codes/
- name: Navigating disaster recovery
url: /posts/recovery/
url: /posts/find-assistance/
- name: Training & resources
children:
- name: Credentialed experts
url: /posts/experts/
- name: Inspections & permits
url: /posts/inspections/
- name: Building code knowledge
url: /posts/codes/
- name: Navigating disaster recovery
url: /posts/recovery/
url: /posts/training/
- name: FAQs
children:
- name: Credentialed experts
url: /posts/experts/
- name: Inspections & permits
url: /posts/inspections/
- name: Building code knowledge
url: /posts/codes/
- name: Navigating disaster recovery
url: /posts/recovery/
url: /posts/faq/
- name: Contacts
children:
- name: Credentialed experts
url: /posts/experts/
- name: Inspections & permits
url: /posts/inspections/
- name: Building code knowledge
url: /posts/codes/
- name: Navigating disaster recovery
url: /posts/recovery/
url: /posts/contacts/

# Add choldren if adding a sub menu
# children:
# - name: Credentialed experts
# url: /posts/experts/
# - name: Inspections & permits
# url: /posts/inspections/
# - name: Building code knowledge
# url: /posts/codes/
# - name: Navigating disaster recovery
# url: /posts/recovery/



Expand Down
2 changes: 1 addition & 1 deletion _includes/collection-item.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<li class="usa-collection__item">
{% if post.data.image %}
{% assign imagepath="./_img/" | append: post.data.image %}
{% assign imagepath="./theme/img/" | append: post.data.image %}
{% image_with_class imagepath "usa-collection__img" post.data.image_alt_text %}
{% endif %}
<div class="usa-collection__body">
Expand Down
2 changes: 1 addition & 1 deletion _includes/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h5>Partner sites</h4>
<div class="tablet:grid-col">
<div class="logo-links">
<a class="footer-logo media_link" href="https://cloud.gov">
{% image_with_class "./_img/logo-img.png" "Agency logo" %}
{% image_with_class "./theme/img/logo-img.png" "Agency logo" %}
</a>
</div>
<div style="font-size: smaller;">
Expand Down
104 changes: 50 additions & 54 deletions _includes/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,65 +3,61 @@
official government website
{% endcomment %}

<div class="page-landing-page layout-demo ">
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
<div class="usa-banner">
<div class="usa-accordion">
<section
id="gov-banner-header-section"
aria-label="USA Gov banner section header"
class="usa-banner__header"
>
<div class="usa-banner__inner">
<div class="grid-col-auto">
{% image_with_class "./node_modules/@uswds/uswds/dist/img/us_flag_small.png" "usa-banner__header-flag" "U.S. flag" %}
</div>
<div class="grid-col-fill tablet:grid-col-auto">
<p class="usa-banner__header-text">
DEMO website of the United States government
</p>
<p class="usa-banner__header-action" aria-hidden="true">
Here’s how you know
<section class="usa-banner" aria-label="Official website of the United States government">
<div class="usa-accordion">
<header class="usa-banner__header">
<div class="usa-banner__inner">
<div class="grid-col-auto">
<img aria-hidden="true" class="usa-banner__header-flag" src="{{'/assets/uswds/img/us_flag_small.png' | url }}" alt="" />
</div>
<div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
<p class="usa-banner__header-text">
A demo website of the United States government
</p>
<p class="usa-banner__header-action">Here’s how you know</p>
</div>
<button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false"
aria-controls="gov-banner-default">
<span class="usa-banner__button-text">Here’s how you know</span>
</button>
</div>
</header>
<div class="usa-banner__content usa-accordion__content" id="gov-banner-default">
<div class="grid-row grid-gap-lg">
<div class="usa-banner__guidance tablet:grid-col-6">
<img class="usa-banner__icon usa-media-block__img" src="{{'/assets/uswds/img/icon-dot-gov.svg' | url }}" role="img" alt=""
aria-hidden="true" />
<div class="usa-media-block__body">
<p>
<strong>Official websites use .gov</strong><br />A
<strong>.gov</strong> website belongs to an official government
organization in the United States.
</p>
</div>
<button
class="usa-accordion__button usa-banner__button"
aria-expanded="false"
aria-controls="gov-banner"
>
<span class="usa-banner__button-text">Here's how you know</span>
</button>
</div>
</section>
<div class="usa-banner__content usa-accordion__content" id="gov-banner">
<div class="grid-row grid-gap-lg">
<div class="usa-banner__guidance tablet:grid-col-6">
{% comment %} {% image_with_class "./node_modules/@uswds/uswds/dist/img/icon-dot-gov.svg" "usa-banner__icon usa-media-block__img" "Dot gov" %} {% endcomment %}
<div class="usa-media-block__body">
<p>
<strong>The .gov means it’s official.</strong>
<br />
Federal government websites often end in .gov or .mil. Before
sharing sensitive information, make sure you’re on a federal
government site.
</p>
</div>
</div>
<div class="usa-banner__guidance tablet:grid-col-6">
{% comment %} {% image_with_class "./node_modules/@uswds/uswds/dist/img/icon-https.svg" "usa-banner__icon usa-media-block__img" "Https" %} {% endcomment %}
<div class="usa-media-block__body">
<p>
<strong>The site is secure.</strong>
<br />
The <strong>https://</strong> ensures that you are connecting to
the official website and that any information you provide is
encrypted and transmitted securely.
</p>
</div>
<div class="usa-banner__guidance tablet:grid-col-6">
<img class="usa-banner__icon usa-media-block__img" src="{{'/assets/uswds/img/icon-https.svg' | url }}" role="img" alt=""
aria-hidden="true" />
<div class="usa-media-block__body">
<p>
<strong>Secure .gov websites use HTTPS</strong><br />A
<strong>lock</strong> (
<span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64"
class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description" focusable="false">
<title id="banner-lock-title">Lock</title>
<desc id="banner-lock-description">
Locked padlock icon
</desc>
<path fill="#000000" fill-rule="evenodd"
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" />
</svg> </span>) or <strong>https://</strong> means you’ve safely connected to
the .gov website. Share sensitive information only on official,
secure websites.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="usa-overlay"></div>
</div>
</section>
<div class="usa-overlay"></div>
61 changes: 50 additions & 11 deletions _includes/hero.html
Original file line number Diff line number Diff line change
@@ -1,14 +1,53 @@
{% comment %}
This will be displayed on the homepage. Ideally, you want to highlight key goals of the website
{% endcomment %}

<section class="usa-hero" style="text-align: center;">
<div style="background-image: linear-gradient(rgb(0, 0, 0), rgba(255,0,0,0));"">
<h1 class="ma-h2" style="color: white; padding: 40px 0 60px 0;">Your rebuilding journey starts here</h1>
<div style="width: 360px; background-color: #565c65; padding: 15px; margin: auto; text-align: left;">
Find mutual aid partners to help supplement your community's building department functions during post-disaster recovery.
</div>
<a class="usa-button" href="{{ '/location/' | url }}" style="margin: 50px 0 50px 0;">Find help now</a>
<section class="usa-hero" aria-label="Introduction">
<div class="grid-container">
<div class="usa-hero__callout">
<h1 class="usa-hero__heading margin-bottom-4">
Find mutual aid resources to help your local building department
</h1>
<div class="grid-container">
<form class="usa-form" id="stateForm">
<fieldset class="usa-fieldset">
<legend class="usa-legend margin-bottom-1">
Enter your location to discover mutual aid resources available in your area to assist post-disaster
rebuilding.
</legend>

<label class="usa-label" for="state">
State or Territory
</label>
<div class="grid-row grid-gap-2">
<span class="desktop:grid-col-7 mobile:grid-col-12 margin-bottom-2">
<select class="usa-select" id="state" name="state">
<option value>- Select -</option>
{% for item in csvData %}
<option value="{{ item.Abbr | slug }}">{{ item.Abbr }} - {{ item.State }}</option>
{% endfor %}
</select>
</span>
<span class="desktop:grid-col-5 mobile:grid-col-12">
<input class="usa-button" type="submit" value="View aid options" />
</span>
</div>

</fieldset>
</form>
</div>
</div>
</div>
</section>

<script>
document.getElementById('stateForm').addEventListener('submit', function (event) {
event.preventDefault();
var selectedState = document.getElementById('state').value;

// Validate the input
if (/^[A-Za-z]{2}$/.test(selectedState)) {
var encodedState = encodeURIComponent(selectedState);

window.location.href = '/states/' + encodedState + '/';
} else {
console.error('Invalid state selected');
}
});
</script>
Loading

0 comments on commit 8f70180

Please sign in to comment.