feature: add scroll snap

hozlucas28 · hozlucas28 · commit cb76595ebe8e · 2025-04-07T16:33:04.000-03:00
diff --git a/src/layouts/index.astro b/src/layouts/index.astro
@@ -26,6 +26,15 @@ const avatar: AvatarProps = {
 	description={BRAND.description}
 	keywords='películas, ver películas, películas online, películas en línea, películas completas, películas en streaming, series, ver series, series online, series en línea, series completas, series en streaming, lucas hoz, hoz lucas, lucashoz, hozlucas, hozlucas28'
 	pageURL={pageURL}
+	classes={{
+		html: 'snap-y snap-mandatory',
+		body: {
+			main: {
+				wrapper:
+					'[:is(&_astro-island)]:*:snap-center [:not(&_astro-island)]:snap-center [:is(&_astro-island)]:*:scroll-my-12 [:not(&_astro-island)]:scroll-my-12',
+			},
+		},
+	}}
 >
 	<Header
 		{avatar}
diff --git a/src/layouts/template.astro b/src/layouts/template.astro
@@ -16,13 +16,24 @@ interface Props {
 	description: string
 	keywords: string
 	pageURL: Page
+
+	classes?: Partial<{
+		html: string
+		body: Partial<{
+			root: string
+			main: Partial<{
+				root: string
+				wrapper: string
+			}>
+		}>
+	}>
 }
 
-const { locale, title, description, keywords, pageURL } = Astro.props
+const { locale, title, description, keywords, pageURL, classes } = Astro.props
 ---
 
 <html
-	class={THEME.default}
+	class:list={[THEME.default, classes?.html]}
 	dir='ltr'
 	lang={locale}
 >
@@ -241,11 +252,16 @@ const { locale, title, description, keywords, pageURL } = Astro.props
 		</script>
 	</head>
 
-	<body class='relative h-full font-sans antialiased'>
+	<body class:list={['relative h-full font-sans antialiased', classes?.body?.root]}>
 		<slot name='header' />
 
-		<main class='mx-auto w-full max-w-7xl pt-16 md:pt-[4.5rem] 2xl:max-w-(--breakpoint-2xl)'>
-			<div class='mx-4'>
+		<main
+			class:list={[
+				'mx-auto w-full max-w-7xl pt-16 md:pt-[4.5rem] 2xl:max-w-(--breakpoint-2xl)',
+				classes?.body?.main?.root,
+			]}
+		>
+			<div class:list={['mx-4', classes?.body?.main?.wrapper]}>
 				<slot />
 			</div>
 		</main>
