---
title: VertiWiki — Motor de Wiki Markdown 100% Static, Fișier Unic, Fără Backend
description: Zero servere Node.js, zero pași de build, randare instantanee pe client cu Marked v15, DOMPurify, comutare de teme pe GPU și optimizare nativă pentru motoare AI (AEO).
tags: [vertiwiki, documentatie, motor, markdown-wiki, fara-backend, fisier-unic, aeo, static-wiki]
layout: landing
contentWidth: full
---

# VertiWiki

> Pentru indexul complet al documentației și navigarea agenților, consultați [llms.txt](/llms.txt).

<div class="landing-page">

<!-- =========================================================
HERO SECTION
========================================================= -->
<section class="hero-wrap">
<div class="landing-container">
<div class="hero-meta-bar">
<span class="hero-status-dot"></span>
<span>Zero Procese Server &bull; Pipeline 100% în Browser &bull; Pachet Autonom 4 MB</span>
</div>

<h1 class="hero-heading">
100% Static, Fișier Unic
<span class="accent-gradient">Motor de Wiki &amp; Documentație</span>
</h1>

<p class="hero-lead-text">
Plasați un singur fișier autonom <code>index.html</code> lângă documentele voastre Markdown. Fără procese de compilare Node.js, fără baze de date și fără comenzi de reconstrucție. Compilare instantanee pe client cu Marked v15, DOMPurify, KaTeX, Prism, Mermaid și comutare dinamică a temelor pe GPU.
</p>

<div class="hero-cta-group">
<a href="quickstart.md" class="btn-hero-primary">
<span>Începeți în 5 Minute</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</a>
<a href="concepts/architecture.md" class="btn-hero-secondary">
<span>Arhitectura Sistemului</span>
</a>
</div>
<div class="hero-quick-command">
<span class="cmd-prefix">$</span>
<code>curl -fsSL https://github.com/Octadira/vertiwiki/releases/latest/download/vertiwiki.html -o index.html</code>
</div>
</div>
</section>

<!-- =========================================================
DOCUMENTATION HUB (6 INTERACTIVE SECTIONS)
========================================================= -->
<section class="landing-section" id="hub">
<div class="landing-container">
<span class="section-eyebrow">Centrul de Documentație</span>
<h2 class="section-title">Acces Direct la Ghidurile Tehnice</h2>
<p class="section-desc">
Explorați tutoriale practice, diagrame arhitecturale, runbook-uri operaționale și cataloage API detaliate.
</p>

<div class="hub-grid">
<a href="quickstart.md" class="hub-card">
<div class="hub-card-icon">🚀</div>
<div class="hub-card-title">
<span>Primii Pași</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Ghid practic de 5 minute cu exemple de cod executabile, configurări rapide și structuri minime.</p>
</a>

<a href="concepts/architecture.md" class="hub-card">
<div class="hub-card-icon">🏛️</div>
<div class="hub-card-title">
<span>Arhitectura Sistemului</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Explorați fluxul de execuție pe client, mașinile de stare și topologia de containere C4.</p>
</a>

<a href="configuration/overview.md" class="hub-card">
<div class="hub-card-icon">⚙️</div>
<div class="hub-card-title">
<span>Ghid de Configurare</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Descoperiți toți parametrii din schemă, modurile de afișare, limbile suportate și setările de brand.</p>
</a>

<a href="operations/runbook.md" class="hub-card">
<div class="hub-card-icon">🛠️</div>
<div class="hub-card-title">
<span>Operațiuni &amp; Runbooks</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Proceduri de găzduire pe Cloudflare Pages, AWS CloudFront, Vercel și depanare în producție.</p>
</a>

<a href="reference/api.md" class="hub-card">
<div class="hub-card-icon">📖</div>
<div class="hub-card-title">
<span>Catalog API TypeScript</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Semnături TypeScript exacte, tabele detaliate de parametri, hook-uri de plugin și interfețe.</p>
</a>

<a href="concepts/workflows.md" class="hub-card">
<div class="hub-card-icon">🔄</div>
<div class="hub-card-title">
<span>Fluxuri de Execuție</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Fluxul complet cerere-răspuns, rutare reactivă, dezinfectare DOM și diagrame secvențiale.</p>
</a>
</div>
</div>
</section>

