robertas_stauskas
a70f3262e0
Go backend (miekg/dns) + Nuxt 3 frontend (Tailwind CSS v4). 8 check categories, 52 checks total: - Overview: @ record, WWW, MX with ASN/provider lookup - Domain Registration: expiry, registrar (RDAP + whois fallback) - Parent Delegation: NS records, glue, consistency - Nameservers: 17 checks (reachability, auth, recursion, TCP/UDP, AXFR, etc.) - SOA: serial consistency, timing values - Mail (MX): 11 checks (CNAME, PTR, public IPs, consistency) - Mail Auth: SPF, DKIM, DMARC - WWW: A record, CNAME Features: - SSE streaming (results appear as each category completes) - SQLite history (modernc.org/sqlite) - Rate limiting, CORS, request logging - Dark mode, responsive design
75 lines
2.7 KiB
Vue
75 lines
2.7 KiB
Vue
<template>
|
|
<div class="border-b border-gray-100 last:border-b-0 dark:border-gray-800">
|
|
<div
|
|
class="flex items-start gap-3 px-4"
|
|
:class="[
|
|
compact ? 'py-2' : 'py-3',
|
|
hasDetails ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50' : 'cursor-default'
|
|
]"
|
|
@click="hasDetails && (detailsOpen = !detailsOpen)"
|
|
>
|
|
<div class="mt-0.5 shrink-0" v-if="!compact">
|
|
<StatusBadge :status="check.status" />
|
|
</div>
|
|
<div v-else class="mt-1.5 shrink-0">
|
|
<span class="inline-block h-1.5 w-1.5 rounded-full"
|
|
:class="{
|
|
'bg-green-500': check.status === 'pass',
|
|
'bg-blue-500': check.status === 'info',
|
|
}"
|
|
></span>
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-baseline justify-between gap-2">
|
|
<h4 :class="compact ? 'text-xs text-gray-700 dark:text-gray-300' : 'text-sm font-medium text-gray-900 dark:text-white'">
|
|
{{ check.title }}
|
|
<span v-if="compact" class="text-gray-400 dark:text-gray-500"> — {{ check.message }}</span>
|
|
</h4>
|
|
</div>
|
|
<p v-if="!compact" class="mt-0.5 text-sm text-gray-600 dark:text-gray-400">{{ check.message }}</p>
|
|
</div>
|
|
<div v-if="hasDetails && !compact" class="mt-1 shrink-0 text-gray-400 dark:text-gray-500">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-4 w-4 transition-transform"
|
|
:class="{ 'rotate-180': detailsOpen }"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div v-if="detailsOpen && hasDetails" class="border-t border-gray-100 bg-gray-50 px-4 py-3 dark:border-gray-800 dark:bg-gray-800/30">
|
|
<ul class="space-y-1">
|
|
<li
|
|
v-for="(detail, i) in check.details"
|
|
:key="i"
|
|
class="flex items-start gap-2 text-sm text-gray-600 dark:text-gray-400"
|
|
>
|
|
<span class="mt-1.5 inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400 dark:bg-gray-500"></span>
|
|
<span class="font-mono text-xs leading-relaxed">{{ detail }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { CheckResult as CheckResultType } from '~/types/dns'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
check: CheckResultType
|
|
defaultExpanded?: boolean
|
|
compact?: boolean
|
|
}>(), {
|
|
defaultExpanded: false,
|
|
compact: false,
|
|
})
|
|
|
|
const detailsOpen = ref(props.defaultExpanded)
|
|
const hasDetails = computed(() => props.check.details && props.check.details.length > 0)
|
|
</script>
|