90 lines
3.3 KiB
Svelte
90 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
/* eslint-disable svelte/no-at-html-tags */
|
|
import ShieldAlertIcon from '@lucide/svelte/icons/shield-alert';
|
|
import { m } from '$lib/paraglide/messages';
|
|
</script>
|
|
|
|
<div class="space-y-10">
|
|
<!-- Headline -->
|
|
<div class="space-y-4">
|
|
<h1 class="text-4xl font-extrabold tracking-tight md:text-5xl leading-none">
|
|
{m.docs_security_title()}
|
|
</h1>
|
|
<p class="text-muted-foreground text-lg leading-relaxed text-pretty max-w-2xl">
|
|
{m.docs_security_desc()}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Critical Warning -->
|
|
<div
|
|
class="flex items-start gap-3 border border-amber-500/20 bg-amber-500/5 rounded-xl p-6 text-sm leading-relaxed text-pretty text-muted-foreground"
|
|
>
|
|
<ShieldAlertIcon class="size-5 shrink-0 text-amber-500 mt-0.5" />
|
|
<div class="space-y-1">
|
|
<strong
|
|
class="text-amber-700/90 dark:text-amber-500 font-mono text-xs uppercase tracking-wider"
|
|
>{m.docs_security_warning_title()}</strong
|
|
>
|
|
<p>{@html m.docs_security_warning_desc()}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Suggested Deployments -->
|
|
<div class="space-y-6 border-t border-border/60 pt-8">
|
|
<h2 class="text-xl font-bold tracking-tight">{m.docs_security_deploy_title()}</h2>
|
|
<p class="text-muted-foreground text-sm leading-relaxed text-pretty max-w-2xl">
|
|
{m.docs_security_deploy_desc()}
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4">
|
|
<div class="border border-border/60 rounded-xl p-5 bg-muted/5 space-y-2">
|
|
<h3 class="font-bold text-foreground text-base">{m.docs_security_deploy_coloc_title()}</h3>
|
|
<p class="text-muted-foreground text-sm leading-relaxed text-pretty">
|
|
{@html m.docs_security_deploy_coloc_desc()}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="border border-border/60 rounded-xl p-5 bg-muted/5 space-y-2">
|
|
<h3 class="font-bold text-foreground text-base">{m.docs_security_deploy_vpn_title()}</h3>
|
|
<p class="text-muted-foreground text-sm leading-relaxed text-pretty">
|
|
{@html m.docs_security_deploy_vpn_desc()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VPN ACL & Firewall -->
|
|
<div class="space-y-6 border-t border-border/60 pt-8">
|
|
<h2 class="text-xl font-bold tracking-tight">{m.docs_security_acl_title()}</h2>
|
|
<p class="text-muted-foreground text-sm leading-relaxed text-pretty max-w-2xl">
|
|
{m.docs_security_acl_desc()}
|
|
</p>
|
|
<ul class="list-disc pl-5 text-muted-foreground text-sm space-y-3 leading-relaxed">
|
|
<li>
|
|
{@html m.docs_security_acl_tailscale()}
|
|
<pre
|
|
class="mt-2 bg-muted p-3 rounded-lg overflow-x-auto">"src": ["tag:nadir-ui"], "dst": ["tag:nadir-agent:9999"]</pre>
|
|
</li>
|
|
<li>{@html m.docs_security_acl_netbird()}</li>
|
|
<li>
|
|
{@html m.docs_security_acl_iptables()}
|
|
<pre
|
|
class="mt-2 bg-muted p-3 rounded-lg overflow-x-auto">iptables -A INPUT -i wg0 ! -s <proxy-wg-ip> -p tcp --dport 9999 -j DROP</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- TLS Configuration -->
|
|
<div class="space-y-6 border-t border-border/60 pt-8">
|
|
<h2 class="text-xl font-bold tracking-tight">{m.docs_security_tls_title()}</h2>
|
|
<p class="text-muted-foreground text-sm leading-relaxed text-pretty max-w-2xl">
|
|
{m.docs_security_tls_desc()}
|
|
</p>
|
|
<ol class="list-decimal pl-5 text-muted-foreground text-sm space-y-3 leading-relaxed">
|
|
<li>{@html m.docs_security_tls_proxy_desc()}</li>
|
|
<li>{@html m.docs_security_tls_direct_desc()}</li>
|
|
<li>{@html m.docs_security_tls_self_desc()}</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|