diff --git a/.github/ISSUE_TEMPLATE/docs-feedback.yml b/.github/ISSUE_TEMPLATE/docs-feedback.yml new file mode 100644 index 000000000..f41492d1a --- /dev/null +++ b/.github/ISSUE_TEMPLATE/docs-feedback.yml @@ -0,0 +1,47 @@ +name: Create a documentation issue. +description: | + ⛔ This template is connected to the Create a documentation issue button on the bottom of every `learn` and `patterns` page on the live site. It automatically fills in several fields for you. Don't use for other purposes. ⛔ +body: + - type: markdown + attributes: + value: "## Issue information" + - type: markdown + attributes: + value: Select the issue type, and describe the issue in the text box below. Add as much detail as needed to help us resolve the issue. + - type: dropdown + id: issue-type + attributes: + label: Type of issue + options: + - Typo + - Code doesn't work + - Missing information + - Outdated article + - Thank you + - Other (describe below) + validations: + required: true + - type: textarea + id: feedback + validations: + required: true + attributes: + label: Description + - type: markdown + attributes: + value: "## 🚧 Page information 🚧" + - type: markdown + attributes: + value: "*Don't modify the following fields*. They are automatically filled in for you. Doing so will disconnect your issue from the affected page. *Don't edit them*." + - type: input + id: pageUrl + validations: + required: true + attributes: + label: Page URL + - type: input + id: contentSourceUrl + validations: + required: true + attributes: + label: Content source URL diff --git a/.hintrc b/.hintrc deleted file mode 100644 index e30e55803..000000000 --- a/.hintrc +++ /dev/null @@ -1,20 +0,0 @@ -{ - "extends": [ - "development" - ], - "hints": { - "meta-viewport": "off", - "axe/text-alternatives": [ - "default", - { - "document-title": "off" - } - ], - "axe/language": [ - "default", - { - "html-has-lang": "off" - } - ] - } -} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4264f4184..6e828cd91 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,7 +1,7 @@ {{- partial "head.html" . -}} - +
{{- partial "header.html" . -}} {{- block "main" . }} @@ -9,7 +9,6 @@ {{- end }}
- + {{ partial "page-navigation.html" . }} + + +
+
+ + {{ if .File }} + + + Edit this page + + + + + Open a documentation issue + + {{ end }} +
+
{{ partial "toc.html" . }} diff --git a/layouts/partials/page-navigation.html b/layouts/partials/page-navigation.html new file mode 100644 index 000000000..b52805d28 --- /dev/null +++ b/layouts/partials/page-navigation.html @@ -0,0 +1,157 @@ +{{/* Page Navigation Partial */}} +{{ $currentPage := . }} +{{ $nextPage := false }} +{{ $prevPage := false }} + +{{ if eq .Section "learn" }} + {{/* For learn section, use the menu system to get the correct order */}} + {{ $allMenuItems := slice }} + {{ range .Site.Menus.learn }} + {{ if .HasChildren }} + {{/* Add parent */}} + {{ $allMenuItems = $allMenuItems | append . }} + {{/* Add children */}} + {{ range .Children }} + {{ $allMenuItems = $allMenuItems | append . }} + {{ end }} + {{ else }} + {{/* Add standalone item */}} + {{ $allMenuItems = $allMenuItems | append . }} + {{ end }} + {{ end }} + + {{/* Find current page index in menu items */}} + {{ $currentIndex := 0 }} + {{ range $index, $item := $allMenuItems }} + {{ if eq $item.URL $currentPage.RelPermalink }} + {{ $currentIndex = $index }} + {{ end }} + {{ end }} + + {{/* Get previous and next pages */}} + {{ if gt $currentIndex 0 }} + {{ $prevItem := index $allMenuItems (sub $currentIndex 1) }} + {{ $prevPage = .Site.GetPage $prevItem.URL }} + {{ end }} + {{ if lt $currentIndex (sub (len $allMenuItems) 1) }} + {{ $nextItem := index $allMenuItems (add $currentIndex 1) }} + {{ $nextPage = .Site.GetPage $nextItem.URL }} + {{ end }} + +{{ else }} + {{/* For other sections like patterns, use the page structure */}} + {{ $currentSection := .Section }} + {{ $pages := slice }} + + {{/* For patterns section, we need to get pages from the current pattern's subsection */}} + {{ if eq .Section "patterns" }} + {{/* Check if this is a pattern index page (e.g., /patterns/industrial-edge/_index.md) */}} + {{ if eq .Kind "section" }} + {{/* This is a pattern index page, get all its regular pages and include the index page itself */}} + {{ $pages = .RegularPages }} + {{/* Add the current index page to the list for proper navigation order */}} + {{ $pages = $pages | append . }} + {{ else }} + {{/* This is a regular page within a pattern, get pages from the parent section */}} + {{ $parentPage := .Parent }} + {{ if $parentPage }} + {{/* Get all regular pages in this pattern's directory and include the parent index page */}} + {{ $pages = $parentPage.RegularPages }} + {{ $pages = $pages | append $parentPage }} + {{ end }} + {{ end }} + {{ else }} + {{/* For other sections, use the traditional approach */}} + {{ $section := .Site.GetPage "section" .Section }} + {{ $pages = where $section.RegularPages "Section" .Section }} + {{ end }} + + {{/* Sort pages by weight, then by title */}} + {{ $sortedPages := sort $pages ".Params.weight" "asc" }} + {{ if not $sortedPages }} + {{ $sortedPages = sort $pages ".Title" "asc" }} + {{ end }} + + {{ $currentIndex := 0 }} + {{/* Find current page index in the sorted section */}} + {{ range $index, $page := $sortedPages }} + {{ if eq $page.RelPermalink $.RelPermalink }} + {{ $currentIndex = $index }} + {{ end }} + {{ end }} + + {{/* Get previous and next pages */}} + {{ if gt $currentIndex 0 }} + {{ $prevPage = index $sortedPages (sub $currentIndex 1) }} + {{ end }} + {{ if lt $currentIndex (sub (len $sortedPages) 1) }} + {{ $nextPage = index $sortedPages (add $currentIndex 1) }} + {{ end }} +{{ end }} + +{{/* Render navigation only if there are previous or next pages */}} +{{ if or $prevPage $nextPage }} +
+ +
+{{ end }} diff --git a/layouts/partials/patterns-index.html b/layouts/partials/patterns-index.html index 8aa3c6baa..ee1abb4b3 100644 --- a/layouts/partials/patterns-index.html +++ b/layouts/partials/patterns-index.html @@ -77,6 +77,33 @@

