Skip to content

Implement "Edit this page" along with "select text to report issue" feature #576

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .hintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"extends": [
"development"
],
"hints": {
"meta-viewport": "off",
"axe/text-alternatives": [
"default",
{
"document-title": "off"
}
],
"axe/language": [
"default",
{
"html-has-lang": "off"
}
]
}
}
3 changes: 2 additions & 1 deletion layouts/_default/baseof.html
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
54 changes: 54 additions & 0 deletions layouts/partials/select-report-issue-hover.html
Original file line number Diff line number Diff line change
@@ -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.";
}
54 changes: 54 additions & 0 deletions layouts/partials/select-report-issue-popup.html
Original file line number Diff line number Diff line change
@@ -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.";
}
16 changes: 13 additions & 3 deletions layouts/partials/toc.html
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
125 changes: 125 additions & 0 deletions static/js/select-report-issue-hover.js
Original file line number Diff line number Diff line change
@@ -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.
Loading