├── _img ├── uploads │ └── .keep ├── hero.png ├── hire-us.jpg ├── logo-img.png └── gsa-logo.svg ├── js ├── admin.js ├── app.js └── uswds-init.js ├── CODEOWNERS ├── .eleventyignore ├── styles ├── overrides │ └── _hero.scss └── styles.scss ├── pages ├── 404.md ├── collections.md ├── policies.md ├── reports.md ├── document.md └── document-with-sidenav.md ├── _includes ├── logo.html ├── layouts │ ├── 404.html │ ├── wide.html │ ├── default.html │ ├── post.html │ ├── data.html │ ├── base.html │ └── page.html ├── hero.html ├── tagline.html ├── collection-item.html ├── searchgov │ └── form.html ├── scripts.html ├── directory-item.html ├── sidenav.html ├── footer.html ├── meta.html ├── highlights.html ├── header.html ├── menu.html └── pagination-links.html ├── about └── index.md ├── postcss.config.js ├── pages.json ├── .github ├── pull_request_template.md └── workflows │ └── codeql-analysis.yml ├── sitemap.xml.njk ├── departments.html ├── index.html ├── admin ├── index.html └── config.yml ├── config ├── index.js └── buildAssets.js ├── posts ├── 2020-01-15-second-post.md ├── 2021-01-16-third-post.md ├── 2019-01-13-an-extra.md └── 2022-01-14-hello-world.md ├── SECURITY.md ├── departments.liquid ├── _data ├── collections.yaml ├── site.yaml └── staff.csv ├── LICENSE.md ├── CONTRIBUTING.md ├── members.liquid ├── package.json ├── staff-directory └── index.html ├── .gitignore ├── .eleventy.js ├── blog └── index.html └── README.md /_img/uploads/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/admin.js: -------------------------------------------------------------------------------- 1 | require('decap-cms'); 2 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | require('@uswds/uswds'); 2 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @cloud-gov/pages-ops @cloud-gov/studio 2 | -------------------------------------------------------------------------------- /js/uswds-init.js: -------------------------------------------------------------------------------- 1 | require('../node_modules/@uswds/uswds/dist/js/uswds-init'); 2 | -------------------------------------------------------------------------------- /_img/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloud-gov/pages-uswds-11ty/HEAD/_img/hero.png -------------------------------------------------------------------------------- /_img/hire-us.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloud-gov/pages-uswds-11ty/HEAD/_img/hire-us.jpg -------------------------------------------------------------------------------- /_img/logo-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloud-gov/pages-uswds-11ty/HEAD/_img/logo-img.png -------------------------------------------------------------------------------- /.eleventyignore: -------------------------------------------------------------------------------- 1 | CONTRIBUTING.md 2 | LICENSE.md 3 | README.md 4 | SECURITY.md 5 | .github 6 | config 7 | -------------------------------------------------------------------------------- /styles/overrides/_hero.scss: -------------------------------------------------------------------------------- 1 | .usa-hero { 2 | background-image: $theme-hero-image !important; 3 | } 4 | -------------------------------------------------------------------------------- /pages/404.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/404 3 | permalink: 404.html 4 | title: Page not found 5 | --- 6 | 7 | The requested page was not found (error 404). -------------------------------------------------------------------------------- /_includes/logo.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /about/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/page 3 | title: About Me 4 | eleventyNavigation: 5 | key: About Me 6 | order: 3 7 | --- 8 | 9 | I am a person that writes stuff. 10 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer')({ 4 | map: process.env.ELEVENTY_ENV !== 'production' 5 | }), 6 | ], 7 | }; -------------------------------------------------------------------------------- /pages.json: -------------------------------------------------------------------------------- 1 | { 2 | "headers": [ 3 | { 4 | "/*.css": { 5 | "cache-control": "public, max-age=31536000, immutable" 6 | } 7 | } 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /pages/collections.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Collections 3 | layout: layouts/data 4 | permalink: /collections/ 5 | datafile: collections 6 | --- 7 | 8 | This is an example for list data file contents 9 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Changes proposed in this pull request: 2 | - 3 | - 4 | - 5 | 6 | ## security considerations 7 | [Note the any security considerations here, or make note of why there are none] 8 | -------------------------------------------------------------------------------- /_includes/layouts/404.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/page 3 | --- 4 | 5 |
6 |
7 |

{{title}}

8 |

{{content}}

9 |
10 |
-------------------------------------------------------------------------------- /_includes/layouts/wide.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/default 3 | --- 4 | 5 | {% comment %} 6 | This template is used when you want to fill the width of the page. By default, it's only used in the homepage 7 | {% endcomment %} 8 | 9 | {{ content }} 10 | -------------------------------------------------------------------------------- /styles/styles.scss: -------------------------------------------------------------------------------- 1 | @use 'uswds-core' as * with ( 2 | $theme-show-notifications: false, 3 | $theme-font-path: '../node_modules/@uswds/uswds/dist/fonts', 4 | $theme-image-path: '../node_modules/@uswds/uswds/dist/img', 5 | $theme-font-type-sans: 'public-sans', 6 | $theme-hero-image: '../_img/hero.png' 7 | ); 8 | 9 | @forward 'uswds'; -------------------------------------------------------------------------------- /_includes/layouts/default.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/base 3 | --- 4 | 5 | {% comment %} 6 | This is used for just about every page. It provides the border around the content. 7 | The home page uses wide.html layout, since it extends full width of page 8 | {% endcomment %} 9 | 10 |
11 | {{ content }} 12 |
13 | -------------------------------------------------------------------------------- /sitemap.xml.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /sitemap.xml 3 | eleventyExcludeFromCollections: true 4 | --- 5 | 6 | 7 | {%- for page in collections.all %} 8 | 9 | {{ site.url }}{{ page.url }} 10 | {{ page.date | htmlDateString }} 11 | 12 | {%- endfor %} 13 | 14 | -------------------------------------------------------------------------------- /_includes/hero.html: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | This will be displayed on the homepage. Ideally, you want to highlight key goals of the website 3 | {% endcomment %} 4 | 5 |
6 |
7 |
8 |

Hero callout:Bring attention to a project priority 9 |

10 |

Support the callout with some short explanatory text. You don’t need more than a couple of sentences.

11 | Call to action 12 |
13 |
14 |
15 | -------------------------------------------------------------------------------- /departments.html: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /departments/ 3 | layout: layouts/wide 4 | title: Departments 5 | --- 6 | 7 | 8 |
9 |
10 |
11 |

All Departments

12 | 21 |
22 |
23 |
-------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: / 3 | layout: layouts/wide 4 | title: Home 5 | --- 6 | 7 | {% comment %} 8 | Welcome to official Federalist Jekyll template for the U.S Web Design System 2.0 9 | 10 | You'll notice that this page only makes reference to two other html files: hero.html and highlights.html 11 | 12 | To the edit the home page, you can edit those files directly, create new ones or add content directly to 13 | this page. 14 | 15 | We recommend splitting apart your site's components into their own smaller section so that its easier to 16 | manage in the long term. 17 | {% endcomment %} 18 | 19 | {% include "hero.html" %} 20 | {% include "tagline.html" %} 21 | {% include "highlights.html" %} 22 | -------------------------------------------------------------------------------- /admin/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | 6 | 7 | 8 | 9 | Content Manager 10 | 11 | 12 | 13 | 14 | 15 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /_includes/layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/default 3 | --- 4 | 5 | {% comment %} 6 | This is used in blog posts. The index page can be found at blog/index.html 7 | {% endcomment %} 8 | 9 |
10 |
11 |
12 |
13 |

{{title}}

14 |
15 |
16 | By {{ author }} · {{ date | date: '%B %d, %Y' }} 17 |
18 |
19 | {{ content }} 20 |
21 |
22 |
23 |
24 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const Image = require("@11ty/eleventy-img"); 3 | 4 | 5 | 6 | async function imageWithClassShortcode(src, cls, alt) { 7 | const ext = path.extname(src); 8 | const fileType = ext.replace(".", ""); 9 | 10 | const metadata = await Image(src, { 11 | formats: [fileType], 12 | outputDir: "./_site/img/", 13 | }); 14 | 15 | const data = metadata[fileType] ? metadata[fileType][0] : metadata.jpeg[0]; 16 | return `${alt}`; 17 | } 18 | 19 | async function imageShortcode(src, alt) { 20 | return await imageWithClassShortcode(src, "", alt); 21 | } 22 | 23 | module.exports = { 24 | imageWithClassShortcode, 25 | imageShortcode, 26 | }; 27 | -------------------------------------------------------------------------------- /_includes/layouts/data.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/default 3 | --- 4 | 5 | {% comment %} 6 | This is an example showing how you can load date from the _data/ folder 7 | {% endcomment %} 8 | 9 | 10 |
11 |
12 |
13 |
14 |

{{page.title}}

15 | {{ content }} 16 |
    17 | {% for item in site.data[page.datafile] %} 18 |
  • 19 | {{ item.name }}: {{item.description}} 20 |
    • 21 | {% endfor %} 22 |
