Homepage layout adjustment, and adding new image resource (#1462)

pull/1463/head
youbo 1 year ago committed by GitHub
parent 15dba8f456
commit 0c409f3e31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

BIN
.DS_Store vendored

Binary file not shown.

@ -271,7 +271,7 @@
},
"homepage.secondTitle": {
"message": "Hippo4j能做什么",
"description": "a title for introduciton part"
"description": "The title for the introduction part"
},
"homepage.introduction.fristPartTitle": {
"message": "动态变更",
@ -312,5 +312,49 @@
"companyPage.linkText": {
"message": "点击进行登记",
"description": "the text for the company page link"
},
"homepage.introduction.fristPartDesc1": {
"message": "应用程序运行时动态更改线程池参数。",
"description": "The first desc for fristPart "
},
"homepage.introduction.fristPartDesc2": {
"message": "包括但不限于核心大小、最大线程数、阻塞队列大小和拒绝策略。",
"description": "The second desc for fristPart "
},
"homepage.introduction.fristPartDesc3": {
"message": "支持应用集群中不同节点的差异化线程池配置。",
"description": "The third desc for fristPart "
},
"homepage.introduction.secondPartDesc1": {
"message": "应用程序线程池运行时点,提供四个告警维度。",
"description": "The first desc for secondPart "
},
"homepage.introduction.secondPartDesc2": {
"message": "线程池超载,阻塞队列容量,运行时间过长以及拒绝策略警报。",
"description": "The second desc for secondPart "
},
"homepage.introduction.secondPartDesc3": {
"message": "它还支持在自定义时间段内的非重复闹钟。",
"description": "The third desc for secondPart "
},
"homepage.introduction.thirdPartDesc1": {
"message": "支持为数据收集和存储设置自定义持续时间的线程池。",
"description": "The first desc for thirdPart "
},
"homepage.introduction.thirdPartDesc2": {
"message": "同时还支持Prometheus、InfluxDB和其他监控系统。",
"description": "The second desc for thirdPart "
},
"homepage.introduction.thirdPartDesc3": {
"message": "通过Grafana或内置的监控页面提供可视化仪表盘监控指标。",
"description": "The third desc for thirdPart "
},
"homepage.secondTitleDesc1": {
"message": "Hippo4j是一个Java线程池框架。",
"description": "The p1 for the secondTitle part"
},
"homepage.secondTitleDesc2": {
"message": "提供了线程池动态调整、自定义警报和操作监控等功能,以帮助提高业务系统的运营支持能力。",
"description": "The p2 for the secondTitle part"
}
}

