docs: add better website header style

2 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';
+import { HomepageHeader } from '../components/HomepageHeader';
-
+import { ColorModeProvider } from '@docusaurus/theme-common';
 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>
  );
 }
 function HomepageVideo() {
  return (
@ -47,18 +26,22 @@ function HomepageVideo() {
 export default function Home() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <Layout
-      title={`Hello from ${siteConfig.title}`}
+      title={`${siteConfig.title} | ${siteConfig.tagline}`}
-      description="Description will go into a meta tag in <head />"
+      description={`${siteConfig.tagline}`}
    >
      <ColorModeProvider>
        <HomepageHeader />
        <main>
-        {/* TODO: 全球化 */}
+          {/* TODO: Global Support */}
          {/* <HomepageVideo /> */}
          <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