add details tag with full example to code snippets

[titusfortner]

User description

Demo to show an option for how we might improve things. It overflows the tab, so this isn't what we actually want, but looking for feedback on the concept.

---

PR Type

Enhancement

---

Description

• Added a collapsible details tag to display full code examples.

• Improved user experience by showing snippets with an option for full content.

• Enhanced conditional rendering for fragments in code blocks.

---

Changes walkthrough 📝

	Relevant files
Enhancement	gh-codeblock.html Added collapsible full example display for code snippets  website_and_docs/layouts/shortcodes/gh-codeblock.html Added a details tag to display full examples. Introduced a condition to check for URL fragments. Enhanced rendering logic for code snippets and full content. Improved layout with collapsible content for better UX. +9/-3

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[qodo-merge-pro]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Accessibility Concern The details tag should include an aria-label or more descriptive summary text to improve accessibility for screen readers. <details class="mt-2"> <summary>Show full example</summary> <div class="pt-2">{{ highlight $content $language }}</div> </details> Missing Styling The details tag implementation may need additional CSS styling to ensure consistent appearance across browsers and proper integration with the existing design. <details class="mt-2"> <summary>Show full example</summary> <div class="pt-2">{{ highlight $content $language }}</div> </details>

[qodo-merge-pro]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Improve accessibility The details tag should have an accessible name for screen readers. Add an aria-label attribute to improve accessibility. website_and_docs/layouts/shortcodes/gh-codeblock.html [54-59] {{ if $hasFragment }} -<details class="mt-2"> +<details class="mt-2" aria-label="Full code example"> <summary>Show full example</summary> <div class="pt-2">{{ highlight $content $language }}</div> </details> {{ end }} Apply this suggestion Suggestion importance[1-10]: 7 __ Why: Adding an aria-label to the details element is a good accessibility improvement that helps screen reader users understand the purpose of the collapsible section before interacting with it. This enhances the user experience for people with disabilities.	Medium
More

[netlify]

✅ Deploy Preview for selenium-dev ready!

Name	Link
🔨 Latest commit	44faefc
🔍 Latest deploy log	https://app.netlify.com/sites/selenium-dev/deploys/68028fa4ae4fdb000835b863
😎 Deploy Preview	https://deploy-preview-2276--selenium-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[shbenzer]

I like the idea of users being able to get more/the full example w/o having to navigate to github

[titusfortner]

At this point we need to make the bigger decision of whether we're even going to stick with Hugo or move to Docusaurus. :)

[diemol]

I don't see the point of moving to a new tool if we don't resolve the structure we want to have in docs first.