From f7b799c147dabfca1f3fe81d652f20adaa22282b Mon Sep 17 00:00:00 2001 From: Matt J Cloyd Date: Tue, 11 Jun 2024 11:14:12 -0400 Subject: [PATCH] Review layouts This commit: - Removes unused layouts and partials - Reviews all layouts and partials for correct data - Removes `include.` references, not part of 11ty - Removes defunct .about.yml data - Minor tweaks to code spacing, layout, indentation While working on this, I noticed some duplicate includes, like header is basically the same as usa-banner. I think that's why we don't have a menu: I suspect the `header` file in Jekyll was the top menu, but got overwritten by the "this is a .gov site" banner, which is called usa-banner in Jekyll but header in 18F/guides. --- .about.yml | 99 --------------- _data/social_media.yml | 2 +- _includes/banner-cta.html | 10 +- _includes/card-with-image-guides.html | 59 ++++++--- _includes/card-with-image.html | 36 ++++-- _includes/feature-image.html | 6 +- _includes/featured-posts.html | 6 +- _includes/footer.html | 6 +- _includes/graphic-block.html | 10 +- _includes/heading-link.html | 12 -- _includes/hero.html | 15 --- _includes/highlights.html | 59 --------- _includes/layouts/post.html | 1 + _includes/layouts/styled-container.html | 2 +- _includes/menu.html | 6 +- _includes/meta.html | 12 +- _includes/meta_redirect.html | 2 +- _includes/pagination-links.html | 161 ------------------------ _includes/post-debug.html | 7 -- _includes/post-title.html | 6 +- _includes/scripts.html | 12 +- _includes/social-media.html | 6 +- _includes/subnav.html | 7 +- _includes/tagline.html | 15 --- _includes/testimonial.html | 4 +- _includes/usa-banner.html | 50 -------- _includes/usa-identifier.html | 105 ---------------- content/pages/home.html | 14 +-- 28 files changed, 129 insertions(+), 601 deletions(-) delete mode 100644 .about.yml delete mode 100644 _includes/heading-link.html delete mode 100644 _includes/hero.html delete mode 100644 _includes/highlights.html delete mode 100644 _includes/pagination-links.html delete mode 100644 _includes/post-debug.html delete mode 100644 _includes/tagline.html delete mode 100644 _includes/usa-banner.html delete mode 100644 _includes/usa-identifier.html diff --git a/.about.yml b/.about.yml deleted file mode 100644 index 30a439acd..000000000 --- a/.about.yml +++ /dev/null @@ -1,99 +0,0 @@ ---- -# .about.yml project metadata -# -# Short name that acts as the project identifier (required) -name: 18f-site - -# Full proper name of the project (required) -full_name: "18f.gsa.gov" - -# The type of content in the repo -# values: app, docs, policy -type: app - -# Describes whether a project team, working group/guild, etc. owns the repo (required) -# values: guild, working-group, project -owner_type: project - -# Name of the main project repo if this is a sub-repo; name of the working group/guild repo if this is a working group/guild subproject -#parent: - -# Maturity stage of the project (required) -# values: discovery, alpha, beta, live -stage: live - -# Whether or not the project is actively maintained (required) -# values: active, deprecated -status: active - -# Description of the project -description: | - The official website of 18F. - -# Should be 'true' if the project has a continuous build (required) -# values: true, false -testable: true - -# Team members contributing to the project (required) -# Items: -# - github: GitHub user name -# id: Internal team identifier/user name -# role: Team member's role; leads should be designated as 'lead' -team: -- id: boone - role: lead -- id: elaine - role: lead -- id: andre - role: editor -# Partners for whom the project is developed -#partners: -#- - -# Brief descriptions of significant project developments -#milestones: -#- - -# Technologies used to build the project -stack: -- Ruby -- Jekyll -- NodeJS - -# Brief description of the project's outcomes -#impact: - -# Services used to supply project status information -# Items: -# - name: Name of the service -# category: Type of the service -# url: URL for detailed information -# badge: URL for the status badge -#services: -#- - -# Licenses that apply to the project and/or its components (required) -# Items by property name pattern: -# .*: -# name: Name of the license from the Software Package Data Exchange (SPDX): https://spdx.org/licenses/ -# url: URL for the text of the license -licenses: - 18f-site: - name: CC0-1.0 - url: https://github.com/18F/18f.gsa.gov/blob/staging/LICENSE.md - -# Blogs or websites associated with project development -#blog: -#- - -# Links to project artifacts -# Items: -# - url: URL for the link -# text: Anchor text for the link -links: -- url: https://18f.gsa.gov/ - text: The official website of 18F - -# Email addresses of points-of-contact -contact: -- gregory.boone@gsa.gov diff --git a/_data/social_media.yml b/_data/social_media.yml index f0767183b..038e38cb3 100644 --- a/_data/social_media.yml +++ b/_data/social_media.yml @@ -18,7 +18,7 @@ dark: /assets/img/social-icons/svg/linkedin-darkest.svg - platform: RSS feed - link: /feed.xml + link: /feed/ image: light: /assets/img/social-icons/svg/rss-lightest.svg dark: /assets/img/social-icons/svg/rss25.svg diff --git a/_includes/banner-cta.html b/_includes/banner-cta.html index 0c09d08c4..18ee670dc 100644 --- a/_includes/banner-cta.html +++ b/_includes/banner-cta.html @@ -2,10 +2,14 @@
-

Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways.

