Merge pull request #3 from Skywt2003/dev

Dev

src/components/Footer.astro

@@ -1,47 +1,43 @@
 ---
-import CCBadge from "./CCBadge.astro";
-import ThemeToggle from "./ThemeToggle.astro";
+import CC from "./badges/CC.astro";
+import NotByAI from "./badges/NotByAI.astro";
+import Menu from "./menu/Menu.astro";
 ---
 
-<footer class="container text-center mb-8 secondary-color">
-  <hr class="my-8" />
-  <p class="m-4">
-    &#169; 2017-2024 <a href="https://skywt.cn/" class="link">SkyWT</a>. Powered
-    by
-    <a href="http://astro.build" target="_blank" class="link">Astro</a>.
-    <!-- <ThemeToggle /> -->
-  </p>
-  <p class="m-4">
-    <a
-      href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33080202000472"
-      target="_blank"
-      class="link before:content-[url('/mps.png')] before:align-middle"
-    >
-      浙公网安备33080202000472号</a
-    > /
-    <a href="https://beian.miit.gov.cn/" target="_blank" class="link">
-      浙ICP备2021019606号-1
-    </a>
-  </p>
-  <div class="m-4">
-    <CCBadge />
-    <a href="https://notbyai.fyi" target="_blank" class="inline-block mx-1">
-      <img
-        src="/not-by-ai.svg"
-        alt="Not By AI Badge"
-        class="inline-block h-8"
-      />
-    </a>
-    <a
-      href="https://www.foreverblog.cn/"
-      target="_blank"
-      class="inline-block mx-1"
-    >
-      <img
-        src="https://img.foreverblog.cn/logo_en_default.png"
-        alt="Forever Blog Badage"
-        class="inline-block h-6 grayscale"
-      />
-    </a>
+<footer class="py-8 bg-gray-100 dark:bg-neutral-800">
+  <div class="wide-container secondary-color text-sm">
+    <div class="m-4">
+      <Menu showIcon={false} />
+    </div>
+    <hr />
+    <div></div>
+    <p class="m-4">
+      &#169; 2017-2024 <a href="https://skywt.cn/" class="link">SkyWT</a> /
+      <a
+        href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33080202000472"
+        target="_blank"
+        class="link before:content-[url('/mps.png')] before:align-middle"
+      >
+        浙公网安备33080202000472号</a
+      > /
+      <a href="https://beian.miit.gov.cn/" target="_blank" class="link">
+        浙ICP备2021019606号-1
+      </a>
+    </p>
+    <div class="m-4">
+      <CC by={true} nc={true} />
+      <NotByAI />
+      <a
+        href="https://www.foreverblog.cn/"
+        target="_blank"
+        class="inline-block mx-1"
+      >
+        <img
+          src="https://img.foreverblog.cn/logo_en_default.png"
+          alt="Forever Blog Badage"
+          class="inline-block h-4 grayscale"
+        />
+      </a>
+    </div>
   </div>
 </footer>

src/components/Header.astro

@@ -2,13 +2,46 @@
 import Menu from "./menu/Menu.astro";
 ---
 
-<header class="container mt-12">
+<header class="mt-12 pb-4 text-center">
   <h1 class="mt-6">SkyWT</h1>
-  <h4 class="mt-4 secondary-color">Subtitle</h4>
+  <h5 class="mt-4 secondary-color">热爱与激情永不止息</h5>
 </header>
 
 <div
-  class="py-4 font-thin tertiary-color sticky top-0 backdrop-blur-md flex justify-center"
+  class="py-4 font-thin tertiary-color sticky top-0 backdrop-blur-md z-10 transition-all"
+  id="navbar-wrapper"
 >
-  <Menu />
+  <div class="wide-container flex justify-center relative">
+    <p id="navbar-brand" class="absolute left-4 font-bold hidden">
+      <a href="/" class="link">SkyWT</a>
+    </p>
+    <!-- <p class="absolute right-4">SkyWT</p> -->
+    <Menu />
+  </div>
 </div>
+
+<script is:inline>
+  const headerEl = document.querySelector("#navbar-wrapper");
+  const sentinalEl = document.querySelector("header");
+  const handler = (entries) => {
+    console.log(entries);
+    if (!entries[0].isIntersecting) {
+      headerEl.classList.add("sticked");
+    } else {
+      headerEl.classList.remove("sticked");
+    }
+  };
+  const observer = new window.IntersectionObserver(handler);
+  observer.observe(sentinalEl);
+</script>
+
+<style lang="scss">
+  .sticked {
+    @apply bg-white bg-opacity-50 dark:bg-neutral-800 dark:bg-opacity-50;
+    @apply shadow-lg;
+
+    #navbar-brand {
+      display: block;
+    }
+  }
+</style>

