diff --git a/content/topics/artificial-intelligence/_index.md b/content/topics/artificial-intelligence/_index.md index 0990898084..3dece7a22d 100644 --- a/content/topics/artificial-intelligence/_index.md +++ b/content/topics/artificial-intelligence/_index.md @@ -27,13 +27,15 @@ legislation: link: "https://www.whitehouse.gov/briefing-room/presidential-actions/2023/10/30/executive-order-on-the-safe-secure-and-trustworthy-development-and-use-of-artificial-intelligence/" # Featured resource to at the top of the page -featured_resources: +trusted_resources: resources: - - link: "https://ai.gov/" + - link: "https://ai.gov/" + title: "AI.GOV" + summary: "Short summary goes here for the reader to understand the nature of the external content." # Featured community to display at the top of the page featured_communities: - "artificial-intelligence" - "communicators" ---- +--- \ No newline at end of file diff --git a/themes/digital.gov/layouts/partials/core/trusted-resource.html b/themes/digital.gov/layouts/partials/core/trusted-resource.html new file mode 100644 index 0000000000..06661a75a0 --- /dev/null +++ b/themes/digital.gov/layouts/partials/core/trusted-resource.html @@ -0,0 +1,41 @@ +{{/* ================== + + Trusted Resource Component + + Displays a rounded box for an an external resource, similar to a featured resource. + Use front matter or a shortcode in markdown to display on page. + + @params {object} data - a dictionary object to display a resource + - link - required to display an external link + - title - required title of the resource + - summary - required to display a short description for the resource +*/}} +{{ $link := .data.link }} +{{ $title := .data.title }} +{{ $summary := .data.summary }} + +{{- if $link -}} + +{{- end -}} diff --git a/themes/digital.gov/layouts/shortcodes/trusted-resource.html b/themes/digital.gov/layouts/shortcodes/trusted-resource.html new file mode 100644 index 0000000000..a9638f8c20 --- /dev/null +++ b/themes/digital.gov/layouts/shortcodes/trusted-resource.html @@ -0,0 +1,16 @@ +{{/* ==== + + Shortcode for using a trusted-resource component. + See themes/digital.gov/layouts/partials/core/trusted-resource.html + + @example + {{< trusted-resource link = "https://www.ai.gov" title = "title to display" summary = "summary goes here" +>}} + +*/}} +{{ $title := (.Get "title" ) }} +{{ $summary := (.Get "summary" ) }} +{{ $link := (.Get "link" ) }} +{{ $data := (dict "title" $title "summary" $summary "link" $link) }} + +{{ partial "core/trusted-resource.html" (dict "data" $data ) }} diff --git a/themes/digital.gov/layouts/topics/list.html b/themes/digital.gov/layouts/topics/list.html index 609f7ff8e1..d1bbf1674a 100644 --- a/themes/digital.gov/layouts/topics/list.html +++ b/themes/digital.gov/layouts/topics/list.html @@ -72,13 +72,17 @@ {{- partial "core/featured-resource.html" (dict "Site" $.Site "resourcePath" .link "kicker" $kicker) -}} {{ end }} + {{ range .Params.trusted_resources.resources }} + {{- partial "core/trusted-resource.html" (dict "data" . ) -}} + {{ end }} + {{ range .Params.featured_communities }} {{ $community_page := $.GetPage (printf "communities/%s" .) }} {{ $kicker := "" }} {{ if $community_page.Params.kicker }} {{ $kicker = $community_page.Params.kicker }} {{ end }} - {{- partial "core/featured-resource.html" (dict "Site" $.Site "resourcePath" (printf "/communities/%s" .) "kicker" $kicker ) -}} + {{- partial "core/featured-resource.html" (dict "Site" $.Site "resourcePath" (printf "/communities/%s" .) "kicker" $kicker) -}} {{ end }} {{ end }} diff --git a/themes/digital.gov/src/scss/new/shortcodes/_featured-resource.scss b/themes/digital.gov/src/scss/new/shortcodes/_featured-resource.scss index 4b95211879..eae0bff7cd 100644 --- a/themes/digital.gov/src/scss/new/shortcodes/_featured-resource.scss +++ b/themes/digital.gov/src/scss/new/shortcodes/_featured-resource.scss @@ -68,3 +68,29 @@ } } } + +.dg-featured-resource--trusted { + .dg-featured-resource__body { + background: color("blue-5"); + + &:hover { + background: color("blue-10"); + } + } + + .dg-featured-resource__text-kicker { + align-items: center; + display: flex; + flex-direction: row; + + p { + padding-right: units(1); + } + + img { + height: units(2); + margin: 0; + width: units(2); + } + } +}