gsa / cto-website

Tech at GSA website

Tech at GSA website

This is the website for the GSA Office of the Chief Technology Officer.

Architecture

This is a Hugo-based website designed to be published on the cloud.gov Pages platform.

The website utilizes the US Web Design System.

Setup

Install Prerequisites

Ensure you have the following installed on your local machine:

• Hugo
• Node.js

Building and previewing the website

First, install the project's dependencies:

npm install

Then you can run the site locally with live reloading and local CMS:

npm start

You should now be able to preview the site on your local machine at http://localhost:1313/. The CMS is at http://localhost:1313/admin/.

Development

Assets

This project uses Hugo Pipes to manage most static asset files. It also uses uswds-compile to manage USWDS-specific assets, as well as the site's stylesheet.

To override USWDS settings, edit assets/sass/uswds-settings.scss. We generally prefer to customize these settings rather then create new CSS style declarations when possible.

To edit site styles, use assets/sass/styles.scss.

After changing the styles, recompile them with npx gulp compile. Or you can automatically compile edited Sass files during development by running: npx gulp watch or just npx gulp.

Note that when updating USWDS to a newer version, it may be necessary to manually merge the newer files with the customizations to ensure that USWDS is importing the site's custom styles file.

License

As a work of the United States Government, this project is in the public domain within the United States.

cto-website's Issues

Add email address

Need a team email address (or a contact form?) for the "Email us" link.

Graphic elements for Vision page

Add graphics to the Vision page. Each of the five pillars should be associated with an icon/illustration that represents its theme. Could be a simple icon, or could be more elaborate illustrations. The look of each graphic should be consistent with graphics throughout the site.

Consider search - look at Digital Gov for search support

Consider incorporating search on site via Digital Gov - http://search.digitalgov.gov

Create 'About Us' page

Need an 'About Us' page. Link in the footer. Move the current front page content (Mission, Responsibilities, Goals) to this new page.

Update navigation to USWDS standards

• incorporate USWDS navigation - similar to template on the Federalist site
• update links to match site content

Change Email Us link to point to the Contact form

When the form is done.

Site is hosted over https but resources are being requested over http

Hi, I just visited the site and noticed that stylesheets and scripts were not loading. The site is hosted over https but the resources are being requested via http. I believe the cause of this is the url property in your _config.yml is using http.

Guide - Open Databases

From @nvembar, see Edward's document regarding transitioning to open source databases.

Guide - Onboarding

New CTO employees need to know some things in addition to what they learned during orientation:

• Requesting access to systems
• Travel
• HR paperwork
• IT equipment requests
• Other items?

Develop front page content

Need content for the front page: http://cto.gsa.gov/

• consider additional content for the home page - look at 18F

Create a form for all feedback from the site

Create a form that would be used across the site. Use Data.gov form template.

Create knowledge base - Guides

8/16 - use this for reference. Moving to UK model, framework, and stories in the Kanban by topic area.

---

Consider area for docs/playbooks for content

• consider layout ideas - maybe take the USDS playbook, see what 18F has for manuals
• start with Agile docs/content - "documents, language, roles & resp; agile roles, contract language, how do you know you are doing Agile well, structure that would work with the content"
• Expand knowledge repository using 18f pages template for Team (admin, onboarding, hiring) and Knowledge (tools, agile, best practices) spaces.
  Consider extensions off the url CTO/team.

Add "official website" statement

Add USWDS "An official website of the United States Government" statement above the nav bar.

USWDS usa-disclaimer bar should initially have transparent background on front page

Recent content changes on the front page revealed that the usa-disclaimer bar has the wrong background color when fully scrolled to the top of the front page. It should be transparent like the rest of the nav bar, not black.

Modify Vision page to incorporate new Guide structure

@aliciacyrus is making the content now and should have before Thursday meeting with Navin. Just in case, this issue will keep it on the radar.

Home page content should reflect CTO Vision

Focus on the elements of the Vision for home page content. Keep it simple. Emphasis is on how to execute on the elements of the vision, how to move toward the ideas (small bets, etc) and that we want to hear from the user.

Guide framework/structure

Restructure the Guides section so that guides are divided into categories. Those categories can be based on role. Example: https://www.gov.uk/service-manual

Update to USWDS Version 0.9.6

Improve whitespace on Team page

Team member listing needs to look better. More whitespace between each member, and also work on improving the appearance of the titles/group names.

Add more instructions to _team/_TEMPLATE.md

Can more instructions be added to the file to let people know how/where to write out their full bio and attach docs (pdf version, resumes, design work, projects, etc.)?

Link front page CTO Vision elements directly to descriptions on CTO Vision page

Add team information

Set up a Jekyll data file with team member info, pull that into the team page

Add service model guidance

