import { A, createAsync, RouteSectionProps } from "@solidjs/router" import { Title, Meta } from "@solidjs/meta" import { createMemo, createSignal } from "solid-js" import { github } from "~/lib/github" import { config } from "~/config" import { useLanguage } from "~/context/language" import { LanguagePicker } from "~/component/language-picker" import { useI18n } from "~/context/i18n" import Spotlight, { defaultConfig, type SpotlightAnimationState } from "~/component/spotlight" import { LocaleLinks } from "~/component/locale-links" import "./black.css" export default function BlackLayout(props: RouteSectionProps) { const language = useLanguage() const i18n = useI18n() const githubData = createAsync(() => github()) const starCount = createMemo(() => githubData()?.stars ? new Intl.NumberFormat(language.tag(language.locale()), { notation: "compact", compactDisplay: "short", }).format(githubData()!.stars!) : config.github.starsFormatted.compact, ) const [spotlightAnimationState, setSpotlightAnimationState] = createSignal({ time: 0, intensity: 0.5, pulseValue: 1, }) const svgLightingValues = createMemo(() => { const state = spotlightAnimationState() const t = state.time const wave1 = Math.sin(t * 1.5) * 0.5 + 0.5 const wave2 = Math.sin(t * 2.3 + 1.2) * 0.5 + 0.5 const wave3 = Math.sin(t * 0.8 + 2.5) * 0.5 + 0.5 const shimmerPos = Math.sin(t * 0.7) * 0.5 + 0.5 const glowIntensity = Math.max(state.intensity * state.pulseValue * 0.35, 0.15) const fillOpacity = Math.max(0.1 + wave1 * 0.08 * state.pulseValue, 0.12) const strokeBrightness = Math.max(55 + wave2 * 25 * state.pulseValue, 60) const shimmerIntensity = Math.max(wave3 * 0.15 * state.pulseValue, 0.08) return { glowIntensity, fillOpacity, strokeBrightness, shimmerPos, shimmerIntensity, } }) const svgLightingStyle = createMemo(() => { const values = svgLightingValues() return { "--hero-black-glow-intensity": values.glowIntensity.toFixed(3), "--hero-black-stroke-brightness": `${values.strokeBrightness.toFixed(0)}%`, } as Record }) const handleAnimationFrame = (state: SpotlightAnimationState) => { setSpotlightAnimationState(state) } const spotlightConfig = () => defaultConfig return (

{i18n.t("black.meta.title")}

{i18n.t("black.hero.title")}

{i18n.t("black.hero.subtitle")}

{props.children}

) }