ctao/content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

demo article in English: stack overview and redesigned architecture diagrams

Browse Source
This commit is contained in:
ctao
2026-09-11 13:58:49 +02:00
parent 43e2bb4061
commit 9ca89f3e40
13 changed files with 573 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uploads/diagrams/stack-overview.svg
+70
View File
@@ -0,0 +1,70 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 700" role="img" aria-label="The three parts of the stack: Sveltia CMS as the editor, git and Gitea as the database, Astro as the build-time generator; when a reader opens a page only nginx and the generated files are involved">
<defs>
<marker id="arr0" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M0 0 L10 5 L0 10 z" fill="#00004a"/>
</marker>
<filter id="soft0" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="5" flood-color="#00004a" flood-opacity="0.10"/>
</filter>
<style>
.t { font-family: Inter, "Segoe UI", Arial, sans-serif; }
.card { fill: #ffffff; stroke: #00004a; stroke-width: 1.5; }
.ttl { font-weight: 700; font-size: 19px; fill: #00004a; letter-spacing: .04em; }
.cap { font-size: 15.5px; fill: #46536a; }
.chipbg { fill: #d2faf7; }
.chip { font-size: 12.5px; font-weight: 700; fill: #00004a; letter-spacing: .06em; }
.gain { font-size: 15.5px; font-weight: 700; fill: #101228; }
.flow { stroke: #00004a; stroke-width: 1.8; fill: none; marker-end: url(#arr0); }
.lbl { font-size: 14px; fill: #46536a; }
.band { fill: #f5f5f5; stroke: #e2e5ee; }
.bandtxt { font-size: 14px; fill: #101228; }
</style>
</defs>
<!-- row 1: the editor -->
<g filter="url(#soft0)"><rect class="card" x="20" y="20" width="760" height="160" rx="16"/></g>
<text class="t ttl" x="48" y="68">SVELTIA CMS</text>
<rect class="chipbg" x="48" y="84" width="78" height="26" rx="13"/>
<text class="t chip" x="87" y="102" text-anchor="middle">EDITOR</text>
<text class="t gain" x="48" y="142">every save is</text>
<text class="t gain" x="48" y="164">a commit</text>
<line x1="284" y1="46" x2="284" y2="154" stroke="#e2e5ee" stroke-width="1"/>
<circle cx="312" cy="64" r="3" fill="#00e4d8"/><text class="t cap" x="330" y="69">visual editing in the browser at /admin/</text>
<circle cx="312" cy="98" r="3" fill="#00e4d8"/><text class="t cap" x="330" y="103">one JavaScript file, no server to run</text>
<circle cx="312" cy="132" r="3" fill="#00e4d8"/><text class="t cap" x="330" y="137">signs in to Gitea over OAuth</text>
<path class="flow" d="M400 180 V220"/>
<text class="t lbl" x="414" y="205">commit</text>
<!-- row 2: the storage -->
<g filter="url(#soft0)"><rect class="card" x="20" y="224" width="760" height="160" rx="16"/></g>
<text class="t ttl" x="48" y="272">GIT · GITEA</text>
<rect class="chipbg" x="48" y="288" width="86" height="26" rx="13"/>
<text class="t chip" x="91" y="306" text-anchor="middle">STORAGE</text>
<text class="t gain" x="48" y="346">the repository</text>
<text class="t gain" x="48" y="368">is the database</text>
<line x1="284" y1="250" x2="284" y2="358" stroke="#e2e5ee" stroke-width="1"/>
<circle cx="312" cy="268" r="3" fill="#00e4d8"/><text class="t cap" x="330" y="273">articles as Markdown files</text>
<circle cx="312" cy="302" r="3" fill="#00e4d8"/><text class="t cap" x="330" y="307">images stored next to them</text>
<circle cx="312" cy="336" r="3" fill="#00e4d8"/><text class="t cap" x="330" y="341">history, diff and revert built in</text>
<path class="flow" d="M400 384 V424"/>
<text class="t lbl" x="414" y="409">build</text>
<!-- row 3: the generator -->
<g filter="url(#soft0)"><rect class="card" x="20" y="428" width="760" height="160" rx="16"/></g>
<text class="t ttl" x="48" y="476">ASTRO</text>
<rect class="chipbg" x="48" y="492" width="110" height="26" rx="13"/>
<text class="t chip" x="103" y="510" text-anchor="middle">BUILD ONLY</text>
<text class="t gain" x="48" y="550">nothing of it runs</text>
<text class="t gain" x="48" y="572">in production</text>
<line x1="284" y1="454" x2="284" y2="562" stroke="#e2e5ee" stroke-width="1"/>
<circle cx="312" cy="472" r="3" fill="#00e4d8"/><text class="t cap" x="330" y="477">Markdown becomes static HTML</text>
<circle cx="312" cy="506" r="3" fill="#00e4d8"/><text class="t cap" x="330" y="511">article fields checked at build time</text>
<circle cx="312" cy="540" r="3" fill="#00e4d8"/><text class="t cap" x="330" y="545">React islands where they are needed</text>
<!-- what the reader actually touches -->
<rect class="band" x="20" y="616" width="760" height="64" rx="32"/>
<text class="t bandtxt" x="400" y="645" text-anchor="middle">When a reader opens a page, only nginx and the generated files are involved.</text>
<text class="t bandtxt" x="400" y="667" text-anchor="middle">No application, no database, no admin login.</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB