Improve layout and style (#1492)

* modify docusaurus.config.js file

* small fix

* Adjust the layout of the homepage and introduce the GitHub button style.
pull/1504/head
youbo 8 months ago committed by GitHub
parent 2922aaf78f
commit c9abea4c37
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,49 +1,49 @@
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require("prism-react-renderer/themes/github");
const darkCodeTheme = require("prism-react-renderer/themes/dracula");
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** @type {import('@docusaurus/types').Config} */
const config = {
title: "Hippo4j",
tagline: "动态可观测线程池框架,为业务系统提高线上运行保障能力",
url: "https://hippo4j.cn",
baseUrl: "/",
onBrokenLinks: "throw",
onBrokenMarkdownLinks: "warn",
favicon: "img/hippo4j_favicon.ico",
title: 'Hippo4j',
tagline: '动态可观测线程池框架,为业务系统提高线上运行保障能力',
url: 'https://hippo4j.cn',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/hippo4j_favicon.ico',
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: "hippo4j", // Usually your GitHub org/user name.
projectName: "hippo4j.github.io", // Usually your repo name.
deploymentBranch: "main",
organizationName: 'hippo4j', // Usually your GitHub org/user name.
projectName: 'hippo4j.github.io', // Usually your repo name.
deploymentBranch: 'main',
// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: "zh",
locales: ["en", "zh"],
defaultLocale: 'zh',
locales: ['en', 'zh'],
localeConfigs: {
en: {
label: "English",
direction: "ltr",
label: 'English',
direction: 'ltr',
},
zh: {
label: "简体中文",
direction: "ltr",
label: '简体中文',
direction: 'ltr',
},
},
},
presets: [
[
"classic",
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve("./sidebars.js"),
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
// Do not automatically expand the menu
@ -55,10 +55,10 @@ const config = {
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
theme: {
customCss: require.resolve("./src/css/custom.css"),
customCss: require.resolve('./src/css/custom.css'),
},
}),
],
@ -66,21 +66,21 @@ const config = {
plugins: [
[
"@docusaurus/plugin-content-docs",
'@docusaurus/plugin-content-docs',
{
id: "community",
path: "community",
routeBasePath: "community",
sidebarPath: require.resolve("./sidebarsCommunity.js"),
id: 'community',
path: 'community',
routeBasePath: 'community',
sidebarPath: require.resolve('./sidebarsCommunity.js'),
},
],
async function myPlugin(context, options) {
return {
name: "docusaurus-tailwindcss",
name: 'docusaurus-tailwindcss',
configurePostCss(postcssOptions) {
// Appends TailwindCSS and AutoPrefixer.
postcssOptions.plugins.push(require("tailwindcss"));
postcssOptions.plugins.push(require("autoprefixer"));
postcssOptions.plugins.push(require('tailwindcss'));
postcssOptions.plugins.push(require('autoprefixer'));
return postcssOptions;
},
};
@ -92,64 +92,64 @@ const config = {
({
autoCollapseCategories: true,
announcementBar: {
id: "announcementBar-1", // Increment on change
id: 'announcementBar-1', // Increment on change
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",
textColor: "#091E42",
backgroundColor: '#fafbfc',
textColor: '#091E42',
isCloseable: false,
},
navbar: {
title: "",
title: '',
logo: {
alt: "Hippo4j 动态可观测线程池框架",
src: "img/hippo4j.png",
alt: 'Hippo4j 动态可观测线程池框架',
src: 'img/hippo4j.png',
},
items: [
{
type: "docSidebar",
docId: "intro",
position: "left",
sidebarId: "user_docs",
label: "文档",
type: 'docSidebar',
docId: 'intro',
position: 'left',
sidebarId: 'user_docs',
label: '文档',
},
{
to: "/community/contributor-guide",
label: "社区",
position: "left",
to: '/community/contributor-guide',
label: '社区',
position: 'left',
activeBaseRegex: `/community/`,
},
/*{ to: "/team", label: "团队", position: "left" },*/
{ to: "/users", label: "采用公司", position: "left" },
{ to: "/group", label: "加群沟通", position: "left" },
{ to: '/users', label: '采用公司', position: 'left' },
{ to: '/group', label: '加群沟通', position: 'left' },
/*{to: '/blog', label: '博客', position: 'left'},*/
{
href: "http://console.hippo4j.cn/index.html",
label: "控制台样例",
position: "left",
href: 'http://console.hippo4j.cn/index.html',
label: '控制台样例',
position: 'left',
},
{
href: "https://magestack.cn",
label: "🚀 拿个offer",
position: "left",
href: 'https://magestack.cn',
label: '🚀 拿个offer',
position: 'left',
},
{
type: "docsVersionDropdown",
position: "right",
type: 'docsVersionDropdown',
position: 'right',
dropdownActiveClassDisabled: true,
},
{ type: "localeDropdown", position: "right" },
{ type: 'localeDropdown', position: 'right' },
/*{
href: 'https://gitee.com/mabaiwancn/hippo4j',
label: 'Gitee',
position: 'right',
},*/
{
href: "https://github.com/opengoofy/hippo4j",
className: "header-github-link",
"aria-label": "GitHub repository",
position: "right",
href: 'https://github.com/opengoofy/hippo4j',
className: 'header-github-link',
'aria-label': 'GitHub repository',
position: 'right',
},
/*{
@ -160,57 +160,57 @@ const config = {
],
},
footer: {
style: "dark",
style: 'dark',
links: [
{
title: "Docs",
title: 'Docs',
items: [
{
label: "Intro",
to: "/docs/user_docs/intro",
label: 'Intro',
to: '/docs/user_docs/intro',
},
{
label: "Config Mode",
to: "/docs/user_docs/getting_started/config/hippo4j-config-start",
label: 'Config Mode',
to: '/docs/user_docs/getting_started/config/hippo4j-config-start',
},
{
label: "Server Mode",
to: "/docs/user_docs/getting_started/server/hippo4j-server-start",
label: 'Server Mode',
to: '/docs/user_docs/getting_started/server/hippo4j-server-start',
},
],
},
{
title: "Community",
title: 'Community',
items: [
{
label: "Group",
href: "https://hippo4j.cn/group",
label: 'Group',
href: 'https://hippo4j.cn/group',
},
{
label: "WeChat",
href: "https://mp.weixin.qq.com/s/diVHYvwiuYH9aWpZDPc27g",
label: 'WeChat',
href: 'https://mp.weixin.qq.com/s/diVHYvwiuYH9aWpZDPc27g',
},
],
},
{
title: "More",
title: 'More',
items: [
{
label: "Gitee",
href: "https://gitee.com/opengoofy/hippo4j",
label: 'Gitee',
href: 'https://gitee.com/opengoofy/hippo4j',
},
{
label: "GitHub",
href: "https://github.com/opengoofy/hippo4j",
label: 'GitHub',
href: 'https://github.com/opengoofy/hippo4j',
},
],
},
{
title: "Links",
title: 'Links',
items: [
{
label: "推广合作",
href: "https://hippo4j.cn/docs/user_docs/other/operation",
label: '推广合作',
href: 'https://hippo4j.cn/docs/user_docs/other/operation',
},
],
},
@ -221,7 +221,7 @@ const config = {
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
additionalLanguages: ["java"],
additionalLanguages: ['java'],
},
}),
};

@ -262,7 +262,7 @@
"description": "The homepage title description"
},
"homepage.titleDescription2": {
"message": "动态可观测线程池框架,为业务系统提高线上运行保障能力",
"message": "动态可观测Java线程池框架,为你的业务系统提高线上运行保障能力",
"description": "The homepage title description"
},
"homepage.startButton": {
@ -326,7 +326,7 @@
"description": "The third desc for fristPart "
},
"homepage.introduction.secondPartDesc1": {
"message": "应用程序线程池运行时点,提供四个告警维度。",
"message": "应用程序线程池运行时点,提供四个告警维度,并支持自定义时间内不重复报警。",
"description": "The first desc for secondPart "
},
"homepage.introduction.secondPartDesc2": {
@ -354,7 +354,11 @@
"description": "The p1 for the secondTitle part"
},
"homepage.secondTitleDesc2": {
"message": "提供了线程池动态调整、自定义警报和操作监控等功能,以帮助提高业务系统的运营支持能力。",
"message": "提供了线程池动态调整、自定义警报和操作监控等功能。",
"description": "The p1 for the secondTitle part"
},
"homepage.secondTitleDesc3": {
"message": "帮助提高你的业务系统的运营支持能力。",
"description": "The p2 for the secondTitle part"
}
}

@ -1,28 +1,22 @@
import React from "react";
import { Icon } from "@iconify/react";
import useBaseUrl from "@docusaurus/useBaseUrl";
import GithubInfo from "./GithubInfo";
import Translate, { translate } from "@docusaurus/Translate";
import Link from "@docusaurus/Link";
import React from 'react';
import { Icon } from '@iconify/react';
import useBaseUrl from '@docusaurus/useBaseUrl';
import GithubInfo from './GithubInfo';
import Translate, { translate } from '@docusaurus/Translate';
import Link from '@docusaurus/Link';
const Hero = () => {
const bgUrl = useBaseUrl("/img/bg.jpg");
const bgUrl = useBaseUrl('/img/bg.jpg');
return (
<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-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-8 md:my-4 text-5xl font-bold leading-tight ">
<header className="hero hero--primary heroBanner_UJJx dark:bg-[#1B1B1D]">
<div className="my-container dark:text-white">
<div className="row">
<div className="col col--6">
<h1 className="hero__logo text-5xl font-medium dark:text-white">
Hippo4j Thread Pool
</h1>
<p className="leading-normal hero-image-url text-gray-600 dark:text-gray-100 text-xl mb-0">
<p className="hero__subtitle">
<Translate
id="homepage.titleDescription2"
description="The homepage title description"
@ -31,13 +25,31 @@ const Hero = () => {
Systems Online.
</Translate>
</p>
<div class="social_VnSH">
<a
class="github-button"
href="https://github.com/opengoofy/hippo4j"
data-show-count="true"
aria-label="Star opengoofy/hippo4j on GitHub"
>
Star
</a>
<a
class="github-button ml-4"
href="https://github.com/opengoofy/hippo4j/fork"
data-icon="octicon-repo-forked"
data-show-count="true"
aria-label="Fork opengoofy/hippo4j on GitHub"
>
Fork
</a>
</div>
<div className="buttons_pzbO">
{/* button group */}
<div className="flex my-4 lg:my-8 md:my-6 w-full justify-center md:justify-start">
<div className="flex mt-6 w-full justify-center">
<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"
className="relative mr-4 w-32 text-center lg:w-48 hover:no-underline inline-flex items-center justify-start py-4 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>
@ -50,11 +62,11 @@ const Hero = () => {
href="https://github.com/opengoofy/hippo4j"
class="relative w-32 hover:no-underline lg:w-48 inline-block text-lg group"
>
<span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
<span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
<span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
<span class="relative z-10 block px-5 py-4 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
<span class="absolute inset-0 w-full h-full px-5 py-4 rounded-lg bg-gray-100"></span>
<span class="absolute left-0 w-52 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
<span class="relative flex items-center justify-center">
{" "}
{' '}
<Icon
className="w-6 h-6 mr-2 rounded-full flex-shrink-0 bg-white text-white"
icon="devicon:github"
@ -68,26 +80,20 @@ const Hero = () => {
></span>
</a>
</div>
{/* github info */}
<div className="github-info w-full">
<GithubInfo owner="opengoofy" repo="hippo4j" />
</div>
{/* button test */}
<div className="flex"></div>
</div>
{/* <!--Right image--> */}
<div className="w-full lg:w-1/2 text-center lg:block ">
<div className="col col--6">
<h1 className="hero__title">
<img
className="hero-img w-full h-auto object-cover 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"
className="homeImg_cEyn max-w-[440px] mt-12 -ml-8"
src={useBaseUrl('/img/hero/hero-removebg.png')}
alt="homepage"
/>
</h1>
</div>
</div>
</div>
</div>
</header>
);
};

@ -1,134 +1,161 @@
import React from "react";
import useBaseUrl from "@docusaurus/useBaseUrl";
import Translate from "@docusaurus/Translate";
import React from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl';
import Translate from '@docusaurus/Translate';
const Introduction = () => {
return (
<section className="mb-28 dark:text-white">
<section className="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">
<div className="title-container w-full bg-[#EFEFEF] dark:text-white flex flex-wrap dark:bg-[#242526]">
<div className="my-container">
<div className="row">
<div className="col col--6 hfeatureImage_Eu74">
<img
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")}
width="560"
height="315"
style={{ width: '560px', height: '315px' }}
src={useBaseUrl('/img/introduction/t.jpg')}
/>
{/* <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 dark:text-white ">
<div className="col col--6 hfeatureContent_iAnb">
<h3 className="hfeatureTitle_i6jH text-4xl font-medium mb-8">
<Translate
id="homepage.secondTitle"
description="The title for the introduction part"
>
What can Hippo4j do?
</Translate>
</h2>
<p className="leading-normal mt-8 max-w-xl md:pr-10 dark:text-white mb-2">
</h3>
<p>
<Translate
id="homepage.secondTitleDesc2"
description="The p1 for the secondTitle part"
>
Provided functions such as dynamic adjustment of thread
pool, custom alerts.
</Translate>
</p>
<p>
<Translate
id="homepage.secondTitleDesc3"
description="The p2 for the secondTitle part"
>
Provided functions such as dynamic adjustment of thread pool,
custom alerts, and operation monitoring to help improve the
operational support capabilities of business systems.
Help improve the operational support capabilities of your
business system.
</Translate>
</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 sm:w-1/3 md:w-1/4 ">
</div>
</div>
<section className="section_rXKr dark:text-white">
<div className="my-container">
<div className="row">
<div className="my-container">
<div className="row feature_gF_R">
<div className="col col--3">
<div className="text--center">
<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"
className="featureImage_FjLv"
src={useBaseUrl('/img/introduction/p11.svg')}
alt="feture-[object Object]"
/>
</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 ">
</div>
<div className="col col--9 featureDesc_r01v">
<div>
<h2>
{' '}
<Translate
id="homepage.introduction.fristPartTitle"
description="the title for the first introduction part"
>
Dynamic Change
</Translate>
</h3>
<div class="dark:text-white mb-8 ">
</h2>
<div>
<p>
<Translate
className="cursor-pointer "
className=" "
id="homepage.introduction.fristPartDesc1"
description="The first desc for fristPart "
>
Application runtime dynamically changes thread pool
parameters.
</Translate>{" "}
</Translate>{' '}
</p>
</div>
</div>
</div>
<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">
</div>
</div>
<div className="my-container">
<div className="row feature_gF_R featureReverse_QJY9">
<div className="col col--3">
<div className="text--center">
<img
className="featureImage_FjLv"
src={useBaseUrl('/img/introduction/p22.svg')}
alt="feture-[object Object]"
/>
</div>
</div>
<div className="col col--9 featureDesc_r01v">
<div>
<h2>
{' '}
<Translate
id="homepage.introduction.secondPartTitle"
description="the title for the second introduction part"
>
Custom Alarm
</Translate>
</h3>
<div class="dark:text-white mb-8">
</h2>
<div>
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.secondPartDesc1"
description="The first desc for secondPart "
>
Application thread pool runtime point, providing four
alarm dimensions.
Application thread pool runtime point, providing
four alarm dimensions.
</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 mt-2 flex-wrap">
<div class="w-full sm:w-1/3 md:w-1/4 ">
<div className="my-container">
<div className="row feature_gF_R">
<div className="col col--3">
<div className="text--center">
<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"
className="featureImage_FjLv"
src={useBaseUrl('/img/introduction/p33.svg')}
alt="feture-[object Object]"
/>
</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 ">
</div>
<div className="col col--9 featureDesc_r01v">
<div>
<h2>
<Translate
id="homepage.introduction.thirdPartTitle"
description="the title for the third introduction part"
>
Operation Monitoring
</Translate>
</h3>
<div class="dark:text-white mb-8">
<p className="m-0">
</h2>
<div>
<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.
Supports custom duration thread pool for data
collection and storage.
</Translate>
</p>
</div>
@ -136,6 +163,10 @@ const Introduction = () => {
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
);
};

@ -10,8 +10,8 @@
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&display=swap');
:root {
/*
See css var + hsl color palette technique:
@ -25,20 +25,20 @@
--site-color-svg-icon-favorite: #e9669e;
--site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%);
--site-color-feedback-background: #fff;
--ifm-font-family-base: "Poppins";
--ifm-font-family-base: 'Poppins';
/* custom */
--docs-color-primary-tint: #2160fd29;
--ifm-breadcrumb-item-background-active: #0000000d;
--ifm-breadcrumb-color-active: #2160fd;
}
html[data-theme="dark"] {
html[data-theme='dark'] {
--site-color-feedback-background: #f0f8ff;
--site-color-favorite-background: #1d1e1e;
--site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%);
}
[data-theme="light"] {
[data-theme='light'] {
--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%);
@ -53,7 +53,7 @@ html[data-theme="dark"] {
);
}
[data-theme="dark"] {
[data-theme='dark'] {
--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%);
@ -77,7 +77,7 @@ html[data-theme="dark"] {
padding: 0 var(--ifm-pre-padding);
}
[data-theme="dark"] .docusaurus-highlight-code-line {
[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgb(66 66 66 / 30%);
}
@ -86,7 +86,7 @@ html[data-theme="dark"] {
}
.header-github-link::before {
content: "";
content: '';
width: 24px;
height: 24px;
display: flex;
@ -94,7 +94,7 @@ html[data-theme="dark"] {
no-repeat;
}
[data-theme="dark"] .header-github-link::before {
[data-theme='dark'] .header-github-link::before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}
@ -115,15 +115,15 @@ html[data-theme="dark"] {
background-color: var(--ifm-tabs-color-active);
}
[data-theme="light"] .themedDocusaurus [fill="#FFFF50"] {
[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {
fill: greenyellow;
}
[data-theme="dark"] .themedDocusaurus [fill="#FFFF50"] {
[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
fill: seagreen;
}
[data-theme="light"] .DocSearch {
[data-theme='light'] .DocSearch {
--docsearch-muted-color: var(--ifm-color-emphasis-700);
--docsearch-container-background: rgb(94 100 112 / 70%);
/* Modal */
@ -139,7 +139,7 @@ html[data-theme="dark"] {
--docsearch-footer-background: var(--ifm-color-white);
}
[data-theme="dark"] .DocSearch {
[data-theme='dark'] .DocSearch {
--docsearch-text-color: var(--ifm-font-color-base);
--docsearch-muted-color: var(--ifm-color-secondary-darkest);
--docsearch-container-background: rgb(47 55 69 / 70%);
@ -161,7 +161,7 @@ html[data-theme="dark"] {
);
}
div[class^="announcementBar_"] {
div[class^='announcementBar_'] {
--site-announcement-bar-stripe-color1: hsl(
var(--site-primary-hue-saturation) 85%
);
@ -195,14 +195,14 @@ div[class^="announcementBar_"] {
white-space: nowrap;
}
[data-theme="light"] img[src$="#gh-dark-mode-only"],
[data-theme="dark"] img[src$="#gh-light-mode-only"] {
[data-theme='light'] img[src$='#gh-dark-mode-only'],
[data-theme='dark'] img[src$='#gh-light-mode-only'] {
display: none;
}
/* Used to test CSS insertion order */
.test-marker-site-custom-css-unique-rule {
content: "site-custom-css-unique-rule";
content: 'site-custom-css-unique-rule';
}
@media only screen and (max-width: 996px) {
@ -224,19 +224,80 @@ div[class^="announcementBar_"] {
}
}
@media (min-width: 1440px) {
.container {
max-width: var(--ifm-container-width-xl);
}
}
@media (max-width: 996px) {
.col {
--ifm-col-width: 100%;
flex-basis: var(--ifm-col-width);
margin-left: 0;
}
.footer {
--ifm-footer-padding-horizontal: 0;
}
.colorModeToggle_DEke,
.footer__link-separator,
.navbar__item,
.sidebar_re4s,
.tableOfContents_bqdL {
display: none;
}
.footer__col {
margin-bottom: calc(var(--ifm-spacing-vertical) * 3);
}
.footer__link-item {
display: block;
}
.navbar > .container,
.navbar > .container-fluid {
padding: 0;
}
.navbar__toggle {
display: inherit;
}
.navbar__search-input {
width: 9rem;
}
.pills--block,
.tabs--block {
flex-direction: column;
}
.searchBox_ZlJk {
position: absolute;
right: var(--ifm-navbar-padding-horizontal);
}
.docItemContainer_F8PC {
padding: 0 0.3rem;
}
}
/* Custom */
.bg-cousom {
background-position: 50% 65%;
}
:root[data-theme="light"] {
--hero-image-url: url("../../static/img/hero/hero-removebg.png");
:root[data-theme='light'] {
--hero-image-url: url('../../static/img/hero/hero-removebg.png');
--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");
}
:root[data-theme="dark"] {
--hero-image-url: url("../../static/img/hero/hero-removebg.png");
:root[data-theme='dark'] {
--hero-image-url: url('../../static/img/hero/hero-removebg.png');
--bg-background-color: #1b1b1d;
--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='%239C92AC' 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");
}
@ -255,7 +316,7 @@ div[class^="announcementBar_"] {
}
.font-jakarta {
font-family: "Plus Jakarta Sans", sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
}
/* sidebar style */
@ -280,8 +341,8 @@ nav.menu {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
div[class^="announcementBar_"] {
font-size: 14px;
div[class^='announcementBar_'] {
font-size: 16px;
background: none;
background-color: #fafbfc;
padding: 8px 0;
@ -289,7 +350,7 @@ div[class^="announcementBar_"] {
justify-content: center;
font-weight: inherit;
}
div[class^="announcementBar_"] a {
div[class^='announcementBar_'] a {
text-decoration: underline;
color: #091e42;
}
@ -301,3 +362,185 @@ div[class^="announcementBar_"] a {
margin: 0;
line-height: 2;
}
.logo-img-container {
align-items: center;
background: #fff;
border: 1px solid #eaecef;
border-radius: 4px;
box-shadow: 0 1px 2px 0 #f8f9fa;
display: flex;
height: 80px;
justify-content: center;
margin: 5px;
min-width: 0;
}
/* new add */
.hero {
align-items: center;
background-color: #fff;
color: #000;
display: flex;
padding: 4rem 2rem;
}
.heroBanner_UJJx {
overflow: hidden;
padding: 1rem 0 5rem;
position: relative;
text-align: center;
}
.my-container {
margin: 0 auto;
max-width: 1140px;
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 calc(1rem * -1);
}
.col[class*='col--'] {
flex: 0 0 var(--ifm-col-width);
}
.col {
--ifm-col-width: 100%;
flex: 1 0;
margin-left: 0;
max-width: var(--ifm-col-width);
}
.col--6 {
--ifm-col-width: 50%;
}
.col--3 {
--ifm-col-width: 25%;
}
.col--9 {
--ifm-col-width: 75%;
}
.col,
.my-container {
padding: 0 1rem;
width: 100%;
}
.hero__logo {
height: 150px;
max-width: 500px;
transform: translateY(40%);
}
.hero__logo,
.hero__subtitle,
.hero__title {
margin: 0 auto;
width: 100%;
}
h1,
h2,
h3 {
font-weight: 400;
line-height: 1.25;
}
.social_VnSH {
margin-top: 30px;
}
.social_VnSH span:nth-child(2) {
margin-left: 8px;
}
.buttons_pzbO {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 30px 0 0;
}
.hero__title {
background-size: 110%;
color: transparent;
height: 300px;
max-width: 400px;
font-size: 3rem;
}
.hero__subtitle {
font-size: 1.2em;
max-width: 600px;
}
.hfeatureImage_Eu74 {
height: 100%;
padding: 60px 1rem !important;
}
.hfeatureContent_iAnb {
padding: 60px 0 60px calc(1rem + 20px) !important;
}
.section_rXKr {
padding: 4rem 0;
width: 100%;
}
.section_rXKr h3 {
font-size: 1.7em;
font-weight: 500;
text-align: center;
}
.feature_gF_R {
margin-bottom: 0.5rem;
}
.featureImage_FjLv {
height: 256px;
}
.featureDesc_r01v {
align-items: center;
display: flex !important;
}
.featureReverse_QJY9 {
flex-direction: row-reverse;
float: right;
}
@media screen and (max-width: 966px) {
.heroBanner_UJJx {
padding: 2rem;
}
.col {
--ifm-col-width: 100%;
flex-basis: var(--ifm-col-width);
margin-left: 0;
}
.hero {
padding-left: 0;
padding-right: 0;
}
}
@media screen and (max-width: 768px) {
.feature_gF_R {
margin-bottom: 0.5rem;
}
.featureImage_FjLv {
height: 96px;
margin-bottom: 1.5rem;
}
}
@media (max-width: 650px) {
.buttons_pzbO > a {
margin: 10px 5px;
}
.frameworkLogos_QXHq img {
height: 45px;
}
}
@media (min-width: 1440px) {
.my-container {
max-width: 1320px;
}
}

@ -1,23 +1,23 @@
import React from "react";
import { useEffect } from "react";
import clsx from "clsx";
import Link from "@docusaurus/Link";
import React from 'react';
import { useEffect } from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
// import Translate from "@docusaurus/Translate";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Layout from "@theme/Layout";
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
// import HomepageFeatures from "@site/src/components/HomepageFeatures";
import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import LandingLayout from "@site/src/components/LandingPage";
import styles from "./index.module.css";
import LandingLayout from '@site/src/components/LandingPage';
import Head from '@docusaurus/Head';
import styles from './index.module.css';
if (ExecutionEnvironment.canUseDOM) {
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?473eaadc06f3d63771f303df1fc29b58";
var s = document.getElementsByTagName("script")[0];
var hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?473eaadc06f3d63771f303df1fc29b58';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
}
@ -25,7 +25,7 @@ if (ExecutionEnvironment.canUseDOM) {
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx("hero hero--primary", styles.heroBanner)}>
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container">
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
@ -50,6 +50,9 @@ export default function Home() {
title={`${siteConfig.title}`}
description="Description will go into a meta tag in <head />"
>
<Head>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</Head>
{/* <HomepageHeader /> */}
<main>
{/* <HomepageFeatures /> */}

@ -12,24 +12,20 @@ function CompanyCards({ companies }) {
.map((company) => (
<div
onClick={() => window.open(company.url)}
key={company.url}
// className="bg-white rounded-lg overflow-hidden shadow-sm transform cursor-pointer transition-all duration-500 hover:scale-110"
className="bg-white rounded-lg overflow-hidden shadow-sm transform cursor-pointer transition-all duration-500 hover:scale-110"
style={{ border: "1px solid #E5E7EB" }}
className="rounded-lg overflow-hidden transform cursor-pointer transition-all duration-500 hover:scale-110"
// style={{ border: "1px solid #E5E7EB" }}
>
<div className="flex dark:text-black items-center justify-center h-28">
<div
className="h-22 w-24 object-contain"
className="h-20 logo-img-container p-1"
style={{ position: "relative" }}
>
<img
src={useBaseUrl(company.logo)}
alt={`${company.name}`}
className="h-22 w-24 object-contain"
className="max-h-[90%] max-w-[90%] h-auto object-contain"
/>
</div>
</div>
</div>
))}
</div>
);
@ -37,11 +33,11 @@ function CompanyCards({ companies }) {
export default function OurUsers() {
return (
<Layout title="OurUsers" description="companies using our product">
<div className="max-w-screen-lg mx-auto dark:text-white">
<div className="w-[1200px] px-5 mx-auto dark:text-white">
{/* text description*/}
<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 my-4">
<div className="max-w-screen-sm sm:mx-auto mx-10 text-center my-8 mt-14 mb-12 ">
<div className="text-center ">
<h2 className="text-3xl font-medium mb-7">
<Translate
id="companyPage.title"
description="the title for the company page"
@ -50,12 +46,12 @@ export default function OurUsers() {
</Translate>
</h2>
<div
className="mx-auto h-1 bg-gradient-to-r from-green-400 to-blue-500 my-6"
className="mx-auto h-[0.215rem] bg-gradient-to-r from-green-400 to-blue-500 mb-6"
style={{ width: "30%" }}
></div>
</div>
<div className="flex flex-col items-center mx-auto">
<p className="text-lg leading-loose mb-2 max-w-1/2">
<div className=" mb-7 mx-auto">
<p className="text-lg leading-loose mb-2 ">
<Translate
id="companyPage.descriptionText"
description="the description for the company page"
@ -64,7 +60,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 leading-loose">
<p className="text-lg mb-5 leading-loose">
<Translate
id="companyPage.questionText"
description="the text for the company question"

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

@ -174,11 +174,7 @@
"logo": "/img/company_logos/youdao.png",
"url": "https://www.youdao.com"
},
{
"name": "神州数码(西安)",
"logo": "/img/company_logos/digitalchina.png",
"url": "https://www.digitalchina.com"
},
{
"name": "广联达科技股份有限公司",
"logo": "/img/company_logos/glodon.jpg",

Loading…
Cancel
Save