125 lines
4.5 KiB
Vue
125 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import OperationsProof from './OperationsProof.vue';
|
|
import type { InfrastructureCaseStudy } from "@/content/types";
|
|
|
|
defineProps<{ infrastructure: Readonly<InfrastructureCaseStudy> }>();
|
|
</script>
|
|
|
|
<template>
|
|
<article class="infrastructure-case">
|
|
<h3 :id="`${infrastructure.id}-diagram-title`">
|
|
{{ infrastructure.title }}
|
|
</h3>
|
|
<p :id="`${infrastructure.id}-diagram-description`">
|
|
{{ infrastructure.summary }}
|
|
</p>
|
|
<figure class="infrastructure-flow-figure">
|
|
<div
|
|
class="infrastructure-flow"
|
|
data-testid="infrastructure-flow"
|
|
role="img"
|
|
:aria-labelledby="`${infrastructure.id}-diagram-title`"
|
|
:aria-describedby="`${infrastructure.id}-diagram-description`"
|
|
>
|
|
<div class="infrastructure-flow__route" aria-hidden="true">
|
|
<div
|
|
class="infrastructure-node infrastructure-node--visitor"
|
|
data-infrastructure-node="visitor"
|
|
>
|
|
<span class="infrastructure-node__sequence">Request</span>
|
|
<strong>Visitor</strong>
|
|
<span class="infrastructure-node__detail">Inbound traffic</span>
|
|
</div>
|
|
|
|
<div
|
|
class="infrastructure-node infrastructure-node--ingress"
|
|
data-infrastructure-node="nginx-tls"
|
|
>
|
|
<span class="infrastructure-boundary" data-trust-boundary
|
|
>Public edge</span
|
|
>
|
|
<span class="infrastructure-node__connector"></span>
|
|
<span class="infrastructure-node__sequence">01 / edge</span>
|
|
<strong>Nginx and TLS</strong>
|
|
<span class="infrastructure-node__detail">Encrypted ingress</span>
|
|
<span class="infrastructure-node__guard">fail2ban guard</span>
|
|
</div>
|
|
|
|
<div
|
|
class="infrastructure-node infrastructure-node--access"
|
|
data-infrastructure-node="authentication"
|
|
>
|
|
<span class="infrastructure-boundary" data-trust-boundary
|
|
>Access boundary</span
|
|
>
|
|
<span class="infrastructure-node__connector"></span>
|
|
<span class="infrastructure-node__sequence">02 / verify</span>
|
|
<strong>Authentication</strong>
|
|
<span class="infrastructure-node__detail">Protected access</span>
|
|
</div>
|
|
|
|
<div
|
|
class="infrastructure-node infrastructure-node--services"
|
|
data-infrastructure-node="containerized-services"
|
|
>
|
|
<span class="infrastructure-boundary" data-trust-boundary
|
|
>Service boundary</span
|
|
>
|
|
<span class="infrastructure-node__connector"></span>
|
|
<span class="infrastructure-node__sequence">03 / run</span>
|
|
<strong>Containerized services</strong>
|
|
<span class="infrastructure-node__detail">Managed workloads</span>
|
|
</div>
|
|
|
|
<div
|
|
class="infrastructure-node infrastructure-node--operations"
|
|
data-infrastructure-node="operations"
|
|
>
|
|
<span
|
|
class="infrastructure-node__connector infrastructure-node__connector--vertical"
|
|
></span>
|
|
<span class="infrastructure-node__sequence">04 / sustain</span>
|
|
<strong>Operations</strong>
|
|
<span class="infrastructure-node__detail"
|
|
>Lifecycle + maintenance</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<figcaption>{{ infrastructure.title }}</figcaption>
|
|
</figure>
|
|
<dl
|
|
class="infrastructure-legend"
|
|
aria-label="Infrastructure diagram legend"
|
|
>
|
|
<div>
|
|
<dt>
|
|
<span
|
|
class="infrastructure-legend__boundary"
|
|
aria-hidden="true"
|
|
/>Trust boundary
|
|
</dt>
|
|
<dd>Where trust or access rules change</dd>
|
|
</div>
|
|
<div>
|
|
<dt>
|
|
<span class="infrastructure-legend__flow" aria-hidden="true" />Request
|
|
flow
|
|
</dt>
|
|
<dd>The direction traffic moves through the system</dd>
|
|
</div>
|
|
</dl>
|
|
<ul data-testid="infrastructure-text-equivalent">
|
|
<li>
|
|
<strong>Legend</strong>: Boundary labels mark changes in trust or access
|
|
rules. Connectors show request flow direction.
|
|
</li>
|
|
<li v-for="band in infrastructure.bands" :key="band.id">
|
|
<strong>{{ band.title }}</strong
|
|
>: {{ band.summary }}
|
|
</li>
|
|
</ul>
|
|
<OperationsProof id="nextcloud-migration" :operation="infrastructure.featuredOperation" />
|
|
</article>
|
|
</template>
|