@ -6,19 +6,24 @@ import Translate, { translate } from "@docusaurus/Translate";
import Link from "@docusaurus/Link";
const Hero = () => {
const bgUrl = useBaseUrl("/img/bg.jpg");
return (
<div className="hero-container text-black dark:text-white">
<div className="py-10 mb-10">
<div className="container px-20 lg:px-20 md:px-10 mx-auto flex flex-wrap flex-col md:flex-row items-center">
<div className="min-h-screen relative text-black dark:text-white">
<div
// style={{ backgroundImage: `url(${bgUrl})` }}
className="hero-bg-img absolute inset-0 overflow-hidden bg-center bg-cover bg-no-repeat"
>
<div className=" container px-20 py-24 lg:py-24 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 md:w-3/5 justify-center items-start text-center md:text-left">
<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 lg:my-8 md:my-6 text-5xl font-bold leading-tight text-transparent bg-gradient-to-r from-orange-400 via-orange-400 to-orange-500 bg-clip-text">
<h1 className="my-4 lg:my-12 md:my-10 text-5xl font-bold leading-tight text-transparent bg-gradient-to-r from-orange-400 via-orange-400 to-orange-500 bg-clip-text">
Hippo4j
</h1>
<p className="leading-normal dark:text-white font-bold text-gray-800 md:pr-20 text-3xl md:text-3xl">
<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"
@ -26,7 +31,7 @@ const Hero = () => {
Thread Pool Framework For Java
</Translate>
</p>
<p className="leading-normal font-medium md:pr-20 text-gray-600 dark:text-gray-100 text-2xl mb-2">
<p className="leading-normal font-medium hero-image-url text-gray-600 dark:text-gray-100 text-2xl mb-2">
<Translate
id="homepage.titleDescription2"
description="The homepage title description"
@ -69,10 +74,10 @@ const Hero = () => {
</div>
{/* <!--Right image--> */}
<div className="w-full md:w-2/5 text-center">
<div className="w-full lg:w-1/2 text-center hidden lg:block ">
<img
className="w-full h-auto object-cover md:shadow-sm lg:h-80 md:h-96 dark:rounded-lg dark:shadow-lg dark:filter-brightness-75"
src={useBaseUrl("/img/hero.svg")}
className="hero-img w-full h-auto object-cover md:shadow-sm lg:h-80 md:h-96 dark:rounded-lg dark:shadow-lg dark:filter-brightness-75"
// src={useBaseUrl("/img/hero-removebg.png")}
alt="Hippo4j System"
/>
</div>

@ -3,101 +3,205 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
import Translate from "@docusaurus/Translate";
const Introduction = () => {
return (
<section className=" border-b mb-28">
<div className="container px-20 lg:px-20 md:px-10 ">
<h2 className="w-full my-2 text-5xl dark:text-white font-medium leading-tight text-gray-800">
{/* Hippo4j能做什么 */}
<Translate
id="homepage.secondTitle"
description="a title for introduciton part"
>
What can Hippo4j do?
</Translate>
</h2>
<div className="w-1/2 mb-6">
<div className=" h-1 w-64 my-0 py-0 rounded-t bg-gradient-to-r from-orange-400 to-blue-500 mb-4"></div>
</div>
<div className="third-part-desc grid md:grid-cols-2 grid-cols-1 gap-4">
<div className="p-4 md:p-6 bg-gray-100 dark:bg-[#252525] rounded-lg">
<h3 className="text-3xl text-gray-800 dark:text-white font-medium leading-none mb-3">
{/* 动态变更 */}
<Translate
id="homepage.introduction.fristPartTitle"
description="the title for the first introduction part"
>
Dynamic Change
</Translate>
</h3>
<p className="text-gray-600 text-xl dark:text-white ">
{/* 应用运行时动态变更线程池参数,包括不限于核心、最大线程、阻塞队列大小和拒绝策略等,支持应用集群下不同节点线程池配置差异化 */}
<Translate
id="homepage.introduction.fristPartDesc"
description="the desc for the first introduction part"
>
Application runtime dynamically changes thread pool parameters,
including but not limited to core size, maximum threads,
blocking queue size, and rejection policy. It supports
differentiated thread pool configurations for different nodes in
the application cluster.
</Translate>
<br />
<br />
</p>
<section className=" border-b mt-4 mb-28 dark:text-white">
<div className=" ">
<div className="title-container w-full bg-gray-100 p-4 mb-4 flex flex-wrap dark:bg-gray-700">
<div className="left-image-container w-full md:w-1/2 sm:w-1/3">
<img
className="w-full h-64 object-cover md:shadow-sm lg:h-80 md:h-96 dark:rounded-lg dark:shadow-lg dark:filter-brightness-75"
alt="Hippo4j System"
src={useBaseUrl("/img/introduction/title-image.svg")}
/>
</div>
<div className="p-4 md:p-6 bg-gray-100 dark:bg-[#252525] rounded-lg">
<h3 className="text-3xl text-gray-800 dark:text-white font-medium leading-none mb-3">
{/* 自定义报警 */}
<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-large leading-tight text-transparent bg-gradient-to-r from-orange-400 via-orange-500 to-orange-600 bg-clip-text">
<Translate
id="homepage.introduction.secondPartTitle"
description="the title for the second introduction part"
id="homepage.secondTitle"
description="The title for the introduction part"
>
Custom Alarm
What can Hippo4j do?
</Translate>
</h3>
<p className="text-gray-600 text-xl dark:text-white">
{/* 应用线程池运行时埋点,提供四种报警维度,线程池过载、阻塞队列容量、运行超长以及拒绝策略报警,并支持自定义时间内不重复报警 */}
</h2>
<p className=" my-4 leading-relaxed dark:text-white text-xl font-medium text-gray-800 md:pr-20 ">
<Translate
id="homepage.introduction.secondPartDesc"
description="the desc for the second introduction part"
id="homepage.secondTitleDesc1"
description="The p1 for the secondTitle part"
>
Application thread pool runtime point, providing four alarm
dimensions: thread pool overload, blocking queue capacity,
running for too long, and rejection strategy alarm. It also
supports non-repetitive alarms within a custom time period.
Hippo4j is a Java thread pool framework.
</Translate>
<br />
<br />
</p>
</div>
<div className="p-4 md:p-6 bg-gray-100 dark:bg-[#252525] rounded-lg">
<h3 className="text-3xl text-gray-800 dark:text-white font-medium leading-none mb-3">
{/* 运行监控 */}
<p className="leading-normal max-w-xl md:pr-10 text-gray-600 dark:text-gray-100 mb-2">
<Translate
id="homepage.introduction.thirdPartTitle"
description="the title for the third introduction part"
id="homepage.secondTitleDesc2"
description="The p2 for the secondTitle part"
>
Operation Monitoring
Provided functions such as dynamic adjustment of thread pool,
custom alerts, and operation monitoring to help improve the
operational support capabilities of business systems.
</Translate>
</h3>
<p className="text-gray-600 text-xl dark:text-white">
{/* 线
PrometheusInfluxDB 等采集监控通过 Grafana
或内置监控页面提供可视化大屏监控运行指标 */}
<Translate
id="homepage.introduction.thirdPartDesc"
description="the desc for the third introduction part"
>
Supports custom duration thread pool for data collection and
storage, while also supporting Prometheus, InfluxDB, and other
monitoring systems. Provides visualized dashboard monitoring
metrics through Grafana or built-in monitoring pages.
</Translate>
<br />
<br />
</p>
</div>
</div>
<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">
<Translate
id="homepage.introduction.fristPartTitle"
description="the title for the first introduction part"
>
Dynamic Change
</Translate>
</h3>
<div class="dark:text-white text-gray-600 mb-8">
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.fristPartDesc1"
description="The first desc for fristPart "
>
Application runtime dynamically changes thread pool
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 h-auto sm:h-64 object-cover md:shadow-sm lg:h-80 md:h-72 dark:rounded-lg dark:shadow-lg dark:filter-brightness-75"
src={useBaseUrl("/img/introduction/p1.svg")}
alt="Hippo4j System"
/>
</div>
</div>
<div class="flex flex-wrap pt-6 flex-col-reverse sm:flex-row">
<div class="w-full sm:w-1/3 md:w-1/2 mt-6">
<img
className="w-full h-auto sm:h-64 object-cover md:shadow-sm lg:h-80 md:h-96 dark:rounded-lg dark:shadow-lg dark:filter-brightness-75"
src={useBaseUrl("/img/introduction/p2.svg")}
alt="Hippo4j System"
/>
</div>
<div class="w-full sm:w-2/3 md:w-1/2 md:pl-8 sm:pl-8 mt-6">
<div class="align-middle">
<h3 class="text-2xl md:pb-6 text-gray-800 dark:text-white font-medium leading-none mb-3">
<Translate
id="homepage.introduction.secondPartTitle"
description="the title for the second introduction part"
>
Custom Alarm
</Translate>
</h3>
<div class="dark:text-white text-gray-600 mb-8">
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.secondPartDesc1"
description="The first desc for secondPart "
>
Application thread pool runtime point, providing four
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>
<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">
<Translate
id="homepage.introduction.thirdPartTitle"
description="the title for the third introduction part"
>
Operation Monitoring
</Translate>
</h3>
<div class="dark:text-white text-gray-600 mb-8 md:pr-6">
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.thirdPartDesc1"
description="The first desc for thirdPart "
>
Supports custom duration thread pool for data collection and
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 h-auto sm:h-64 object-cover md:shadow-sm lg:h-80 md:h-96 dark:rounded-lg dark:shadow-lg dark:filter-brightness-75"
src={useBaseUrl("/img/introduction/p3.svg")}
alt="Hippo4j System"
/>
</div>
</div>
</div>
</div>
</section>
);

@ -219,3 +219,31 @@ div[class^="announcementBar_"] {
height: 100%;
}
}
/* Custom by youbo */
.bg-cousom {
background-position: 50% 65%;
}
.bg-svg {
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23c2b9cf' fill-opacity='0.31' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
}
:root[data-theme="light"] {
--hero-image-url: url("../../static/img/hero/hero-removebg.png");
--hero-bg-url: url("../../static/img/hero/bg.jpg");
}
:root[data-theme="dark"] {
--hero-image-url: url("../../static/img/hero/hero.jpg");
/* --hero-bg-url:url("../../static/img/bg.jpg"); */
}
.hero-img {
content: var(--hero-image-url);
}
.hero-bg-img {
background-image: var(--hero-bg-url);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 904 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 925 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 32 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 30 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 50 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 52 KiB

Loading…
Cancel
Save