src/components/badges/CC.astro

@@ -0,0 +1,35 @@
+---
+interface Props {
+  by?: boolean;
+  nc?: boolean;
+  sa?: boolean;
+  nd?: boolean;
+}
+
+const { by = true, nc = true, sa = false, nd = false } = Astro.props;
+
+let license = "";
+if (by) license += "-by";
+if (nc) license += "-nc";
+if (sa) license += "-sa";
+if (nd) license += "-nd";
+license = license.slice(1);
+---
+
+<a
+  href={"https://creativecommons.org/licenses/" + license + "/4.0/"}
+  target="_blank"
+  class="inline-block mx-1"
+>
+  <img class="icon" src="/cc/cc.svg" />
+  {by && <img class="icon" src="/cc/by.svg" />}
+  {nc && <img class="icon" src="/cc/nc.svg" />}
+  {sa && <img class="icon" src="/cc/sa.svg" />}
+  {nd && <img class="icon" src="/cc/nd.svg" />}
+</a>
+
+<style lang="scss">
+  .icon {
+    @apply inline-block w-4 h-4;
+  }
+</style>

src/components/badges/NotByAI.astro

@@ -0,0 +1,22 @@
+---
+
+---
+
+<a href="https://notbyai.fyi" target="_blank" class="inline-block mx-1">
+  <img
+    src="/not-by-ai-light.svg"
+    alt="Not By AI Badge"
+    class="badge inline-block dark:hidden"
+  />
+  <img
+    src="/not-by-ai-dark.svg"
+    alt="Not By AI Badge"
+    class="badge hidden dark:inline-block"
+  />
+</a>
+
+<style lang="scss">
+  .badge {
+    @apply h-6;
+  }
+</style>

src/components/friends/FriendCard.astro

@@ -1,24 +1,36 @@
 ---
 interface Props {
   name: string;
-  desc: string;
+  desc?: string;
+  slogan?: string;
   url: string;
   avatar: string;
 }
 
-const { name, desc, url, avatar } = Astro.props;
+const { name, desc, slogan, url, avatar } = Astro.props;
 ---
 
-<li class="p-4 basis-full sm:basis-1/2 lg:basis-1/3">
+<li class="p-2 sm:p-4 basis-full sm:basis-1/2 lg:basis-1/3">
   <a href={url}>
-    <div class="card clickable p-4 flex flex-row items-center relative">
+    <div class="card h-full clickable p-2 flex flex-row items-center relative">
       <div class="absolute top-1 right-2 text-sm">
         <i class="ri-external-link-line"></i>
       </div>
-      <img src={avatar} class="w-16 m-4 rounded-full" />
-      <div>
+      <img
+        src={avatar}
+        class="w-12 m-2 rounded-full"
+        onerror="this.src='/visitor.png'"
+      />
+      <div class="m-2">
         <h5 class="primary-color">{name}</h5>
-        <p class="mt-2 secondary-color">{desc}</p>
+        {
+          slogan && (
+            <p class="mt-2 secondary-color font-bold text-sm">
+              <i class="ri-chat-quote-line" />「{slogan}」
+            </p>
+          )
+        }
+        {desc && <p class="mt-1 secondary-color text-sm">{desc}</p>}
       </div>
     </div>
   </a>

src/components/friends/FriendsCards.astro

@@ -5,21 +5,37 @@ import yml from "./config.yml";
 
 interface Friend {
   name: string;
-  desc: string;
+  section?: boolean;
+  desc?: string;
+  slogan?: string;
   url: string;
   avatar: string;
 }
 ---
 
 <ul class="flex flex-wrap mt-4">
   {
-    yml.friends.map((friend: Friend) => (
-      <FriendCard
-        name={friend.name}
-        desc={friend.desc}
-        url={friend.url}
-        avatar={friend.avatar}
-      />
-    ))
+    yml.friends.map((friend: Friend) =>
+      friend.section ? (
+        <div class="basis-full">
+          <h2 class="my-2 text-center">{friend.name}</h2>
+          {friend.desc && (
+            <p class="text-center secondary-color">
+              <i class="ri-double-quotes-l" />
+              {friend.desc}
+              <i class="ri-double-quotes-r" />
+            </p>
+          )}
+        </div>
+      ) : (
+        <FriendCard
+          name={friend.name}
+          desc={friend.desc}
+          slogan={friend.slogan}
+          url={friend.url}
+          avatar={friend.avatar}
+        />
+      ),
+    )
   }
 </ul>