This is an automated email from the ASF dual-hosted git repository.
xiaoyu pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-shenyu-website.git
The following commit(s) were added to refs/heads/main by this push:
new 805fcfef2a Blog Page Update (#629)
805fcfef2a is described below
commit 805fcfef2adc5676a57c615eb027e7915483efeb
Author: gouzixing <[email protected]>
AuthorDate: Thu Jul 7 20:33:24 2022 +0800
Blog Page Update (#629)
* newsPage
* news page
* bugfix
* news page update
* bugfix --path bug
* conflict
* conflict
* img update
* blog page refractor
* blog page new style
* delete annotate
* index page highlight for slogon
* bugfix:document for node
---
docusaurus.config.js | 2 +-
src/data/blogInfo.js | 163 ++++++++++++++++++++++++++++++++++++++++++++++
src/pages/blog.module.css | 120 ++++++++++++++++++++++++++++++++++
src/pages/blog.tsx | 72 ++++++++++++++++++++
src/pages/index.tsx | 2 +-
static/img/blog/1-1.png | Bin 0 -> 77176 bytes
static/img/blog/1-2.png | Bin 0 -> 52608 bytes
static/img/blog/1-3.png | Bin 0 -> 65862 bytes
static/img/blog/1-4.png | Bin 0 -> 76134 bytes
static/img/blog/1-5.png | Bin 0 -> 47685 bytes
static/img/blog/3-2.png | Bin 0 -> 26691 bytes
static/img/blog/3-3.jpg | Bin 0 -> 53482 bytes
static/img/blog/3-4.png | Bin 0 -> 79627 bytes
static/img/blog/4-1.png | Bin 0 -> 74544 bytes
static/img/blog/4-2.png | Bin 0 -> 57664 bytes
static/img/blog/4-3.png | Bin 0 -> 146770 bytes
static/img/blog/4-4.png | Bin 0 -> 42011 bytes
static/img/blog/5-1.png | Bin 0 -> 29042 bytes
static/img/blog/6-1.png | Bin 0 -> 104151 bytes
19 files changed, 357 insertions(+), 2 deletions(-)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 2d4c72e58a..19dbbf9147 100755
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -215,7 +215,7 @@ module.exports = {
},
blog: {
showReadingTime: true,
- blogSidebarCount: 'ALL',
+ blogSidebarCount: 0,
blogSidebarTitle: 'All Blog Posts',
editLocalizedFiles: true,
// Please change this to your repo.
diff --git a/src/data/blogInfo.js b/src/data/blogInfo.js
new file mode 100644
index 0000000000..db30d4adac
--- /dev/null
+++ b/src/data/blogInfo.js
@@ -0,0 +1,163 @@
+export default [
+ {
+ categray: 'SPI',
+ posts: [
+ {
+ title: "MatchStrategy -- analyze the design based on SPI",
+ author: "Huihui Yin",
+ src: "SPI-SourceCode-Analysis-MatchStrategy-SPI",
+ cover: "/img/blog/4-1.png",
+ date: '2021-07-2',
+ abs:'Gateway applications need to support a variety of load
balancing strategies, including random,Hashing, RoundRobin and so on. In Apache
Shenyu gateway, it not only realizes such traditional algorithms, but also
makes smoother traffic processing for the entry of server nodes through
detailed processing such as traffic warm-up, so as to obtain better overall
stability. In this article, let\'s walk through how Apache Shenyu is designed
and implemented this part of the fu [...]
+ },
+ {
+ title: "PredicateJudge -- analyze the design based on SPI",
+ author: "Huihui Yin",
+ src: "SPI-SourceCode-Analysis-PredicateJudge-SPI",
+ cover: "/img/blog/4-2.png",
+ date: '2021-07-2',
+ abs:'In most of the plugins ( such as Dubbo,
gRPC,Spring-cloud, etc) of Apache Shenyu, the routingparameters are designed to
support the combination of multiple conditions. In order to realize such
requirements, the parameters and behaviors are abstracted to three parts
according to its SPI mechanism, and implemented in shenyu-plugin-base module.'
+
+ },
+ {
+ title: "LoadBalance SPI Source Code Analysis",
+ author: "Huihui Yin",
+ src: "SPI-SourceCode-Analysis-LoadBalance-SPI",
+ cover: "/img/blog/4-3.png",
+ date: '2021-07-2',
+ abs:'Apache Shenyu has been identified as a gateway
application which supports a variety of protocols and microservice frameworks
such as Dubbo, gRPC, Spring-Cloud, etc. To do this, the product has
accomplished an elegant SPI (Service Provider Interface) as its foundation, and
make the Rule data parsing and predicting program very simple , resiliency and
security. As to rule data parsing processing, the SPI design increases the
product\'s scalability. When appending new p [...]
+ },
+ {
+ title: "RateLimiter SPI code analysis",
+ author: "Huihui Yin",
+ src: "SPI-SourceCode-Analysis-RateLimiter-SPI",
+ cover: "/img/blog/4-4.png",
+ date: '2021-07-2',
+ abs:'Rate limiter is a very important integral of gateway
application, to deal with high traffic. When the system is attacked abnormally
by a large number of traffic gathered in a short time; When there are a large
number of lower priority request need to be slow down or else it will effect
your high priority transactions; Or sometimes your system can not afford the
regular traffic; in these scenarios, we need to start rate limiter component to
protect our system, through [...]
+ },
+ ]
+ },
+ {
+ categray: 'RegisterCenter',
+ posts: [
+ {
+ title: "Register Center Source Code Analysis of Http Register",
+ author: "midnight2104",
+ src: "RegisterCenter-SourceCode-Analysis-Http-Register",
+ cover: "/img/blog/5-1.png",
+ date: '2021-07-2',
+ abs:'In ShenYu gateway, the registration center is used to
register the client information to shenyu-admin, admin then synchronizes this
information to the gateway through data synchronization, and the gateway
completes traffic filtering through these data. The client information mainly
includes interface information and URI information.'
+ },
+ ]
+ },
+ {
+ categray: 'Start',
+ posts: [
+ {
+ title: "Apache ShenYu Start Demo",
+ author: "Kunshuai Zhu",
+ src: "Start-SourceCode-Analysis-Start-Demo",
+ cover: "/img/blog/6-1.png",
+ date: '2021-07-2',
+ abs:'Apache ShenYu Start Demo'
+ },
+ ]
+ },
+ {
+ categray: 'DataSync',
+ posts: [
+ {
+ title: "Etcd Data Synchronization Source Code Analysis",
+ author: "4zd",
+ src: "DataSync-SourceCode-Analysis-Etcd-Data-Sync",
+ cover: "/img/blog/1-1.png",
+ date: '2021-07-2',
+ abs:'In ShenYu gateway, data synchronization refers to how to
synchronize the updated data to the gateway after the data is sent in the
background management system. The Apache ShenYu gateway currently supports data
synchronization for ZooKeeper, WebSocket, http long poll, Nacos, Etcd and
Consul. The main content of this article is based on Etcd data synchronization
source code analysis.'
+ },
+ {
+ title: "Http Long Polling Data Synchronization Source Code
Analysis",
+ author: "midnight2104",
+ src: "DataSync-SourceCode-Analysis-Http-Data-Sync",
+ cover: "/img/blog/1-2.png",
+ date: '2022-07-2',
+ abs:'In ShenYu gateway, data synchronization refers to how to
synchronize the updated data to the gateway after the data is sent in the
background management system. The Apache ShenYu gateway currently supports data
synchronization for ZooKeeper, WebSocket, http long poll, Nacos, etcd and
Consul. The main content of this article is based on http long poll data
synchronization source code analysis.'
+ },
+ {
+ title: "Nacos Data Synchronization Source Code Analysis",
+ author: "4zd",
+ src: "DataSync-SourceCode-Analysis-Nacos-Data-Sync",
+ cover: "/img/blog/1-3.png",
+ date: '2022-07-2',
+ abs:'In ShenYu gateway, data synchronization refers to how to
synchronize the updated data to the gateway after the data is sent in the
background management system. The Apache ShenYu gateway currently supports data
synchronization for ZooKeeper, WebSocket, http long poll, Nacos, etcd and
Consul. The main content of this article is based on Nacos data synchronization
source code analysis.'
+ },
+ {
+ title: "WebSocket Data Synchronization Source Code Analysis",
+ author: "midnight2104",
+ src: "DataSync-SourceCode-Analysis-WebSocket-Data-Sync",
+ cover: "/img/blog/1-4.png",
+ date: '2022-07-2',
+ abs:'In ShenYu gateway, data synchronization refers to how to
synchronize the updated data to the gateway after the data is sent in the
background management system. The Apache ShenYu gateway currently supports data
synchronization for ZooKeeper, WebSocket, http long poll, Nacos, etcd and
Consul. The main content of this article is based on WebSocket data
synchronization source code analysis.'
+ },
+ {
+ title: "ZooKeeper Data Synchronization Source Code Analysis",
+ author: "midnight2104",
+ src: "DataSync-SourceCode-Analysis-ZooKeeper-Data-Sync",
+ cover: "/img/blog/1-5.png",
+ date: '2022-07-2',
+ abs:'In ShenYu gateway, data synchronization refers to how to
synchronize the updated data to the gateway after the data is sent in the
background management system. The Apache ShenYu gateway currently supports data
synchronization for ZooKeeper, WebSocket, http long poll, Nacos, etcd and
Consul. The main content of this article is based on WebSocket data
synchronization source code analysis.'
+ },
+ ]
+ },
+ {
+ categray: 'Integration Test',
+ posts: [
+ {
+ title: "Integration Test Analysis",
+ author: "Kunshuai Zhu",
+ src: "IntegrationTest-Analysis",
+ cover: "/img/logo.svg",
+ date: '2022-07-2',
+ abs:'This article will provide an in-depth analysis of Apache
ShenYu\'s integration tests.'
+ },
+ ]
+ },
+ {
+ categray: 'Plugin',
+ posts: [
+ {
+ title: "Code Analysis For Context-Path Plugin",
+ author: "Kunshuai Zhu",
+ src: "Plugin-SourceCode-Analysis-Context-Path-Plugin",
+ cover: "/img/logo.svg",
+ date: '2021-07-2',
+ abs:'Code Analysis For Context-Path Plugin'
+ },
+ {
+ title: "Code Analysis For Dubbo Plugin",
+ author: "midnight2104",
+ src: "Plugin-SourceCode-Analysis-Dubbo-Plugin",
+ cover: "/img/blog/3-2.png",
+ date: '2021-07-2',
+ abs:'The ShenYu gateway uses the divide plugin to handle http
requests. You can see the official documentation Quick start with Http to learn
how to use this plugin.'
+ },
+ {
+ title: "Code Analysis For Param-Mapping Plugin",
+ author: "Kunshuai Zhu",
+ src: "Plugin-SourceCode-Analysis-Param-Mapping-Plugin",
+ cover: "/img/blog/3-3.jpg",
+ date: '2021-07-2',
+ abs:'The Apache ShenYu gateway uses the dubbo plugin to make
calls to the dubbo service. You can see the official documentation Dubbo Quick
Start to learn how to use the plugin.'
+ },
+ {
+ title: "Code Analysis For Divide Plugin",
+ author: "midnight2104",
+ src: "Plugin-SourceCode-Analysis-Divide-Plugin",
+ cover: "/img/blog/3-4.png",
+ date: '2021-07-2',
+ abs:'Code Analysis For Divide Plugin'
+ },
+ ]
+ },
+
+
+]
\ No newline at end of file
diff --git a/src/pages/blog.module.css b/src/pages/blog.module.css
new file mode 100644
index 0000000000..ace3366657
--- /dev/null
+++ b/src/pages/blog.module.css
@@ -0,0 +1,120 @@
+.container{
+ display: flex;
+ flex-direction: row;
+ margin: 0 calc(var(--ifm-spacing-horizontal)*-1);
+ flex-wrap: wrap;
+}
+
+.content{
+ display: flex;
+ --ifm-col-width:78%;
+ flex: 0 0 var(--ifm-col-width);
+ max-width: var(--ifm-col-width);
+ align-items: center;
+ flex-direction: column;
+ padding-left: 12.333%;
+}
+
+.categray{
+ display: flex;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+ width: 100%;
+}
+
+.darkAnchor{
+ height: 60px;
+ margin-top: -60px;
+}
+
+.title{
+ width: 100%;
+ font-size: 22px;
+ font-weight: bold;
+ color: #2c3e50;
+ margin: 30px 0 30px 20px;
+ border-bottom: 1px solid #eaecef;
+}
+
+
+.card{
+ flex:1;
+ margin: 0 20px 0 20px;
+ box-sizing: border-box;
+ width: calc( 100% - 160px );
+ min-width: calc( 100% - 160px );
+ max-width: calc( 100% - 160px );
+}
+
+.cardImage{
+ border-radius:10px;
+}
+
+.postTitle{
+ font-size: 18px;
+ font-weight: bold;
+ margin-top: 5px;
+ color: var(--ifm-color-primary);
+}
+
+.postTitle:hover{
+ cursor: pointer;
+}
+
+.postAbs{
+ font-size: 14px;
+ color: #2c3e50;
+}
+
+.author{
+ font-size: 2px;
+ margin: 8px 0 8px 0;
+ color:#888;
+}
+
+.read{
+ color: var(--ifm-color-primary);
+ font-size: 14px;
+ margin-top: 8px;
+ margin-bottom: 30px;
+}
+
+.read:hover{
+ cursor:pointer;
+}
+
+.catalogue{
+ --ifm-col-width:16.66667%;
+ flex: 0 0 var(--ifm-col-width);
+ max-width: var(--ifm-col-width);
+ margin-left: 3%;
+}
+
+.catalogueBox{
+ max-height: calc(100vh - var(--ifm-navbar-height) - 2rem);
+ overflow-y: auto;
+ position: -webkit-sticky;
+ position: sticky;
+ top: calc(var(--ifm-navbar-height) + 1rem);
+ border-left: 1px solid var(--ifm-toc-border-color);
+}
+
+.catalogueBoxUl{
+ margin: 0 0 var(--ifm-list-margin);
+ list-style: none;
+}
+
+.catalogueBoxLi{
+ margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
+ font-size: .8rem;
+ color:var(--ifm-toc-link-color);
+}
+
+.catalogueBoxA{
+ color:var(--ifm-toc-link-color);
+}
+
+
+.catalogueBoxA:hover{
+ text-decoration: none;
+}
\ No newline at end of file
diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
new file mode 100644
index 0000000000..4202ed2080
--- /dev/null
+++ b/src/pages/blog.tsx
@@ -0,0 +1,72 @@
+
+import React, { useEffect, useRef, useState } from 'react';
+import Layout from '@theme/Layout';
+import styles from './blog.module.css';
+import blogInfo from '../data/blogInfo';
+// import BrowserOnly from '@docusaurus/BrowserOnly';
+
+
+function Blog() {
+ const [activeAnchor, setActiveAnchor] = useState(0);
+ let list = useRef([React.createRef(),
React.createRef(),React.createRef(),React.createRef(),React.createRef(),React.createRef()])
+ let contentList = useRef([React.createRef(),
React.createRef(),React.createRef(),React.createRef(),React.createRef(),React.createRef()])
+
+ useEffect(() => {
+ window.addEventListener('scroll', () => {
+ for (let i = 0; i < contentList.current.length; i++) {
+ let dist =
contentList.current[i].current.getBoundingClientRect().y
+ if (dist >= 90 && dist <= 300) {
+ setActiveAnchor(i)
+ }
+ }
+ });
+ return () => window.removeEventListener('scroll', () => { });
+ }, []);
+
+ return (
+ <Layout title="Blog">
+ <div className={styles.container}>
+ <div className={styles.content}>
+ {
+ blogInfo.map((item, key) => {
+ return (
+ <div className={styles.categray} key={key}>
+ <div className={styles.darkAnchor}
id={item.categray}></div>
+ <div ref={contentList.current[key]}
className={styles.title}>{item.categray} </div>
+ {item.posts.map((post, key) => {
+ return (
+ <div className={styles.card}
key={key}>
+ {/* <img
className={styles.cardImage} src={post.cover} width='200' height={140}></img>
*/}
+ <div
className={styles.postTitle} onClick={() => window.location.href =
"http://localhost:3000/blog/"; + post.src}>{post.title}</div>
+ <div
className={styles.author}> {post.author}     {post.date} </div>
+ <div
className={styles.postAbs}>{post.abs}</div>
+ <div
className={styles.read} onClick={() => window.location.href =
"http://localhost:3000/blog/"; + post.src}> Read More </div>
+ </div>
+ )
+ })}
+ </div>
+ )
+ })
+ }
+ </div>
+ <div className={styles.catalogue}>
+ <div className={styles.catalogueBox}>
+ <ul className={styles.catalogueBoxUl} >
+ {
+ blogInfo.map((item, index) => {
+ const route = '#' + item.categray
+ const id = 'Cata' + item.categray
+ return (
+ <li key={index}
className={styles.catalogueBoxLi} id={id} ><a ref={list.current[index]}
href={route} id='catalogueBoxA' className={styles.catalogueBoxA} style={{color:
activeAnchor==index ? 'var(--ifm-color-primary)' :'var(--ifm-toc-link-color)'}}
onClick={() => setActiveAnchor(index)}>{item.categray}</a></li>
+ )
+ })
+ }
+ </ul>
+ </div>
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+export default Blog;
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ff77c33e35..dae32a4593 100755
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -36,7 +36,7 @@ function Home() {
__html: translate({
id: "homepage.hero.title",
message:
- "<b> Java native API Gateway for </b> service
proxy</b> protocol conversion </b> and <b> API governance.",
+ "Java native API Gateway for <b> service proxy,
protocol conversion and API governance.</b>",
description:
"Home page hero title, can contain simple html tags",
}),
diff --git a/static/img/blog/1-1.png b/static/img/blog/1-1.png
new file mode 100644
index 0000000000..76a6a91855
Binary files /dev/null and b/static/img/blog/1-1.png differ
diff --git a/static/img/blog/1-2.png b/static/img/blog/1-2.png
new file mode 100644
index 0000000000..0599f5d05c
Binary files /dev/null and b/static/img/blog/1-2.png differ
diff --git a/static/img/blog/1-3.png b/static/img/blog/1-3.png
new file mode 100644
index 0000000000..31cb75b622
Binary files /dev/null and b/static/img/blog/1-3.png differ
diff --git a/static/img/blog/1-4.png b/static/img/blog/1-4.png
new file mode 100644
index 0000000000..0937406b6a
Binary files /dev/null and b/static/img/blog/1-4.png differ
diff --git a/static/img/blog/1-5.png b/static/img/blog/1-5.png
new file mode 100644
index 0000000000..9bb05bd0be
Binary files /dev/null and b/static/img/blog/1-5.png differ
diff --git a/static/img/blog/3-2.png b/static/img/blog/3-2.png
new file mode 100644
index 0000000000..fac15d4fbb
Binary files /dev/null and b/static/img/blog/3-2.png differ
diff --git a/static/img/blog/3-3.jpg b/static/img/blog/3-3.jpg
new file mode 100644
index 0000000000..7987cd2004
Binary files /dev/null and b/static/img/blog/3-3.jpg differ
diff --git a/static/img/blog/3-4.png b/static/img/blog/3-4.png
new file mode 100644
index 0000000000..7b7aa79949
Binary files /dev/null and b/static/img/blog/3-4.png differ
diff --git a/static/img/blog/4-1.png b/static/img/blog/4-1.png
new file mode 100644
index 0000000000..90458780ff
Binary files /dev/null and b/static/img/blog/4-1.png differ
diff --git a/static/img/blog/4-2.png b/static/img/blog/4-2.png
new file mode 100644
index 0000000000..a59977ec62
Binary files /dev/null and b/static/img/blog/4-2.png differ
diff --git a/static/img/blog/4-3.png b/static/img/blog/4-3.png
new file mode 100644
index 0000000000..c6a9daabf9
Binary files /dev/null and b/static/img/blog/4-3.png differ
diff --git a/static/img/blog/4-4.png b/static/img/blog/4-4.png
new file mode 100644
index 0000000000..fb48488fee
Binary files /dev/null and b/static/img/blog/4-4.png differ
diff --git a/static/img/blog/5-1.png b/static/img/blog/5-1.png
new file mode 100644
index 0000000000..fc7b6ab843
Binary files /dev/null and b/static/img/blog/5-1.png differ
diff --git a/static/img/blog/6-1.png b/static/img/blog/6-1.png
new file mode 100644
index 0000000000..5999146a86
Binary files /dev/null and b/static/img/blog/6-1.png differ
