add xiehanzi logo using Hanzi Writer

package.json

@@ -21,6 +21,7 @@
     "clsx": "^1.2.1",
     "css-minimizer-webpack-plugin": "^4.1.0",
     "docusaurus-plugin-code-preview": "^0.0.1",
+    "hanzi-writer": "^3.3.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -8,16 +8,26 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import styles from './index.module.css';
 import { HomepageGetStarted, HomepageXiehanziCard } from '../components/HomepageCards';
 
+import HanziWriter from 'hanzi-writer';
+
 function HomepageHeader() {
+  const ref = useRef()
+
+  useEffect(() => {
+    createXieHanziLogo(ref);
+  }, []);
+
   const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx('hero', styles.heroBanner)}>
       <div className="container">
+        <div ref={ref}></div>
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div style={{
           display: "inline-flex",
-          flexWrap: "wrap"
+          flexWrap: "wrap",
+          justifyContent: "center"
         }}>
           <div className={styles.buttons}>
             <Link
@@ -58,3 +68,17 @@ export default function Home(): JSX.Element {
     </Layout>
   );
 }
+
+function createXieHanziLogo(ref) {
+  let xiehanzi = ["写", "汉", "字"];
+
+  for (let hanzi of xiehanzi) {
+    const writer = HanziWriter.create(ref.current, hanzi, {
+      width: 80,
+      height: 80,
+      padding: 5,
+      strokeColor: hanzi == "写" ? "#4caf50" : "#2196f3"
+    })
+    writer.loopCharacterAnimation();
+  }
+}