feat: add individual post page (post.html, post.js, post.css)
This commit is contained in:
parent
92ba1db393
commit
e41bd916f7
3 changed files with 933 additions and 0 deletions
490
css/post.css
Normal file
490
css/post.css
Normal file
|
|
@ -0,0 +1,490 @@
|
|||
/* ===================================================
|
||||
JAESWIFT — Individual Post Page Styles
|
||||
=================================================== */
|
||||
|
||||
/* ─── Post Header ─── */
|
||||
.post-header {
|
||||
padding: 10rem 2rem 3rem;
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgba(0, 255, 200, 0.1);
|
||||
}
|
||||
|
||||
.post-header-content {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post-back {
|
||||
display: inline-block;
|
||||
color: var(--accent, #00ffc8);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 1px;
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.post-back:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.post-header-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.post-header .post-date {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(0, 255, 200, 0.6);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.post-header .post-time {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: rgba(200, 214, 229, 0.4);
|
||||
}
|
||||
|
||||
.post-header-title {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
font-size: clamp(1.4rem, 3vw, 2.2rem);
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.post-header-tags {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.post-header-tags .post-tag {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.65rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border: 1px solid rgba(0, 255, 200, 0.2);
|
||||
color: var(--accent, #00ffc8);
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ─── Threat Badges ─── */
|
||||
.post-threat {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.threat-low {
|
||||
color: #00ffc8;
|
||||
border: 1px solid rgba(0, 255, 200, 0.3);
|
||||
text-shadow: 0 0 8px rgba(0, 255, 200, 0.3);
|
||||
}
|
||||
.threat-medium, .threat-med {
|
||||
color: #ffa502;
|
||||
border: 1px solid rgba(255, 165, 2, 0.3);
|
||||
text-shadow: 0 0 8px rgba(255, 165, 2, 0.3);
|
||||
}
|
||||
.threat-high {
|
||||
color: #ff4757;
|
||||
border: 1px solid rgba(255, 71, 87, 0.3);
|
||||
text-shadow: 0 0 8px rgba(255, 71, 87, 0.3);
|
||||
}
|
||||
.threat-critical {
|
||||
color: #ff0040;
|
||||
border: 1px solid rgba(255, 0, 64, 0.4);
|
||||
text-shadow: 0 0 12px rgba(255, 0, 64, 0.4);
|
||||
animation: threatPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes threatPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
/* ─── Post Layout ─── */
|
||||
.post-body-section {
|
||||
padding: 3rem 2rem 5rem;
|
||||
}
|
||||
|
||||
.post-layout {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 2.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* ─── Post Content ─── */
|
||||
.post-content-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.post-rendered {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.8;
|
||||
color: rgba(200, 214, 229, 0.85);
|
||||
}
|
||||
|
||||
.post-rendered h1,
|
||||
.post-rendered h2,
|
||||
.post-rendered h3,
|
||||
.post-rendered h4 {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
color: #fff;
|
||||
margin: 2rem 0 1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.post-rendered h1 { font-size: 1.6rem; }
|
||||
.post-rendered h2 {
|
||||
font-size: 1.2rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba(0, 255, 200, 0.1);
|
||||
}
|
||||
.post-rendered h3 { font-size: 1rem; color: var(--accent, #00ffc8); }
|
||||
.post-rendered h4 { font-size: 0.9rem; }
|
||||
|
||||
.post-rendered p {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.post-rendered strong {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.post-rendered em {
|
||||
color: rgba(0, 255, 200, 0.7);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.post-rendered a {
|
||||
color: var(--accent, #00ffc8);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(0, 255, 200, 0.3);
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.post-rendered a:hover {
|
||||
border-color: var(--accent, #00ffc8);
|
||||
}
|
||||
|
||||
.post-rendered ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.post-rendered ul li {
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.post-rendered ul li::before {
|
||||
content: '▸';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent, #00ffc8);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.post-rendered hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 255, 200, 0.2), transparent);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* ─── Code Blocks ─── */
|
||||
.post-rendered pre {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(0, 255, 200, 0.1);
|
||||
border-left: 3px solid var(--accent, #00ffc8);
|
||||
border-radius: 0;
|
||||
padding: 1.2rem 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-rendered pre::before {
|
||||
content: attr(data-lang) 'TERMINAL';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.6rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
background: rgba(0, 255, 200, 0.08);
|
||||
color: rgba(0, 255, 200, 0.4);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.post-rendered pre code {
|
||||
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
color: var(--accent, #00ffc8);
|
||||
line-height: 1.6;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post-rendered code.inline-code {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
background: rgba(0, 255, 200, 0.06);
|
||||
border: 1px solid rgba(0, 255, 200, 0.1);
|
||||
padding: 0.15rem 0.4rem;
|
||||
color: var(--accent, #00ffc8);
|
||||
}
|
||||
|
||||
/* ─── Sidebar ─── */
|
||||
.post-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
position: sticky;
|
||||
top: 6rem;
|
||||
}
|
||||
|
||||
.post-stats-panel,
|
||||
.post-meta-panel,
|
||||
.post-nav-panel {
|
||||
background: rgba(0, 255, 200, 0.02);
|
||||
border: 1px solid rgba(0, 255, 200, 0.08);
|
||||
}
|
||||
|
||||
/* ─── Stat Rows (sidebar) ─── */
|
||||
.stat-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.65rem;
|
||||
color: rgba(200, 214, 229, 0.5);
|
||||
letter-spacing: 1px;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.stat-pips {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.pip {
|
||||
width: 14px;
|
||||
height: 8px;
|
||||
background: rgba(200, 214, 229, 0.08);
|
||||
border: 1px solid rgba(200, 214, 229, 0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.pip.filled {
|
||||
background: var(--accent, #00ffc8);
|
||||
border-color: var(--accent, #00ffc8);
|
||||
box-shadow: 0 0 6px rgba(0, 255, 200, 0.3);
|
||||
}
|
||||
.pip.filled.warn {
|
||||
background: #ffa502;
|
||||
border-color: #ffa502;
|
||||
box-shadow: 0 0 6px rgba(255, 165, 2, 0.3);
|
||||
}
|
||||
.pip.filled.danger {
|
||||
background: #ff4757;
|
||||
border-color: #ff4757;
|
||||
box-shadow: 0 0 6px rgba(255, 71, 87, 0.3);
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
height: 1px;
|
||||
background: rgba(0, 255, 200, 0.08);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* ─── BPM Display ─── */
|
||||
.stat-big-row {
|
||||
text-align: center;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.stat-bpm-display {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-bpm-value {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #ff4757;
|
||||
text-shadow: 0 0 15px rgba(255, 71, 87, 0.4);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
.stat-bpm-value.pulse {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.stat-bpm-unit {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.65rem;
|
||||
color: rgba(255, 71, 87, 0.5);
|
||||
letter-spacing: 2px;
|
||||
display: block;
|
||||
margin-top: -0.2rem;
|
||||
}
|
||||
|
||||
/* ─── Coffee Row ─── */
|
||||
.stat-coffee-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
|
||||
.stat-coffee {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* ─── Metadata Panel ─── */
|
||||
.meta-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0;
|
||||
border-bottom: 1px solid rgba(0, 255, 200, 0.04);
|
||||
}
|
||||
.meta-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.meta-key {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.6rem;
|
||||
color: rgba(200, 214, 229, 0.4);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.meta-val {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: rgba(200, 214, 229, 0.8);
|
||||
text-align: right;
|
||||
}
|
||||
.meta-val.mono {
|
||||
font-size: 0.65rem;
|
||||
color: rgba(0, 255, 200, 0.5);
|
||||
}
|
||||
|
||||
/* ─── Navigation Panel ─── */
|
||||
.post-nav-link {
|
||||
display: block;
|
||||
padding: 0.8rem 0;
|
||||
border-bottom: 1px solid rgba(0, 255, 200, 0.06);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.post-nav-link:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.post-nav-link:hover {
|
||||
background: rgba(0, 255, 200, 0.03);
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-dir {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.6rem;
|
||||
color: var(--accent, #00ffc8);
|
||||
letter-spacing: 1px;
|
||||
display: block;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.nav-post-title {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: rgba(200, 214, 229, 0.7);
|
||||
display: block;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.nav-all .nav-dir {
|
||||
text-align: center;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
/* ─── Loading & Error ─── */
|
||||
.post-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 4rem 0;
|
||||
color: rgba(0, 255, 200, 0.5);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.post-error {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
font-size: 1.1rem;
|
||||
color: #ff4757;
|
||||
text-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
|
||||
}
|
||||
|
||||
/* ─── Responsive ─── */
|
||||
@media (max-width: 900px) {
|
||||
.post-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.post-sidebar {
|
||||
position: static;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.post-nav-panel {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.post-header {
|
||||
padding: 8rem 1rem 2rem;
|
||||
}
|
||||
|
||||
.post-body-section {
|
||||
padding: 2rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.post-header-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.post-sidebar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.post-rendered {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.post-rendered pre {
|
||||
padding: 0.8rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
325
js/post.js
Normal file
325
js/post.js
Normal file
|
|
@ -0,0 +1,325 @@
|
|||
/* ===================================================
|
||||
JAESWIFT BLOG — Individual Post Loader
|
||||
Markdown rendering, operator stats, navigation
|
||||
=================================================== */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const API = window.location.hostname === 'localhost'
|
||||
? 'http://localhost:5000'
|
||||
: '/api';
|
||||
|
||||
// ─── Simple Markdown Parser ───
|
||||
function parseMarkdown(md) {
|
||||
let html = md;
|
||||
|
||||
// Code blocks (```lang ... ```)
|
||||
html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (_, lang, code) => {
|
||||
const cls = lang ? ` class="language-${lang}"` : '';
|
||||
return `<pre><code${cls}>${escapeHtml(code.trim())}</code></pre>`;
|
||||
});
|
||||
|
||||
// Inline code
|
||||
html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
|
||||
|
||||
// Headers
|
||||
html = html.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
|
||||
html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
|
||||
html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
|
||||
html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
|
||||
|
||||
// Bold & Italic
|
||||
html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
|
||||
html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
||||
html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
|
||||
|
||||
// Links
|
||||
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
|
||||
|
||||
// Unordered lists
|
||||
html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
|
||||
html = html.replace(/(<li>.*<\/li>\n?)+/g, (match) => `<ul>${match}</ul>`);
|
||||
|
||||
// Horizontal rule
|
||||
html = html.replace(/^---$/gm, '<hr>');
|
||||
|
||||
// Paragraphs (double newline)
|
||||
html = html.replace(/\n\n(?!<)/g, '</p><p>');
|
||||
html = '<p>' + html + '</p>';
|
||||
|
||||
// Clean up empty paragraphs and fix nesting
|
||||
html = html.replace(/<p><(h[1-4]|pre|ul|hr|blockquote)/g, '<$1');
|
||||
html = html.replace(/<\/(h[1-4]|pre|ul|hr|blockquote)><\/p>/g, '</$1>');
|
||||
html = html.replace(/<p><\/p>/g, '');
|
||||
html = html.replace(/<p>\s*<\/p>/g, '');
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
// ─── Stat Pips ───
|
||||
function buildPips(val, max) {
|
||||
max = max || 5;
|
||||
let html = '<div class="stat-pips">';
|
||||
for (let i = 0; i < max; i++) {
|
||||
let cls = 'pip';
|
||||
if (i < val) {
|
||||
cls += ' filled';
|
||||
if (val <= 2) cls += ' danger';
|
||||
else if (val <= 3) cls += ' warn';
|
||||
}
|
||||
html += '<div class="' + cls + '"></div>';
|
||||
}
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
// ─── Clock ───
|
||||
function initClock() {
|
||||
const el = document.getElementById('navClock');
|
||||
if (!el) return;
|
||||
const tick = () => {
|
||||
const d = new Date();
|
||||
el.textContent = d.toLocaleTimeString('en-GB', { hour12: false }) + ' UTC' + (d.getTimezoneOffset() <= 0 ? '+' : '') + (-d.getTimezoneOffset() / 60);
|
||||
};
|
||||
tick();
|
||||
setInterval(tick, 1000);
|
||||
}
|
||||
|
||||
// ─── Navbar ───
|
||||
function initNavbar() {
|
||||
const toggle = document.getElementById('navToggle');
|
||||
const menu = document.getElementById('navMenu');
|
||||
if (toggle && menu) {
|
||||
toggle.addEventListener('click', () => menu.classList.toggle('active'));
|
||||
}
|
||||
window.addEventListener('scroll', () => {
|
||||
const nb = document.getElementById('navbar');
|
||||
if (nb) nb.classList.toggle('scrolled', window.scrollY > 50);
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
// ─── Render Operator Stats ───
|
||||
function renderStats(post) {
|
||||
const el = document.getElementById('postStats');
|
||||
if (!el) return;
|
||||
|
||||
const coffee = '☕'.repeat(post.coffee || 0) +
|
||||
'<span style="opacity:0.2">' + '☕'.repeat(5 - (post.coffee || 0)) + '</span>';
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">MOOD</span>
|
||||
${buildPips(post.mood)}
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">ENERGY</span>
|
||||
${buildPips(post.energy)}
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">MOTIVATION</span>
|
||||
${buildPips(post.motivation)}
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">FOCUS</span>
|
||||
${buildPips(post.focus)}
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">DIFFICULTY</span>
|
||||
${buildPips(post.difficulty)}
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-big-row">
|
||||
<div class="stat-bpm-display">
|
||||
<span class="stat-bpm-value" id="bpmValue">${post.heart_rate || '---'}</span>
|
||||
<span class="stat-bpm-unit">BPM</span>
|
||||
<div class="heartbeat-line" id="heartbeatLine"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-coffee-row">
|
||||
<span class="stat-label">CAFFEINE</span>
|
||||
<span class="stat-coffee">${coffee}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Animate heartbeat
|
||||
animateHeartbeat(post.heart_rate || 72);
|
||||
}
|
||||
|
||||
// ─── Heartbeat Animation ───
|
||||
function animateHeartbeat(bpm) {
|
||||
const el = document.getElementById('bpmValue');
|
||||
if (!el) return;
|
||||
const interval = 60000 / bpm;
|
||||
|
||||
setInterval(() => {
|
||||
el.classList.add('pulse');
|
||||
setTimeout(() => el.classList.remove('pulse'), 200);
|
||||
// Flicker the value slightly
|
||||
const jitter = Math.floor(Math.random() * 5) - 2;
|
||||
el.textContent = bpm + jitter;
|
||||
}, interval);
|
||||
}
|
||||
|
||||
// ─── Render Metadata Panel ───
|
||||
function renderMetaPanel(post) {
|
||||
const el = document.getElementById('postMetaPanel');
|
||||
if (!el) return;
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="meta-row">
|
||||
<span class="meta-key">DATE</span>
|
||||
<span class="meta-val">${post.date}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-key">TIME</span>
|
||||
<span class="meta-val">${post.time_written || 'UNKNOWN'}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-key">WORDS</span>
|
||||
<span class="meta-val">${post.word_count || '---'}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-key">THREAT</span>
|
||||
<span class="meta-val threat-${(post.threat_level || 'low').toLowerCase()}">${post.threat_level || 'LOW'}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-key">READ TIME</span>
|
||||
<span class="meta-val">~${Math.max(1, Math.ceil((post.word_count || 300) / 250))} MIN</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-key">SLUG</span>
|
||||
<span class="meta-val mono">${post.slug}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// ─── Render Navigation ───
|
||||
function renderNav(allPosts, currentSlug) {
|
||||
const el = document.getElementById('postNav');
|
||||
if (!el) return;
|
||||
|
||||
// Sort by date descending
|
||||
const sorted = [...allPosts].sort((a, b) => new Date(b.date) - new Date(a.date));
|
||||
const idx = sorted.findIndex(p => p.slug === currentSlug);
|
||||
|
||||
let navHtml = '';
|
||||
|
||||
if (idx > 0) {
|
||||
const prev = sorted[idx - 1];
|
||||
navHtml += `<a href="post.html?slug=${prev.slug}" class="post-nav-link nav-newer">
|
||||
<span class="nav-dir">← NEWER</span>
|
||||
<span class="nav-post-title">${prev.title}</span>
|
||||
</a>`;
|
||||
}
|
||||
|
||||
if (idx < sorted.length - 1) {
|
||||
const next = sorted[idx + 1];
|
||||
navHtml += `<a href="post.html?slug=${next.slug}" class="post-nav-link nav-older">
|
||||
<span class="nav-dir">OLDER →</span>
|
||||
<span class="nav-post-title">${next.title}</span>
|
||||
</a>`;
|
||||
}
|
||||
|
||||
navHtml += `<a href="blog.html" class="post-nav-link nav-all">
|
||||
<span class="nav-dir">⟐ ALL TRANSMISSIONS</span>
|
||||
</a>`;
|
||||
|
||||
el.innerHTML = navHtml;
|
||||
}
|
||||
|
||||
// ─── Load Post ───
|
||||
async function loadPost() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const slug = params.get('slug');
|
||||
|
||||
if (!slug) {
|
||||
document.getElementById('postContent').innerHTML =
|
||||
'<div class="post-error">NO TRANSMISSION ID SPECIFIED</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Fetch the specific post
|
||||
const res = await fetch(API + '/posts/' + encodeURIComponent(slug));
|
||||
if (!res.ok) throw new Error('Post not found');
|
||||
const post = await res.json();
|
||||
|
||||
// Update page title
|
||||
document.title = 'JAESWIFT // ' + post.title.toUpperCase();
|
||||
|
||||
// Update header
|
||||
document.getElementById('postTitle').textContent = post.title;
|
||||
document.getElementById('postDate').textContent = post.date;
|
||||
document.getElementById('postTime').textContent = post.time_written || '';
|
||||
|
||||
const threatEl = document.getElementById('postThreat');
|
||||
threatEl.textContent = post.threat_level || 'LOW';
|
||||
threatEl.className = 'post-threat threat-' + (post.threat_level || 'LOW').toLowerCase();
|
||||
|
||||
// Tags
|
||||
const tagsEl = document.getElementById('postTags');
|
||||
tagsEl.innerHTML = (post.tags || []).map(t =>
|
||||
'<span class="post-tag">' + t + '</span>'
|
||||
).join('');
|
||||
|
||||
// Render content
|
||||
const contentEl = document.getElementById('postContent');
|
||||
contentEl.innerHTML = '<div class="post-rendered">' + parseMarkdown(post.content || '') + '</div>';
|
||||
|
||||
// Animate content in
|
||||
contentEl.style.opacity = '0';
|
||||
contentEl.style.transform = 'translateY(20px)';
|
||||
contentEl.style.transition = 'all 0.6s ease';
|
||||
requestAnimationFrame(() => {
|
||||
contentEl.style.opacity = '1';
|
||||
contentEl.style.transform = 'translateY(0)';
|
||||
});
|
||||
|
||||
// Sidebar panels
|
||||
renderStats(post);
|
||||
renderMetaPanel(post);
|
||||
|
||||
// Load all posts for navigation
|
||||
try {
|
||||
const allRes = await fetch(API + '/posts');
|
||||
const allPosts = await allRes.json();
|
||||
renderNav(allPosts, slug);
|
||||
} catch (e) {
|
||||
console.warn('Could not load post navigation');
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
// Fallback: try static JSON
|
||||
try {
|
||||
const res2 = await fetch('api/data/posts.json');
|
||||
const posts = await res2.json();
|
||||
const post = posts.find(p => p.slug === slug);
|
||||
if (!post) throw new Error('Not found');
|
||||
|
||||
document.title = 'JAESWIFT // ' + post.title.toUpperCase();
|
||||
document.getElementById('postTitle').textContent = post.title;
|
||||
document.getElementById('postDate').textContent = post.date;
|
||||
document.getElementById('postTime').textContent = post.time_written || '';
|
||||
document.getElementById('postContent').innerHTML =
|
||||
'<div class="post-rendered">' + parseMarkdown(post.content || '') + '</div>';
|
||||
renderStats(post);
|
||||
renderMetaPanel(post);
|
||||
renderNav(posts, slug);
|
||||
} catch (e2) {
|
||||
document.getElementById('postContent').innerHTML =
|
||||
'<div class="post-error">TRANSMISSION NOT FOUND — SIGNAL LOST</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Init ───
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initClock();
|
||||
initNavbar();
|
||||
loadPost();
|
||||
});
|
||||
})();
|
||||
118
post.html
Normal file
118
post.html
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JAESWIFT // POST</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=JetBrains+Mono:wght@300;400;500;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/blog.css">
|
||||
<link rel="stylesheet" href="css/post.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Scanline Overlay -->
|
||||
<div class="scanline-overlay"></div>
|
||||
<div class="grid-bg"></div>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar" id="navbar">
|
||||
<div class="nav-container">
|
||||
<a href="index.html" class="nav-logo">
|
||||
<span class="logo-bracket">[</span> JAE <span class="logo-bracket">]</span>
|
||||
</a>
|
||||
<button class="nav-toggle" id="navToggle" aria-label="Menu">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
<ul class="nav-menu" id="navMenu">
|
||||
<li class="nav-item"><a href="index.html" class="nav-link">HOME</a></li>
|
||||
<li class="nav-item"><a href="blog.html" class="nav-link active">BLOG</a></li>
|
||||
<li class="nav-item"><a href="index.html#development" class="nav-link">DEVELOPMENT</a></li>
|
||||
<li class="nav-item"><a href="index.html#links" class="nav-link">LINKS</a></li>
|
||||
<li class="nav-item"><a href="index.html#contact" class="nav-link">CONTACT</a></li>
|
||||
</ul>
|
||||
<div class="nav-status">
|
||||
<span class="nav-clock" id="navClock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Post Header -->
|
||||
<section class="post-header" id="postHeader">
|
||||
<div class="post-header-content">
|
||||
<a href="blog.html" class="post-back">← BACK TO TRANSMISSIONS</a>
|
||||
<div class="post-header-meta" id="postMeta">
|
||||
<span class="post-date" id="postDate">Loading...</span>
|
||||
<span class="post-threat" id="postThreat">---</span>
|
||||
<span class="post-time" id="postTime"></span>
|
||||
</div>
|
||||
<h1 class="post-header-title" id="postTitle">LOADING TRANSMISSION...</h1>
|
||||
<div class="post-header-tags" id="postTags"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Post Body -->
|
||||
<section class="post-body-section">
|
||||
<div class="post-layout">
|
||||
<!-- Main Content -->
|
||||
<article class="post-content-main" id="postContent">
|
||||
<div class="post-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<span>DECRYPTING TRANSMISSION...</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="post-sidebar">
|
||||
<!-- Operator Status Panel -->
|
||||
<div class="panel post-stats-panel">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">OPERATOR STATUS</span>
|
||||
<span class="panel-icon">◇</span>
|
||||
</div>
|
||||
<div class="panel-content" id="postStats">
|
||||
<!-- Filled by JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post Metadata Panel -->
|
||||
<div class="panel post-meta-panel">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">TRANSMISSION DATA</span>
|
||||
<span class="panel-icon">↗</span>
|
||||
</div>
|
||||
<div class="panel-content" id="postMetaPanel">
|
||||
<!-- Filled by JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="panel post-nav-panel">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">NAVIGATION</span>
|
||||
<span class="panel-icon">⟐</span>
|
||||
</div>
|
||||
<div class="panel-content" id="postNav">
|
||||
<!-- Filled by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-left">
|
||||
<span class="footer-logo">[JAE]</span>
|
||||
<span class="footer-copy">© 2026 JAESWIFT.XYZ</span>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<span class="footer-signal">SIGNAL ████<span class="signal-flicker">█</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/post.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue