flightsimulatorplatfrom/OpenSquawk
1
0
Fork 0
mirror of https://github.com/OpenSquawk/OpenSquawk synced 2026-08-09 19:16:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: tighten navigation and hero layout

Browse Source
This commit is contained in:
Remi
2025-10-04 19:00:01 +02:00
committed by itsrubberduck
parent 511176fdb6
commit de2ba60a7b
1 changed files with 41 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/pages/api-docs.vue
View File

@@ -52,15 +52,13 @@
</p>
</header>
<div class="flex max-h-full flex-col gap-6 overflow-y-auto p-5 pr-4 text-sm text-white/70">
<NuxtLink :to="`#${generalAnchor}`" class="block rounded-2xl border px-4 py-3 transition"
<NuxtLink :to="`#${generalAnchor}`" class="flex items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm transition"
:class="activeAnchor === generalAnchor
? 'border-cyan-400/80 bg-cyan-500/15 text-white'
: 'border-transparent bg-white/0 hover:border-cyan-400/60 hover:bg-cyan-500/10'"
? 'bg-cyan-500/20 text-white'
: 'text-white/70 hover:bg-white/10 hover:text-white'"
@click="handleAnchorClick(generalAnchor)">
<span class="flex items-center justify-between gap-3">
<span class="font-medium">About the API</span>
<span class="text-[10px] uppercase tracking-[0.25em] text-white/40">Overview</span>
</span>
<span class="font-medium">About the API</span>
<span class="text-[10px] uppercase tracking-[0.25em] text-white/40">Overview</span>
</NuxtLink>
<template v-if="navigationSections.length">
@@ -69,22 +67,16 @@
<div class="space-y-2">
<div v-for="group in navSection.groups" :key="group.title" class="space-y-1">
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-white/45">{{ group.title }}</p>
<ul class="space-y-1">
<ul class="space-y-0.5">
<li v-for="endpoint in group.endpoints" :key="endpoint.anchor">
<NuxtLink :to="`#${endpoint.anchor}`" class="block rounded-xl border px-4 py-3 transition"
<NuxtLink :to="`#${endpoint.anchor}`"
class="block rounded-lg px-3 py-1.5 text-left leading-tight transition"
:class="activeAnchor === endpoint.anchor
? 'border-cyan-400/80 bg-cyan-500/15 text-white'
: 'border-transparent bg-white/0 hover:border-cyan-400/60 hover:bg-cyan-500/10'"
? 'bg-cyan-500/20 text-white'
: 'text-white/70 hover:bg-white/10 hover:text-white'"
@click="handleAnchorClick(endpoint.anchor)">
<div class="flex items-start gap-2">
<span :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-wide', methodColor(endpoint.method)]">
{{ endpoint.method }}
</span>
<div class="min-w-0 flex-1">
<p class="truncate font-medium text-white">{{ endpoint.path }}</p>
<p class="line-clamp-2 text-xs text-white/60">{{ endpoint.summary }}</p>
</div>
</div>
<p class="truncate text-[13px] font-medium">{{ endpoint.path }}</p>
<p v-if="endpoint.summary" class="line-clamp-2 text-[11px] text-white/50">{{ endpoint.summary }}</p>
</NuxtLink>
</li>
</ul>
@@ -101,6 +93,23 @@
</aside>
<main class="space-y-12">
<section class="overflow-hidden rounded-3xl border border-white/10 bg-white/5">
<div class="h-56 w-full bg-cover bg-center"
style="background-image: url('/img/learn/missions/full-flight/briefing-weather.png');"></div>
<div class="space-y-3 p-6 sm:p-8">
<div class="flex flex-wrap gap-2">
<NuxtLink v-for="target in quickJumpTargets" :key="target.anchor" :to="`#${target.anchor}`"
class="inline-flex items-center rounded-full border px-4 py-2 text-sm transition"
:class="activeAnchor === target.anchor
? 'border-cyan-300/70 bg-cyan-500/20 text-white'
: 'border-white/15 bg-black/40 text-white/70 hover:border-cyan-400/60 hover:text-white'"
@click="handleAnchorClick(target.anchor)">
{{ target.label }}
</NuxtLink>
</div>
</div>
</section>
<section :id="generalAnchor" :ref="setAnchorRef(generalAnchor)"
class="space-y-6 rounded-3xl border border-white/10 bg-gradient-to-br from-white/10 via-white/5 to-transparent p-8">
<header class="space-y-3">
@@ -1056,6 +1065,18 @@ const navigationSections = computed<NavigationSectionItem[]>(() =>
.filter((section) => section.groups.length > 0),
)
const quickJumpTargets = computed(() => {
const sectionTargets = filteredSections.value.map((section) => ({
label: section.title,
anchor: sectionAnchor(section.title),
}))
return [
{ label: 'About the API', anchor: generalAnchor },
...sectionTargets,
]
})
const getEndpointKey = (endpoint: EndpointEntry) => `${endpoint.method.toUpperCase()}-${endpoint.path}`
const setAnchorRef = (anchor: string) => (el: HTMLElement | null) => {