diff --git a/.gitignore b/.gitignore index efc66c4f4..238c9a33b 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,5 @@ _site .sass-cache .jekyll-metadata node_modules -assets/js -assets/uswds -_sass/uswds .bundle +.jekyll-cache/ diff --git a/Gemfile b/Gemfile index d51715dff..4f6c21e8d 100644 --- a/Gemfile +++ b/Gemfile @@ -8,7 +8,7 @@ source "https://rubygems.org" # # This will help ensure the proper Jekyll version is running. # Happy Jekylling! -gem "jekyll", "~> 3.8.4" +gem "jekyll", "~> 3.8" # If you have any plugins, put them here! @@ -18,20 +18,13 @@ group :jekyll_plugins do gem 'jekyll-paginate-v2', "2.0" gem 'jekyll-sitemap' gem 'jekyll-seo-tag' - - # jekyll_pages_api_search is useful gem, but needs updating - # to support the latest version of Jekyll - # gem 'jekyll_pages_api_search' - + gem "jekyll-assets", "~> 3.0", group: :jekyll_plugins end - - # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby] # Performance-booster for watching directories on Windows gem "wdm", "~> 0.1.0" if Gem.win_platform? - gem "html-proofer", "~> 3.10" diff --git a/Gemfile.lock b/Gemfile.lock index 72c64f085..328432806 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -17,7 +17,17 @@ GEM ethon (0.12.0) ffi (>= 1.3.0) eventmachine (1.2.7) + eventmachine (1.2.7-java) + eventmachine (1.2.7-x64-mingw32) + eventmachine (1.2.7-x86-mingw32) + execjs (2.7.0) + extras (0.3.0) + forwardable-extended (~> 2.5) + fastimage (2.1.7) ffi (1.10.0) + ffi (1.10.0-java) + ffi (1.10.0-x64-mingw32) + ffi (1.10.0-x86-mingw32) forwardable-extended (2.6.0) html-proofer (3.10.1) activesupport (>= 4.2, < 6.0) @@ -29,6 +39,7 @@ GEM typhoeus (~> 1.3) yell (~> 2.0) http_parser.rb (0.6.0) + http_parser.rb (0.6.0-java) i18n (0.9.5) concurrent-ruby (~> 1.0) jekyll (3.8.5) @@ -44,12 +55,25 @@ GEM pathutil (~> 0.9) rouge (>= 1.7, < 4) safe_yaml (~> 1.0) + jekyll-assets (3.0.12) + activesupport (~> 5.0) + execjs (~> 2.7) + extras (~> 0.2) + fastimage (~> 2.0, >= 1.8) + jekyll (>= 3.5, < 4.0) + jekyll-sanity (~> 1.2) + liquid-tag-parser (~> 1.0) + nokogiri (~> 1.8) + pathutil (~> 0.16) + sprockets (>= 3.3, < 4.1.beta) jekyll-feed (0.11.0) jekyll (~> 3.3) jekyll-paginate-v2 (2.0.0) jekyll (~> 3.0) jekyll-redirect-from (0.14.0) jekyll (~> 3.3) + jekyll-sanity (1.2.0) + jekyll (~> 3.1) jekyll-sass-converter (1.5.2) sass (~> 3.4) jekyll-seo-tag (2.6.0) @@ -60,6 +84,9 @@ GEM listen (~> 3.0) kramdown (1.17.0) liquid (4.0.1) + liquid-tag-parser (1.9.0) + extras (~> 0.3) + liquid (>= 3.0, < 5.0) listen (3.1.5) rb-fsevent (~> 0.9, >= 0.9.4) rb-inotify (~> 0.9, >= 0.9.7) @@ -69,10 +96,16 @@ GEM minitest (5.11.3) nokogiri (1.10.4) mini_portile2 (~> 2.4.0) + nokogiri (1.10.4-java) + nokogiri (1.10.4-x64-mingw32) + mini_portile2 (~> 2.4.0) + nokogiri (1.10.4-x86-mingw32) + mini_portile2 (~> 2.4.0) parallel (1.13.0) pathutil (0.16.2) forwardable-extended (~> 2.6) public_suffix (3.0.3) + rack (2.0.7) rb-fsevent (0.10.3) rb-inotify (0.10.0) ffi (~> 1.0) @@ -84,19 +117,30 @@ GEM sass-listen (4.0.0) rb-fsevent (~> 0.9, >= 0.9.4) rb-inotify (~> 0.9, >= 0.9.7) + sprockets (3.7.2) + concurrent-ruby (~> 1.0) + rack (> 1, < 3) thread_safe (0.3.6) + thread_safe (0.3.6-java) typhoeus (1.3.1) ethon (>= 0.9.0) tzinfo (1.2.5) thread_safe (~> 0.1) + tzinfo-data (1.2019.3) + tzinfo (>= 1.0.0) yell (2.0.7) PLATFORMS + java ruby + x64-mingw32 + x86-mingw32 + x86-mswin32 DEPENDENCIES html-proofer (~> 3.10) - jekyll (~> 3.8.4) + jekyll (~> 3.8) + jekyll-assets (~> 3.0) jekyll-feed (~> 0.6) jekyll-paginate-v2 (= 2.0) jekyll-redirect-from diff --git a/README.md b/README.md index 75dbb0440..a376ca23f 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/_config.yml b/_config.yml index 78b99ce14..c7041f677 100644 --- a/_config.yml +++ b/_config.yml @@ -19,7 +19,7 @@ ########################################################################################## title: Agency Name -email: contact@example.gov +email: contact@example.gov 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. @@ -48,17 +48,17 @@ 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 # @@ -66,8 +66,8 @@ secondary_navigation: # 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 @@ -76,7 +76,6 @@ searchgov: # changed if you know what they do ########################################################################################## - collections: pages: output: true @@ -84,7 +83,6 @@ collections: permalink: pretty - markdown: kramdown plugins: - jekyll-feed @@ -97,91 +95,45 @@ plugins: # Site configuration for the Jekyll 3 Pagination Gem # The values here represent the defaults if nothing is set pagination: - # Site-wide kill switch, disabled here it doesn't run at all enabled: true - # 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 - # Optional, the default file extension for generated pages (e.g html, json, xml). # Internally this is set to html by default extension: html - # Optional, the default name of the index file for generated pages (e.g. 'index.html') # Without file extension - indexpage: 'index.html' - - - -# # Configuration for jekyll_pages_api_search plugin gem. -# jekyll_pages_api_search: -# # Uncomment this to speed up site generation while developing. -# #skip_index: true -# -# # Each member of `index_fields` should correspond to a field generated by -# # the jekyll_pages_api. It can hold an optional `boost` member as a signal -# # to Lunr.js to weight the field more highly (default is 1). -# index_fields: -# title: -# boost: 10 -# tags: -# boost: 10 -# url: -# boost: 5 -# body: -# -# # If defined and browserify and uglifyify are installed, the plugin will -# # generate a bundle to define the renderJekyllPagesApiSearchResults -# # function. -# browserify: -# source: js/my-search.js -# target: js/my-search-bundle.js -# - + indexpage: "index.html" -# Exclude from processing. -# The following items will not be processed, by default. Create a custom list -# to override the default setting. exclude: - Gemfile - Gemfile.lock @@ -195,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 diff --git a/_includes/footer.html b/_includes/footer.html index 5187ebeb5..eab62e520 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -2,10 +2,10 @@
-
+
@@ -27,29 +27,4 @@
- - - - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/header.html b/_includes/header.html index a02b2b8b5..2af4e1b7c 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,46 +1,46 @@ -{% comment %} +{% comment %} This appears at the top of the page letting the user know it's an official government website {% endcomment %} -{% include meta.html %} - +
Skip to main content
- U.S. flag + {% asset us_flag_small.png class="usa-banner__header-flag" alt="U.S. flag" %}