- Contact us -
+

+ Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways. +

+ + Contact us +
+ diff --git a/_includes/card-with-image-guides.html b/_includes/card-with-image-guides.html index ad55c1a65..7a81ff00f 100644 --- a/_includes/card-with-image-guides.html +++ b/_includes/card-with-image-guides.html @@ -1,22 +1,45 @@ {% comment %} -This partial outputs a card with a heading, icon, descriptive text, a link, and, optionally, a hero image. -It was spun off from the "card-with-image" partial to accomodate the unique needs of the guides index page. -The whole card is no longer a clickable link. In the future, these might be condensed back down -into a single partial and class, but it will probably require some more conditional statements -because the behaviors are so different. - -The expected arguments for this partial are: -link_url - the url the links on the card will link to (href) -image_path - the path to the image, note that the partial will prepend the site baseurl -text_content - the text to be displayed next to the image; the guide name -text_descrip - the longer description to be displayed under the card heading - -Optional arguments: -card_color - if set to "dark" will make the card background the primary-dark color. Otherwise will default to a white background. -image_alt_text - will be the alt text for the image. If this argument isn’t provided alt text will be set to “” and the image will be ignored by screen readers. -image_side - if set to "right" will place the image on the right side of the card. Otherwise the image will default to the left side. -image_size - if set to "md" will set the max image size to 8 units. Otherwise the image will default to a max size of 6 units. -hero.url - for guides where "promoted" = true, this will be the hero image for the card. +This partial outputs a card with a heading, icon, descriptive text, a +link, and, optionally, a hero image. It was spun off from the +"card-with-image" partial to accomodate the unique needs of the guides +index page. + +The whole card is no longer a clickable link. In the future, these +might be condensed back down into a single partial and class, but it +will probably require some more conditional statements because the +behaviors are so different. + +Required arguments +------------------ +link_url +the url the links on the card will link to (href) + +image_path +the path to the image, note that the partial will prepend the site baseurl + +text_content +the text to be displayed next to the image; the guide name + +text_descrip +the longer description to be displayed under the card heading + +Optional arguments +------------------ +card_color +if set to "dark" will make the card background the primary-dark color. Otherwise will default to a white background. + +image_alt_text +will be the alt text for the image. If this argument isn’t provided alt text will be set to “” and the image will be ignored by screen readers. + +image_side +if set to "right" will place the image on the right side of the card. Otherwise the image will default to the left side. + +image_size +if set to "md" will set the max image size to 8 units. Otherwise the image will default to a max size of 6 units. + +hero_url +for guides where "promoted" = true, this will be the hero image for the card. + {% endcomment %}
diff --git a/_includes/card-with-image.html b/_includes/card-with-image.html index 0b583e980..a3b87d9b8 100644 --- a/_includes/card-with-image.html +++ b/_includes/card-with-image.html @@ -1,16 +1,32 @@ {% comment %} This partial outputs a card with image and text. The whole card is a clickable link. -The expected arguments for this partial are: -link_url - the url the card will link to (href) -image_path - the path to the image, note that the partial will prepend the site baseurl -text_content - the text to be displayed next to the image - -Optional arguments: -card_color - if set to "dark" will make the card background the primary-dark color. Otherwise will default to a white background. -image_alt_text - will be the alt text for the image. If this argument isn’t provided alt text will be set to “” and the image will be ignored by screen readers. -image_side - if set to "right" will place the image on the right side of the card. Otherwise the image will default to the left side. -image_size - if set to "md" will set the max image size to 8 units. Otherwise the image will default to a max size of 6 units. +Required arguments +------------------ +link_url +the url the card will link to (href) + +image_path +the path to the image, note that the partial will prepend the site baseurl + +text_content +the text to be displayed next to the image + + +Optional arguments +------------------ +card_color +if set to "dark" will make the card background the primary-dark color. Otherwise will default to a white background. + +image_alt_text +will be the alt text for the image. If this argument isn’t provided alt text will be set to “” and the image will be ignored by screen readers. + +image_side +if set to "right" will place the image on the right side of the card. Otherwise the image will default to the left side. + +image_size +if set to "md" will set the max image size to 8 units. Otherwise the image will default to a max size of 6 units. + {% endcomment %} diff --git a/_includes/featured-posts.html b/_includes/featured-posts.html index a4793bbc4..6b98a5d10 100644 --- a/_includes/featured-posts.html +++ b/_includes/featured-posts.html @@ -1,6 +1,6 @@ -{% assign featured_posts = include.related_posts %} +{% assign featured_posts = related_posts %} {% if featured_posts.size > 0 %} -{% if include.color_mode == "dark"%} +{% if color_mode == "dark"%} {% assign border_color = "border-primary-lightest" %} {% assign text_color = "text-white" %} {% assign hover_color = "hover-primary-lightest" %} @@ -19,7 +19,7 @@

