From 9d488a8587c6657fd21c792d33a03640dbdb331e Mon Sep 17 00:00:00 2001 From: Dave Luetger Date: Tue, 26 Mar 2024 18:40:15 -0700 Subject: [PATCH 01/16] - Commented out spacer
in footer that seemed to be creating unnecessary border - Added description and "read link name" for each guide in the yaml file so they can be displayed on the new guides index - Created `card-with-image-guides` to better accomodate the content needs of the new guides index - Changed background color of main content section for guides index --- _data/guides.yml | 18 +++++- _includes/card-with-image-guides.html | 45 +++++++++++++ _includes/footer.html | 2 +- _layouts/guides.html | 36 +++++++++++ package-lock.json | 93 ++++++++++++++++++++------- pages/guides.md | 8 ++- 6 files changed, 175 insertions(+), 27 deletions(-) create mode 100644 _includes/card-with-image-guides.html create mode 100644 _layouts/guides.html diff --git a/_data/guides.yml b/_data/guides.yml index 3f315a161..02422b714 100644 --- a/_data/guides.yml +++ b/_data/guides.yml @@ -1,47 +1,63 @@ - name: "Accessibility" link: "https://guides.18f.gov/accessibility" + description: "Make websites more accessible so everyone can use them." + read-link-name: "accessibility" image: light: "/assets/img/guides/accessibility-lightest.svg" dark: "/assets/img/guides/accessibility-darker.svg" - name: "Agile" link: "https://guides.18f.gov/agile/" + description: "Move toward an agile approach to stay within budget and provide value to the public." + read-link-name: "agile" image: light: "/assets/img/guides/agile-lightest.svg" dark: "/assets/img/guides/agile-darker.svg" - name: "Content" link: "https://guides.18f.gov/content-guide/" + description: "Create content in plain language to help the public save time and build trust." + read-link-name: "content" image: light: "/assets/img/guides/content-lightest.svg" dark: "/assets/img/guides/content-darker.svg" -- name: "De-risking" +- name: "Derisking" link: "https://guides.18f.gov/derisking/" + description: "Save millions of dollars and reduce risk in your technology projects." + read-link-name: "derisking" image: light: "" dark: "/assets/img/guides/derisking-darker.svg" - name: "Design Methods" link: "https://guides.18f.gov/methods/" + description: "Involve the people who will use your service in the design process." + read-link-name: "design methods" image: light: "" dark: "/assets/img/guides/design-methods-darker.svg" - name: "Engineering" link: "https://guides.18f.gov/engineering" + description: "Develop secure software in the cloud, which can reduce costs and scale to meet public need." + read-link-name: "engineering" image: light: "" dark: "/assets/img/guides/engineering-darker.svg" - name: "Product" link: "https://guides.18f.gov/product" + description: "Support a team to deliver the right product to the right audience." + read-link-name: "product" image: light: "/assets/img/guides/product-lightest.svg" dark: "/assets/img/guides/product-darker.svg" - name: "User Experience" link: "https://guides.18f.gov/ux-guide/" + description: "Make your products and services work for the people that use them." + read-link-name: "UX" image: light: "/assets/img/guides/ux-lightest.svg" dark: "/assets/img/guides/ux-darker.svg" diff --git a/_includes/card-with-image-guides.html b/_includes/card-with-image-guides.html new file mode 100644 index 000000000..da55a4f6c --- /dev/null +++ b/_includes/card-with-image-guides.html @@ -0,0 +1,45 @@ +{% 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. +{% endcomment %} + +
+
+ + {% capture card_image %} + {{- include.image_alt_text -}} + {% endcapture %} + + {% capture card_text %} +

{{ include.text_content }}

+ {% endcapture %} + +{% if include.image_side == "right" %} + {{ card_text }} + {{ card_image }} +{% else %} + {{ card_image }} + {{ card_text }} +{% endif %} + +
+
+

{{ include.text_descrip }}

+ Read {{include.text_link}} guide +
+
diff --git a/_includes/footer.html b/_includes/footer.html index 26e251394..786df8508 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,7 +1,7 @@