<!-- =========================================================
ARCHITECTURAL BLUEPRINT (THE 6 PILLARS)
========================================================= -->
<section class="landing-section landing-section-subtle" id="blueprint">
<div class="landing-container">
<span class="section-eyebrow">Arhitectură Tehnică</span>
<h2 class="section-title">Construit pentru Durabilitate &amp; Viteză</h2>
<p class="section-desc">
Șase atribute arhitecturale fundamentale care elimină complexitatea de backend și garantează fiabilitatea pe termen lung.
</p>

<div class="blueprint-grid">
<div class="blueprint-card">
<span class="blueprint-num">01 / RUNTIME PE CLIENT</span>
<h3 class="blueprint-title">Zero Backend &amp; Zero Pași de Build</h3>
<p class="blueprint-body">
Fără procese Node.js pe server și fără comenzi de reconstrucție la editarea Markdown-ului. Plasați <code>index.html</code> în orice folder și publicați static.
</p>
<span class="blueprint-tag">DOMPurify &bull; Marked v15 &bull; Router SPA</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">02 / BUNDLE FIȘIER UNIC</span>
<h3 class="blueprint-title">Distribuție Autonomă într-un Singur Fișier</h3>
<p class="blueprint-body">
Compilat prin Vite 6 cu <code>vite-plugin-singlefile</code>. Marked v15, DOMPurify, KaTeX, Prism și Mermaid sunt integrate într-un pachet compact de 4 MB.
</p>
<span class="blueprint-tag">Zero Module Node &bull; Portabil Offline</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">03 / SECURITATE STRICTĂ</span>
<h3 class="blueprint-title">Graniță de Încredere în Profunzime</h3>
<p class="blueprint-body">
Izolarea automată a iframe-urilor impune <code>allow-presentation</code> și blochează tentativele de spargere a frame-ului. Schemele periculoase sunt eliminate din toate legăturile.
</p>
<span class="blueprint-tag">DOMPurify Strict &bull; Invariant Zero-XSS</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">04 / AEO &amp; DESCOPERIRE AGENȚI</span>
<h3 class="blueprint-title">Arbore Semantic de Crawl &amp; AEO</h3>
<p class="blueprint-body">
Arborele de crawl integrat permite descoperirea instantanee de către Googlebot fără SSR, combinat cu microdate dinamice Schema.org <code>TechArticle</code> și <code>llms.txt</code>.
</p>
<span class="blueprint-tag">AgentDocsSpec &bull; llms.txt &bull; JSON-LD</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">05 / MOTOR DE TEME PE GPU</span>
<h3 class="blueprint-title">Teme Decuplate &amp; 11 Preseturi</h3>
<p class="blueprint-body">
Comută variabilele CSS pe <code>document.documentElement</code> în sub 1ms, fără reîncărcarea paginii. Suportă teme JSON externe prin folderul <code>themes/</code>.
</p>
<span class="blueprint-tag">11 Preseturi &bull; Obsidian &bull; Editorial &bull; Nord</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">06 / CĂUTARE ÎN MEMORIE</span>
<h3 class="blueprint-title">Căutare Instantanee pe Client (&fnof;K)</h3>
<p class="blueprint-body">
Căutare ultrarapidă în memoria clientului prin MiniSearch. Include căutare fuzzy, tokenizare automată, scurtături de tastatură (<code>&fnof;K</code> sau <code>/</code>) și filtrare pe limbi.
</p>
<span class="blueprint-tag">MiniSearch &bull; Sub-milisecundă &bull; Zero Latență</span>
</div>
</div>
</div>
</section>

<!-- =========================================================
DETERMINISTIC 10-STEP PIPELINE
========================================================= -->
<section class="landing-section" id="pipeline">
<div class="landing-container">
<span class="section-eyebrow">Arhitectura Ciclului de Viață</span>
<h2 class="section-title">Fluxul Determinist de Randare în 10 Etape</h2>
<p class="section-desc">
Cum transformă VertiWiki conținutul Markdown brut într-o interfață de documentație complet interactivă și dezinfectată în milisecunde.
</p>

