Merge pull request #20 from tuatmcc/fix/typescript

fix AstroのTypeScriptインテグレーションの設定修正

package.json

@@ -18,6 +18,7 @@
 		"@astrojs/rss": "^4.0.7",
 		"@astrojs/sitemap": "^3.1.6",
 		"@astrojs/tailwind": "^5.1.0",
+		"@astrojs/ts-plugin": "^1.10.2",
 		"@fontsource-variable/jetbrains-mono": "^5.0.21",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",

src/components/home/FadeOut.tsx

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "astro/types";
+import { motion, useScroll } from "framer-motion";
+import { useCallback, useState } from "react";
+
+type Props = ComponentProps<typeof motion.div>;
+
+export const FadeOut = ({ children, className }: Props) => {
+	const { scrollY } = useScroll();
+	const [fadeOut, setFadeOut] = useState(window.scrollY > 200);
+
+	scrollY.updateAndNotify = useCallback((y: number) => {
+		if (y > 200) {
+			setFadeOut(true);
+		} else {
+			setFadeOut(false);
+		}
+	}, []);
+
+	return (
+		<motion.div
+			initial={{ opacity: fadeOut ? 0 : 1 }}
+			animate={{
+				opacity: fadeOut ? 0 : 1,
+			}}
+			transition={{ duration: 0.5 }}
+			className={className}
+		>
+			{children}
+		</motion.div>
+	);
+};

src/components/home/Introduction.astro

@@ -0,0 +1,7 @@
+---
+import { SlideIn } from "./SlideIn";
+---
+
+<div class="w-full flex items-center p-4 max-w-[1200px] mx-auto">
+	<SlideIn client:only="react" />
+</div>

src/components/home/Pattern.tsx

@@ -0,0 +1,16 @@
+import { motion } from "framer-motion";
+
+export const Pattern = () => (
+	<motion.div
+		initial={{ opacity: 0, height: 0 }}
+		animate={{ opacity: 0.1, height: "100vh" }}
+		transition={{ delay: 1, duration: 1 }}
+		className="background-pattern fixed top-0 left-0 w-full h-dvh opacity-10 z-[-1]"
+		style={{
+			backgroundImage: `url("/assets/triangle.svg")`,
+			backgroundPosition: "start",
+			backgroundSize: "100px",
+			backgroundRepeat: "repeat",
+		}}
+	/>
+);

src/components/home/Progress.tsx

@@ -0,0 +1,84 @@
+import { motion, useScroll, useSpring } from "framer-motion";
+import {
+	type ComponentPropsWithoutRef,
+	useCallback,
+	useEffect,
+	useState,
+} from "react";
+
+const calcScrollPercentage = (scrollY: number, height: number) => {
+	return Math.floor((scrollY / height) * 100);
+};
+
+export const Progress = (props: ComponentPropsWithoutRef<"svg">) => {
+	const { scrollYProgress } = useScroll();
+	const springY = useSpring(scrollYProgress, { damping: 20, stiffness: 100 });
+	const [scrollInfo, setScrollInfo] = useState({
+		scrollY: 0,
+		scrollValue: 0,
+	});
+	const [height, setHeight] = useState(
+		document.documentElement.scrollHeight - window.innerHeight,
+	);
+
+	const handleScroll = useCallback(() => {
+		setScrollInfo({
+			scrollY: window.scrollY,
+			scrollValue: calcScrollPercentage(window.scrollY, height),
+		});
+	}, [height]);
+	const handleResize = useCallback(() => {
+		setHeight(document.documentElement.scrollHeight - window.innerHeight);
+	}, []);
+
+	useEffect(() => {
+		window.addEventListener("scroll", handleScroll);
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+			window.removeEventListener("resize", handleResize);
+		};
+	}, [handleScroll, handleResize]);
+
+	return (
+		<div className="fixed bottom-0 right-0 p-2 w-32 h-32 z-10 grid items-center">
+			<svg
+				width="50"
+				height="50"
+				viewBox="0 0 100 100"
+				className="w-full h-full col-start-1 row-start-1"
+				style={{
+					transform: "rotate(-90deg)",
+				}}
+			>
+				<circle
+					cx="50"
+					cy="50"
+					r="30"
+					pathLength="1"
+					className="opacity-30 fill-none"
+					style={{
+						strokeDashoffset: "0",
+						strokeWidth: "15%",
+					}}
+				/>
+				<title>Progress</title>
+				<motion.circle
+					cx="50"
+					cy="50"
+					r="30"
+					pathLength="1"
+					className="indicator fill-none stroke-black"
+					style={{
+						strokeDashoffset: "0",
+						strokeWidth: "2px",
+						pathLength: springY,
+					}}
+				/>
+			</svg>
+			<div className="col-start-1 row-start-1 flex items-center justify-center">
+				{scrollInfo.scrollValue}%
+			</div>
+		</div>
+	);
+};