{{ .Title }}

{{ .Content }} + + + {{ partial "page-navigation.html" . }} + + +
+
+ + {{ if .File }} + + + Edit this page + + + + + Open a documentation issue + + {{ end }} +
+
{{ partial "toc.html" . }} diff --git a/layouts/partials/select-report-issue-hover.html b/layouts/partials/select-report-issue-hover.html deleted file mode 100644 index c4281b695..000000000 --- a/layouts/partials/select-report-issue-hover.html +++ /dev/null @@ -1,54 +0,0 @@ -// static/js/bug-reporter.js (or wherever you prefer to store static assets) - -document.addEventListener('mouseup', function() { - const selectedText = window.getSelection().toString().trim(); - - if (selectedText.length > 0) { - // You might want to add a small button or popup here instead of direct confirmation - // For simplicity, we'll keep the confirmation for now. - - const currentPageUrl = window.location.href; - const githubFilePath = getGitHubFilePath(); // This will now be more accurate for Hugo - - const issueTitle = `Bug Report: Issue on "${selectedText.substring(0, 50).replace(/\n/g, ' ')}..."`; - let issueBody = ` -**Description of the issue:** -\`\`\` -${selectedText} -\`\`\` - ---- -**Context:** -- **Page URL:** ${currentPageUrl} -- **GitHub Source File:** ${githubFilePath} - `; - - const encodedTitle = encodeURIComponent(issueTitle); - const encodedBody = encodeURIComponent(issueBody); - - const githubRepo = 'validatedpatterns/docs'; // Your GitHub repository - const githubIssueUrl = `https://github.com/${githubRepo}/issues/new?title=${encodedTitle}&body=${encodedBody}`; - - const confirmation = confirm("Do you want to report this as a bug on GitHub for the selected text?"); - if (confirmation) { - window.open(githubIssueUrl, '_blank'); - } - } -}); - - -// Hugo-specific function to get the GitHub file path -function getGitHubFilePath() { - // This assumes you've added a data-github-file attribute to your body or a container. - const bodyElement = document.querySelector('body'); - if (bodyElement && bodyElement.dataset.githubFile) { - // Construct the full GitHub blob URL - // Assuming your source files are in the 'content' directory of your repo - // And you're using the 'main' branch - const repoBaseUrl = 'https://github.com/validatedpatterns/docs/blob/main/'; - return repoBaseUrl + bodyElement.dataset.githubFile; - } - - // Fallback if the data attribute isn't found (shouldn't happen with Hugo setup) - return "Could not determine source file automatically. Please specify if known."; -} \ No newline at end of file diff --git a/layouts/partials/select-report-issue-popup.html b/layouts/partials/select-report-issue-popup.html deleted file mode 100644 index c4281b695..000000000 --- a/layouts/partials/select-report-issue-popup.html +++ /dev/null @@ -1,54 +0,0 @@ -// static/js/bug-reporter.js (or wherever you prefer to store static assets) - -document.addEventListener('mouseup', function() { - const selectedText = window.getSelection().toString().trim(); - - if (selectedText.length > 0) { - // You might want to add a small button or popup here instead of direct confirmation - // For simplicity, we'll keep the confirmation for now. - - const currentPageUrl = window.location.href; - const githubFilePath = getGitHubFilePath(); // This will now be more accurate for Hugo - - const issueTitle = `Bug Report: Issue on "${selectedText.substring(0, 50).replace(/\n/g, ' ')}..."`; - let issueBody = ` -**Description of the issue:** -\`\`\` -${selectedText} -\`\`\` - ---- -**Context:** -- **Page URL:** ${currentPageUrl} -- **GitHub Source File:** ${githubFilePath} - `; - - const encodedTitle = encodeURIComponent(issueTitle); - const encodedBody = encodeURIComponent(issueBody); - - const githubRepo = 'validatedpatterns/docs'; // Your GitHub repository - const githubIssueUrl = `https://github.com/${githubRepo}/issues/new?title=${encodedTitle}&body=${encodedBody}`; - - const confirmation = confirm("Do you want to report this as a bug on GitHub for the selected text?"); - if (confirmation) { - window.open(githubIssueUrl, '_blank'); - } - } -}); - - -// Hugo-specific function to get the GitHub file path -function getGitHubFilePath() { - // This assumes you've added a data-github-file attribute to your body or a container. - const bodyElement = document.querySelector('body'); - if (bodyElement && bodyElement.dataset.githubFile) { - // Construct the full GitHub blob URL - // Assuming your source files are in the 'content' directory of your repo - // And you're using the 'main' branch - const repoBaseUrl = 'https://github.com/validatedpatterns/docs/blob/main/'; - return repoBaseUrl + bodyElement.dataset.githubFile; - } - - // Fallback if the data attribute isn't found (shouldn't happen with Hugo setup) - return "Could not determine source file automatically. Please specify if known."; -} \ No newline at end of file diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html index 385bd3eb5..2558d477e 100644 --- a/layouts/partials/toc.html +++ b/layouts/partials/toc.html @@ -1,26 +1,8 @@ diff --git a/layouts/patterns/single.html b/layouts/patterns/single.html index 2781c5bee..1b637936e 100644 --- a/layouts/patterns/single.html +++ b/layouts/patterns/single.html @@ -10,6 +10,33 @@
{{ .Content }} + + + {{ partial "page-navigation.html" . }} + + +
+
+ + {{ if .File }} + + + Edit this page + + + + + Open a documentation issue + + {{ end }} +
+
{{ partial "toc.html" . }}
diff --git a/static/css/custom.css b/static/css/custom.css index 05d44d711..4eca65c8f 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -50,6 +50,19 @@ h3 { margin-bottom: 1rem; } +/* Page Navigation Styles */ +.page-nav-card { + border: 1px solid #d2d2d2; + border-radius: 3px; + height: auto; + min-height: 80px; + cursor: pointer; +} + +.page-nav-chevron { + color: #6a6e73; +} + /*CODE BLOCKS */ code { diff --git a/static/js/select-report-issue-hover.js b/static/js/select-report-issue-hover.js deleted file mode 100644 index 20f6c6469..000000000 --- a/static/js/select-report-issue-hover.js +++ /dev/null @@ -1,125 +0,0 @@ -// static/js/select-report-issue-hover.js - -let reportButton = null; -let buttonTimeout = null; - -const BUTTON_FADE_DURATION_MS = 6000; // Button disappears after 4 seconds - -function removeReportButton() { // - if (reportButton && reportButton.parentNode) { - reportButton.parentNode.removeChild(reportButton); - reportButton = null; - } - if (buttonTimeout) { - clearTimeout(buttonTimeout); - buttonTimeout = null; - } -} - -function showReportButton(x, y, selectedText) { - removeReportButton(); - - reportButton = document.createElement('button'); - reportButton.id = 'bug-report-button'; - reportButton.className = 'bug-report-button'; - reportButton.innerHTML = 'Report Bug '; // Changed to fa-solid based on your HTML - - // Set position to fixed and max z-index (still good practice) - reportButton.style.position = 'fixed'; - reportButton.style.left = `${x}px`; - reportButton.style.top = `${y - 40}px`; // Adjust Y to place it above selection - reportButton.style.zIndex = '2147483647'; // Highest possible z-index - - // Store selected text and other context data on the button - reportButton.dataset.selectedText = selectedText; - reportButton.dataset.currentPageUrl = window.location.href; - reportButton.dataset.githubFilePath = getGitHubFilePath(); - - // DO NOT attach a click listener directly to the button here. - // The click will be handled by the document listener below. - - document.documentElement.appendChild(reportButton); // Append to HTML element for broadest context - - // Start timeout to remove button if not clicked - buttonTimeout = setTimeout(removeReportButton, BUTTON_FADE_DURATION_MS); -} - -function getGitHubFilePath() { - const bodyElement = document.querySelector('body'); - if (bodyElement && bodyElement.dataset.githubFile) { - const repoBaseUrl = 'https://github.com/validatedpatterns/docs/blob/main/'; - return repoBaseUrl + bodyElement.dataset.githubFile; - } - return "Could not determine source file automatically. Please specify if known."; -} - -// --- NEW EVENT DELEGATION LOGIC --- - -// Listen for clicks on the entire document (or document.body) -// This listener WILL always fire, even if an overlay is present. -document.addEventListener('mouseup', function(event) { // <-- SET BREAKPOINT HERE (Around line 61 in the full code) - const selectedText = window.getSelection().toString().trim(); // <--- ALSO SET A BREAKPOINT ON THIS LINE - // ... -}); - // If a reportButton exists AND the click target is that button (or a child of it, like the icon) - // This uses `contains` to check if the click was *inside* the button's DOM subtree. - if (reportButton && reportButton.contains(event.target)) { - event.preventDefault(); // Prevent any default behavior (like text selection or link following) - event.stopPropagation(); // Stop the event from bubbling up further - - console.log('BUG REPORT BUTTON CLICKED (via event delegation)!'); // For debugging - - // Retrieve data from the button's dataset - const text = reportButton.dataset.selectedText; - const currentPageUrl = reportButton.dataset.currentPageUrl; - const githubFilePath = reportButton.dataset.githubFilePath; - - const issueTitle = `Bug Report: Issue on "${text.substring(0, 50).replace(/\n/g, ' ')}..."`; - let issueBody = ` -**Description of the issue:** -\`\`\` -${text} -\`\`\` - ---- -**Context:** -- **Page URL:** ${currentPageUrl} -- **GitHub Source File:** ${githubFilePath} - `; - - const encodedTitle = encodeURIComponent(issueTitle); - const encodedBody = encodeURIComponent(issueBody); - - const githubRepo = 'validatedpatterns/docs'; // Your GitHub repository - const githubIssueUrl = `https://github.com/${githubRepo}/issues/new?title=${encodedTitle}&body=${encodedBody}`; - - window.open(githubIssueUrl, '_blank'); - removeReportButton(); // Remove button after opening issue - } else { - // If the button exists but the click was NOT on it, remove it (equivalent to mousedown logic) - removeReportButton(); - } -}); - -// Original mouseup listener (remains the same) -document.addEventListener('mouseup', function(event) { - const selectedText = window.getSelection().toString().trim(); - - if (selectedText.length > 0) {// - const selection = window.getSelection(); // - if (selection.rangeCount > 0) { // - const range = selection.getRangeAt(0); - const rect = range.getBoundingClientRect(); - - const x = rect.left + window.scrollX + (rect.width / 2) - 50; - const y = rect.top + window.scrollY; - - showReportButton(x, y, selectedText); // - } - } else { - removeReportButton(); // - } -}); - -// The previous mousedown listener is now essentially replaced by the first part of the new 'click' listener. -// You can remove the old document.addEventListener('mousedown', ...) function if you still have it. \ No newline at end of file diff --git a/static/js/select-report-issue-popup.js b/static/js/select-report-issue-popup.js deleted file mode 100644 index 7f3317829..000000000 --- a/static/js/select-report-issue-popup.js +++ /dev/null @@ -1,112 +0,0 @@ -// static/js/select-report-issue.js (or wherever you prefer to store static assets) - -document.addEventListener('mouseup', function() { - const selectedText = window.getSelection().toString().trim(); - - if (selectedText.length > 0) { - // You might want to add a small button or popup here instead of direct confirmation - // For simplicity, we'll keep the confirmation for now. - - const currentPageUrl = window.location.href; - const githubFilePath = getGitHubFilePath(); // This will now be more accurate for Hugo - - const issueTitle = `Bug Report: Issue on "${selectedText.substring(0, 50).replace(/\n/g, ' ')}..."`; - let issueBody = ` -**Description of the issue:** -\`\`\` -${selectedText} -\`\`\` - ---- -**Context:** -- **Page URL:** ${currentPageUrl} -- **GitHub Source File:** ${githubFilePath} - `; - - const encodedTitle = encodeURIComponent(issueTitle); - const encodedBody = encodeURIComponent(issueBody); - - const githubRepo = 'validatedpatterns/docs'; // Your GitHub repository - const githubIssueUrl = `https://github.com/${githubRepo}/issues/new?title=${encodedTitle}&body=${encodedBody}`; - - const confirmation = confirm("Do you want to create an issue on GitHub for the selected text?"); - if (confirmation) { - window.open(githubIssueUrl, '_blank'); - } - } -}); - - -// Hugo-specific function to get the GitHub file path -function getGitHubFilePath() { - // This assumes you've added a data-github-file attribute to your body or a container. - const bodyElement = document.querySelector('body'); - if (bodyElement && bodyElement.dataset.githubFile) { - // Construct the full GitHub blob URL - // Assuming your source files are in the 'content' directory of your repo - // And you're using the 'main' branch - const repoBaseUrl = 'https://github.com/validatedpatterns/docs/blob/main/'; - return repoBaseUrl + bodyElement.dataset.githubFile; - } - - // Fallback if the data attribute isn't found (shouldn't happen with Hugo setup) - return "Could not determine source file automatically. Please specify if known."; -} - - -// --- Introducing DOMContentLoaded for the Jira Button Logic --- -document.addEventListener('DOMContentLoaded', function() { - // Select the Jira bug button using its NEW ID - const jiraBugButton = document.getElementById('report-doc-bug-btn'); // <--- CHANGED THIS LINE - - if (jiraBugButton) { - console.log("Jira bug button found!", jiraBugButton); // For debugging: confirm it's found - jiraBugButton.removeAttribute('href'); // Remove the original href - - jiraBugButton.addEventListener('click', function(event) { - event.preventDefault(); - event.stopPropagation(); - - let selectedText = window.getSelection().toString().trim(); - if (selectedText.length === 0) { - selectedText = "No specific text was selected. Reporting a general page issue."; - } - - const currentPageUrl = window.location.href; - const githubFilePath = getGitHubFilePath(); - - const issueTitle = `Documentation Bug Report: ${selectedText.substring(0, 70).replace(/\n/g, ' ')}...`; - let issueBody = ` -**Issue Description:** -\`\`\` -${selectedText} -\`\`\` - ---- -**Context:** -- **Page URL:** ${currentPageUrl} -- **GitHub Source File:** ${githubFilePath} - `; - - const encodedTitle = encodeURIComponent(issueTitle); - const encodedBody = encodeURIComponent(issueBody); - - const githubRepo = 'validatedpatterns/docs'; - const githubIssueUrl = `https://github.com/${githubRepo}/issues/new?title=${encodedTitle}&body=${encodedBody}`; - - const confirmation = confirm("Do you want to report this as a documentation bug on GitHub?"); - if (confirmation) { - window.open(githubIssueUrl, '_blank'); - } - }); - } else { - // This warning will now be more accurate if the ID is truly missing/typo'd - console.warn("Jira bug button (ID: 'report-doc-bug-btn') not found."); - } - - // --- Cleanup for previous button (keep this) --- - const existingFloatingButton = document.getElementById('bug-report-button'); - if (existingFloatingButton) { - existingFloatingButton.parentNode.removeChild(existingFloatingButton); - } -}); \ No newline at end of file