Merge pull request #76 from hust-open-atom-club/feat/change-orgs

chore: modify page organizations.
hust-open-atom-club · May 14, 2024 · 003f8dc · 003f8dc
2 parents 04e249f + 538eb61
commit 003f8dc
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 58 deletions.
diff --git a/pages/src/components/Card.tsx b/pages/src/components/Card.tsx
@@ -8,9 +8,10 @@ export interface Props {
   frontmatter: CollectionEntry<"posts">["data"];
   secHeading?: boolean;
   body?: string;
+  publishCard?: boolean;
 }
 
-export default function Card({ id, href, frontmatter, secHeading = true, body }: Props) {
+export default function Card({ id, href, frontmatter, secHeading = true, body, publishCard }: Props) {
   const {
     title,
     status,
@@ -22,41 +23,48 @@ export default function Card({ id, href, frontmatter, secHeading = true, body }:
   };
 
   return (
-    <li className="my-2 flex flex-row">
-      <a
-        href={href}
-        className="flex-1 inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
-      >
-        {secHeading ? (
-          id ? (
-            <h2 {...headerProps}>
-              <img className="inline-block w-6 h-6 me-2" src={"/assets/logo_" + id.split('/')[0] + ".png"} alt={id.split('/')[0] + " icon"}/>
-              {title}
-            </h2>
+    <li className={publishCard ? "mb-8" : ""} >
+      <div className="my-2 flex flex-row">
+        <a
+          href={href}
+          className="flex-1 inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
+        >
+          {secHeading ? (
+            id ? (
+              <h2 {...headerProps}>
+                <img className="inline-block w-6 h-6 me-2" src={"/assets/logo_" + id.split('/')[0] + ".png"} alt={id.split('/')[0] + " icon"} />
+                {title}
+              </h2>
+            ) : (
+              <h2 {...headerProps}>{title}</h2>
+            )
           ) : (
-            <h2 {...headerProps}>{title}</h2>
-          )
-        ) : (
-          id ? (
-            <h3 {...headerProps}>
-              <img className="inline-block w-6 h-6 me-2" src={"/assets/logo_" + id.split('/')[0] + ".png"} alt={id.split('/')[0] + " icon"}/>
-              {title}
-            </h3>
-          ) : (
-            <h3 {...headerProps}>{title}</h3>
-          )
-        )}
-      </a>
-      {
-        status === 'collected' && <div className="px-2 mx-2 text-slate-500">
-          {body && body.split(/\s/g).length} 词
+            id ? (
+              <h3 {...headerProps}>
+                <img className="inline-block w-6 h-6 me-2" src={"/assets/logo_" + id.split('/')[0] + ".png"} alt={id.split('/')[0] + " icon"} />
+                {title}
+              </h3>
+            ) : (
+              <h3 {...headerProps}>{title}</h3>
+            )
+          )}
+        </a>
+        {
+          status === 'collected' && <div className="px-2 mx-2 text-slate-500">
+            {body && body.split(/\s/g).length} 词
+          </div>
+        }
+        <div>
+          {!publishCard && <Status status={status} id={id} />}
         </div>
-      }
-      <div>
-        <Status status={status} id={id} />
+        {/* <Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} /> */}
       </div>
-      {/* <Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} /> */}
-      {/* <p>{description}</p> */}
+      {publishCard &&
+        <p className="break-all">
+          <span className="mr-2">{body?.replace("#", "")?.substring(0, 130)}</span>
+          <a href={href} className="text-orange">[阅读更多]</a>
+        </p>
+      }
     </li>
   );
 }
@@ -80,16 +88,16 @@ function Status({ status, id }: { status: string, id: string | undefined }) {
         <span className={`flex w-3 h-3 me-3 ${getStyle(status)} rounded-full`}></span>
         <span>
           <a
-          href={`https://github.com/hust-open-atom-club/TranslateProject/edit/master/sources/${id}`}
-          className="text-skin-accent hover:underline"
+            href={`https://github.com/hust-open-atom-club/TranslateProject/edit/master/sources/${id}`}
+            className="text-skin-accent hover:underline"
           >
             {getText(status)}
           </a>
         </span>
       </span>
     )
   }
-  else{
+  else {
     return (
       <span className="flex flex-row items-center">
         <span className={`flex w-3 h-3 me-3 ${getStyle(status)} rounded-full`}></span>

diff --git a/pages/src/components/Header.astro b/pages/src/components/Header.astro
@@ -3,7 +3,7 @@ import { LOGO_IMAGE, SITE } from "@config";
 import Hr from "./Hr.astro";
 
 export interface Props {
-  activeNav?: "posts" | "tags" | "about" | "search" | "rank";
+  activeNav?: "posts" | "tags" | "about" | "search" | "rank" | "tasks";
 }
 
 const { activeNav } = Astro.props;
@@ -59,6 +59,11 @@ const { activeNav } = Astro.props;
               文章
             </a>
           </li>
+          <li>
+            <a href="/collected/" class={activeNav === "tasks" ? "active" : ""}>
+              任务
+            </a>
+          </li>
           <li>
             <a href="/rank/" class={activeNav === "rank" ? "active" : ""}>
               排名

diff --git a/pages/src/config.ts b/pages/src/config.ts
@@ -31,11 +31,11 @@ export const STATUS_LIST: {
   color?: string;
 }[] = [
     { status: "collected", text: "去翻译", tabText: "待翻译", color: "bg-gray-500" },
-    { status: "translating", text: "翻译中", tabText: "翻译中", color: "bg-yellow-300" },
+    { status: "translating", text: "翻译中", hideInTab: true, tabText: "翻译中", color: "bg-yellow-300" },
     { status: "translated", text: "去校对", tabText: "待校对", color: "bg-orange-500" },
     { status: "proofread", text: "去发布", tabText: "待发布", color: "bg-purple-500" },
     { status: "proofreading", text: "校对中", hideInTab: true, color: "bg-blue-500" },
-    { status: "published", text: "已发布", tabText: "已发布", color: "bg-green-500" },
+    { status: "published", text: "已发布", hideInTab: true, tabText: "已发布", color: "bg-green-500" },
   ];
 
 export const RANK_LIST: {

diff --git a/pages/src/layouts/Posts.astro b/pages/src/layouts/Posts.astro
@@ -17,9 +17,10 @@ export interface Props {
   totalPages: number;
   paginatedPosts: CollectionEntry<"posts">[];
   status: string | undefined;
+  publishPage?: boolean;
 }
 
-const { currentPage, totalPages, paginatedPosts } = Astro.props;
+const { currentPage, totalPages, paginatedPosts, publishPage } = Astro.props;
 const status = Astro.props.status || "all";
 
 function getStyle(tabStatus: string) {
@@ -33,26 +34,41 @@ const countData = getStatusCount(await getCollection("posts"));
 ---
 
 <Layout title={`${SITE.title}`}>
-  <Header activeNav="posts" />
+  <Header activeNav={publishPage ? "posts" : "tasks"} />
   <Main pageTitle="">
-    <StatusChart data={countData} client:only />
-    <nav>
-      {
-        STATUS_LIST.map(({status, hideInTab,text, tabText}) => !hideInTab && (
-          <LinkButton
-            href={`/${status}/`}
-            className={getStyle(status)}
-            ariaLabel={status}
-          >
-            {tabText || text}
-          </LinkButton>
-        ))
-      }
-    </nav>
+    {
+      !publishPage && STATUS_LIST.find(x => x.status == status)?.hideInTab && (
+        <StatusChart data={countData} client:only />
+      )
+    }
+    {
+      !publishPage && (
+        <nav>
+          {STATUS_LIST.map(
+            ({ status, hideInTab, text, tabText }) =>
+              !hideInTab && (
+                <LinkButton
+                  href={`/${status}/`}
+                  className={getStyle(status)}
+                  ariaLabel={status}
+                >
+                  {tabText || text}
+                </LinkButton>
+              )
+          )}
+        </nav>
+      )
+    }
     <ul>
       {
         paginatedPosts.map(({ id, data, slug, body }) => (
-          <Card id={id} href={`/posts/${slug}/`} frontmatter={data} body={body} />
+          <Card
+            id={id}
+            href={`/posts/${slug}/`}
+            frontmatter={data}
+            body={body}
+            publishCard={publishPage}
+          />
         ))
       }
     </ul>

diff --git a/pages/src/pages/index.astro b/pages/src/pages/index.astro
@@ -4,7 +4,7 @@ import { getPostByStatus } from "./[status]/[page].astro";
 import getPagination from "@utils/getPagination";
 import Posts from "@layouts/Posts.astro";
 
-const status = "collected";
+const status = "published";
 const posts = await getPostByStatus(status);
 const sortedPosts = getSortedPosts(posts);
 
@@ -15,4 +15,4 @@ const pagination = getPagination({
 });
 ---
 
-<Posts {...pagination} status={status} />
+<Posts {...pagination} status={status} publishPage/>