Make detailed adjustments according to the document. (#1485)

pull/1488/head
youbo 1 year ago committed by GitHub
parent 4c8cf8f4e6
commit 19b465fa24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -93,10 +93,6 @@ const config = {
autoCollapseCategories: true,
announcementBar: {
id: "announcementBar-1", // Increment on change
// content: `⭐️ If you like hippo4j, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://gitee.com/mabaiwancn/hippo4j">Gitee</a>, thanks.`,
// content: `⭐️ 如果您喜欢 hippo4j请在 <a target="_blank" rel="noopener noreferrer" href="https://gitee.com/mabaiwancn/hippo4j">Gitee</a> 和 <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> 上给它一个 star谢谢`,
// content: `⭐️ 开源不易,如果 Hippo4j 对您有帮助,请在 <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> 上给它一个 Star 🌟`,
// content: `<a target="_blank" rel="noopener noreferrer" href="https://xiaomage.info/knowledge-planet/">👉 《小马哥的代码实战课》官方知识星球来啦!!!</a>`,
content:
'⭐️ If you like hippo4j, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> ⭐️',
backgroundColor: "#fafbfc",

@ -8,7 +8,7 @@ const GithubInfo = ({ owner, repo }) => {
<div className="github-info-container w-full md:justify-normal mb-4 justify-center gap-2 flex flex-wrap items-center">
<div className="flex items-center">
<div className="dark:bg-gray-600 bg-gray-100 px-6 py-1">
<span className="text-sm">stars</span>
<span className="text-sm">star</span>
</div>
<div className="dark:bg-blue-600 bg-gray-200 font-medium px-6 py-1">
<span id="repo-stars-count">{favorites || 4621}</span>

@ -9,30 +9,19 @@ const Hero = () => {
const bgUrl = useBaseUrl("/img/bg.jpg");
return (
<div className=" h-[100vh] lg:h-[65vh] relative text-black dark:text-white">
<div
// style={{ backgroundImage: `url(${bgUrl})` }}
className=" absolute inset-0 overflow-hidden bg-repeat"
>
<div className=" h-[100vh] lg:h-[58vh] relative text-black dark:text-white">
<div className=" absolute inset-0 overflow-hidden bg-repeat">
{/* <div className="absolute inset-0 bg-gray-400 opacity-5 dark:opacity-0"></div> */}
<div className=" container px-20 py-12 lg:py-16 md:py-8 lg:px-20 md:px-10 mx-auto flex flex-wrap flex-col lg:flex-row items-center">
<div className=" container px-20 py-12 lg:py-8 md:py-8 lg:px-20 md:px-10 mx-auto flex flex-wrap flex-col lg:flex-row items-center">
{/* <!--Left Col--> */}
<div className="flex flex-col w-full lg:w-1/2 md:w-2/3 justify-center items-start text-center md:text-left">
{/* title and desc */}
<div>
<h1 className="my-4 font-jakarta lg:my-4 md:my-4 text-5xl font-bold leading-tight ">
Hippo4j ThreadPool
<h1 className="my-4 font-jakarta lg:my-8 md:my-4 text-5xl font-bold leading-tight ">
Hippo4j Thread Pool
</h1>
{/* <p className="leading-normal dark:text-white font-bold text-gray-800 hero-image-url text-3xl md:text-3xl">
<Translate
id="homepage.titleDescription1"
description="The homepage title description"
>
Thread Pool Framework For Java
</Translate>
</p> */}
<p className="leading-normal hero-image-url text-gray-600 dark:text-gray-100 text-xl mb-0">
<Translate
id="homepage.titleDescription2"
@ -46,65 +35,12 @@ const Hero = () => {
{/* button group */}
<div className="flex my-4 lg:my-8 md:my-6 w-full justify-center md:justify-start">
{/* <Link to="/docs/user_docs/intro" className="">
<button className="mr-2 lg:mr-4 text-base lg:text-lg w-32 lg:w-40 hover:bg-blue-500 bg-blue-400 font-medium py-2 px-4 rounded-md focus:outline-none shadow-none border-none cursor-pointer transition-all duration-300 ease-in-out">
<Translate
className="cursor-pointer"
id="homepage.startButton"
description="The homepage start button text"
>
Quick Start
</Translate>
</button>
</Link>
<a href="https://github.com/opengoofy/hippo4j">
<button className="ml-2 lg:mx-0 w-32 lg:w-40 border-1 border-solid dark:border-gray-500 border-gray-400 bg-transparent hover:bg-gray-400 hover:bg-opacity-50 font-medium py-2 px-4 rounded-md focus:outline-none shadow-none cursor-pointer transition-all duration-300 ease-in-out">
<div className="flex cursor-pointer items-center justify-center">
<Icon
className="w-6 h-6 mr-2 rounded-full flex-shrink-0 dark:bg-white"
icon="devicon:github"
/>
<span className="text-base lg:text-lg">GitHub</span>
</div>
</button>
</a> */}
<Link
to="/docs/user_docs/intro"
class="relative mr-4 w-32 text-center lg:w-48 hover:no-underline inline-flex items-center justify-start py-3 overflow-hidden font-semibold text-white transition-all duration-150 ease-in-out rounded bg-blue-500 group"
>
<span class="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-blue-600 group-hover:h-full"></span>
{/* <span class="absolute right-0 pr-4 duration-200 ease-out group-hover:translate-x-12">
<svg
class="w-5 h-5 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M14 5l7 7m0 0l-7 7m7-7H3"
></path>
</svg>
</span> */}
{/* <span class="absolute left-0 pl-2.5 -translate-x-12 group-hover:translate-x-0 ease-out duration-200">
<svg
class="w-5 h-5 text-gray-200"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M14 5l7 7m0 0l-7 7m7-7H3"
></path>
</svg>
</span> */}
<span class="relative w-full text-center transition-colors duration-200 ease-in-out group-hover:text-white">
Start Learning
</span>
@ -125,13 +61,6 @@ const Hero = () => {
/>
Github
</span>
{/* <div className="flex cursor-pointer items-center justify-center">
<Icon
className="w-6 h-6 mr-2 rounded-full flex-shrink-0 dark:bg-white"
icon="devicon:github"
/>
<span className="text-base lg:text-lg">GitHub</span>
</div> */}
</span>
<span
class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"

@ -3,19 +3,19 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
import Translate from "@docusaurus/Translate";
const Introduction = () => {
return (
<section className=" border-b mb-28 dark:text-white">
<div className=" ">
<div className="title-container w-full bg-gray-50 p-4 mb-4 flex flex-wrap dark:bg-[#242526]">
<section className="mb-28 dark:text-white">
<div className="introduction-container ">
<div className="title-container w-full bg-[#EFEFEF] p-4 mb-12 flex flex-wrap dark:bg-[#242526]">
<div className="left-image-container px-24 w-full md:w-1/2 sm:w-1/3">
<img
className="w-full -mt-8 h-64 object-cover lg:h-80 md:h-96 dark:rounded-lg "
className="w-full -mt-8 h-64 object-contain lg:h-64 md:h-96 dark:rounded-lg "
alt="Hippo4j System"
src={useBaseUrl("/img/introduction/t2.svg")}
/>
{/* <div className="introduction-title-image h-64 w-full img-div"></div> */}
</div>
<div className="right-title-container py-4 px-16 md:px-4 md:pt-8 w-full md:w-1/2 sm:w-2/3 sm:px-8">
<h2 className="w-full my-2 text-3xl font-medium leading-tight text-gray-800 dark:text-white ">
<h2 className="w-full my-2 text-3xl font-medium leading-tight dark:text-white ">
<Translate
id="homepage.secondTitle"
description="The title for the introduction part"
@ -23,15 +23,8 @@ const Introduction = () => {
What can Hippo4j do?
</Translate>
</h2>
{/* <p className=" my-4 leading-relaxed dark:text-white text-xl font-medium text-gray-800 md:pr-20 ">
<Translate
id="homepage.secondTitleDesc1"
description="The p1 for the secondTitle part"
>
Hippo4j is a Java thread pool framework.
</Translate>
</p> */}
<p className="leading-normal mt-8 max-w-xl md:pr-10 text-gray-600 dark:text-gray-100 mb-2">
<p className="leading-normal mt-8 max-w-xl md:pr-10 dark:text-white mb-2">
<Translate
id="homepage.secondTitleDesc2"
description="The p2 for the secondTitle part"
@ -44,10 +37,17 @@ const Introduction = () => {
</div>
</div>
<div class="container px-20 lg:px-36 md:px-10 three-part-container">
<div class="container px-20 lg:px-20 md:px-10 three-part-container">
<div class="flex flex-wrap pt-6">
<div class="w-full pr-4 sm:w-2/3 md:w-1/2 ">
<h3 class="text-2xl md:pb-6 text-gray-800 dark:text-white font-medium leading-none mb-3">
<div class="w-full sm:w-1/3 md:w-1/4 ">
<img
className="w-full -mt-4 h-auto sm:h-64 object-contain lg:h-52 md:h-72 dark:rounded-lg "
src={useBaseUrl("/img/introduction/p11.svg")}
alt="Hippo4j System"
/>
</div>
<div class="w-full pr-4 sm:w-2/3 md:w-1/2 flex-grow ">
<h3 class="text-2xl dark:text-white font-normal leading-none ">
<Translate
id="homepage.introduction.fristPartTitle"
description="the title for the first introduction part"
@ -55,10 +55,10 @@ const Introduction = () => {
Dynamic Change
</Translate>
</h3>
<div class="dark:text-white text-gray-600 mb-8">
<div class="dark:text-white mb-8 ">
<p>
<Translate
className="cursor-pointer"
className="cursor-pointer "
id="homepage.introduction.fristPartDesc1"
description="The first desc for fristPart "
>
@ -66,48 +66,13 @@ const Introduction = () => {
parameters.
</Translate>{" "}
</p>
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.fristPartDesc2"
description="The second desc for fristPart "
>
Including but not limited to core size, maximum threads,
blocking queue size, and rejection policy.
</Translate>
</p>
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.fristPartDesc3"
description="The third desc for fristPart "
>
It supports differentiated thread pool configurations for
different nodes in the application cluster.
</Translate>
</p>
</div>
</div>
<div class="w-full sm:w-1/3 md:w-1/2 ">
{/* <img class="mx-auto w-4/5 z-50" src="f1.png" /> */}
<img
className="w-full -mt-4 h-auto sm:h-64 object-contain lg:h-80 md:h-72 dark:rounded-lg "
src={useBaseUrl("/img/introduction/p11.svg")}
alt="Hippo4j System"
/>
</div>
</div>
<div class="flex flex-wrap pt-6 flex-col-reverse sm:flex-row">
<div class="w-full pr-16 sm:w-1/3 md:w-1/2 mt-6">
<img
className="w-full h-auto sm:h-64 object-contain lg:h-80 md:h-96 dark:rounded-lg "
src={useBaseUrl("/img/introduction/p22.svg")}
alt="Hippo4j System"
/>
</div>
<div class="w-full sm:w-2/3 md:w-1/2 md:pl-16 sm:pl-8 mt-6 lg:pt-8">
<div class="align-middle">
<h3 class="text-2xl md:pb-6 text-gray-800 dark:text-white font-medium leading-none mb-3">
<div class="flex flex-wrap md:-mt16 flex-col-reverse sm:flex-row">
<div class="w-full flex-grow sm:w-2/3 md:w-2/3 md:pl-[28rem] sm:pl-8 mt-6 lg:pt-8">
<div class="align-middle ">
<h3 class="text-2xl dark:text-white font-normal leading-none mb-3">
<Translate
id="homepage.introduction.secondPartTitle"
description="the title for the second introduction part"
@ -115,7 +80,7 @@ const Introduction = () => {
Custom Alarm
</Translate>
</h3>
<div class="dark:text-white text-gray-600 mb-8">
<div class="dark:text-white mb-8">
<p>
<Translate
className="cursor-pointer"
@ -126,33 +91,28 @@ const Introduction = () => {
alarm dimensions.
</Translate>
</p>
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.secondPartDesc2"
description="The second desc for secondPart "
>
Thread pool overload, blocking queue capacity, running for
too long, and rejection strategy alarm.
</Translate>{" "}
</p>
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.secondPartDesc3"
description="The third desc for secondPart "
>
It also supports non-repetitive alarms within a custom
time period.
</Translate>
</p>
</div>
</div>
</div>
<div class="w-full sm:w-1/3 md:w-1/4 mt-6">
<img
className="w-full h-auto sm:h-64 object-contain lg:h-52 md:h-96 dark:rounded-lg "
src={useBaseUrl("/img/introduction/p22.svg")}
alt="Hippo4j System"
/>
</div>
</div>
<div class="flex flex-wrap pt-6">
<div class="w-5/6 sm:w-2/3 md:w-1/2 sm:pr-8 md:pr-4">
<h3 class="text-2xl md:py-6 text-gray-800 dark:text-white font-medium leading-none mb-3">
<div class="flex mt-2 flex-wrap">
<div class="w-full sm:w-1/3 md:w-1/4 ">
<img
className="w-full -mt-4 h-auto sm:h-64 object-contain lg:h-60 md:h-72 dark:rounded-lg "
src={useBaseUrl("/img/introduction/p33.svg")}
alt="Hippo4j System"
/>
</div>
<div class="w-full pr-4 sm:w-2/3 md:w-1/2 md:mt-8 flex-grow ">
<h3 class="text-2xl dark:text-white font-normal leading-none ">
<Translate
id="homepage.introduction.thirdPartTitle"
description="the title for the third introduction part"
@ -160,8 +120,8 @@ const Introduction = () => {
Operation Monitoring
</Translate>
</h3>
<div class="dark:text-white text-gray-600 mb-8 md:pr-6">
<p>
<div class="dark:text-white mb-8">
<p className="m-0">
<Translate
className="cursor-pointer"
id="homepage.introduction.thirdPartDesc1"
@ -171,36 +131,8 @@ const Introduction = () => {
storage.
</Translate>
</p>
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.thirdPartDesc2"
description="The second desc for thirdPart "
>
while also supporting Prometheus, InfluxDB, and other
monitoring systems.
</Translate>
</p>
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.thirdPartDesc3"
description="The third desc for thirdPart "
>
Provides visualized dashboard monitoring metrics through
Grafana or built-in monitoring pages.
</Translate>
</p>
</div>
</div>
<div class="w-full sm:w-1/3 md:w-1/2 ">
{/* <img class="mx-auto w-4/5 z-50" src="f3_r.png" /> */}
<img
className="w-full -mt-16 -ml-16 h-auto sm:h-64 object-contain lg:h-80 md:h-96 dark:rounded-lg "
src={useBaseUrl("/img/introduction/p33.svg")}
alt="Hippo4j System"
/>
</div>
</div>
</div>
</div>

@ -39,7 +39,6 @@ html[data-theme="dark"] {
}
[data-theme="light"] {
/* --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 30%); */
--ifm-color-primary: #2160fd;
--ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 26%);
--ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation) 23%);
@ -55,7 +54,6 @@ html[data-theme="dark"] {
}
[data-theme="dark"] {
/* --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 45%); */
--ifm-color-primary: #1a90ff;
--ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 41%);
--ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation) 38%);
@ -68,6 +66,8 @@ html[data-theme="dark"] {
--ifm-color-primary-lightest: hsl(
var(--site-primary-hue-saturation-light) 73%
);
--ifm-breadcrumb-item-background-active: #222222;
--ifm-breadcrumb-color-active: #1a90ff;
}
.docusaurus-highlight-code-line {
@ -124,8 +124,6 @@ html[data-theme="dark"] {
}
[data-theme="light"] .DocSearch {
/* --docsearch-primary-color: var(--ifm-color-primary); */
/* --docsearch-text-color: var(--ifm-font-color-base); */
--docsearch-muted-color: var(--ifm-color-emphasis-700);
--docsearch-container-background: rgb(94 100 112 / 70%);
/* Modal */
@ -233,8 +231,6 @@ div[class^="announcementBar_"] {
:root[data-theme="light"] {
--hero-image-url: url("../../static/img/hero/hero-removebg.png");
/* --bg-background-color: #f9fafb; */
/* --bg-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23bfbfbf' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M5 3.59L1.46.05.05 1.46 3.59 5 .05 8.54l1.41 1.41L5 6.41l3.54 3.54 1.41-1.41L6.41 5l3.54-3.54L8.54.05 5 3.59zM17 2h24v2H17V2zm0 4h24v2H17V6zM2 17h2v24H2V17zm4 0h2v24H6V17z'/%3E%3C/g%3E%3C/svg%3E"); */
--bg-background-color: #ffffff;
--bg-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23dddddd' fill-opacity='0.4'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
@ -277,6 +273,7 @@ nav.menu {
--ifm-menu-color-background-active: var(--docs-color-primary-tint);
}
/* other style */
::selection {
--tw-text-opacity: 1;
background-color: rgb(var(--docs-color-primary-200, 33 96 253) / 0.8);
@ -296,3 +293,11 @@ div[class^="announcementBar_"] a {
text-decoration: underline;
color: #091e42;
}
.introduction-container {
color: #1c1e21;
}
.three-part-container p {
margin: 0;
line-height: 2;
}

@ -44,14 +44,7 @@ function HomepageHeader() {
export default function Home() {
const { siteConfig } = useDocusaurusContext();
// useEffect(() => {
// // Set the content of the banner based on the URL.
// let inner = location.href.includes("3000")
// ? '⭐️ If you like hippo4j, give it a star on &nbsp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> &nbsp;⭐️ '
// : '⭐️ 源不易,如果 Hippo4j 对您有帮助,请在 <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> 上给它一个 Star 🌟';
// let el = document.querySelector('[class^="announcementBar_"]');
// el.innerHTML = inner;
// }, []);
return (
<Layout
title={`${siteConfig.title}`}

@ -5,7 +5,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
import Translate from "@docusaurus/Translate";
function CompanyCards({ companies }) {
return (
<div className="grid sm:grid-cols-2 grid-cols-1 md:px-16 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-16 lg:px-2 px-10">
<div className="grid sm:grid-cols-2 grid-cols-1 md:px-16 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-16 lg:px-2 px-10">
{/* Filter out those without a logo. */}
{companies
.filter((comapny) => comapny.logo.length > 0)
@ -19,13 +19,13 @@ function CompanyCards({ companies }) {
>
<div className="flex dark:text-black items-center justify-center h-28">
<div
className="h-24 w-24 object-contain"
className="h-22 w-24 object-contain"
style={{ position: "relative" }}
>
<img
src={useBaseUrl(company.logo)}
alt={`${company.name}`}
className="h-24 w-24 object-contain"
className="h-22 w-24 object-contain"
/>
</div>
</div>
@ -39,9 +39,9 @@ export default function OurUsers() {
<Layout title="OurUsers" description="companies using our product">
<div className="max-w-screen-lg mx-auto dark:text-white">
{/* text description*/}
<div className="max-w-screen-sm sm:mx-auto mx-10 text-center my-8 ">
<div className="max-w-screen-sm sm:mx-auto mx-10 text-center my-8 mt-16 ">
<div className="text-center mt-8">
<h2 className="text-3xl font-bold mb-4">
<h2 className="text-3xl font-bold my-4">
<Translate
id="companyPage.title"
description="the title for the company page"
@ -50,12 +50,12 @@ export default function OurUsers() {
</Translate>
</h2>
<div
className="mx-auto h-1 bg-gradient-to-r from-green-400 to-blue-500 mb-4"
className="mx-auto h-1 bg-gradient-to-r from-green-400 to-blue-500 my-6"
style={{ width: "30%" }}
></div>
</div>
<div className="flex flex-col items-center mx-auto">
<p className="text-lg mb-2 max-w-1/2" style={{ lineHeight: "1.5" }}>
<p className="text-lg leading-loose mb-2 max-w-1/2">
<Translate
id="companyPage.descriptionText"
description="the description for the company page"
@ -64,7 +64,7 @@ export default function OurUsers() {
This is our greatest motivation to move forward.
</Translate>{" "}
</p>
<p className="text-lg mb-4 max-w-1/2" style={{ lineHeight: "1.5" }}>
<p className="text-lg mb-4 max-w-1/2 leading-loose">
<Translate
id="companyPage.questionText"
description="the text for the company question"

Loading…
Cancel
Save