validatedpatterns · abhatt-rh · Jun 23, 2025
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,20 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "meta-viewport": "off",
+    "axe/text-alternatives": [
+      "default",
+      {
+        "document-title": "off"
+      }
+    ],
+    "axe/language": [
+      "default",
+      {
+        "html-has-lang": "off"
+      }
+    ]
+  }
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <html>
     {{- partial "head.html" . -}}
-    <body>
+    <body{{ with .File }} data-github-file="{{ .Path }}"{{ end }}>
         <div class="pf-c-page">
         {{- partial "header.html" . -}}
         {{- block "main" . }}
         <!-- get all the things from the content files -->
         {{- end }}
         </div>
         <script src="{{ "js/codeblock.js"  | relURL }}"></script>
+        <script src="{{ "js/select-report-issue-popup.js"  | relURL }}"></script>
     </body>
     <!-- Uncomment when you have sorted out the feedback partials option
         <body>

diff --git a/layouts/partials/select-report-issue-hover.html b/layouts/partials/select-report-issue-hover.html
@@ -0,0 +1,54 @@
+// 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.";
+}
diff --git a/layouts/partials/select-report-issue-popup.html b/layouts/partials/select-report-issue-popup.html
@@ -0,0 +1,54 @@
+// 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.";
+}
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
@@ -1,9 +1,19 @@
 <aside class="pf-c-jump-links pf-m-vertical sticky pf-m-expandable pf-m-non-expandable-on-2xl" aria-label="Table of contents">
   <div class="pf-l-stack pf-m-gutter">
     <div class="pf-l-stack__item pf-u-text-align-right">
-      <a href="https://github.com/validatedpatterns/docs/commits/main/content/{{ .File.Path  }}"><span class="pf-c-icon pf-m-md" title="View page history"><span class="pf-c-icon__content"><i class="fa-solid fa-clock-rotate-left"></i></span></span></a>
-      <a href="https://issues.redhat.com/secure/CreateIssueDetails!init.jspa?pid=12325623&summary={{ .Title }}: %3C+Provide+a+brief+description+of+the+issue+%3E&issuetype=1&priority=10200&components=12365975&priority=10200&components=12365975&description=Link+to+page:+{{ .Permalink }}+%0A+%0A+%3C+Provide+a+detailed+description+of+the+issue+with+link+to+the+docs++%3E"><span class="pf-c-icon pf-m-md" title="File a documentation bug"><span class="pf-c-icon__content"><i class="fa-regular fa-bug"></i></span></span></a>
-    </div>
+    {{ with .File }}
+        {{ $githubRepo := "validatedpatterns/docs" }}
+        {{ $githubBranch := "main" }}
+        {{ $githubFilePath := .Path }}
+        <a href="https://github.com/{{ $githubRepo }}/edit/{{ $githubBranch }}/content/{{ $githubFilePath }}" target="_blank" rel="noopener noreferrer">
+            <span class="pf-c-icon pf-m-md" title="Edit this page">
+                <span class="pf-c-icon__content"><i class="fa-solid fa-pencil"></i></span>
+            </span>
+        </a>
+    {{ end }}
+    <a href="https://github.com/validatedpatterns/docs/commits/main/content/{{ .File.Path }}" target="_blank" rel="noopener noreferrer"><span class="pf-c-icon pf-m-md" title="View page history"><span class="pf-c-icon__content"><i class="fa-solid fa-clock-rotate-left"></i></span></span></a>
+    <a id="report-doc-bug-btn" href="https://jira.example.com/"><span class="pf-c-icon pf-m-md" title="File a documentation bug"><span class="pf-c-icon__content"><i class="fa-regular fa-bug"></i></span></span></a>
+</div>
     <div class="pf-l-stack__item">
       <div class="pf-c-jump-links__header">
         <div class="pf-c-jump-links__label">

diff --git a/static/js/select-report-issue-hover.js b/static/js/select-report-issue-hover.js
@@ -0,0 +1,125 @@
+// 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 <i class="fa-solid fa-bug"></i>'; // 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.