<div class="pipeline-grid">
<div class="pipeline-step">
<span class="pipeline-index">01</span>
<div class="pipeline-details">
<h4>Parsare Hash Rută &amp; Parametri Query</h4>
<p>Rezolvă <code>#/cale.md</code> sau parametrul <code>?page=</code> pentru rescrieri de conținut negociat pe server.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">02</span>
<div class="pipeline-details">
<h4>Descărcare Asincronă a Resurselor</h4>
<p>Descarcă fișierul Markdown prin <code>fetch()</code> cu rezoluție deterministă în subdirectoare și rezervă 404.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">03</span>
<div class="pipeline-details">
<h4>Parsare Frontmatter YAML</h4>
<p>Extrage metadatele din antet, autorul documentului, etichetele personalizate și configurările de temă/layout.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">04</span>
<div class="pipeline-details">
<h4>Hook-uri de Ciclu de Viață beforeParse</h4>
<p>Procesează macro-uri personalizate, inclusiv tab-uri de cod (<code>::: tabs</code>), detalii expandabile și insigne.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">05</span>
<div class="pipeline-details">
<h4>Compilare Marked v15 &amp; Dezinfectare DOMPurify</h4>
<p>Compilează CommonMark + GFM și impune dezinfectarea strictă Zero-XSS cu sandboxing pentru elementele iframe.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">06</span>
<div class="pipeline-details">
<h4>Hook-uri de Ciclu de Viață afterParse</h4>
<p>Permite extensiilor de plugin să inspecteze sau să modifice codul HTML sigur înainte de montarea în DOM.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">07</span>
<div class="pipeline-details">
<h4>Montare în DOM &amp; Rezolvare de Legături</h4>
<p>Montează HTML-ul în <code>#verti-app</code> și transformă legăturile relative (<code>../ghid.md</code> &rarr; <code>#/ghiduri/ghid.md</code>).</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">08</span>
<div class="pipeline-details">
<h4>Plugin-uri afterRender</h4>
<p>Inițializează evidențierea de sintaxă Prism, formulele matematice KaTeX, diagramele Mermaid și zoom-ul pe imagini.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">09</span>
<div class="pipeline-details">
<h4>Cuprins (TOC) &amp; Scrollspy</h4>
<p>Construiește arborele de titluri și activează <code>IntersectionObserver</code> pentru urmărirea secțiunii curente.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">10</span>
<div class="pipeline-details">
<h4>Indexare Căutare &amp; Microdate AEO</h4>
<p>Indexează termenii în MiniSearch și actualizează microdatele Schema.org <code>TechArticle</code> JSON-LD.</p>
</div>
</div>
</div>
</div>
</section>

<!-- =========================================================
TECHNICAL COMPARISON MATRIX
========================================================= -->
<section class="landing-section landing-section-subtle" id="comparison">
<div class="landing-container">
<span class="section-eyebrow">Comparație Tehnică</span>
<h2 class="section-title">De ce Aleg Dezvoltatorii VertiWiki</h2>
<p class="section-desc">
Vedeți cum se compară VertiWiki cu generatoarele clasice de site-uri statice și wiki-urile vechi.
</p>

