From c8522939e986574aa41d2dfb4db6b9bc8057ee43 Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Wed, 3 Jan 2024 16:26:19 +0800 Subject: [PATCH 1/2] feat: update style --- src/ILLATheme/BlogTOC/index.tsx | 122 +++--- src/ILLATheme/CommonHeader/Menu/index.tsx | 2 +- .../SolutionsItem/index.module.css | 4 +- src/ILLATheme/TagList/index.tsx | 2 +- .../blog/FeaturedBlogPostItem/index.js | 4 +- src/components/blog/PostPage/index.js | 6 +- src/components/blog/PostPaginator/index.js | 4 +- src/components/blog/Tags/index.js | 2 +- .../common/LinkButton/index.module.css | 10 +- .../home/Content/AllContent/index.tsx | 7 +- src/components/home/Form/index.module.css | 4 +- src/theme/BlogPostItem/index.js | 4 +- src/theme/BlogPostItems/index.js | 2 +- src/theme/BlogTagsPostsPage/index.js | 55 ++- src/theme/Tag/index.js | 2 +- src/theme/TagsList/index.tsx | 148 +++---- static/img/home3/allContant/allContant.svg | 388 ------------------ tailwind.config.js | 296 +++++++------ 18 files changed, 330 insertions(+), 732 deletions(-) delete mode 100644 static/img/home3/allContant/allContant.svg diff --git a/src/ILLATheme/BlogTOC/index.tsx b/src/ILLATheme/BlogTOC/index.tsx index a4f7002816..546e1c54fb 100644 --- a/src/ILLATheme/BlogTOC/index.tsx +++ b/src/ILLATheme/BlogTOC/index.tsx @@ -1,7 +1,7 @@ -import React from 'react'; -import clsx from 'clsx'; -import { useLocation, useHistory } from '@docusaurus/router'; -import { Tags } from '@site/src/components/blog/Tags'; +import React from "react" +import clsx from "clsx" +import { useLocation, useHistory } from "@docusaurus/router" +import { Tags } from "@site/src/components/blog/Tags" export const BlogTOCItem = ({ id, @@ -10,89 +10,89 @@ export const BlogTOCItem = ({ activeId, onIdChange, }: { - id: string; - value: string; - level: number; - activeId: string; - onIdChange?: (id: string) => void; + id: string + value: string + level: number + activeId: string + onIdChange?: (id: string) => void }) => { React.useEffect(() => { - const targetElement = document.getElementById(id); + const targetElement = document.getElementById(id) if (targetElement) { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { - onIdChange(id); + onIdChange(id) } - }); + }) }, { - rootMargin: '0px 0px -80% 0px', + rootMargin: "0px 0px -80% 0px", }, - ); + ) - observer.observe(targetElement); + observer.observe(targetElement) return () => { - observer.unobserve(targetElement); - }; + observer.unobserve(targetElement) + } } - }, [id]); + }, [id]) return ( - ); -}; + ) +} export const BlogTOC = (props) => { - const history = useHistory(); - const location = useLocation(); - const { toc, hasTOC, activeId, setActiveId } = useTOC(props.toc); + const history = useHistory() + const location = useLocation() + const { toc, hasTOC, activeId, setActiveId } = useTOC(props.toc) const onIdChange = (id) => { - if (id !== `${location.hash ?? ''}`.replace('#', '')) { - setActiveId(id); - window.history.replaceState({}, '', `#${id}`); + if (id !== `${location.hash ?? ""}`.replace("#", "")) { + setActiveId(id) + window.history.replaceState({}, "", `#${id}`) } - }; + } return (
@@ -108,32 +108,32 @@ export const BlogTOC = (props) => { onIdChange={onIdChange} /> - ); + ) })}
- ); -}; + ) +} export const useTOC = (toc) => { - const { hash } = useLocation(); + const { hash } = useLocation() - const baseActiveId = `${hash}`.replace('#', ''); + const baseActiveId = `${hash}`.replace("#", "") const [activeId, setActiveId] = React.useState( baseActiveId, - ); + ) React.useEffect(() => { - setActiveId(baseActiveId); - }, [baseActiveId]); + setActiveId(baseActiveId) + }, [baseActiveId]) - const hasTOC = toc?.length > 0; + const hasTOC = toc?.length > 0 return { toc, activeId, setActiveId, hasTOC, - }; -}; + } +} diff --git a/src/ILLATheme/CommonHeader/Menu/index.tsx b/src/ILLATheme/CommonHeader/Menu/index.tsx index ae75d2ae7d..156c3b3026 100644 --- a/src/ILLATheme/CommonHeader/Menu/index.tsx +++ b/src/ILLATheme/CommonHeader/Menu/index.tsx @@ -84,7 +84,7 @@ export const HeaderMenu: FC = (props) => { className={clsx( style.panelItemContainerStyle, whiteTheme - ? "text-gray-02 hover:bg-garyBlue-09" + ? "text-gray-02 hover:bg-grayBlue-09" : "text-white-01 hover:bg-white-09", )} onClick={() => { diff --git a/src/ILLATheme/CommonHeader/SolutionsItem/index.module.css b/src/ILLATheme/CommonHeader/SolutionsItem/index.module.css index d57ccafd06..b77c40c090 100644 --- a/src/ILLATheme/CommonHeader/SolutionsItem/index.module.css +++ b/src/ILLATheme/CommonHeader/SolutionsItem/index.module.css @@ -11,7 +11,7 @@ } .lightPopoverPanelStyle { - @apply border-garyBlue-09 bg-white-01; + @apply border-grayBlue-09 bg-white-01; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08); } @@ -27,7 +27,7 @@ @apply hover:bg-white/[0.04]; } .lightPanelItemContainerStyle { - @apply hover:bg-garyBlue-09; + @apply hover:bg-grayBlue-09; } .panelItemStyle { diff --git a/src/ILLATheme/TagList/index.tsx b/src/ILLATheme/TagList/index.tsx index 6dc327c66e..3e3b94f6e2 100644 --- a/src/ILLATheme/TagList/index.tsx +++ b/src/ILLATheme/TagList/index.tsx @@ -88,7 +88,7 @@ const Desktop = ({ "no-underline hover:no-underline", "text-xs", "bg-gray-100 dark:bg-gray-600", - "text-gray-600 dark:text-gray-400", + "text-gray-600 dark:text-white-04", "rounded", "py-1", "px-2", diff --git a/src/components/blog/FeaturedBlogPostItem/index.js b/src/components/blog/FeaturedBlogPostItem/index.js index ff6aa24480..bca5b80199 100644 --- a/src/components/blog/FeaturedBlogPostItem/index.js +++ b/src/components/blog/FeaturedBlogPostItem/index.js @@ -46,7 +46,7 @@ export const FeaturedBlogPostItem = () => { className={clsx( "text-xs", "bg-gray-100 dark:bg-gray-700", - "text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-400", + "text-white-04 hover:text-white-01 dark:text-gray-400 dark:hover:text-gray-400", "no-underline", "rounded", "px-2 py-1", @@ -92,7 +92,7 @@ export const FeaturedBlogPostItem = () => { { > ← Back to blog
- Share on + Share on { className={clsx("flex", "justify-between", "sm:flex-row flex-col")} >
-
+
{typeof readingTime !== "undefined" && ( <> diff --git a/src/components/blog/PostPaginator/index.js b/src/components/blog/PostPaginator/index.js index 16ba7487b3..b882bc9575 100644 --- a/src/components/blog/PostPaginator/index.js +++ b/src/components/blog/PostPaginator/index.js @@ -53,14 +53,14 @@ export const PostPaginator = ({ posts, title }) => {

{post.description}

diff --git a/src/components/blog/Tags/index.js b/src/components/blog/Tags/index.js index 9450c37c03..8e884d4b57 100644 --- a/src/components/blog/Tags/index.js +++ b/src/components/blog/Tags/index.js @@ -15,7 +15,7 @@ export const Tags = () => { className={clsx( "text-xs", "bg-gray-100 dark:bg-gray-700", - "text-gray-600 dark:text-gray-400", + "text-gray-600 dark:text-white-04", "rounded", "py-1", "px-2", diff --git a/src/components/common/LinkButton/index.module.css b/src/components/common/LinkButton/index.module.css index 40e7ccbac5..d689619252 100644 --- a/src/components/common/LinkButton/index.module.css +++ b/src/components/common/LinkButton/index.module.css @@ -19,7 +19,7 @@ } .darkColorStyle { - @apply bg-garyBlue-01 text-white-01; + @apply bg-grayBlue-01 text-white-01; box-shadow: 0px 4px 8px 0px rgba(21, 21, 29, 0.45); } .darkColorStyle:hover { @@ -27,11 +27,11 @@ } .lightColorStyle { - @apply bg-white-01 text-garyBlue-01; + @apply bg-white-01 text-grayBlue-01; box-shadow: 0px 2px 24.8px 0px #6100ff; } .lightColorStyle:hover { - @apply text-garyBlue-01; + @apply text-grayBlue-01; } .baseArrowStyle { @@ -52,7 +52,7 @@ } .darkArrowStyle { - @apply text-garyBlue-01; + @apply text-grayBlue-01; background: linear-gradient(180deg, #d1ccf2 0%, #fff 100%); } @@ -80,7 +80,7 @@ } .lineStyle { - @apply w-[1px] h-full bg-garyBlue-01; + @apply w-[1px] h-full bg-grayBlue-01; } .darkLineStyle { diff --git a/src/components/home/Content/AllContent/index.tsx b/src/components/home/Content/AllContent/index.tsx index 5830003dc8..fc2f92ce3c 100644 --- a/src/components/home/Content/AllContent/index.tsx +++ b/src/components/home/Content/AllContent/index.tsx @@ -1,6 +1,5 @@ import style from "./index.module.css" import Translate from "@docusaurus/Translate" -import AllConstantIcon from "@site/static/img/home3/allContant/allContant.svg" const AllContent = () => { return (
@@ -9,7 +8,11 @@ const AllContent = () => { ILLA Cloud integrates everything - + ILLA Cloud integrates everything
) } diff --git a/src/components/home/Form/index.module.css b/src/components/home/Form/index.module.css index 9053fafdf8..713e9111cb 100644 --- a/src/components/home/Form/index.module.css +++ b/src/components/home/Form/index.module.css @@ -34,7 +34,7 @@ } .partnerContainer { @apply flex flex-col items-center text-white w-full h-screen bg-black z-[51] overflow-y-auto; - @apply xl:text-garyBlue-02 xl:w-[464px] xl:h-[538px] xl:absolute xl:rounded-[8px] xl:bg-white xl:top-0 xl:bottom-0 xl:right-0 xl:left-0 xl:m-auto; + @apply xl:text-grayBlue-02 xl:w-[464px] xl:h-[538px] xl:absolute xl:rounded-[8px] xl:bg-white xl:top-0 xl:bottom-0 xl:right-0 xl:left-0 xl:m-auto; } .partnerTitle { @apply h-[64px] font-[700] text-[24px] leading-[26px] flex items-center justify-between py-[17.5px] px-[20px]; @@ -47,7 +47,7 @@ } .bookContainer { @apply flex flex-col justify-center items-start text-white w-full h-screen bg-black z-[51] overflow-y-scroll; - @apply xl:text-garyBlue-02 flex-row xl:w-[744px] xl:h-[710px] xl:absolute xl:rounded-[16px] xl:overflow-hidden xl:bg-white xl:top-0 xl:bottom-0 xl:right-0 xl:left-0 xl:m-auto lg:items-center; + @apply xl:text-grayBlue-02 flex-row xl:w-[744px] xl:h-[710px] xl:absolute xl:rounded-[16px] xl:overflow-hidden xl:bg-white xl:top-0 xl:bottom-0 xl:right-0 xl:left-0 xl:m-auto lg:items-center; } .bookTitle { @apply h-[64px] font-[700] text-[24px] leading-[26px] flex items-center justify-between py-[17.5px] px-[20px]; diff --git a/src/theme/BlogPostItem/index.js b/src/theme/BlogPostItem/index.js index 4f99309542..8c895c8269 100644 --- a/src/theme/BlogPostItem/index.js +++ b/src/theme/BlogPostItem/index.js @@ -48,7 +48,7 @@ export default function BlogPostItem({ className }) { className={clsx( "text-xs", "bg-gray-100 dark:bg-gray-700", - "text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-400", + "text-white-04 hover:text-white-01 dark:text-gray-400 dark:hover:text-gray-400", "no-underline", "rounded", "px-2 py-1", @@ -93,7 +93,7 @@ export default function BlogPostItem({ className }) { diff --git a/src/theme/BlogTagsPostsPage/index.js b/src/theme/BlogTagsPostsPage/index.js index 900f2325f2..c254246e36 100644 --- a/src/theme/BlogTagsPostsPage/index.js +++ b/src/theme/BlogTagsPostsPage/index.js @@ -1,54 +1,54 @@ -import React from 'react'; -import clsx from 'clsx'; -import Translate, { translate } from '@docusaurus/Translate'; +import React from "react" +import clsx from "clsx" +import Translate, { translate } from "@docusaurus/Translate" import { PageMetadata, HtmlClassNameProvider, ThemeClassNames, usePluralForm, -} from '@docusaurus/theme-common'; -import BlogLayout from '@theme/BlogLayout'; -import BlogListPaginator from '@theme/BlogListPaginator'; -import SearchMetadata from '@theme/SearchMetadata'; -import BlogPostItems from '@theme/BlogPostItems'; -import TagsList from '@site/src/ILLATheme/TagList'; +} from "@docusaurus/theme-common" +import BlogLayout from "@theme/BlogLayout" +import BlogListPaginator from "@theme/BlogListPaginator" +import SearchMetadata from "@theme/SearchMetadata" +import BlogPostItems from "@theme/BlogPostItems" +import TagsList from "@site/src/ILLATheme/TagList" // Very simple pluralization: probably good enough for now function useBlogPostsPlural() { - const { selectMessage } = usePluralForm(); + const { selectMessage } = usePluralForm() return (count) => selectMessage( count, translate( { - id: 'theme.blog.post.plurals', + id: "theme.blog.post.plurals", description: 'Pluralized label for "{count} posts". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)', - message: 'One post|{count} posts', + message: "One post|{count} posts", }, { count }, ), - ); + ) } function useBlogTagsPostsPageTitle(tag) { - const blogPostsPlural = useBlogPostsPlural(); + const blogPostsPlural = useBlogPostsPlural() return translate( { - id: 'theme.blog.tagTitle', - description: 'The title of the page for a blog tag', + id: "theme.blog.tagTitle", + description: "The title of the page for a blog tag", message: '{nPosts} tagged with "{tagName}"', }, { nPosts: blogPostsPlural(tag.count), tagName: tag.label }, - ); + ) } function BlogTagsPostsPageMetadata({ tag }) { - const title = useBlogTagsPostsPageTitle(tag); + const title = useBlogTagsPostsPageTitle(tag) return ( <> - ); + ) } function BlogTagsPostsPageContent({ tags, tag, items, sidebar, listMetadata }) { return ( @@ -69,18 +69,14 @@ function BlogTagsPostsPageContent({ tags, tag, items, sidebar, listMetadata }) { >
-
- +
+ Posts tagged with

{tag.label}

- +
- ); + ) } export default function BlogTagsPostsPage(props) { return ( @@ -97,9 +93,10 @@ export default function BlogTagsPostsPage(props) { className={clsx( ThemeClassNames.wrapper.blogPages, ThemeClassNames.page.blogTagPostListPage, - )}> + )} + > - ); + ) } diff --git a/src/theme/Tag/index.js b/src/theme/Tag/index.js index 082ad34299..354e066a83 100644 --- a/src/theme/Tag/index.js +++ b/src/theme/Tag/index.js @@ -13,7 +13,7 @@ export default function Tag({ permalink, label, isActive, className }) { "no-underline hover:no-underline", "text-xs", !isActive && "bg-gray-100 dark:bg-gray-700", - !isActive && "text-gray-600 dark:text-gray-400", + !isActive && "text-gray-600 dark:text-white-04", "rounded", "py-1", "px-2", diff --git a/src/theme/TagsList/index.tsx b/src/theme/TagsList/index.tsx index 697143f5df..c0ffb05fbe 100644 --- a/src/theme/TagsList/index.tsx +++ b/src/theme/TagsList/index.tsx @@ -1,8 +1,8 @@ -import React from 'react'; -import Tag from '@theme/Tag'; -import { titleCase } from 'title-case'; -import clsx from 'clsx'; -import { Disclosure, Transition } from '@headlessui/react'; +import React from "react" +import Tag from "@theme/Tag" +import { titleCase } from "title-case" +import clsx from "clsx" +import { Disclosure, Transition } from "@headlessui/react" const ChevronDownIcon = () => ( ( fill="currentColor" /> -); +) const mapLabel = (label) => { // remove `-` - label = label.replace(/-/g, ' '); + label = label.replace(/-/g, " ") // replace const replace = [ - ['typescript', 'TypeScript'], - ['javascript', 'JavaScript'], - ['chakra ui', 'Chakra UI'], - ['material ui', 'Material UI'], - ['nextjs', 'Next.js'], - ['nestjs', 'NestJS'], - ['css', 'CSS'], - ]; + ["typescript", "TypeScript"], + ["javascript", "JavaScript"], + ["chakra ui", "Chakra UI"], + ["material ui", "Material UI"], + ["nextjs", "Next.js"], + ["nestjs", "NestJS"], + ["css", "CSS"], + ] replace.forEach((element) => { - label = label.replace(element[0], element[1]); - }); + label = label.replace(element[0], element[1]) + }) // title case - return titleCase(label); -}; + return titleCase(label) +} const Desktop = ({ tags, collapsed, onShowMoreClick, }: { - tags: any; - collapsed: boolean; - onShowMoreClick: (collapsed: boolean) => void; + tags: any + collapsed: boolean + onShowMoreClick: (collapsed: boolean) => void }) => { return (
    {tags.map((tag) => ( -
  • +
    • ))} @@ -80,26 +80,26 @@ const Desktop = ({
- ); -}; + ) +} const Mobile = ({ tags }: { tags: any }) => { return ( @@ -108,17 +108,17 @@ const Mobile = ({ tags }: { tags: any }) => { {({ open }) => (
{/* { )} /> */} Blog Post Tags @@ -148,7 +148,7 @@ const Mobile = ({ tags }: { tags: any }) => { >
    { > {tags.map((tag) => (
  • @@ -169,33 +169,33 @@ const Mobile = ({ tags }: { tags: any }) => { )}
- ); -}; + ) +} export default function TagsList({ tags }) { - const [collapsed, setCollapsed] = React.useState(true); + const [collapsed, setCollapsed] = React.useState(true) const priorityTags = [ - 'refine', - 'react', - 'nextjs', - 'typescript', - 'tutorial', - 'material-ui', - 'ant-design', - 'docker', - 'comparison', - ]; + "refine", + "react", + "nextjs", + "typescript", + "tutorial", + "material-ui", + "ant-design", + "docker", + "comparison", + ] const sortedTags = (tags ?? []).sort((a, b) => { - const aIndex = priorityTags.indexOf(a.label); - const bIndex = priorityTags.indexOf(b.label); + const aIndex = priorityTags.indexOf(a.label) + const bIndex = priorityTags.indexOf(b.label) if (aIndex === -1) { - return bIndex === -1 ? 0 : 1; + return bIndex === -1 ? 0 : 1 } else { - return bIndex === -1 ? -1 : aIndex - bIndex; + return bIndex === -1 ? -1 : aIndex - bIndex } - }); + }) return ( <> @@ -206,5 +206,5 @@ export default function TagsList({ tags }) { /> - ); + ) } diff --git a/static/img/home3/allContant/allContant.svg b/static/img/home3/allContant/allContant.svg deleted file mode 100644 index 134f50fad2..0000000000 --- a/static/img/home3/allContant/allContant.svg +++ /dev/null @@ -1,388 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 738684e6e0..89f46e4abc 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,5 @@ -const defaultTheme = require("tailwindcss/defaultTheme"); -const plugin = require("tailwindcss/plugin"); +const defaultTheme = require("tailwindcss/defaultTheme") +const plugin = require("tailwindcss/plugin") /** @type {import('tailwindcss').Config} */ module.exports = { @@ -63,124 +63,124 @@ module.exports = { 1000: "#000000", }, - 'white-01': '#ffffffff', - 'white-02': '#ffffffe6', - 'white-03': '#ffffffc0', - 'white-04': '#ffffff80', - 'white-05': '#ffffff4c', - 'white-06': '#fff3', - 'white-07': '#ffffff28', - 'white-08': '#ffffff1e', - 'white-09': '#ffffff19', + "white-01": "#ffffffff", + "white-02": "#ffffffe6", + "white-03": "#ffffffc0", + "white-04": "#ffffff80", + "white-05": "#ffffff4c", + "white-06": "#fff3", + "white-07": "#ffffff28", + "white-08": "#ffffff1e", + "white-09": "#ffffff19", - 'gray-01': '#000000ff', - 'gray-02': '#1f1f1fff', - 'gray-03': '#5c5c5cff', - 'gray-04': '#999999ff', - 'gray-05': '#c2c2c2ff', - 'gray-06': '#d6d6d6ff', - 'gray-07': '#e0e0e0ff', - 'gray-08': '#ebebebff', - 'gray-09': '#f5f5f5ff', + "gray-01": "#000000ff", + "gray-02": "#1f1f1fff", + "gray-03": "#5c5c5cff", + "gray-04": "#999999ff", + "gray-05": "#c2c2c2ff", + "gray-06": "#d6d6d6ff", + "gray-07": "#e0e0e0ff", + "gray-08": "#ebebebff", + "gray-09": "#f5f5f5ff", - 'garyBlue-01': '#0b0c0fff', - 'garyBlue-02': '#1d2129ff', - 'garyBlue-03': '#787e85ff', - 'garyBlue-04': '#a9aeb8ff', - 'garyBlue-05': '#bbc0c9ff', - 'garyBlue-06': '#c9cdd4ff', - 'garyBlue-07': '#dadee5ff', - 'garyBlue-08': '#e5e6ebff', - 'garyBlue-09': '#f2f3f5ff', + "grayBlue-01": "#0b0c0fff", + "grayBlue-02": "#1d2129ff", + "grayBlue-03": "#787e85ff", + "grayBlue-04": "#a9aeb8ff", + "grayBlue-05": "#bbc0c9ff", + "grayBlue-06": "#c9cdd4ff", + "grayBlue-07": "#dadee5ff", + "grayBlue-08": "#e5e6ebff", + "grayBlue-09": "#f2f3f5ff", - 'tech-purple-n-01': '#100974', - 'tech-purple-01': '#26189c', - 'tech-purple-02': '#422ec4', - 'tech-purple-03': '#654aec', - 'tech-purple-04': '#8368f0', - 'tech-purple-05': '#a087f4', - 'tech-purple-06': '#bca6f7', - 'tech-purple-07': '#d6c7fb', - 'tech-purple-08': '#f0e8ff', + "tech-purple-n-01": "#100974", + "tech-purple-01": "#26189c", + "tech-purple-02": "#422ec4", + "tech-purple-03": "#654aec", + "tech-purple-04": "#8368f0", + "tech-purple-05": "#a087f4", + "tech-purple-06": "#bca6f7", + "tech-purple-07": "#d6c7fb", + "tech-purple-08": "#f0e8ff", - 'tech-pink-n-01': '#790a5a', - 'tech-pink-01': '#a61d7a', - 'tech-pink-02': '#d2369c', - 'tech-pink-03': '#ff58be', - 'tech-pink-04': '#ff75c5', - 'tech-pink-05': '#ff92ce', - 'tech-pink-06': '#ffaed8', - 'tech-pink-07': '#ffcbe4', - 'tech-pink-08': '#ffe8f2', + "tech-pink-n-01": "#790a5a", + "tech-pink-01": "#a61d7a", + "tech-pink-02": "#d2369c", + "tech-pink-03": "#ff58be", + "tech-pink-04": "#ff75c5", + "tech-pink-05": "#ff92ce", + "tech-pink-06": "#ffaed8", + "tech-pink-07": "#ffcbe4", + "tech-pink-08": "#ffe8f2", - 'blackAlpha-01': 'rgba(0, 0, 0, 0.88)', - 'blackAlpha-02': 'rgba(0, 0, 0, 0.64)', - 'blackAlpha-03': 'rgba(0, 0, 0, 0.4)', - 'blackAlpha-04': 'rgba(0, 0, 0, 0.24)', - 'blackAlpha-06': 'rgba(0, 0, 0, 0.12)', - 'blackAlpha-05': 'rgba(0, 0, 0, 0.16)', - 'blackAlpha-07': 'rgba(0, 0, 0, 0.08)', - 'blackAlpha-08': 'rgba(0, 0, 0, 0.04)', + "blackAlpha-01": "rgba(0, 0, 0, 0.88)", + "blackAlpha-02": "rgba(0, 0, 0, 0.64)", + "blackAlpha-03": "rgba(0, 0, 0, 0.4)", + "blackAlpha-04": "rgba(0, 0, 0, 0.24)", + "blackAlpha-06": "rgba(0, 0, 0, 0.12)", + "blackAlpha-05": "rgba(0, 0, 0, 0.16)", + "blackAlpha-07": "rgba(0, 0, 0, 0.08)", + "blackAlpha-08": "rgba(0, 0, 0, 0.04)", - 'blue-n-01': '#042379', - 'blue-01': '#0a39a6', - 'blue-02': '#1353d2', - 'blue-03': '#1e6fff', - 'blue-04': '#4690ff', - 'blue-05': '#6aa1ff', - 'blue-06': '#94bfff', - 'blue-07': '#bedaff', - 'blue-08': '#e8f4ff', + "blue-n-01": "#042379", + "blue-01": "#0a39a6", + "blue-02": "#1353d2", + "blue-03": "#1e6fff", + "blue-04": "#4690ff", + "blue-05": "#6aa1ff", + "blue-06": "#94bfff", + "blue-07": "#bedaff", + "blue-08": "#e8f4ff", - 'purple-n-01': '#2a0874', - 'purple-01': '#44159b', - 'purple-02': '#6227c3', - 'purple-03': '#863eea', - 'purple-04': '#9f5eee', - 'purple-05': '#b77ff2', - 'purple-06': '#cda1f7', - 'purple-07': '#e2c4fb', - 'purple-08': '#f5e8ff', + "purple-n-01": "#2a0874", + "purple-01": "#44159b", + "purple-02": "#6227c3", + "purple-03": "#863eea", + "purple-04": "#9f5eee", + "purple-05": "#b77ff2", + "purple-06": "#cda1f7", + "purple-07": "#e2c4fb", + "purple-08": "#f5e8ff", - 'red-n-01': '#770813', - 'red-01': '#a1151e', - 'red-02': '#cb272d', - 'red-03': '#f53f3f', - 'red-04': '#f76560', - 'red-05': '#f98981', - 'red-06': '#fbaca3', - 'red-07': '#fdcdc5', - 'red-08': '#ffece8', + "red-n-01": "#770813", + "red-01": "#a1151e", + "red-02": "#cb272d", + "red-03": "#f53f3f", + "red-04": "#f76560", + "red-05": "#f98981", + "red-06": "#fbaca3", + "red-07": "#fdcdc5", + "red-08": "#ffece8", - 'green-n-01': '#02672d', - 'green-01': '#048136', - 'green-02': '#079c3e', - 'green-03': '#0bb645', - 'green-04': '#2dc55b', - 'green-05': '#55d376', - 'green-06': '#81e297', - 'green-07': '#b2f0be', + "green-n-01": "#02672d", + "green-01": "#048136", + "green-02": "#079c3e", + "green-03": "#0bb645", + "green-04": "#2dc55b", + "green-05": "#55d376", + "green-06": "#81e297", + "green-07": "#b2f0be", "green-08": "#e8ffec", - 'yellow-n-01': '#795d00', - 'yellow-01': '#a68501', - 'yellow-02': '#d2b002', - 'yellow-03': '#f8b804', - 'yellow-04': '#ffea32', - 'yellow-05': '#fff45f', - 'yellow-06': '#fffb8d', - 'yellow-07': '#ffffba', - 'yellow-08': '#fdffd6', + "yellow-n-01": "#795d00", + "yellow-01": "#a68501", + "yellow-02": "#d2b002", + "yellow-03": "#f8b804", + "yellow-04": "#ffea32", + "yellow-05": "#fff45f", + "yellow-06": "#fffb8d", + "yellow-07": "#ffffba", + "yellow-08": "#fdffd6", - 'orange-n-01': '#792e00', - 'orange-01': '#a64500', - 'orange-02': '#d25f00', - 'orange-03': '#ff7d00', - 'orange-04': '#ff9a2e', - 'orange-05': '#ffb65d', - 'orange-06': '#ffcf8b', - 'orange-07': '#ffe4ba', - 'orange-08': '#fff7e8', + "orange-n-01": "#792e00", + "orange-01": "#a64500", + "orange-02": "#d25f00", + "orange-03": "#ff7d00", + "orange-04": "#ff9a2e", + "orange-05": "#ffb65d", + "orange-06": "#ffcf8b", + "orange-07": "#ffe4ba", + "orange-08": "#fff7e8", "cyan-n-01": "#045677", "cyan-01": "#0c7ca1", @@ -196,38 +196,32 @@ module.exports = { "brand-02": "#ff58beff", }, fontSize: { - xs: '.75rem', - sm: '.875rem', - tiny: '.875rem', - base: '1rem', - lg: '1.125rem', - xl: '1.25rem', - '2xl': '1.5rem', - '3xl': '1.875rem', - '4xl': '2.25rem', - '5xl': '3rem', - '6xl': '5rem', - '7xl': '7rem', - title: '2.5rem', - titleWeb: '5rem', + xs: ".75rem", + sm: ".875rem", + tiny: ".875rem", + base: "1rem", + lg: "1.125rem", + xl: "1.25rem", + "2xl": "1.5rem", + "3xl": "1.875rem", + "4xl": "2.25rem", + "5xl": "3rem", + "6xl": "5rem", + "7xl": "7rem", + title: "2.5rem", + titleWeb: "5rem", }, fontFamily: { - sans: [ - "var(--primary-font-sans)", - ...defaultTheme.fontFamily.sans, - ], + sans: ["var(--primary-font-sans)", ...defaultTheme.fontFamily.sans], mono: ["Source Code Pro", ...defaultTheme.fontFamily.mono], montserrat: ["Montserrat", ...defaultTheme.fontFamily.serif], disket: ["Disket Mono", ...defaultTheme.fontFamily.mono], inter: ["Inter", ...defaultTheme.fontFamily.serif], - "jetBrains-mono": [ - "JetBrains Mono", - ...defaultTheme.fontFamily.mono, - ], - source: ['Source Sans Pro', ...defaultTheme.fontFamily.sans], - 'ubuntu-mono': ['Ubuntu Mono', ...defaultTheme.fontFamily.mono], - eurostile: ['Eurostile Becker', ...defaultTheme.fontFamily.sans], - jetBrains: ['JetBrains Mono', ...defaultTheme.fontFamily.sans], + "jetBrains-mono": ["JetBrains Mono", ...defaultTheme.fontFamily.mono], + source: ["Source Sans Pro", ...defaultTheme.fontFamily.sans], + "ubuntu-mono": ["Ubuntu Mono", ...defaultTheme.fontFamily.mono], + eurostile: ["Eurostile Becker", ...defaultTheme.fontFamily.sans], + jetBrains: ["JetBrains Mono", ...defaultTheme.fontFamily.sans], }, dropShadow: { "showcase-highlight": [ @@ -271,10 +265,8 @@ module.exports = { "header-blur": "12px", }, backgroundPosition: { - "landing-wizard-option-right": - "top -350px right -350px, center", - "landing-wizard-option-left": - "bottom -350px left -350px, center", + "landing-wizard-option-right": "top -350px right -350px, center", + "landing-wizard-option-left": "bottom -350px left -350px, center", "landing-wizard-side-left-position": "center left", "landing-wizard-side-right-position": "center right", "landing-sweet-spot-glow-position-lg": @@ -296,18 +288,15 @@ module.exports = { animation: { "spin-slow": "spin 3s linear infinite", beat: "2s ease-in-out 1.5s infinite normal forwards running landing-hero-beat", - "playground-slide-down": - "playground-slide-down 45s linear infinite", + "playground-slide-down": "playground-slide-down 45s linear infinite", "playground-slide-down-mobile": "playground-slide-down-mobile 45s linear infinite", - "playground-slide-up": - "playground-slide-up 45s linear infinite", + "playground-slide-up": "playground-slide-up 45s linear infinite", "playground-slide-up-mobile": "playground-slide-up-mobile 45s linear infinite", "hackathon-button-bg": "hackathon-button-bg 2s ease-in-out infinite alternate", - "walkthrough-bounce": - "walkthrough-bounce 3s ease-in-out infinite", + "walkthrough-bounce": "walkthrough-bounce 3s ease-in-out infinite", "top-announcement-glow": "top-announcement-glow 1s ease-in-out infinite alternate", "landing-hero-grid-beats": @@ -315,10 +304,8 @@ module.exports = { "hero-logo-pulse": "hero-logo-pulse 4s ease-in-out infinite", "mini-bounce": "mini-bounce 3s ease-in-out infinite", "dot-waves": "dot-waves 2.5s linear infinite", - "landing-packages-left": - "landing-packages-left 65s linear infinite", - "landing-packages-right": - "landing-packages-right 60s linear infinite", + "landing-packages-left": "landing-packages-left 65s linear infinite", + "landing-packages-right": "landing-packages-right 60s linear infinite", "code-scroll": "code-scroll 25s linear infinite", "beam-spin": "beam-spin 3s linear 1 forwards", "landing-hero-beam-line": @@ -335,8 +322,7 @@ module.exports = { "showcase-reveal": "showcase-reveal 0.3s ease-in-out forwards", "github-stars-border": "github-stars-border 10s linear infinite alternate", - "github-stars-glow": - "github-stars-glow 10s linear infinite alternate", + "github-stars-glow": "github-stars-glow 10s linear infinite alternate", "enterprise-iam-services-left": "enterprise-iam-services-left 40s linear infinite", "enterprise-iam-services-right": @@ -666,18 +652,18 @@ module.exports = { "blog-xl": "1440px", "blog-2xl": "1584px", walkthrough: "976px", - 'sm': "640px", - 'lg': "960px", - "xl": "1440px", + sm: "640px", + lg: "960px", + xl: "1440px", }, }, plugins: [ require("@tailwindcss/typography"), plugin(({ addVariant }) => { - addVariant("light", `[data-theme="light"] &`); + addVariant("light", `[data-theme="light"] &`) }), ], corePlugins: { // preflight: false, }, -}; +} From bf5651c8318301e096f4249963b60e666923fbdb Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Wed, 3 Jan 2024 16:55:45 +0800 Subject: [PATCH 2/2] feat: update style --- src/ILLATheme/CommonFooter/FooterItem/index.tsx | 14 ++++++++++++-- src/ILLATheme/CommonFooter/constants.tsx | 12 ++++++------ src/ILLATheme/CommonFooter/index.tsx | 15 ++++++--------- .../SolutionLayout/FirstScreen/index.tsx | 4 ++-- src/ILLATheme/TagList/index.tsx | 2 +- src/components/blog/FeaturedBlogPostItem/index.js | 2 +- src/components/blog/Tags/index.js | 2 +- src/constants/url.ts | 2 ++ src/theme/BlogPostItem/index.js | 2 +- src/theme/BlogPostItems/index.js | 2 +- src/theme/Tag/index.js | 5 +++-- 11 files changed, 36 insertions(+), 26 deletions(-) diff --git a/src/ILLATheme/CommonFooter/FooterItem/index.tsx b/src/ILLATheme/CommonFooter/FooterItem/index.tsx index 7b8412a9ab..3f1449a8a8 100644 --- a/src/ILLATheme/CommonFooter/FooterItem/index.tsx +++ b/src/ILLATheme/CommonFooter/FooterItem/index.tsx @@ -4,9 +4,11 @@ import style from "../index.module.css" import clsx from "clsx" import Link from "@docusaurus/Link" import Translate from "@docusaurus/Translate" +import { useUtmParams } from "@site/src/hooks/useUtmParams" export const FooterItems = ({ items, whiteTheme }) => { const [showMore, setShowMore] = useState(false) + const getUtmParams = useUtmParams() const handleShowMore = () => { setShowMore(!showMore) @@ -21,7 +23,11 @@ export const FooterItems = ({ items, whiteTheme }) => { return ( <> {items.slice(0, 6).map(({ label, href = "", tagCategory }) => ( - + { ))} {showMore && items.slice(6).map(({ label, href = "", tagCategory }) => ( - + = ({ whiteTheme = false, @@ -27,6 +29,7 @@ const CommonFooter: FC = ({ }) }, []) useElementFirstShow(ref, reportShow) + const getUtmParams = useUtmParams() const { scrollYProgress } = useScroll() const translateY = useTransform( @@ -86,7 +89,7 @@ const CommonFooter: FC = ({ return ( {icon ? ( @@ -171,10 +174,7 @@ const CommonFooter: FC = ({ )} />
- + = ({ Privacy policy - + = ({ const containerRef = useRef(null) const { scrollYProgress } = useScroll() - const rotateX = useTransform(scrollYProgress, [0, 0.002], [10, 0]) - const scale = useTransform(scrollYProgress, [0, 0.002], [0.95, 1]) + const rotateX = useTransform(scrollYProgress, [0, 0.015], [15, 0]) + const scale = useTransform(scrollYProgress, [0, 0.015], [0.95, 1]) usePaintBg(canvasRef, containerRef) diff --git a/src/ILLATheme/TagList/index.tsx b/src/ILLATheme/TagList/index.tsx index 3e3b94f6e2..fcf866d2a2 100644 --- a/src/ILLATheme/TagList/index.tsx +++ b/src/ILLATheme/TagList/index.tsx @@ -88,7 +88,7 @@ const Desktop = ({ "no-underline hover:no-underline", "text-xs", "bg-gray-100 dark:bg-gray-600", - "text-gray-600 dark:text-white-04", + "text-gray-600 dark:text-white-04 dark:hover:text-white-01", "rounded", "py-1", "px-2", diff --git a/src/components/blog/FeaturedBlogPostItem/index.js b/src/components/blog/FeaturedBlogPostItem/index.js index bca5b80199..eb46904cbe 100644 --- a/src/components/blog/FeaturedBlogPostItem/index.js +++ b/src/components/blog/FeaturedBlogPostItem/index.js @@ -46,7 +46,7 @@ export const FeaturedBlogPostItem = () => { className={clsx( "text-xs", "bg-gray-100 dark:bg-gray-700", - "text-white-04 hover:text-white-01 dark:text-gray-400 dark:hover:text-gray-400", + "text-white-04 hover:text-white-01 dark:text-white-04", "no-underline", "rounded", "px-2 py-1", diff --git a/src/components/blog/Tags/index.js b/src/components/blog/Tags/index.js index 8e884d4b57..8dc0ac7e4b 100644 --- a/src/components/blog/Tags/index.js +++ b/src/components/blog/Tags/index.js @@ -15,7 +15,7 @@ export const Tags = () => { className={clsx( "text-xs", "bg-gray-100 dark:bg-gray-700", - "text-gray-600 dark:text-white-04", + "text-gray-600 dark:text-white-04 dark:hover:text-white-01", "rounded", "py-1", "px-2", diff --git a/src/constants/url.ts b/src/constants/url.ts index 4dec98cfea..f556b0fa79 100644 --- a/src/constants/url.ts +++ b/src/constants/url.ts @@ -2,3 +2,5 @@ export const CLOUD_URL = "https://cloud.illacloud.com" export const MARKET_URL = "https://illa.ai" export const OAUTH_URL = "https://cloud.illacloud.com/oauth" export const DEMO_BASE_URL = "https://illa.ai/app" +export const POLICY = "https://docs.illacloud.com/privacy-policy" +export const SERVICE = "https://docs.illacloud.com/terms-of-service" diff --git a/src/theme/BlogPostItem/index.js b/src/theme/BlogPostItem/index.js index 8c895c8269..a1f4f85aa5 100644 --- a/src/theme/BlogPostItem/index.js +++ b/src/theme/BlogPostItem/index.js @@ -48,7 +48,7 @@ export default function BlogPostItem({ className }) { className={clsx( "text-xs", "bg-gray-100 dark:bg-gray-700", - "text-white-04 hover:text-white-01 dark:text-gray-400 dark:hover:text-gray-400", + "text-white-04 hover:text-white-01 dark:text-white-04 dark:hover:text-white-01", "no-underline", "rounded", "px-2 py-1", diff --git a/src/theme/BlogPostItems/index.js b/src/theme/BlogPostItems/index.js index c63c99695f..05620e5087 100644 --- a/src/theme/BlogPostItems/index.js +++ b/src/theme/BlogPostItems/index.js @@ -56,7 +56,7 @@ export default function BlogPostItems({ "text-sm blog-md:text-base blog-lg:text-xl", "blog-md:max-w-[624px]", "mt-6 lg:mt-0", - "text-gray-500 dark:text-white-04", + "text-gray-500 dark:text-gray-200", )} > diff --git a/src/theme/Tag/index.js b/src/theme/Tag/index.js index 354e066a83..a761daeb19 100644 --- a/src/theme/Tag/index.js +++ b/src/theme/Tag/index.js @@ -13,12 +13,13 @@ export default function Tag({ permalink, label, isActive, className }) { "no-underline hover:no-underline", "text-xs", !isActive && "bg-gray-100 dark:bg-gray-700", - !isActive && "text-gray-600 dark:text-white-04", + !isActive && + "text-gray-600 dark:text-white-04 dark:hover:text-white-01", "rounded", "py-1", "px-2", isActive && "bg-gray-200 text-gray-500", - isActive && "dark-bg-gray-700 text-gray-300", + isActive && "dark-bg-gray-700 dark:text-white-01", className, )} >