💄 Optimized navbar

2024-01-23 00:16:04 +08:00
parent bc2de51987
commit bb10ff9cac
17 changed files with 468 additions and 292 deletions
--- a/src/assets/fonts/fonts.css
+++ b/src/assets/fonts/fonts.css
@@ -139,8 +139,7 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 200;
-  src: url("./noto-serif-sc-v22-chinese-simplified-200.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* noto-serif-sc-300 - chinese-simplified */
@@ -149,8 +148,7 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 300;
-  src: url("./noto-serif-sc-v22-chinese-simplified-300.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* noto-serif-sc-regular - chinese-simplified */
@@ -159,8 +157,7 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 400;
-  src: url("./noto-serif-sc-v22-chinese-simplified-regular.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* noto-serif-sc-500 - chinese-simplified */
@@ -169,8 +166,7 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 500;
-  src: url("./noto-serif-sc-v22-chinese-simplified-500.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* noto-serif-sc-600 - chinese-simplified */
@@ -179,8 +175,7 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 600;
-  src: url("./noto-serif-sc-v22-chinese-simplified-600.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* noto-serif-sc-700 - chinese-simplified */
@@ -189,8 +184,7 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 700;
-  src: url("./noto-serif-sc-v22-chinese-simplified-700.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* noto-serif-sc-900 - chinese-simplified */
@@ -199,6 +193,5 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 900;
-  src: url("./noto-serif-sc-v22-chinese-simplified-900.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,14 +1,17 @@
 ---
 interface MenuItem {
-  href: string;
+  href?: string;
  label: string;
  children?: MenuItem[];
 }

 const items: MenuItem[] = [
-  { href: "/posts", label: "记录" },
-  { href: "/events", label: "活动" },
-  { href: "/projects", label: "企划" },
+  {
+    label: "情报", children: [
+      { href: "/posts", label: "记录" },
+      { href: "/events", label: "活动" }
+    ]
+  }
 ];
 ---

@@ -22,11 +25,13 @@ const items: MenuItem[] = [
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
-          ><path
+        >
+          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
-            d="M4 6h16M4 12h8m-8 6h16"></path></svg
+            d="M4 6h16M4 12h8m-8 6h16"></path>
+        </svg
        >
      </div>
      <ul
@@ -41,7 +46,7 @@ const items: MenuItem[] = [
                <ul class="p-2">
                  {item.children?.map((child) => (
                    <li>
-                      <a href={item.href}>{item.label}</a>
+                      <a href={child.href}>{child.label}</a>
                    </li>
                  ))}
                </ul>
@@ -62,13 +67,11 @@ const items: MenuItem[] = [
              <details>
                <summary>{item.label}</summary>
                <ul class="p-2">
-                  <ul class="p-2">
-                    {item.children?.map((child) => (
-                      <li>
-                        <a href={item.href}>{item.label}</a>
-                      </li>
-                    ))}
-                  </ul>
+                  {item.children?.map((child) => (
+                    <li>
+                      <a href={child.href}>{child.label}</a>
+                    </li>
+                  ))}
                </ul>
              </details>
            ) : (
@@ -87,18 +90,22 @@ const items: MenuItem[] = [
        class="swap-on fill-current w-8 h-8"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
-        ><path
+      >
+        <path
          d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-        ></path></svg
+        ></path>
+      </svg
      >

      <svg
        class="swap-off fill-current w-8 h-8"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
-        ><path
+      >
+        <path
          d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-        ></path></svg
+        ></path>
+      </svg
      >
    </label>
  </div>
--- a/src/components/posts/Media.tsx
+++ b/src/components/posts/Media.tsx
@@ -1,13 +1,7 @@
 import { useState, Fragment } from "react";

-export default function Media({
-  sources,
-}: {
-  sources: { caption: string; url: string; type: string }[];
-}) {
-  const [focus, setFocus] = useState<boolean[]>(
-    sources.map((_, idx) => idx === 0)
-  );
+export default function Media({ sources }: { sources: { caption: string; url: string; type: string }[] }) {
+  const [focus, setFocus] = useState<boolean[]>(sources.map((_, idx) => idx === 0));

  function changeFocus(idx: number) {
    setFocus(focus.map((_, idx) => idx === idx));
@@ -26,10 +20,7 @@ export default function Media({
            checked={focus[idx]}
            onChange={() => changeFocus(idx)}
          />
-          <div
-            role="tabpanel"
-            className="tab-content bg-base-100 border-base-300 rounded-box"
-          >
+          <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box">
            {item.type === "video" && (
              <video className="mb-0 block w-full h-[360px]" controls>
                <source src={item.url} />
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -1,24 +0,0 @@
---
-import PageLayout from "../../layouts/PageLayout.astro";
---
-
-<PageLayout title="企划">
-  <div role="alert" class="alert alert-info">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      class="stroke-current shrink-0 w-6 h-6"
-      ><path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-      ></path></svg
-    >
-    <div>
-        <p>暂无可公开企划，若想进一步探索，可以加入我们的 GoatChat！</p>
-        <a class="link" href="https://matrix.to/#/#plaza:matrix.smartsheep.studio">邀请链接 👈</a>
-    </div>
-  </div>
-</PageLayout>
--- a/src/scripts/requests.ts
+++ b/src/scripts/requests.ts
@@ -1,17 +1,14 @@
 const defaultCms = "https://smartsheep.studio";

 export async function graphQuery(query: string, variables: any) {
-  const response = await fetch(
-    `${process.env.PUBLIC_CMS ?? defaultCms}/api/graphql`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        query,
-        variables,
-      }),
-    },
-  );
+  const response = await fetch(`${process.env.PUBLIC_CMS ?? defaultCms}/api/graphql`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      query,
+      variables,
+    }),
+  });

  return await response.json();
 }