Skip to content

doc: V3 documentation feedback component and API documentation #5450

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.

Sign up for GitHub

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

Merged
Aditi2424 merged 4 commits into from
Jan 2, 2026
Merged

doc: V3 documentation feedback component and API documentation #5450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6a661c0
feat: Add comprehensive V3 documentation with enhanced UI
adishaa Dec 31, 2025
ce413a7
feat: Add comprehensive feedback component with light theme
adishaa Jan 1, 2026
77c229f
Add API documentation using autodoc and autosummary
adishaa Jan 2, 2026
7102981
Merge branch 'v3docs' into v3-documentation-update
Aditi2424 Jan 2, 2026
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
195 changes: 195 additions & 0 deletions docs/_static/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,201 @@
font-size: 0.9em;
}

/* Feedback Component */
.feedback-container {
border-top: 1px solid #e1e5e9;
margin-top: 40px;
padding: 24px;
background-color: #f8f9fa;
border-radius: 8px;
border: 1px solid #e1e5e9;
}

.feedback-question {
font-size: 20px;
font-weight: 500;
color: #374151;
margin-bottom: 20px;
text-align: left;
}

.feedback-buttons {
display: flex;
justify-content: flex-start;
gap: 12px;
}

.feedback-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: white;
color: #6b7280;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}

.feedback-btn:hover {
border-color: #9ca3af;
background: #f9fafb;
}

.feedback-btn.selected {
border-color: #3b82f6;
background: #eff6ff;
color: #1d4ed8;
}

.feedback-btn svg {
width: 16px;
height: 16px;
}

.feedback-thanks {
display: none;
color: #059669;
font-size: 14px;
text-align: center;
margin-top: 16px;
}

/* Feedback Options */
.feedback-options {
display: none;
margin-top: 20px;
}

.feedback-options-title {
font-size: 16px;
font-weight: 500;
color: #374151;
margin-bottom: 16px;
}

.required {
color: #ff6b6b;
}

.feedback-checkboxes {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}

.feedback-checkbox {
display: flex;
align-items: center;
cursor: pointer;
color: #374151;
font-size: 14px;
position: relative;
padding-left: 32px;
}

.feedback-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

.checkmark {
position: absolute;
left: 0;
top: 2px;
height: 18px;
width: 18px;
background-color: transparent;
border: 2px solid #6b7280;
border-radius: 3px;
}

.feedback-checkbox:hover input ~ .checkmark {
border-color: #9ca3af;
}

.feedback-checkbox input:checked ~ .checkmark {
background-color: #3b82f6;
border-color: #3b82f6;
}

.checkmark:after {
content: "";
position: absolute;
display: none;
}

.feedback-checkbox input:checked ~ .checkmark:after {
display: block;
}

