Add project lists

revyos · Feb 24, 2025 · 0c184d6 · 0c184d6
1 parent 61609bf
commit 0c184d6
Show file tree

Hide file tree

Showing 10 changed files with 238 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -34,6 +34,10 @@ sidebar_position: 1
 
 对于文件夹，可以在文件夹中放置 `_category_.json` 手动设定其标题和所在位置，见[此处](docs/adaptation/_category_.json)
 
+## 项目列表
+### 添加项目
+`src/pages/projects.tsx` 下面可以添加，具体每一项意义见 `src/components/InfoCard.tsx` `InfoCardProps` 
+
 ## Links
 为了解决这个问题[facebook/docusaurus issues#3372](https://github.com/facebook/docusaurus/issues/3372)，默认为所有链接后面加上了一个 `/`， 因此跳转到其他页面需要向上一级走一次
 

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -65,6 +65,11 @@ const config: Config = {
           label: '提交问题与已知问题',
           position: 'left',
         },
+        {
+          href: '/projects',
+          label: '项目列表',
+          position: 'left',
+        },
         {
           href: 'https://github.com/revyos',
           label: 'GitHub',

diff --git a/i18n/en/code.json b/i18n/en/code.json
@@ -7,5 +7,8 @@
   },
   "开始使用": {
     "message": "Get Started"
+  },
+  "RevyOS 项目列表": {
+    "message": "RevyOS Projects"
   }
 }
diff --git a/i18n/en/docusaurus-theme-classic/navbar.json b/i18n/en/docusaurus-theme-classic/navbar.json
@@ -11,6 +11,9 @@
     "message": "Docs",
     "description": "Navbar item with label 文档"
   },