An official website of the United States government

-
- Dot gov + {% asset icon-dot-gov.svg class="usa-banner__icon usa-media-block__img" alt="Dot gov" %}

The .gov means it’s official.
- 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.

- Https + {% asset icon-https.svg class="usa-banner__icon usa-media-block__img" alt="Https" %}

The site is secure.
- The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely. + The https:// ensures that you are connecting to the official website and that any + information you provide is encrypted and transmitted securely.

@@ -48,4 +48,5 @@
-
\ No newline at end of file +
+
\ No newline at end of file diff --git a/_includes/highlights.html b/_includes/highlights.html index b632073b8..90d23b4b9 100644 --- a/_includes/highlights.html +++ b/_includes/highlights.html @@ -1,5 +1,6 @@ -{% 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 %} @@ -7,33 +8,37 @@
- Alt text + {% asset circle-124.png class="usa-media-block__img" alt="Alt text" %}

Graphic headings can vary.

-

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.

+

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.

- Alt text + {% asset circle-124.png class="usa-media-block__img" alt="Alt text" %}

Stick to 6 or fewer words.

-

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.

+

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.

- Alt text + {% asset circle-124.png class="usa-media-block__img" alt="Alt text" %}

Never highlight anything without a goal.

-

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.

+

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.

- Alt text + {% asset circle-124.png class="usa-media-block__img" alt="Alt text" %}

Could also have 2 or 6.

-

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.

+

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.

diff --git a/_includes/logo.html b/_includes/logo.html new file mode 100644 index 000000000..aab77f98e --- /dev/null +++ b/_includes/logo.html @@ -0,0 +1,3 @@ + diff --git a/_includes/menu.html b/_includes/menu.html index 3618d4a49..576428dc8 100644 --- a/_includes/menu.html +++ b/_includes/menu.html @@ -1,30 +1,30 @@ -{% 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 %}