diff --git a/.gitignore b/.gitignore index fc5dff34..238c9a33 100644 --- a/.gitignore +++ b/.gitignore @@ -2,8 +2,5 @@ _site .sass-cache .jekyll-metadata node_modules -assets/js -assets/uswds -_sass/uswds .bundle .jekyll-cache/ diff --git a/README.md b/README.md index 75dbb044..a376ca23 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 4c0677fb..c7041f67 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 @@ -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 @@ -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 @@ -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 diff --git a/_includes/footer.html b/_includes/footer.html index 84f32f16..eab62e52 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -2,10 +2,10 @@
-
+
@@ -27,30 +27,4 @@
- - - - - - - - - -{% asset index.js %} - - - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/header.html b/_includes/header.html index a02b2b8b..2af4e1b7 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 b632073b..90d23b4b 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/menu.html b/_includes/menu.html index 7e7bcfdf..576428dc 100644 --- a/_includes/menu.html +++ b/_includes/menu.html @@ -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 %} @@ -10,19 +10,21 @@