fullpage.js

Polyfrost · Dec 28, 2023 · d6c7fad · d6c7fad
1 parent bf5075e
commit d6c7fad
Show file tree

Hide file tree

Showing 12 changed files with 447 additions and 298 deletions.
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -16,6 +16,7 @@
 		"@astrojs/sitemap": "^3.0.3",
 		"@astrojs/tailwind": "^5.0.4",
 		"astro": "^4.0.7",
+		"fullpage.js": "^4.0.20",
 		"sass": "^1.69.5",
 		"tailwindcss": "^3.4.0",
 		"vitest": "^1.1.0"

diff --git a/apps/website/public/libs/fullpage.min.css b/apps/website/public/libs/fullpage.min.css
diff --git a/apps/website/public/libs/fullpage.min.js b/apps/website/public/libs/fullpage.min.js
diff --git a/apps/website/public/scripts/scroll.js b/apps/website/public/scripts/scroll.js
@@ -0,0 +1,15 @@
+/* eslint-disable new-cap */
+/* eslint-disable no-new */
+new fullpage('#fullpage', {
+	licenseKey: 'gplv3-license',
+	autoScrolling: true,
+	scrollBar: true,
+	scrollHorizontally: false,
+	fixedElements: '',
+	fitToSection: false,
+	// navigation: true,
+	// navigationPosition: 'right',
+	credits: {
+		enabled: false,
+	},
+});
diff --git a/apps/website/src/components/base/Footer.astro b/apps/website/src/components/base/Footer.astro
@@ -5,7 +5,7 @@ import configConst from '@config';
 import Link from './Link.astro';
 ---
 
-<footer class="flex justify-center items-center bg-blue-100 mt-4 pt-20 pb-8 px-20">
+<footer class="section flex justify-center items-center bg-blue-100 mt-4 pt-20 pb-8 px-20">
 	<div class="max-w-[1024px] w-full flex flex-col gap-y-24">
 		<div class="flex flex-col gap-y-20 justify-center items-start md:flex-row md:items-start md:justify-between">
 			<div class="flex-1 flex flex-col gap-y-3 text-blue-gray">

diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
@@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<'section'> {
 	wrapperClass?: string
 	wFull?: boolean
 	hFull?: boolean
+	sectionClass?: boolean
 }
 
 const {
@@ -15,6 +16,7 @@ const {
 	wrapperClass = '',
 	wFull = true,
 	hFull = false,
+	sectionClass = true,
 	...props
 } = Astro.props;
 
@@ -26,7 +28,7 @@ const twoColumnClasses = ` ${maxWidth === 'none' ? 'justify-center' : 'justify-c
 const className = `max-w-[${maxWidth}] ${hFull ? 'min-h-screen' : 'h-auto'} ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 md:p-0 flex gap-x-20 gap-y-4${twoColumn ? twoColumnClasses : ''}${props.class ? ` ${props.class}` : ''}`;
 ---
 
-<section class={`w-full flex justify-center ${wrapperClass ?? ''}`}>
+<section class={`${sectionClass ? 'section ' : ''}w-full outline-none flex justify-center ${wrapperClass ?? ''}`}>
 	<div class={className} {...props}>
 		{twoColumn
 			? (

diff --git a/apps/website/src/env.d.ts b/apps/website/src/env.d.ts
@@ -1,2 +1,3 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+/// <reference types="./types/global.d.ts" />
diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro
@@ -18,29 +18,31 @@ const {
 ---
 
 <!doctype html>
-	<html lang="en">
-		<head>
-			<meta charset="UTF-8"/>
-			<meta name="description" content={description}/>
-			<meta name="viewport" content="width=device-width"/>
-			<link rel="icon" type="image/svg+xml" href={favicon}/>
-			<meta name="generator" content={Astro.generator}/>
-
-			<link rel="preconnect" href="https://fonts.googleapis.com"/>
-			<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
-			<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
-			<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet"/>
-
-			<title>{title}</title>
-		</head>
-
-		<body class="bg-gray-50 overflow-x-hidden">
-			<Navbar />
-
-			<main class="min-h-screen h-auto">
-				<slot/>
-			</main>
-
+<html lang="en">
+	<head>
+		<meta charset="UTF-8"/>
+		<meta name="description" content={description}/>
+		<meta name="viewport" content="width=device-width"/>
+		<link rel="icon" type="image/svg+xml" href={favicon}/>
+		<meta name="generator" content={Astro.generator}/>
+
+		<link rel="preconnect" href="https://fonts.googleapis.com"/>
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+		<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
+		<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet"/>
+
+		<title>{title}</title>
+		<script src="/libs/fullpage.min.js" defer></script>
+		<script src="/scripts/scroll.js" defer></script>
+	</head>
+
+	<body class="bg-gray-50 overflow-x-hidden">
+		<Navbar />
+
+		<main class="min-h-screen h-auto flex flex-col gap-40" id="fullpage">
+			<slot/>
 			<Footer/>
-		</body>
-	</html>
+		</main>
+
+	</body>
+</html>