chore: format

Projects/kompose/docs/app/components/content/HeroBackground.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-const { isLoading } = useLoadingIndicator()
+const { isLoading } = useLoadingIndicator();
 
-const appear = ref(false)
-const appeared = ref(false)
+const appear = ref(false);
+const appeared = ref(false);
 
 onMounted(() => {
-  setTimeout(() => {
-    appear.value = true
-    setTimeout(() => {
-      appeared.value = true
-    }, 1000)
-  }, 0)
-})
+	setTimeout(() => {
+		appear.value = true;
+		setTimeout(() => {
+			appeared.value = true;
+		}, 1000);
+	}, 0);
+});
 </script>
 
 <template>

Projects/kompose/docs/app/components/content/StarsBg.vue

@@ -1,58 +1,67 @@
 <script setup lang="ts">
 interface Star {
-  x: number
-  y: number
-  size: number
+	x: number;
+	y: number;
+	size: number;
 }
 
-const props = withDefaults(defineProps<{
-  starCount?: number
-  color?: string
-  speed?: 'slow' | 'normal' | 'fast'
-  size?: { min: number, max: number }
-}>(), {
-  starCount: 300,
-  color: 'var(--ui-primary)',
-  speed: 'normal',
-  size: () => ({
-    min: 1,
-    max: 2
-  })
-})
+const props = withDefaults(
+	defineProps<{
+		starCount?: number;
+		color?: string;
+		speed?: "slow" | "normal" | "fast";
+		size?: { min: number; max: number };
+	}>(),
+	{
+		starCount: 300,
+		color: "var(--ui-primary)",
+		speed: "normal",
+		size: () => ({
+			min: 1,
+			max: 2,
+		}),
+	},
+);
 
 // Generate random star positions and sizes
 const generateStars = (count: number): Star[] => {
-  return Array.from({ length: count }, () => ({
-    x: Math.floor(Math.random() * 2000),
-    y: Math.floor(Math.random() * 2000),
-    size: typeof props.size === 'number'
-      ? props.size
-      : Math.random() * (props.size.max - props.size.min) + props.size.min
-  }))
-}
+	return Array.from({ length: count }, () => ({
+		x: Math.floor(Math.random() * 2000),
+		y: Math.floor(Math.random() * 2000),
+		size:
+			typeof props.size === "number"
+				? props.size
+				: Math.random() * (props.size.max - props.size.min) + props.size.min,
+	}));
+};
 
 // Define speed configurations once
 const speedMap = {
-  slow: { duration: 200, opacity: 0.5, ratio: 0.3 },
-  normal: { duration: 150, opacity: 0.75, ratio: 0.3 },
-  fast: { duration: 100, opacity: 1, ratio: 0.4 }
-}
+	slow: { duration: 200, opacity: 0.5, ratio: 0.3 },
+	normal: { duration: 150, opacity: 0.75, ratio: 0.3 },
+	fast: { duration: 100, opacity: 1, ratio: 0.4 },
+};
 
 // Use a more efficient approach to generate and store stars
-const stars = useState<{ slow: Star[], normal: Star[], fast: Star[] }>('stars', () => {
-  return {
-    slow: generateStars(Math.floor(props.starCount * speedMap.slow.ratio)),
-    normal: generateStars(Math.floor(props.starCount * speedMap.normal.ratio)),
-    fast: generateStars(Math.floor(props.starCount * speedMap.fast.ratio))
-  }
-})
+const stars = useState<{ slow: Star[]; normal: Star[]; fast: Star[] }>(
+	"stars",
+	() => {
+		return {
+			slow: generateStars(Math.floor(props.starCount * speedMap.slow.ratio)),
+			normal: generateStars(
+				Math.floor(props.starCount * speedMap.normal.ratio),
+			),
+			fast: generateStars(Math.floor(props.starCount * speedMap.fast.ratio)),
+		};
+	},
+);
 
 // Compute star layers with different speeds and opacities
 const starLayers = computed(() => [
-  { stars: stars.value.fast, ...speedMap.fast },
-  { stars: stars.value.normal, ...speedMap.normal },
-  { stars: stars.value.slow, ...speedMap.slow }
-])
+	{ stars: stars.value.fast, ...speedMap.fast },
+	{ stars: stars.value.normal, ...speedMap.normal },
+	{ stars: stars.value.slow, ...speedMap.slow },
+]);
 </script>
 
 <template>