Merge pull request #29 from nbtca/dev

Feat: Responsive header

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*@nextui-org/*

cspell.json

@@ -15,6 +15,7 @@
     "m_lfit",
     "N3ptune",
     "NBTCA",
+    "nowrap",
     "openapi",
     "Rehype",
     "rehypePlugins",

package.json

@@ -23,8 +23,10 @@
     "@fullcalendar/react": "^6.1.11",
     "@headlessui/vue": "^1.7.22",
     "@logto/browser": "^2.2.16",
+    "@nextui-org/react": "^2.4.8",
     "@stylistic/eslint-plugin": "^2.1.0",
     "astro": "^4.5.12",
+    "framer-motion": "^11.5.6",
     "ical.js": "^1.5.0",
     "md5": "^2.3.0",
     "npm": "^10.8.1",

src/components/Header.astro

@@ -1,7 +0,0 @@
----
-import Navigation from "./Navigation.astro";
----
-
-  <header>
-    <Navigation />
-  </header>

src/components/Navigation.astro

@@ -1,68 +0,0 @@
----
-import { SITE_TITLE } from "../consts"
-import { ref } from "vue"
-import NavigationUser from "./NavigationUser.vue"
-
-const menuList = ref<
-  {
-    link: string
-    name: string
-  }[]
->([
-  {
-    link: "/archive",
-    name: "目录",
-  },
-  // {
-  //   link: "https://repair.nbtca.space",
-  //   name: "维修",
-  // },
-  {
-    link: "/calendar",
-    name: "日历",
-  },
-  {
-    link: "/about",
-    name: "关于我们",
-  },
-  {
-    link: "/join-us",
-    name: "加入我们",
-  },
-]);
----
-
-<nav class="nav">
-  <div class="nav-wrapper">
-    <div class="nav-content-wrapper">
-      <div class="flex items-center justify-between">
-        <a href="/" class="nav-title flex items-center gap-3">
-          <img
-            src="https://oss.nbtca.space/CA-logo.svg"
-            alt=""
-            style="width: 32px; aspect-ratio: 1;"
-          />
-          <span class="hidden md:block">
-            {SITE_TITLE}
-          </span>
-        </a>
-        <div class="flex items-center">
-          {
-            menuList.value.map(menu => (
-              <div class="px-3 lg:px-4">
-                <a
-                  href={menu.link}
-                  class="nav-item-content hover:text-[#2997ff] text-nowrap"
-                >
-                  {menu.name}
-                </a>
-              </div>
-            ))
-          }
-          <div class="hidden lg:bock h-4 w-[0.5px] bg-gray-300 ml-1 mr-3"></div>
-          <NavigationUser client:load />
-        </div>
-      </div>
-    </div>
-  </div>
-</nav>

src/components/header/BaseHead.astro

@@ -1,9 +1,9 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
-import "../styles/global.css"
+import "../../styles/global.css"
 const { title, description, image = "/preview.png" } = Astro.props
-import { SITE_URL } from "../consts"
+import { SITE_URL } from "../../consts"
 const { pathname } = Astro.url;
 ---
 

src/components/header/Header.astro

@@ -0,0 +1,11 @@
+---
+import HeaderNavigation from "./HeaderNavigation"
+---
+
+<nav class="nav">
+  <div class="flex items-center justify-center">
+    <div class="max-w-[1005px] w-full">
+      <HeaderNavigation client:load />
+    </div>
+  </div>
+</nav>

src/components/header/HeaderNavigation.tsx

@@ -0,0 +1,77 @@
+import React from "react"
+import { Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, Link } from "@nextui-org/react"
+import { SITE_TITLE } from "../../consts"
+
+export default function App() {
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false)
+
+  const menuItems = [
+    {
+      link: "/archive",
+      name: "目录",
+    },
+    {
+      link: "/calendar",
+      name: "日历",
+    },
+    {
+      link: "/about",
+      name: "关于我们",
+    },
+    {
+      link: "/join-us",
+      name: "加入我们",
+    },
+  ]
+
+  return (
+    <Navbar onMenuOpenChange={setIsMenuOpen} height="48px">
+      <NavbarContent className="flex justify-between items-center">
+        <NavbarBrand className="flex gap-4" onClick={() => window.location.href = "/"}>
+          <img
+            src="https://oss.nbtca.space/CA-logo.svg"
+            alt=""
+            className="w-8 aspect-square"
+          />
+          <span className="text-lg text-[#1d1d1f]">
+            {SITE_TITLE}
+          </span>
+        </NavbarBrand>
+        <NavbarContent className="hidden sm:flex gap-4" justify="center">
+          {
+            menuItems.map(item => (
+              <NavbarItem key={item.name}>
+                <Link color="foreground" className="nav-item-content hover:text-[#2997ff] text-nowrap" href={item.link}>
+                  {item.name}
+                </Link>
+              </NavbarItem>
+            ))
+          }
+        </NavbarContent>
+
+        <NavbarMenuToggle
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          className="sm:hidden"
+          style={{ marginTop: "0" }}
+        />
+      </NavbarContent>
+
+      <NavbarMenu>
+        {menuItems.map((item, index) => (
+          <NavbarMenuItem key={`${item}-${index}`}>
+            <Link
+              color={
+                index === 2 ? "primary" : index === menuItems.length - 1 ? "danger" : "foreground"
+              }
+              className="w-full py-1 font-bold"
+              href={item.link}
+              size="lg"
+            >
+              {item.name}
+            </Link>
+          </NavbarMenuItem>
+        ))}
+      </NavbarMenu>
+    </Navbar>
+  )
+}

src/components/header/NavigationUser.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { makeLogtoClient } from "../utils/auth"
+import { makeLogtoClient } from "../../utils/auth"
 import { onMounted, ref } from "vue"
 import type { IdTokenClaims } from "@logto/browser"
 import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue"

src/layouts/BaseLayout.astro

@@ -1,6 +1,6 @@
 ---
-import BaseHead from "../components/BaseHead.astro"
-import Header from "../components/Header.astro"
+import BaseHead from "../components/header/BaseHead.astro"
+import Header from "../components/header/Header.astro"
 import Footer from "../components/Footer.astro"
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts"
 const { primaryTitle } = Astro.props

src/layouts/MarkdownPost.astro

@@ -1,6 +1,6 @@
 ---
-import BaseHead from "../components/BaseHead.astro"
-import Header from "../components/Header.astro"
+import BaseHead from "../components/header/BaseHead.astro"
+import Header from "../components/header/Header.astro"
 import Footer from "../components/Footer.astro"
 
 import { formatDate } from "../utils"
@@ -43,7 +43,7 @@ const dateFormatted = formatDate(pubDate)
                   <div class="category-eyebrow">
                     <span class="category-eyebrow__category category_original">{type}
                     </span
-                  >
+                    >
                     <span class="category-eyebrow__date">{dateFormatted}</span>
                   </div>
                 </div>
@@ -65,14 +65,14 @@ const dateFormatted = formatDate(pubDate)
               <div class:list={["tags-sheet component"]}>
                 <div class="component-content">
                   {
-                  frontmatter.tags?.map((tag) => {
-                    return (
-                      <a href={`/tags/${tag}`} class="tag">
-                        {tag}
-                      </a>
-                    )
-                  })
-                }
+                    frontmatter.tags?.map((tag) => {
+                      return (
+                        <a href={`/tags/${tag}`} class="tag">
+                          {tag}
+                        </a>
+                      )
+                    })
+                  }
                 </div>
               </div>
             </div>
@@ -86,7 +86,7 @@ const dateFormatted = formatDate(pubDate)
                     target="_blank"
                   >版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
                   </a
-                >
+                  >
                   <p class="content">
                     作者： {frontmatter.author} 发表日期：{dateFormatted}
                   </p>
@@ -98,7 +98,7 @@ const dateFormatted = formatDate(pubDate)
       </main>
       <Footer />
       <script is:inline>
-      var script = document.createElement("script")
+      const script = document.createElement("script")
       script.src = "/static/js/initPost.js"
       document.head.appendChild(script)
       </script>

src/pages/freshman/join.astro

@@ -0,0 +1,11 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro"
+// import { Button } from "@nextui-org/react";
+import ReactChild from "./react/acontent"
+---
+
+<BaseLayout title="Welcome to Astro.">
+  <main>
+    <ReactChild client:visible />
+  </main>
+</BaseLayout>

src/pages/freshman/react/acontent.tsx

@@ -0,0 +1,12 @@
+// app/page.tsx
+import { Button } from "@nextui-org/react"
+
+// import { NextUIProvider } from "@nextui-org/react";
+
+export default function Page() {
+  return (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  )
+}

src/pages/graduation/generate.astro

@@ -1,7 +1,7 @@
 ---
 import GenerateQR from "./GenerateQR.vue"
 import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts"
-import BaseHead from "../../components/BaseHead.astro"
+import BaseHead from "../../components/header/BaseHead.astro"
 
 const { primaryTitle } = Astro.props
 const title = primaryTitle ? `${primaryTitle}  -  ${SITE_TITLE}` : SITE_TITLE;

src/styles/global.css

@@ -247,10 +247,10 @@ ol + * {
   margin-top: 0.8em;
 }
 
-ul,
+/* ul,
 ol {
   margin-left: 1.17647em;
-}
+} */
 
 ul ul,
 ul ol,

tailwind.config.mjs

@@ -1,6 +1,10 @@
+import { nextui } from "@nextui-org/react"
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  content: [
+    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+  ],
   theme: {
     extend: {
       colors: {
@@ -8,5 +12,6 @@ export default {
       },
     },
   },
-  plugins: [],
+  darkMode: "class",
+  plugins: [nextui()],
 }