Pages Uswds Gatsby
A template for Federalist that uses Gatsby and USWDS 2.0
Overview:
This site is developed using the U.S. Web Design System v2.0 and focuses on providing developers a starter kit and reference implementation for cloud.gov Pages websites. The project aims to comply with the requirements set by the 21st Century IDEA Act, including accessibility, consistent appearance, no duplication of legacy websites, search function, secure connection, user-centric design, user customization, and mobile-friendliness. The site uses the Gatsby framework and is built with Javascript and React.
Features:
- USWDS v2 integration: Includes USWDS v2 javascript, styles, images, and fonts by default, with the ability to customize styles using SASS or CSS in src/styles/index.scss.
- Publish blog posts using Markdown: Any markdown files in the src/blog-posts directory can be turned into pages at /blog/ in the application. An index of all posts will be displayed at /blog.
- Publish documentation pages using Markdown: Any markdown files in the src/documentation-pages directory can be turned into pages at / in the application. Side navigation for documentation pages can be controlled through the use of the "sidenav" property in the front matter of the file.
- Publish custom pages using React: Allows for the creation of custom pages using JavaScript files in the src/pages directory. These pages will be accessible at /.html.
- Customizable SEO information: SEO information for each page can be customized by adding the src/components/seo.js component and providing desired information.
- Search.gov integration: Supports integration with Search.gov by adding the "affiliate" and "access key" to gatsby-config.js. The search functionality is implemented in the src/components/search-form.js component.
- Digital Analytics Program (DAP) integration: Supports integration with DAP by adding the "agency" and optionally, subagency, to gatsby-config.js and uncommenting the appropriate lines.
- Google Analytics integration: Allows for the integration of Google Analytics, although specific implementation details are not provided in the content.
Summary:
This project is a theme for developing cloud.gov Pages websites, using the U.S. Web Design System v2.0 and Gatsby framework. It aims to comply with the requirements set by the 21st Century IDEA Act and provides various features such as USWDS integration, publishing blog and documentation pages using Markdown, creating custom pages using React, customizable SEO information, Search.gov integration, and DAP integration. The theme also allows for the integration of Google Analytics for analytics tracking purposes.
- Gatsby
GatsbyJS is a free and open-source static site generator based on React. It uses a modern development stack including Webpack, GraphQL, and modern JavaScript and CSS frameworks. It also provides a rich set of plugins, starters, and themes.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.