d018002c3e
- Restructure sidebar: Start → Guide → Operations → Developers → Reference - Fix EN/RU sidebar order (Installation before Quickstart) - Expand troubleshooting with diagnostics commands and task-log triage - Improve quickstart with prerequisites, pitfalls, and contributor links - Expand installation docs with verification commands - Add cyberpunk hero theme to landing page - Add atomicFile utility with tests and stage-runtime script - Harden team provisioning with better error handling and progress output - Add cross-team communication, kanban, and workSync improvements
62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { HERO_SCENE_VIEWBOX, type HeroConnection } from "~/data/heroScene";
|
|
|
|
defineProps<{
|
|
connections: readonly HeroConnection[];
|
|
activeConnectionId?: string | null;
|
|
reducedMotion?: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<svg
|
|
class="cyber-connectors"
|
|
:viewBox="`0 0 ${HERO_SCENE_VIEWBOX.width} ${HERO_SCENE_VIEWBOX.height}`"
|
|
aria-hidden="true"
|
|
>
|
|
<g class="cyber-connectors__paths">
|
|
<template v-for="connection in connections" :key="connection.id">
|
|
<path
|
|
class="cyber-connectors__path-glow"
|
|
:class="[
|
|
`cyber-connectors__path-glow--${connection.accent}`,
|
|
{ 'cyber-connectors__path-glow--active': activeConnectionId === connection.id },
|
|
]"
|
|
:d="connection.pathDesktop"
|
|
vector-effect="non-scaling-stroke"
|
|
/>
|
|
<path
|
|
:id="`cyber-path-${connection.id}`"
|
|
class="cyber-connectors__path"
|
|
:class="[
|
|
`cyber-connectors__path--${connection.accent}`,
|
|
{ 'cyber-connectors__path--active': activeConnectionId === connection.id },
|
|
]"
|
|
:d="connection.pathDesktop"
|
|
vector-effect="non-scaling-stroke"
|
|
/>
|
|
</template>
|
|
</g>
|
|
|
|
<g v-if="!reducedMotion" class="cyber-connectors__packets">
|
|
<circle
|
|
v-for="connection in connections"
|
|
:key="`packet-${connection.id}`"
|
|
class="cyber-connectors__packet"
|
|
:class="[
|
|
`cyber-connectors__packet--${connection.accent}`,
|
|
{ 'cyber-connectors__packet--active': activeConnectionId === connection.id },
|
|
]"
|
|
r="4"
|
|
>
|
|
<animateMotion
|
|
:dur="`${connection.packetDurationMs}ms`"
|
|
repeatCount="indefinite"
|
|
:begin="`${connection.packetDelayMs}ms`"
|
|
>
|
|
<mpath :href="`#cyber-path-${connection.id}`" />
|
|
</animateMotion>
|
|
</circle>
|
|
</g>
|
|
</svg>
|
|
</template>
|