Modify the active color of the document and adjust the background of the hero (#1483)

9 months ago · bbcb90b609
parent 89c049dd62
commit bbcb90b609
6 changed files with 70 additions and 17 deletions
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@ -46,7 +46,8 @@ const config = {
          sidebarPath: require.resolve("./sidebars.js"),
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
-          sidebarCollapsed: false,
+          // Do not automatically expand the menu
+          sidebarCollapsed: true,
          /*editUrl: 'https://github.com/longtai-cn',*/
        },
        blog: {
@ -94,8 +95,13 @@ const config = {
        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: `⭐️ 开源不易，如果 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",
+        textColor: "#091E42",
+        isCloseable: false,
      },
      navbar: {
        title: "",
--- a/docs/src/components/LandingPage/Hero.jsx
+++ b/docs/src/components/LandingPage/Hero.jsx
@ -12,9 +12,9 @@ const Hero = () => {
    <div className=" h-[100vh] lg:h-[65vh]  relative text-black dark:text-white">
      <div
        // style={{ backgroundImage: `url(${bgUrl})` }}
-        className="bg-svg absolute inset-0 overflow-hidden bg-repeat"
+        className=" absolute inset-0 overflow-hidden bg-repeat"
      >
-        <div className="absolute inset-0 bg-gray-400 opacity-5 dark:opacity-0"></div>
+        {/* <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">
          {/* <!--Left Col--> */}
--- a/docs/src/components/LandingPage/Introduction.jsx
+++ b/docs/src/components/LandingPage/Introduction.jsx
@ -23,15 +23,15 @@ 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 ">
+            {/* <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 max-w-xl  md:pr-10 text-gray-600 dark:text-gray-100  mb-2">
+            </p> */}
+            <p className="leading-normal mt-8 max-w-xl  md:pr-10 text-gray-600 dark:text-gray-100  mb-2">
              <Translate
                id="homepage.secondTitleDesc2"
                description="The p2 for the secondTitle part"
--- a/docs/src/components/LandingPage/index.js
+++ b/docs/src/components/LandingPage/index.js
@ -1,4 +1,5 @@
 import React from "react";
+import { useEffect } from "react";
 import Hero from "./Hero";
 import Introduction from "./Introduction";
 function LandingLayout(props) {
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@ -26,6 +26,10 @@
  --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%);
  --site-color-feedback-background: #fff;
  --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"] {
@ -35,7 +39,8 @@ html[data-theme="dark"] {
 }

 [data-theme="light"] {
-  --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 30%);
+  /* --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%);
  --ifm-color-primary-darkest: hsl(var(--site-primary-hue-saturation) 17%);
@ -47,13 +52,11 @@ html[data-theme="dark"] {
  --ifm-color-primary-lightest: hsl(
    var(--site-primary-hue-saturation-light) 58%
  );
-
-  --ifm-breadcrumb-item-background-active: #0000000d;
-  --ifm-breadcrumb-color-active: #2160fd;
 }

 [data-theme="dark"] {
-  --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 45%);
+  /* --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%);
  --ifm-color-primary-darkest: hsl(var(--site-primary-hue-saturation) 32%);
@ -65,9 +68,6 @@ html[data-theme="dark"] {
  --ifm-color-primary-lightest: hsl(
    var(--site-primary-hue-saturation-light) 73%
  );
-
-  /* --ifm-breadcrumb-item-background-active: #333333; */
-  --ifm-breadcrumb-color-active: #ffffff;
 }

 .docusaurus-highlight-code-line {
@ -233,8 +233,10 @@ 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: #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");
 }

 :root[data-theme="dark"] {
@ -259,3 +261,38 @@ div[class^="announcementBar_"] {
 .font-jakarta {
  font-family: "Plus Jakarta Sans", sans-serif;
 }
+
+/* sidebar style */
+ul.menu__list > li > a.menu__link--active {
+  border-right: 1px solid var(--ifm-color-primary);
+}
+
+nav.menu {
+  padding-right: 0px;
+  scrollbar-gutter: auto;
+}
+
+.menu__link {
+  border-radius: 4px 0 0 4px;
+  --ifm-menu-color-background-active: var(--docs-color-primary-tint);
+}
+
+::selection {
+  --tw-text-opacity: 1;
+  background-color: rgb(var(--docs-color-primary-200, 33 96 253) / 0.8);
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+div[class^="announcementBar_"] {
+  font-size: 14px;
+  background: none;
+  background-color: #fafbfc;
+  padding: 8px 0;
+  display: flex;
+  justify-content: center;
+  font-weight: inherit;
+}
+div[class^="announcementBar_"] a {
+  text-decoration: underline;
+  color: #091e42;
+}
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@ -1,4 +1,5 @@
 import React from "react";
+import { useEffect } from "react";
 import clsx from "clsx";
 import Link from "@docusaurus/Link";
 // import Translate from "@docusaurus/Translate";
@ -43,6 +44,14 @@ 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}`}