Skip to content

Commit 716fbba

Browse files
adunkmanmgwalker
andauthored
Refactor USWDS alert component into a shortcode. (#4027)
* Add alert shortcode, remove component. This is a cleaner syntax for alerts. * move low-system banners to the top of pages --------- Co-authored-by: Greg Walker <[email protected]>
1 parent 64d2b0c commit 716fbba

21 files changed

+215
-185
lines changed

_includes/alert.html

-12
This file was deleted.

_includes/low-system.html

+7-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
1-
<div class="usa-alert usa-alert--info">
2-
<div class="usa-alert__body">
3-
<h4 class="usa-alert__heading">This is a <a href="https://atos.open-control.org/categorization/">Low</a> system</h4>
4-
<div class="usa-alert__text">
5-
This means:
6-
<ul>
7-
<li>You cannot use it to store any <a href="{{ "/sensitive-information/" | url }}">sensitive information</a></li>
8-
<li>It generally can't have write access to any <a href="https://atos.open-control.org/categorization/">Moderate</a> systems</li>
9-
</ul>
10-
Reach out in <a href="https://gsa-tts.slack.com/messages/infrastructure">#infrastructure</a> if you have questions.
11-
</div>
12-
</div>
13-
</div>
1+
{% alert "This is a <a href=\"https://atos.open-control.org/categorization/\">Low</a> system" %}
2+
This means:
3+
- You cannot use it to store any <a href="{{ "/sensitive-information/" | url }}">sensitive information</a>
4+
- It generally can't have write access to any <a href="https://atos.open-control.org/categorization/">Moderate</a> systems
5+
6+
Reach out in <a href="https://gsa-tts.slack.com/messages/infrastructure">#infrastructure</a> if you have questions.
7+
{% endalert %}

_includes/software-warning.html

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
{% capture alert_content %} It is safest to assume that you cannot use any
2-
software/sites/apps that require installation or an account until you know it's
3-
[approved]({{ "/general-information-and-resources/software/" | url }}). Ask in
4-
[#infrastructure](https://gsa-tts.slack.com/messages/infrastructure) if you're
5-
not sure. {% endcapture %} {% include "alert.html" level:"warning"
6-
heading:"Software must be approved" content:alert_content %}
1+
{% alert "Software must be approved", "warning" %}
2+
It is safest to assume that you cannot use any
3+
software/sites/apps that require installation or an account until you know it's
4+
[approved]({{ "/general-information-and-resources/software/" | url }}). Ask in
5+
[#infrastructure](https://gsa-tts.slack.com/messages/infrastructure) if you're
6+
not sure.
7+
{% endalert %}

config/shortcodes/alert.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
https://designsystem.digital.gov/components/alert/
3+
4+
heading: text of the alert heading
5+
level: the severity of the alert (default info)
6+
slim: set if slim style
7+
no_icon: set if omitting icon
8+
9+
Example:
10+
11+
{% alert "Heads up!" %}
12+
This is the body of the info alert message.
13+
{% endalert %}
14+
15+
{% alert "An error has occurred." "error" "slim" "no-icon" %}
16+
This is the body of the info alert message.
17+
{% endalert %}
18+
*/
19+
20+
module.exports = (content = "", heading = "", level = "info", slim = false, no_icon = false) => {
21+
const classes = ["usa-alert", `usa-alert--${level}`];
22+
if (slim) { classes.push("usa-alert--slim"); }
23+
if (no_icon) { classes.push("usa-alert--no-icon"); }
24+
25+
const body = [`<div class="usa-alert__text">${content.trim()}</div>`];
26+
if (heading != "") { body.unshift(`<h3 class="usa-alert__heading">${heading.trim()}</h3>`); }
27+
28+
return `
29+
<div class="${classes.join(" ")}">
30+
<div class="usa-alert__body">${body.join("")}</div>
31+
</div>
32+
`;
33+
}

config/shortcodes/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
const alertShortcode = require("./alert");
12
const downloadShortcode = require("./download");
23
const imageShortcode = require("./image");
34
const imageWithClassShortcode = require("./imageWithClass");
@@ -8,6 +9,7 @@ const usaCurrentShortcode = require("./usaCurrent");
89
const uswdsIconShortcode = require("./uswdsIcon");
910

1011
const shortcodePlugin = (eleventyConfig) => {
12+
eleventyConfig.addPairedShortcode("alert", alertShortcode);
1113
eleventyConfig.addShortcode("download", downloadShortcode);
1214
eleventyConfig.addShortcode("image", imageShortcode);
1315
eleventyConfig.addShortcode("image_with_class", imageWithClassShortcode);

pages/about.md

+5-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ questions:
44
- tts-handbook
55
---
66

7-
{% capture alert_content %} This page is new and currently under development.
8-
Its content is accurate, but it is lacking important information such as the
9-
Handbook's governance structure. {% endcapture %}
10-
{% include "alert.html" heading:"Under development" content:alert_content %}
7+
{% alert "Under development" %}
8+
This page is new and currently under development.
9+
Its content is accurate, but it is lacking important information such as the
10+
Handbook's governance structure.
11+
{% endalert %}
1112

1213
In a nutshell, the Handbook is our take on internal government documentation. It
1314
is an open, crowd-sourced, accessible, and living resource that aims to provide

pages/general-information-and-resources/tech-policies/gsa-pages.md

+6-3
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,20 @@ redirect_from:
99
---
1010
# Authority to Use (ATU) Process
1111

12-
{% include "alert.html" level:"warning" content: "This guide is for **GSA Employees or Contractors** operating a GSA Website" %}
12+
{% alert "", "warning" %}
13+
This guide is for **GSA Employees or Contractors** operating a GSA Website
14+
{% endalert %}
1315

1416
"GSA Pages" is a **GSA only Authority to Operate (ATO)** of [cloud.gov's FEDRAMP Authorization](https://marketplace.fedramp.gov/products/F1607067912) of their [cloud.gov Pages](https://pages.cloud.gov) service. As such, it adds the Security Controls around the source code and contents for the website (e.g. Github). It provides **GSA employees** with a fast and secure approach to getting a web presence for your projects/programs.
1517

18+
{% include "low-system.html" %}
19+
1620
## Launching a Website at GSA
1721
- Confirm your website is listed on [https://touchpoints.digital.gov](https://touchpoints.digital.gov)
1822
- if not listed, [complete a new website request](https://touchpoints.app.cloud.gov/admin/websites/new)
1923
- Follow [GSA's Digital Lifecycle Program Guide](https://insite.gsa.gov/employee-resources/communications/websites/strategy-policy-and-standards/digital-lifecycle-program)
2024

21-
Prior to standing up a site with GSA Pages, you will need a domain or subdomain. To obtain a new domain or subdomain with GSA, approval is needed by GSA Leadership and Office of Customer Experience in Touchpoints.
25+
Prior to standing up a site with GSA Pages, you will need a domain or subdomain. To obtain a new domain or subdomain with GSA, approval is needed by GSA Leadership and Office of Customer Experience in Touchpoints.
2226

2327
## Launching a cloud.gov Pages Website
2428

@@ -96,4 +100,3 @@ Follow [TTS Incident Response Plan](https://handbook.tts.gsa.gov/general-informa
96100
1. Sign up for [cloud.gov Pages Status](https://cloudgov.statuspage.io/) notifications
97101
1. Follow [cloud.gov Contingency Plan](https://cloud.gov/docs/ops/contingency-plan/)
98102

99-
{% include "low-system.html" %}

pages/tools/airtable.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ redirect_from:
88

99
[Airtable](https://airtable.com/) is a cloud-based tool that allows users to organize their workflow, data, and records in a flexible and visually appealing way without the need for any coding. **Licenses are now available for all TTS employees**.
1010

11+
{% include "low-system.html" %}
12+
1113
### How to Request a License
1214

1315
TTS employees can obtain a free, read-only license by making a request to [email protected]. Read-only users can view but not edit or comment on anything in the workspace, base, or interface.
@@ -31,4 +33,3 @@ Tech Operations serves as the enterprise admins and can override all permissions
3133

3234
Airtable has an Authorization to Operate (ATO) at FIPS 199 Low Impact Level; therefore, sensitive data such as personal identifiable information (PII) and controlled unclassified information (CUI) is not allowed. In addition, TTS is only authorized to give view-only access to partner agencies due the uncertainty of their ATO statuses. Other GSA Components are covered under the GSA ATO but should procure their own licenses. More detailed privacy and security guidance can be found [here](https://airtable.com/appQbn3D4GMM8SD0O/pagaDV7VWDAjLdAC0).
3335

34-
{% include "low-system.html" %}

pages/tools/eventbrite.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ redirect_from:
99
TTS uses [Eventbrite](https://www.eventbrite.com/) to manage registrations for
1010
events we host.
1111

12+
{% include "low-system.html" %}
13+
1214
## Rules
1315

1416
The following are required for accessibility and other compliance reasons:
@@ -47,8 +49,6 @@ The following are required for accessibility and other compliance reasons:
4749
- If attendees need to be federal employees, a question about whether they are
4850
federal or not
4951

50-
{% include "low-system.html" %}
51-
5252
## See also
5353

5454
- [Meetings and meeting tools]({% page "/meetings-and-meeting-tools/" %})

pages/tools/git-signing.md

+22-28
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ questions:
77
cSpell: ignore allstar
88
---
99

10-
TTS strongly encourages all git commits to be cryptographically signed. A cryptographic signature is a strong indication that that the work was authored by the person claiming to have authored it and that it has not been changed since they authored it.
10+
TTS strongly encourages all git commits to be cryptographically signed. A cryptographic signature is a strong indication that that the work was authored by the person claiming to have authored it and that it has not been changed since they authored it.
1111

1212
## Signing requirements
1313

@@ -19,13 +19,13 @@ We strongly recommend [using a password manager]({% page "general-information-an
1919

2020
### Using GitHub on the web does not require signing
2121

22-
If you only use GitHub from the web interface, you do not need to configure signing. The web interface automatically signs your work for you.
22+
If you only use GitHub from the web interface, you do not need to configure signing. The web interface automatically signs your work for you.
2323

2424
If you do any work with git repos on your local computer, however, you need to set up commit signing.
2525

2626
## 1. Create your keys
2727

28-
Cryptographically signing your commits requires creating a pair of keys. One of them is your private key, and you must keep it secret. Think of it much like a password – only you should ever have access to it. Anyone with this private key can sign with your identity, so protect it!
28+
Cryptographically signing your commits requires creating a pair of keys. One of them is your private key, and you must keep it secret. Think of it much like a password – only you should ever have access to it. Anyone with this private key can sign with your identity, so protect it!
2929

3030
The other key is your public key, and it may be shared widely. In fact, in order to verify your signed commits, others will need access to your public key.
3131

@@ -34,12 +34,9 @@ The other key is your public key, and it may be shared widely. In fact, in order
3434
ssh-keygen -t ed25519 -C "[YOUR EMAIL]@gsa.gov"
3535
```
3636

37-
{%
38-
include "alert.html"
39-
level: "info"
40-
heading: "About the cryptographic algorithm"
41-
content: "We recommend using the ED25519 algorithm, a particular configuration of the EdDSA algorithm family. This is stronger than the default DSA family. This algorithm may not be appropriate for all cases, however, as it is newer and is not as widely supported yet. git and GitHub both support the ED25519 algorithm."
42-
%}
37+
{% alert "About the cryptographic algorithm" %}
38+
We recommend using the ED25519 algorithm, a particular configuration of the EdDSA algorithm family. This is stronger than the default DSA family. This algorithm may not be appropriate for all cases, however, as it is newer and is not as widely supported yet. git and GitHub both support the ED25519 algorithm.
39+
{% endalert %}
4340

4441
2. You will be asked where to save the key: `Enter file in which to save the key (/Users/[username]/.ssh/[key name])`
4542
- If you are using a password manager like KeePassXC, it will be more convenient if you change this path. Type `/Users/[username]/Desktop/git-signing-key`. (`[username]` is your login name on your laptop.)
@@ -65,9 +62,9 @@ ssh-keygen -t ed25519 -C "[YOUR EMAIL]@gsa.gov"
6562

6663
1. Add the keys to a KeePassXC entry.
6764
- If you already have an entry in KeePassXC for your GitHub account, double-click it to open it in editing mode.
68-
- Otherwise, create a new entry using the **+ (Add a new entry)** button in the top bar.
65+
- Otherwise, create a new entry using the **+ (Add a new entry)** button in the top bar.
6966
2. On the left side of the editing window, click the **Advanced** button to navigate to the Advanced screen.
70-
3. Scroll down to the section titled **Attachments**.
67+
3. Scroll down to the section titled **Attachments**.
7168
4. Click the **Add** button on the right side, and use the file browser to find the key you created above. Look for the files called `git-signing-key` and `git-signing-key.pub`, and add them both.
7269

7370
{% image "_img/tools/git-signing/keepassxc-git-signing-01.png" %}
@@ -76,9 +73,9 @@ Once you have added the files to KeePassXC, you can delete them from your deskto
7673

7774
#### 3. Tell KeePassXC that these are keys
7875
1. Double-click to edit the entry that has the keys attached.
79-
2. Click the button that says **SSH Agent** on the left sidebar.
80-
3. Look for the section labeled **Private key** that includes a drop-down box labeled **Attachment**.
81-
3. Click in the drop-down box and select the private key you added as an attachment. The sections below should then populate with information such as "Fingerprint," "Comment," and "Public key."
76+
2. Click the button that says **SSH Agent** on the left sidebar.
77+
3. Look for the section labeled **Private key** that includes a drop-down box labeled **Attachment**.
78+
3. Click in the drop-down box and select the private key you added as an attachment. The sections below should then populate with information such as "Fingerprint," "Comment," and "Public key."
8279
- **IMPORTANT:** Use the _private_ key, the one that is just `git-signing-key`, not the public key!
8380

8481
{% image "_img/tools/git-signing/keepassxc-git-signing-02.png" %}
@@ -96,7 +93,7 @@ Once you have added the files to KeePassXC, you can delete them from your deskto
9693
ssh-add --apple-use-keychain ~/.ssh/git-signing-key
9794
```
9895

99-
2. You will be prompted to enter the password you created for your key.
96+
2. You will be prompted to enter the password you created for your key.
10097
- Using the `--apple-use-keychain` option will store your password securely in the macOS keychain, where it will only be available when you are logged into your computer.
10198

10299
#### Linux
@@ -111,7 +108,7 @@ You may be required to enter the password associated with your key every time yo
111108

112109
## 3. Configure git to sign commits
113110

114-
By default, git uses a format called GPG for commit signing. However, GPG keys are more difficult to create and manage, so we recommend SSH keys, which is what you created in the previous steps.
111+
By default, git uses a format called GPG for commit signing. However, GPG keys are more difficult to create and manage, so we recommend SSH keys, which is what you created in the previous steps.
115112

116113
1. Tell git to use SSH keys instead of GPG keys. In a terminal, enter this command:
117114

@@ -129,9 +126,9 @@ git config --global commit.gpgsign true
129126

130127
#### Copy your public key from KeePassXC
131128
1. Double-click to edit the KeePassXC entry that contains your keys.
132-
2. Click the button that says **SSH Agent** in the left sidebar.
133-
3. Find the large text area labeled **Public key**.
134-
4. Click on the **Copy to clipboard** button at the bottom to copy the public key.
129+
2. Click the button that says **SSH Agent** in the left sidebar.
130+
3. Find the large text area labeled **Public key**.
131+
4. Click on the **Copy to clipboard** button at the bottom to copy the public key.
135132
- You will have 10 seconds to paste the key. KeePassXC clears the clipboard after 10 seconds.
136133

137134
{% image "_img/tools/git-signing/keepassxc-ssh-02.png" %}
@@ -174,15 +171,12 @@ echo "[YOUR EMAIL]@gsa.gov $(cat ~/.ssh/git-signing-key.pub)" >> ~/.gitsigners
174171

175172
## 4. Tell GitHub about your key
176173

177-
Git may be configured to sign your commits, but GitHub will mark them as `Unverified` and they will not be accepted under the Allstar policy.
174+
Git may be configured to sign your commits, but GitHub will mark them as `Unverified` and they will not be accepted under the Allstar policy.
178175

179-
In order to verify your signed commits, you must associate the public key with your GitHub account.
180-
1. Go to your [GitHub SSH and GPG keys settings page]({% link "https://github.com/settings/keys" %}).
176+
In order to verify your signed commits, you must associate the public key with your GitHub account.
177+
1. Go to your [GitHub SSH and GPG keys settings page]({% link "https://github.com/settings/keys" %}).
181178
2. Follow the [instructions provided by GitHub]({% link "https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account" %}) to add your signing key.
182179

183-
{%
184-
include "alert.html"
185-
level: "warning"
186-
heading: "Add a signing key, not an authentication key"
187-
content: "When you add your key to GitHub, it presents a drop-down for key types. By default, it will add an authentication key. Be sure to click the drop-down and select the signing key option instead."
188-
%}
180+
{% alert "Add a signing key, not an authentication key", "warning" %}
181+
When you add your key to GitHub, it presents a drop-down for key types. By default, it will add an authentication key. Be sure to click the drop-down and select the signing key option instead.
182+
{% endalert %}

0 commit comments

Comments
 (0)