docs: add changelog page

src/server/trpc/routers/global.ts

@@ -9,6 +9,7 @@ export const globalRouter = router({
         method: 'GET',
         path: '/global/config',
         tags: [OPENAPI_TAG.GLOBAL],
+        description: 'Get Tianji system global config',
       },
     })
     .input(z.void())

website/docusaurus.config.js

@@ -76,6 +76,7 @@ const config = {
           //   position: 'left',
           //   label: 'Tutorial',
           // },
+          { to: '/changelog', label: 'Changelog', position: 'left' },
           { to: '/api', label: 'API', position: 'left' },
           {
             href: 'https://github.com/msgbyte/tianji',
@@ -116,6 +117,10 @@ const config = {
           {
             title: 'More',
             items: [
+              {
+                label: 'Changelog',
+                to: '/changelog',
+              },
               {
                 label: 'API',
                 to: '/api',

website/package.json

@@ -23,13 +23,16 @@
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.12.0",
     "react-responsive-carousel": "^3.2.23",
-    "react-slick": "^0.29.0"
+    "react-slick": "^0.29.0",
+    "react-vertical-timeline-component": "^3.6.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.3",
     "@tsconfig/docusaurus": "^1.0.5",
     "@types/react-slick": "^0.23.11",
+    "@types/react-vertical-timeline-component": "^3.3.6",
     "autoprefixer": "^10.4.16",
     "docusaurus-plugin-image-zoom": "^1.0.1",
     "postcss": "^8.4.31",

website/pnpm-lock.yaml

@@ -25,12 +25,18 @@ dependencies:
   react-dom:
     specifier: ^17.0.2
     version: 17.0.2(react@17.0.2)
+  react-icons:
+    specifier: ^4.12.0
+    version: 4.12.0(react@17.0.2)
   react-responsive-carousel:
     specifier: ^3.2.23
     version: 3.2.23
   react-slick:
     specifier: ^0.29.0
     version: 0.29.0(react-dom@17.0.2)(react@17.0.2)
+  react-vertical-timeline-component:
+    specifier: ^3.6.0
+    version: 3.6.0(react@17.0.2)
 
 devDependencies:
   '@docusaurus/module-type-aliases':
@@ -42,6 +48,9 @@ devDependencies:
   '@types/react-slick':
     specifier: ^0.23.11
     version: 0.23.11
+  '@types/react-vertical-timeline-component':
+    specifier: ^3.3.6
+    version: 3.3.6
   autoprefixer:
     specifier: ^10.4.16
     version: 10.4.16(postcss@8.4.31)
@@ -2795,6 +2804,12 @@ packages:
       '@types/react': 18.2.33
     dev: true
 
+  /@types/react-vertical-timeline-component@3.3.6:
+    resolution: {integrity: sha512-OUvyPXRjXvUD/SNLO0CW0GbIxVF32Ios5qHecMSfw6kxnK1cPULD9NV80EuqZ3WmS/s6BgbcwmN8k4ISb3akhQ==}
+    dependencies:
+      '@types/react': 18.2.33
+    dev: true
+
   /@types/react@18.2.33:
     resolution: {integrity: sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==}
     dependencies:
@@ -7184,6 +7199,22 @@ packages:
       react-fast-compare: 3.2.2
       shallowequal: 1.1.0
 
+  /react-icons@4.12.0(react@17.0.2):
+    resolution: {integrity: sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 17.0.2
+    dev: false
+
+  /react-intersection-observer@8.34.0(react@17.0.2):
+    resolution: {integrity: sha512-TYKh52Zc0Uptp5/b4N91XydfSGKubEhgZRtcg1rhTKABXijc4Sdr1uTp5lJ8TN27jwUsdXxjHXtHa0kPj704sw==}
+    peerDependencies:
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0
+    dependencies:
+      react: 17.0.2
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -7326,6 +7357,17 @@ packages:
       - '@types/react'
     dev: false
 
+  /react-vertical-timeline-component@3.6.0(react@17.0.2):
+    resolution: {integrity: sha512-l9zulqjIGlRuaQeplGzV4r/tG2RYBpYt84Il8w4IxnJze2cDIGI04MKo3F7f1sHT0Sih1ohEFts8UV23AJS15Q==}
+    requiresBuild: true
+    dependencies:
+      classnames: 2.3.2
+      prop-types: 15.8.1
+      react-intersection-observer: 8.34.0(react@17.0.2)
+    transitivePeerDependencies:
+      - react
+    dev: false
+
   /react@17.0.2:
     resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
     engines: {node: '>=0.10.0'}

website/src/pages/changelog.tsx

@@ -0,0 +1,68 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import React from 'react';
+import {
+  VerticalTimeline,
+  VerticalTimelineElement,
+  VerticalTimelineElementProps,
+} from 'react-vertical-timeline-component';
+import {
+  AiFillThunderbolt,
+  AiOutlineArrowUp,
+  AiOutlineCheck,
+} from 'react-icons/ai';
+import 'react-vertical-timeline-component/style.min.css';
+
+const timelineStyle: Record<string, VerticalTimelineElementProps> = {
+  current: {
+    className: 'vertical-timeline-element--work',
+    dateClassName: 'text-black',
+    contentStyle: { background: 'rgb(33, 150, 243)', color: '#fff' },
+    contentArrowStyle: { borderRight: '7px solid  rgb(33, 150, 243)' },
+    iconStyle: { background: 'rgb(33, 150, 243)', color: '#fff' },
+    icon: <AiFillThunderbolt />,
+  },
+  normal: {
+    className: 'vertical-timeline-element--work',
+    iconStyle: { background: 'rgb(33, 150, 243)', color: '#fff' },
+    icon: <AiOutlineCheck />,
+  },
+  start: {
+    className: 'vertical-timeline-element--work',
+    iconStyle: { background: 'rgb(16, 204, 82)', color: '#fff' },
+    icon: <AiOutlineArrowUp />,
+  },
+};
+
+function Timeline() {
+  return (
+    <div className="bg-gray-100">
+      <VerticalTimeline>
+        <VerticalTimelineElement {...timelineStyle.current} date="now">
+          <h3 className="vertical-timeline-element-title">Still Developing</h3>
+          <h4 className="vertical-timeline-element-subtitle">never stop</h4>
+          <p>
+            We have been continuously focusing on exploring the needs in this
+            field and growing continuously. Just like you.
+          </p>
+        </VerticalTimelineElement>
+
+        <VerticalTimelineElement {...timelineStyle.normal} date="2023/11/9">
+          <h3 className="vertical-timeline-element-title">Start Alpha Test</h3>
+          <p>Invite some people test it</p>
+        </VerticalTimelineElement>
+
+        <VerticalTimelineElement {...timelineStyle.start} />
+      </VerticalTimeline>
+    </div>
+  );
+}
+
+export default function Changelog(): JSX.Element {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout title={'Change Log'} description="Insight into everything">
+      <Timeline />
+    </Layout>
+  );
+}

website/src/pages/index.tsx

@@ -92,7 +92,7 @@ export default function Home(): JSX.Element {
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
+      description="Insight into everything"
     >
       <HomepageHeader />