23 |
24 |
25 |
26 |
27 | -------------------------------------------------------------------------------- /_includes/layouts/base.html: -------------------------------------------------------------------------------- 1 | 2 | {% comment %} 3 | This is used for just about every page. It provides the border around the content. 4 | The home page uses wide.html layout, since it extends full width of page 5 | {% endcomment %} 6 | 7 | 8 | 9 | {% include "meta.html" %} 10 | 11 | 12 | {% include "header.html" %} 13 | 14 | {% include "menu.html" primary_navigation: site.primary_navigation secondary_navigation: site.secondary_navigation %} 15 | 16 | {{ content }} 17 | 18 | {% include "footer.html" %} 19 | 20 | {% comment %} Hide SVG Sprites {% endcomment %} 21 |
22 | {% usa_icons_sprite %} 23 | {% uswds_icons_sprite %} 24 |
25 | 26 | {% include "scripts.html" %} 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /posts/2020-01-15-second-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Second page 3 | description: The second page as it says 4 | layout: layouts/post 5 | date: 2020-01-15 6 | author: George Washington 7 | excerpt: This is an excerpt for second page 8 | tags: 9 | - posts 10 | --- 11 | 12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus interdum pellentesque. Integer eu vehicula elit. Sed cursus magna in dui suscipit rhoncus. 13 | 14 | Curabitur sed elit viverra, fermentum massa non, hendrerit ex. Vivamus eget mattis tortor, eu elementum sapien. Praesent elementum feugiat nisi venenatis vestibulum. Nulla pretium ipsum orci, ut feugiat arcu facilisis sit amet. 15 | 16 | Morbi bibendum est non nibh aliquam, non dictum massa elementum. Nullam vitae auctor erat. Mauris at arcu ut purus sodales porttitor ut sit amet ex. Donec viverra quam nisl, a congue arcu fermentum rhoncus. 17 | -------------------------------------------------------------------------------- /posts/2021-01-16-third-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Third page 3 | description: No confusion here, this is the third page 4 | layout: layouts/post 5 | date: 2021-01-16 6 | author: Benjamin Franklin 7 | excerpt: This is an excerpt for second page 8 | tags: 9 | - posts 10 | --- 11 | 12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus interdum pellentesque. Integer eu vehicula elit. Sed cursus magna in dui suscipit rhoncus. 13 | 14 | Curabitur sed elit viverra, fermentum massa non, hendrerit ex. Vivamus eget mattis tortor, eu elementum sapien. Praesent elementum feugiat nisi venenatis vestibulum. Nulla pretium ipsum orci, ut feugiat arcu facilisis sit amet. 15 | 16 | Morbi bibendum est non nibh aliquam, non dictum massa elementum. Nullam vitae auctor erat. Mauris at arcu ut purus sodales porttitor ut sit amet ex. Donec viverra quam nisl, a congue arcu fermentum rhoncus. 17 | -------------------------------------------------------------------------------- /_includes/tagline.html: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | This tagline will appear in your homepage 3 | {% endcomment %} 4 | 5 |
6 |
7 |
8 |

A tagline highlights your approach

9 |
10 |
11 |

The tagline should inspire confidence and interest, focusing on the value that your overall approach offers to your audience. Use a heading typeface and keep your tagline to just a few words, and don’t confuse or mystify.

12 |

Use the right side of the grid to explain the tagline a bit more. What are your goals? How do you do your work? Write in the present tense, and stay brief here. People who are interested can find details on internal pages.

