From 37287fe656133be17b8d78a3c5e4001d6490e869 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Tue, 12 Dec 2023 12:39:19 +0330 Subject: [PATCH 01/18] chore: upgrade @acid-info/lsd-react --- packages/logos-docusaurus-theme/package.json | 2 +- .../CallToActionSection/CallToActionSection.scss | 6 +++--- .../components/mdx/FeatureList/FeatureList.tsx | 4 ++-- .../mdx/GithubChallenges/SingleGithubChallenge.tsx | 2 +- .../mdx/JobsPerDepartment/SingleDepartmentJobs.tsx | 2 +- .../components/mdx/ProfileCard/ProfileCard.scss | 2 +- .../src/client/components/mdx/Roadmap/Roadmap.tsx | 2 +- .../components/mdx/SectionHeader/SectionHeader.tsx | 2 +- .../components/mdx/ShowcaseCard/ShowcaseCard.scss | 2 +- .../components/mdx/TimelineItem/TimelineItem.tsx | 2 +- .../logos-docusaurus-theme/src/client/css/blog.scss | 4 ++-- .../theme/BlogPostItem/Header/Subtitle/index.tsx | 2 +- yarn.lock | 13 +++++++++++++ 13 files changed, 29 insertions(+), 16 deletions(-) diff --git a/packages/logos-docusaurus-theme/package.json b/packages/logos-docusaurus-theme/package.json index 23d677c..0b58fc7 100644 --- a/packages/logos-docusaurus-theme/package.json +++ b/packages/logos-docusaurus-theme/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@acid-info/docusaurus-og": "^1.0.0-alpha.111", - "@acid-info/lsd-react": "^0.1.0-alpha.21", + "@acid-info/lsd-react": "^0.1.0-beta.1", "@docusaurus/core": "^2.4.1", "@docusaurus/mdx-loader": "^2.4.1", "@docusaurus/module-type-aliases": "^2.4.1", diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss index a4c8cb8..7da6590 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss @@ -41,7 +41,7 @@ } .mdx-cta-section__title { - @include lsd.typography('h6', false); + @include lsd.typography('h5', false); } .mdx-cta-section__description { @@ -65,7 +65,7 @@ .mdx-cta-section--simple { .mdx-cta-section__title { - @include lsd.typography('h6', false); + @include lsd.typography('h5', false); } .mdx-cta-section__description { @@ -91,7 +91,7 @@ } .mdx-cta-section__title { - @include lsd.typography('h6', false); + @include lsd.typography('h5', false); } .mdx-cta-section__description { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx index cf0cf4e..7674c72 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx @@ -66,7 +66,7 @@ export const FeatureList: React.FC = ({ {...props} > @@ -91,7 +91,7 @@ export const FeatureList: React.FC = ({ {feature.title} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/GithubChallenges/SingleGithubChallenge.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/GithubChallenges/SingleGithubChallenge.tsx index f53c8af..6e8d6b6 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/GithubChallenges/SingleGithubChallenge.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/GithubChallenges/SingleGithubChallenge.tsx @@ -104,7 +104,7 @@ export const SingleGithubChallenge: React.FC = ({ return (
- + {issue.title} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/JobsPerDepartment/SingleDepartmentJobs.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/JobsPerDepartment/SingleDepartmentJobs.tsx index 94aa981..6fccd62 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/JobsPerDepartment/SingleDepartmentJobs.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/JobsPerDepartment/SingleDepartmentJobs.tsx @@ -30,7 +30,7 @@ export const SingleDepartmentJobs: React.FC = ({ className="mdx-jpd__job-link" >
- + {job.title} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss index cefd173..3d9a8e0 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss @@ -103,6 +103,6 @@ } .mdx-profile-card__name { - @include lsd.typography('h6'); + @include lsd.typography('h5'); } } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx index 95921f7..48ead56 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx @@ -73,7 +73,7 @@ export const Roadmap: React.FC = ({ return (
- + {title} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx index 93a04b8..79d8d1f 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx @@ -21,7 +21,7 @@ export const SectionHeader: React.FC = ({ {title} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss index 408ab2c..4438a7f 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss @@ -29,7 +29,7 @@ } .mdx-showcase-card__name { - @include lsd.typography('h6'); + @include lsd.typography('h5'); } .mdx-showcase-card__description { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx index c19f8af..e886b50 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx @@ -130,7 +130,7 @@ export const TimelineItem: React.FC = ({
diff --git a/packages/logos-docusaurus-theme/src/client/css/blog.scss b/packages/logos-docusaurus-theme/src/client/css/blog.scss index bdde895..f03b960 100644 --- a/packages/logos-docusaurus-theme/src/client/css/blog.scss +++ b/packages/logos-docusaurus-theme/src/client/css/blog.scss @@ -62,7 +62,7 @@ } .blog-wrapper--index h2[itemprop='headline'] { - @include lsd.typography('h6'); + @include lsd.typography('h5'); > a { text-decoration: none; @@ -210,7 +210,7 @@ margin: 0 !important; h3 { - @include lsd.typography('h6'); + @include lsd.typography('h5'); } a { diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/index.tsx index a3798b4..10c8cff 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/index.tsx @@ -9,7 +9,7 @@ type SubtitleProps = { export const Subtitle = ({ content }: SubtitleProps): JSX.Element => { return ( - + {content} ) diff --git a/yarn.lock b/yarn.lock index 96436ca..90bacdd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -62,6 +62,19 @@ react-hot-toast "^2.4.1" react-use "^17.4.0" +"@acid-info/lsd-react@^0.1.0-beta.1": + version "0.1.0-beta.1" + resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-beta.1.tgz#a6d8dc04a3422a1a840d032fc1d1730f4cc34e29" + integrity sha512-YletiehVgoXmMhIH03u67Dxg8ZiFNrGhEsvN9/+jCTnOaBQxf0/JgS7kqBeZUlqK88prU6P/QzZruiWsxVFKgA== + dependencies: + "@datepicker-react/hooks" "^2.8.4" + "@emotion/react" "^11.10.5" + "@emotion/styled" "^11.10.5" + clsx "^1.2.1" + lodash "^4.17.21" + react-hot-toast "^2.4.1" + react-use "^17.4.0" + "@algolia/autocomplete-core@1.8.2": version "1.8.2" resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.8.2.tgz#8d758c8652742e2761450d2b615a841fca24e10e" From 28c7a24605108b94a92568f039a9815d0318e56c Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Tue, 12 Dec 2023 15:31:06 +0330 Subject: [PATCH 02/18] fix: adjust typography styles --- .../src/client/components/mdx/ColorCard/ColorCard.tsx | 2 +- .../src/client/components/mdx/AssetCard/AssetCard.tsx | 2 +- .../src/client/components/mdx/PageCard/PageCard.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/ColorCard.tsx b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/ColorCard.tsx index 325fa18..212145c 100644 --- a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/ColorCard.tsx +++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/ColorCard.tsx @@ -36,7 +36,7 @@ export const ColorCard: React.FC = ({
{title} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.tsx index 3279f60..924ed66 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.tsx @@ -101,7 +101,7 @@ export const AssetCard: React.FC = ({ {title && ( {title} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/PageCard/PageCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/PageCard/PageCard.tsx index d5daf00..582353a 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/PageCard/PageCard.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/PageCard/PageCard.tsx @@ -51,7 +51,7 @@ export const PageCard: React.FC = ({ {description} From 09a438829fbecb4fbee46c3c3e790925e653b1a1 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Tue, 12 Dec 2023 20:45:14 +0330 Subject: [PATCH 03/18] fix(logos-docusaurus-theme): update typography styles Updated components: CallToActionSection, FeatureList, HeroDescription, ShowcaseCard, and NewsletterSubscription --- .../CallToActionSection.scss | 26 ++++++++++++++----- .../CallToActionSection.tsx | 9 ++++--- .../mdx/FeatureList/FeatureList.scss | 6 ++--- .../mdx/FeatureList/FeatureList.tsx | 2 +- .../mdx/HeroDescription/HeroDescription.tsx | 2 +- .../NewsletterSubscription.scss | 6 ++--- .../mdx/ShowcaseCard/ShowcaseCard.scss | 3 ++- .../mdx/ShowcaseCard/ShowcaseCard.tsx | 4 +-- 8 files changed, 36 insertions(+), 22 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss index 7da6590..4d65040 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss @@ -19,7 +19,7 @@ .mdx-cta-section--title-only { .mdx-cta-section__title { - @include lsd.typography('h1', false); + @include lsd.typography('h5', false); font-weight: 300; max-width: 886px; @@ -33,6 +33,21 @@ } } +.mdx-cta-section--title-button { + .mdx-cta-section__title { + @include lsd.typography('display4', false); + font-weight: 300; + + max-width: 886px; + } + + @include utils.responsive('lg', 'down') { + .mdx-cta-section__title { + @include lsd.typography('h4', false); + } + } +} + .mdx-cta-section--full-width { .mdx-cta-section__container { display: grid; @@ -145,8 +160,7 @@ } & > p { - font-size: 1.5rem !important; - line-height: 2rem !important; + @include lsd.typography('h4', true); } } } @@ -155,12 +169,10 @@ @include utils.responsive('lg', 'down') { .mdx-cta-section__title { - font-size: 1rem !important; - line-height: 100% !important; + @include lsd.typography('subtitle2', true); } .mdx-cta-section__description { - font-size: 1.5rem !important; - line-height: 2rem !important; + @include lsd.typography('h4', true); } } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx index 4d3aada..6c89329 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx @@ -117,10 +117,13 @@ export const CallToActionSection: React.FC = ({ }) => { const withDescription = !!description const withList = list.length > 0 + const withButton = !!href const display = - title && !withDescription && !withList + title && !withDescription && !withButton && !withList ? 'title-only' + : title && !description && !withList && withButton + ? 'title-button' : title && description && columns === 2 ? `full-width` : title && description && list.length > 0 @@ -158,10 +161,10 @@ export const CallToActionSection: React.FC = ({
{list.map((option, index) => (
- + {option.title} - + {option.description}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss index dc03e74..bff8633 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss @@ -110,7 +110,7 @@ @include utils.responsive('lg', 'down') { .mdx-feature-list { .mdx-feature-list__title { - @include lsd.typography('subtitle1', false); + @include lsd.typography('subtitle2', false); padding: 1rem 0; } } @@ -136,12 +136,12 @@ } .mdx-feature-list__feature-title { - @include lsd.typography('h5', false); + @include lsd.typography('h4', false); margin-top: 1rem; } .mdx-feature-list__feature-description { - @include lsd.typography('subtitle1'); + @include lsd.typography('body1', false); margin-top: 3rem; } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx index 7674c72..a6f7138 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx @@ -84,7 +84,7 @@ export const FeatureList: React.FC = ({ {index + 1} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx index 57d89ee..1d2fbe4 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx @@ -21,7 +21,7 @@ export const HeroDescription: React.FC = ({ return ( = ({ /> )} {name} From 7d60515eafef33c3151b145c877cb4ddb1fcc43d Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 14 Dec 2023 04:39:32 +0330 Subject: [PATCH 04/18] fix: fix TimelineItem typography style --- .../src/client/components/mdx/TimelineItem/TimelineItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx index e886b50..cdaef6e 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx @@ -109,7 +109,7 @@ export const TimelineItem: React.FC = ({
)} = ({
From c5a3c1323a689352f3df5fa710ebd85250d4a033 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 14 Dec 2023 04:40:04 +0330 Subject: [PATCH 05/18] fix: ShowcaseCard design adjustments --- .../mdx/ShowcaseCard/ShowcaseCard.scss | 44 ++++++++++++-- .../mdx/ShowcaseCard/ShowcaseCard.tsx | 57 ++++++++++++++----- 2 files changed, 81 insertions(+), 20 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss index 646b0ec..4775fdc 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss @@ -6,20 +6,54 @@ } .mdx-showcase-card__inner { - padding: 24px 8px; + padding-top: 1.5rem; + display: flex; + flex-direction: column; + gap: 1.5rem; } .mdx-showcase-card__logo { + width: 58px; + height: auto; +} + +.mdx-showcase-card__index { + width: 30px; + height: 30px; + color: rgb(var(--lsd-text-secondary)) !important; + background-color: rgb(var(--lsd-surface-secondary)); + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + border-radius: 50%; } .mdx-showcase-card__name { - margin-top: 1rem; } .mdx-showcase-card__description { - border-top: 1px solid rgb(var(--lsd-border-primary)); - margin-top: 24px; - padding-top: 16px; + margin-top: -0.125rem; + padding-top: 0.5rem; +} + +.mdx-showcase-card--large { + .mdx-showcase-card__logo { + width: 58px; + } +} + +.mdx-showcase-card--small { + .mdx-showcase-card__logo { + width: 34px; + } +} + +.mdx-showcase-card--border-solid { + .mdx-showcase-card__description { + border-top: 1px solid rgb(var(--lsd-border-primary)); + padding-top: 1rem; + } } @include utils.responsive('lg', 'down') { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx index 5a2ec95..8ec7f02 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx @@ -8,24 +8,47 @@ export type ShowcaseCardProps = Omit< React.HTMLAttributes, 'title' > & { + index?: React.ReactNode logoSrc?: string logoSrcDark?: string name: React.ReactNode description: React.ReactNode + size?: 'small' | 'large' + borderStyle?: 'none' | 'solid' } export const ShowcaseCard: React.FC = ({ + index, name, logoSrc, logoSrcDark, description, className, + size = 'large', + borderStyle = 'solid', children, ...props }) => { return ( -
+
+ {index && ( + + {index} + + )} {(logoSrc || logoSrcDark) && ( = ({ className="mdx-showcase-card__logo" /> )} - - {name} - - - {description} - + {name && ( + + {name} + + )} + {description && ( + + {description} + + )}
) From fa830767b9615bc1578ec0a5c3d7d475a0e9c81d Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 14 Dec 2023 04:41:29 +0330 Subject: [PATCH 06/18] feat: add support for rendering cta buttons next to the section titles --- .../mdx/FeatureList/FeatureList.scss | 26 ++++++++++++---- .../mdx/FeatureList/FeatureList.tsx | 30 ++++++++++++++----- .../mdx/SectionHeader/SectionHeader.scss | 7 +++++ .../mdx/SectionHeader/SectionHeader.tsx | 13 ++++---- 4 files changed, 55 insertions(+), 21 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss index bff8633..f5e2475 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss @@ -69,9 +69,21 @@ .mdx-feature-list__feature-description { } -.mdx-feature-list__extra { - margin-top: 3.5rem; - padding: 0 1rem; +.mdx-feature-list__header { + display: flex; + flex-direction: row; + align-items: center; + gap: 2rem; +} + +.mdx-feature-list--cta-top { +} + +.mdx-feature-list--cta-bottom { + .mdx-feature-list__extra { + margin-top: 3.5rem; + padding: 0 1rem; + } } @include utils.responsive('lg', 'up') { @@ -115,9 +127,11 @@ } } - .mdx-feature-list__extra { - margin-top: 2rem; - padding: 0; + .mdx-feature-list--cta-bottom { + .mdx-feature-list__extra { + margin-top: 2rem; + padding: 0; + } } .mdx-feature-list__list { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx index a6f7138..4f33093 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx @@ -24,6 +24,11 @@ export type FeatureListProps = Omit< * The vertical alignment of feature description. */ alignment?: 'bottom' | 'top' + + /** + * The position of the call to action buttons. + */ + ctaPosition?: 'top' | 'bottom' } /** @@ -53,6 +58,7 @@ export const FeatureList: React.FC = ({ alignment = 'bottom', features = [], className, + ctaPosition = 'bottom', children, ...props }) => { @@ -62,16 +68,22 @@ export const FeatureList: React.FC = ({ className, 'mdx-feature-list', `mdx-feature-list--${alignment}-aligned`, + `mdx-feature-list--cta-${ctaPosition}`, )} {...props} > - - {title} - +
+ + {title} + + {children && ctaPosition === 'top' && ( +
{children}
+ )} +
{features.map((feature, index) => (
@@ -102,7 +114,9 @@ export const FeatureList: React.FC = ({
))}
- {children &&
{children}
} + {children && ctaPosition === 'bottom' && ( +
{children}
+ )}
) } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss index c477243..e5d07bc 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss @@ -15,6 +15,13 @@ } } +.mdx-section-header__title { + display: flex; + flex-direction: row; + align-items: center; + gap: 2rem; +} + @include utils.responsive('lg', 'down') { .mdx-section-header { flex-direction: column; diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx index 79d8d1f..df00125 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx @@ -9,13 +9,9 @@ export type SectionHeaderProps = Omit & { description?: React.ReactNode } -export const SectionHeader: React.FC = ({ - title, - description, - className, - children, - ...props -}) => { +export const SectionHeader: React.FC< + React.PropsWithChildren +> = ({ title, description, className, children, ...props }) => { return ( = ({ variant="h5" > {title} + {children && ( +
{children}
+ )} {description && ( From ab6a5a804817c860d516376f84fb24f36a328724 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 14 Dec 2023 05:29:35 +0330 Subject: [PATCH 07/18] feat: implement the AccordionItem component --- .../src/client/components/Icon/Icon.tsx | 29 ++++++-- .../client/components/Icon/style.module.scss | 26 +++++-- .../mdx/AccordionItem/AccordionItem.scss | 45 ++++++++++++ .../mdx/AccordionItem/AccordionItem.tsx | 72 +++++++++++++++++++ .../components/mdx/AccordionItem/index.ts | 1 + .../src/client/components/mdx/index.ts | 1 + .../src/client/static/icons/add.svg | 4 ++ .../src/client/static/icons/remove.svg | 3 + 8 files changed, 171 insertions(+), 10 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/index.ts create mode 100644 packages/logos-docusaurus-theme/src/client/static/icons/add.svg create mode 100644 packages/logos-docusaurus-theme/src/client/static/icons/remove.svg diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx index 0d4dbd9..782c58f 100644 --- a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx @@ -1,18 +1,22 @@ import { useColorMode } from '@docusaurus/theme-common' import { clsx } from 'clsx' -import React, { CSSProperties } from 'react' +import React from 'react' import styles from './style.module.scss' +import AddSvg from '../../static/icons/add.svg' import ArrowLCircleSvg from '../../static/icons/arrow-left-circle.svg' import ArrowL from '../../static/icons/arrow-left.svg' import ArrowRCircleSvg from '../../static/icons/arrow-right-circle.svg' import ArrowR from '../../static/icons/arrow-right.svg' +import Avatar from '../../static/icons/avatar.svg' import CloseSvg from '../../static/icons/close.svg' import CopySvg from '../../static/icons/copy.svg' +import DiscordWhiteSvg from '../../static/icons/discord-white.svg' import DiscordSvg from '../../static/icons/discord.svg' import DiscourseSvg from '../../static/icons/discourse.svg' import DotSvg from '../../static/icons/dot.svg' +import DownloadSvg from '../../static/icons/download.svg' import DropdownSvg from '../../static/icons/dropdown.svg' import EditSvg from '../../static/icons/edit.svg' import ExternalLinkSvg from '../../static/icons/external-link.svg' @@ -23,15 +27,13 @@ import GithubWhiteSvg from '../../static/icons/github-white.svg' import GScholarSvg from '../../static/icons/gscholar.svg' import HistorySvg from '../../static/icons/history.svg' import LinkedinSvg from '../../static/icons/linkedin.svg' +import RemoveSvg from '../../static/icons/remove.svg' import SearchSvg from '../../static/icons/search.svg' import StatusSvg from '../../static/icons/status.svg' +import TelegramWhiteSvg from '../../static/icons/telegram-white.svg' import TelegramSvg from '../../static/icons/telegram.svg' import TwitterSvg from '../../static/icons/twitter.svg' -import DiscordWhiteSvg from '../../static/icons/discord-white.svg' -import TelegramWhiteSvg from '../../static/icons/telegram-white.svg' import XWhiteSvg from '../../static/icons/x-white.svg' -import Avatar from '../../static/icons/avatar.svg' -import DownloadSvg from '../../static/icons/download.svg' type TIconProps = { size?: 's' | 'm' | 'l' @@ -40,7 +42,8 @@ type TIconProps = { type TProps = { children?: JSX.Element - fill?: string + fill?: boolean + stroke?: boolean } & TIconProps export const Icon = (props: TProps): JSX.Element => { @@ -53,6 +56,8 @@ export const Icon = (props: TProps): JSX.Element => { styles.icon, colorMode === 'dark' ? styles.dark : styles.light, styles[size], + props.stroke && styles.stroke, + props.fill && styles.fill, props.className && props.className, )} > @@ -234,3 +239,15 @@ export const IconDownload = (props: TIconProps): JSX.Element => ( ) + +export const IconAdd = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconRemove = (props: TIconProps): JSX.Element => ( + + + +) diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss b/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss index 63efbd5..0eb5a65 100644 --- a/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss +++ b/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss @@ -17,13 +17,31 @@ } &.dark { - .fill { - fill: var(--ifm-color-black); + &.fill { + &, + * { + fill: var(--ifm-color-white); + } } - .stroke { - stroke: var(--ifm-color-white); + &.stroke { + svg, + svg * { + stroke: var(--ifm-color-white); + } } } &.light { + &.fill { + &, + * { + fill: var(--ifm-color-black); + } + } + &.stroke { + svg, + svg * { + stroke: var(--ifm-color-black); + } + } } } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss new file mode 100644 index 0000000..66afb48 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss @@ -0,0 +1,45 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-accordion-item { + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + + > input { + display: none; + } +} + +.mdx-accordion-item__header { + min-height: 88px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 16px 0; + gap: 0 16px; + + &, + * { + cursor: pointer; + } +} + +.mdx-accordion-item__content-wrapper { + overflow: hidden; + height: auto; +} + +.mdx-accordion-item__content { + height: 0; + transition: 0.3s ease; +} + +.mdx-accordion-item--open { + .mdx-accordion-item__content { + height: auto; + padding-bottom: 1.875rem; + } +} + +@include utils.responsive('lg', 'down') { +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.tsx new file mode 100644 index 0000000..80fb32a --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.tsx @@ -0,0 +1,72 @@ +import clsx from 'clsx' +import React, { useEffect, useState } from 'react' +import './AccordionItem.scss' +import { Typography } from '@acid-info/lsd-react' +import { IconAdd, IconRemove } from '../../Icon' +import uniqueId from 'lodash/uniqueId' + +export type AccordionItemProps = Omit< + React.HTMLProps, + 'title' +> & { + open?: boolean + title: React.ReactNode + onToggle?: (open: boolean) => void +} + +export const AccordionItem: React.FC = ({ + open: openProp, + onToggle, + title, + className, + children, + ...props +}) => { + const id = uniqueId('accordion-item-') + const [open, setOpen] = useState(openProp ?? false) + + if (typeof openProp !== 'undefined' && openProp !== open) { + setOpen(openProp) + } + + const handleToggle = () => { + if (typeof openProp !== 'undefined') { + onToggle && onToggle(!open) + } else { + setOpen((val) => !val) + } + } + + return ( +
+ +
handleToggle()} + > + + {title} + +
+ {open ? : } +
+
+
+
{children}
+
+
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/index.ts new file mode 100644 index 0000000..61f1abb --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/index.ts @@ -0,0 +1 @@ +export * from './AccordionItem' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts index d07a10b..f4f6faa 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts @@ -1,3 +1,4 @@ +export * from './AccordionItem' export * from './AppCard' export * from './AssetCard' export * from './Box' diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/add.svg b/packages/logos-docusaurus-theme/src/client/static/icons/add.svg new file mode 100644 index 0000000..a75d367 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/static/icons/add.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/remove.svg b/packages/logos-docusaurus-theme/src/client/static/icons/remove.svg new file mode 100644 index 0000000..6129138 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/static/icons/remove.svg @@ -0,0 +1,3 @@ + + + From 472799d743a64e4cead71332bb556477e5b417ae Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 14 Dec 2023 17:53:55 +0330 Subject: [PATCH 08/18] refactor: extract Grid scroll buttons into a reusable component, ScrollButtons --- .../src/client/components/mdx/Grid/Grid.tsx | 131 ++---------------- .../mdx/ScrollButtons/ScrollButtons.scss | 57 ++++++++ .../mdx/ScrollButtons/ScrollButtons.tsx | 85 ++++++++++++ .../components/mdx/ScrollButtons/index.ts | 1 + 4 files changed, 152 insertions(+), 122 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.scss create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/index.ts diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx index 99e9ca2..54d4e48 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx @@ -1,15 +1,10 @@ -import { - ChevronLeftIcon, - ChevronRightIcon, - IconButton, - IconButtonGroup, - THEME_BREAKPOINTS, -} from '@acid-info/lsd-react' +import { THEME_BREAKPOINTS } from '@acid-info/lsd-react' import { css } from '@emotion/react' import styled from '@emotion/styled' import clsx from 'clsx' import React, { useRef } from 'react' import { lsdUtils } from '../../../lib/lsd.utils' +import { ScrollButtons } from '../ScrollButtons' import { GridItem } from './GridItem' export type GridProps = React.ComponentProps & { @@ -29,62 +24,17 @@ export const Grid: { Item: typeof GridItem } & React.FC = ({ }) => { const ref = useRef(null) - const scroll = (direction: -1 | 1) => { - const el = ref.current - if (!el) return - - const itemWidth = el.children[0]?.getBoundingClientRect?.()?.width ?? 236 - el.scrollTo({ - behavior: 'smooth', - left: - el.scrollLeft + - (el.getBoundingClientRect()?.width - itemWidth) * direction, - }) - } - return (
{actions} -
- - - - {leftLabel.length ? ( - - {leftLabel} - - ) : null} - - - {rightLabel.length ? ( - - {rightLabel} - - ) : null} - - - -
+
{children} @@ -113,26 +63,6 @@ const GridRoot = styled.div<{ .mdx-grid__scroll { display: flex; - flex-direction: row; - gap: 0 1rem; - margin-left: auto; - } - - .mdx-grid__scroll--spacing-buttons { - width: 100%; - - > div { - justify-content: space-between; - width: 100%; - } - - > div > button:not(:last-child) { - border-right: 1px solid rgb(var(--lsd-border-primary)) !important; - } - } - - .mdx-grid__scroll-button { - display: flex; } .mdx-grid__content { @@ -211,47 +141,4 @@ const GridRoot = styled.div<{ `} `) })} - - ${(props) => - lsdUtils.responsive( - props.theme as any, - 'md', - 'up', - )(css` - .mdx-grid__scroll-button--with-label { - width: auto; - min-width: 83px; - padding: 5px 11px 5px 9px; - gap: 12px; - - &:first-of-type { - justify-content: flex-start; - } - - &:last-of-type { - justify-content: flex-start; - } - } - `)} - - ${(props) => - lsdUtils.responsive( - props.theme as any, - 'sm', - 'down', - )(css` - .mdx-grid__scroll { - & > div { - justify-content: flex-end; - - > button:not(:last-child) { - border-right: none !important; - } - } - } - - .mdx-grid__scroll-button-label { - display: none; - } - `)} ` diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.scss new file mode 100644 index 0000000..eae0ebe --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.scss @@ -0,0 +1,57 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-scroll-buttons { + width: 100%; + + > div { + width: 100%; + display: flex; + flex-direction: row; + justify-content: flex-end; + } +} + +@include utils.responsive('md', 'up') { + .mdx-scroll-buttons__button--with-label { + width: auto !important; + min-width: 83px; + padding: 5px 11px 5px 9px !important; + gap: 12px; + + &:first-of-type { + justify-content: flex-start; + } + + &:last-of-type { + justify-content: flex-start; + } + } + + .mdx-scroll-buttons--spaced { + & > div { + gap: 0 1rem; + justify-content: space-between; + + & > button:not(:last-child) { + border-right: 1px solid rgb(var(--lsd-border-primary)) !important; + } + } + } +} + +@include utils.responsive('md', 'down') { + .mdx-scroll-buttons { + & > div { + justify-content: flex-end; + + > button:not(:last-child) { + border-right: none !important; + } + } + + .mdx-scroll-buttons__label { + display: none; + } + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.tsx new file mode 100644 index 0000000..651f385 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.tsx @@ -0,0 +1,85 @@ +import { + ChevronLeftIcon, + ChevronRightIcon, + IconButton, + IconButtonGroup, +} from '@acid-info/lsd-react' +import clsx from 'clsx' +import React from 'react' +import './ScrollButtons.scss' + +export type ScrollButtonsProps = React.HTMLProps & { + containerId?: string + containerRef?: React.RefObject + leftLabel?: string + rightLabel?: string + spacing?: 'spaced' | 'grouped' +} + +export const ScrollButtons: React.FC = ({ + leftLabel, + rightLabel, + containerRef, + containerId, + spacing = 'grouped', + ...props +}) => { + const scroll = (direction: -1 | 1) => { + const el = containerRef + ? containerRef.current + : document.querySelector(`#${containerId}`) + if (!el) return + + const itemWidth = el.children[0]?.getBoundingClientRect?.()?.width ?? 236 + el.scrollTo({ + behavior: 'smooth', + left: + el.scrollLeft + + (el.getBoundingClientRect()?.width - itemWidth) * direction, + }) + } + + return ( +
+ + 0 && + 'mdx-scroll-buttons__button--with-label', + )} + size="small" + onClick={scroll.bind(null, -1)} + > + + {leftLabel && leftLabel.length > 0 && ( + {leftLabel} + )} + + + {rightLabel && rightLabel.length > 0 && ( + {rightLabel} + )} + + + +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/index.ts new file mode 100644 index 0000000..24c317c --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/index.ts @@ -0,0 +1 @@ +export * from './ScrollButtons' From c667313338663efd21496de2fc48c398ae3abba3 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 14 Dec 2023 18:17:22 +0330 Subject: [PATCH 09/18] feat: implement LogoCarousel component --- .../mdx/LogoCarousel/LogoCarousel.scss | 33 ++++++++++ .../mdx/LogoCarousel/LogoCarousel.tsx | 64 +++++++++++++++++++ .../components/mdx/LogoCarousel/index.ts | 1 + .../src/client/components/mdx/index.ts | 1 + 4 files changed, 99 insertions(+) create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.scss create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/index.ts diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.scss new file mode 100644 index 0000000..de08584 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.scss @@ -0,0 +1,33 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-logo-carousel { + .mdx-section-header__title { + flex-basis: 100%; + } + + .mdx-section-header__extra { + margin-left: auto; + } + + .mdx-logo-carousel__inner { + margin-top: 100px; + } + + .mdx-logo-carousel__item { + flex-shrink: 0; + } + + .mdx-logo-carousel__logo { + height: 86px; + width: auto; + } +} + +@include utils.responsive('lg', 'down') { + .mdx-logo-carousel { + .mdx-logo-carousel__inner { + margin-top: 64px; + } + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.tsx new file mode 100644 index 0000000..f0bd9ad --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.tsx @@ -0,0 +1,64 @@ +import { Typography } from '@acid-info/lsd-react' +import ThemedImage from '@theme/ThemedImage' +import clsx from 'clsx' +import React, { useRef } from 'react' +import './LogoCarousel.scss' +import { Grid, SectionHeader } from '..' +import { ScrollButtons } from '../ScrollButtons' +import { useHydrated } from '../../../lib/useHydrated' + +export type LogoCarouselProps = Omit< + React.HTMLAttributes, + 'title' +> & { + title?: React.ReactNode + items?: { + title?: string + logoSrc?: string + logoSrcDark?: string + }[] +} + +export const LogoCarousel: React.FC = ({ + title, + className, + items = [], + children, + ...props +}) => { + const hydrated = useHydrated() + const ref = useRef(null) + const containerRef = useRef(null) + + if (typeof window !== 'undefined' && hydrated && !containerRef.current) { + containerRef.current = + ref.current?.querySelector('.mdx-grid__content') ?? null + + console.log(containerRef.current, ref.current) + } + + return ( +
+ + + + + {items.map((item) => ( + + + + ))} + +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/index.ts new file mode 100644 index 0000000..0c94203 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/index.ts @@ -0,0 +1 @@ +export * from './LogoCarousel' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts index f4f6faa..69ffa92 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts @@ -18,6 +18,7 @@ export * from './HeroModel' export * from './HeroTitle' export * from './HeroVideo' export * from './JobsPerDepartment' +export * from './LogoCarousel' export * from './NewsletterSubscription' export * from './PoweredBy' export * from './ProfileCard' From 36a085b3231743d3cfb563d34080a15837e6c612 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 14 Dec 2023 19:02:51 +0330 Subject: [PATCH 10/18] fix: typography styles --- .../mdx/CallToActionSection/CallToActionSection.scss | 2 +- .../client/components/mdx/SectionHeader/SectionHeader.scss | 6 +++++- .../client/components/mdx/SectionHeader/SectionHeader.tsx | 4 ++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss index 4d65040..033dedc 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss @@ -60,7 +60,7 @@ } .mdx-cta-section__description { - @include lsd.typography('h4', false); + @include lsd.typography('h3', false); } .mdx-cta-section__link { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss index e5d07bc..2537509 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss @@ -27,7 +27,11 @@ flex-direction: column; &__title { - @include lsd.typography('body1'); + @include lsd.typography('subtitle2'); + } + + &__description { + @include lsd.typography('h4'); } } } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx index df00125..27063c8 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx @@ -27,9 +27,9 @@ export const SectionHeader: React.FC< {description && ( {description} From 6ed7d65aa3ff5e704320855d92cb9c3b9f2bff3f Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 14 Dec 2023 19:08:24 +0330 Subject: [PATCH 11/18] fix: adjust LogoCarousel image height --- .../docusaurus-playground/src/pages/index.mdx | 247 ++++++++++++++---- .../mdx/LogoCarousel/LogoCarousel.scss | 2 +- 2 files changed, 204 insertions(+), 45 deletions(-) diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx index 02bc30d..b1750ee 100644 --- a/packages/docusaurus-playground/src/pages/index.mdx +++ b/packages/docusaurus-playground/src/pages/index.mdx @@ -2,7 +2,6 @@ import { Hero, HeroTitle, HeroDescription, - HeroVideo, HeroActions, HeroAction, CallToActionSection, @@ -20,77 +19,238 @@ import { ShowcaseCard, JobsPerDepartment, GithubChallenges, + LogoCarousel, } from '../components/mdx' import * as jobData from '/generated/jobs.json' import * as challengesData from '/generated/challenges.json' - - - {'Defend Against Data Censorship With Codex'} - - { - 'Codex is a durable, decentralized data storage protocol, created so the world community can preserve its most important knowledge without risk of censorship.' - } - - - - Follow Codex - - - - - - - - + + + {'LIGHT AND PERFORMANT CLIENTS, FOR THE ETHEREUM NETWORK'} + + + { + 'Run Nimbus on lightweight devices or premium servers with equal ease and peace of mind. Trusted by solo stakers and enterprise node operators alike.' + } + + + + Learn more + + + - Codex implements advanced erasure coding techniques - to ensure data stored is always retrievable without relying on - inefficient full replication methods. - - ), + title: 'Consensus Client', + description: + 'An ultra-light client that contributes to the network and does not require syncing.', }, { - title: 'Accessible', + title: 'Verified Web3 Proxy', description: - 'Participating in the Codex network is highly accessible thanks to its permissionless nature, and bandwidth usage optimizations like its "lazy repair" system and lightweight ZK-based remote auditing system.', + 'A lightweight execution layer client to complement the consensus layer - coming soon.', }, { - title: 'Decentralized', + title: 'Portal Client', description: - "The network's native marketplace incentivizes wide participation, ensuring robust resistance to censorship and external attack.", + 'An ultra-light client that contributes to the network and does not require syncing.', }, { - title: 'Low-cost', + title: 'Execution Client', description: - "Codex's design slashes the costs associated with traditional cloud storage providers while democratizing opportunities to contribute excess system resources to the network.", + 'A lightweight execution layer client to complement the consensus layer - coming soon.', }, ]} > - - Read more + + read more + + + + Read mroe + + + + + + + + + + + + + + + + + + + + + Follow the detailed +
+ step-by-step guide here + + } + list={[ + { + title: 'Simple setup', + description: + 'Run integrated Nimbus Beacon Node and Validator Client together.', + }, + { + title: 'Beacon setup', + description: + 'Use Nimbus Beacon Node with an alternative validator client.', + }, + { + title: 'Beacon setup', + description: + 'Use Nimbus Validator Client with an alternative Beacon Node', + }, + ]} + label="Get Nimbus" + target="_blank" + href="https://nimbus.guide/quick-start.html" /> + + + + + + + + + + + + + + + + + + + + + + + + + Date: Fri, 15 Dec 2023 13:36:59 +0330 Subject: [PATCH 12/18] fix: remove AccordionItem's transition effect --- .../src/client/components/mdx/AccordionItem/AccordionItem.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss index 66afb48..daf6db1 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss @@ -31,7 +31,6 @@ .mdx-accordion-item__content { height: 0; - transition: 0.3s ease; } .mdx-accordion-item--open { From ba4ddc30b990f659dcdff702eff2e8b287ecccfa Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Fri, 15 Dec 2023 16:55:47 +0330 Subject: [PATCH 13/18] fix: fix spacing in the AccordionItem --- .../src/client/components/mdx/AccordionItem/AccordionItem.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss index daf6db1..fa0a076 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss @@ -36,6 +36,7 @@ .mdx-accordion-item--open { .mdx-accordion-item__content { height: auto; + padding-top: 6px; padding-bottom: 1.875rem; } } From a68d2af4cf80c6f7a752a224d0cd516cee50c80c Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Fri, 15 Dec 2023 16:57:35 +0330 Subject: [PATCH 14/18] fix: outline the avatar in the ProfileCard --- .../src/client/components/mdx/ProfileCard/ProfileCard.scss | 2 +- .../src/client/components/mdx/ProfileCard/ProfileCard.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss index 3d9a8e0..902ff42 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss @@ -27,6 +27,7 @@ width: 40px !important; height: 40px !important; border-radius: 50%; + border: 1px solid rgb(var(--lsd-border-primary)); svg { width: 40px !important; @@ -39,7 +40,6 @@ } .mdx-profile-card__name { - @include lsd.typography('h4'); } .mdx-profile-card__buttons { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx index 1846dea..a8cac6e 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx @@ -76,7 +76,7 @@ export const ProfileCard: React.FC = ({ )} {name} From 75804c0ee8c128cbeb700d411d1021dbcbbf4025 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Fri, 15 Dec 2023 16:58:35 +0330 Subject: [PATCH 15/18] fix: fix spacing in the Roadmap component --- .../src/client/components/mdx/Roadmap/Roadmap.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss index 6f6240e..a79baa8 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss @@ -19,7 +19,7 @@ } .mdx-roadmap__timeline { - margin-top: 7.25rem; + margin-top: 6.25rem; .mdx-grid-item:last-child { .mdx-timeline-item__border { From d417e8ca1ccfb2fe49941940bbb268eae201ed83 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Fri, 15 Dec 2023 16:59:03 +0330 Subject: [PATCH 16/18] fix: fix CallToActionSection typography styles --- .../mdx/CallToActionSection/CallToActionSection.scss | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss index 033dedc..847137e 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss @@ -24,13 +24,6 @@ max-width: 886px; } - - @include utils.responsive('lg', 'down') { - .mdx-cta-section__title { - font-size: 1.5rem !important; - line-height: 2rem !important; - } - } } .mdx-cta-section--title-button { @@ -110,7 +103,7 @@ } .mdx-cta-section__description { - @include lsd.typography('h2', false); + @include lsd.typography('h1', false); margin-top: 2rem; } From e9dc989506909bcd5cba5803d463674bb9a6cb7d Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Fri, 15 Dec 2023 17:07:15 +0330 Subject: [PATCH 17/18] fix: ensure icons adapt to theme changes with CSS --- .../src/client/components/Icon/Icon.tsx | 2 -- .../src/client/components/Icon/style.module.scss | 9 +++++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx index 782c58f..ea66134 100644 --- a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx @@ -48,13 +48,11 @@ type TProps = { export const Icon = (props: TProps): JSX.Element => { const { children, size = 'm' } = props - const { colorMode, setColorMode } = useColorMode() return (
Date: Fri, 15 Dec 2023 19:31:43 +0330 Subject: [PATCH 18/18] fix: adjust typography styles in blog pages --- .../src/client/css/blog.scss | 14 ++++++++++++-- .../Header/Subtitle/styles.module.scss | 2 +- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/css/blog.scss b/packages/logos-docusaurus-theme/src/client/css/blog.scss index f03b960..1642101 100644 --- a/packages/logos-docusaurus-theme/src/client/css/blog.scss +++ b/packages/logos-docusaurus-theme/src/client/css/blog.scss @@ -4,6 +4,10 @@ .blog-wrapper { } +.blog-wrapper h1[itemprop='headline'] { + @include lsd.typography('h1'); +} + .blog-wrapper > .container { display: flex; width: 100%; @@ -62,13 +66,19 @@ } .blog-wrapper--index h2[itemprop='headline'] { - @include lsd.typography('h5'); + @include lsd.typography('h4'); > a { text-decoration: none; } } +.blog-wrapper--index [itemprop='blogPost'] { + .markdown { + @include lsd.typography('body2'); + } +} + .blog-wrapper .breadcrumbs__item { text-decoration: none; } @@ -164,7 +174,7 @@ } .blog-wrapper h1[itemprop='headline'] { - @include lsd.typography('h3'); + @include lsd.typography('h2'); } } diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/styles.module.scss index d7cc4a8..4d3e7b2 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/styles.module.scss +++ b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/styles.module.scss @@ -8,6 +8,6 @@ @include utils.responsive('lg', 'down') { .blogPostSubtitle { margin-top: 4px; - @include lsd.typography('body1'); + @include lsd.typography('subtitle2'); } }