Merge pull request #12 from tuatmcc/feat/testout-three

[wip] add animated webp

src/components/Card.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...props } = Astro.props;
+---
+
+<div class:list={[className, "card"]}>
+  <slot />
+</div>
+<style>
+.card {
+  clip-path: polygon(
+    20px 0, 
+    calc(100% - 20px) 0, 
+    100% 20px, 
+    100% calc(100% - 20px), 
+    calc(100% - 20px) 100%, 
+    20px 100%, 
+    0 calc(100% - 20px), 
+    0 20px
+    );
+  margin-left: 20px;
+}
+</style>

src/components/Navigation/Navigation.astro

@@ -14,7 +14,7 @@ const links = [
   <div class="w-full pl-8 pt-24 overflow-y-auto">
     <ul class="flex flex-col gap-8">
       {links.map((link) => (
-      <li class="link-item relative flex overflow-hidden text-white text-2xl font-orbitron tracking-wider">
+      <li class="link-item relative flex text-white text-2xl font-orbitron tracking-wider">
         <a href={link.href} class=" flex w-full p-2">{link.label}</a>
       </li>
       ))} 

src/components/Navigation/NavigationContainer.tsx

@@ -5,7 +5,7 @@ export const NavigationContainer = ({ children }: { children: ReactNode }) => {
 	return (
 		<>
 			<div
-				className="fixed top-0 left-0 w-full h-full"
+				className="fixed top-0 left-0 w-full h-dvh"
 				style={{ opacity: active ? 1 : 0, display: active ? "block" : "none" }}
 				onClick={() => setActive(false)}
 				onKeyDown={(e) => e.key === "Escape" && setActive(false)}

src/components/home/RecentNews.astro

@@ -0,0 +1,25 @@
+---
+import { getCollection } from "astro:content";
+import Card from "../Card.astro";
+
+const posts = (await getCollection("news")).sort(
+	(a, b) => a.data.date.valueOf() - b.data.date.valueOf(),
+);
+---
+
+<section>
+  <h2>Recent News</h2>
+  <ul>
+    <li class="flex">
+      <Card class="bg-blue-400 p-8">
+        <a href="/news/1" class="flex">News 1</a>
+      </Card>
+    </li>
+    <li>
+      <a href="/news/2">News 2</a>
+    </li>
+    <li>
+      <a href="/news/3">News 3</a>
+    </li>
+  </ul>
+</section>

src/components/home/Typing.astro

@@ -1,10 +1,9 @@
 ---
-
 ---
 
-<div class="w-screen h-screen relative">
+<div class="w-full h-screen relative">
   <div class="flex justify-center items-center h-full">
-    <div class="flex items-center text-4xl font-mono tracking-wider">
+    <div class="flex items-center text-4xl font-orbitron font-bold tracking-wider">
       <div class="typing__text">Hello, World!</div>
       <div class="typing__text">Welcome to MCC!</div>
       <div class="typing__cursor h-8 bg-black w-4"></div>
@@ -27,17 +26,17 @@
 }
 
 .typing__text {
-  --typ-dur: 1s;
+  --typ-dur: 2s;
   overflow: hidden;
   white-space: nowrap;
   width: 0;
 
   &:first-of-type {
-    animation: typing var(--typ-dur) steps(12) forwards, fadeOut 1s ease-in-out var(--typ-dur) forwards;
+    animation: type-delete var(--typ-dur) steps(12) forwards;
   }
 
   &:nth-of-type(2) {
-    animation: typing 1s steps(12) 2s forwards;
+    animation: typing 1s steps(12) var(--typ-dur) forwards;
   }
 }
 
@@ -50,15 +49,17 @@
   }
 }
 
-@keyframes fadeOut {
+@keyframes type-delete {
   0% {
-    opacity: 1;
+    width: 0;
   }
-  90% {
-    opacity: 1;
+  50% {
+    width: 100%;
+  }
+  80% {
+    width: 100%;
   }
   100% {
-    opacity: 0;
     display: none;
   }
 }

src/content/config.ts

@@ -4,12 +4,26 @@ const blog = defineCollection({
 	type: "content",
 	schema: z.object({
 		title: z.string(),
-		description: z.string(),
 		date: z.coerce.date(),
 		lastmod: z.coerce.date().optional(),
+		author: z.string().optional(),
+		description: z.string().optional(),
 		tags: z.array(z.string()).optional(),
 		image: z.string().optional(),
 	}),
 });
 
-export const collections = { blog };
+const news = defineCollection({
+	type: "content",
+	schema: z.object({
+		title: z.string(),
+		date: z.coerce.date(),
+		lastmod: z.coerce.date().optional(),
+		author: z.string().optional(),
+		description: z.string().optional(),
+		tags: z.array(z.string()).optional(),
+		image: z.string().optional(),
+	}),
+});
+
+export const collections = { blog, news };

src/layouts/Layout.astro

@@ -20,7 +20,7 @@ export interface Props {
 ---
 
 <!doctype html>
-<html lang="ja">
+<html lang="ja" class="bg-gray-100">
   <head>
     <BaseHead {...Astro.props} />
   </head>

src/pages/about.astro

@@ -1,7 +1,6 @@
 ---
 import Navigation from "../components/Navigation/Navigation.astro";
 import Layout from "../layouts/Layout.astro";
-import { ModelCanvas } from "../components/home/ModelCanvas";
 ---
 
 <Layout
@@ -18,6 +17,8 @@ import { ModelCanvas } from "../components/home/ModelCanvas";
   }}
 >
   <Navigation>
-    <ModelCanvas client:only="react" />
+    <div class="h-svh flex flex-col items-center justify-center">
+      <img src="/animated_mcc.webp" class="lg:w-1/2 sm:w-10/12" />
+    </div>
   </Navigation>
 </Layout>

src/pages/index.astro

@@ -1,16 +1,13 @@
 ---
 import Navigation from "../components/Navigation/Navigation.astro";
-// import { ModelCanvas } from "../components/home/ModelCanvas";
-import Layout from "../layouts/Layout.astro";
+import RecentNews from "../components/home/RecentNews.astro";
 import Typing from "../components/home/Typing.astro";
-import { ModelCanvas } from "../components/home/ModelCanvas";
+import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout title="MCC" path="" og={{enabled: true}} pagefind={false}>
   <Navigation>
-    <div class="absolute top-0 left-0 w-full h-full bg-black opacity-20">
-      <ModelCanvas client:only="react" />
-    </div>
     <Typing />
+    <RecentNews />
   </Navigation>
 </Layout>

tailwind.config.mjs

@@ -6,9 +6,9 @@ export default {
 		fontFamily: {
 			sans: ["Hiragino Kaku Gothic ProN", "sans-serif"],
 			orbitron: ["Orbitron", "sans-serif"],
-      mono: ["JetBrains Mono", "monospace"]
+			tektur: ["Tektur", "sans-serif"],
+			mono: ["JetBrains Mono", "monospace"],
 		},
 	},
-	plugins: [
-	],
+	plugins: [],
 };