Azusain: <Abstracts> hover effects

DGUTCA · Oct 21, 2023 · 1e65ac2 · 1e65ac2
1 parent 54642d9
commit 1e65ac2
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 65 deletions.
diff --git a/src/app/articles/page.tsx b/src/app/articles/page.tsx
diff --git a/src/app/articles/[slug]/page.tsx → src/app/blog/[slug]/page.tsx b/src/app/articles/[slug]/page.tsx → src/app/blog/[slug]/page.tsx
@@ -4,15 +4,15 @@ import { notFound } from "next/navigation";
 import remarkGfm from "remark-gfm";
 
 export async function generateStaticParams() {
-  const posts = getFileNames("articles");
+  const posts = getFileNames("blog");
   return posts.map((post) => ({
     slug: post,
   }));
 }
 
 export default function Page({ params }: { params: { slug: string } }) {
   try {
-    const data = getPostData("articles", params.slug);
+    const data = getPostData("blog", params.slug);
     const mdxOptions = {
       remarkPlugins: [remarkGfm],
     };

diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -0,0 +1,29 @@
+import { MDXRemote } from "next-mdx-remote/rsc";
+import { getSortedPostsData } from "@/components/post";
+import Abstarcts from "@/components/abstracts";
+import { AbstarctType } from "@/components/interface";
+export default function Page() {
+  const allArticles = getSortedPostsData("blog", 5);
+  return (
+    <div className="md:container px-6 mt-2">
+        <h1># 文章专栏</h1>
+        <div className="flex flex-col gap-10 porse my-8 md:container md:pr-64 lg:px-4 ">
+            {allArticles.map(({ id, content, title, date, location, author, time }, idx) => (
+                <div key={idx}>
+                    <Abstarcts
+                    file_name={id}
+                    comp_type={AbstarctType.Passage}
+                    title={title}
+                    time={time}
+                    date={date}
+                    author={author}
+                    location={location}
+                    >
+                    <MDXRemote source={content.length>100?content.slice(0, 100) + '...':content} />
+                    </Abstarcts>
+                </div>
+            ))}
+        </div>
+    </div>
+  );
+}
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
@@ -5,23 +5,24 @@ import { AbstarctType } from "@/components/interface";
 export default function Page() {
   const allEvents = getSortedPostsData("events", 5);
   return (
-    <div className="flex flex-col gap-8 porse md:container p-16 md:pr-64">
-      {allEvents.map(({ id, content, title, date, location, time }, idx) => (
-        <div key={idx}>
-          <div key={idx}>
-            <Abstarcts
-              file_name={id}
-              comp_type={AbstarctType.Event}
-              title={title}
-              time={time}
-              date={date}
-              location={location}
-            >
-              <MDXRemote source={content} />
-            </Abstarcts>
-          </div>
+    <div className="md:container px-6 mt-2">
+        <h1># 活动专栏</h1>
+        <div className="flex flex-col gap-10 porse my-8 md:container md:pr-64 lg:px-4 ">
+            {allEvents.map(({ id, content, title, date, location, time }, idx) => (
+                <div key={idx}>
+                    <Abstarcts
+                    file_name={id}
+                    comp_type={AbstarctType.Event}
+                    title={title}
+                    time={time}
+                    date={date}
+                    location={location}
+                    >
+                    <MDXRemote source={content.length>100?content.slice(0, 100) + '...':content} />
+                    </Abstarcts>
+                </div>
+            ))}
         </div>
-      ))}
     </div>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+/* +------------------------ customized typography ----------------------+ */
 * {
     box-sizing: border-box;
 }
@@ -28,7 +28,6 @@ h5 {
     font-size: 0.9rem;
 }
 
-
 .h3-blk {
     @apply font-bold;
     font-size: 1.2rem;
@@ -39,22 +38,37 @@ h5 {
     font-size: 0.9rem;
 }
 
+/* +------------------------ animation ------------------------+ */
+/* transformation effects for <Service> */
 .service:hover {
     @apply translate-y-[-15px] duration-100 opacity-60;
     cursor: pointer;    
 }
 
+/* bg box effects for <Abstracts> */
+.bg-box-fx {
+    position: relative;
+}
 
-.footer-icon > div {
-    @apply gap-2 flex;
+.bg-box-fx::after {
+    @apply rounded-lg h-[113%] w-0;
+    position: absolute;
+    content: '';
+    top: -6%;
+    z-index: -1;
+
 }
 
+.bg-box-fx::after:hover {
+    @apply bg-gray-200 dark:bg-base-200 cursor-pointer w-[112%] -left-5 lg:-left-3 lg:w-full 2xl:w-[89%] duration-300;
+}
+
+/* +------------------------ others ------------------------+ */
 /* for dark mode */
 .dark-adaptor {
     @apply dark:invert dark:opacity-70;
 }
 
-/* hover animation effects */
-.anime-ud-line {
-
-}
+.footer-icon > div {
+    @apply gap-2 flex;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -6,15 +6,14 @@ import { getSortedPostsData } from "@/components/post"
 
 export default function Home() {
     const allEvents = getSortedPostsData('events',5);
-    const allArticles = getSortedPostsData('articles',5);
+    const allArticles = getSortedPostsData('blog',5);
     const services = [
         {
             img_path: "/icons/fix.svg",
             title: "报修平台",
             desc: "为广大师生同学提供设备维修服务喵（在建中）",
             href: "#"
         },
-
         {
             img_path: "/icons/git.svg",
             title: "Git",
@@ -52,7 +51,7 @@ export default function Home() {
             <div className="my-16 grid gap-16 lg:grid-cols-2 lg:grid-rows-none lg:gap-8">
                 <div>
                     <h1># 最近文章</h1>
-                    <div className="flex flex-col gap-8 mt-1"> {
+                    <div className="flex flex-col gap-8 mt-3"> {
                         allArticles.map(({ id, content, title, date, author, time }, idx) => (
                             <div key={idx}>
                                 <Abstarcts
@@ -71,7 +70,7 @@ export default function Home() {
 
                 <div>
                     <h1># 最新活动</h1>
-                    <div className="flex flex-col gap-8 mt-1">
+                    <div className="flex flex-col gap-8 mt-3">
                     {allEvents.map(({ id, content, title, date, location, time }, idx) => (
                         <div key={idx}>
                             <Abstarcts
@@ -82,7 +81,7 @@ export default function Home() {
                                 date={date}
                                 location={location}
                             >
-                                {content.length>100?content.slice(0, 100) + '...':content}
+                                {content}
                             </Abstarcts>
                         </div>))
                     }
@@ -92,7 +91,9 @@ export default function Home() {
                 <div>
                     <h1># 加入我们</h1>
                     <div className="flex flex-col gap-8 mt-1">
-                        <h4>请在学生社团招新期间填写：<a className="text-blue-500" href="https://docs.qq.com/form/page/DQ0RmVU1wQlBoYVNv">学生社团招新报名表</a></h4>
+                        <h4>请在学生社团招新期间填写：
+                            <a className="text-blue-500" href="https://docs.qq.com/form/page/DQ0RmVU1wQlBoYVNv">学生社团招新报名表</a>
+                        </h4>
                     </div>
                 </div>
             </div>

diff --git a/src/components/abstracts.tsx b/src/components/abstracts.tsx
@@ -7,15 +7,16 @@ import { AbstractInterface, StrStatus, AbstarctType, status2css } from "./interf
 const Abstarcts: React.FC<AbstractInterface> = (props) => {
     const isPassage: Boolean = props.comp_type === AbstarctType.Passage
     const stat: StrStatus = check_date_status(props.date, props.time? props.time: "")
-
+    const content = props.children ? props.children as string : ""
     return (
-        <div>
+        <div className="bg-box-fx">
+            <Link href={isPassage?"/blog/"+props.file_name:"/events/"+props.file_name} className="hover:text-gray-700">
             <div>
                 <span className="align-top"> 
                     {isPassage
                         &&(<Image src={"/icons/document.svg"} width={25} height={25} alt="" className="inline m-0 dark-adaptor" />)}
                 </span>
-                <span className="h3-blk align-top"><Link href={isPassage?"/articles/"+props.file_name:"/events/"+props.file_name}>{props.title}</Link></span>
+                <span className="h3-blk align-top">{props.title}</span>
             </div>
 
             <div className="-mt-[2px]">
@@ -30,8 +31,9 @@ const Abstarcts: React.FC<AbstractInterface> = (props) => {
                 </span>
             </div>
             <h5 className="mt-2 md:pr-4 lg:pr-10 2xl:pr-24">
-                {props.children}
+                {content.length>100?content.slice(0, 100) + '...':content}
             </h5>
+            </Link>
         </div>
     )
 }

diff --git a/src/components/nav.tsx b/src/components/nav.tsx
@@ -8,7 +8,7 @@ export default function Nav() {
     const navs = [
         { name: "Home", path: "/" },
         { name: "Events", path: "/events" },
-        { name: "Articles", path: "/articles" },
+        { name: "Blog", path: "/blog" },
     ]
     function navClass(path: string) {
         if (path === "/") {

diff --git a/src/posts/articles/2023-10-17-2023.md → src/posts/blog/2023-10-17-2023.md b/src/posts/articles/2023-10-17-2023.md → src/posts/blog/2023-10-17-2023.md