headless-cms-architecture.html 


<html lang="en">

  <head>

    <meta
      charset="utf-8"
    ></meta>

    <title>
      Headless CMS Architecture
    </title>

    <meta
      content="width=device-width, initial-scale=1"
      name="viewport"
    ></meta>

    <style>

      svg
      {
        max-width:
        720px;

        height:
        auto;

        font:
        
          14px system-ui, -apple-system,
          Segoe UI, Roboto, 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
      aria-label=
        "Headless CMS flows to Website (SSG)
        and Webhook Server, which flows to Blogger API"
      

      role="img"

      viewBox="0 0 720 300"
    >

      <!-- Headless CMS Box -->

      <rect
        class="box"
        height="48"
        width="160"
        x="280"
        y="20"
      ></rect>

      <text
        class="label"
        x="360"
        y="44"
      >
        Headless CMS
      </text>

      <!-- Website (SSG) -->

      <rect
        class="box"
        height="48"
        width="160"
        x="80"
        y="140"
      ></rect>

      <text
        class="label"
        x="160"
        y="164"
      >
        Website (SSG)
      </text>

      <!-- Webhook Server -->

      <rect
        class="box"
        height="48"
        width="160"
        x="480"
        y="140"
      ></rect>

      <text
        class="label"
        x="560"
        y="164"
      >
        Webhook Server
      </text>

      <!-- Blogger API -->

      <rect
        class="box"
        height="48"
        width="160"
        x="480"
        y="240"
      ></rect>

      <text
        class="label"
        x="560"
        y="264"
      >
        Blogger API
      </text>

      <!-- Connection Paths -->

      <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