xdgov / xd.gov Goto Github PK

We should have the ability to reference environment variables, such as Airtable API keys, locally as well as in Github Actions without needing to add/remove the keys during development.

Currently the xd.gov codebase has the USWDS assets tracked in Github. This is fine for things like the custom stylings, but we shouldn't be tracking the minified JS, for example, as this makes updates harder to perform and these files are then treated as files we own and modify by Dependabot and other code-scanning services.

We should migrate the USWDS module to a current version of the Node.js module. We previously did this for the Bias Toolkit Frontend: XDgov/bias-toolkit-frontend#12.

• Change "Subscribe" to "Newsletter" or "Mailing List" in top nav
• Change "Our Mission" to "About" in top nav
• Change "We’re Hiring" to "Apply for the Emerging Technology Fellowship Program" on homepage
• Make Fellows image clickable and go to ETF page
• On Mission page, change "Current Focus Areas" to "Portfolios"

We need to add the following text to the deadline descriptions of the /apply page post: "Submissions will be accepted until 11:59PM Eastern Time on November 30th".

Add favicon.ico file for display in various places, like the browser tab.

Tracking issue for:

• https://github.com/XDgov/xd.gov/security/code-scanning/1

We should explore utilizing Lighthouse as part of a Github Action to run on pull-requests. This could help us audit links on the site, flag potential page bloat, etc.

https://github.com/marketplace/actions/lighthouse-ci-action

Just visited www.xd.gov and noticed there isn't any information about how to get in touch with the team… at least on the homepage.

Summary

Setup our build via GitHub actions workflow to automatically import Airbase updates and create content files with new news and other entries

Process:

• Create Github workout starter with Ruby from here:

  • https://github.com/XDgov/xd.gov/actions/new
  • Doc: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-ruby#specifying-the-ruby-version

• Github actions workflow (yaml file):

  • check out repo
  • uses ruby @ specific version (or test multiple)
  • run bundle install
  • install npm
  • install airtable npm module
  • run custom node script file
  • require airtable module
  • make airtable request using token (stored as secret in our github repo)
  • create object of latest news/team bios
  • check "cache" list matching entry id's.
  • use node file system api to write new .md files for news entries.

• Make pull request if new files are created.

@lukad03 Just discovered that the following URLs work:

• http://www.xd.gov/
• https://www.xd.gov/
• https://xdgov.github.io/xd.gov/

but the following don't:

• http://xd.gov/
• https://xd.gov/

Just in case y'all weren't aware!

Links should avoid text like "Learn more" or "click here", as it insufficiently describes the target link contents.
This was flagged after running a Lighthouse page report.

See more information here:
https://developer.chrome.com/docs/lighthouse/seo/link-text/?utm_source=lighthouse&utm_medium=devtools

A workaround for this that preserves the exact same visual copy, is as follows:

.visually-hidden {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

<p>Washington has announced plans to stimulate economic growth.
  <a href="/washington-growth/"><span class="visually-hidden">Washington stimulates
   economic growth </span>Full Story</a>
</p>

I went to xd.gov and saw this:

Though should be like this:

It seems the green box resizes and shifts itself to cover the Learn More link when the window starts to be less than 1230px wide, then covering it at about 1070px wide. At about 990px wide, the layout shifts responsively to move the green box down and no longer hides the link. As the window shrinks its width more again, the green box resizes and shifts, eventually covering the text again about 670px wide and fully covering it at 625px. Smaller than that and the green bar just disappears. I replicated this in Firefox v114 and Chromium v109.

(I'm guessing it's a CSS @media size type issue that needs to have some values tweaked, but I haven't looked too thoroughly at it yet.)

Apply button could be considered misleading. Consider deemphasizing the Apply link during closed Application periods (instead listing it as a standard link in the nav).

Per HRD, language should read as follows:

NOTE: You will not be considered if you fail to provide the required application documents.

• Multiple images support (May require additional Airtable configuration)
• Support for new content types: "Project", "Blogpost", "Publication". New entries should populate a landing page AND create individual xd.gov article pages.
• Configure "Related Projects" tags to link to "Project" content and/or static pages. Additional requirements needed.
• Add separate "Attachments" field and ability to download or view them within an article.
• Add co-author support. (May require additional Airtable configuration)

To make dependency management and initializing the repository easier, we should add a shell script to install global and local dependencies per the "Scripts to Rule Them All" bootstrap and setup patterns: https://github.com/github/scripts-to-rule-them-all.

Classes and tag naming can be improved on our pages

Repetition in naming

Redundant classes
Ex: <body class="home page-home index">
Ex: <main class="main-content" id="main-content">

Section names don't need the page name as prefix
Ex: "home-hero", "home-mission", etc

Some naming currently carries a connotation that isn't necessarily true.
Ex: .grid-container isn't actually a CSS grid element.
Could we make this more generic re: .content-container or .content-wrapper?

Avoid using section- prefixes when the tag isn't a section.
Ex: div.section-breadcrumb could be something like .breadcrumb or .heading-eyebrow

https://github.com/XDgov/xd.gov/blob/a60e4201d01a1e96e0a26dde4ca55fc19ff13027/_pages/about.md#extending-workforce-capabilities

this line:
outside partners,such as academic research groups

should have a space after the comma

Hello Guys

Please kindly check this url: https://sra.ungp.xd.gov/?jumbo=slotasia365

someone using your subdomain for betting site

Add Contact page; put in About section, footer and/or top nav

Recommendation for production pipeline would be:

• Image assets prepped in Photoshop and exported "for web".
  • Prioritize .jpg over .png for file format, barring transparency requirements.
  • Where possible, serve viewport-specific files as well as for different DPR (small, small_2x, medium, medium_2x, etc)
• Image exports imported into ImageOptim for additional file compression.
  • ImageOptim: https://imageoptim.com/mac/ is available. There is also versions for Windows, Linux, and a web service (likely N/A for our purposes).

On Mission page, combine "How we work" text with "Our Mission" text and change to “About”

I noticed some .DS_Store files in the repo. We should remove them, then add .DS_Store to the .gitignore file.