USWDS-Site: Combine "What's new" and "News and updates pages #2958

amyleadem · 2024-11-07T20:23:12Z

Summary

Combined "What's new" and "News and updates" pages.

This is a follow-up to the prototype work in #2855.

Note

This PR does not include the prototype's updates to the excerpt link structure in post.html. It was not clear how to accommodate external links in the header links, so I bumped it for now to prevent this from being blocked. We are going to address this in a fast follow-on in #2953

Related issue

Closes #2915

Preview links

Problem statement

There is not a clear place to post product updates in relation to Web Components launch
There is a gap in communicating about our new product
- We talk about it in MCs and newsletters, but if you only went to our site, you’d have no idea
Our product looks stale - no “news”
- We aren’t showing our full story
We’re currently splitting traffic between two “news” pages
- Google Analytics review shows fairly similar traffic for the last six months, with What’s New page ahead by about 300 views. And, two blog posts under the What’s New URL have about combined 5000 views for that period.

Solution

Moved the "News and updates" page to be a child of "What's new" page, rather than a sibling
Moved "What's new" content into cards to visually condense the content
Replaced the Showcase link with a link to GitHub discussions.

Testing and review

All:

Confirm links work
Confirm pages display as expected at all screen widths
Confirm changelogs are present and accurate
Confirm sidenav highlights the correct current page on the what's new pages and posts

Content:

Confirm the updated page titles, leads are free from error and make sense
Confirm the content in the cards on the "What's new" page are free from error and make sense
Confirm "All news and updates" page shows the same posts as the previous "news and updates" page

Devs:

Confirm redirects work as expected
- Confirm the previous link to "News and updates" (/about/updates/) now points to the "What's new" page
Confirm the permalinks and url directory structure makes sense for the new pages and posts
Confirm no regressions in sidenav on different page types.
Confirm the code meets USWDS standards

…mbine-whats-new-pages

amyleadem · 2024-11-14T15:36:00Z

pages/whats-new/overview.md

+  - /whats-new/updates/
+  - /about/updates/


Note
These were redirects from the deleted updates.md file

amyleadem · 2024-11-14T19:12:29Z

_includes/nav/current.html

 {% elsif page.collection and include.page.subnav.type == page.collection %}
  {% assign _current = true %}
+<!--
+  Use the page's `type` data key to connect the sidenav to a collection.
+  This sets "current" for the pages inside the _posts directory.
+  Collections are defined in config.yml, and "posts" is a default collection type in Jekyll.
+-->
+{% elsif page.collection and include.page.type == page.collection %}
+  {% assign _current = true %}


Note
This change allows us to set the "current" page in the sidenav of all our posts to be the "All news and updates" page.

Notes:

To connect the pages, we needed to also add type: posts to the front matter of the What's new pages.

The type data key is used in the front matter across the site, but type: posts is not yet used in the repo.

Why I didn't use the existing subnav.type check

Currently, the site connects the posts to the "News and updates" page in the side navigation by using the conditional in lines 7-8 here, along with adding subnav.type = "posts" on the updates.md file.

However, I ran into some errors with this approach when I tried to add both a type and a link item to "All news and updates" inside the subnav in pages/whats-new/overview.md. It caused conflict that caused the side navigation to break (Please confirm that you are not able to get it to work either).

Needs discussion

Proposed additional change

I recommend we remove the subnav.type check in lines 7-8 and replace it with the check added in lines 14-15.

Currently, there is only one other page that uses subnav.type: security.md. Replacing subnav.type with type here should still connect it to the expected collection in config.yml.

I don't see anything in the repo relating to page.type that would cause any regressions, but of course we would want to test that. If we move forward with this approach, we would also need to make an update to the front matter in security.md.

Curious to hear thoughts on this approach and proposed additional change.

Suggested change

{% elsif page.collection and include.page.subnav.type == page.collection %}

{% assign _current = true %}



{% elsif page.collection and include.page.type == page.collection %}

{% assign _current = true %}



{% elsif page.collection and include.page.type == page.collection %}

{% assign _current = true %}

finekatie

Merge is looking good to me. Excited to get to add content!

mejiaj

Thanks for consolidating this and the notes. The changes look good and the reasoning to consolidate make a lot of sense.

Added a question and a comment. Ideally, we should move away from the pattern of embedding chunks of HTML in markdown. The larger the chunk the harder it is to update/maintain and could introduce code duplication.

_includes/nav/current.html

 {% elsif page.collection and include.page.subnav.type == page.collection %}
  {% assign _current = true %}
+<!--
+  Use the page's `type` data key to connect the sidenav to a collection.
+  This sets "current" for the pages inside the _posts directory.
+  Collections are defined in config.yml, and "posts" is a default collection type in Jekyll.
+-->
+{% elsif page.collection and include.page.type == page.collection %}
+  {% assign _current = true %}


mejiaj · 2024-11-15T20:58:07Z

pages/whats-new/overview.md

