(apisix-website) branch master updated: feat: update blog/doc style (#1894)

[sunyi]

This is an automated email from the ASF dual-hosted git repository.

sunyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 02f47991758 feat: update blog/doc style (#1894)
02f47991758 is described below

commit 02f4799175861886c2d62b6b7a327a17a97b32e0
Author: litesun <su...@apache.org>
AuthorDate: Tue Apr 15 15:33:02 2025 +0800

    feat: update blog/doc style (#1894)
---
 blog/src/css/customTheme.scss         | 17 +++++++++++++++++
 blog/src/theme/BlogLayout/index.tsx   | 16 ++--------------
 blog/src/theme/BlogPostPage/index.tsx |  3 +++
 doc/src/css/customTheme.scss          | 22 ++++++++++++++++++++++
 website/src/css/customTheme.scss      | 22 ++++++++++++++++++++++
 5 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/blog/src/css/customTheme.scss b/blog/src/css/customTheme.scss
index a12e7ca692f..6a330ec0073 100644
--- a/blog/src/css/customTheme.scss
+++ b/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;
diff --git a/blog/src/theme/BlogLayout/index.tsx 
b/blog/src/theme/BlogLayout/index.tsx
index 941e6102d00..5b9c431a6af 100644
--- a/blog/src/theme/BlogLayout/index.tsx
+++ b/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>
diff --git a/blog/src/theme/BlogPostPage/index.tsx 
b/blog/src/theme/BlogPostPage/index.tsx
index cca937f48c8..d0a245f6eb6 100644
--- a/blog/src/theme/BlogPostPage/index.tsx
+++ b/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>
diff --git a/doc/src/css/customTheme.scss b/doc/src/css/customTheme.scss
index 33acf3479f0..26ecfa5e636 100644
--- a/doc/src/css/customTheme.scss
+++ b/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;
diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss
index f0da5117559..9d1950e8f7a 100644
--- a/website/src/css/customTheme.scss
+++ b/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;