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

Popular posts from this blog

[MAIN PROGRAM] UNDONE HOUSEHOLD WORKs WEB-PROGRAM v2/MAIN

Waiting to test Firebase… Write Test Data Read Test Data Delete Tester Data Category Manager (CRUD) ADD NEW Category: Add Category Existing Categories Category Actions Create New Task Task Title: Category: ADD NEW: Create Task Task List Filter by Category: (All Categories) Task ID Title Category Overall Status Manage Phase Manager Category for this Task: ADD NEW: Save Category Phase Number: Phase Status: Phase Description: Add Phase Existing Phases: Phase Status Description Upload Spreadsheet → Import to Firebase Expected columns in sheet: Title , Phase Number , Phase Status , Description , and optional Category . Value na or not available ...
Read more

PENDING ITEMs [REVISION] v0

🔗 My Pending and Delayed POSTs SUMMARY Sort by Date Sort by Auto Title Sort by My Title Ascending Descending Insert URL: Your Own Title (Optional): ➕ ADD ENTRY 💾 SAVE EDIT DATE AUTO TITLE MY TITLE URL ACTIONS 📝 TO DO LIST SUMMARY  Sort by Date Sort by Header Sort by Detail Ascending Descending Header (Title): Detail: ➕ ADD ENTRY ...
Read more