+<ul class="usa-card-group margin-top-6">
+  <li class="usa-card site-component-card desktop:grid-col-6">
+    <div class="usa-card__container">
+      <header class="usa-card__header">
+        <h2 class="usa-card__heading font-lang-lg">Release notes</h2>
+      </header>
+      <div class="usa-card__body font-lang-sm">
+        <p>Find summaries of each USWDS update on our GitHub releases page. Release notes explain bug fixes, new features, and other changes.</p>
+      </div>
+      <div class="usa-card__footer">
+        <a class="usa-button" href="https://github.com/uswds/uswds/releases">Read the USWDS release notes</a>
+      </div>
+    </div>
+  </li>
+  <li class="usa-card site-component-card desktop:grid-col-6">
+    <div class="usa-card__container">
+      <header class="usa-card__header">
+        <h2 class="usa-card__heading font-lang-lg">GitHub discussions</h2>
+      </header>
+      <div class="usa-card__body font-lang-sm">
+        <p>How our growing community of government engineers, content specialists, and designers participate and contribute to improving USWDS.</p>
+      </div>
+      <div class="usa-card__footer">
+        <a class="usa-button" href="https://github.com/uswds/uswds/discussions">USWDS GitHub discussions</a>
+      </div>
+    </div>
+  </li>
+</ul>


issue: Can we create a component or an include for this?

Ideally a component should be reusable, but having HTML in MD can be confusing and hard to maintain.

mejiaj · 2024-11-15T21:09:54Z

_includes/nav/current.html

+<!--
+  Use the page's `type` data key to connect the sidenav to a collection.
+  This sets "current" for the pages inside the _posts directory.
+  Collections are defined in config.yml, and "posts" is a default collection type in Jekyll.
+-->


polish: This could be a liquid comment.

amyleadem added 2 commits November 7, 2024 13:21

Combine "What's new" and "News and updates pages

df8c794

Add changelog for 2958

1202e6a

amyleadem changed the title ~~Combine "What's new" and "News and updates pages~~ USWDS-Site: Combine "What's new" and "News and updates pages Nov 8, 2024

Add whats-new/updates to redirect list

21fb354

amyleadem marked this pull request as ready for review November 8, 2024 16:02

amyleadem added 4 commits November 13, 2024 09:00

Clean up code

d3f9dae

Rename updates.md -> all-news.md

26e4762

Merge branch 'main' of https://github.com/uswds/uswds-site into al-co…

19580d1

…mbine-whats-new-pages

Change all-news -> all

4392ae9

amyleadem marked this pull request as draft November 13, 2024 17:22

amyleadem added 2 commits November 13, 2024 16:25

Set "current" in what's new sidenav

91e8ec1

Update current.html comment

32fa98c

amyleadem commented Nov 14, 2024

View reviewed changes

Update current.html comment

f85381c

amyleadem commented Nov 14, 2024

View reviewed changes

amyleadem marked this pull request as ready for review November 14, 2024 19:21

amyleadem requested a review from a team as a code owner November 14, 2024 19:21

amyleadem requested review from mahoneycm, mejiaj and finekatie November 14, 2024 19:23

finekatie approved these changes Nov 14, 2024

View reviewed changes

mejiaj self-assigned this Nov 15, 2024

mejiaj reviewed Nov 15, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

USWDS-Site: Combine "What's new" and "News and updates pages #2958

USWDS-Site: Combine "What's new" and "News and updates pages #2958

amyleadem commented Nov 7, 2024 •

edited

Loading

amyleadem Nov 14, 2024

amyleadem Nov 14, 2024 •

edited

Loading

This comment was marked as duplicate.

finekatie left a comment

mejiaj left a comment

This comment was marked as duplicate.

mejiaj Nov 15, 2024 •

edited

Loading

mejiaj Nov 15, 2024

USWDS-Site: Combine "What's new" and "News and updates pages #2958

Are you sure you want to change the base?

USWDS-Site: Combine "What's new" and "News and updates pages #2958

Conversation

amyleadem commented Nov 7, 2024 • edited Loading

Summary

Related issue

Preview links

Problem statement

Solution

Testing and review

amyleadem Nov 14, 2024

Choose a reason for hiding this comment

amyleadem Nov 14, 2024 • edited Loading

Choose a reason for hiding this comment

Why I didn't use the existing subnav.type check

Needs discussion

Proposed additional change

This comment was marked as duplicate.

finekatie left a comment

Choose a reason for hiding this comment

mejiaj left a comment

Choose a reason for hiding this comment

This comment was marked as duplicate.

mejiaj Nov 15, 2024 • edited Loading

Choose a reason for hiding this comment

mejiaj Nov 15, 2024

Choose a reason for hiding this comment

amyleadem commented Nov 7, 2024 •

edited

Loading

amyleadem Nov 14, 2024 •

edited

Loading

Why I didn't use the existing `subnav.type` check

mejiaj Nov 15, 2024 •

edited

Loading