13 |
14 |
15 |
-------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | 2 | **Reporting Security Issues** 3 | 4 | Please refrain from reporting security vulnerabilities through public GitHub issues. 5 | 6 | Instead, kindly report them via the information provided in [cloud.gov's security.txt](https://cloud.gov/.well-known/security.txt). 7 | 8 | When reporting, include the following details (as much as possible) to help us understand the nature and extent of the potential issue: 9 | 10 | - Type of issue (e.g., buffer overflow, SQL injection, cross-site scripting, etc.) 11 | - Full paths of related source file(s) 12 | - Location of affected source code (tag/branch/commit or direct URL) 13 | - Any special configuration required to reproduce the issue 14 | - Step-by-step instructions to reproduce the issue 15 | - Proof-of-concept or exploit code (if available) 16 | - Impact of the issue, including potential exploitation by attackers 17 | 18 | Providing this information will facilitate a quicker triage of your report. 19 | -------------------------------------------------------------------------------- /departments.liquid: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/wide 3 | title: Staff 4 | pagination: 5 | data: collections.staffByDept 6 | size: 1 7 | alias: department 8 | 9 | permalink: "/departments/{{ department.name | slug }}/index.html" 10 | --- 11 |
12 |
13 |

{{ department.name | escape }} Department

14 | This is a description of the department. 17 |
18 |
19 |
20 |
21 |
22 | {%- for member in department.staff %} 23 | {% include "directory-item.html" member: member %} 24 | {% endfor %} 25 |
26 |
27 |
28 |
-------------------------------------------------------------------------------- /posts/2019-01-13-an-extra.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: An extra post for good measure 3 | description: This post is an example of an extra post for good measure 4 | layout: layouts/post 5 | date: 2019-01-13 6 | author: Author 7 | excerpt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus interdum pellentesque. Integer eu vehicula elit. Sed cursus magna in dui suscipit rhoncus. 8 | tags: 9 | - posts 10 | --- 11 | 12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus interdum pellentesque. Integer eu vehicula elit. Sed cursus magna in dui suscipit rhoncus. 13 | 14 | Curabitur sed elit viverra, fermentum massa non, hendrerit ex. Vivamus eget mattis tortor, eu elementum sapien. Praesent elementum feugiat nisi venenatis vestibulum. Nulla pretium ipsum orci, ut feugiat arcu facilisis sit amet. 15 | 16 | Morbi bibendum est non nibh aliquam, non dictum massa elementum. Nullam vitae auctor erat. Mauris at arcu ut purus sodales porttitor ut sit amet ex. Donec viverra quam nisl, a congue arcu fermentum rhoncus. 17 | -------------------------------------------------------------------------------- /_includes/collection-item.html: -------------------------------------------------------------------------------- 1 |
  • 2 | {% if post.data.image %} 3 | {% assign imagepath="./_img/" | append: post.data.image %} 4 | {% image_with_class imagepath "usa-collection__img" post.data.image_alt_text %} 5 | {% endif %} 6 |
    7 |

    8 | {{ post.data.title }} 13 |

    14 |

    15 | {{ post.templateContent | truncatewords: 10 }} 16 |

    17 | 27 |
    28 |
    • 29 | -------------------------------------------------------------------------------- /posts/2022-01-14-hello-world.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: A very long blog header that has a lot of detail but is still relevant 3 | description: This post has a long header 4 | layout: layouts/post 5 | date: 2022-01-14 6 | author: Abraham Lincoln 7 | excerpt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus interdum pellentesque. Integer eu vehicula elit. Sed cursus magna in dui suscipit rhoncus. 8 | image: hire-us.jpg 9 | image_alt_text: Hire Us 10 | tags: 11 | - posts 12 | --- 13 | 14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus interdum pellentesque. Integer eu vehicula elit. Sed cursus magna in dui suscipit rhoncus. 15 | 16 | Curabitur sed elit viverra, fermentum massa non, hendrerit ex. Vivamus eget mattis tortor, eu elementum sapien. Praesent elementum feugiat nisi venenatis vestibulum. Nulla pretium ipsum orci, ut feugiat arcu facilisis sit amet. 17 | 18 | Morbi bibendum est non nibh aliquam, non dictum massa elementum. Nullam vitae auctor erat. Mauris at arcu ut purus sodales porttitor ut sit amet ex. Donec viverra quam nisl, a congue arcu fermentum rhoncus. 19 | -------------------------------------------------------------------------------- /_includes/searchgov/form.html: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | This will redirect the results to /search template which will handle the js loading 3 | {% endcomment %} 4 | 5 | {% if searchgov %} 6 | {% if searchgov.inline == true %} 7 |
    8 | {% else %} 9 | 10 | {% endif %} 11 | 12 | 13 | 14 | 15 |
    16 | 17 | 18 | 21 |
    22 |
    23 | {% endif %} 24 | -------------------------------------------------------------------------------- /pages/policies.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Policies 3 | layout: layouts/page 4 | permalink: /policies/ 5 | sidenav: true 6 | sidenav_items: 7 | - name: Accessibility statement 8 | url: '#accessibility-statement' 9 | - name: Freedom of Information Act (FOIA) 10 | url: '#freedom-of-information-act-foia' 11 | - name: Equal employment 12 | url: '#equal-employment' 13 | - name: External links 14 | url: '#external-links' 15 | - name: Privacy policy 16 | url: '#privacy-policy' 17 | - name: Vulnerability disclosure policy 18 | url: '#vulnerability-disclosure-policy' 19 | --- 20 | 21 | ## Accessibility statement 22 | Placeholder text here. 23 | 24 | ### Available complaint process 25 | Placeholder text here. 26 | 27 | ### Use of the telecommunications relay service 28 | Placeholder text here. 29 | 30 | ### Accessibility aids: plug-ins and file viewers 31 | Placeholder text here. 32 | 33 | ## Freedom of Information Act (FOIA) 34 | Placeholder text here. 35 | 36 | ## Equal employment 37 | Placeholder text here. 38 | 39 | ## External links 40 | Placeholder text here. 41 | 42 | ## Privacy policy 43 | Placeholder text here. 44 | 45 | ## Vulnerability disclosure policy 46 | Placeholder text here. -------------------------------------------------------------------------------- /_data/collections.yaml: -------------------------------------------------------------------------------- 1 | # We can add any kind of data in this _data folder and this file. 2 | # In this example, we create a simple array of options and then in the _pages/collections.md file we 3 | # Reference this data file in 'datafile' in the Front Matter and _layouts/list.html renders it 4 | # This is simple, hopefully provides you with a good enough example to make changes as needed 5 | - name: GSA 6 | url: https://gsa.gov 7 | description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus interdum pellentesque. Integer eu vehicula elit. Sed cursus magna in dui suscipit rhoncus. 8 | 9 | - name: USDA 10 | url: http://usda.gov/ 11 | description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus interdum pellentesque. Integer eu vehicula elit. Sed cursus magna in dui suscipit rhoncus. 12 | 13 | - name: Performance.gov 14 | url: http://performance.gov/ 15 | description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus interdum pellentesque. Integer eu vehicula elit. Sed cursus magna in dui suscipit rhoncus. 16 | 17 | - name: Login.gov 18 | url: https://login.gov 19 | description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus interdum pellentesque. Integer eu vehicula elit. Sed cursus magna in dui suscipit rhoncus. 20 | -------------------------------------------------------------------------------- /_includes/layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/base 3 | --- 4 | 5 | {% comment %} 6 | This template is for a single page that does not have a date associated with it. For example, an about page. 7 | {% endcomment %} 8 | 9 |
    10 |
    11 |
    12 | {% if sidenav == true %} 13 | 31 | {% endif %} 32 |
    33 |
    34 | {{ content }} 35 |
    36 |
    37 |
    38 |
    39 |
    40 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # License 2 | 3 | As a work of the [United States government](https://www.usa.gov/), this project is in the public domain within the United States of America. 4 | 5 | Additionally, we waive copyright and related rights in the work worldwide through the CC0 1.0 Universal public domain dedication. 6 | 7 | ## CC0 1.0 Universal Summary 8 | 9 | This is a human-readable summary of the [Legal Code (read the full text)](https://creativecommons.org/publicdomain/zero/1.0/legalcode). 10 | 11 | ### No Copyright 12 | 13 | The person who associated a work with this deed has dedicated the work to the public domain by waiving all of their rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law. 14 | 15 | You can copy, modify, distribute, and perform the work, even for commercial purposes, all without asking permission. 16 | 17 | ### Other Information 18 | 19 | In no way are the patent or trademark rights of any person affected by CC0, nor are the rights that other persons may have in the work or in how the work is used, such as publicity or privacy rights. 20 | 21 | Unless expressly stated otherwise, the person who associated a work with this deed makes no warranties about the work, and disclaims liability for all uses of the work, to the fullest extent permitted by applicable law. When using or citing the work, you should not imply endorsement by the author or the affirmer. 22 | -------------------------------------------------------------------------------- /pages/reports.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Reports 3 | layout: layouts/page 4 | permalink: /reports/ 5 | sidenav: false 6 | --- 7 | 8 | # Annual Reports 9 | 10 | The page heading communicates the main focus of the page. Make your page heading descriptive and keep it succinct. 11 | 12 | We can also use variables in our pages. For example, this is the title variable: **{{page.title}}** 13 | 14 | ## Section heading (h2) 15 | 16 | These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise. 17 | 18 | ### Subsection heading (h3) 19 | 20 | The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance. 21 | 22 | Keep each section and subsection focused — a good approach is to include one theme (topic) per section. 23 | 24 | #### Subsection heading (h4) 25 | 26 | Use the side navigation menu to help your users quickly skip to different sections of your page. The menu is best suited to displaying a hierarchy with one to three levels and, as we mentioned, to display the sub-navigation of a given page. 27 | 28 | Read the full documentation on our side navigation on the component page. 29 | -------------------------------------------------------------------------------- /pages/document.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Document 3 | layout: layouts/page 4 | permalink: /document/ 5 | sidenav: false 6 | --- 7 | 8 | # Section heading (h1) 9 | 10 | The page heading communicates the main focus of the page. Make your page heading descriptive and keep it succinct. 11 | 12 | We can also use variables in our pages. For example, this is the title variable: **{{page.title}}** 13 | 14 | ## Section heading (h2) 15 | 16 | These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise. 17 | 18 | ### Subsection heading (h3) 19 | 20 | The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance. 21 | 22 | Keep each section and subsection focused — a good approach is to include one theme (topic) per section. 23 | 24 | #### Subsection heading (h4) 25 | 26 | Use the side navigation menu to help your users quickly skip to different sections of your page. The menu is best suited to displaying a hierarchy with one to three levels and, as we mentioned, to display the sub-navigation of a given page. 27 | 28 | Read the full documentation on our side navigation on the component page. 29 | -------------------------------------------------------------------------------- /_includes/scripts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {% if site.dap.agency %} 6 | 10 | {% endif %} 11 | 12 | {% if site.ga.ua %} 13 | 14 | 15 | 27 | {% endif %} 28 | 29 | {% if site.searchgov %} 30 | {% if site.searchgov.suggestions == true %} 31 | 34 | 35 | {% endif %} 36 | {% endif %} 37 | -------------------------------------------------------------------------------- /pages/document-with-sidenav.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Document with Sidenav 3 | permalink: /document-with-sidenav/ 4 | layout: layouts/page 5 | sidenav: true 6 | --- 7 | 8 | # Section heading (h1) 9 | 10 | The page heading communicates the main focus of the page. Make your page heading descriptive and keep it succinct. 11 | 12 | We can also use variables in our pages. For example, this is the title variable: **{{page.title}}** 13 | 14 | ## Section heading (h2) 15 | 16 | These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise. 17 | 18 | ### Subsection heading (h3) 19 | 20 | The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance. 21 | 22 | Keep each section and subsection focused — a good approach is to include one theme (topic) per section. 23 | 24 | #### Subsection heading (h4) 25 | 26 | Use the side navigation menu to help your users quickly skip to different sections of your page. The menu is best suited to displaying a hierarchy with one to three levels and, as we mentioned, to display the sub-navigation of a given page. 27 | 28 | Read the full documentation on our side navigation on the component page. 29 | -------------------------------------------------------------------------------- /_includes/directory-item.html: -------------------------------------------------------------------------------- 1 |
  • 2 | {{ member.first_name }} {{ member.last_name }} 3 | 4 |
    5 |

    6 | 10 | {{ member.first_name }} 11 | {{ member.last_name }} 12 | 13 |

    14 |

    15 | {{ member.job_title }}, 16 | {{ member.department }} 17 | 18 |

    19 | 30 |
    31 |
    • -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | name: "CodeQL" 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | pull_request: 7 | branches: [ main ] 8 | schedule: 9 | - cron: '20 22 * * 2' 10 | 11 | jobs: 12 | analyze: 13 | name: Analyze 14 | runs-on: ubuntu-latest 15 | permissions: 16 | actions: read 17 | contents: read 18 | security-events: write 19 | 20 | strategy: 21 | fail-fast: false 22 | matrix: 23 | language: [ 'javascript' ] 24 | 25 | steps: 26 | - name: Checkout repository 27 | uses: actions/checkout@v3 28 | 29 | - name: Initialize CodeQL 30 | uses: github/codeql-action/init@v2 31 | with: 32 | languages: ${{ matrix.language }} 33 | 34 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 35 | # If this step fails, then you should remove it and run the build manually (see below) 36 | - name: Autobuild 37 | uses: github/codeql-action/autobuild@v2 38 | 39 | # ℹ️ Command-line programs to run using the OS shell. 40 | # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun 41 | 42 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 43 | # and modify them (or add more) to build your code if your project 44 | # uses a compiled language 45 | 46 | #- run: | 47 | # make bootstrap 48 | # make release 49 | 50 | - name: Perform CodeQL Analysis 51 | uses: github/codeql-action/analyze@v2 52 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Welcome! 2 | 3 | We're so glad you're thinking about contributing to a [open source project of the U.S. government](https://code.gov/)! If you're unsure about anything, just ask -- or submit the issue or pull request anyway. The worst that can happen is you'll be politely asked to change something. We love all friendly contributions. 4 | 5 | We encourage you to read this project's CONTRIBUTING policy (you are here), its [LICENSE](LICENSE.md), and its [README](README.md). 6 | 7 | ## Policies 8 | 9 | We want to ensure a welcoming environment for all of our projects. Our staff follow the [TTS Code of Conduct](https://18f.gsa.gov/code-of-conduct/) and all contributors should do the same. 10 | 11 | We adhere to the [18F Open Source Policy](https://github.com/18f/open-source-policy). If you have any questions, just [shoot us an email](mailto:18f@gsa.gov). 12 | 13 | As part of a U.S. government agency, the General Services Administration (GSA)’s Technology Transformation Services (TTS) takes seriously our responsibility to protect the public’s information, including financial and personal information, from unwarranted disclosure. For more information about security and vulnerability disclosure for our projects, please read our [18F Vulnerability Disclosure Policy](https://18f.gsa.gov/vulnerability-disclosure-policy/). 14 | 15 | ## Public domain 16 | 17 | This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/). 18 | 19 | All contributions to this project will be released under the CC0 dedication. By submitting a pull request or issue, you are agreeing to comply with this waiver of copyright interest. 20 | -------------------------------------------------------------------------------- /members.liquid: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/wide 3 | title: Staff 4 | pagination: 5 | data: staff 6 | size: 1 7 | alias: member 8 | 9 | permalink: "/members/{{ member.id }}/index.html" 10 | --- 11 |
    12 |
    13 |

    {{ member.first_name }} {{ member.last_name }}

    14 | 16 | 17 | {{ member.job_title }}, 18 | {{ member.department }} 20 |
    21 |
    22 |
    23 |
    24 |
    25 | {{ member.first_name }} {{ member.last_name }} 26 | 27 |
    28 |
    29 |
      30 |
    • 31 | {{ member.email }} 32 |
      • 33 |
    • 34 | {{ member.phone }} 35 |
      • 36 |
    • 37 | {{ member.location }} 38 |
      • 39 |
    40 |
    41 |
    42 |
    -------------------------------------------------------------------------------- /_includes/sidenav.html: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | The sidenav is not loaded by default on the main pages. To include this navigation you can either use the 3 | _layouts/page.html layout template, or you can add "sidenav: true" in the front-matter of your pages 4 | {% endcomment %} 5 | 6 | -------------------------------------------------------------------------------- /admin/config.yml: -------------------------------------------------------------------------------- 1 | ## Comment out when doing local development 2 | backend: 3 | name: github 4 | repo: cloud-gov/pages-uswds-11ty 5 | base_url: https://pages.cloud.gov 6 | auth_endpoint: external/auth/github 7 | preview_context: pages/build 8 | branch: main 9 | use_graphql: true 10 | 11 | 12 | ## 13 | ## Uncomment when doing local development on Netlify CMS 14 | ## Run `npx netlify-cms-proxy-server` to start working locally 15 | ## In another terminal, start the app with `npm start` 16 | ## See https://www.netlifycms.org/docs/beta-features/#working-with-a-local-git-repository 17 | ## 18 | 19 | # backend: 20 | # name: git-gateway 21 | # local_backend: true 22 | 23 | ## 24 | ## 25 | 26 | media_folder: _img/uploads 27 | public_folder: uploads 28 | publish_mode: editorial_workflow 29 | logo_url: https://pages.cloud.gov/images/logos/pages-logo-blue.svg 30 | 31 | collections: 32 | - label: Posts 33 | name: posts 34 | folder: posts/ 35 | create: true 36 | slug: "{{year}}-{{month}}-{{day}}-{{slug}}" 37 | editor: 38 | preview: false 39 | fields: 40 | - {label: 'Layout', name: 'layout', widget: 'hidden', default: 'layouts/post'} 41 | - {label: 'Tags', name: 'tags', widget: 'hidden', default: ['posts']} 42 | - {label: "Title", name: "title", widget: "string"} 43 | - {label: "Author", name: "author", widget: "string"} 44 | - { 45 | label: "Publish Date", 46 | name: "date", 47 | widget: "datetime", 48 | format: 'YYYY-MM-DD', 49 | dateFormat: 'YYYY-MM-DD', 50 | timeFormat: false 51 | } 52 | - { 53 | label: "Image", 54 | name: "image", 55 | widget: "image", 56 | allow_multiple: false, 57 | required: false 58 | } 59 | - { 60 | label: "Image Alt Text", 61 | name: "image_alt_text", 62 | widget: "string", 63 | required: false 64 | } 65 | - {label: "Body", name: "body", widget: "markdown"} 66 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "11ty-uswds-template", 3 | "version": "0.0.2", 4 | "description": "A 11ty UWDS template.", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "npm run assets:build && npx @11ty/eleventy", 8 | "assets:autoprefix": "postcss _site/assets/styles/*.css -r", 9 | "assets:build": "node ./config/buildAssets && npm run assets:autoprefix", 10 | "assets:clean": "rimraf _site/assets", 11 | "assets:refresh": "npm run assets:clean && npm run assets:build", 12 | "assets:watch": "chokidar 'js/**' 'styles/**' -c 'npm run assets:refresh' --polling", 13 | "clean": "rimraf _site", 14 | "dev": "npm run clean && npm run assets:build && npm-run-all -p dev:assets dev:serve", 15 | "dev:clean": "npm run clean && npm run dev", 16 | "dev:assets": "npm run assets:refresh && npm run assets:watch", 17 | "dev:debug": "DEBUG=* npx @11ty/eleventy --serve --watch", 18 | "dev:serve": "npx @11ty/eleventy --serve --watch", 19 | "dev:cms": "npx decap-server", 20 | "pages": "ELEVENTY_ENV=production npm run build", 21 | "serve": "npx @11ty/eleventy --serve", 22 | "start": "npx @11ty/eleventy --serve", 23 | "test": "echo \"Error: no test specified\" && exit 1" 24 | }, 25 | "author": "", 26 | "license": "CC0-1.0", 27 | "devDependencies": { 28 | "@11ty/eleventy": "^2.0.1", 29 | "@11ty/eleventy-img": "^4.0.2", 30 | "@11ty/eleventy-navigation": "^0.3.5", 31 | "@11ty/eleventy-plugin-rss": "^1.2.0", 32 | "autoprefixer": "^10.4.20", 33 | "chokidar-cli": "^3.0.0", 34 | "eleventy-plugin-svg-sprite": "^2.4.2", 35 | "esbuild": "0.25.0", 36 | "esbuild-sass-plugin": "^3.3.1", 37 | "js-yaml": "^4.1.0", 38 | "luxon": "^3.5.0", 39 | "markdown-it": "^14.1.0", 40 | "markdown-it-named-headings": "^1.1.0", 41 | "npm-run-all": "^4.1.5", 42 | "postcss": "^8.4.47", 43 | "postcss-cli": "^11.0.0", 44 | "rimraf": "^6.0.1" 45 | }, 46 | "dependencies": { 47 | "@uswds/uswds": "^3.8.2", 48 | "csv-parse": "^5.6.0", 49 | "decap-cms": "^3.3.3" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 43 | -------------------------------------------------------------------------------- /staff-directory/index.html: -------------------------------------------------------------------------------- 1 | ---js 2 | { 3 | layout: "layouts/wide", 4 | title: "Staff", 5 | pagination: { 6 | data: "staff", 7 | size: 8, 8 | alias: "staff", 9 | before: function(paginationData, fullData) { 10 | return paginationData.sort((a, b) => a.last_name.localeCompare(b.last_name)); 11 | }, 12 | }, 13 | } 14 | --- 15 | 16 |
    17 |
    18 |

    Alphabetical Listing

    19 | This is a description of the page. 22 |
    23 |
    24 |
    25 |
    26 |
    27 | 28 | {%- for member in staff %} 29 | {% include "directory-item.html" member: member %} 30 | {% endfor %} 31 |
    32 | {% include "pagination-links.html" %} 33 |
    34 |
    35 | 36 |
    39 |

    Another list of links

    40 | 67 |
    68 |
    69 |
    70 |
    71 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # General 2 | .DS_Store 3 | .AppleDouble 4 | .LSOverride 5 | 6 | # Icon must end with two \r 7 | Icon 8 | 9 | # Thumbnails 10 | ._* 11 | 12 | # Files that might appear in the root of a volume 13 | .DocumentRevisions-V100 14 | .fseventsd 15 | .Spotlight-V100 16 | .TemporaryItems 17 | .Trashes 18 | .VolumeIcon.icns 19 | .com.apple.timemachine.donotpresent 20 | 21 | # Directories potentially created on remote AFP share 22 | .AppleDB 23 | .AppleDesktop 24 | Network Trash Folder 25 | Temporary Items 26 | .apdisk 27 | 28 | # Logs 29 | logs 30 | *.log 31 | npm-debug.log* 32 | yarn-debug.log* 33 | yarn-error.log* 34 | lerna-debug.log* 35 | .pnpm-debug.log* 36 | 37 | # Diagnostic reports (https://nodejs.org/api/report.html) 38 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 39 | 40 | # Runtime data 41 | pids 42 | *.pid 43 | *.seed 44 | *.pid.lock 45 | 46 | # Directory for instrumented libs generated by jscoverage/JSCover 47 | lib-cov 48 | 49 | # Coverage directory used by tools like istanbul 50 | coverage 51 | *.lcov 52 | 53 | # nyc test coverage 54 | .nyc_output 55 | 56 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 57 | .grunt 58 | 59 | # Bower dependency directory (https://bower.io/) 60 | bower_components 61 | 62 | # node-waf configuration 63 | .lock-wscript 64 | 65 | # Compiled binary addons (https://nodejs.org/api/addons.html) 66 | build/Release 67 | 68 | # Dependency directories 69 | node_modules/ 70 | jspm_packages/ 71 | 72 | # Snowpack dependency directory (https://snowpack.dev/) 73 | web_modules/ 74 | 75 | # TypeScript cache 76 | *.tsbuildinfo 77 | 78 | # Optional npm cache directory 79 | .npm 80 | 81 | # Optional eslint cache 82 | .eslintcache 83 | 84 | # Optional stylelint cache 85 | .stylelintcache 86 | 87 | # Microbundle cache 88 | .rpt2_cache/ 89 | .rts2_cache_cjs/ 90 | .rts2_cache_es/ 91 | .rts2_cache_umd/ 92 | 93 | # Optional REPL history 94 | .node_repl_history 95 | 96 | # Output of 'npm pack' 97 | *.tgz 98 | 99 | # Yarn Integrity file 100 | .yarn-integrity 101 | 102 | # dotenv environment variable files 103 | .env 104 | .env.development.local 105 | .env.test.local 106 | .env.production.local 107 | .env.local 108 | 109 | # Stores VSCode versions used for testing VSCode extensions 110 | .vscode-test 111 | 112 | # yarn v2 113 | .yarn/cache 114 | .yarn/unplugged 115 | .yarn/build-state.yml 116 | .yarn/install-state.gz 117 | .pnp.* 118 | 119 | # 11ty Related 120 | _site 121 | public 122 | node_modules 123 | _data/assetPaths.json -------------------------------------------------------------------------------- /_includes/meta.html: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | You shouldn't have to edit this page very often. But if you want 3 | to modify some of the meta-data for the site, this is the place to do it. 4 | {% endcomment %} 5 | 6 | 7 | 9 | 10 | 11 | 13 | 14 | 15 | 16 | 18 | {% assign pageTitle = title | append: " | " | append: site.title -%} 19 | {%- assign pageDesc = page.description | default: site.description -%} 20 | {%- assign pageUrl = site.url | append: page.url -%} 21 | 22 | {{pageTitle}} 23 | 24 | 25 | 26 | 27 | 28 | {% if site.twitter -%} 29 | 30 | {%- endif %} 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 42 | 43 | {% comment %} 44 | Preload only the files that are needed for the content in the initial viewport. This 45 | will likely include the fonts needed for the navigation, page heading, and the font needed for the 46 | first paragraph of body copy. The `crossorigin` attribute may be required based on the type 47 | of asset you wish to preload in order for the preload to work properly. 48 | {% endcomment %} 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /_includes/highlights.html: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | Use this section to highlight key elements of your site. Some 3 | sites will only have two while others may have six to eight. 4 | {% endcomment %} 5 | 6 |
    7 |
    8 |
    9 |
    10 | {% image_with_class "./node_modules/@uswds/uswds/dist/img/circle-124.png" "usa-media-block__img" "alt text" %} 11 |
    12 |

    Graphic headings can vary.

    13 |

    14 | Graphic headings can be used a few different ways, depending on what 15 | your landing page is for. Highlight your values, specific program 16 | areas, or results. 17 |

    18 |
    19 |
    20 |
    21 | {% image_with_class "./node_modules/@uswds/uswds/dist/img/circle-124.png" "usa-media-block__img" "alt text" %} 22 |
    23 |

    Stick to 6 or fewer words.

    24 |

    25 | Keep body text to about 30 words. They can be shorter, but try to be 26 | somewhat balanced across all four. It creates a clean appearance 27 | with good spacing. 28 |

    29 |
    30 |
    31 |
    32 |
    33 |
    34 | {% image_with_class "./node_modules/@uswds/uswds/dist/img/circle-124.png" "usa-media-block__img" "alt text" %} 35 |
    36 |

    37 | Never highlight anything without a goal. 38 |

    39 |

    40 | For anything you want to highlight here, understand what your users 41 | know now, and what activity or impression you want from them after 42 | they see it. 43 |

    44 |
    45 |
    46 |
    47 | {% image_with_class "./node_modules/@uswds/uswds/dist/img/circle-124.png" "usa-media-block__img" "alt text" %} 48 |
    49 |

    Could also have 2 or 6.

    50 |

    51 | In addition to your goal, find out your users’ goals. What do they 52 | want to know or do that supports your mission? Use these headings to 53 | show those. 54 |

    55 |
    56 |
    57 |
    58 |
    59 |
    60 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | This appears at the top of the page letting the user know it's an 3 | official government website 4 | {% endcomment %} 5 | 6 |
    7 | Skip to main content 8 |
    9 |
    10 |
    15 |
    16 |
    17 | {% image_with_class "./node_modules/@uswds/uswds/dist/img/us_flag_small.png" "usa-banner__header-flag" "U.S. flag" %} 18 |
    19 |
    20 |

    21 | An official website of the United States government 22 |

    23 | 26 |
    27 | 34 |
    35 |
    36 |
    37 |
    38 |
    39 | {% comment %} {% image_with_class "./node_modules/@uswds/uswds/dist/img/icon-dot-gov.svg" "usa-banner__icon usa-media-block__img" "Dot gov" %} {% endcomment %} 40 |
    41 |

    42 | The .gov means it’s official. 43 |
    44 | Federal government websites often end in .gov or .mil. Before 45 | sharing sensitive information, make sure you’re on a federal 46 | government site. 47 |

    48 |
    49 |
    50 |
    51 | {% comment %} {% image_with_class "./node_modules/@uswds/uswds/dist/img/icon-https.svg" "usa-banner__icon usa-media-block__img" "Https" %} {% endcomment %} 52 |
    53 |

    54 | The site is secure. 55 |
    56 | The https:// ensures that you are connecting to 57 | the official website and that any information you provide is 58 | encrypted and transmitted securely. 59 |

    60 |
    61 |
    62 |
    63 |
    64 |
    65 |
    66 |
    67 |
    68 | -------------------------------------------------------------------------------- /_img/gsa-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_includes/menu.html: -------------------------------------------------------------------------------- 1 | {% comment %} To modify the menu system, you are welcome to edit this HTML 2 | directly or you can look inside _config.yml where we provide an easy way to 3 | manage your navigation system {% endcomment %} 4 | 5 | -------------------------------------------------------------------------------- /config/buildAssets.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs/promises"); 2 | const path = require("path"); 3 | const esbuild = require("esbuild"); 4 | const { sassPlugin } = require("esbuild-sass-plugin"); 5 | 6 | async function getFontFiles(assetPath) { 7 | const assetDirs = await fs.readdir(assetPath, { withFileTypes: true }); 8 | const fonts = await Promise.all( 9 | assetDirs.map(async (item) => { 10 | const itemPath = path.join(assetPath, item.name); 11 | const stats = await fs.lstat(itemPath); 12 | if (stats.isFile() && path.extname(item.name) === ".woff2") { 13 | return item.name; 14 | } 15 | return null; 16 | }) 17 | ); 18 | return fonts 19 | .filter((item) => item !== null) 20 | .map((file) => { 21 | const { name, ext } = path.parse(file); 22 | const hashedAt = name.lastIndexOf("-"); 23 | const originalName = name.slice(0, hashedAt); 24 | const key = `${originalName}${ext}`; 25 | return { [key]: `/assets/${file}` }; 26 | }); 27 | } 28 | 29 | async function createAssetPaths() { 30 | const assetPath = path.join(__dirname, "../_site/assets"); 31 | let assetDirs = await fs.readdir(assetPath, { withFileTypes: true }); 32 | const fontFiles = await getFontFiles(assetPath); 33 | 34 | assetDirs = assetDirs 35 | .filter((item) => item.isDirectory()) 36 | .map((item) => item.name); 37 | 38 | const assetsFiles = await Promise.all( 39 | assetDirs.map(async (dir) => { 40 | const files = await fs.readdir( 41 | path.join(__dirname, "../_site/assets", dir) 42 | ); 43 | return files.map((file) => { 44 | const { name, ext } = path.parse(file); 45 | const hashedAt = name.lastIndexOf("-"); 46 | const originalName = hashedAt > -1 ? name.slice(0, hashedAt) : name; 47 | const key = `${originalName}${ext}`; 48 | return { 49 | [key]: `/assets/${dir}/${file}`, 50 | }; 51 | }); 52 | }) 53 | ); 54 | const assets = Object.assign({}, ...assetsFiles.flat(), ...fontFiles.flat()); 55 | const outputData = path.join(__dirname, "../_data/assetPaths.json"); 56 | 57 | return await fs.writeFile(outputData, JSON.stringify(assets, null, 2)); 58 | } 59 | 60 | esbuild 61 | .build({ 62 | entryPoints: [ 63 | "styles/styles.scss", 64 | "js/app.js", 65 | "js/admin.js", 66 | "js/uswds-init.js", 67 | ], 68 | entryNames: "[dir]/[name]-[hash]", 69 | outdir: "_site/assets", 70 | format: "iife", 71 | loader: { 72 | ".jpg": "file", 73 | ".gif": "file", 74 | ".png": "file", 75 | ".webp": "file", 76 | ".svg": "file", 77 | ".ttf": "file", 78 | ".woff": "file", 79 | ".woff2": "file", 80 | }, 81 | minify: process.env.ELEVENTY_ENV === "production", 82 | sourcemap: process.env.ELEVENTY_ENV !== "production", 83 | target: ["chrome58", "firefox57", "safari11", "edge18"], 84 | plugins: [ 85 | sassPlugin({ 86 | loadPaths: [ 87 | "./node_modules/@uswds", 88 | "./node_modules/@uswds/uswds/packages", 89 | ], 90 | }), 91 | ], 92 | bundle: true, 93 | }) 94 | .then(() => createAssetPaths()) 95 | .then(() => { 96 | console.log("Assets have been built!"); 97 | process.exit(); 98 | }) 99 | .catch((err) => { 100 | console.error(err); 101 | process.exit(1); 102 | }); 103 | -------------------------------------------------------------------------------- /_data/site.yaml: -------------------------------------------------------------------------------- 1 | title: Agency Name 2 | email: contact@example.gov 3 | description: >- # this means to ignore newlines 4 | Agency Name (EAC) Lorem ipsum dolor sit amet, consectetur adipiscing elit. 5 | Aenean et sapien a leo auctor scelerisque quis nec magna. Sed dictum ante a risus vehicula facilisis. 6 | 7 | # Twitter handle. Only the handle, not the URL. 8 | # twitter: agency_name 9 | 10 | # Used to construct absolute URLs throughout the site 11 | url: "https://agency-production-url.gov" 12 | 13 | ################################################################# 14 | # 15 | # Digital Analytics Program (DAP) configuration 16 | # 17 | # USAID - Agency for International Development 18 | # USDA - Department of Agriculture 19 | # DOC - Department of Commerce 20 | # DOD - Department of Defense 21 | # ED - Department of Education 22 | # DOE - Department of Energy 23 | # HHS - Department of Health and Human Services 24 | # DHS - Department of Homeland Security 25 | # HUD - Department of Housing and Urban Development 26 | # DOJ - Department of Justice 27 | # DOL - Department of Labor 28 | # DOS - Department of State 29 | # DOI - Department of the Interior 30 | # TREAS - Department of the Treasury 31 | # DOT - Department of Transportation 32 | # VA - Department of Veterans Affairs 33 | # EPA - Environmental Protection Agency 34 | # EOP - Executive Office of the President 35 | # GSA - General Services Administration 36 | # NASA - National Aeronautics and Space Administration 37 | # NARA - National Archives and Records Administration 38 | # NSF - National Science Foundation 39 | # NRC - Nuclear Regulatory Commission 40 | # OPM - Office of Personnel Management 41 | # USPS - Postal Service 42 | # SBA - Small Business Administration 43 | # SSA - Social Security Administration 44 | # 45 | ################################################################# 46 | dap: 47 | # agency: your-agency 48 | 49 | # Optional 50 | # subagency: your-subagency 51 | 52 | # Configuration for Google Analytics 53 | ga: 54 | # ua: your-ua 55 | 56 | # Site Navigation 57 | primary_navigation: 58 | - name: Home 59 | url: / 60 | - name: Blog 61 | url: /blog/ 62 | - name: Document 63 | url: /document/ 64 | - name: Document with sidenav 65 | url: /document-with-sidenav/ 66 | - name: Document submenu 67 | children: 68 | - name: Navigation link 69 | url: "#main-content" 70 | - name: Navigation link 71 | url: "#main-content" 72 | - name: Navigation link 73 | url: "#main-content" 74 | - name: Departments 75 | children: 76 | use_collection: "staffByDept" 77 | 78 | 79 | secondary_navigation: 80 | - name: Staff Directory 81 | url: "/staff-directory/" 82 | - name: Another secondary link 83 | url: "#main-content" 84 | 85 | footer_navigation: 86 | - name: Accessibility statement 87 | url: "/policies/#accessibility-statement" 88 | - name: Freedom of Information Act (FOIA) 89 | url: "/policies/#freedom-of-information-act-foia" 90 | - name: Equal employment 91 | url: "/policies/#equal-employment" 92 | - name: External links 93 | url: "/policies/#external-links" 94 | - name: Privacy policy 95 | url: "/policies/#privacy-policy" 96 | - name: Vulnerability disclosure policy 97 | url: "/policies/#vulnerability-disclosure-policy" 98 | - name: Budget and performance reports 99 | url: "/reports/" 100 | - name: Have a question about government services? Contact USA.gov. 101 | url: https://usa.gov/ 102 | 103 | # Search.gov configuration 104 | # 105 | # 1. Create an account with Search.gov https://search.usa.gov/signup 106 | # 2. Add a new site. 107 | # 3. Add your site/affiliate name here. 108 | searchgov: 109 | 110 | # Only change this if you're using a CNAME. Learn more here: https://search.gov/manual/cname.html 111 | endpoint: https://search.usa.gov 112 | 113 | # Replace this with your search.gov account. 114 | affiliate: federalist-uswds-example 115 | 116 | # Replace this with your access key. 117 | access_key: xX1gtb2RcnLbIYkHAcB6IaTRr4ZfN-p16ofcyUebeko= 118 | 119 | # This renders the results within the page instead of sending to user to search.gov. 120 | inline: true 121 | 122 | # This allows Search.gov to present relevant type-ahead search suggestions in your website's search box. 123 | # If you do not want to present search suggestions, set this value to false. 124 | suggestions: true 125 | 126 | ########################################################################################## 127 | # The values below here are more advanced and should only be 128 | # changed if you know what they do 129 | ########################################################################################## 130 | -------------------------------------------------------------------------------- /_data/staff.csv: -------------------------------------------------------------------------------- 1 | last_name,first_name,id,job_title,department,email,phone,location 2 | "Chen","Michael","i9j0k1l2","Chief Technology Officer","Information Technology","michael.chen@agency.gov","202-555-3456 x7890","Tech Center - 4th Floor" 3 | "Garcia","Robert","y5z6a7b8","HR Director","Human Resources","robert.garcia@agency.gov","202-555-7890 x2345","HR Complex - 2nd Floor" 4 | "Johnson","Sarah","m3n4o5p6","Lead Counsel","Legal Services","sarah.johnson@agency.gov","202-555-4567 x8901","Legal Building - 1st Floor" 5 | "Kim","Lisa","u1v2w3x4","Communications Manager","Communications","lisa.kim@agency.gov","202-555-6789 x0123","Media Center - Ground Floor" 6 | "Lee","Amanda","c9d0e1f2","Senior HR Specialist","Human Resources","amanda.lee@agency.gov","202-555-8901 x3456","HR Complex - 2nd Floor" 7 | "Rodriguez","Emily","e5f6g7h8","Senior Policy Analyst","Policy","emily.rodriguez@agency.gov","202-555-2345 x6789","West Wing - 2nd Floor" 8 | "Smith","John","a1b2c3d4","Director of Operations","Administration","john.smith@agency.gov","202-555-1234 x5678","Main HQ - 3rd Floor" 9 | "Williams","David","q7r8s9t0","Budget Director","Budget and Planning","david.williams@agency.gov","202-555-5678 x9012","Finance Wing - 5th Floor" 10 | "Aaronson","Rachel","z1y2x3w4","Senior Compliance Officer","Legal Services","rachel.aaronson@agency.gov","202-555-9012 x4567","Legal Building - 3rd Floor" 11 | "Adams","Marcus","b5c6d7e8","IT Security Specialist","Information Technology","marcus.adams@agency.gov","202-555-1123 x5678","Tech Center - 2nd Floor" 12 | "Alvarez","Sofia","f9g0h1j2","Budget Analyst","Budget and Planning","sofia.alvarez@agency.gov","202-555-2234 x6789","Finance Wing - 4th Floor" 13 | "Baker","Christopher","k3l4m5n6","Communications Coordinator","Communications","christopher.baker@agency.gov","202-555-3345 x7890","Media Center - 1st Floor" 14 | "Benson","Karen","p7q8r9s0","Human Resources Manager","Human Resources","karen.benson@agency.gov","202-555-4456 x8901","HR Complex - 3rd Floor" 15 | "Brown","James","t1u2v3w4","Policy Research Lead","Policy","james.brown@agency.gov","202-555-5567 x9012","West Wing - 4th Floor" 16 | "Carter","Elena","x5y6z7a8","Senior Procurement Specialist","Administration","elena.carter@agency.gov","202-555-6678 x0123","Main HQ - 2nd Floor" 17 | "Chen","Olivia","b9c0d1e2","Data Analytics Manager","Information Technology","olivia.chen@agency.gov","202-555-7789 x1234","Tech Center - 5th Floor" 18 | "Davis","Jamal","f3g4h5j6","Communications Director","Communications","jamal.davis@agency.gov","202-555-8890 x2345","Media Center - Ground Floor" 19 | "Edwards","Maria","k7l8m9n0","Senior Legal Counsel","Legal Services","maria.edwards@agency.gov","202-555-9901 x3456","Legal Building - 2nd Floor" 20 | "Foster","Daniel","p1q2r3s4","Budget Director Deputy","Budget and Planning","daniel.foster@agency.gov","202-555-0012 x4567","Finance Wing - 3rd Floor" 21 | "Garcia","Isabella","t5u6v7w8","HR Training Specialist","Human Resources","isabella.garcia@agency.gov","202-555-1123 x5678","HR Complex - 1st Floor" 22 | "Green","Ryan","x9y0z1a2","Policy Implementation Analyst","Policy","ryan.green@agency.gov","202-555-2234 x6789","West Wing - 3rd Floor" 23 | "Harris","Aisha","b3c4d5e6","IT Infrastructure Manager","Information Technology","aisha.harris@agency.gov","202-555-3345 x7890","Tech Center - 1st Floor" 24 | "Jackson","Nathan","f7g8h9j0","Senior Administrative Officer","Administration","nathan.jackson@agency.gov","202-555-4456 x8901","Main HQ - 4th Floor" 25 | "Kim","David","k1l2m3n4","Communications Strategy Lead","Communications","david.kim@agency.gov","202-555-5567 x9012","Media Center - 2nd Floor" 26 | "Lee","Jessica","p5q6r7s8","Legal Policy Advisor","Legal Services","jessica.lee@agency.gov","202-555-6678 x0123","Legal Building - 4th Floor" 27 | "Martinez","Carlos","t9u0v1w2","Budget Compliance Specialist","Budget and Planning","carlos.martinez@agency.gov","202-555-7789 x1234","Finance Wing - 2nd Floor" 28 | "Nguyen","Trang","x3y4z5a6","HR Diversity Coordinator","Human Resources","trang.nguyen@agency.gov","202-555-8890 x2345","HR Complex - 4th Floor" 29 | "Patel","Raj","b7c8d9e0","IT Systems Architect","Information Technology","raj.patel@agency.gov","202-555-9901 x3456","Tech Center - 3rd Floor" 30 | "Rodriguez","Elena","f1g2h3j4","Senior Policy Strategist","Policy","elena.rodriguez@agency.gov","202-555-0012 x4567","West Wing - 1st Floor" 31 | "Sanchez","Miguel","k5l6m7n8","Administrative Operations Manager","Administration","miguel.sanchez@agency.gov","202-555-1123 x5678","Main HQ - 1st Floor" 32 | "Singh","Priya","p9q0r1s2","Legal Research Analyst","Legal Services","priya.singh@agency.gov","202-555-2234 x6789","Legal Building - 1st Floor" 33 | "Taylor","Christopher","t3u4v5w6","Budget Planning Coordinator","Budget and Planning","christopher.taylor@agency.gov","202-555-3345 x7890","Finance Wing - 1st Floor" 34 | "Torres","Angela","x7y8z9a0","Communications Media Specialist","Communications","angela.torres@agency.gov","202-555-4456 x8901","Media Center - 3rd Floor" 35 | "Walker","Marcus","b1c2d3e4","IT Security Analyst","Information Technology","marcus.walker@agency.gov","202-555-5567 x9012","Tech Center - 4th Floor" 36 | "Washington","Terri","f5g6h7j8","HR Recruitment Specialist","Human Resources","terri.washington@agency.gov","202-555-6678 x0123","HR Complex - 2nd Floor" 37 | "Williams","Nicole","k9l0m1n2","Policy Research Analyst","Policy","nicole.williams@agency.gov","202-555-7789 x1234","West Wing - 5th Floor" 38 | "Wilson","Eric","p3q4r5s6","Senior Administrative Coordinator","Administration","eric.wilson@agency.gov","202-555-8890 x2345","Main HQ - 5th Floor" 39 | "Xu","Jennifer","t7u8v9w0","Legal Compliance Manager","Legal Services","jennifer.xu@agency.gov","202-555-9901 x3456","Legal Building - 5th Floor" 40 | "Zhang","Alex","x1y2z3a4","IT Project Manager","Information Technology","alex.zhang@agency.gov","202-555-0012 x4567","Tech Center - Ground Floor" 41 | -------------------------------------------------------------------------------- /_includes/pagination-links.html: -------------------------------------------------------------------------------- 1 | {% for p in pagination.pages %} 2 | {% if page.url == pagination.hrefs[ forloop.index0 ] %} 3 | {% assign current_page_number = forloop.index %} 4 | {% endif %} 5 | {% endfor %} 6 | 7 | 8 | {% assign total_pages = pagination.pages | size %} 9 | {% assign first_page_diff = current_page_number | minus: 1 %} 10 | {% assign last_page_diff = total_pages | minus: current_page_number %} 11 | 12 | {% if total_pages > 1 %} 13 | 160 | {% endif %} 161 | -------------------------------------------------------------------------------- /.eleventy.js: -------------------------------------------------------------------------------- 1 | const { DateTime } = require("luxon"); 2 | const fs = require("fs"); 3 | const path = require("path"); 4 | const pluginRss = require("@11ty/eleventy-plugin-rss"); 5 | const pluginNavigation = require("@11ty/eleventy-navigation"); 6 | const markdownIt = require("markdown-it"); 7 | const { parse } = require("csv-parse/sync"); 8 | const markdownItNamedHeadings = require("markdown-it-named-headings"); 9 | const yaml = require("js-yaml"); 10 | const svgSprite = require("eleventy-plugin-svg-sprite"); 11 | const { imageShortcode, imageWithClassShortcode } = require("./config"); 12 | const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); 13 | 14 | module.exports = function (config) { 15 | // Set pathPrefix for site 16 | let pathPrefix = "/"; 17 | 18 | // Copy the `admin` folders to the output 19 | config.addPassthroughCopy("admin"); 20 | 21 | // Add plugins 22 | config.addPlugin(pluginRss); 23 | config.addPlugin(pluginNavigation); 24 | config.addPlugin(EleventyHtmlBasePlugin); 25 | 26 | //// SVG Sprite Plugin for USWDS USWDS icons 27 | config.addPlugin(svgSprite, { 28 | path: "./node_modules/@uswds/uswds/dist/img/uswds-icons", 29 | svgSpriteShortcode: "uswds_icons_sprite", 30 | svgShortcode: "uswds_icons" 31 | }); 32 | 33 | //// SVG Sprite Plugin for USWDS USA icons 34 | config.addPlugin(svgSprite, { 35 | path: "./node_modules/@uswds/uswds/dist/img/usa-icons", 36 | svgSpriteShortcode: "usa_icons_sprite", 37 | svgShortcode: "usa_icons" 38 | }); 39 | 40 | // Allow yaml and CSV to be used in the _data dir 41 | config.addDataExtension("yaml", contents => yaml.load(contents)); 42 | 43 | const csvConfig = { 44 | columns: true, 45 | skip_empty_lines: true, 46 | relax_column_count: true, 47 | trim: true, 48 | } 49 | 50 | config.addDataExtension("csv", (contents) => { 51 | const records = parse(contents, csvConfig); 52 | return records; 53 | }); 54 | 55 | config.addDataExtension("csv", (contents) => 56 | parse(contents, { 57 | columns: true, 58 | skip_empty_lines: true, 59 | relax_column_count: true, 60 | trim: true, 61 | }) 62 | ); 63 | 64 | config.addCollection("staffByDept", (collection) => { 65 | const staff = collection.getAll()[0].data.staff; 66 | const grouped = {}; 67 | 68 | for (const member of staff) { 69 | if (!member.department) continue; 70 | if (!grouped[member.department]) grouped[member.department] = []; 71 | grouped[member.department].push(member); 72 | } 73 | 74 | // Sort staff within each department by last name 75 | for (const dept in grouped) { 76 | grouped[dept].sort((a, b) => a.last_name.localeCompare(b.last_name)); 77 | } 78 | return Object.entries(grouped).map(([name, staff]) => ({ name, staff })); 79 | }); 80 | 81 | config.addFilter("readableDate", (dateObj) => { 82 | return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat( 83 | "dd LLL yyyy" 84 | ); 85 | }); 86 | 87 | // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string 88 | config.addFilter("htmlDateString", (dateObj) => { 89 | return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat("yyyy-LL-dd"); 90 | }); 91 | 92 | // Get the first `n` elements of a collection. 93 | config.addFilter("head", (array, n) => { 94 | if (!Array.isArray(array) || array.length === 0) { 95 | return []; 96 | } 97 | if (n < 0) { 98 | return array.slice(n); 99 | } 100 | 101 | return array.slice(0, n); 102 | }); 103 | 104 | // Return the smallest number argument 105 | config.addFilter("min", (...numbers) => { 106 | return Math.min.apply(null, numbers); 107 | }); 108 | 109 | function filterTagList(tags) { 110 | return (tags || []).filter( 111 | (tag) => ["all", "nav", "post", "posts"].indexOf(tag) === -1 112 | ); 113 | } 114 | 115 | config.addFilter("filterTagList", filterTagList); 116 | 117 | // Create an array of all tags 118 | config.addCollection("tagList", function (collection) { 119 | let tagSet = new Set(); 120 | collection.getAll().forEach((item) => { 121 | (item.data.tags || []).forEach((tag) => tagSet.add(tag)); 122 | }); 123 | 124 | return filterTagList([...tagSet]); 125 | }); 126 | 127 | // Customize Markdown library and settings: 128 | let markdownLibrary = markdownIt({ 129 | html: true, 130 | breaks: true, 131 | linkify: true, 132 | }).use(markdownItNamedHeadings) 133 | config.setLibrary("md", markdownLibrary); 134 | 135 | // Override Browsersync defaults (used only with --serve) 136 | config.setBrowserSyncConfig({ 137 | callbacks: { 138 | ready: function (err, browserSync) { 139 | const content_404 = fs.readFileSync("_site/404/index.html"); 140 | 141 | browserSync.addMiddleware("*", (req, res) => { 142 | // Provides the 404 content without redirect. 143 | res.writeHead(404, { "Content-Type": "text/html; charset=UTF-8" }); 144 | res.write(content_404); 145 | res.end(); 146 | }); 147 | }, 148 | }, 149 | ui: false, 150 | ghostMode: false, 151 | }); 152 | 153 | // Set image shortcodes 154 | config.addLiquidShortcode("image", imageShortcode); 155 | config.addLiquidShortcode("image_with_class", imageWithClassShortcode); 156 | config.addLiquidShortcode("uswds_icon", function (name) { 157 | return ` 158 | `; 161 | }); 162 | 163 | // If BASEURL env variable exists, update pathPrefix to the BASEURL 164 | if (process.env.BASEURL) { 165 | pathPrefix = process.env.BASEURL 166 | } 167 | 168 | return { 169 | // Control which files Eleventy will process 170 | // e.g.: *.md, *.njk, *.html, *.liquid 171 | templateFormats: ["md", "njk", "html", "liquid"], 172 | 173 | // Pre-process *.md files with: (default: `liquid`) 174 | // Other template engines are available 175 | // See https://www.11ty.dev/docs/languages/ for other engines. 176 | markdownTemplateEngine: "liquid", 177 | 178 | // Pre-process *.html files with: (default: `liquid`) 179 | // Other template engines are available 180 | // See https://www.11ty.dev/docs/languages/ for other engines. 181 | htmlTemplateEngine: "liquid", 182 | 183 | // ----------------------------------------------------------------- 184 | // If your site deploys to a subdirectory, change `pathPrefix`. 185 | // Don’t worry about leading and trailing slashes, we normalize these. 186 | 187 | // If you don’t have a subdirectory, use "" or "/" (they do the same thing) 188 | // This is only used for link URLs (it does not affect your file structure) 189 | // Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/ 190 | 191 | // You can also pass this in on the command line using `--pathprefix` 192 | 193 | // Optional (default is shown) 194 | pathPrefix: pathPrefix, 195 | // ----------------------------------------------------------------- 196 | 197 | // These are all optional (defaults are shown): 198 | dir: { 199 | input: ".", 200 | includes: "_includes", 201 | data: "_data", 202 | output: "_site", 203 | }, 204 | }; 205 | }; 206 | -------------------------------------------------------------------------------- /blog/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/wide 3 | title: Blog 4 | pagination: 5 | data: collections.posts 6 | size: 8 7 | alias: posts 8 | reverse: true 9 | --- 10 | 11 |
    12 |
    13 |

    Blog

    14 | This is a description of the page. 17 |
    18 |
    19 |
    20 |
    21 |
    22 | 23 | {%- for post in posts %} 24 | {% include "collection-item.html" post: post %} 25 | {% endfor %} 26 | {% include "pagination-links.html" %} 27 |
    28 |
    29 |
    32 |

    Most Recent Posts

    33 | 42 |
    43 |
    46 |

    Another list of links

    47 | 74 |
    75 |
    78 |

    Social links

    79 | 144 |
    145 |
    146 |
    147 |
    148 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 11ty-uswds-template 2 | 3 | ## Why this project 4 | 5 | This is an [11ty](https://www.11ty.dev/) static site generator (SSG) template using [U.S. Web Design System v 3.0 (USWDS)](https://designsystem.digital.gov/) and is focused on providing developers a starter template and reference implementation for Federalist/Cloud.gov Pages websites. 6 | 7 | This project strives to be compliant with requirements set by [21st Century IDEA Act](https://www.meritalk.com/articles/senate-passes-idea-act/). The standards require that a website or digital service: 8 | 9 | - is accessible to individuals with disabilities; 10 | - has a consistent appearance; 11 | - does not duplicate any legacy websites (the legislation also requires agencies to ensure that legacy websites are regularly reviewed, removed, and consolidated); 12 | - has a search function; 13 | - uses an industry standard secure connection; 14 | - “is designed around user needs with data-driven analysis influencing management and development decisions, using qualitative and quantitative data to determine user goals, needs, and behaviors, and continually test the website, web-based form, web-based application, or digital service to ensure that user needs are addressed;” 15 | - allows for user customization; and 16 | - is mobile-friendly. 17 | 18 | ## Key Functionality 19 | This repository contains the following examples and functionality: 20 | 21 | ✅ Publish blog posts, press releases, announcements, etc. To modify this code, check out `blog/index.html`, which manages how the posts are listed. You should then check out `_includes/layouts/post.html` to see how individual posts are structured. 22 | 23 | ✅ Publish single one-off pages. Instead of creating lots of folders throughout the root directory, you should put single pages in `pages` folder and change the `permalink` at the top of each page. Use sub-folders only when you really need to. 24 | 25 | ✅ There are two different kinds of `pages`, one does not have a side bar navigation, and the other uses `_includes/sidenav.html`. You can enable this option by adding `sidenav: true` to your page front matter. 26 | 27 | ``` 28 | --- 29 | title: Document with Sidenav 30 | layout: layout/page 31 | sidenav: true 32 | permalink: /document-with-sidenav 33 | --- 34 | ``` 35 | 36 | ✅ [Search.gov](https://search.gov) integration - Once you have registered and configured Search.gov for your site by following [these instructions](https://federalist.18f.gov/documentation/search/), add your "affiliate" and "access key" to `_data/site.yml`. Ex. 37 | 38 | ``` 39 | searchgov: 40 | 41 | # You should not change this. 42 | endpoint: https://search.usa.gov 43 | 44 | # replace this with your search.gov account 45 | affiliate: federalist-uswds-example 46 | 47 | # replace with your access key 48 | access_key: xX1gtb2RcnLbIYkHAcB6IaTRr4ZfN-p16ofcyUebeko= 49 | 50 | # this renders the results within the page instead of sending to user to search.gov 51 | inline: true 52 | ``` 53 | 54 | The logic for using Search.gov can be found in `_includes/searchgov/form.html` and supports displaying the results inline or sending the user to Search.gov the view the results. This setting defaults to "inline" but can be changed by setting 55 | ``` 56 | searchgov: 57 | inline: false 58 | ``` 59 | in `_data/site.yml`. 60 | 61 | ✅ [Digital Analytics Program (DAP)](https://digital.gov/services/dap/) integration - Once you have registered your site with DAP add your "agency" and optionally, `subagency` to `_data/site.yml` and uncomment the appropriate lines. Ex. 62 | 63 | ``` 64 | dap: 65 | # agency: your-agency 66 | 67 | # Optional 68 | # subagency: your-subagency 69 | ``` 70 | 71 | ✅ [Google Analytics](https://analytics.google.com/analytics/web/) integration - If you have a Google Analytics account to use, add your "ua" to `_data/site.yml` and uncomment the appropriate lines. Ex. 72 | 73 | ``` 74 | ga: 75 | # ua: your-ua 76 | ``` 77 | 78 | ## Getting Started 79 | 80 | ### Installing Dependencies 81 | 82 | `npm install` 83 | 84 | TODO 85 | 86 | ### Running a Dev Instance 87 | 88 | `npm run dev` 89 | 90 | TODO 91 | 92 | ## Netlify CMS 93 | 94 | 95 | 96 | ### Config 97 | 98 | The Netlify CMS can be configured in [`/admin/config.yml`](./admin/config.yml) and you will update the 99 | `repo` key to be your Github organization and repository name. 100 | 101 | ```yml 102 | backend: 103 | name: github 104 | repo: / 105 | base_url: https://federalistapp.18f.gov 106 | auth_endpoint: external/auth/github 107 | preview_context: federalist/build 108 | branch: master 109 | use_graphql: true 110 | ``` 111 | 112 | ### Running Locally 113 | 114 | You can run the Netlify CMS locally to more easily customize and troubleshoot the CMS to you content. 115 | We provide comments in the [`/admin/config.yml`](./admin/config.yml) instructing you how to change the `backend` values from your production site to the local development. 116 | 117 | > *Note: Make sure to not commit and push the config with the `backend` set for local develop to Github or 118 | else you will break your production site's Netlify CMS. 119 | 120 | ```yml 121 | # Local development backend 122 | backend: 123 | name: git-gateway 124 | local_backend: true 125 | ``` 126 | 127 | Once you [`/admin/config.yml`](./admin/config.yml) is set to local development, you run `npm run dev:cms` to 128 | serve as a development authentication server. 129 | 130 | ## How To 131 | 132 | ### Adding Collections 133 | 134 | TODO 135 | 136 | ### Adding Static Data 137 | 138 | TODO 139 | 140 | ### Creating links 141 | 142 | For preview links generated on the platform, we automatically set the `pathPrefix` in the [`.eleventy.js`](/.eleventy.js) file base on the `BASEURL` environment variable. We use the built-in 11ty filter for `url` to properly append the prefix path for the linked page. When adding new links, use the following syntax: 143 | 144 | ```liquid 145 | Link to My Dir 146 | ``` 147 | 148 | See the [11ty docs](https://www.11ty.dev/docs/filters/url/) 149 | 150 | ### Referencing Images 151 | 152 | All of your images will be stored in the `_img/` directory. To reference your images in your templates you can use the `shortcodes` built into the template. 153 | 154 | For referencing an image without a style class, you will pass the template shortcode the image's source path and the alternative image name in that order. ie: 155 | 156 | ``` 157 | {% image "_img/my-image.png" "My PNG Image Alternative Name" %} 158 | ``` 159 | 160 | For referencing an image with a style class, you will pass the template shortcode the image's source path, class names, and the alternative image name in that order. ie: 161 | 162 | ``` 163 | {% image_with_class "_img/my-image.png" "img-class another-class" "My PNG Image Alternative Name" %} 164 | ``` 165 | 166 | ### Referencing USWDS Sprite Icons 167 | 168 | USWDS has sprite icons available for use. Here is the [list of icons](https://designsystem.digital.gov/components/icon/) available when using the sprite shortcode `uswds_icon` in the template. The following example is how you can reference the icon in a template. 169 | 170 | ``` 171 | {% uswds_icon "" %} 172 | ``` 173 | 174 | ### Expanding SCSS Styles 175 | 176 | CSS and SASS can be added or imported into the `styles/styles.scss`. You can also use [USWDS Design Tokens](https://designsystem.digital.gov/design-tokens/) in the `styles/themes` files to update colors, fonts, and layout to fit your site's branding. This template uses [esbuild](https://esbuild.github.io/)and [autoprefixer](https://github.com/postcss/autoprefixer) to bundle your SASS/CSS and fingerprint the files in the site build. 177 | 178 | ### Adding custom Javascript 179 | 180 | Javascript can be added to the admin UI or site UI by adding or importing code into the `js/admin.js` or `js/app.js` files respectively. This template uses [esbuild](https://esbuild.github.io/) to bundle your javascript and fingerprint the files in the site build. 181 | 182 | ### Customizing 11ty 183 | 184 | TODO 185 | 186 | ## Contributing 187 | 188 | See [CONTRIBUTING](CONTRIBUTING.md) for additional information. 189 | 190 | ## Public domain 191 | 192 | This project is in the worldwide [public domain](LICENSE.md). As stated in [CONTRIBUTING](CONTRIBUTING.md): 193 | 194 | > This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/). 195 | > 196 | > All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest. 197 | --------------------------------------------------------------------------------