Skip to content

Refactor presentation.html for improved layout and styles #6

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
merged 1 commit into from
Oct 20, 2025
Merged

Refactor presentation.html for improved layout and styles #6

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
255 changes: 118 additions & 137 deletions presentation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LitIt Infrastructure – Live Mermaid Presentation 🌴</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LitIt Platform Infrastructure – Live Mermaid 🌴</title>
<style>
body { font-family: Poppins, sans-serif; margin: 0; transition: background .5s, color .5s; }
header, footer { position: sticky; top: 0; padding: .5rem; text-align: center; background: inherit; }
nav a { margin: 0 .5rem; text-decoration: none; color: inherit; font-weight: 600; }
.slide { display: none; padding: 2rem; text-align: center; }
.mermaid { margin: 1rem auto; max-width: 90%; }
textarea.mmd { width: 90%; height: 220px; margin: 1rem auto; display: block;
font-family: monospace; font-size: 14px; }
footer { position: fixed; bottom: 10px; width: 100%; text-align: center; }
button { background: #FF6F61; color: #fff; border: none; padding: .5rem 1rem; border-radius: 6px;
font-weight: 600; cursor: pointer; margin: 0 .3rem; }
@media (prefers-color-scheme: dark) {
body { background: #0B132B; color: #E0E0E0; }
button { background: #4ABDAC; }
body { font-family:Poppins,sans-serif;margin:0;padding:1rem;
background:#0B132B;color:#E0E0E0;transition:background .5s,color .5s; }
h1 { text-align:center;margin-top:0.5rem;color:#4ABDAC; }
section { margin:3rem auto;max-width:95%; }
.mermaid { margin:1rem auto;max-width:90%;background:#fff;color:#000;
border-radius:8px;padding:0.5rem; }
button { background:#4ABDAC;color:#fff;border:none;padding:.5rem 1rem;
border-radius:6px;font-weight:600;cursor:pointer;margin:.2rem; }
footer { position:fixed;bottom:10px;width:100%;text-align:center; }
@media(prefers-color-scheme:light){
body{background:#fff;color:#23303B;}
.mermaid{background:#f8f9fa;}
h1{color:#FF6F61;}
button{background:#FF6F61;}
}
</style>
</head>
<body>

<header>
<h1>LitIt Platform Infrastructure 🌴 (Live Mermaid)</h1>
<nav id="nav"></nav>
</header>
<h1>LitIt Platform Infrastructure 🌴</h1>

<main id="slides"></main>

<footer>
<button id="prev">◀ Prev</button>
<button id="next">Next ▶</button>
<button id="toggleView">View All</button>
<button id="toggleEdit">Toggle Edit Mode</button>
</footer>

<script type="module">
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
mermaid.initialize({ startOnLoad:false, theme:"default" });

const diagrams = [
{ title:'01 Overview', desc:'High-level architecture',
mmd:`graph TD
subgraph "Clients (Mobile & Web)"
<!-- 01 Overview -->
<section>
<h2>01 Overview</h2>
<div class="mermaid">
graph TD
subgraph "Clients"
A1["Android / iOS / PWA"]
A2["Web Admin Portal (Next.js)"]
end
Expand All @@ -71,26 +58,36 @@ <h1>LitIt Platform Infrastructure 🌴 (Live Mermaid)</h1>
A2 -->|Admin| B1
C1 --> D1 & D2 & D3 & D4 & D5
E1 --> E2 --> C1
C1 --> F1`},

{ title:'02 Backend Monolith', desc:'Go Fiber monolith modules',
mmd:`graph LR
C1 --> F1
</div>
</section>

<!-- 02 Backend Monolith -->
<section>
<h2>02 Backend Monolith</h2>
<div class="mermaid">
graph LR
subgraph "Go Fiber Monolith"
A["/internal/common<br>Config · DB · Logger · Redis"]
B["/internal/ws<br>Gotify Bridge + Fallback Hub"]
C["/internal/api<br>Public REST (v1)"]
D["/internal/admin<br>Role-based Routes"]
E["/internal/content<br>Media Pipeline"]
F["/internal/auth<br>JWT + Device Binding"]
G["/internal/payments<br>Braintree / Stripe"]
H["/internal/ai<br>Gemini & ML Utilities"]
A["/internal/common – Config · DB · Logger · Redis"]
B["/internal/ws – Gotify Bridge + Fallback Hub"]
C["/internal/api – Public REST (v1)"]
D["/internal/admin – Role-based Routes"]
E["/internal/content – Media Pipeline"]
F["/internal/auth – JWT + Device Binding"]
G["/internal/payments – Braintree / Stripe"]
H["/internal/ai – Gemini & ML Utilities"]
end
A --> B & C & D & E & F & G & H
E -->|Uploads| Bunny
F -->|Tokens| Redis`},

{ title:'03 Internal Services', desc:'Workers, content, and pipelines',
mmd:`graph TD
F -->|Tokens| Redis
</div>
</section>

<!-- 03 Internal Services -->
<section>
<h2>03 Internal Services</h2>
<div class="mermaid">
graph TD
subgraph "Internal Services"
A["content.service.go"]
B["auth.service.go"]
Expand All @@ -104,35 +101,50 @@ <h1>LitIt Platform Infrastructure 🌴 (Live Mermaid)</h1>
C -->|Sync| Postgres
D -->|Index Build| Meilisearch
E -->|Push| Gotify
F -->|Cache Cleanup| Redis`},

{ title:'04 Database & Storage', desc:'Persistence layer overview',
mmd:`graph LR
A["PostgreSQL<br>Primary ACID DB"]
B["Redis 7<br>Cache / Sessions"]
C["Meilisearch<br>Search Index"]
D["Bunny.net<br>CDN / Object Storage"]
F -->|Cache Cleanup| Redis
</div>
</section>

<!-- 04 Database & Storage -->
<section>
<h2>04 Database & Storage</h2>
<div class="mermaid">
graph LR
A["PostgreSQL – Primary ACID DB"]
B["Redis 7 – Cache / Sessions"]
C["Meilisearch – Search Index"]
D["Bunny.net – CDN / Object Storage"]
E["Backups → Azure Blob"]
A --> E
B --> A
C --> A
D --> A`},

{ title:'05 Mobile App & UI', desc:'Flutter endpoints and flows',
mmd:`graph TD
D --> A
</div>
</section>

<!-- 05 Mobile App & UI -->
<section>
<h2>05 Mobile App & UI</h2>
<div class="mermaid">
graph TD
subgraph "Mobile App (Flutter)"
A1["Login / Register<br>/api/auth/*"]
A2["Dashboard<br>/api/feed/*"]
A3["Casting Calls<br>/api/cast/*"]
A4["Messages<br>/api/chat/*"]
A5["Profile Edit<br>/api/user/*"]
A6["Media Upload<br>/api/content/upload"]
A1["Login / Register /api/auth/*"]
A2["Dashboard /api/feed/*"]
A3["Casting Calls /api/cast/*"]
A4["Messages /api/chat/*"]
A5["Profile Edit /api/user/*"]
A6["Media Upload /api/content/upload"]
end
A1 --> A2 --> A3 --> A4 --> A5 --> A6
A4 -->|WebSocket /ws| Gotify`},

{ title:'06 CI/CD & Monitoring', desc:'DevOps workflow',
mmd:`graph LR
A4 -->|WebSocket /ws| Gotify
</div>
</section>

<!-- 06 CI/CD & Monitoring -->
<section>
<h2>06 CI/CD & Monitoring</h2>
<div class="mermaid">
graph LR
subgraph "CI/CD"
A["GitHub Actions"]
B["Docker Build + Push (GHCR)"]
Expand All @@ -145,78 +157,47 @@ <h1>LitIt Platform Infrastructure 🌴 (Live Mermaid)</h1>
G["Loki Logs"]
end
A --> B --> C --> D
D --> E --> F --> G`},

{ title:'07 Security & Network', desc:'Auth, TLS, and WAF',
mmd:`graph TD
D --> E --> F --> G
</div>
</section>

<!-- 07 Security & Network -->
<section>
<h2>07 Security & Network</h2>
<div class="mermaid">
graph TD
A["JWT Auth (HS256 / ES256)"]
B["Device Binding (Mobile)"]
C["Role-Based Access (/admin/*)"]
D["TLS Auto-Renew (Caddy)"]
E["Cloudflare WAF (DDoS Protection)"]
A --> B --> C --> D --> E`},

{ title:'08 Marketing & Analytics', desc:'Tracking and data insights',
mmd:`graph LR
A --> B --> C --> D --> E
</div>
</section>

<!-- 08 Marketing & Analytics -->
<section>
<h2>08 Marketing & Analytics</h2>
<div class="mermaid">
graph LR
A["Google Analytics / Firebase"]
B["Meilisearch Logs"]
C["Bunny Analytics"]
D["Redis Counters"]
E["Prometheus / Grafana"]
A --> B --> C --> D --> E`}
];

const slides=document.getElementById('slides');
const nav=document.getElementById('nav');
let editMode=false, idx=0, all=false;
A --> B --> C --> D --> E
</div>
</section>

function buildSlides(){
slides.innerHTML=''; nav.innerHTML='';
diagrams.forEach((d,i)=>{
const sec=document.createElement('section');
sec.className='slide';
sec.id=`slide-${i}`;
sec.innerHTML=`
<h2>${d.title}</h2>
<p>${d.desc}</p>
<div class="mmd-view">
<textarea class="mmd">${d.mmd}</textarea>
<button class="render-btn">Render</button>
<div class="mermaid">${d.mmd}</div>
</div>`;
slides.appendChild(sec);
const link=document.createElement('a');
link.textContent=d.title;
link.href="#"; link.onclick=(e)=>{e.preventDefault();show(i)};
nav.appendChild(link);
});
}

function show(i){
idx=i;
document.querySelectorAll('.slide').forEach((s,j)=>s.style.display=(all||j===i)?'block':'none');
renderAll(); // render current when showing
}

function renderAll(){
document.querySelectorAll('.mermaid').forEach(async el=>{
try { await mermaid.run({ nodes:[el] }); }
catch(e){ el.textContent='Render error: '+e.message; }
});
}
<footer>
<button onclick="window.scrollTo({top:0,behavior:'smooth'})">⬆ Back to Top</button>
</footer>

function attachButtons(){
document.querySelectorAll('.render-btn').forEach(btn=>{
btn.onclick=async()=>{
const wrap=btn.parentElement;
const code=wrap.querySelector('.mmd').value;
const out=wrap.querySelector('.mermaid');
out.innerHTML=code;
await mermaid.run({ nodes:[out] });
};
});
}
<!-- Mermaid runtime -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad:true, theme:"default" });
</script>

function toggleEdit(){
editMode=!editMode;
document.querySelectorAll('.mmd').forEach(t=>t
</body>
</html>
Loading