Along with the template, we should have a description of how best to use the service model template and how we intend to put it within a larger taxonomy of services provided by the GSA.

Enhance graphic elements

Identify which information or design elements would be enhanced by having accompanying graphics (pictures, diagrams, icons, etc). There are some parts of the site that are text-heavy and may benefit from graphics.

This issue will be used to line up some work for graphic design.

Checklist:

• CTO Vision icons: Each of the five vision elements has its own icon (currently from Font Awesome). We would like icons that better match each vision element. These icons would be reused wherever we have the vision elements, such as on the front page.
• Front page hero image: This is currently a photo of the White House and some sky, but it would be nice if it were more relevant to GSA. It can be a photo or an illustration.
• Project Stages: Diagram illustrating the process of moving from Discovery to Alpha to Beta to Live (might be the same as Work With Us diagram, above). Also, an icon to represent each stage (Discovery/Alpha/Beta/Live).
• Work With Us page: Diagram illustrating the process of moving from pilot to prototype to scaled finished product (might be the same as Project Stages, below).
• About Us page: Visual elements for each of the sections that correspond with the items listed in Mission, Responsibilities, and Goals.

All of the illustrations or photos provided must have no copyright or usage restrictions.

Clean up footer link capitalization

Capitalize only the first word in footer links (unless it's a proper noun, of course).

Examples:
"The Team" should be changed to "The team"
"CTO Vision" should be changed to "CTO vision"

Add DAP analytics

Add DAP code. http://www.digitalgov.gov/services/dap/

Set up project wiki

• Dev environment info
• Git practices
• Issue prioritization and labeling
• Milestones and sprints

Vision page needs a way for users to contact us

There is a "Contact Us" link in the footer on each page; this may suffice. But we can also look at ways visitors may want to contact us while they are on the Vision page.

Consider using Waffle to track sprints

@jfredrickson5, @saracope and I are using Waffle to track work through sprints. This feeds off of issues but allows for movement of work through Kanban as opposed to labels.

Guide - Agile

Create Agile guide as one of the knowledge bases.

• What does it mean to be Agile?
• Starting an Agile project

Create the five pillars of the CTO vision

Fill in the remaining text that speak to the five pillars

• Consider including the presentation in an HTML format
• Determine best layout and CSS
• Consider changing title link to "Vision"

Guide template

Create a Guides template (maybe like the Team Profile template).

Redesign the footer

• Footer links should go adjacent to the GSA DS logo.
• consider making GSA DS logo smaller
• consider taking the GSA DS wording out of the logo or the "built by GSA DS"

Obtain an ATO

Investigate ATO requirements and start the process to obtain an ATO.

Define project stages

For the projects page, we will have projects listed. Each project will be in a stage. We need a page that defines what each stage means.

Template 'page' should be set as default layout

Tweaks to language on home page - Vision to Guides, others?

Have an easy way for users to find Guides. Place a link in the Footer.

Make home page vision elements more clickable

The five vision element links on the home page need to be more obvious as links in order to invite visitors to click on them. Possibly add a "Read more..." type link after the paragraphs.

Remove master branch, set gh-pages as default

The repo appears at first glance as if there's nothing in it.

Move to federalist.18f.gov account

• Research best option - Sara has some ideas too
• Setup 18F Pages (Federalist) account - https://federalist.18f.gov - if option is chosen (concurrently working Cloud.gov account)

Add first/last name metadata to Team collection

We should be able to sort team members by last name, so we need a bit more metadata in the team member files to accomplish that.

Improve H5/H6 accessibility

There is a concern for H5/H6 headings defined in main.scss not being compatible for accessibility. All other text should also be evaluated.

Add a README

Need some basic information on how to get the site up and running in dev.

Collapse PM guides category into Agile

Remove PM category for guides and combine it into the Agile category.

Add progress measure to Projects page

We need a progress indicator for each project listed on the Projects page. This will identify which stage each project is in.

Add project intake form

This will be posted or linked to on the Work with Us page. Related issue: #50.

Integrate SASS variables similar to USWDS

We need a way to integrate USWDS that meets the following requirements:

• Easy to update to the latest USWDS revision
• Ability to use USWDS SCSS variables in our custom SCSS

Complete Project page

This page serves as a project dashboard. It lists all our projects. For each project, we should have a brief description, a link to the app if applicable, a link to the GitHub repo, and the status of the project according to our formal project stages (if any).

Can be static Markdown/HTML page for now but ideally will pull data from a project API server in the future.

Complete Work With Us page

This page should contain an introduction to the specific services CTO offers. The page should contain a project intake form (or have a prominent link to a project intake form). The goal of this page is to let our potential customers sign up to do projects with us.

Guide - API Strategy

Have a guide discussing GSA's API stance:

• provide content about the strategy and link
• link out to API framwork
• discuss RESTful API design