feat: update blog/doc style

blog/src/css/customTheme.scss

@@ -480,6 +480,23 @@ a:hover {
   }
 }
 
+article h1 {
+  font-size: 48px;
+}
+
+article h2 {
+  font-size: 36px;
+}
+
+article h3 {
+  font-size: 24px;
+}
+
+article {
+  font-size: 20px;
+  line-height: 35.4px;
+}
+
 /* Announcement Bar */
 div[class*="announcementBar_"] {
   height: 40px;

blog/src/theme/BlogLayout/index.tsx

@@ -11,7 +11,6 @@ import type { FC } from 'react';
 import React from 'react';
 import Layout from '@theme/Layout';
 import BlogSidebar from '@theme/BlogSidebar';
-import TOC from '@theme/TOC';
 import {
   LinkedinIcon,
   LinkedinShareButton,
@@ -27,12 +26,11 @@ import Sticky from 'react-stickynode';
 import clsx from 'clsx';
 import style from './style.module.scss';
 
-const Share = ({ metadata }) => {
+export const Share = ({ metadata }) => {
   const { title, description, permalink } = metadata;
   const url = `https://apisix.apache.org${permalink}`;
   return (
     <section className={style.shareSection}>
-      <h4>Share</h4>
       <div>
         <LinkedinShareButton title={title} summary={description} url={url}>
           <LinkedinIcon size={32} round />
@@ -97,29 +95,19 @@ const BlogLayout: FC<Props> = (props) => {
     sidebar, toc, children, metadata, ...layoutProps
   } = props;
   const hasSidebar = sidebar && sidebar.items.length > 0;
-  const windowType = useWindowType();
 
   return (
     <Layout {...layoutProps}>
       <TagsHeader />
 
       <div className="container margin-vert--lg">
-        <div className="row">
+        <div className="row" style={{ justifyContent: 'center' }}>
           {hasSidebar && (
             <aside className="col col--3">
               <BlogSidebar sidebar={sidebar!} />
             </aside>
           )}
           <div className={clsx({ col: true, 'col--10': toc })}>{children}</div>
-          {toc && windowType !== 'mobile' && (
-            <div className={clsx('col col--2', style.section)}>
-              {metadata && <Share metadata={metadata} />}
-              <section className={style.tocSection}>
-                <h4>Table of Contents</h4>
-                <TOC toc={toc} style={{ position: 'static' }} />
-              </section>
-            </div>
-          )}
         </div>
       </div>
     </Layout>

blog/src/theme/BlogPostPage/index.tsx

@@ -20,6 +20,7 @@ import Image from 'rc-image';
 import { MDXProvider } from '@mdx-js/react';
 import { parseSrcset, stringifySrcset } from 'srcset';
 import BlogPostPaginator from '../BlogPostPaginator';
+import { Share } from '../BlogLayout';
 
 const urlParse = (url: string) => {
   const urlParseArr = url.split('/');
@@ -135,10 +136,12 @@ const BlogPostPage = (props: Props): JSX.Element => {
       </Seo>
 
       <BlogPostItem frontMatter={frontMatter} assets={assets} metadata={metadata} isBlogPostPage>
+        <Share metadata={metadata} />
         <MDXProvider components={components}>
           <BlogPostContents />
         </MDXProvider>
       </BlogPostItem>
+      <Share metadata={metadata} />
 
       {(nextItem || prevItem) && <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />}
     </BlogLayout>

doc/src/css/customTheme.scss

@@ -473,6 +473,28 @@ a:hover {
   }
 }
 
+article h1 {
+  font-size: 48px;
+}
+
+article h2 {
+  font-size: 36px;
+}
+
+article h3 {
+  font-size: 24px;
+}
+
+article {
+  font-size: 20px;
+  line-height: 35.4px;
+}
+
+article p {
+  font-size: 20px;
+  line-height: 35.4px;
+}
+
 /* Announcement Bar */
 div[class*="announcementBar_"] {
   height: 40px;

website/src/css/customTheme.scss

@@ -479,6 +479,28 @@ a:hover {
   }
 }
 
+article h1 {
+  font-size: 48px;
+}
+
+article h2 {
+  font-size: 36px;
+}
+
+article h3 {
+  font-size: 24px;
+}
+
+article {
+  font-size: 20px;
+  line-height: 35.4px;
+}
+
+article p {
+  font-size: 20px;
+  line-height: 35.4px;
+}
+
 /* Announcement Bar */
 div[class*="announcementBar_"] {
   height: 40px;