-

This project is maintained by 18F

-

Learn more about our Linking Policy

-

Have questions or would like to contact us? Email us at 18F@gsa.gov

+

This project is maintained by 18F

+

Learn more about our Linking Policy

+

Have questions or would like to contact us? Email us at 18F@gsa.gov

diff --git a/_includes/graphic-block.html b/_includes/graphic-block.html index e227f90a7..c9f172ec5 100644 --- a/_includes/graphic-block.html +++ b/_includes/graphic-block.html @@ -1,9 +1,9 @@
- {{ include.image_alt_text }} -

- {{ include.body_text }} + alt="{{ image_alt_text }}" + > +

+ {{ body_text }}

diff --git a/_includes/heading-link.html b/_includes/heading-link.html deleted file mode 100644 index 839b7b5c0..000000000 --- a/_includes/heading-link.html +++ /dev/null @@ -1,12 +0,0 @@ -{% comment %} -Use this partial when headings links aren't generated through markdown. -Add this partial within the heading you want to link. -Heading id must be the same as the slug passed to this partial. -{% endcomment %} - - - diff --git a/_includes/hero.html b/_includes/hero.html deleted file mode 100644 index 50e5e385f..000000000 --- a/_includes/hero.html +++ /dev/null @@ -1,15 +0,0 @@ -{% comment %} -This will be displayed on the homepage. Ideally, you want to highlight key goals of the website -{% endcomment %} - -
-
-
-

This is not the Guides home page -

-

On the web, this home page does not appear. The actual guides homepage lives in the 18F.gsa.gov repository. Look into the individual - guides below for the actual Guides content.

- Leave to visit the actual Guides homepage -
-
-
diff --git a/_includes/highlights.html b/_includes/highlights.html deleted file mode 100644 index fcf123e9d..000000000 --- a/_includes/highlights.html +++ /dev/null @@ -1,59 +0,0 @@ -{% comment %} -Use this section to highlight key elements of your site. Some -sites will only have two while others may have six to eight. -{% endcomment %} - -
-
-
-
- {% image_with_class "./node_modules/@uswds/uswds/dist/img/circle-124.png" "usa-media-block__img" "alt text" %} -
-

Graphic headings can vary.

-

- Graphic headings can be used a few different ways, depending on what - your landing page is for. Highlight your values, specific program - areas, or results. -

-
-
-
- {% image_with_class "./node_modules/@uswds/uswds/dist/img/circle-124.png" "usa-media-block__img" "alt text" %} -
-

Stick to 6 or fewer words.

-

- Keep body text to about 30 words. They can be shorter, but try to be - somewhat balanced across all four. It creates a clean appearance - with good spacing. -

-
-
-
-
-
- {% image_with_class "./node_modules/@uswds/uswds/dist/img/circle-124.png" "usa-media-block__img" "alt text" %} -
-

- Never highlight anything without a goal. -

-

- For anything you want to highlight here, understand what your users - know now, and what activity or impression you want from them after - they see it. -

-
-
-
- {% image_with_class "./node_modules/@uswds/uswds/dist/img/circle-124.png" "usa-media-block__img" "alt text" %} -
-

Could also have 2 or 6.

-

- In addition to your goal, find out your users’ goals. What do they - want to know or do that supports your mission? Use these headings to - show those. -

-
-
-
-
-
diff --git a/_includes/layouts/post.html b/_includes/layouts/post.html index 27d4bec82..f71343e3c 100644 --- a/_includes/layouts/post.html +++ b/_includes/layouts/post.html @@ -6,6 +6,7 @@ {% endcomment %} {% if page.image %} + {% comment %}This include will probably need to pass in data explicitly.{% endcomment %} {% include "feature-image.html" %} {% endif %} diff --git a/_includes/layouts/styled-container.html b/_includes/layouts/styled-container.html index 80bb57432..713fe94aa 100644 --- a/_includes/layouts/styled-container.html +++ b/_includes/layouts/styled-container.html @@ -13,7 +13,7 @@