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/shenyu-website.git
The following commit(s) were added to refs/heads/main by this push:
new 55f39ae5ad7 Refactor styles and improve footer links (#1103)
55f39ae5ad7 is described below
commit 55f39ae5ad7833051a55703c61fc32c14e719bfe
Author: aias00 <[email protected]>
AuthorDate: Mon Dec 8 18:21:50 2025 +0800
Refactor styles and improve footer links (#1103)
- Cleaned up CSS formatting for consistency across various components.
- Updated footer links to point to the official Apache website.
- Adjusted swiper button positioning for better alignment.
- Added error suppression script to Docusaurus config.
- Updated package.json to use the stable version of the Algolia theme.
- Updated copyright year dynamically in the footer.
---
docusaurus.config.js | 3 +-
package.json | 4 +-
src/clientModules/fix-error.js | 81 +++++++++++++++++++++++++++++++++++++
src/components/Features.module.css | 56 +++++++++++++------------
src/components/Features.tsx | 4 +-
src/components/Footer.tsx | 6 +--
src/pages/index.module.css | 81 +++++++++++++++++++------------------
src/pages/index.tsx | 12 +++---
static/img/home/2_1.jpg | Bin 7099302 -> 2238983 bytes
static/img/home/2_2.jpg | Bin 1530275 -> 733523 bytes
static/img/home/2_3.jpg | Bin 1009292 -> 311996 bytes
static/img/home/2_4.jpg | Bin 982378 -> 304294 bytes
static/img/home/2_5.jpg | Bin 1130901 -> 387269 bytes
static/img/home/2_6.jpg | Bin 1157437 -> 398446 bytes
static/img/home/2_7.jpg | Bin 957391 -> 305802 bytes
static/img/home/2_8.jpg | Bin 913218 -> 287683 bytes
static/js/error-suppression.js | 74 +++++++++++++++++++++++++++++++++
17 files changed, 242 insertions(+), 79 deletions(-)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 3e811542ab2..a83bddfd248 100755
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -1,4 +1,4 @@
-const {themes} = require('prism-react-renderer');
+const { themes } = require('prism-react-renderer');
const lightTheme = themes.github;
const darkTheme = themes.dracula;
@@ -12,6 +12,7 @@ module.exports = {
onBrokenLinks: "log",
onBrokenMarkdownLinks: "warn",
favicon: "img/favicon.svg",
+ scripts: [{ src: '/js/error-suppression.js', async: false, defer: false }],
organizationName: "apache", // Usually your GitHub org/user name.
projectName: "shenyu", // Usually your repo name.
i18n: {
diff --git a/package.json b/package.json
index 967dbf64e57..5548186e890 100755
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
"dependencies": {
"@docusaurus/core": "3.0.0",
"@docusaurus/preset-classic": "3.0.0",
- "@docusaurus/theme-search-algolia": "^2.0.0-beta.4",
+ "@docusaurus/theme-search-algolia": "3.0.0",
"@headlessui/react": "^1.4.1",
"@mdx-js/react": "^3.0.0",
"@svgr/webpack": "^5.5.0",
@@ -46,4 +46,4 @@
"last 1 safari version"
]
}
-}
+}
\ No newline at end of file
diff --git a/src/clientModules/fix-error.js b/src/clientModules/fix-error.js
new file mode 100644
index 00000000000..7eadc3c99fe
--- /dev/null
+++ b/src/clientModules/fix-error.js
@@ -0,0 +1,81 @@
+// This file runs early to suppress known warnings and errors
+// It's automatically loaded by Docusaurus from src/clientModules/
+
+if (typeof window !== 'undefined') {
+ // Suppress ResizeObserver errors
+ const resizeObserverLoopErr = "ResizeObserver loop completed with
undelivered notifications.";
+ const resizeObserverLoopLimitErr = "ResizeObserver loop limit exceeded";
+
+ window.addEventListener("error", (e) => {
+ if (e.message && (e.message.includes(resizeObserverLoopErr) ||
e.message.includes(resizeObserverLoopLimitErr))) {
+ e.stopImmediatePropagation();
+ e.preventDefault();
+ }
+ });
+
+ // Helper function to check if any argument contains known warnings to
suppress
+ const shouldSuppressWarning = (args) => {
+ return args.some(arg => {
+ if (typeof arg === 'string') {
+ // LoadableComponent contextTypes warning
+ if (arg.includes('LoadableComponent uses the legacy
contextTypes API') ||
+ arg.includes('legacy contextTypes API') ||
+ (arg.includes('LoadableComponent') &&
arg.includes('contextTypes'))) {
+ return true;
+ }
+ // React key prop spread warning
+ if (arg.includes('A props object containing a "key" prop is
being spread into JSX') ||
+ (arg.includes('key') && arg.includes('prop is being spread
into JSX')) ||
+ (arg.includes('React keys must be passed directly to
JSX'))) {
+ return true;
+ }
+ }
+ // Also check error objects
+ if (arg && typeof arg === 'object') {
+ try {
+ const argStr = JSON.stringify(arg);
+ // LoadableComponent warning
+ if (argStr.includes('LoadableComponent') &&
argStr.includes('contextTypes')) {
+ return true;
+ }
+ // Key prop warning
+ if (argStr.includes('key') && argStr.includes('prop is
being spread')) {
+ return true;
+ }
+ } catch (e) {
+ // Ignore JSON stringify errors
+ }
+ }
+ return false;
+ });
+ };
+
+ // Suppress known warnings - intercept console.error early
+ const originalConsoleError = console.error;
+ console.error = function (...args) {
+ if (shouldSuppressWarning(args)) {
+ return; // Suppress the warning
+ }
+ originalConsoleError.apply(console, args);
+ };
+
+ // Also intercept console.warn in case the warning comes through there
+ const originalConsoleWarn = console.warn;
+ console.warn = function (...args) {
+ if (shouldSuppressWarning(args)) {
+ return; // Suppress the warning
+ }
+ originalConsoleWarn.apply(console, args);
+ };
+
+ // Intercept React's internal warning system if available
+ if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+ const originalOnCommitFiberRoot =
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot;
+ if (originalOnCommitFiberRoot) {
+ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot = function
(...args) {
+ // This won't suppress warnings but ensures devtools still work
+ return originalOnCommitFiberRoot.apply(this, args);
+ };
+ }
+ }
+}
diff --git a/src/components/Features.module.css
b/src/components/Features.module.css
index 1b942a6b4ae..18440e9d9da 100644
--- a/src/components/Features.module.css
+++ b/src/components/Features.module.css
@@ -1,31 +1,35 @@
.features {
- max-width: 100%;
- margin: 0 auto;
- }
-
- .blockTitle:before {
- content: "";
- display: block;
- width: 50px;
- height: 3px;
- background-color: #000033;
- margin: 0 auto 8px;
- }
+ max-width: 100%;
+ margin: 0 auto;
+}
- .blockTitle {
- text-shadow: 4px 6px 0 rgb(0 0 0 / 7%);
- text-align: center;
- margin-bottom: 40px;
- }
+.blockTitle:before {
+ content: "";
+ display: block;
+ width: 50px;
+ height: 3px;
+ background-color: #000033;
+ margin: 0 auto 8px;
+}
- :global(.swiper-slide){
- transform: scale(0.8);
- }
+.blockTitle {
+ text-shadow: 4px 6px 0 rgb(0 0 0 / 7%);
+ text-align: center;
+ margin-bottom: 40px;
+}
- :global(.swiper-slide-shadow-left){
- background-image: linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,0))
!important;
- }
+:global(.swiper-slide) {
+ transform: scale(0.8);
+}
- :global(.swiper-slide-shadow-right){
- background-image: linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,0))
!important;
- }
\ No newline at end of file
+:global(.swiper-slide-shadow-left) {
+ background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0,
0)) !important;
+}
+
+:global(.swiper-slide-shadow-right) {
+ background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0,
0)) !important;
+}
+
+.features--wrap {
+ position: relative;
+}
\ No newline at end of file
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index b31ea31f003..53256ed9ef7 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -117,8 +117,8 @@ const Features = (): React.ReactElement => (
</SwiperSlide>
))}
</Swiper>
- <div className="swiper-button-prev user-swiper-button-previous" style={{
top:"1545px", left: "50px", color:'#000033'}}></div>
- <div className="swiper-button-next user-swiper-button-nextPage" style={{
top:"1545px", right: "50px", color:'#000033' }}></div>
+ <div className="swiper-button-prev user-swiper-button-previous" style={{
left: "50px", color: '#000033', top: '50%', transform: 'translateY(-50%)'
}}></div>
+ <div className="swiper-button-next user-swiper-button-nextPage" style={{
right: "50px", color: '#000033', top: '50%', transform: 'translateY(-50%)'
}}></div>
</div>
</section>
);
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 4c32255b6c6..521aa13dda1 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -8,10 +8,10 @@ const Footer = (): React.ReactElement => (
<div className={styles.copyRight}>
<div>
<div className={styles.logos}>
- <a href=''>< img src='/img/logo/support-apache.png'
alt="Apache Support Logo" /></a>
- <a href=''>< img src='/img/logo/asf_logo.svg' alt="The
Apache Software Foundation" /></a>
+ <a href='https://www.apache.org/'>< img
src='/img/logo/support-apache.png' alt="Apache Support Logo" /></a>
+ <a href='https://www.apache.org/'>< img
src='/img/logo/asf_logo.svg' alt="The Apache Software Foundation" /></a>
</div>
- <span className={styles.text}>Copyright 2023 The Apache
Software Foundation, Licensed under the Apache License, Version 2.0. Apache
ShenYu, Apache, the Apache feather logo, the Apache ShenYu logo are trademarks
of The Apache Software Foundation.</span>
+ <span className={styles.text}>Copyright {new
Date().getFullYear()} The Apache Software Foundation, Licensed under the Apache
License, Version 2.0. Apache ShenYu, Apache, the Apache feather logo, the
Apache ShenYu logo are trademarks of The Apache Software Foundation.</span>
</div>
</div>
<div className={styles.footerLinks}>
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9a3945af474..a3b4f5c73fe 100755
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,5 +1,5 @@
.primaryColor {
- color: var(--ifm-color-primary);
+ color: var(--ifm-color-primary);
}
.section {
@@ -7,8 +7,9 @@
width: 100%;
}
-.sectionDashboard{
+.sectionDashboard {
width: 100%;
+ position: relative;
}
.sectionAlt {
@@ -45,7 +46,7 @@
color: #FF5C00;
}
-.buttonGetStarted{
+.buttonGetStarted {
width: 10rem;
background-color: #000033;
text-align: center;
@@ -56,12 +57,12 @@
border-radius: 8px;
}
-.buttonGetStarted:hover{
+.buttonGetStarted:hover {
text-decoration: none;
color: #fff;
}
-.buttonGithub{
+.buttonGithub {
width: 10rem;
background-color: #fff;
text-align: center;
@@ -72,20 +73,20 @@
border-radius: 8px;
}
-.buttonGithub:hover{
+.buttonGithub:hover {
text-decoration: none;
color: #000033;
}
-.containerCenter{
+.containerCenter {
text-align: center;
}
-.dividingLineBorder{
+.dividingLineBorder {
display: inline-block;
width: 60%;
height: 1px;
- background: -webkit-linear-gradient(left,#fff -4%,#ccc 50%,#fff 100%);
+ background: -webkit-linear-gradient(left, #fff -4%, #ccc 50%, #fff 100%);
}
@keyframes jackInTheBox {
@@ -109,9 +110,9 @@
}
}
-.logoContainer{
+.logoContainer {
border-radius: 8px;
- box-shadow: 6px 6px 22px 2px rgb(0 0 51 / 20%);
+ box-shadow: 6px 6px 22px 2px rgb(0 0 51 / 20%);
animation-duration: 2s;
animation-name: jackInTheBox;
float: right;
@@ -122,7 +123,7 @@
display: flex;
align-items: center;
justify-content: center;
- background-color: rgb(245,246,247);
+ background-color: rgb(245, 246, 247);
}
.heroLogo {
@@ -173,11 +174,11 @@
text-shadow: 4px 6px 0 rgb(0 0 0 / 7%);
}
-.blockDescription{
+.blockDescription {
margin-top: 40px;
}
-.userPart{
+.userPart {
display: block;
position: relative;
height: 360px;
@@ -185,10 +186,10 @@
overflow: hidden;
}
-.scrollView{
+.scrollView {
margin-top: 40px;
animation: 15s linear 0s infinite alternate none running animation-autoplay;
- position:absolute;
+ position: absolute;
}
@keyframes animation-autoplay {
@@ -201,75 +202,75 @@
}
}
-.scrollLine1{
+.scrollLine1 {
display: flex;
align-items: center;
}
-.scrollLine2{
+.scrollLine2 {
display: flex;
align-items: center;
}
-.scrollLine3{
+.scrollLine3 {
display: flex;
align-items: center;
}
-.scrollItem{
+.scrollItem {
flex-shrink: 0;
width: 170px;
padding: 15px 0px;
height: 100px;
}
-.scrollImage{
+.scrollImage {
width: 68%;
height: 68%;
object-fit: contain;
}
-.scrollItemLeft{
+.scrollItemLeft {
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
-.scrollItemRight{
+.scrollItemRight {
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
-.scrollItemLeftInner{
+.scrollItemLeftInner {
background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
width: 88px;
height: 100%;
}
-.scrollItemRightInner{
+.scrollItemRightInner {
background: linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
- width: 88px;
- height: 100%;
+ width: 88px;
+ height: 100%;
}
-.contentImg{
+.contentImg {
display: table;
margin: 0 auto;
}
-[data-theme='dark'] .hero{
+[data-theme='dark'] .hero {
background-color: #1C1E21;
}
-[data-theme='dark'] .scrollItemLeftInner{
+[data-theme='dark'] .scrollItemLeftInner {
background: linear-gradient(90deg, #272a36 0%, rgba(255, 255, 255, 0) 100%);
}
-[data-theme='dark'] .scrollItemRightInner{
+[data-theme='dark'] .scrollItemRightInner {
background: linear-gradient(-90deg, #272a36 0%, rgba(255, 255, 255, 0) 100%);
}
@@ -297,7 +298,7 @@
justify-content: center;
}
- .heroProjectTagline{
+ .heroProjectTagline {
font-size: 20px;
text-align: center;
}
@@ -306,9 +307,9 @@
justify-content: center;
}
- .logoContainer{
+ .logoContainer {
border-radius: 8px;
- box-shadow: 6px 6px 22px 2px rgb(0 0 51 / 20%);
+ box-shadow: 6px 6px 22px 2px rgb(0 0 51 / 20%);
animation-duration: 2s;
animation-name: jackInTheBox;
width: 100%;
@@ -318,7 +319,7 @@
display: flex;
align-items: center;
justify-content: center;
- background-color: rgb(245,246,247);
+ background-color: rgb(245, 246, 247);
float: none;
margin-top: 2rem;
padding: 1rem;
@@ -329,13 +330,15 @@
height: auto;
}
- :global(.user-swiper-button-prev){
- top:950px !important;
+ :global(.user-swiper-button-prev) {
+ top: 50% !important;
+ transform: translateY(-50%) !important;
left: 0px !important;
}
- :global(.user-swiper-button-next){
- top:950px !important;
+ :global(.user-swiper-button-next) {
+ top: 50% !important;
+ transform: translateY(-50%) !important;
right: 0px !important;
}
}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index cfc72bc5955..6a4c153ca80 100755
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
import Link from "@docusaurus/Link";
import Translate, { translate } from "@docusaurus/Translate";
import { Swiper, SwiperSlide } from "swiper/react";
@@ -96,9 +96,9 @@ function Home() {
loop={true}
speed={0}
autoplay={{
- delay: 3000,
- disableOnInteraction: false,
- waitForTransition: false,
+ delay: 3000,
+ disableOnInteraction: false,
+ waitForTransition: false,
}}
>
<SwiperSlide>
@@ -150,9 +150,9 @@ function Home() {
/>
</SwiperSlide>
</Swiper>
+ <div className="swiper-button-prev user-swiper-button-prev" style={{
left: "50px", color: '#000033', top: '50%', transform: 'translateY(-50%)'
}}></div>
+ <div className="swiper-button-next user-swiper-button-next" style={{
right: "50px", color: '#000033', top: '50%', transform: 'translateY(-50%)'
}}></div>
</div>
- <div className="swiper-button-prev user-swiper-button-prev" style={{
top:"880px", left: "50px", color:'#000033' }}></div>
- <div className="swiper-button-next user-swiper-button-next" style={{
top:"880px", right: "50px", color:'#000033' }}></div>
<div className={clsx(styles.section, styles.sectionAlt)}>
<div className="container">
<Features />
diff --git a/static/img/home/2_1.jpg b/static/img/home/2_1.jpg
index 18bf3350366..c998ba98b0b 100644
Binary files a/static/img/home/2_1.jpg and b/static/img/home/2_1.jpg differ
diff --git a/static/img/home/2_2.jpg b/static/img/home/2_2.jpg
index 98a45dd4095..ccc1171e290 100644
Binary files a/static/img/home/2_2.jpg and b/static/img/home/2_2.jpg differ
diff --git a/static/img/home/2_3.jpg b/static/img/home/2_3.jpg
index ae684908fed..5d0e066900b 100644
Binary files a/static/img/home/2_3.jpg and b/static/img/home/2_3.jpg differ
diff --git a/static/img/home/2_4.jpg b/static/img/home/2_4.jpg
index 7d1507715a3..1583a688027 100644
Binary files a/static/img/home/2_4.jpg and b/static/img/home/2_4.jpg differ
diff --git a/static/img/home/2_5.jpg b/static/img/home/2_5.jpg
index dc01b92ef03..3262b20f7b8 100644
Binary files a/static/img/home/2_5.jpg and b/static/img/home/2_5.jpg differ
diff --git a/static/img/home/2_6.jpg b/static/img/home/2_6.jpg
index d19caa969dc..70d2e258011 100644
Binary files a/static/img/home/2_6.jpg and b/static/img/home/2_6.jpg differ
diff --git a/static/img/home/2_7.jpg b/static/img/home/2_7.jpg
index 67963e0ee3e..56fd5fad067 100644
Binary files a/static/img/home/2_7.jpg and b/static/img/home/2_7.jpg differ
diff --git a/static/img/home/2_8.jpg b/static/img/home/2_8.jpg
index d8eb54e97d4..abbd1f3a2d9 100644
Binary files a/static/img/home/2_8.jpg and b/static/img/home/2_8.jpg differ
diff --git a/static/js/error-suppression.js b/static/js/error-suppression.js
new file mode 100644
index 00000000000..ae82878e03e
--- /dev/null
+++ b/static/js/error-suppression.js
@@ -0,0 +1,74 @@
+// Error suppression script - runs early to catch warnings before they appear
+(function () {
+ 'use strict';
+ if (typeof window === 'undefined') return;
+
+ // Suppress ResizeObserver errors
+ var resizeObserverLoopErr = "ResizeObserver loop completed with
undelivered notifications.";
+ var resizeObserverLoopLimitErr = "ResizeObserver loop limit exceeded";
+
+ window.addEventListener("error", function (e) {
+ if (e.message && (e.message.indexOf(resizeObserverLoopErr) >= 0 ||
e.message.indexOf(resizeObserverLoopLimitErr) >= 0)) {
+ e.stopImmediatePropagation();
+ e.preventDefault();
+ }
+ });
+
+ // Helper function to check if any argument contains known warnings to
suppress
+ function shouldSuppressWarning (args) {
+ for (var i = 0; i < args.length; i++) {
+ var arg = args[i];
+ if (typeof arg === 'string') {
+ // LoadableComponent contextTypes warning
+ if (arg.indexOf('LoadableComponent uses the legacy
contextTypes API') >= 0 ||
+ arg.indexOf('legacy contextTypes API') >= 0 ||
+ (arg.indexOf('LoadableComponent') >= 0 &&
arg.indexOf('contextTypes') >= 0)) {
+ return true;
+ }
+ // React key prop spread warning
+ if (arg.indexOf('A props object containing a "key" prop is
being spread into JSX') >= 0 ||
+ (arg.indexOf('key') >= 0 && arg.indexOf('prop is being
spread into JSX') >= 0) ||
+ arg.indexOf('React keys must be passed directly to JSX')
>= 0) {
+ return true;
+ }
+ }
+ // Also check error objects
+ if (arg && typeof arg === 'object') {
+ try {
+ var argStr = JSON.stringify(arg);
+ // LoadableComponent warning
+ if (argStr.indexOf('LoadableComponent') >= 0 &&
argStr.indexOf('contextTypes') >= 0) {
+ return true;
+ }
+ // Key prop warning
+ if (argStr.indexOf('key') >= 0 && argStr.indexOf('prop is
being spread') >= 0) {
+ return true;
+ }
+ } catch (e) {
+ // Ignore JSON stringify errors
+ }
+ }
+ }
+ return false;
+ }
+
+ // Suppress known warnings - intercept console.error early
+ var originalConsoleError = console.error;
+ console.error = function () {
+ var args = Array.prototype.slice.call(arguments);
+ if (shouldSuppressWarning(args)) {
+ return; // Suppress the warning
+ }
+ originalConsoleError.apply(console, args);
+ };
+
+ // Also intercept console.warn
+ var originalConsoleWarn = console.warn;
+ console.warn = function () {
+ var args = Array.prototype.slice.call(arguments);
+ if (shouldSuppressWarning(args)) {
+ return; // Suppress the warning
+ }
+ originalConsoleWarn.apply(console, args);
+ };
+})();
