Skip to content

Commit 07b163c

Browse files
DevLabStudyDevLabStudy
authored
Update post.html
1 parent 1c54134 commit 07b163c

1 file changed

Lines changed: 87 additions & 32 deletions

File tree

‎_layouts/post.html‎

Lines changed: 87 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@
181181
}
182182
.article-content pre code { background: none; padding: 0; color: #f8fafc; }
183183

184-
/* SEKCJA INTERAKTYWNA: KUDOS / SERDUSZKO I KOMENTARZE */
184+
/* SEKCJA INTERAKTYWNA */
185185
.post-interactions {
186186
margin-top: 50px;
187187
padding-top: 30px;
@@ -208,8 +208,8 @@
208208
}
209209

210210
.kudos-btn {
211-
background: rgba(255, 94, 0, 0.15);
212-
border: 1px solid rgba(255, 94, 0, 0.4);
211+
background: rgba(255, 94, 0, 0.1);
212+
border: 1px solid rgba(255, 94, 0, 0.3);
213213
color: #fff;
214214
padding: 10px 20px;
215215
border-radius: 6px;
@@ -224,7 +224,10 @@
224224
.kudos-btn:hover {
225225
background: var(--accent-contrast);
226226
transform: translateY(-2px);
227-
box-shadow: 0 5px 15px rgba(255, 94, 0, 0.3);
227+
}
228+
.kudos-btn.liked {
229+
background: rgba(255, 94, 0, 0.3);
230+
border-color: var(--accent-contrast);
228231
}
229232

230233
.comments-section {
@@ -293,22 +296,49 @@
293296
margin-top: 15px;
294297
display: flex;
295298
flex-direction: column;
296-
gap: 10px;
299+
gap: 12px;
297300
}
298301

299302
.user-comment {
300303
background: rgba(255, 255, 255, 0.02);
301304
border: 1px solid rgba(255, 255, 255, 0.05);
302-
padding: 12px 15px;
305+
padding: 15px;
303306
border-radius: 6px;
304-
font-size: 0.9rem;
307+
display: flex;
308+
justify-content: space-between;
309+
align-items: flex-start;
310+
}
311+
.user-comment-content {
312+
flex: 1;
305313
}
306314
.user-comment-meta {
307315
font-family: 'JetBrains Mono', monospace;
308316
font-size: 0.75rem;
309317
color: var(--accent-blue);
310318
margin-bottom: 4px;
311319
}
320+
.comment-actions {
321+
display: flex;
322+
gap: 8px;
323+
font-family: 'JetBrains Mono', monospace;
324+
font-size: 0.75rem;
325+
}
326+
.comment-action-btn {
327+
background: none;
328+
border: none;
329+
cursor: pointer;
330+
color: var(--text-muted);
331+
padding: 2px 6px;
332+
border-radius: 4px;
333+
transition: 0.2s;
334+
}
335+
.comment-action-btn:hover {
336+
background: rgba(255, 255, 255, 0.08);
337+
color: #fff;
338+
}
339+
.comment-action-btn.delete:hover {
340+
color: #ef4444;
341+
}
312342

313343
footer {
314344
text-align: center;
@@ -347,19 +377,19 @@ <h1 class="article-title">{{ page.title }}</h1>
347377
{{ content }}
348378
</article>
349379

350-
<!-- SEKCJA INTERAKTYWNA (KUDOS & KOMENTARZE) -->
380+
<!-- SEKCJA INTERAKTYWNA -->
351381
<div class="post-interactions">
352-
<!-- Przycisk Kudos / Serduszko -->
382+
<!-- Przycisk Kudos (Przełącznik z 0 na start) -->
353383
<div class="kudos-box">
354384
<div class="kudos-info">
355385
// DOCENIASZ MATERIAŁ? ZOSTAW SYGNAŁ KUDOS.
356386
</div>
357387
<button class="kudos-btn" id="kudosBtn">
358-
❤️ <span id="kudosCount">14</span> Kudos
388+
❤️ <span id="kudosCount">0</span> Kudos
359389
</button>
360390
</div>
361391

362-
<!-- Panel Komentarzy / Feedbacku -->
392+
<!-- Panel Komentarzy z opcją Edycji i Usuwania -->
363393
<div class="comments-section">
364394
<h3 class="comments-title">Rejestr Komentarzy & Feedback</h3>
365395
<p class="comments-placeholder">// Masz pytanie lub uwagi do konfiguracji? Zostaw wpis w lokalnym buforze:</p>
@@ -380,59 +410,66 @@ <h3 class="comments-title">Rejestr Komentarzy & Feedback</h3>
380410
<p>// 1 Gbps Fiber - Proxmox VE / MikroTik - DevLabStudy Hub 2026</p>
381411
</footer>
382412

383-
<!-- Skrypt obsługujący serduszka (Kudos) i lokalne komentarze -->
384413
<script>
385-
// Unikalny klucz dla konkretnego wpisu oparty na jego URL
386414
const postId = window.location.pathname;
387415

388-
// --- OBSŁUGA KUDOS (SERDECZNEK) ---
416+
// --- OBSŁUGA KUDOS (PRZEŁĄCZNIK Z 0 NA START) ---
389417
const kudosBtn = document.getElementById('kudosBtn');
390418
const kudosCountSpan = document.getElementById('kudosCount');
391419

392420
let kudosKey = 'devlab_kudos_' + postId;
393421
let likedKey = 'devlab_liked_' + postId;
394422

395-
// Pobierz stan z localStorage lub ustaw domyślną bazę
396-
let currentKudos = parseInt(localStorage.getItem(kudosKey)) || 12;
423+
let currentKudos = parseInt(localStorage.getItem(kudosKey)) || 0;
397424
let hasLiked = localStorage.getItem(likedKey) === 'true';
398425

399426
kudosCountSpan.textContent = currentKudos;
400427
if(hasLiked) {
401-
kudosBtn.style.opacity = '0.7';
402-
kudosBtn.innerHTML = '❤️ <span id="kudosCount">' + currentKudos + '</span> (Zapisano)';
428+
kudosBtn.classList.add('liked');
403429
}
404430

405431
kudosBtn.addEventListener('click', () => {
406432
if(!hasLiked) {
407433
currentKudos++;
408434
hasLiked = true;
409-
localStorage.setItem(kudosKey, currentKudos);
410-
localStorage.setItem(likedKey, 'true');
411-
412-
kudosCountSpan.textContent = currentKudos;
413-
kudosBtn.style.opacity = '0.7';
414-
kudosBtn.innerHTML = '❤️ <span id="kudosCount">' + currentKudos + '</span> (Dziękuję!)';
435+
kudosBtn.classList.add('liked');
436+
} else {
437+
currentKudos = Math.max(0, currentKudos - 1);
438+
hasLiked = false;
439+
kudosBtn.classList.remove('liked');
415440
}
441+
localStorage.setItem(kudosKey, currentKudos);
442+
localStorage.setItem(likedKey, hasLiked);
443+
kudosCountSpan.textContent = currentKudos;
416444
});
417445

418-
// --- OBSŁUGA LOKALNYCH KOMENTARZY ---
446+
// --- OBSŁUGA KOMENTARZY (Z EDYCJĄ I USUANIEM) ---
419447
const commentInput = document.getElementById('commentInput');
420448
const commentSubmit = document.getElementById('commentSubmit');
421449
const commentsList = document.getElementById('commentsList');
422450

423451
let commentsKey = 'devlab_comments_' + postId;
424-
let savedComments = JSON.parse(localStorage.getItem(commentsKey)) || [
425-
{ author: "Admin (Tobiasz)", text: "Dziennik otwarty. Piszcie, jak wam idzie optymalizacja!", date: "2026.03.20" }
426-
];
452+
let savedComments = JSON.parse(localStorage.getItem(commentsKey)) || [];
427453

428454
function renderComments() {
429455
commentsList.innerHTML = '';
430-
savedComments.forEach(c => {
456+
if(savedComments.length === 0) {
457+
commentsList.innerHTML = '<div style="color: var(--text-muted); font-size: 0.85rem; font-family: \'JetBrains Mono\', monospace;">// Brak wpisów w buforze. Bądź pierwszy!</div>';
458+
return;
459+
}
460+
461+
savedComments.forEach((c, index) => {
431462
const div = document.createElement('div');
432463
div.className = 'user-comment';
433464
div.innerHTML = `
434-
<div class="user-meta">// ${c.author} — ${c.date}</div>
435-
<div>${escapeHtml(c.text)}</div>
465+
<div class="user-comment-content">
466+
<div class="user-meta">// ${c.author} — ${c.date}</div>
467+
<div class="comment-text-view" id="text-${index}">${escapeHtml(c.text)}</div>
468+
</div>
469+
<div class="comment-actions">
470+
<button class="comment-action-btn" onclick="editComment(${index})">Edytuj</button>
471+
<button class="comment-action-btn delete" onclick="deleteComment(${index})">Usuń</button>
472+
</div>
436473
`;
437474
commentsList.appendChild(div);
438475
});
@@ -446,7 +483,7 @@ <h3 class="comments-title">Rejestr Komentarzy & Feedback</h3>
446483
const dateStr = now.getFullYear() + '.' + String(now.getMonth()+1).padStart(2, '0') + '.' + String(now.getDate()).padStart(2, '0');
447484

448485
savedComments.push({
449-
author: "Gość (Operator)",
486+
author: "Operator",
450487
text: text,
451488
date: dateStr
452489
});
@@ -456,6 +493,24 @@ <h3 class="comments-title">Rejestr Komentarzy & Feedback</h3>
456493
renderComments();
457494
});
458495

496+
window.deleteComment = function(index) {
497+
savedComments.splice(index, 1);
498+
localStorage.setItem(commentsKey, JSON.stringify(savedComments));
499+
renderComments();
500+
}
501+
502+
window.editComment = function(index) {
503+
const textView = document.getElementById(`text-${index}`);
504+
const currentText = savedComments[index].text;
505+
506+
const newText = prompt("Edytuj treść komentarza:", currentText);
507+
if(newText !== null && newText.trim().length >= 2) {
508+
savedComments[index].text = newText.trim();
509+
localStorage.setItem(commentsKey, JSON.stringify(savedComments));
510+
renderComments();
511+
}
512+
}
513+
459514
function escapeHtml(str) {
460515
return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
461516
}

0 commit comments

Comments
 (0)