diff --git a/content/communities/federal-program-and-project-management-fedpm.md b/content/communities/federal-program-and-project-management-fedpm.md index 6aa955b38e..ad901ecad5 100644 --- a/content/communities/federal-program-and-project-management-fedpm.md +++ b/content/communities/federal-program-and-project-management-fedpm.md @@ -3,6 +3,8 @@ date: 2023-11-16 12:16:00 -0500 title: Federal Program and Project Management (FedPM) summary: The Federal Program and Project Management (FedPM) Community of Practice is the central source for the sharing of program and project management expertise across the entire federal government. +kicker: "Join the Federal Program and Project Management Community" + redirectto: https://community.max.gov/pages/viewpage.action?pageId=713787996 # Controls how this page appears across the site @@ -12,4 +14,5 @@ weight: 1 slug: federal-program-and-project-management-fedpm + --- diff --git a/content/communities/rpa-community.md b/content/communities/rpa-community.md index 3d5c85ed65..a4d2b506e3 100644 --- a/content/communities/rpa-community.md +++ b/content/communities/rpa-community.md @@ -7,6 +7,8 @@ date: 2019-12-12 19:00:00 -0500 title: "Robotic Process Automation (RPA)" summary: "A collaborative body designed to rapidly accelerate the adoption of Robotic Process Automation (RPA) technology across the federal government." +kicker: "Join the RPA Community" + # see all topics at https://digital.gov/topics topics: - emerging-tech diff --git a/content/resources/_index.md b/content/resources/_index.md index d795c85e55..8dc56665d0 100644 --- a/content/resources/_index.md +++ b/content/resources/_index.md @@ -59,6 +59,7 @@ resource_topics: - acquisition - budgeting-and-performance - contact-centers + - intellectual-property - product-and-project-management - privacy - records-management diff --git a/content/topics/application-programming-interface/_index.md b/content/topics/application-programming-interface/_index.md index 412f1cdad4..346b0e3b33 100644 --- a/content/topics/application-programming-interface/_index.md +++ b/content/topics/application-programming-interface/_index.md @@ -6,9 +6,10 @@ slug: "application-programming-interface" # Topic Title title: "Application programming interface" +deck: "Use application programming interfaces (APIs) to support interoperability and openness" # description — keep it short and clear -summary: "" +summary: "Application programming interfaces, or APIs, have the potential to enhance innovation. When used creatively and securely, APIs can improve the efficiency of many workflows that are important to delivering excellent digital experiences." aliases: - /topics/api/ @@ -18,6 +19,30 @@ aliases: # Weight weight: 2 +# Set the legislation card title and link +legislation: + title: "21st Century Integrated Digital Experience Act and OMB M-23-22" + link: "https://digital.gov/resources/delivering-digital-first-public-experience/" + +# Featured resource at the top of the page +featured_resources: + resources: + - title: "API.Data.gov" + summary: "A free API management service for federal agencies." + link: "https://api.data.gov" + +# Featured community to display at the top of the page +featured_communities: + - "web-managers-forum" + +# Curated list of content, can be internal or external links +featured_links: + title: "Customer experience: Essential knowledge" + resources: + - title: "Data.gov" + summary: "Explore the home of the U.S. government’s open data, including a catalog of federal APIs." + href: "https://data.gov/" + # For more information on managing topics, # see https://github.com/GSA/digitalgov.gov/wiki --- diff --git a/content/topics/intellectual-property/_index.md b/content/topics/intellectual-property/_index.md new file mode 100644 index 0000000000..2ffa10db37 --- /dev/null +++ b/content/topics/intellectual-property/_index.md @@ -0,0 +1,40 @@ +--- +# This topic lives at +# https://digital.gov/topics/intellectual-property + +slug: "intellectual-property" + +# Topic Title +title: "Intellectual property" +deck: "Understand the components of patent, trademark, and copyright in delivering digital services" + +summary: "Intellectual property describes creations of the mind—creative works or shareable ideas. Intellectual property is protected through patents, trademarks, copyrights, and trade secrets." + +# Weight +weight: 2 + +# Set the legislation card title and link +legislation: + title: "U.S. Patent and Trademark Office: Intellection property policy" + link: "https://www.uspto.gov/ip-policy" + +# Featured community to display at the top of the page +featured_communities: + - "communicators" + - "web-managers-forum" + +# Curated list of content, can be internal or external links +featured_links: + title: "Intellectual property: Essential knowledge" + resources: + - title: "U.S. Patent and Trademark Office" + summary: "Explore resources from the federal agency that grants U.S. patents and registers trademarks." + href: "https://www.uspto.gov/" + - title: "U.S. Copyright Office" + summary: "Learn from the official source for copyright information, registration and records." + href: "https://www.copyright.gov/" + - title: "STOPfakes.gov" + summary: "A one-stop shop for U.S. government tools and resources on intellectual property rights." + href: "https://www.stopfakes.gov/welcome" + +--- diff --git a/content/topics/open-source/_index.md b/content/topics/open-source/_index.md index fa7a5610b7..74ed155a4e 100644 --- a/content/topics/open-source/_index.md +++ b/content/topics/open-source/_index.md @@ -6,13 +6,31 @@ slug: "open-source" # Topic Title title: "Open source" +deck: "Making software, source code, and the development process available to the public" # description — keep it short and clear -summary: "" +summary: "Open source development prioritizes using Open Source Software to make source code available for public use. Open Source Software encourages federal government teams to share technical knowledge and encourages a collaborative approach to the review and reuse of source code." aliases: - /2017/06/13/fractal-and-federalist-join-the-u-s-web-design-standards/ +# Set the legislation card title and link +legislation: + title: "Source Code Harmonization And Reuse in Information Technology Act" + link: "https://www.congress.gov/bill/118th-congress/house-bill/9566" + +# Featured community to display at the top of the page +featured_communities: + - "web-managers-forum" + - "web-analytics-and-optimization" + +# Curated list of content, can be internal or external links +featured_links: + title: "Open source: Essential knowledge" + resources: + - title: "18F Open Source Policy" + summary: "Published open source policy guidelines from the 18F service delivery team." + href: "https://18f.gsa.gov/open-source-policy/" # Weight weight: 2 diff --git a/content/topics/product-and-project-management/_index.md b/content/topics/product-and-project-management/_index.md index 2b7d8f0742..06475d3d89 100644 --- a/content/topics/product-and-project-management/_index.md +++ b/content/topics/product-and-project-management/_index.md @@ -6,9 +6,10 @@ slug: "product-and-project-management" # Topic Title title: "Product and project management" +deck: "Strong product and project management steer federal agencies to successful service delivery." # description — keep it short and clear -summary: "" +summary: "Effective product and project management practices are cornerstones of success for federal agencies. They streamline resource allocation, mitigate risk, and ensure impactful delivery of essential digital services." aliases: - /topics/cio/ @@ -26,6 +27,44 @@ aliases: # Weight weight: 2 + +# Set the legislation card title and link +legislation: + title: "Program Management Improvement Accountability Act and OMB M-18-19" + link: "https://digital.gov/resources/requirements-for-improving-the-management-of-federal-programs-and-projects/" + +# Featured resource at the top of the page +featured_resources: + resources: + - title: "Project Manager’s Guidebook" + summary: "Find practical concepts, best practices, and useful tools and templates for effective project management." + link: "https://www.fai.gov/content/fai-project-manager%E2%80%99s-guidebook" + +# Featured community to display at the top of the page +featured_communities: + - "web-managers-forum" + - "federal-program-and-project-management-fedpm" + +# Curated list of content, can be internal or external links +featured_links: + title: "Product and project management: Essential knowledge" + resources: + - title: "Federal Acquisition Certification for program and project managers" + summary: "Explore training for acquisition program and project management professionals." + href: "https://www.fai.gov/certification/fac-ppm" + - title: "Interpretive Guidance for Project Manager Positions (PDF, 653 KB, 26 pages)" + summary: "Find guidance for attracting, hiring, and retaining project managers." + href: "https://www.opm.gov/policy-data-oversight/classification-qualifications/reference-materials/interpretive-guidance-for-project-manager-positions.pdf" + - title: "Who is your website manager?" + summary: "Establish accountability in federal website management." + href: "https://digital.gov/2023/03/24/who-is-your-website-manager/" + - title: "The 18F Guide to Agile" + summary: "Understand the 18F approach to the fundamentals of Agile." + href: "https://guides.18f.gov/agile/" + - title: "Performance.gov" + summary: "Access current and past progress for improving federal government performance and accountability to the American public." + href: "https://www.performance.gov/" + # For more information on managing topics, # see https://github.com/GSA/digitalgov.gov/wiki --- \ No newline at end of file diff --git a/content/topics/research/_index.md b/content/topics/research/_index.md index 3f9a9925ad..7b68153c1b 100644 --- a/content/topics/research/_index.md +++ b/content/topics/research/_index.md @@ -6,9 +6,10 @@ slug: "research" # Topic Title title: "Research" +deck: "Use thoughtful exploration and learning to support continuous, strategic decision-making" # description — keep it short and clear -summary: "" +summary: "Research is an important tool to help you understand real user needs, behaviors, and experiences. By using tools like surveys, analytics, and interviews, you can make informed decisions on products, programs, and projects." aliases: - /topics/18f-methods/ @@ -23,6 +24,39 @@ aliases: # Weight weight: 2 +# Set the legislation card title and link +legislation: + title: "Executive Order 14058 and OMB Circular A-11, Section 280" + link: "https://digital.gov/resources/requirements-for-transforming-federal-customer-experience-and-service-delivery/" + +# Featured resource to display at the top of the page +featured_resources: + resources: + - link: "guides/hcd/" + +# Featured community to display at the top of the page +featured_communities: + - "user-experience" + - "web-analytics-and-optimization" + +# Curated list of content, can be internal or external links +featured_links: + title: "Research: Essential knowledge" + resources: + - title: "Unsolicited data: A valuable resource for digital customer experience enhancement" + summary: "Learn how user-initiated feedback can help you shape your customer experience approach." + href: "https://digital.gov/2024/06/25/unsolicited-data-a-valuable-resource-for-digital-customer-experience-enhancement/" + - title: "18F User Experience Guide: Research" + summary: "Find information about conducting ethical, inclusive, and unbiased research with people from start to finish." + href: "https://guides.18f.gov/ux-guide/research/" + - title: "A guide to the Paperwork Reduction Act" + summary: "Explore common questions related to the Paperwork Reduction Act, a law governing how federal agencies collect information from the public." + href: "https://pra.digital.gov" + - title: "Uncovering impactful solutions through user research" + summary: "Understand the needs and behaviors of your users so you can develop a product or service that supports them." + href: "https://digital.gov/2024/10/04/uncovering-impactful-solutions-through-user-research/ " + # For more information on managing topics, # see https://github.com/GSA/digitalgov.gov/wiki ---- \ No newline at end of file + +--- diff --git a/content/topics/robotic-process-automation/_index.md b/content/topics/robotic-process-automation/_index.md index bf720e0c50..801c61e31e 100644 --- a/content/topics/robotic-process-automation/_index.md +++ b/content/topics/robotic-process-automation/_index.md @@ -6,15 +6,36 @@ slug: "robotic-process-automation" # Topic Title title: "Robotic process automation" +deck: "Leverage more efficient, modernized technology in government" # description — keep it short and clear -summary: "" +summary: "Robotic process automation (RPA) technologies can automate repetitive, rules-based tasks. They can be used to rapidly design, test, and deploy automations and reduce low-value work in an organization." aliases: - /topics/rpa/ # Weight weight: 2 + +# Featured resource to display at the top of the page +featured_resources: + resources: + - link: "guides/rpa/" + +# Featured community to display at the top of the page +featured_communities: + - "web-managers-forum" + - "rpa-community" + +# Curated list of content, can be internal or external links +featured_links: + title: "Robotic process automation: Essential knowledge" + resources: + - title: "5 tips for implementing citizen development in your RPA program" + summary: "Explore best practices for federal robotic process automation programs looking to operationalize citizen developers." + href: "https://digital.gov/2021/08/16/5-tips-for-implementing-citizen-development-in-your-rpa-program/" + + # For more information on managing topics, # see https://github.com/GSA/digitalgov.gov/wiki --- diff --git a/themes/digital.gov/layouts/guides/single.html b/themes/digital.gov/layouts/guides/single.html index cca3374f15..dc3c35a84e 100644 --- a/themes/digital.gov/layouts/guides/single.html +++ b/themes/digital.gov/layouts/guides/single.html @@ -8,7 +8,7 @@ {{- $guideData = index $.Site.Data.guidenav (.Params.guide) -}} {{ end }} {{- if $guideData.showInPageNav -}} -
+
diff --git a/themes/digital.gov/layouts/partials/core/guides/guide-menu-bar.html b/themes/digital.gov/layouts/partials/core/guides/guide-menu-bar.html index 19a2410ce9..9bc00570a5 100644 --- a/themes/digital.gov/layouts/partials/core/guides/guide-menu-bar.html +++ b/themes/digital.gov/layouts/partials/core/guides/guide-menu-bar.html @@ -15,39 +15,39 @@
- +
-
diff --git a/themes/digital.gov/src/js/guide-menu-bar.js b/themes/digital.gov/src/js/guide-menu-bar.js index caa9e1d295..b0a8719b5d 100644 --- a/themes/digital.gov/src/js/guide-menu-bar.js +++ b/themes/digital.gov/src/js/guide-menu-bar.js @@ -1,15 +1,20 @@ // Uses manual breakpoints because USWDS breakpoints are not accessible within JS -const deviceBreakpoint = 480; -const menuBarScrollOffsetMobile = 150; -const menuBarScrollOffsetFull = 320; -const menuBarScrollOffsetDefault = 30; +const menuBarScrollOffsetDefault = 600; let menuBarLinks = null; let menuBarImage = null; +let menuBarContainer = null; +let guideContent = null; +let guideContainer = null; +const guideSideNav = document.querySelector(".dg-guide__nav"); const menuBar = document.querySelector(".dg-guide__menu-bar"); + if (menuBar) { menuBarLinks = menuBar.querySelector(".dg-guide__menu-bar-links"); menuBarImage = menuBar.querySelector(".dg-guide__menu-bar-image-container"); + menuBarContainer = menuBar.querySelector(".dg-guide__menu-bar-container"); + guideContent = document.querySelector(".dg-guide__content"); + guideContainer = document.querySelector(".dg-guide__container"); } // Scroll the guide menu bar so that the currently selected item is in view @@ -19,25 +24,60 @@ function scrollMenuBar(offset) { menuBarLinks.scrollLeft = currentItem.offsetLeft - offset; } +/** + * Dynamically adjust the padding on the menu bar links to keep + * in alignment with dg-guide__content and HCD guides dg-guide__container + * */ +function adjustMenuPadding() { + let container = null; + if (guideSideNav) { + container = guideContainer; + } else { + container = guideContent; + } + + const containerStyles = window.getComputedStyle(container); + const containerMarginLeft = parseFloat(containerStyles.marginLeft); + const containerPaddingLeft = parseFloat(containerStyles.paddingLeft); + + // Get the width of the sibling element + const menuBarImageStyles = window.getComputedStyle(menuBarImage); + const menuBarMarginLeft = parseFloat(menuBarImageStyles.marginLeft); + const menuBarMarginRight = parseFloat(menuBarImageStyles.marginRight); + + const menuBarImageOffsetWidth = menuBarImage.offsetWidth; + const menuBarImageWidth = + menuBarMarginLeft + menuBarMarginRight + menuBarImageOffsetWidth; + const containerMargin = containerMarginLeft + containerPaddingLeft; + + // Calculate the new padding-left for the menu + const newPaddingLeft = containerMargin - menuBarImageWidth; + menuBarLinks.style.paddingLeft = `${newPaddingLeft}px`; +} + // Handler for intersection events between the menu bar and the window function intersection(e) { // Check if menu bar intersected the top of the page if (!e.isIntersecting && e.boundingClientRect.top < 1) { menuBar.classList.add("sticky"); + menuBarContainer.classList.remove( + "grid-container", + "grid-container-desktop" + ); + menuBarImage.removeAttribute("hidden"); menuBarImage.setAttribute("tabindex", "0"); - - // Check if viewing on mobile device - if (window.innerWidth < deviceBreakpoint) { - scrollMenuBar(menuBarScrollOffsetMobile); - } else { - scrollMenuBar(menuBarScrollOffsetFull); - } + // call function to reset the menubar when menuBarImage is displayed + adjustMenuPadding(); + window.addEventListener("resize", adjustMenuPadding); // Menu bar is no longer intersecting } else { menuBarImage.setAttribute("hidden", ""); menuBarImage.setAttribute("tabindex", "-1"); + menuBarLinks.style.paddingLeft = 0; menuBar.classList.remove("sticky"); + window.removeEventListener("resize", adjustMenuPadding); + menuBarContainer.classList.add("grid-container", "grid-container-desktop"); scrollMenuBar(menuBarScrollOffsetDefault); } } @@ -55,3 +95,5 @@ document.addEventListener("DOMContentLoaded", () => { } scrollMenuBar(false); }); + +// Adjust padding when the window resizes diff --git a/themes/digital.gov/src/scss/new/guides/_guide-content.scss b/themes/digital.gov/src/scss/new/guides/_guide-content.scss index 75c647c3cc..4bf4dd1711 100644 --- a/themes/digital.gov/src/scss/new/guides/_guide-content.scss +++ b/themes/digital.gov/src/scss/new/guides/_guide-content.scss @@ -2,6 +2,10 @@ .dg-guide__container { display: flex; + + .dg-guide__menu-bar-links { + // padding-left: calc(50vw - 36rem); + } } .dg-guide__content { diff --git a/themes/digital.gov/src/scss/new/guides/_guide-menu-bar.scss b/themes/digital.gov/src/scss/new/guides/_guide-menu-bar.scss index 7bd001f8aa..5f94d6befb 100644 --- a/themes/digital.gov/src/scss/new/guides/_guide-menu-bar.scss +++ b/themes/digital.gov/src/scss/new/guides/_guide-menu-bar.scss @@ -1,24 +1,27 @@ @use "uswds-core" as *; +// nav + // Styles the desktop horizontal menu bar .dg-guide__menu-bar { @include u-border-y("1px", "gray-cool-30", "solid"); @include u-z(200); - align-items: center; background-color: color("gray-10"); height: units(10); - justify-content: center; position: sticky; top: -1px; white-space: nowrap; - @include at-media("mobile-lg") { + &-container { display: flex; + height: 100%; + width: 100%; } &-image-container { flex-shrink: 0; - margin: 0 units(3); + margin-left: units(3); + margin-right: units(3); a { text-decoration: none; @@ -30,12 +33,20 @@ } &-links { + align-items: center; + display: flex; + flex-direction: row; + height: 100%; + justify-content: flex-start; // Fade out overflowing items when scrolling - mask: linear-gradient(90deg, #0000, #000 5% 95%, #0000); + // mask: linear-gradient(90deg, #0000, #000 1rem 95%, #0000); overflow-x: scroll; overflow-y: hidden; - padding: 0 units(3); scrollbar-width: none; + + @media (max-width: 87.5rem) { + // padding-left: calc(50vw - 36rem); + } } &-links::-webkit-scrollbar { @@ -43,10 +54,11 @@ } .dg-guide__menu-bar-link { + border-bottom: units(0.5) solid transparent; color: color("ink"); font-size: size("sans", "md"); font-weight: font-weight("light"); - margin: 0 units(3); + margin-right: units(5); text-decoration: none; &:hover { @@ -60,10 +72,14 @@ } &.sticky { - justify-content: space-evenly; - + @include at-media("mobile-lg") { + align-items: center; + display: flex; + justify-content: left; + } .dg-guide__menu-bar-image-container { align-items: flex-end; + align-self: center; display: flex; } } diff --git a/themes/digital.gov/src/scss/new/guides/_guide-nav.scss b/themes/digital.gov/src/scss/new/guides/_guide-nav.scss index e314efcf6b..23c2effdae 100644 --- a/themes/digital.gov/src/scss/new/guides/_guide-nav.scss +++ b/themes/digital.gov/src/scss/new/guides/_guide-nav.scss @@ -3,7 +3,7 @@ .dg-guide__nav-container { display: none; flex-shrink: 0; - margin: units(5) units(2) units(0) units(2); + margin-top: units(7); position: sticky; top: units(15); width: 10rem; @@ -13,7 +13,7 @@ } @include at-media("desktop") { - margin: units(5); + margin-top: units(7); width: 15rem; } diff --git a/themes/digital.gov/src/scss/new/shortcodes/_note.scss b/themes/digital.gov/src/scss/new/shortcodes/_note.scss index 791c10f0fd..b6b5c38aab 100644 --- a/themes/digital.gov/src/scss/new/shortcodes/_note.scss +++ b/themes/digital.gov/src/scss/new/shortcodes/_note.scss @@ -56,7 +56,7 @@ margin-bottom: units(0.5); } } - + // For notes within list items li .note { @include u-padding-y("05");