+  "item.label.项目列表": {
+    "message": "Projects"
+  },
   "item.label.提交问题与已知问题": {
     "message": "Issues",
     "description": "Navbar item with label 提交问题与已知问题"

diff --git a/src/components/InfoCard.module.css b/src/components/InfoCard.module.css
@@ -0,0 +1,47 @@
+/* 适配深色模式 */
+:root {
+  --background-color: #f9f9f9;
+  --text-color: #333;
+  --card-background: #fff;
+  --card-shadow: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme='dark'] {
+  --background-color: #1a1a1a;
+  --text-color: #fff;
+  --card-background: #2a2a2a;
+  --card-shadow: rgba(0, 0, 0, 0.3);
+}
+
+/* 标题样式 */
+.title {
+  text-align: center;
+  font-size: 1.75rem;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: var(--text-color);
+}
+
+/* 副标题样式 */
+.subTitle {
+  text-align: start;
+  font-size: 1rem;
+  margin-bottom: 10px;
+  color: var(--text-color);
+}
+
+/* 单个卡片样式 */
+.card {
+  background: var(--card-background);
+  border-radius: 12px;
+  box-shadow: 0 4px 10px var(--card-shadow);
+  padding: 20px;
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px var(--card-shadow);
+}
diff --git a/src/components/InfoCard.tsx b/src/components/InfoCard.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
+import styles from './InfoCard.module.css'
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+export type InfoCardProps = {
+  title: string;        // 标题，中文 
+  title_en?: string;    // 标题，英文
+  logo?: string;        // logo， xx.xx -> xx.dark.xx for night mode 
+  subtitle?: string;
+  subtitle_en?: string;
+  description?: string;
+  description_en?: string;
+  link: string;         // Link
+};
+
+export const InfoCard: React.FC<InfoCardProps> = ({ title, title_en, logo, subtitle, subtitle_en, description, description_en, link }) => {
+  const [dark, setDark] = useState(false);
+  const { colorMode } = useColorMode();
+  useEffect(() => {
+    setDark(colorMode === 'dark');
+  }, [[]])
+  const [name, ext] = logo.split(/\.(?=[^.]+$)/);
+  const {
+    i18n: { currentLocale },
+  } = useDocusaurusContext();
+  const isEn = currentLocale === 'en';
+
+  return (
+    <div className={styles.card} onClick={() => window.open(link, '_blank')}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        {logo &&
+          dark ?
+          <img src={useBaseUrl(`${name}.dark.${ext}`)} alt={title} style={{ width: 40, height: 40, borderRadius: '50%' }} onError={(e) => (e.currentTarget.src = useBaseUrl(logo))} />
+          :
+          <img src={useBaseUrl(logo)} alt={title} style={{ width: 40, height: 40, borderRadius: '50%' }} />
+        }
+        <div>
+          <h3 style={{ margin: 0, fontSize: '1.1em' }}>
+            <Link to={link} className={styles.title} style={{ textDecoration: 'none', color: 'inherit' }}>
+              {isEn ? (title_en != null ? title_en : title) : title}
+            </Link>
+          </h3>
+          <p className={styles.subTitle} style={{ margin: 0 }}>
+            {isEn ? (subtitle_en != null ? subtitle_en : subtitle) : subtitle}
+          </p>
+        </div>
+      </div>
+      <p style={{ margin: '10px 0 0', fontSize: '0.85em', color: dark ? '#aaa' : '#555' }}>
+        {isEn ? (description_en != null ? description_en : description) : description}
+      </p>
+    </div>
+  );
+};
+
+
+const InfoCardList: React.FC<{ items: InfoCardProps[] }> = ({ items }) => {
+  return (
+    <div style={{ display: 'grid', gap: '16px' }}>
+      {items.map((item, index) => (
+        <InfoCard key={index} {...item} />
+      ))}
+    </div>
+  );
+};
+
+export default InfoCardList;
diff --git a/src/pages/projects.module.css b/src/pages/projects.module.css
@@ -0,0 +1,38 @@
+/* 全局容器样式（就是整个里面的东西） */
+.container {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  padding: 4rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+  overflow: hidden;
+  flex-grow: 1;
+  position: relative;
+}
+
+/* 适配深色模式 */
+:root {
+  --background-color: #f9f9f9;
+  --text-color: #333;
+  --card-background: #fff;
+  --card-shadow: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme='dark'] {
+  --background-color: #1a1a1a;
+  --text-color: #fff;
+  --card-background: #2a2a2a;
+  --card-shadow: rgba(0, 0, 0, 0.3);
+}
+
+/* 卡片列表容器 */
+.cardListContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  padding-top: 20px;
+  gap: 25px;
+  width: 80%;
+  max-width: 1200px;
+}
diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+import Translate, { translate } from '@docusaurus/Translate';
+import Layout from '@theme/Layout';
+import styles from './projects.module.css';
+import InfoCardList, { InfoCardProps } from '../components/InfoCard';
+
+const projects: InfoCardProps[] = [
+  {
+    title: 'th1520-linux-kernel',
+    title_en: 'th1520-linux-kernel',
+    logo: '/img/github-mark.svg',
+    subtitle: 'th1520-linux-kernel',
+    subtitle_en: 'th1520-linux-kernel',
+    description: 'TH1520 的 Linux kernel',
+    description_en: 'Linux kernel for TH1520',
+    link: 'https://github.com/revyos/th1520-linux-kernel'
+  },
+  {
+    title: 'th1520-boot-firmware',
+    title_en: 'th1520-boot-firmware',
+    logo: '/img/github-mark.svg',
+    subtitle: 'th1520-boot-firmware',
+    subtitle_en: 'th1520-boot-firmware',
+    description: 'TH1520 的 boot firmware',
+    description_en: 'Boot firmware kernel for TH1520',
+    link: 'https://github.com/revyos/th1520-boot-firmware'
+  },
+];
+
+const ProjectsInner: React.FC = () => {
+  const [dark, setDark] = useState(false);
+  const { colorMode } = useColorMode();
+  useEffect(() => {
+    setDark(colorMode === 'dark');
+  }, [[]])
+
+  return (
+    <div
+      className={styles.container}
+      style={{
+        backgroundColor: dark ? '#1a1a1a' : '#f9f9f9',
+        color: dark ? '#fff' : '#333',
+        padding: '40px 20px',
+      }}
+    >
+      <h1 style={{ textAlign: 'center', fontSize: '3rem', marginBottom: 'px' }}>
+        <Translate>RevyOS 项目列表</Translate>
+      </h1>
+      <div className={styles.cardListContainer}>
+        <InfoCardList items={projects} />
+      </div>
+    </div>
+  )
+}
+
+const ProjectsPage: React.FC = () => {
+  return (
+    <Layout
+      title={translate({ message: 'RevyOS 项目列表' })}
+    >
+      <ProjectsInner />
+    </Layout>
+  );
+};
+
+export default ProjectsPage;
diff --git a/static/img/github-mark.dark.svg b/static/img/github-mark.dark.svg
diff --git a/static/img/github-mark.svg b/static/img/github-mark.svg