.feedback-checkbox .checkmark:after {
left: 5px;
top: 2px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

.feedback-more {
display: flex;
flex-direction: column;
gap: 12px;
}

.feedback-more-title {
font-size: 16px;
font-weight: 500;
color: #374151;
}

.feedback-textarea {
padding: 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
resize: vertical;
min-height: 80px;
font-family: inherit;
background-color: #ffffff;
color: #374151;
}

.feedback-textarea::placeholder {
color: #6b7280;
}

.feedback-textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.feedback-submit-btn {
padding: 10px 20px;
background: #3b82f6;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
align-self: flex-start;
transition: background 0.2s;
}

.feedback-submit-btn:hover {
background: #2563eb;
}

header {
background-color: white;

Expand Down
127 changes: 127 additions & 0 deletions docs/_static/feedback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
// Feedback functionality
document.addEventListener('DOMContentLoaded', function() {
// Add feedback component to the very bottom of each page
const article = document.querySelector('article[role="main"]') || document.querySelector('.bd-article') || document.querySelector('main');
if (article) {
const feedbackHTML = `
<div class="feedback-container">
<div class="feedback-question">Was this page helpful?</div>
<div class="feedback-buttons">
<button class="feedback-btn" data-feedback="yes">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558-.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z"/>
</svg>
Yes
</button>
<button class="feedback-btn" data-feedback="no">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M15.73 5.25h1.035A7.465 7.465 0 0118 9.375a7.465 7.465 0 01-1.235 4.125h-.148c-.806 0-1.534.446-2.031 1.08a9.04 9.04 0 01-2.861 2.4c-.723.384-1.35.956-1.653 1.715a4.498 4.498 0 00-.322 1.672V21a.75.75 0 01-.75.75 2.25 2.25 0 01-2.25-2.25c0-1.152.26-2.243.723-3.218C7.74 15.724 7.366 15 6.748 15H3.622c-1.026 0-1.945-.694-2.054-1.715A12.134 12.134 0 011.5 12c0-2.848.992-5.464 2.649-7.521C4.537 3.997 5.136 3.75 5.754 3.75H9.77a4.5 4.5 0 011.423.23l3.114 1.04a4.5 4.5 0 001.423.23zM21.669 14.023c.536-1.362.831-2.845.831-4.398 0-1.22-.182-2.398-.52-3.507-.26-.85-1.084-1.368-1.973-1.368H19.1c-.445 0-.72.498-.523.898.591 1.2.924 2.55.924 3.977a8.958 8.958 0 01-1.302 4.666c-.245.403.028.959.5.959h1.053c.832 0 1.612-.453 1.918-1.227z"/>
</svg>
No
</button>
</div>
<div class="feedback-options">
<div class="feedback-options-title">What is the reason for your feedback? <span class="required">*</span></div>
<div class="feedback-checkboxes">
<label class="feedback-checkbox">
<input type="checkbox" data-reason="hard-to-understand">
<span class="checkmark"></span>
Content is hard to understand
</label>
<label class="feedback-checkbox">
<input type="checkbox" data-reason="code-doesnt-work">
<span class="checkmark"></span>
Procedure or code doesn't work
</label>
<label class="feedback-checkbox">
<input type="checkbox" data-reason="couldnt-find">
<span class="checkmark"></span>
Couldn't find what I need
</label>
<label class="feedback-checkbox">
<input type="checkbox" data-reason="out-of-date">
<span class="checkmark"></span>
Out of date/obsolete
</label>
<label class="feedback-checkbox">
<input type="checkbox" data-reason="other">
<span class="checkmark"></span>
Other
</label>
</div>
<div class="feedback-more">
<div class="feedback-more-title">Tell us more.</div>
<textarea class="feedback-textarea" placeholder="Please provide feedback on how we can improve this content. If applicable, provide the first part of the sentence or string at issue."></textarea>
<button class="feedback-submit-btn">Submit</button>
</div>
</div>
<div class="feedback-thanks">Thank you for your feedback!</div>
</div>
`;

article.insertAdjacentHTML('beforeend', feedbackHTML);

// Add click handlers
const feedbackBtns = document.querySelectorAll('.feedback-btn');
const thanksMessage = document.querySelector('.feedback-thanks');
const feedbackOptions = document.querySelector('.feedback-options');
const checkboxes = document.querySelectorAll('.feedback-checkbox input[type="checkbox"]');
const submitBtn = document.querySelector('.feedback-submit-btn');
const textarea = document.querySelector('.feedback-textarea');

feedbackBtns.forEach(btn => {
btn.addEventListener('click', function() {
const feedback = this.dataset.feedback;

// Remove selected class from all buttons
feedbackBtns.forEach(b => b.classList.remove('selected'));

// Add selected class to clicked button
this.classList.add('selected');

if (feedback === 'yes') {
// Hide options and show thanks
feedbackOptions.style.display = 'none';
thanksMessage.style.display = 'block';

// Send positive feedback
if (typeof gtag !== 'undefined') {
gtag('event', 'page_feedback', {
'feedback_value': 'positive',
'page_location': window.location.href
});
}
} else {
// Show options for negative feedback
feedbackOptions.style.display = 'block';
thanksMessage.style.display = 'none';
}
});
});

// Handle submit button
submitBtn.addEventListener('click', function() {
const selectedReasons = [];
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
selectedReasons.push(checkbox.dataset.reason);
}
});
const additionalFeedback = textarea.value.trim();

// Hide options and show thanks
feedbackOptions.style.display = 'none';
thanksMessage.style.display = 'block';

// Send negative feedback with details
if (typeof gtag !== 'undefined') {
gtag('event', 'page_feedback', {
'feedback_value': 'negative',
'feedback_reasons': selectedReasons,
'feedback_details': additionalFeedback,
'page_location': window.location.href
});
}
});
}
});
9 changes: 9 additions & 0 deletions docs/api/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,12 @@ API Reference
=============

Complete API documentation for SageMaker Python SDK V3.

.. toctree::
:maxdepth: 2
:caption: API Reference

sagemaker_core
sagemaker_train
sagemaker_serve
sagemaker_mlops
Loading