src/components/home/SlideIn.tsx

@@ -0,0 +1,111 @@
+import type { ComponentProps } from "astro/types";
+import { motion } from "framer-motion";
+import type { FC } from "react";
+
+type Props = ComponentProps<typeof motion.div>;
+export const SlideIn: FC<Props> = () => {
+	return (
+		<motion.div
+			className="w-full flex"
+			initial="hidden"
+			whileInView="visible"
+			viewport={{
+				once: true,
+				amount: 0.8,
+			}}
+		>
+			<motion.div
+				className="flex flex-col justify-center h-full p-[1px] bg-black w-[500px] max-w-full"
+				variants={{
+					visible: {
+						backgroundPosition: "0% 0%",
+						transition: {
+							duration: 1.2,
+						},
+					},
+				}}
+				style={{
+					clipPath: `polygon(
+			0 0,
+			0 calc(100% - 20px),
+			20px 100%,
+			100% 100%,
+			100% 80px,
+			calc(100% - 80px) 0,
+			calc(100% - 150px) 0,
+			calc(100% - 160px) 10px,
+			calc(100% - 220px) 10px,
+			calc(100% - 230px) 0
+		)`,
+					backgroundPosition: "100% 100%",
+					backgroundSize: "200% 200%",
+					backgroundImage:
+						"linear-gradient(to bottom right, #000 50%, #fff 50%)",
+				}}
+			>
+				<div
+					className="flex flex-col justify-center h-full w-full p-4 py-8 pr-12 bg-gray-100"
+					style={{
+						clipPath: `polygon(
+			0 0,
+			0 calc(100% - 19px),
+			19px 100%,
+			100% 100%,
+			100% 79px,
+			calc(100% - 79px) 0,
+			calc(100% - 149px) 0,
+			calc(100% - 159px) 10px,
+			calc(100% - 219px) 10px,
+			calc(100% - 229px) 0
+		)`,
+					}}
+				>
+					<motion.h3
+						className="text-2xl font-bold font-orbitron tracking-wider mb-2"
+						variants={{
+							hidden: {
+								opacity: 0,
+								x: 50,
+							},
+							visible: {
+								opacity: 1,
+								x: 0,
+								transition: {
+									delay: 0.2,
+									duration: 1,
+								},
+							},
+						}}
+					>
+						Hello, World!
+					</motion.h3>
+					<motion.h2
+						className="text-4xl font-bold font-orbitron tracking-wider mb-4"
+						variants={{
+							hidden: {
+								opacity: 0,
+								x: 50,
+							},
+							visible: {
+								opacity: 1,
+								x: 0,
+								transition: {
+									delay: 0.5,
+									duration: 1,
+								},
+							},
+						}}
+					>
+						We are
+						<span className="text-[#0066cc]"> MCC </span>!
+					</motion.h2>
+					<p className="text-lg mb-2">
+						マイクロコンピュータクラブ (通称MCC)
+						は、東京農工大学のプログラミングサークルです。
+						講習会や合宿を開催したり、競プロやWeb開発、ゲーム制作等を行っています。
+					</p>
+				</div>
+			</motion.div>
+		</motion.div>
+	);
+};

src/components/home/Top.astro

@@ -0,0 +1,54 @@
+---
+import { Image } from "astro:assets";
+import { FadeOut } from "./FadeOut";
+---
+
+<div
+	class="sticky top-0 h-svh w-full flex flex-col items-center justify-center z-[-1]"
+>
+	<FadeOut client:only="react" className="flex flex-col items-center">
+		<Image
+			width="320"
+			height="320"
+			src="/animated_mcc.webp"
+			alt="MCC Logo"
+			class="w-80 h-80"
+			loading="lazy"
+		/>
+		<h1 class="fadeIn text-6xl font-bold font-orbitron tracking-wider mb-2">
+			MCC
+		</h1>
+		<div class="fixed bottom-0 p-4">
+			<svg
+				width="120"
+				height="120"
+				viewBox="0 0 400 400"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				class="animate-bounce"
+			>
+				<path d="M200 397L400 250V253L200 400L0 253V250L200 397Z" fill="black"
+				></path>
+				<path d="M199 0H201V300H199V0Z" fill="black"></path>
+			</svg>
+		</div>
+	</FadeOut>
+</div>
+
+<style>
+	.fadeIn {
+		animation: fadeIn 3s ease-in-out forwards;
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		50% {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>