Merge pull request #13 from ts-graphviz/use-docusaurus-components

Update to use docusaurus components

Author: kamiazya

src/components/Features/Features.tsx

@@ -66,9 +66,9 @@ const features = [
 
 const Features: React.FC = () => (
   <section id="features" className={styles.features}>
-    <h2>
+    <Heading as="h2">
       <Translate id="Features.title">Why Choose ts-graphviz?</Translate>
-    </h2>
+    </Heading>
     <div className={styles.featureList}>
       {features.map(({ title, Svg, description }) => (
         <div key={title} className={styles.featureItem}>

src/components/HeroSection/index.tsx

@@ -42,12 +42,12 @@ const HeroSection: React.FC = () => {
         <Link className="button button--secondary button--lg" to="/playground">
           <Translate id="HeroSection.playground">Playground 🎡</Translate>
         </Link>
-        <a
+        <Link
           className="button button--secondary button--lg"
-          href="https://ts-graphviz.github.io/ts-graphviz/"
+          to="https://ts-graphviz.github.io/ts-graphviz/"
         >
-          <Translate id="HeroSection.api">API Refarence 📖</Translate>
-        </a>
+          <Translate id="HeroSection.api">API Reference 📖</Translate>{' '}
+        </Link>
       </div>
       {init ? (
         <Particles

src/components/Tools/Tools.tsx

@@ -1,4 +1,6 @@
+import Link from '@docusaurus/Link';
 import Translate, { translate } from '@docusaurus/Translate';
+import Heading from '@theme/Heading';
 import styles from './Tools.module.css';
 
 // NOTE: Get icons from https://simpleicons.org/
@@ -43,20 +45,20 @@ const tools = [
 
 const Tools: React.FC = () => (
   <section id="tools" className={styles.tools}>
-    <h2>
+    <Heading as="h2">
       <Translate id="Tools.title">Our Tools and Libraries</Translate>
-    </h2>
+    </Heading>
     <div className={styles.toolList}>
       {tools.map((tool) => (
         <div key={tool.name} className={styles.toolItem}>
           <div className={styles.toolItemHeader}>
-            <h3>{tool.name}</h3>
+            <Heading as="h3">{tool.name}</Heading>
             <tool.Svg fill={tool.fill} className={styles.toolSvg} role="img" />
           </div>
           <p>{tool.description}</p>
-          <a href={tool.link} target="_blank" rel="noopener noreferrer">
+          <Link to={tool.link} target="_blank" rel="noopener noreferrer">
             <Translate id="Tools.learnMore">Learn More</Translate>
-          </a>
+          </Link>
         </div>
       ))}
     </div>