<div class="comparison-wrap">
<table class="matrix-table">
<thead>
<tr>
<th>Caracteristică Arhitecturală</th>
<th class="col-verti">Standardul VertiWiki</th>
<th>SSG Tradiționale (Docusaurus, VitePress)</th>
<th>Wiki-uri Clasice (DokuWiki, MediaWiki)</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Model de Găzduire</strong></td>
<td class="col-verti">100% Static (Server HTTP, CDN, S3, Git Pages)</td>
<td>Artefact de build static (Necesită CI/CD)</td>
<td>Server PHP / Node / Bază de date</td>
</tr>
<tr>
<td><strong>Actualizare Conținut</strong></td>
<td class="col-verti">0s (Reîncărcare imediată la editarea .md)</td>
<td>30s - 3min (Recompilare CI/CD &amp; deploy)</td>
<td>Scriere directă în bază sau lock pe fișier</td>
</tr>
<tr>
<td><strong>Motor de Căutare</strong></td>
<td class="col-verti">MiniSearch pe client (Latență zero)</td>
<td>Algolia DocSearch sau JSON greoi</td>
<td>Căutare SQL pe server</td>
</tr>
<tr>
<td><strong>Diagrame &amp; Formule</strong></td>
<td class="col-verti">Mermaid &amp; KaTeX native pe client</td>
<td>Plugin-uri și transformări la build</td>
<td>Extensii de server (Mathoid, Graphviz)</td>
</tr>
<tr>
<td><strong>Suprafață de Atac</strong></td>
<td class="col-verti">Izolare strictă DOMPurify, zero vectori backend</td>
<td>Risc pe lanțul de pachete npm la build</td>
<td>Injecții SQL, vulnerabilități PHP</td>
</tr>
<tr>
<td><strong>Optimizare AI Autonomă</strong></td>
<td class="col-verti">Nativ llms.txt + Schema.org JSON-LD</td>
<td>Necesită integrare manuală</td>
<td>Inexistentă</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>

<!-- =========================================================
QUICKSTART (3 STEPS)
========================================================= -->
<section class="landing-section" id="quickstart">
<div class="landing-container">
<span class="section-eyebrow">Primii Pași</span>
<h2 class="section-title">Pregătit în 3 Pași Simpli</h2>
<p class="section-desc">
Fără procese complicate de compilare Node.js și fără baze de date.
</p>

<div class="quickstart-steps">
<div class="qs-step-card">
<span class="qs-step-num">PASUL 01</span>
<h3 class="qs-step-title">Scrieți Conținutul în Markdown</h3>
<p class="qs-step-desc">
Creați fișierul <code>index.md</code>, subdirectoarele (ex. <code>concepts/</code>) și meniul în <code>navigation.md</code>.
</p>
<div class="qs-code-box">mkdir -p my-wiki &amp;&amp; touch index.md navigation.md</div>
</div>

<div class="qs-step-card">
<span class="qs-step-num">PASUL 02</span>
<h3 class="qs-step-title">Descărcați Motorul</h3>
<p class="qs-step-desc">
Descărcați bundle-ul autonom precompilat direct din GitHub Releases în rădăcina proiectului.
</p>
<div class="qs-code-box"><code>curl -fsSL https://github.com/Octadira/vertiwiki/releases/latest/download/vertiwiki.html -o index.html</code></div>
</div>

<div class="qs-step-card">
<span class="qs-step-num">PASUL 03</span>
<h3 class="qs-step-title">Publicați &amp; Găzduiți Oriunde</h3>
<p class="qs-step-desc">
Publicați pe GitHub Pages, Cloudflare Pages, S3 sau rulați local cu orice server HTTP static.
</p>
<div class="qs-code-box">npx serve . # sau python3 -m http.server</div>
</div>
</div>
</div>
</section>

<!-- =========================================================
FREQUENTLY ASKED QUESTIONS
========================================================= -->
<section class="landing-section landing-section-subtle" id="faq">
<div class="landing-container">
<span class="section-eyebrow">Întrebări Frecvente</span>
<h2 class="section-title">Clarificări Tehnice</h2>
<p class="section-desc">
Răspunsuri la principalele întrebări tehnice despre arhitectură, rutare, securitate și performanță.
</p>

