docs: add better website header style

3 years ago · 4639a675e5
parent 644acd470c
commit 4639a675e5
5 changed files with 156 additions and 31 deletions
--- a/website/i18n/zh-Hans/code.json
+++ b/website/i18n/zh-Hans/code.json
@ -265,5 +265,27 @@
  "theme.tags.tagsPageTitle": {
    "message": "标签",
    "description": "The title of the tag list page"
+  },
+  "Nightly version": {
+    "message": "Nightly 演示"
+  },
+  "Learn More": {
+    "message": "了解更多"
+  },
+  "theme.NavBar.navAriaLabel": {
+    "message": "主导航",
+    "description": "The ARIA label for the main navigation"
+  },
+  "theme.docs.sidebar.navAriaLabel": {
+    "message": "文档侧边栏",
+    "description": "The ARIA label for the sidebar navigation"
+  },
+  "theme.docs.sidebar.closeSidebarButtonAriaLabel": {
+    "message": "关闭导航栏",
+    "description": "The ARIA label for close button of mobile sidebar"
+  },
+  "theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
+    "message": "切换导航栏",
+    "description": "The ARIA label for hamburger menu button of mobile navigation"
  }
 }
--- a/website/src/components/HomepageHeader.tsx
+++ b/website/src/components/HomepageHeader.tsx
@ -0,0 +1,120 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import Head from '@docusaurus/Head';
+import styled from 'styled-components';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Translate from '@docusaurus/Translate';
+import { useColorMode } from '@docusaurus/theme-common';
+
+const Root = styled.div`
+  padding: 4rem 1rem 0;
+
+  @media (min-width: 997px) {
+    font-size: 3.75rem;
+    height: 540px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .main {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 80rem;
+
+    @media (min-width: 997px) {
+      flex-direction: row;
+    }
+
+    .header {
+      flex: 1;
+      text-align: center;
+
+      @media (min-width: 997px) {
+        text-align: left;
+      }
+
+      .title {
+        margin-bottom: 24px;
+        font-size: 2.25rem;
+        line-height: 1;
+        font-weight: 700;
+
+        @media (min-width: 997px) {
+          font-size: 3.75rem;
+        }
+      }
+
+      .desc {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        color: rgb(153, 153, 153);
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+
+        @media (min-width: 997px) {
+          font-size: 1rem;
+          line-height: 1.5rem;
+          max-width: 32rem;
+        }
+      }
+
+      .btns {
+        margin-bottom: 32px;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+
+        @media (min-width: 997px) {
+          flex-direction: row;
+        }
+      }
+    }
+
+    .screenshot {
+      flex: 1;
+    }
+  }
+`;
+
+export const HomepageHeader: React.FC = React.memo(() => {
+  const { siteConfig } = useDocusaurusContext();
+  const { colorMode } = useColorMode();
+
+  return (
+    <Root className="hero hero--primary">
+      <Head>
+        <link rel="prefetch" href="/img/hero-light.png" />
+        <link rel="prefetch" href="/img/hero-dark.png" />
+      </Head>
+
+      <div className="main">
+        <div className="header">
+          <h1 className="title">{siteConfig.title}</h1>
+          <p className="desc">{siteConfig.tagline}</p>
+
+          <div className="btns">
+            <Link
+              className="button button--info button--lg"
+              to="https://nightly.paw.msgbyte.com/"
+            >
+              <Translate>Nightly version</Translate>
+            </Link>
+
+            <Link
+              className="button button--secondary button--lg"
+              href="/docs/intro"
+            >
+              <Translate>Learn More</Translate>
+            </Link>
+          </div>
+        </div>
+        <div className="screenshot flex-1 xl:flex-none">
+          <img src={`/img/hero-${colorMode}.png`} alt="Preview of Tailchat" />
+        </div>
+      </div>
+    </Root>
+  );
+});
+HomepageHeader.displayName = 'HomepageHeader';
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@ -1,31 +1,10 @@
 import React from 'react';
-import clsx from 'clsx';
 import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './index.module.css';
 import HomepageFeatures from '../components/HomepageFeatures';
-import Translate from '@docusaurus/Translate';
-
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="https://nightly.paw.msgbyte.com/"
-          >
-            <Translate>Try in Nightly version</Translate>
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
-}
+import { HomepageHeader } from '../components/HomepageHeader';
+import { ColorModeProvider } from '@docusaurus/theme-common';

 function HomepageVideo() {
  return (
@ -47,18 +26,22 @@ function HomepageVideo() {

 export default function Home() {
  const { siteConfig } = useDocusaurusContext();
+
  return (
    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
+      title={`${siteConfig.title} | ${siteConfig.tagline}`}
+      description={`${siteConfig.tagline}`}
    >
-      <HomepageHeader />
-      <main>
-        {/* TODO: 全球化 */}
-        {/* <HomepageVideo /> */}
+      <ColorModeProvider>
+        <HomepageHeader />
+
+        <main>
+          {/* TODO: Global Support */}
+          {/* <HomepageVideo /> */}

-        <HomepageFeatures />
-      </main>
+          <HomepageFeatures />
+        </main>
+      </ColorModeProvider>
    </Layout>
  );
 }
--- a/website/static/img/hero-dark.png
+++ b/website/static/img/hero-dark.png
--- a/website/static/img/hero-light.png
+++ b/website/static/img/hero-light.png