headless-cms-architecture.html
<!-- HTML DOCUMENT -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Headless CMS Architecture
</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<style>
svg {
max-width: 720px;
height: auto;
font: 14px system-ui, sans-serif;
}
.box {
fill: #fff;
stroke: #444;
stroke-width: 2;
rx: 8;
}
.label {
text-anchor: middle;
dominant-baseline: middle;
}
.edge {
stroke: #444;
stroke-width: 2;
fill: none;
}
</style>
</head>
<body>
<svg
viewBox="0 0 720 300"
role="img"
aria-label="Headless CMS Architecture Diagram"
>
<!-- Headless CMS -->
<rect
class="box"
x="280"
y="20"
width="160"
height="48"
></rect>
<text
class="label"
x="360"
y="44"
>
Headless CMS
</text>
<!-- Website (SSG) -->
<rect
class="box"
x="80"
y="140"
width="160"
height="48"
></rect>
<text
class="label"
x="160"
y="164"
>
Website (SSG)
</text>
<!-- Webhook Server -->
<rect
class="box"
x="480"
y="140"
width="160"
height="48"
></rect>
<text
class="label"
x="560"
y="164"
>
Webhook Server
</text>
<!-- Blogger API -->
<rect
class="box"
x="480"
y="240"
width="160"
height="48"
></rect>
<text
class="label"
x="560"
y="264"
>
Blogger API
</text>
<!-- Connections -->
<path
class="edge"
d="M360,68 V104 H160 v36"
></path>
<path
class="edge"
d="M360,68 V104 H560 v36"
></path>
<path
class="edge"
d="M560,188 v52"
></path>
</svg>
</body>
</html>
Comments
Post a Comment