chore(webpage): add id to homepage in h2 (#5951)

* feat: add webpage id in h2 * fix: use Heading tag * fix:fix end typo * fix: add import heading * fix: separate className and Heading tag * fix: separate div className * fix:fix import * fix: add <p> tag * fix:fix id name and space * fix: use regex with - * fix: add replace regex about comma * fix:remove not use start
typescript-eslint · Nov 17, 2022 · ab88f77 · ab88f77
1 parent 4d46e65
commit ab88f77
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx
@@ -1,6 +1,7 @@
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Heading from '@theme/Heading';
 import Layout from '@theme/Layout';
 import clsx from 'clsx';
 import React from 'react';
@@ -108,8 +109,15 @@ const features: FeatureItem[] = [
 function Feature({ title, description }: FeatureItem): JSX.Element {
   return (
     <div className="col col--12 padding-vert--lg">
-      <h2 className="text--center">{title}</h2>
-      {description}
+      <div className="text--center">
+        <Heading
+          as="h2"
+          id={title.replace(/,/g, '').toLowerCase().replace(/\s|_/g, '-')}
+        >
+          {title}
+        </Heading>
+      </div>
+      <p>{description}</p>
       <div className={styles.buttons}>
         <Link className="button button--primary" to={useBaseUrl('docs/')}>
           Get Started
@@ -161,7 +169,9 @@ function Home(): JSX.Element {
         ))}
         <section className={styles.sponsors}>
           <div className="container text--center padding-vert--lg">
-            <h2>Financial Contributors</h2>
+            <Heading as="h2" id="financial-contributors">
+              Financial Contributors
+            </Heading>
             <FinancialContributors />
           </div>
         </section>