This is an automated email from the ASF dual-hosted git repository. liuhongyu pushed a commit to branch fix/fix_web in repository https://gitbox.apache.org/repos/asf/shenyu-website.git
commit 8f1bbddd5c635a73bb28067693549c2a95edcc80 Author: liuhy <[email protected]> AuthorDate: Mon Dec 8 17:23:52 2025 +0800 Refactor styles and improve footer links - 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); + }; +})();
