|
2 | 2 | {% block json_ld %} {{ include('@jsonld/index.jsonld.twig') }} {% endblock %} |
3 | 3 | {% block title %}A PSR-15 compliant application{% endblock %} |
4 | 4 |
|
| 5 | +{% block stylesheets %} |
| 6 | + <style> |
| 7 | + /* Product org-chart in the hero - scoped to this page. */ |
| 8 | + .org-chart { display: block; width: 100%; max-width: 380px; height: auto; margin: 6px auto 0; } |
| 9 | + .org-chart .oc-line { stroke: var(--text-dim); stroke-width: 1.8; fill: none; } |
| 10 | + .org-chart .oc-arrow { fill: var(--text-dim); } |
| 11 | + .org-chart .oc-badge { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; } |
| 12 | + .org-chart .oc-icon * { fill: none; stroke: var(--text-dim); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } |
| 13 | + .org-chart .oc-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; fill: var(--text-dim); text-anchor: middle; } |
| 14 | + .org-chart .oc-admin { fill: #E2862E; } |
| 15 | + .org-chart .oc-queue { fill: #22A06B; } |
| 16 | + .org-chart .oc-api { fill: var(--brand-red); } |
| 17 | + .org-chart .oc-box-name { font-family: var(--mono); font-weight: 700; text-anchor: middle; fill: var(--on-accent); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); } |
| 18 | + </style> |
| 19 | +{% endblock %} |
| 20 | + |
5 | 21 | {% block content %} |
6 | 22 |
|
7 | 23 | <section class="hero"> |
|
29 | 45 | </div> |
30 | 46 |
|
31 | 47 | <div class="pipeline"> |
32 | | - <div class="pipeline-label"><span>Request lifecycle</span></div> |
33 | | - <div class="pipeline-track"> |
34 | | - <div class="pl-packet" aria-hidden="true"></div> |
35 | | - <div class="pl-step"><span class="name">Router</span><span class="tag">FastRoute</span></div> |
36 | | - <div class="pl-step"><span class="name">Authentication</span><span class="tag">dot-authentication</span></div> |
37 | | - <div class="pl-step"><span class="name">RBAC guard</span><span class="tag">dot-rbac-guard</span></div> |
38 | | - <div class="pl-step"><span class="name">Your handler</span><span class="tag">PSR-15</span></div> |
39 | | - <div class="pl-step"><span class="name">Response</span><span class="tag">Diactoros</span></div> |
40 | | - </div> |
| 48 | + <div class="pipeline-label"><span>Three products, one core</span></div> |
| 49 | + <svg class="org-chart" viewBox="0 0 400 420" role="img" aria-label="An Admin box with an arrow into a Queue box, a double arrow down to a central API box, and four double arrows from the API box down to icon boxes for a smartphone, a computer, a person, and a cloud"> |
| 50 | + <defs> |
| 51 | + <marker id="oc-arrowhead" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"> |
| 52 | + <path d="M0,0 L10,5 L0,10 Z" class="oc-arrow"/> |
| 53 | + </marker> |
| 54 | + </defs> |
| 55 | + |
| 56 | + <rect class="oc-admin" x="30" y="20" width="90" height="44" rx="8"/> |
| 57 | + <text class="oc-box-name" x="75" y="47" font-size="14">Admin</text> |
| 58 | + |
| 59 | + <rect class="oc-queue" x="155" y="20" width="90" height="44" rx="8"/> |
| 60 | + <text class="oc-box-name" x="200" y="47" font-size="14">Queue</text> |
| 61 | + |
| 62 | + <rect class="oc-api" x="130" y="160" width="140" height="80" rx="12"/> |
| 63 | + <text class="oc-box-name" x="200" y="209" font-size="26">API</text> |
| 64 | + |
| 65 | + <circle class="oc-badge" cx="74" cy="348" r="32"/> |
| 66 | + <g class="oc-icon" transform="translate(74,348)"> |
| 67 | + <rect x="-6" y="-11" width="12" height="22" rx="2.5"/> |
| 68 | + <line x1="-3" y1="8" x2="3" y2="8"/> |
| 69 | + </g> |
| 70 | + <text class="oc-label" x="74" y="392">Mobile</text> |
| 71 | + |
| 72 | + <circle class="oc-badge" cx="158" cy="348" r="32"/> |
| 73 | + <g class="oc-icon" transform="translate(158,348)"> |
| 74 | + <rect x="-10" y="-8" width="20" height="13" rx="1.5"/> |
| 75 | + <line x1="0" y1="5" x2="0" y2="8"/> |
| 76 | + <line x1="-6" y1="9" x2="6" y2="9"/> |
| 77 | + </g> |
| 78 | + <text class="oc-label" x="158" y="392">Client</text> |
| 79 | + |
| 80 | + <circle class="oc-badge" cx="242" cy="348" r="32"/> |
| 81 | + <g class="oc-icon" transform="translate(242,348)"> |
| 82 | + <circle cx="0" cy="-4" r="5"/> |
| 83 | + <path d="M -9,10 C -9,2 9,2 9,10"/> |
| 84 | + </g> |
| 85 | + <text class="oc-label" x="242" y="392">Users</text> |
| 86 | + |
| 87 | + <circle class="oc-badge" cx="326" cy="348" r="32"/> |
| 88 | + <g class="oc-icon" transform="translate(326,348)"> |
| 89 | + <path d="M -6,-4 C -6,-7 -3,-9 0,-9 C 3,-9 6,-7 6,-4 C 9,-4 11,-2 11,1 C 11,3.5 9,5 6,5 L -8,5 C -11,5 -13,3 -13,0 C -13,-2.5 -11,-4.5 -8,-4.5 C -7.3,-4.5 -6.6,-4.3 -6,-4 Z"/> |
| 90 | + </g> |
| 91 | + <text class="oc-label" x="326" y="392">Cloud</text> |
| 92 | + |
| 93 | + <line class="oc-line" x1="120" y1="42" x2="155" y2="42" marker-end="url(#oc-arrowhead)"/> |
| 94 | + <line class="oc-line" x1="200" y1="64" x2="200" y2="160" marker-start="url(#oc-arrowhead)" marker-end="url(#oc-arrowhead)"/> |
| 95 | + <line class="oc-line" x1="200" y1="240" x2="74" y2="316" marker-start="url(#oc-arrowhead)" marker-end="url(#oc-arrowhead)"/> |
| 96 | + <line class="oc-line" x1="200" y1="240" x2="158" y2="316" marker-start="url(#oc-arrowhead)" marker-end="url(#oc-arrowhead)"/> |
| 97 | + <line class="oc-line" x1="200" y1="240" x2="242" y2="316" marker-start="url(#oc-arrowhead)" marker-end="url(#oc-arrowhead)"/> |
| 98 | + <line class="oc-line" x1="200" y1="240" x2="326" y2="316" marker-start="url(#oc-arrowhead)" marker-end="url(#oc-arrowhead)"/> |
| 99 | + </svg> |
41 | 100 | </div> |
42 | 101 | </div> |
43 | 102 | </section> |
|
0 commit comments