<div class="faq-grid">
<details class="faq-item">
<summary class="faq-summary">
<span>Cum funcționează VertiWiki fără compilare pe server?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
VertiWiki rulează 100% în browserul clientului. Când o rută este accesată, fișierul Markdown brut este descărcat prin <code>fetch()</code>, i se extrage frontmatter-ul YAML, se execută hook-urile din pipeline, se compilează prin Marked v15, se sanitizează prin DOMPurify și se montează în DOM în mai puțin de 2 milisecunde.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>Cum funcționează rezoluția linkurilor relative în subfoldere?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
VertiWiki include un modul automat de transformare (<code>router.transformLinks()</code>) care calculează căile relative de navigare în raport cu folderul documentului curent, garantând că linkurile Markdown și imaginile se deschid corect indiferent de adâncimea structurii.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>Cum ajută optimizarea AEO agenții și motoarele AI?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
La fiecare schimbare de pagină, VertiWiki generează automat microdate Schema.org <code>TechArticle</code> și <code>BreadcrumbList</code> în format JSON-LD, pune la dispoziție indexul structurat <code>llms.txt</code> conform AgentDocsSpec și oferă un buton dedicat de copiere cu metadate pentru asistenții AI.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>Poate rula VertiWiki complet offline sau pe rețele izolate?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
Da. Toate stilurile, fonturile WOFF2, formulele KaTeX și librăriile Mermaid sunt incluse direct în fișierul <code>index.html</code>. Cu un server static local (ex. <code>python3 -m http.server</code>), funcționează 100% offline fără conexiune la internet.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>Cum pot crea și încărca teme personalizate?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
Creați fișiere JSON în directorul <code>themes/</code> definind variabilele CSS pentru modurile deschis și închis. Înregistrați-le în <code>config.json</code> sub <code>"customThemes"</code> și devin selectabile instantaneu fără compilare de cod.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>Cum indexează motoarele de căutare paginile fără randare pe server (SSR)?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
VertiWiki integrează un <strong>Arbore Semantic de Crawl</strong> direct în shell-ul HTML inițial. Roboții de căutare precum Googlebot descoperă legături clasice ancoră către fiecare document încă de la prima cerere HTTP.
</div>
</details>
</div>
</div>
</section>

<!-- =========================================================
BOTTOM CALL TO ACTION
========================================================= -->
<section class="landing-section">
<div class="landing-container">
<div class="bottom-cta-box">
<h2 class="bottom-cta-title">Pregătit să Experimentați Documentația Zero-Backend?</h2>
<p class="bottom-cta-desc">
Explorați portalul de documentație VertiWiki direct în browser sau inspectați codul sursă pe GitHub.
</p>
<div style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">
<a href="quickstart.md" class="btn-hero-primary">Deschideți Documentația</a>
<a href="https://github.com/Octadira/vertiwiki" target="_blank" rel="noopener noreferrer" class="btn-hero-secondary">Repository GitHub</a>
</div>
</div>
</div>
</section>

<!-- =========================================================
RICH SITE FOOTER
========================================================= -->
<footer class="site-footer">
<div class="landing-container">
<div class="footer-grid">
<div class="footer-brand">
<h3>
<img src="../assets/logo.svg" width="22" height="22" alt="VertiWiki Logo" />
<span>VertiWiki</span>
</h3>
<p>
Motor de wiki și documentație Markdown 100% static, într-un singur fișier, construit pentru 2026 și dincolo de el.
</p>
</div>

<div class="footer-col">
<h4>Documentație</h4>
<ul>
<li><a href="quickstart.md">Ghid Rapid de 5 Minute</a></li>
<li><a href="installation.md">Instalare &amp; Găzduire</a></li>
<li><a href="concepts/architecture.md">Prezentare Arhitectură</a></li>
<li><a href="configuration/overview.md">Configurare &amp; Teme</a></li>
</ul>
</div>

<div class="footer-col">
<h4>Inginerie &amp; API</h4>
<ul>
<li><a href="reference/api.md">Catalog API TypeScript</a></li>
<li><a href="reference/boundary-interfaces.md">Interfețe de Graniță</a></li>
<li><a href="guides/development.md">Ghid de Dezvoltare</a></li>
<li><a href="configuration/security.md">Securitate &amp; Politici CSP</a></li>
<li><a href="sitemap.md">Hartă Interactivă a Site-ului</a></li>
</ul>
</div>

<div class="footer-col">
<h4>Open Source</h4>
<ul>
<li><a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferrer">Licență MIT</a></li>
<li><a href="../llms.txt" target="_blank">Index llms.txt</a></li>
<li><a href="../robots.txt" target="_blank">robots.txt</a></li>
<li><a href="Changelog.md">Note de Lansare</a></li>
</ul>
</div>
</div>

<div class="footer-bottom">
<div>&copy; 2026 Contribuitorii VertiWiki. Lansat sub Licență MIT.</div>
<div>Construit pentru 2026 și dincolo de el &bull; Propulsat de VertiWiki</div>
</div>
</div>
</footer>

</div>
