Skip to content

Commit 53b0db0

Browse files
davidberenstein1957davidberenstein1957
committed
Add legacy documentation notice with toggle functionality and styling
1 parent b956fc2 commit 53b0db0

File tree

1 file changed

+151
-0
lines changed

1 file changed

+151
-0
lines changed

‎docs/_templates/page.html‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,157 @@
2525
</div>
2626
{%- endif %}
2727

28+
<!-- Legacy Documentation Notice -->
29+
<style>
30+
#legacy-notice {
31+
background-color: #ff6b6b !important;
32+
border-left: 4px solid #d63031 !important;
33+
margin-bottom: 0 !important;
34+
position: relative !important;
35+
z-index: 1000 !important;
36+
width: 100% !important;
37+
box-sizing: border-box !important;
38+
height: auto !important;
39+
display: block !important;
40+
visibility: visible !important;
41+
opacity: 1 !important;
42+
transition: height 0.3s ease-in-out;
43+
}
44+
#legacy-notice .announcement-content {
45+
color: white;
46+
text-align: center;
47+
padding: 1rem 2rem 1rem 1rem;
48+
margin: 0;
49+
line-height: 1.5;
50+
white-space: normal;
51+
word-wrap: break-word;
52+
overflow-wrap: break-word;
53+
hyphens: auto;
54+
max-width: 100%;
55+
position: relative;
56+
font-size: 1rem;
57+
}
58+
#toggle-legacy-notice {
59+
position: absolute;
60+
top: 50%;
61+
right: 1rem;
62+
transform: translateY(-50%);
63+
background: rgba(255, 255, 255, 0.15);
64+
border: 1px solid rgba(255, 255, 255, 0.25);
65+
border-radius: 3px;
66+
color: white;
67+
font-size: 0.8rem;
68+
cursor: pointer;
69+
padding: 0.3rem 0.5rem;
70+
line-height: 1;
71+
opacity: 0.8;
72+
transition: all 0.2s ease;
73+
font-weight: 400;
74+
min-width: 24px;
75+
text-align: center;
76+
}
77+
#toggle-legacy-notice:hover {
78+
background: rgba(255, 255, 255, 0.25);
79+
border-color: rgba(255, 255, 255, 0.4);
80+
opacity: 1;
81+
}
82+
#legacy-notice-content, #legacy-notice-content-2 {
83+
display: block !important;
84+
transition: all 0.3s ease-in-out;
85+
opacity: 1;
86+
max-height: none;
87+
overflow: visible;
88+
}
89+
#legacy-notice.collapsed #legacy-notice-content,
90+
#legacy-notice.collapsed #legacy-notice-content-2 {
91+
max-height: 0 !important;
92+
opacity: 0;
93+
margin: 0;
94+
padding: 0;
95+
overflow: hidden;
96+
}
97+
@media (max-width: 600px) {
98+
#legacy-notice .announcement-content {
99+
padding: 0.75rem 1rem;
100+
font-size: 0.98rem;
101+
text-align: center;
102+
}
103+
#toggle-legacy-notice {
104+
top: 50%;
105+
right: 0.75rem;
106+
transform: translateY(-50%);
107+
font-size: 0.75rem;
108+
padding: 0.25rem 0.4rem;
109+
min-width: 20px;
110+
}
111+
}
112+
</style>
113+
114+
115+
116+
<div id="legacy-notice" class="announcement">
117+
<aside class="announcement-content">
118+
<button id="toggle-legacy-notice" title="Collapse/Expand notice">▼</button>
119+
<div>
120+
<strong>⚠️ Legacy Documentation Notice</strong>
121+
</div>
122+
<div id="legacy-notice-content">
123+
Thank you for your interest in Giskard. <br> You're viewing our legacy documentation pages, which are no longer actively updated.
124+
</div>
125+
<div id="legacy-notice-content-2">
126+
We have shifted our focus to core GenAI capabilities, like LLM San and RAGET. <br> For the latest information and features, please visit our
127+
<a href="https://docs.giskard.ai" style="color: #ffeaa7; text-decoration: underline; word-break: break-all;">current documentation</a>.
128+
</div>
129+
</aside>
130+
</div>
131+
132+
<script>
133+
document.addEventListener('DOMContentLoaded', function() {
134+
console.log('DOM Content Loaded - looking for legacy notice elements');
135+
136+
const toggleButton = document.getElementById('toggle-legacy-notice');
137+
const legacyNotice = document.getElementById('legacy-notice');
138+
139+
console.log('Found elements:', {
140+
toggleButton: !!toggleButton,
141+
legacyNotice: !!legacyNotice
142+
});
143+
144+
if (toggleButton && legacyNotice) {
145+
console.log('Legacy notice initialized');
146+
// Set default state: expanded (show full message)
147+
toggleButton.textContent = '▼';
148+
console.log('Default state: expanded');
149+
150+
// Check if user previously collapsed the notice
151+
if (localStorage.getItem('legacy-notice-collapsed') === 'true') {
152+
console.log('User previously collapsed, applying collapsed state');
153+
legacyNotice.classList.add('collapsed');
154+
toggleButton.textContent = '▶';
155+
} else {
156+
console.log('User has not collapsed before, keeping expanded state');
157+
}
158+
159+
toggleButton.addEventListener('click', function() {
160+
console.log('Toggle button clicked');
161+
if (legacyNotice.classList.contains('collapsed')) {
162+
// Expand - show full message
163+
console.log('Expanding notice');
164+
legacyNotice.classList.remove('collapsed');
165+
toggleButton.textContent = '▼';
166+
localStorage.setItem('legacy-notice-collapsed', 'false');
167+
} else {
168+
// Collapse - show only header
169+
console.log('Collapsing notice');
170+
legacyNotice.classList.add('collapsed');
171+
toggleButton.textContent = '▶';
172+
localStorage.setItem('legacy-notice-collapsed', 'true');
173+
}
174+
});
175+
}
176+
});
177+
</script>
178+
28179
<div class="page">
29180
<header class="mobile-header">
30181
<div class="header-left">

0 commit comments

Comments
 (0)