Skip to content
This repository has been archived by the owner on Sep 25, 2024. It is now read-only.

Commit

Permalink
Dc/use jekyll assets gem (#43)
Browse files Browse the repository at this point in the history
* Refactor build and templates
* Fix blog/index.html frontmatter
* Update icon links
* Remove post install
* Move a11y to a dev dependency
* Remove Federalist script
* Package.json updates
* Remove GA code
* update readme
  • Loading branch information
davemcorwin authored Nov 27, 2019
1 parent eb7d59b commit 8d2e680
Show file tree
Hide file tree
Showing 21 changed files with 337 additions and 223 deletions.
3 changes: 0 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,5 @@ _site
.sass-cache
.jekyll-metadata
node_modules
assets/js
assets/uswds
_sass/uswds
.bundle
.jekyll-cache/
27 changes: 19 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,16 +72,27 @@ searchgov:


## How to edit
- We try to keep configuration options to a minimum so you can easily remove functionality, but you can review `_config.yml` to see the options that are available to you. There are a few values on top that you **need** to change. They make reference to the agency name and contact information. The advanced options at the bottom should be changed only if you know what you know what you're doing.
- Do not edit files in the `assets/` folder. This folder is reserved for serving assets once the sites is compiled. If you want add your own custom code, add and edit files in `src/`, ideally mirroring the `assets/` folder structure. This will keep the code repository small and not include unneccessary files.
- If you look at `package.json` you will see that the `npm run federalist` command will copy the contents from `src/` and move it over to `assets/` folder during the build process. If you want more advanced functionality, you should look into using [Webpack](https://webpack.js.org/concepts/configuration/).
- Do not edit files in the `_site/` folder. These files are automatically generated and changes you make there will be destroyed.
- You will most certainly need to edit files in `_includes/`, which include the primary menu, side navigation, logos etc
- Non-developers should focus on editing markdown content in the `_posts` and `_pages` folder

- We try to keep configuration options to a minimum so you can easily change functionality. You should review `_config.yml` to see the options that are available to you. There are a few values on top that you **need** to change. They refer to the agency name and contact information. The rest of `_config.yml` has a range of more advanced options.

- The contents inside `assets/` folder store your Javascript, SCSS/CSS, images, and other media assets are managed by [jekyll-assets](https://github.com/envygeeks/jekyll-assets). Assets are combined, compressed, and automatically available in your theme

- If you look at `package.json` you will see that the `npm run federalist` command that will run when running on the Federalist platform.

- Do not edit files in the `_site/` folder. These files are auto-generated, and any change you make in the folder will be overwritten.

- To edit the look and feel of the site, you need to edit files in `_includes/` folder, which render key components, like the menu, side navigation, and logos.

- `index.html` may not require much editing, depending on how you customize `hero.html` and `highlights.html`.

- `_layouts/` may require the least amount of editing of all the files since they are primarily responsible for printing the content.
- `blog/search.html` is by search.gov. If you need to stylize results page, this is where you will do it.
- `blog/index.html` can be edited, but be careful. It will impact the pagination system for the posts. If you do edit the file, be prepared to edit `_config.yml`. You should also familiarize yourself with [jekyll-paginate-v2](https://github.com/sverrirs/jekyll-paginate-v2)
- Non-developers should focus only on `_posts` and `_pages`

- `blog/index.html` can be edited, but be careful. It will impact the pagination system for the posts. If you do edit the file, be prepared to edit `_config.yml`. For example, you may need go change configurations for [jekyll-paginate-v2](https://github.com/sverrirs/jekyll-paginate-v2)

- `search/index.html` is used by search.gov.




## Installation
Expand Down
48 changes: 27 additions & 21 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
##########################################################################################

title: Agency Name
email: [email protected]
email: [email protected]
description: >- # this means to ignore newlines until "baseurl:"
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.
Expand Down Expand Up @@ -48,26 +48,26 @@ primary_navigation:
- name: Document submenu
children:
- name: Navigation link
url: '#main-content'
url: "#main-content"
- name: Navigation link
url: '#main-content'
url: "#main-content"
- name: Navigation link
url: '#main-content'
url: "#main-content"

secondary_navigation:
- name: Secondary link
url: '#main-content'
url: "#main-content"
- name: Another secondary link
url: '#main-content'
url: "#main-content"

# Search.gov configuration
#
# 1. Create an account with Search.gov https://search.usa.gov/signup
# 2. Add a new site.
# 3. Add your site/affiliate name here.
searchgov:
endpoint: https://search.usa.gov # You should not change this.
affiliate: federalist-uswds-example # replace this with your search.gov account
endpoint: https://search.usa.gov # You should not change this.
affiliate: federalist-uswds-example # replace this with your search.gov account
access_key: xX1gtb2RcnLbIYkHAcB6IaTRr4ZfN-p16ofcyUebeko= # This is placeholder. Not private.
inline: true #this renders the results on the same domain. Otherwise, it will render the results in the search.gov domain

Expand All @@ -76,15 +76,13 @@ searchgov:
# changed if you know what they do
##########################################################################################


collections:
pages:
output: true
permalink: /:path/

permalink: pretty


markdown: kramdown
plugins:
- jekyll-feed
Expand All @@ -102,30 +100,30 @@ pagination:
# Set to 'true' to enable pagination debugging. This can be enabled in the site config or only for individual pagination pages
debug: false
# The default document collection to paginate if nothing is specified ('posts' is default)
collection: 'posts'
collection: "posts"
# How many objects per paginated page, used to be `paginate` (default: 0, means all)
per_page: 3
# The permalink structure for the paginated pages (this can be any level deep)
permalink: '/page/:num/' # Pages are index.html inside this folder (default)
permalink: "/page/:num/" # Pages are index.html inside this folder (default)
#permalink: '/page/:num.html' # Pages are simple html files
#permalink: '/page/:num' # Pages are html files, linked jekyll extensionless permalink style.
# Optional the title format for the paginated pages (supports :title for original page title, :num for pagination page number, :max for total number of pages)
title: ':title - page :num'
title: ":title - page :num"
# Limit how many pagenated pages to create (default: 0, means all)
limit: 0
# Optional, defines the field that the posts should be sorted on (omit to default to 'date')
sort_field: 'date'
sort_field: "date"
# Optional, sorts the posts in reverse order (omit to default decending or sort_reverse: true)
sort_reverse: true
# Optional, the default category to use, omit or just leave this as 'posts' to get a backwards-compatible behavior (all posts)
category: 'posts'
category: "posts"
# Optional, the default tag to use, omit to disable
tag: ''
tag: ""
# Optional, the default locale to use, omit to disable (depends on a field 'locale' to be specified in the posts,
# in reality this can be any value, suggested are the Microsoft locale-codes (e.g. en_US, en_GB) or simply the ISO-639 language code )
locale: ''
# Optional,omit or set both before and after to zero to disable.
# Controls how the pagination trail for the paginated pages look like.
locale: ""
# Optional,omit or set both before and after to zero to disable.
# Controls how the pagination trail for the paginated pages look like.
trail:
before: 2
after: 2
Expand All @@ -134,9 +132,8 @@ pagination:
extension: html
# Optional, the default name of the index file for generated pages (e.g. 'index.html')
# Without file extension
indexpage: 'index.html'
indexpage: "index.html"


exclude:
- Gemfile
- Gemfile.lock
Expand All @@ -150,3 +147,12 @@ exclude:
- package-lock.json
- README.md
- src
- CONTRIBUTING.md
- LICENSE.md
- assets

assets:
sources:
- node_modules/uswds/dist/img
- node_modules/uswds/dist/js
- node_modules/uswds/dist/scss
32 changes: 3 additions & 29 deletions _includes/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
<div class="footer-section-bottom bg-base-lighter">
<div class="grid-container">
<div class="grid-row padding-3">
<div class="tablet:grid-col" >
<div class="tablet:grid-col">
<div class="logo-links">
<a class="footer-logo media_link" href="https://18f.gsa.gov">
<img src="{{ site.baseurl }}/assets/uswds/img/logo-img.png" width="50" alt="Ageny logo" />
{% asset logo-img.png width="50" alt="Agency logo" %}
</a>
</div>
</div>
Expand All @@ -27,30 +27,4 @@
</div>
</div>
</div>
</footer>

<!-- Digital Analytics Program roll-up, see https://analytics.usa.gov for data -->
<script id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency={{site.dap_agency}}"></script>

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', '{{site.google_analytics_ua}}', '{{site.url}}');

// anonymize user IPs (chops off the last IP triplet)
ga('set', 'anonymizeIp', true);

// forces SSL even if the page were somehow loaded over http://
ga('set', 'forceSSL', true);

ga('send', 'pageview');
</script>

<script src="{{site.baseurl}}/assets/uswds/js/uswds.min.js"></script>
{% asset index.js %}

</body>
</html>
</footer>
25 changes: 13 additions & 12 deletions _includes/header.html
Original file line number Diff line number Diff line change
@@ -1,51 +1,52 @@
{% comment %}
{% comment %}
This appears at the top of the page letting the user know it's an official government website
{% endcomment %}

{% include meta.html %}
<body class="page-landing-page layout-demo ">
<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">
<header class="usa-banner__header">
<div class="usa-banner__inner">
<div class="grid-col-auto">
<img class="usa-banner__header-flag" src="{{site.baseurl}}/assets/uswds/img/us_flag_small.png" alt="U.S. flag">
{% asset us_flag_small.png class="usa-banner__header-flag" alt="U.S. flag" %}
</div>
<div class="grid-col-fill tablet:grid-col-auto">
<p class="usa-banner__header-text">An official website of the United States government</p>
<p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</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 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>
</header>
<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">
<img class="usa-banner__icon usa-media-block__img" src="{{site.baseurl}}/assets/uswds/img/icon-dot-gov.svg" alt="Dot gov">
{% asset icon-dot-gov.svg class="usa-banner__icon usa-media-block__img" alt="Dot gov" %}
<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.
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">
<img class="usa-banner__icon usa-media-block__img" src="{{site.baseurl}}/assets/uswds/img/icon-https.svg" alt="Https">
{% asset icon-https.svg class="usa-banner__icon usa-media-block__img" alt="Https" %}
<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.
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>
</div>
</div>
</div>
</div>
<div class="usa-overlay"></div>
<div class="usa-overlay"></div>
</div>
25 changes: 15 additions & 10 deletions _includes/highlights.html
Original file line number Diff line number Diff line change
@@ -1,39 +1,44 @@
{% comment %}
Use this section to highlight key elements of your site. Some sites will only have two while others may have six to eight.
{% comment %}
Use this section to highlight key elements of your site. Some sites will only have two while others may have six to
eight.
{% endcomment %}


<section class="usa-graphic-list usa-section usa-section--dark">
<div class="grid-container">
<div class="usa-graphic-list__row grid-row grid-gap">
<div class="usa-media-block tablet:grid-col">
<img class="usa-media-block__img" src="{{ site.baseurl }}/assets/uswds/img/circle-124.png" alt="Alt text">
{% asset circle-124.png class="usa-media-block__img" alt="Alt text" %}
<div class="usa-media-block__body">
<h3 class="usa-graphic-list__heading">Graphic headings can vary.</h3>
<p>Graphic headings can be used a few different ways, depending on what your landing page is for. Highlight your values, specific program areas, or results.</p>
<p>Graphic headings can be used a few different ways, depending on what your landing page is for. Highlight
your values, specific program areas, or results.</p>
</div>
</div>
<div class="usa-media-block tablet:grid-col">
<img class="usa-media-block__img" src="{{ site.baseurl }}/assets/uswds/img/circle-124.png" alt="Alt text">
{% asset circle-124.png class="usa-media-block__img" alt="Alt text" %}
<div class="usa-media-block__body">
<h3 class="usa-graphic-list__heading">Stick to 6 or fewer words.</h3>
<p>Keep body text to about 30 words. They can be shorter, but try to be somewhat balanced across all four. It creates a clean appearance with good spacing.</p>
<p>Keep body text to about 30 words. They can be shorter, but try to be somewhat balanced across all four. It
creates a clean appearance with good spacing.</p>
</div>
</div>
</div>
<div class="usa-graphic-list__row grid-row grid-gap">
<div class="usa-media-block tablet:grid-col">
<img class="usa-media-block__img" src="{{ site.baseurl }}/assets/uswds/img/circle-124.png" alt="Alt text">
{% asset circle-124.png class="usa-media-block__img" alt="Alt text" %}
<div class="usa-media-block__body">
<h3 class="usa-graphic-list__heading">Never highlight anything without a goal.</h3>
<p>For anything you want to highlight here, understand what your users know now, and what activity or impression you want from them after they see it.</p>
<p>For anything you want to highlight here, understand what your users know now, and what activity or
impression you want from them after they see it.</p>
</div>
</div>
<div class="usa-media-block tablet:grid-col">
<img class="usa-media-block__img" src="{{ site.baseurl }}/assets/uswds/img/circle-124.png" alt="Alt text">
{% asset circle-124.png class="usa-media-block__img" alt="Alt text" %}
<div class="usa-media-block__body">
<h3 class="usa-graphic-list__heading">Could also have 2 or 6.</h3>
<p>In addition to your goal, find out your users’ goals. What do they want to know or do that supports your mission? Use these headings to show those.</p>
<p>In addition to your goal, find out your users’ goals. What do they want to know or do that supports your
mission? Use these headings to show those.</p>
</div>
</div>
</div>
Expand Down
12 changes: 7 additions & 5 deletions _includes/menu.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% comment %}
To modify the menu system, you are welcome to edit this HTML directly or you can look inside _config.yml
{% comment %}
To modify the menu system, you are welcome to edit this HTML directly or you can look inside _config.yml
where we provide an easy way to manage your navigation system
{% endcomment %}

Expand All @@ -10,19 +10,21 @@
</div>
<nav role="navigation" class="usa-nav">
<div class="usa-nav__inner">
<button class="usa-nav__close"><img src="{{ site.baseurl }}/assets/uswds/img/close.svg" alt="close"></button>
<button class="usa-nav__close">{% asset close.svg alt="close" %}</button>
<ul class="usa-nav__primary usa-accordion">
{% for nav_item in include.primary_navigation %}
{% unless nav_item.children %}
{% assign basedir = page.url | remove_first: '/' | split: '/' | first | lstrip %}
{% assign linkdir = nav_item.url | replace: "/", "" | lstrip %}
<li class="usa-nav__primary-item">
<a class="usa-nav__link{% if basedir == linkdir %} usa-current{% endif %}" href="{{ nav_item.url | prepend: site.baseurl}}"><span>{{ nav_item.name | escape }}</span></a>
<a class="usa-nav__link{% if basedir == linkdir %} usa-current{% endif %}"
href="{{ nav_item.url | prepend: site.baseurl}}"><span>{{ nav_item.name | escape }}</span></a>
</li>
{% else %}
{% assign nav_id = 'primary-nav-' | append: forloop.index %}
<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="{{ nav_id }}"><span>{{ nav_item.name | escape }}</span></button>
<button class="usa-accordion__button usa-nav__link" aria-expanded="false"
aria-controls="{{ nav_id }}"><span>{{ nav_item.name | escape }}</span></button>
<ul id="{{ nav_id }}" class="usa-nav__submenu">
{% for subnav_item in nav_item.children %}
<li class="usa-nav__submenu-item">
Expand Down
Loading

0 comments on commit 8d2e680

Please sign in to comment.