From ff70cc20a247341a95aa69e9f054f3ef5ccbfc74 Mon Sep 17 00:00:00 2001 From: Octav Codrea <73948165+xgrv@users.noreply.github.com> Date: Wed, 3 Sep 2025 20:29:50 +0300 Subject: [PATCH 1/5] WIP styling --- src/css/custom.css | 158 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 141 insertions(+), 17 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 393c9d3..478430e 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -6,27 +6,151 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #4498b3; - --ifm-color-primary-dark: #347493; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; - --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + --color-pink-0: #ffe8e8; + --color-pink-1: #ffcfcf; + --color-pink-2: #fcb1b1; + --color-pink-3: #ee8787; + --color-pink-4: #d04a4a; + --color-pink-5: #a42f2f; + --color-pink-6: #731414; + + --color-red-1: #ff8b7e; + --color-red-2: #f24836; + --color-red-3: #b42011; + + --color-orange-1: #ffaf60; + --color-orange-2: #ea9847; + --color-orange-3: #d4742f; + + --color-yellow-1: #ffe77d; + --color-yellow-2: #f5d547; + --color-yellow-3: #e4b532; + + --color-green-1: #d2e79b; + --color-green-2: #b1c971; + --color-green-3: #90aa5a; + + --color-purple-1: #ecc9f2; + --color-purple-2: #d7a6e0; + --color-purple-3: #b57bbf; + + --color-blue-0: #cfe3fb; + --color-blue-1: #9ebfe9; + --color-blue-2: #6798d5; + --color-blue-3: #3e6da7; + --color-blue-4: #214776; + --color-blue-5: #0d2037; + --color-blue-6: #071729; + + --color-gray-0: #fbfcfe; + --color-gray-1: #f7f8fd; + --color-gray-2: #f3f3f4; + --color-gray-3: #e1e4eb; + --color-gray-4: #b4bcd1; + --color-gray-5: #8a94ac; + --color-gray-6: #69748f; + + --color-black-1: #3d4457; + --color-black-2: #181b23; + --color-black-3: #05070e; + + --color-teal-0: #e8f7fc; + --color-teal-1: #acdfee; + --color-teal-2: #78c7dd; + --color-teal-3: #419bb4; + --color-teal-4: #347493; + --color-teal-5: #154a65; + --color-teal-6: #082c3f; + + --ifm-color-gray-100: var(--color-gray-0); + --ifm-color-gray-200: var(--color-gray-1); + --ifm-color-gray-300: var(--color-gray-2); + --ifm-color-gray-400: var(--color-gray-3); + --ifm-color-gray-500: var(--color-gray-4); + --ifm-color-gray-600: var(--color-gray-5); + --ifm-color-gray-700: var(--color-gray-6); + --ifm-color-gray-800: var(--color-black-1); + --ifm-color-gray-900: var(--color-black-2); + + --ifm-color-primary: var(--color-pink-3); + --ifm-color-primary-dark: var(--color-pink-4); + --ifm-color-primary-darker: var(--color-pink-5); + --ifm-color-primary-darkest: var(--color-pink-6); + --ifm-color-primary-light: var(--color-pink-2); + --ifm-color-primary-lighter: var(--color-pink-1); + --ifm-color-primary-lightest: var(--color-pink-0); + + --ifm-color-secondary: var(--color-gray-3); + + --ifm-color-secondary-dark: var(--color-gray-4); + --ifm-color-secondary-darker: var(--color-gray-5); + --ifm-color-secondary-darkest: var(--color-gray-6); + --ifm-color-secondary-light: var(--color-gray-2); + --ifm-color-secondary-lighter: var(--color-gray-1); + --ifm-color-secondary-lightest: var(--color-gray-0); + + --ifm-code-font-size: 95%; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + + --ifm-button-background-color: var(--color-pink-3); + + --ifm-border-radius: 1rem; + --ifm-button-border-radius: 1rem; + + .button { + transition: all 0.1s ease-in-out; + box-shadow: 5px 5px 0 0 var(--color-black-2); + } + + /* .button.button--secondary { + color: white; + } */ + + .button:hover, + .button--primary:hover, + .button--secondary:hover, + .button--outline:hover { + transform: translate(3px, 3px); + box-shadow: 3px 3px 0 0 var(--color-black-2); + } + + .button:active, + .button--primary:active, + .button--secondary:active, + .button--outline:active { + transform: translate(5px, 5px); + box-shadow: 1px 1px 0 0 var(--color-black-2); + } + + --ifm-font-family-base: "Onest", sans-serif; + --ifm-heading-font-family: "Onest", sans-serif; + + /* Extended color palette from design reference */ +} + +/* Text selection color */ +::selection { + background: var(--color-teal-3); + color: #ffffff; +} +::-moz-selection { + background: var(--color-teal-3); + color: #ffffff; } /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme="dark"] { - --ifm-color-primary: #419bb4; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --ifm-color-primary: var(--color-pink-3); + --ifm-color-primary-dark: var(--color-pink-4); + --ifm-color-primary-darker: var(--color-pink-5); + --ifm-color-primary-darkest: var(--color-pink-6); + --ifm-color-primary-light: var(--color-pink-2); + --ifm-color-primary-lighter: var(--color-pink-1); + --ifm-color-primary-lightest: var(--color-pink-0); + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + + --ifm-font-family-base: "Onest", sans-serif; + --ifm-heading-font-family: "Onest", sans-serif; } .code-block-error-line { From ac2f7a7ec11eba428f5d1f5836b9d86c4e0eab57 Mon Sep 17 00:00:00 2001 From: Octav Codrea Date: Wed, 17 Sep 2025 14:21:38 +0300 Subject: [PATCH 2/5] landing page --- docusaurus.ts | 354 +++++++++--------- src/components/HomepageFeatures/index.tsx | 158 +++++--- .../HomepageFeatures/styles.module.css | 119 +++++- src/components/HomepageSocials/index.tsx | 63 ++++ .../HomepageSocials/styles.module.css | 123 ++++++ src/css/custom.css | 29 +- src/pages/index.module.css | 129 ++++++- src/pages/index.tsx | 96 +++-- src/theme/Footer/Copyright/index.tsx | 13 + src/theme/Footer/Layout/index.tsx | 72 ++++ src/theme/Footer/Layout/styles.module.css | 28 ++ src/theme/Footer/LinkItem/index.tsx | 29 ++ src/theme/Footer/Links/MultiColumn/index.tsx | 51 +++ src/theme/Footer/Links/Simple/index.tsx | 36 ++ src/theme/Footer/Links/index.tsx | 14 + src/theme/Footer/Logo/index.tsx | 39 ++ src/theme/Footer/Logo/styles.module.css | 9 + src/theme/Footer/index.tsx | 26 ++ static/img/chunk/arrow-trend-up.svg | 3 + static/img/chunk/checkmark.svg | 3 + static/img/chunk/door-open.svg | 3 + static/img/chunk/folder-open.svg | 3 + static/img/chunk/shield-check.svg | 3 + static/img/chunk/users.svg | 6 + static/img/footer-logo.svg | 14 + static/img/hero-illustration.svg | 126 +++++++ static/img/social-media/discord.svg | 3 + static/img/social-media/github.svg | 10 + static/img/social-media/linkedin.svg | 10 + 29 files changed, 1290 insertions(+), 282 deletions(-) create mode 100644 src/components/HomepageSocials/index.tsx create mode 100644 src/components/HomepageSocials/styles.module.css create mode 100644 src/theme/Footer/Copyright/index.tsx create mode 100644 src/theme/Footer/Layout/index.tsx create mode 100644 src/theme/Footer/Layout/styles.module.css create mode 100644 src/theme/Footer/LinkItem/index.tsx create mode 100644 src/theme/Footer/Links/MultiColumn/index.tsx create mode 100644 src/theme/Footer/Links/Simple/index.tsx create mode 100644 src/theme/Footer/Links/index.tsx create mode 100644 src/theme/Footer/Logo/index.tsx create mode 100644 src/theme/Footer/Logo/styles.module.css create mode 100644 src/theme/Footer/index.tsx create mode 100644 static/img/chunk/arrow-trend-up.svg create mode 100644 static/img/chunk/checkmark.svg create mode 100644 static/img/chunk/door-open.svg create mode 100644 static/img/chunk/folder-open.svg create mode 100644 static/img/chunk/shield-check.svg create mode 100644 static/img/chunk/users.svg create mode 100644 static/img/footer-logo.svg create mode 100644 static/img/hero-illustration.svg create mode 100644 static/img/social-media/discord.svg create mode 100644 static/img/social-media/github.svg create mode 100644 static/img/social-media/linkedin.svg diff --git a/docusaurus.ts b/docusaurus.ts index a1811c7..0669b6f 100644 --- a/docusaurus.ts +++ b/docusaurus.ts @@ -5,196 +5,206 @@ import { themes as prismThemes } from "prism-react-renderer"; import { DeepPartial } from "utility-types"; export type LttleDocusaurusConfig = { - url: string; - typesenseServerConfig: Pick< - TypesenseThemeConfig["typesense"]["typesenseServerConfig"], - "nodes" | "apiKey" - >; + url: string; + typesenseServerConfig: Pick< + TypesenseThemeConfig["typesense"]["typesenseServerConfig"], + "nodes" | "apiKey" + >; }; export const getConfig = (cfg: LttleDocusaurusConfig): Config => ({ - title: "lttle.cloud docs", - tagline: "no rewrites. no cold starts. no paying for idle.", - favicon: "img/favicon.ico", + title: "lttle.cloud docs", + tagline: "no rewrites. no cold starts. no paying for idle.", + favicon: "img/favicon.ico", + customFields: { + brandTitleParts: { + lttle: "lttle", + dot: ".", + cloud: "cloud", + suffix: "docs", + taglineHtml: + "no rewrites.
no cold starts.
no paying for idle.", + }, + }, - // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future - future: { - v4: true, // Improve compatibility with the upcoming Docusaurus v4 - }, + // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future + future: { + v4: true, // Improve compatibility with the upcoming Docusaurus v4 + }, - // Set the production url of your site here - url: cfg.url, - // Set the // pathname under which your site is served - // For GitHub pages deployment, it is often '//' - baseUrl: "/", + // Set the production url of your site here + url: cfg.url, + // Set the // pathname under which your site is served + // For GitHub pages deployment, it is often '//' + baseUrl: "/", - onBrokenLinks: "throw", - onBrokenMarkdownLinks: "warn", + onBrokenLinks: "throw", + onBrokenMarkdownLinks: "warn", - // Even if you don't use internationalization, you can use this field to set - // useful metadata like html lang. For example, if your site is Chinese, you - // may want to replace "en" with "zh-Hans". - i18n: { - defaultLocale: "en", - locales: ["en"], - }, + // Even if you don't use internationalization, you can use this field to set + // useful metadata like html lang. For example, if your site is Chinese, you + // may want to replace "en" with "zh-Hans". + i18n: { + defaultLocale: "en", + locales: ["en"], + }, - presets: [ - [ - "classic", - { - docs: { - sidebarPath: "./sidebars.ts", - editUrl: "https://github.com/lttle-cloud/docs/tree/main", - remarkPlugins: [ - [ - require("@docusaurus/remark-plugin-npm2yarn"), - { sync: true, converters: ["yarn", "pnpm"] }, - ], - ], - }, - theme: { - customCss: "./src/css/custom.css", - }, - } satisfies Preset.Options, + presets: [ + [ + "classic", + { + docs: { + sidebarPath: "./sidebars.ts", + editUrl: "https://github.com/lttle-cloud/docs/tree/main", + remarkPlugins: [ + [ + require("@docusaurus/remark-plugin-npm2yarn"), + { sync: true, converters: ["yarn", "pnpm"] }, + ], + ], + }, + theme: { + customCss: "./src/css/custom.css", + }, + } satisfies Preset.Options, + ], ], - ], - themes: ["docusaurus-theme-search-typesense", "@docusaurus/theme-mermaid"], + themes: ["docusaurus-theme-search-typesense", "@docusaurus/theme-mermaid"], - markdown: { - mermaid: true, - }, + markdown: { + mermaid: true, + }, - themeConfig: { - // TODO: Replace with your project's social card - image: "img/docusaurus-social-card.jpg", + themeConfig: { + // TODO: Replace with your project's social card + image: "img/docusaurus-social-card.jpg", - colorMode: { - respectPrefersColorScheme: true, - }, - navbar: { - title: "docs", - logo: { - alt: "lttle docs", - src: "img/logo.svg", - srcDark: "img/logo-dark.svg", - height: 32, - width: 43, - }, - items: [ - { - type: "docSidebar", - sidebarId: "documentationSidebar", - position: "left", - label: "Documentation", + colorMode: { + respectPrefersColorScheme: true, }, - { - type: "docSidebar", - sidebarId: "guidesSidebar", - position: "left", - label: "Guides & Samples", - }, - { - type: "docSidebar", - sidebarId: "sdksSidebar", - position: "left", - label: "SDKs", - }, - { - href: "https://github.com/lttle-cloud/ignition", - label: "GitHub", - position: "right", - }, - ], - }, - footer: { - style: "dark", - links: [ - { - title: "Docs", - items: [ - { - label: "Getting Started", - to: "/docs/getting-started/installing-the-cli", + navbar: { + title: "docs", + logo: { + alt: "lttle docs", + src: "img/logo.svg", + srcDark: "img/logo-dark.svg", + height: 32, + width: 43, }, - { - label: "Deploying a static site", - to: "/docs/getting-started/deploying-a-static-site", - }, - { - label: "Tutorials", - to: "https://www.youtube.com/@awesome-coding/videos", - }, - ], - }, - { - title: "Community", - items: [ - { - label: "Discord", - href: "https://discord.gg/xhNGGrZQja", - }, - { - label: "X", - href: "https://x.com/lttlecloud_", - }, - ], + items: [ + { + type: "docSidebar", + sidebarId: "documentationSidebar", + position: "left", + label: "Documentation", + }, + { + type: "docSidebar", + sidebarId: "guidesSidebar", + position: "left", + label: "Guides & Samples", + }, + { + type: "docSidebar", + sidebarId: "sdksSidebar", + position: "left", + label: "SDKs", + }, + { + href: "https://github.com/lttle-cloud/ignition", + label: "GitHub", + position: "right", + }, + ], }, - { - title: "More", - items: [ - { - label: "GitHub", - href: "https://github.com/lttle-cloud/ignition", - }, - { - label: "LinkedIn", - href: "https://www.linkedin.com/company/lttle-cloud", - }, - ], + footer: { + style: "dark", + links: [ + { + title: "Docs", + items: [ + { + label: "Getting Started", + to: "/docs/getting-started/installing-the-cli", + }, + { + label: "Deploying a static site", + to: "/docs/getting-started/deploying-a-static-site", + }, + { + label: "Tutorials", + to: "https://www.youtube.com/@awesome-coding/videos", + }, + ], + }, + { + title: "Community", + items: [ + { + label: "Discord", + href: "https://discord.gg/xhNGGrZQja", + }, + { + label: "X", + href: "https://x.com/lttlecloud_", + }, + ], + }, + { + title: "More", + items: [ + { + label: "GitHub", + href: "https://github.com/lttle-cloud/ignition", + }, + { + label: "LinkedIn", + href: "https://www.linkedin.com/company/lttle-cloud", + }, + ], + }, + ], + copyright: `Copyright © ${new Date().getFullYear()} lttle cloud. Built with Docusaurus.`, }, - ], - copyright: `Copyright © ${new Date().getFullYear()} lttle cloud. Built with Docusaurus.`, - }, - prism: { - theme: prismThemes.github, - darkTheme: prismThemes.dracula, - magicComments: [ - { - className: "code-block-error-line", - line: "code-block-error-line", + prism: { + theme: prismThemes.github, + darkTheme: prismThemes.dracula, + magicComments: [ + { + className: "code-block-error-line", + line: "code-block-error-line", + }, + ], + additionalLanguages: [ + "json", + "yaml", + "rust", + "go", + "bash", + "docker", + "nginx", + "psl", + ], }, - ], - additionalLanguages: [ - "json", - "yaml", - "rust", - "go", - "bash", - "docker", - "nginx", - "psl", - ], - }, - // TypeSense is configured with the same cfg as Algolia - // But it uses a different search engine (Typesense) - typesense: { - typesenseCollectionName: "lttle-cloud-docs", + // TypeSense is configured with the same cfg as Algolia + // But it uses a different search engine (Typesense) + typesense: { + typesenseCollectionName: "lttle-cloud-docs", - typesenseServerConfig: { - ...cfg.typesenseServerConfig, - }, + typesenseServerConfig: { + ...cfg.typesenseServerConfig, + }, - // Optional: Typesense search parameters: https://typesense.org/docs/0.24.0/api/search.html#search-parameters - typesenseSearchParameters: {}, + // Optional: Typesense search parameters: https://typesense.org/docs/0.24.0/api/search.html#search-parameters + typesenseSearchParameters: {}, - // Optional - contextualSearch: true, - }, - tableOfContents: { - minHeadingLevel: 2, - maxHeadingLevel: 6, - }, - } satisfies Preset.ThemeConfig & DeepPartial, -}); + // Optional + contextualSearch: true, + }, + tableOfContents: { + minHeadingLevel: 2, + maxHeadingLevel: 6, + }, + } satisfies Preset.ThemeConfig & DeepPartial, +}); \ No newline at end of file diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index 31c1c28..a38445a 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -4,68 +4,114 @@ import type { ReactNode } from "react"; import styles from "./styles.module.css"; type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: ReactNode; + title: string; + Svg: React.ComponentType>; + description: ReactNode; }; -const FeatureList: FeatureItem[] = [ - { - title: "Easy to Use", - Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default, - description: ( - <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. - - ), - }, - { - title: "Focus on What Matters", - Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default, - description: ( - <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the docs directory. - - ), - }, - { - title: "Powered by React", - Svg: require("@site/static/img/undraw_docusaurus_react.svg").default, - description: ( - <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. - - ), - }, +const FeatureList1: FeatureItem[] = [ + { + title: "lightweight", + Svg: require("@site/static/img/chunk/folder-open.svg").default, + description: ( + <> + lttle.cloud is designed to be lightweight and efficient, with a + focus on performance and scalability. + + ), + }, + { + title: "open source", + Svg: require("@site/static/img/chunk/door-open.svg").default, + description: ( + <> + lttle.cloud is open source, and we're always looking for + contributions. + + ), + }, + { + title: "simple", + Svg: require("@site/static/img/chunk/checkmark.svg").default, + description: ( + <> + lttle.cloud is designed to be simple and easy to use, with a + focus on usability and accessibility. + + ), + }, +]; + +const FeatureList2: FeatureItem[] = [ + { + title: "secure", + Svg: require("@site/static/img/chunk/shield-check.svg").default, + description: ( + <> + lttle.cloud is designed to be secure and reliable, with a focus + on security and reliability. + + ), + }, + { + title: "community", + Svg: require("@site/static/img/chunk/users.svg").default, + description: ( + <> + lttle.cloud is designed to be high performance, with a focus on + performance and scalability. + + ), + }, + { + title: "high performance", + Svg: require("@site/static/img/chunk/arrow-trend-up.svg").default, + description: ( + <> + lttle.cloud is designed to be high performance, with a focus on + performance and scalability. + + ), + }, ]; function Feature({ title, Svg, description }: FeatureItem) { - return ( -
-
- -
-
- {title} -

{description}

-
-
- ); + return ( +
+ + {title} +

{description}

+
+ ); } export default function HomepageFeatures(): ReactNode { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); + return ( +
+
+
+
+ key features +

grows with you, not against you

+
+
+ {FeatureList1.map((props, idx) => ( + + ))} +
+
+
+
+ why lttle.cloud +

we keep things running, you keep moving

+
+
+ {FeatureList2.map((props, idx) => ( + + ))} +
+
+
+
+ ); } diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css index b248eb2..45e8f75 100644 --- a/src/components/HomepageFeatures/styles.module.css +++ b/src/components/HomepageFeatures/styles.module.css @@ -1,11 +1,118 @@ .features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; + display: flex; + flex-direction: column; + align-items: center; + + gap: 1rem; + padding: 4rem 0; + width: 100%; + background-color: var(--ifm-landing-page-section-background-color); +} + +.featuresContainer { + max-width: 1200px; + width: 100%; + display: flex; + flex-direction: column; + gap: 4rem; + padding: 0 1rem; +} + +.featuresSection { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.featuresHeader { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + text-align: center; + + h2 { + font-size: 2.25rem; + margin: 0; + color: var(--ifm-font-color-base); + } + + p { + font-size: 1rem; + margin: 0; + color: var(--ifm-font-color-secondary); + line-height: 1.2; + } +} + +.featuresRow { + display: flex; + gap: 1rem; +} + +.featureCard { + display: flex; + flex: 1; + flex-direction: column; + gap: 1rem; + padding: 1.5rem; + border-radius: 1rem; + + box-shadow: var(--ifm-landing-page-feature-card-box-shadow); + + background-color: var(--ifm-landing-page-feature-card-background-color); +} + +.featureCard h2 { + font-size: 1.5rem; + margin: 0; + color: var(--ifm-font-color-base); +} + +.featureCard p { + font-size: 1rem; + margin: 0; + color: var(--ifm-font-color-secondary); } .featureSvg { - height: 200px; - width: 200px; + height: 64px; + width: 64px; +} + +@media screen and (max-width: 768px) { + .features { + padding: 2rem 0; + } + + .featuresHeader { + h2 { + font-size: 1.5rem; + } + + p { + font-size: 0.875rem; + } + } + + .featuresRow { + flex-direction: column; + } + + .featureCard { + padding: 1rem; + + h2 { + font-size: 1.25rem; + } + + p { + font-size: 0.875rem; + } + } + + .featureSvg { + height: 32px; + width: 32px; + } } diff --git a/src/components/HomepageSocials/index.tsx b/src/components/HomepageSocials/index.tsx new file mode 100644 index 0000000..6537c75 --- /dev/null +++ b/src/components/HomepageSocials/index.tsx @@ -0,0 +1,63 @@ +import Heading from "@theme/Heading"; +import type { ReactNode } from "react"; +import styles from "./styles.module.css"; +import clsx from "clsx"; + +type SocialItem = { + title: string; + Svg: React.ComponentType>; + href: string; +}; + +const socials: SocialItem[] = [ + { + title: "GitHub", + Svg: require("@site/static/img/social-media/github.svg").default, + href: "https://github.com/lttle-cloud/ignition", + }, + { + title: "Discord", + Svg: require("@site/static/img/social-media/discord.svg").default, + href: "https://discord.gg/xhNGGrZQja", + }, + { + title: "LinkedIn", + Svg: require("@site/static/img/social-media/linkedin.svg").default, + href: "https://www.linkedin.com/company/lttle-cloud", + }, +]; + +function SocialCard({ title, Svg, href }: SocialItem) { + return ( + + + {title} + + ); +} + +export default function HomepageSocials(): ReactNode { + return ( +
+
+
+ join the community +

+ Connect with other developers and get help when you need + it. +

+
+
+ {socials.map((s, i) => ( + + ))} +
+
+
+ ); +} diff --git a/src/components/HomepageSocials/styles.module.css b/src/components/HomepageSocials/styles.module.css new file mode 100644 index 0000000..71a64f7 --- /dev/null +++ b/src/components/HomepageSocials/styles.module.css @@ -0,0 +1,123 @@ +.socialsSection { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + gap: 1rem; + padding: 4rem 0; + width: 100%; + background-color: var(--ifm-background-color); + + .header { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + + h2 { + font-size: 2.25rem; + margin: 0; + color: var(--ifm-font-color-base); + } + + p { + font-size: 1rem; + margin: 0; + color: var(--ifm-font-color-secondary); + line-height: 1.2; + } + } + + .container { + max-width: 1200px; + width: 100%; + display: flex; + flex-direction: column; + gap: 2rem; + padding: 0 1rem; + } + + .cardsRow { + display: flex; + gap: 1rem; + justify-content: center; + + .socialCard { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + padding: 1.5rem 2rem; + border-radius: 1rem; + text-decoration: none; + width: 195px; + + background-color: var(--ifm-landing-page-section-background-color); + box-shadow: var(--ifm-landing-page-feature-card-box-shadow); + + .socialIcon { + height: 48px; + width: 48px; + + path { + transition: all 0.2s ease-in-out; + } + } + + .socialTitle { + font-size: 1.5rem; + font-weight: 700; + color: var(--ifm-font-color-base); + } + + &:global(.github):hover { + .socialIcon { + path { + fill: var(--ifm-color-gray-900); + } + } + } + + &:global(.discord):hover { + .socialIcon { + path { + fill: var(--color-purple-2); + } + } + } + + &:global(.linkedin):hover { + .socialIcon { + path { + fill: var(--color-blue-2); + } + } + } + } + } +} + +@media screen and (max-width: 768px) { + .socialsSection { + padding: 3rem 1rem; + + .header { + h2 { + font-size: 2rem; + } + } + + .cardsRow { + flex-wrap: wrap; + + .socialCard { + width: 130px; + + .socialTitle { + font-size: 1.25rem; + } + } + } + } +} diff --git a/src/css/custom.css b/src/css/custom.css index 478430e..cae71f1 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -51,6 +51,7 @@ --color-gray-6: #69748f; --color-black-1: #3d4457; + --color-black-1-5: #2e3340; --color-black-2: #181b23; --color-black-3: #05070e; @@ -70,6 +71,7 @@ --ifm-color-gray-600: var(--color-gray-5); --ifm-color-gray-700: var(--color-gray-6); --ifm-color-gray-800: var(--color-black-1); + --ifm-color-gray-850: var(--color-black-1-5); --ifm-color-gray-900: var(--color-black-2); --ifm-color-primary: var(--color-pink-3); @@ -97,15 +99,16 @@ --ifm-border-radius: 1rem; --ifm-button-border-radius: 1rem; + --ifm-landing-page-section-background-color: var(--ifm-color-gray-200); + --ifm-landing-page-feature-card-background-color: white; + --ifm-landing-page-feature-card-box-shadow: 8px 8px 0 0 + var(--ifm-color-gray-400); + .button { transition: all 0.1s ease-in-out; box-shadow: 5px 5px 0 0 var(--color-black-2); } - /* .button.button--secondary { - color: white; - } */ - .button:hover, .button--primary:hover, .button--secondary:hover, @@ -124,11 +127,8 @@ --ifm-font-family-base: "Onest", sans-serif; --ifm-heading-font-family: "Onest", sans-serif; - - /* Extended color palette from design reference */ } -/* Text selection color */ ::selection { background: var(--color-teal-3); color: #ffffff; @@ -151,12 +151,17 @@ --ifm-font-family-base: "Onest", sans-serif; --ifm-heading-font-family: "Onest", sans-serif; + + --ifm-landing-page-section-background-color: var(--ifm-color-gray-850); + --ifm-landing-page-feature-card-background-color: var(--ifm-color-gray-800); + --ifm-landing-page-feature-card-box-shadow: 8px 8px 0 0 + var(--ifm-color-gray-700); } .code-block-error-line { - background-color: #ff000020; - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); - border-left: 3px solid #ff000080; + background-color: #ff000020; + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); + border-left: 3px solid #ff000080; } diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 9f71a5d..cc7e5b5 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -4,20 +4,127 @@ */ .heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; + padding: 4rem 0; + display: flex; + gap: 4rem; + text-align: center; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + + background-color: var(--ifm-background-color); } -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } +code { + background-color: var(--ifm-color-gray-900); + padding: 0.5rem 1rem; + border-radius: 0.5rem; + border: 1px solid var(--ifm-color-gray-500); + color: white; + + .green { + color: var(--color-green-2); + } + + .purpleItalic { + color: var(--color-purple-2); + font-style: italic; + } + + .blue { + color: var(--color-blue-3); + } +} + +.heroBannerContent { + display: flex; + flex-direction: column; + justify-content: center; + text-align: left; + gap: 2rem; + + h1, + p { + margin: 0; + } +} + +.heroBannerImage { + display: flex; + align-items: center; + justify-content: center; + + svg { + width: auto; + height: auto; + } } .buttons { - display: flex; - align-items: center; - justify-content: center; + display: flex; +} + +.brandTitle { + display: inline-flex; + align-items: baseline; + gap: 1rem; + color: var(--ifm-font-color-base); + font-weight: 500; + font-size: 56px; + + .brandTitleParts { + display: inline-flex; + align-items: baseline; + font-weight: 900; + } + + .brandLttle { + color: var(--ifm-color-primary); + } + + .brandDot { + color: var(--ifm-color-gray-600); + } + + .brandCloud { + color: var(--ifm-color-emphasis-900); + } +} + +.brandTagline { + color: var(--ifm-font-color-base); + font-weight: 500; + font-size: 1.5rem; + line-height: 1.2; +} + +@media screen and (max-width: 996px) { + .heroBanner { + padding: 2rem; + gap: 2rem; + + svg { + max-width: 100%; + } + } + + .heroBannerContent { + gap: 1rem; + } + + .brandTitle { + font-size: 32px; + } + + .brandTagline { + font-size: 1rem; + } +} + +@media screen and (max-width: 768px) { + .heroBanner { + flex-direction: column-reverse; + gap: 2rem; + } } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2a45864..f184bde 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -5,36 +5,82 @@ import Heading from "@theme/Heading"; import Layout from "@theme/Layout"; import clsx from "clsx"; import type { ReactNode } from "react"; +import HeroImage from "@site/static/img/hero-illustration.svg"; +import HomepageSocials from "@site/src/components/HomepageSocials"; import styles from "./index.module.css"; function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); - return ( -
-
- - {siteConfig.title} - -

{siteConfig.tagline}

-
- - Docusaurus Tutorial - 5min ⏱️ - -
-
-
- ); + const { siteConfig } = useDocusaurusContext(); + const brand = (siteConfig.customFields as any)?.brandTitleParts as + | { + lttle: string; + dot: string; + cloud: string; + suffix: string; + taglineHtml: string; + } + | undefined; + return ( +
+
+ + {brand ? ( + <> + + + + {brand.lttle} + + + {brand.dot} + + + {brand.cloud} + + + {brand.suffix} + + + ) : ( + siteConfig.title + )} + +

+ + curl{" "} + -fsSL{" "} + https://install.lttle.sh |{" "} + bash + +

+ + start now + +
+
+ +
+ +
+
+ ); } export default function Home(): ReactNode { - const { siteConfig } = useDocusaurusContext(); - return ( - - -
- -
- - ); + const { siteConfig } = useDocusaurusContext(); + return ( + + +
+ + +
+ + ); } diff --git a/src/theme/Footer/Copyright/index.tsx b/src/theme/Footer/Copyright/index.tsx new file mode 100644 index 0000000..fcfc8b3 --- /dev/null +++ b/src/theme/Footer/Copyright/index.tsx @@ -0,0 +1,13 @@ +import React, {type ReactNode} from 'react'; +import type {Props} from '@theme/Footer/Copyright'; + +export default function FooterCopyright({copyright}: Props): ReactNode { + return ( +
+ ); +} diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx new file mode 100644 index 0000000..1501903 --- /dev/null +++ b/src/theme/Footer/Layout/index.tsx @@ -0,0 +1,72 @@ +import React, { useEffect, useState, type ReactNode } from "react"; +import clsx from "clsx"; +import { ThemeClassNames } from "@docusaurus/theme-common"; +import type { Props } from "@theme/Footer/Layout"; +import FooterLogo from "@site/static/img/footer-logo.svg"; +import styles from "./styles.module.css"; + +export default function FooterLayout({ + style, + links, + logo, + copyright, +}: Props): ReactNode { + const [windowWidth, setWindowWidth] = useState(0); + const logoHeight = windowWidth * 0.13; + + useEffect(() => { + setWindowWidth(window.innerWidth); + + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + + return ( +
+
+ {links} + {(logo || copyright) && ( +
+ {logo && ( +
{logo}
+ )} + {copyright} +
+ )} +
+
+ + +
+
+ ); +} diff --git a/src/theme/Footer/Layout/styles.module.css b/src/theme/Footer/Layout/styles.module.css new file mode 100644 index 0000000..5a92bb3 --- /dev/null +++ b/src/theme/Footer/Layout/styles.module.css @@ -0,0 +1,28 @@ +.footer { + display: flex; + flex-direction: column; + gap: 3rem; + + overflow: hidden; + width: 100%; + max-width: 100vw; + padding-bottom: 0; +} + +.footerLogoContainer { + height: 300px; + position: relative; + overflow: visible; + + svg { + position: absolute; + + &:first-child { + left: -50%; + } + + &:last-child { + right: -50%; + } + } +} diff --git a/src/theme/Footer/LinkItem/index.tsx b/src/theme/Footer/LinkItem/index.tsx new file mode 100644 index 0000000..59efcba --- /dev/null +++ b/src/theme/Footer/LinkItem/index.tsx @@ -0,0 +1,29 @@ +import React, {type ReactNode} from 'react'; +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import isInternalUrl from '@docusaurus/isInternalUrl'; +import IconExternalLink from '@theme/Icon/ExternalLink'; +import type {Props} from '@theme/Footer/LinkItem'; + +export default function FooterLinkItem({item}: Props): ReactNode { + const {to, href, label, prependBaseUrlToHref, className, ...props} = item; + const toUrl = useBaseUrl(to); + const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true}); + + return ( + + {label} + {href && !isInternalUrl(href) && } + + ); +} diff --git a/src/theme/Footer/Links/MultiColumn/index.tsx b/src/theme/Footer/Links/MultiColumn/index.tsx new file mode 100644 index 0000000..10bbc6e --- /dev/null +++ b/src/theme/Footer/Links/MultiColumn/index.tsx @@ -0,0 +1,51 @@ +import React, {type ReactNode} from 'react'; +import clsx from 'clsx'; +import {ThemeClassNames} from '@docusaurus/theme-common'; +import LinkItem from '@theme/Footer/LinkItem'; +import type {Props} from '@theme/Footer/Links/MultiColumn'; + +type ColumnType = Props['columns'][number]; +type ColumnItemType = ColumnType['items'][number]; + +function ColumnLinkItem({item}: {item: ColumnItemType}) { + return item.html ? ( +
  • + ) : ( +
  • + +
    • + ); +} + +function Column({column}: {column: ColumnType}) { + return ( +
    +
    {column.title}
    +
      + {column.items.map((item, i) => ( + + ))} +
    +
    + ); +} + +export default function FooterLinksMultiColumn({columns}: Props): ReactNode { + return ( +
    + {columns.map((column, i) => ( + + ))} +
    + ); +} diff --git a/src/theme/Footer/Links/Simple/index.tsx b/src/theme/Footer/Links/Simple/index.tsx new file mode 100644 index 0000000..dc6cf9d --- /dev/null +++ b/src/theme/Footer/Links/Simple/index.tsx @@ -0,0 +1,36 @@ +import React, {type ReactNode} from 'react'; +import clsx from 'clsx'; +import LinkItem from '@theme/Footer/LinkItem'; +import type {Props} from '@theme/Footer/Links/Simple'; + +function Separator() { + return ·; +} + +function SimpleLinkItem({item}: {item: Props['links'][number]}) { + return item.html ? ( + + ) : ( + + ); +} + +export default function FooterLinksSimple({links}: Props): ReactNode { + return ( +
    +
    + {links.map((item, i) => ( + + + {links.length !== i + 1 && } + + ))} +
    +
    + ); +} diff --git a/src/theme/Footer/Links/index.tsx b/src/theme/Footer/Links/index.tsx new file mode 100644 index 0000000..2dd3d84 --- /dev/null +++ b/src/theme/Footer/Links/index.tsx @@ -0,0 +1,14 @@ +import React, {type ReactNode} from 'react'; + +import {isMultiColumnFooterLinks} from '@docusaurus/theme-common'; +import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn'; +import FooterLinksSimple from '@theme/Footer/Links/Simple'; +import type {Props} from '@theme/Footer/Links'; + +export default function FooterLinks({links}: Props): ReactNode { + return isMultiColumnFooterLinks(links) ? ( + + ) : ( + + ); +} diff --git a/src/theme/Footer/Logo/index.tsx b/src/theme/Footer/Logo/index.tsx new file mode 100644 index 0000000..8274216 --- /dev/null +++ b/src/theme/Footer/Logo/index.tsx @@ -0,0 +1,39 @@ +import React, {type ReactNode} from 'react'; +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import {useBaseUrlUtils} from '@docusaurus/useBaseUrl'; +import ThemedImage from '@theme/ThemedImage'; +import type {Props} from '@theme/Footer/Logo'; + +import styles from './styles.module.css'; + +function LogoImage({logo}: Props) { + const {withBaseUrl} = useBaseUrlUtils(); + const sources = { + light: withBaseUrl(logo.src), + dark: withBaseUrl(logo.srcDark ?? logo.src), + }; + return ( + + ); +} + +export default function FooterLogo({logo}: Props): ReactNode { + return logo.href ? ( + + + + ) : ( + + ); +} diff --git a/src/theme/Footer/Logo/styles.module.css b/src/theme/Footer/Logo/styles.module.css new file mode 100644 index 0000000..faf0e60 --- /dev/null +++ b/src/theme/Footer/Logo/styles.module.css @@ -0,0 +1,9 @@ +.footerLogoLink { + opacity: 0.5; + transition: opacity var(--ifm-transition-fast) + var(--ifm-transition-timing-default); +} + +.footerLogoLink:hover { + opacity: 1; +} diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx new file mode 100644 index 0000000..595bc51 --- /dev/null +++ b/src/theme/Footer/index.tsx @@ -0,0 +1,26 @@ +import React, {type ReactNode} from 'react'; + +import {useThemeConfig} from '@docusaurus/theme-common'; +import FooterLinks from '@theme/Footer/Links'; +import FooterLogo from '@theme/Footer/Logo'; +import FooterCopyright from '@theme/Footer/Copyright'; +import FooterLayout from '@theme/Footer/Layout'; + +function Footer(): ReactNode { + const {footer} = useThemeConfig(); + if (!footer) { + return null; + } + const {copyright, links, logo, style} = footer; + + return ( + 0 && } + logo={logo && } + copyright={copyright && } + /> + ); +} + +export default React.memo(Footer); diff --git a/static/img/chunk/arrow-trend-up.svg b/static/img/chunk/arrow-trend-up.svg new file mode 100644 index 0000000..abf042f --- /dev/null +++ b/static/img/chunk/arrow-trend-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/chunk/checkmark.svg b/static/img/chunk/checkmark.svg new file mode 100644 index 0000000..af02baf --- /dev/null +++ b/static/img/chunk/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/chunk/door-open.svg b/static/img/chunk/door-open.svg new file mode 100644 index 0000000..524cb4f --- /dev/null +++ b/static/img/chunk/door-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/chunk/folder-open.svg b/static/img/chunk/folder-open.svg new file mode 100644 index 0000000..04e6853 --- /dev/null +++ b/static/img/chunk/folder-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/chunk/shield-check.svg b/static/img/chunk/shield-check.svg new file mode 100644 index 0000000..72b7783 --- /dev/null +++ b/static/img/chunk/shield-check.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/chunk/users.svg b/static/img/chunk/users.svg new file mode 100644 index 0000000..6672172 --- /dev/null +++ b/static/img/chunk/users.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/footer-logo.svg b/static/img/footer-logo.svg new file mode 100644 index 0000000..a3d3b56 --- /dev/null +++ b/static/img/footer-logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/static/img/hero-illustration.svg b/static/img/hero-illustration.svg new file mode 100644 index 0000000..b04b8f8 --- /dev/null +++ b/static/img/hero-illustration.svg @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/social-media/discord.svg b/static/img/social-media/discord.svg new file mode 100644 index 0000000..d12cbe8 --- /dev/null +++ b/static/img/social-media/discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/social-media/github.svg b/static/img/social-media/github.svg new file mode 100644 index 0000000..d72c282 --- /dev/null +++ b/static/img/social-media/github.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/static/img/social-media/linkedin.svg b/static/img/social-media/linkedin.svg new file mode 100644 index 0000000..22633ae --- /dev/null +++ b/static/img/social-media/linkedin.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From 6d24aff242f431bca57cedc0683bba2b0a2f9f62 Mon Sep 17 00:00:00 2001 From: Octav Codrea Date: Thu, 18 Sep 2025 10:02:47 +0300 Subject: [PATCH 3/5] fix css --- src/pages/index.module.css | 2 +- src/pages/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/index.module.css b/src/pages/index.module.css index cc7e5b5..c58eeb3 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -16,7 +16,7 @@ background-color: var(--ifm-background-color); } -code { +.heroBannerCode { background-color: var(--ifm-color-gray-900); padding: 0.5rem 1rem; border-radius: 0.5rem; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f184bde..77fb25a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -52,7 +52,7 @@ function HomepageHeader() { __html: brand?.taglineHtml || siteConfig.tagline, }} /> - + curl{" "} -fsSL{" "} https://install.lttle.sh |{" "} From 1fe229bbb928c3b7966a6b71a4a37a04074b3377 Mon Sep 17 00:00:00 2001 From: Octav Codrea Date: Thu, 18 Sep 2025 10:22:54 +0300 Subject: [PATCH 4/5] random accessibility change --- src/theme/Footer/Links/MultiColumn/index.tsx | 89 ++++++++++---------- 1 file changed, 45 insertions(+), 44 deletions(-) diff --git a/src/theme/Footer/Links/MultiColumn/index.tsx b/src/theme/Footer/Links/MultiColumn/index.tsx index 10bbc6e..9afc9f6 100644 --- a/src/theme/Footer/Links/MultiColumn/index.tsx +++ b/src/theme/Footer/Links/MultiColumn/index.tsx @@ -1,51 +1,52 @@ -import React, {type ReactNode} from 'react'; -import clsx from 'clsx'; -import {ThemeClassNames} from '@docusaurus/theme-common'; -import LinkItem from '@theme/Footer/LinkItem'; -import type {Props} from '@theme/Footer/Links/MultiColumn'; +import React, { type ReactNode } from "react"; +import clsx from "clsx"; +import { ThemeClassNames } from "@docusaurus/theme-common"; +import LinkItem from "@theme/Footer/LinkItem"; +import type { Props } from "@theme/Footer/Links/MultiColumn"; -type ColumnType = Props['columns'][number]; -type ColumnItemType = ColumnType['items'][number]; +type ColumnType = Props["columns"][number]; +type ColumnItemType = ColumnType["items"][number]; -function ColumnLinkItem({item}: {item: ColumnItemType}) { - return item.html ? ( -
  • - ) : ( -
  • - -
    • - ); +function ColumnLinkItem({ item }: { item: ColumnItemType }) { + return item.html ? ( +
  • + ) : ( +
  • + +
    • + ); } -function Column({column}: {column: ColumnType}) { - return ( -
    -
    {column.title}
    -
      - {column.items.map((item, i) => ( - - ))} -
    -
    - ); +function Column({ column }: { column: ColumnType }) { + return ( +
    +

    {column.title}

    +
      + {column.items.map((item, i) => ( + + ))} +
    +
    + ); } -export default function FooterLinksMultiColumn({columns}: Props): ReactNode { - return ( -
    - {columns.map((column, i) => ( - - ))} -
    - ); +export default function FooterLinksMultiColumn({ columns }: Props): ReactNode { + return ( +
    + {columns.map((column, i) => ( + + ))} +
    + ); } From 1c42f001a3e4f7d90c5a51a1077a3ffd49a10942 Mon Sep 17 00:00:00 2001 From: Alexandru Ifrim Date: Thu, 18 Sep 2025 22:37:58 +0300 Subject: [PATCH 5/5] formatting --- docusaurus.ts | 362 +++++++++--------- .../BrowserWindow/styles.module.css | 4 +- src/components/HomepageFeatures/index.tsx | 196 +++++----- .../HomepageFeatures/styles.module.css | 152 ++++---- src/components/HomepageSocials/index.tsx | 91 +++-- .../HomepageSocials/styles.module.css | 200 +++++----- src/css/custom.css | 292 +++++++------- src/pages/index.module.css | 178 ++++----- src/pages/index.tsx | 130 +++---- src/theme/Footer/Copyright/index.tsx | 8 +- src/theme/Footer/Layout/index.tsx | 116 +++--- src/theme/Footer/Layout/styles.module.css | 36 +- src/theme/Footer/LinkItem/index.tsx | 25 +- src/theme/Footer/Links/MultiColumn/index.tsx | 70 ++-- src/theme/Footer/Links/Simple/index.tsx | 16 +- src/theme/Footer/Links/index.tsx | 12 +- src/theme/Footer/Logo/index.tsx | 25 +- src/theme/Footer/index.tsx | 16 +- src/theme/prism-include-languages.ts | 4 +- 19 files changed, 963 insertions(+), 970 deletions(-) diff --git a/docusaurus.ts b/docusaurus.ts index 0669b6f..0064510 100644 --- a/docusaurus.ts +++ b/docusaurus.ts @@ -5,206 +5,206 @@ import { themes as prismThemes } from "prism-react-renderer"; import { DeepPartial } from "utility-types"; export type LttleDocusaurusConfig = { - url: string; - typesenseServerConfig: Pick< - TypesenseThemeConfig["typesense"]["typesenseServerConfig"], - "nodes" | "apiKey" - >; + url: string; + typesenseServerConfig: Pick< + TypesenseThemeConfig["typesense"]["typesenseServerConfig"], + "nodes" | "apiKey" + >; }; export const getConfig = (cfg: LttleDocusaurusConfig): Config => ({ - title: "lttle.cloud docs", - tagline: "no rewrites. no cold starts. no paying for idle.", - favicon: "img/favicon.ico", - customFields: { - brandTitleParts: { - lttle: "lttle", - dot: ".", - cloud: "cloud", - suffix: "docs", - taglineHtml: - "no rewrites.
    no cold starts.
    no paying for idle.", - }, + title: "lttle.cloud docs", + tagline: "no rewrites. no cold starts. no paying for idle.", + favicon: "img/favicon.ico", + customFields: { + brandTitleParts: { + lttle: "lttle", + dot: ".", + cloud: "cloud", + suffix: "docs", + taglineHtml: + "no rewrites.
    no cold starts.
    no paying for idle.", }, + }, - // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future - future: { - v4: true, // Improve compatibility with the upcoming Docusaurus v4 - }, + // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future + future: { + v4: true, // Improve compatibility with the upcoming Docusaurus v4 + }, - // Set the production url of your site here - url: cfg.url, - // Set the // pathname under which your site is served - // For GitHub pages deployment, it is often '//' - baseUrl: "/", + // Set the production url of your site here + url: cfg.url, + // Set the // pathname under which your site is served + // For GitHub pages deployment, it is often '//' + baseUrl: "/", - onBrokenLinks: "throw", - onBrokenMarkdownLinks: "warn", + onBrokenLinks: "throw", + onBrokenMarkdownLinks: "warn", - // Even if you don't use internationalization, you can use this field to set - // useful metadata like html lang. For example, if your site is Chinese, you - // may want to replace "en" with "zh-Hans". - i18n: { - defaultLocale: "en", - locales: ["en"], - }, + // Even if you don't use internationalization, you can use this field to set + // useful metadata like html lang. For example, if your site is Chinese, you + // may want to replace "en" with "zh-Hans". + i18n: { + defaultLocale: "en", + locales: ["en"], + }, - presets: [ - [ - "classic", - { - docs: { - sidebarPath: "./sidebars.ts", - editUrl: "https://github.com/lttle-cloud/docs/tree/main", - remarkPlugins: [ - [ - require("@docusaurus/remark-plugin-npm2yarn"), - { sync: true, converters: ["yarn", "pnpm"] }, - ], - ], - }, - theme: { - customCss: "./src/css/custom.css", - }, - } satisfies Preset.Options, - ], + presets: [ + [ + "classic", + { + docs: { + sidebarPath: "./sidebars.ts", + editUrl: "https://github.com/lttle-cloud/docs/tree/main", + remarkPlugins: [ + [ + require("@docusaurus/remark-plugin-npm2yarn"), + { sync: true, converters: ["yarn", "pnpm"] }, + ], + ], + }, + theme: { + customCss: "./src/css/custom.css", + }, + } satisfies Preset.Options, ], + ], - themes: ["docusaurus-theme-search-typesense", "@docusaurus/theme-mermaid"], + themes: ["docusaurus-theme-search-typesense", "@docusaurus/theme-mermaid"], - markdown: { - mermaid: true, - }, + markdown: { + mermaid: true, + }, - themeConfig: { - // TODO: Replace with your project's social card - image: "img/docusaurus-social-card.jpg", + themeConfig: { + // TODO: Replace with your project's social card + image: "img/docusaurus-social-card.jpg", - colorMode: { - respectPrefersColorScheme: true, + colorMode: { + respectPrefersColorScheme: true, + }, + navbar: { + title: "docs", + logo: { + alt: "lttle docs", + src: "img/logo.svg", + srcDark: "img/logo-dark.svg", + height: 32, + width: 43, + }, + items: [ + { + type: "docSidebar", + sidebarId: "documentationSidebar", + position: "left", + label: "Documentation", + }, + { + type: "docSidebar", + sidebarId: "guidesSidebar", + position: "left", + label: "Guides & Samples", }, - navbar: { - title: "docs", - logo: { - alt: "lttle docs", - src: "img/logo.svg", - srcDark: "img/logo-dark.svg", - height: 32, - width: 43, + { + type: "docSidebar", + sidebarId: "sdksSidebar", + position: "left", + label: "SDKs", + }, + { + href: "https://github.com/lttle-cloud/ignition", + label: "GitHub", + position: "right", + }, + ], + }, + footer: { + style: "dark", + links: [ + { + title: "Docs", + items: [ + { + label: "Getting Started", + to: "/docs/getting-started/installing-the-cli", }, - items: [ - { - type: "docSidebar", - sidebarId: "documentationSidebar", - position: "left", - label: "Documentation", - }, - { - type: "docSidebar", - sidebarId: "guidesSidebar", - position: "left", - label: "Guides & Samples", - }, - { - type: "docSidebar", - sidebarId: "sdksSidebar", - position: "left", - label: "SDKs", - }, - { - href: "https://github.com/lttle-cloud/ignition", - label: "GitHub", - position: "right", - }, - ], + { + label: "Deploying a static site", + to: "/docs/getting-started/deploying-a-static-site", + }, + { + label: "Tutorials", + to: "https://www.youtube.com/@awesome-coding/videos", + }, + ], }, - footer: { - style: "dark", - links: [ - { - title: "Docs", - items: [ - { - label: "Getting Started", - to: "/docs/getting-started/installing-the-cli", - }, - { - label: "Deploying a static site", - to: "/docs/getting-started/deploying-a-static-site", - }, - { - label: "Tutorials", - to: "https://www.youtube.com/@awesome-coding/videos", - }, - ], - }, - { - title: "Community", - items: [ - { - label: "Discord", - href: "https://discord.gg/xhNGGrZQja", - }, - { - label: "X", - href: "https://x.com/lttlecloud_", - }, - ], - }, - { - title: "More", - items: [ - { - label: "GitHub", - href: "https://github.com/lttle-cloud/ignition", - }, - { - label: "LinkedIn", - href: "https://www.linkedin.com/company/lttle-cloud", - }, - ], - }, - ], - copyright: `Copyright © ${new Date().getFullYear()} lttle cloud. Built with Docusaurus.`, + { + title: "Community", + items: [ + { + label: "Discord", + href: "https://discord.gg/xhNGGrZQja", + }, + { + label: "X", + href: "https://x.com/lttlecloud_", + }, + ], }, - prism: { - theme: prismThemes.github, - darkTheme: prismThemes.dracula, - magicComments: [ - { - className: "code-block-error-line", - line: "code-block-error-line", - }, - ], - additionalLanguages: [ - "json", - "yaml", - "rust", - "go", - "bash", - "docker", - "nginx", - "psl", - ], + { + title: "More", + items: [ + { + label: "GitHub", + href: "https://github.com/lttle-cloud/ignition", + }, + { + label: "LinkedIn", + href: "https://www.linkedin.com/company/lttle-cloud", + }, + ], + }, + ], + copyright: `Copyright © ${new Date().getFullYear()} lttle cloud. Built with Docusaurus.`, + }, + prism: { + theme: prismThemes.github, + darkTheme: prismThemes.dracula, + magicComments: [ + { + className: "code-block-error-line", + line: "code-block-error-line", }, - // TypeSense is configured with the same cfg as Algolia - // But it uses a different search engine (Typesense) - typesense: { - typesenseCollectionName: "lttle-cloud-docs", + ], + additionalLanguages: [ + "json", + "yaml", + "rust", + "go", + "bash", + "docker", + "nginx", + "psl", + ], + }, + // TypeSense is configured with the same cfg as Algolia + // But it uses a different search engine (Typesense) + typesense: { + typesenseCollectionName: "lttle-cloud-docs", - typesenseServerConfig: { - ...cfg.typesenseServerConfig, - }, + typesenseServerConfig: { + ...cfg.typesenseServerConfig, + }, - // Optional: Typesense search parameters: https://typesense.org/docs/0.24.0/api/search.html#search-parameters - typesenseSearchParameters: {}, + // Optional: Typesense search parameters: https://typesense.org/docs/0.24.0/api/search.html#search-parameters + typesenseSearchParameters: {}, - // Optional - contextualSearch: true, - }, - tableOfContents: { - minHeadingLevel: 2, - maxHeadingLevel: 6, - }, - } satisfies Preset.ThemeConfig & DeepPartial, -}); \ No newline at end of file + // Optional + contextualSearch: true, + }, + tableOfContents: { + minHeadingLevel: 2, + maxHeadingLevel: 6, + }, + } satisfies Preset.ThemeConfig & DeepPartial, +}); diff --git a/src/components/BrowserWindow/styles.module.css b/src/components/BrowserWindow/styles.module.css index c1d99eb..a9842f9 100644 --- a/src/components/BrowserWindow/styles.module.css +++ b/src/components/BrowserWindow/styles.module.css @@ -68,7 +68,9 @@ background-color: var(--ifm-background-color); color: var(--ifm-color-gray-800); padding: 5px 15px; - font: 400 13px Arial, sans-serif; + font: + 400 13px Arial, + sans-serif; user-select: none; } diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index a38445a..f9189b2 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -4,114 +4,114 @@ import type { ReactNode } from "react"; import styles from "./styles.module.css"; type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: ReactNode; + title: string; + Svg: React.ComponentType>; + description: ReactNode; }; const FeatureList1: FeatureItem[] = [ - { - title: "lightweight", - Svg: require("@site/static/img/chunk/folder-open.svg").default, - description: ( - <> - lttle.cloud is designed to be lightweight and efficient, with a - focus on performance and scalability. - - ), - }, - { - title: "open source", - Svg: require("@site/static/img/chunk/door-open.svg").default, - description: ( - <> - lttle.cloud is open source, and we're always looking for - contributions. - - ), - }, - { - title: "simple", - Svg: require("@site/static/img/chunk/checkmark.svg").default, - description: ( - <> - lttle.cloud is designed to be simple and easy to use, with a - focus on usability and accessibility. - - ), - }, + { + title: "lightweight", + Svg: require("@site/static/img/chunk/folder-open.svg").default, + description: ( + <> + lttle.cloud is designed to be lightweight and efficient, with a focus on + performance and scalability. + + ), + }, + { + title: "open source", + Svg: require("@site/static/img/chunk/door-open.svg").default, + description: ( + <> + lttle.cloud is open source, and we're always looking for + contributions. + + ), + }, + { + title: "simple", + Svg: require("@site/static/img/chunk/checkmark.svg").default, + description: ( + <> + lttle.cloud is designed to be simple and easy to use, with a focus on + usability and accessibility. + + ), + }, ]; const FeatureList2: FeatureItem[] = [ - { - title: "secure", - Svg: require("@site/static/img/chunk/shield-check.svg").default, - description: ( - <> - lttle.cloud is designed to be secure and reliable, with a focus - on security and reliability. - - ), - }, - { - title: "community", - Svg: require("@site/static/img/chunk/users.svg").default, - description: ( - <> - lttle.cloud is designed to be high performance, with a focus on - performance and scalability. - - ), - }, - { - title: "high performance", - Svg: require("@site/static/img/chunk/arrow-trend-up.svg").default, - description: ( - <> - lttle.cloud is designed to be high performance, with a focus on - performance and scalability. - - ), - }, + { + title: "secure", + Svg: require("@site/static/img/chunk/shield-check.svg").default, + description: ( + <> + lttle.cloud is designed to be secure and reliable, with a focus on + security and reliability. + + ), + }, + { + title: "community", + Svg: require("@site/static/img/chunk/users.svg").default, + description: ( + <> + lttle.cloud is designed to be high performance, with a focus on + performance and scalability. + + ), + }, + { + title: "high performance", + Svg: require("@site/static/img/chunk/arrow-trend-up.svg").default, + description: ( + <> + lttle.cloud is designed to be high performance, with a focus on + performance and scalability. + + ), + }, ]; function Feature({ title, Svg, description }: FeatureItem) { - return ( -
    - - {title} -

    {description}

    -
    - ); + return ( +
    + + {title} +

    {description}

    +
    + ); } export default function HomepageFeatures(): ReactNode { - return ( -
    -
    -
    -
    - key features -

    grows with you, not against you

    -
    -
    - {FeatureList1.map((props, idx) => ( - - ))} -
    -
    -
    -
    - why lttle.cloud -

    we keep things running, you keep moving

    -
    -
    - {FeatureList2.map((props, idx) => ( - - ))} -
    -
    -
    -
    - ); + return ( +
    +
    +
    +
    + key features +

    grows with you, not against you

    +
    +
    + {FeatureList1.map((props, idx) => ( + + ))} +
    +
    +
    +
    + why lttle.cloud +

    we keep things running, you keep moving

    +
    +
    + {FeatureList2.map((props, idx) => ( + + ))} +
    +
    +
    +
    + ); } diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css index 45e8f75..7d88ff5 100644 --- a/src/components/HomepageFeatures/styles.module.css +++ b/src/components/HomepageFeatures/styles.module.css @@ -1,118 +1,118 @@ .features { - display: flex; - flex-direction: column; - align-items: center; - - gap: 1rem; - padding: 4rem 0; - width: 100%; - background-color: var(--ifm-landing-page-section-background-color); + display: flex; + flex-direction: column; + align-items: center; + + gap: 1rem; + padding: 4rem 0; + width: 100%; + background-color: var(--ifm-landing-page-section-background-color); } .featuresContainer { - max-width: 1200px; - width: 100%; - display: flex; - flex-direction: column; - gap: 4rem; - padding: 0 1rem; + max-width: 1200px; + width: 100%; + display: flex; + flex-direction: column; + gap: 4rem; + padding: 0 1rem; } .featuresSection { - display: flex; - flex-direction: column; - gap: 2rem; + display: flex; + flex-direction: column; + gap: 2rem; } .featuresHeader { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; - text-align: center; - - h2 { - font-size: 2.25rem; - margin: 0; - color: var(--ifm-font-color-base); - } + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + text-align: center; + + h2 { + font-size: 2.25rem; + margin: 0; + color: var(--ifm-font-color-base); + } - p { - font-size: 1rem; - margin: 0; - color: var(--ifm-font-color-secondary); - line-height: 1.2; - } + p { + font-size: 1rem; + margin: 0; + color: var(--ifm-font-color-secondary); + line-height: 1.2; + } } .featuresRow { - display: flex; - gap: 1rem; + display: flex; + gap: 1rem; } .featureCard { - display: flex; - flex: 1; - flex-direction: column; - gap: 1rem; - padding: 1.5rem; - border-radius: 1rem; + display: flex; + flex: 1; + flex-direction: column; + gap: 1rem; + padding: 1.5rem; + border-radius: 1rem; - box-shadow: var(--ifm-landing-page-feature-card-box-shadow); + box-shadow: var(--ifm-landing-page-feature-card-box-shadow); - background-color: var(--ifm-landing-page-feature-card-background-color); + background-color: var(--ifm-landing-page-feature-card-background-color); } .featureCard h2 { - font-size: 1.5rem; - margin: 0; - color: var(--ifm-font-color-base); + font-size: 1.5rem; + margin: 0; + color: var(--ifm-font-color-base); } .featureCard p { - font-size: 1rem; - margin: 0; - color: var(--ifm-font-color-secondary); + font-size: 1rem; + margin: 0; + color: var(--ifm-font-color-secondary); } .featureSvg { - height: 64px; - width: 64px; + height: 64px; + width: 64px; } @media screen and (max-width: 768px) { - .features { - padding: 2rem 0; - } + .features { + padding: 2rem 0; + } - .featuresHeader { - h2 { - font-size: 1.5rem; - } - - p { - font-size: 0.875rem; - } + .featuresHeader { + h2 { + font-size: 1.5rem; } - .featuresRow { - flex-direction: column; + p { + font-size: 0.875rem; } + } - .featureCard { - padding: 1rem; + .featuresRow { + flex-direction: column; + } - h2 { - font-size: 1.25rem; - } + .featureCard { + padding: 1rem; - p { - font-size: 0.875rem; - } + h2 { + font-size: 1.25rem; } - .featureSvg { - height: 32px; - width: 32px; + p { + font-size: 0.875rem; } + } + + .featureSvg { + height: 32px; + width: 32px; + } } diff --git a/src/components/HomepageSocials/index.tsx b/src/components/HomepageSocials/index.tsx index 6537c75..d871917 100644 --- a/src/components/HomepageSocials/index.tsx +++ b/src/components/HomepageSocials/index.tsx @@ -4,60 +4,57 @@ import styles from "./styles.module.css"; import clsx from "clsx"; type SocialItem = { - title: string; - Svg: React.ComponentType>; - href: string; + title: string; + Svg: React.ComponentType>; + href: string; }; const socials: SocialItem[] = [ - { - title: "GitHub", - Svg: require("@site/static/img/social-media/github.svg").default, - href: "https://github.com/lttle-cloud/ignition", - }, - { - title: "Discord", - Svg: require("@site/static/img/social-media/discord.svg").default, - href: "https://discord.gg/xhNGGrZQja", - }, - { - title: "LinkedIn", - Svg: require("@site/static/img/social-media/linkedin.svg").default, - href: "https://www.linkedin.com/company/lttle-cloud", - }, + { + title: "GitHub", + Svg: require("@site/static/img/social-media/github.svg").default, + href: "https://github.com/lttle-cloud/ignition", + }, + { + title: "Discord", + Svg: require("@site/static/img/social-media/discord.svg").default, + href: "https://discord.gg/xhNGGrZQja", + }, + { + title: "LinkedIn", + Svg: require("@site/static/img/social-media/linkedin.svg").default, + href: "https://www.linkedin.com/company/lttle-cloud", + }, ]; function SocialCard({ title, Svg, href }: SocialItem) { - return ( - - - {title} - - ); + return ( + + + {title} + + ); } export default function HomepageSocials(): ReactNode { - return ( -
    -
    -
    - join the community -

    - Connect with other developers and get help when you need - it. -

    -
    -
    - {socials.map((s, i) => ( - - ))} -
    -
    -
    - ); + return ( +
    +
    +
    + join the community +

    Connect with other developers and get help when you need it.

    +
    +
    + {socials.map((s, i) => ( + + ))} +
    +
    +
    + ); } diff --git a/src/components/HomepageSocials/styles.module.css b/src/components/HomepageSocials/styles.module.css index 71a64f7..3869b8a 100644 --- a/src/components/HomepageSocials/styles.module.css +++ b/src/components/HomepageSocials/styles.module.css @@ -1,123 +1,123 @@ .socialsSection { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + gap: 1rem; + padding: 4rem 0; + width: 100%; + background-color: var(--ifm-background-color); + + .header { display: flex; flex-direction: column; align-items: center; - text-align: center; - gap: 1rem; - padding: 4rem 0; + + h2 { + font-size: 2.25rem; + margin: 0; + color: var(--ifm-font-color-base); + } + + p { + font-size: 1rem; + margin: 0; + color: var(--ifm-font-color-secondary); + line-height: 1.2; + } + } + + .container { + max-width: 1200px; width: 100%; - background-color: var(--ifm-background-color); + display: flex; + flex-direction: column; + gap: 2rem; + padding: 0 1rem; + } - .header { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; - - h2 { - font-size: 2.25rem; - margin: 0; - color: var(--ifm-font-color-base); + .cardsRow { + display: flex; + gap: 1rem; + justify-content: center; + + .socialCard { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + padding: 1.5rem 2rem; + border-radius: 1rem; + text-decoration: none; + width: 195px; + + background-color: var(--ifm-landing-page-section-background-color); + box-shadow: var(--ifm-landing-page-feature-card-box-shadow); + + .socialIcon { + height: 48px; + width: 48px; + + path { + transition: all 0.2s ease-in-out; } - - p { - font-size: 1rem; - margin: 0; - color: var(--ifm-font-color-secondary); - line-height: 1.2; + } + + .socialTitle { + font-size: 1.5rem; + font-weight: 700; + color: var(--ifm-font-color-base); + } + + &:global(.github):hover { + .socialIcon { + path { + fill: var(--ifm-color-gray-900); + } } - } + } - .container { - max-width: 1200px; - width: 100%; - display: flex; - flex-direction: column; - gap: 2rem; - padding: 0 1rem; - } + &:global(.discord):hover { + .socialIcon { + path { + fill: var(--color-purple-2); + } + } + } - .cardsRow { - display: flex; - gap: 1rem; - justify-content: center; - - .socialCard { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.5rem; - padding: 1.5rem 2rem; - border-radius: 1rem; - text-decoration: none; - width: 195px; - - background-color: var(--ifm-landing-page-section-background-color); - box-shadow: var(--ifm-landing-page-feature-card-box-shadow); - - .socialIcon { - height: 48px; - width: 48px; - - path { - transition: all 0.2s ease-in-out; - } - } - - .socialTitle { - font-size: 1.5rem; - font-weight: 700; - color: var(--ifm-font-color-base); - } - - &:global(.github):hover { - .socialIcon { - path { - fill: var(--ifm-color-gray-900); - } - } - } - - &:global(.discord):hover { - .socialIcon { - path { - fill: var(--color-purple-2); - } - } - } - - &:global(.linkedin):hover { - .socialIcon { - path { - fill: var(--color-blue-2); - } - } - } + &:global(.linkedin):hover { + .socialIcon { + path { + fill: var(--color-blue-2); + } } + } } + } } @media screen and (max-width: 768px) { - .socialsSection { - padding: 3rem 1rem; + .socialsSection { + padding: 3rem 1rem; - .header { - h2 { - font-size: 2rem; - } - } + .header { + h2 { + font-size: 2rem; + } + } - .cardsRow { - flex-wrap: wrap; + .cardsRow { + flex-wrap: wrap; - .socialCard { - width: 130px; + .socialCard { + width: 130px; - .socialTitle { - font-size: 1.25rem; - } - } + .socialTitle { + font-size: 1.25rem; } + } } + } } diff --git a/src/css/custom.css b/src/css/custom.css index cae71f1..a771562 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -6,162 +6,162 @@ /* You can override the default Infima variables here. */ :root { - --color-pink-0: #ffe8e8; - --color-pink-1: #ffcfcf; - --color-pink-2: #fcb1b1; - --color-pink-3: #ee8787; - --color-pink-4: #d04a4a; - --color-pink-5: #a42f2f; - --color-pink-6: #731414; - - --color-red-1: #ff8b7e; - --color-red-2: #f24836; - --color-red-3: #b42011; - - --color-orange-1: #ffaf60; - --color-orange-2: #ea9847; - --color-orange-3: #d4742f; - - --color-yellow-1: #ffe77d; - --color-yellow-2: #f5d547; - --color-yellow-3: #e4b532; - - --color-green-1: #d2e79b; - --color-green-2: #b1c971; - --color-green-3: #90aa5a; - - --color-purple-1: #ecc9f2; - --color-purple-2: #d7a6e0; - --color-purple-3: #b57bbf; - - --color-blue-0: #cfe3fb; - --color-blue-1: #9ebfe9; - --color-blue-2: #6798d5; - --color-blue-3: #3e6da7; - --color-blue-4: #214776; - --color-blue-5: #0d2037; - --color-blue-6: #071729; - - --color-gray-0: #fbfcfe; - --color-gray-1: #f7f8fd; - --color-gray-2: #f3f3f4; - --color-gray-3: #e1e4eb; - --color-gray-4: #b4bcd1; - --color-gray-5: #8a94ac; - --color-gray-6: #69748f; - - --color-black-1: #3d4457; - --color-black-1-5: #2e3340; - --color-black-2: #181b23; - --color-black-3: #05070e; - - --color-teal-0: #e8f7fc; - --color-teal-1: #acdfee; - --color-teal-2: #78c7dd; - --color-teal-3: #419bb4; - --color-teal-4: #347493; - --color-teal-5: #154a65; - --color-teal-6: #082c3f; - - --ifm-color-gray-100: var(--color-gray-0); - --ifm-color-gray-200: var(--color-gray-1); - --ifm-color-gray-300: var(--color-gray-2); - --ifm-color-gray-400: var(--color-gray-3); - --ifm-color-gray-500: var(--color-gray-4); - --ifm-color-gray-600: var(--color-gray-5); - --ifm-color-gray-700: var(--color-gray-6); - --ifm-color-gray-800: var(--color-black-1); - --ifm-color-gray-850: var(--color-black-1-5); - --ifm-color-gray-900: var(--color-black-2); - - --ifm-color-primary: var(--color-pink-3); - --ifm-color-primary-dark: var(--color-pink-4); - --ifm-color-primary-darker: var(--color-pink-5); - --ifm-color-primary-darkest: var(--color-pink-6); - --ifm-color-primary-light: var(--color-pink-2); - --ifm-color-primary-lighter: var(--color-pink-1); - --ifm-color-primary-lightest: var(--color-pink-0); - - --ifm-color-secondary: var(--color-gray-3); - - --ifm-color-secondary-dark: var(--color-gray-4); - --ifm-color-secondary-darker: var(--color-gray-5); - --ifm-color-secondary-darkest: var(--color-gray-6); - --ifm-color-secondary-light: var(--color-gray-2); - --ifm-color-secondary-lighter: var(--color-gray-1); - --ifm-color-secondary-lightest: var(--color-gray-0); - - --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); - - --ifm-button-background-color: var(--color-pink-3); - - --ifm-border-radius: 1rem; - --ifm-button-border-radius: 1rem; - - --ifm-landing-page-section-background-color: var(--ifm-color-gray-200); - --ifm-landing-page-feature-card-background-color: white; - --ifm-landing-page-feature-card-box-shadow: 8px 8px 0 0 - var(--ifm-color-gray-400); - - .button { - transition: all 0.1s ease-in-out; - box-shadow: 5px 5px 0 0 var(--color-black-2); - } - - .button:hover, - .button--primary:hover, - .button--secondary:hover, - .button--outline:hover { - transform: translate(3px, 3px); - box-shadow: 3px 3px 0 0 var(--color-black-2); - } - - .button:active, - .button--primary:active, - .button--secondary:active, - .button--outline:active { - transform: translate(5px, 5px); - box-shadow: 1px 1px 0 0 var(--color-black-2); - } - - --ifm-font-family-base: "Onest", sans-serif; - --ifm-heading-font-family: "Onest", sans-serif; + --color-pink-0: #ffe8e8; + --color-pink-1: #ffcfcf; + --color-pink-2: #fcb1b1; + --color-pink-3: #ee8787; + --color-pink-4: #d04a4a; + --color-pink-5: #a42f2f; + --color-pink-6: #731414; + + --color-red-1: #ff8b7e; + --color-red-2: #f24836; + --color-red-3: #b42011; + + --color-orange-1: #ffaf60; + --color-orange-2: #ea9847; + --color-orange-3: #d4742f; + + --color-yellow-1: #ffe77d; + --color-yellow-2: #f5d547; + --color-yellow-3: #e4b532; + + --color-green-1: #d2e79b; + --color-green-2: #b1c971; + --color-green-3: #90aa5a; + + --color-purple-1: #ecc9f2; + --color-purple-2: #d7a6e0; + --color-purple-3: #b57bbf; + + --color-blue-0: #cfe3fb; + --color-blue-1: #9ebfe9; + --color-blue-2: #6798d5; + --color-blue-3: #3e6da7; + --color-blue-4: #214776; + --color-blue-5: #0d2037; + --color-blue-6: #071729; + + --color-gray-0: #fbfcfe; + --color-gray-1: #f7f8fd; + --color-gray-2: #f3f3f4; + --color-gray-3: #e1e4eb; + --color-gray-4: #b4bcd1; + --color-gray-5: #8a94ac; + --color-gray-6: #69748f; + + --color-black-1: #3d4457; + --color-black-1-5: #2e3340; + --color-black-2: #181b23; + --color-black-3: #05070e; + + --color-teal-0: #e8f7fc; + --color-teal-1: #acdfee; + --color-teal-2: #78c7dd; + --color-teal-3: #419bb4; + --color-teal-4: #347493; + --color-teal-5: #154a65; + --color-teal-6: #082c3f; + + --ifm-color-gray-100: var(--color-gray-0); + --ifm-color-gray-200: var(--color-gray-1); + --ifm-color-gray-300: var(--color-gray-2); + --ifm-color-gray-400: var(--color-gray-3); + --ifm-color-gray-500: var(--color-gray-4); + --ifm-color-gray-600: var(--color-gray-5); + --ifm-color-gray-700: var(--color-gray-6); + --ifm-color-gray-800: var(--color-black-1); + --ifm-color-gray-850: var(--color-black-1-5); + --ifm-color-gray-900: var(--color-black-2); + + --ifm-color-primary: var(--color-pink-3); + --ifm-color-primary-dark: var(--color-pink-4); + --ifm-color-primary-darker: var(--color-pink-5); + --ifm-color-primary-darkest: var(--color-pink-6); + --ifm-color-primary-light: var(--color-pink-2); + --ifm-color-primary-lighter: var(--color-pink-1); + --ifm-color-primary-lightest: var(--color-pink-0); + + --ifm-color-secondary: var(--color-gray-3); + + --ifm-color-secondary-dark: var(--color-gray-4); + --ifm-color-secondary-darker: var(--color-gray-5); + --ifm-color-secondary-darkest: var(--color-gray-6); + --ifm-color-secondary-light: var(--color-gray-2); + --ifm-color-secondary-lighter: var(--color-gray-1); + --ifm-color-secondary-lightest: var(--color-gray-0); + + --ifm-code-font-size: 95%; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + + --ifm-button-background-color: var(--color-pink-3); + + --ifm-border-radius: 1rem; + --ifm-button-border-radius: 1rem; + + --ifm-landing-page-section-background-color: var(--ifm-color-gray-200); + --ifm-landing-page-feature-card-background-color: white; + --ifm-landing-page-feature-card-box-shadow: 8px 8px 0 0 + var(--ifm-color-gray-400); + + .button { + transition: all 0.1s ease-in-out; + box-shadow: 5px 5px 0 0 var(--color-black-2); + } + + .button:hover, + .button--primary:hover, + .button--secondary:hover, + .button--outline:hover { + transform: translate(3px, 3px); + box-shadow: 3px 3px 0 0 var(--color-black-2); + } + + .button:active, + .button--primary:active, + .button--secondary:active, + .button--outline:active { + transform: translate(5px, 5px); + box-shadow: 1px 1px 0 0 var(--color-black-2); + } + + --ifm-font-family-base: "Onest", sans-serif; + --ifm-heading-font-family: "Onest", sans-serif; } ::selection { - background: var(--color-teal-3); - color: #ffffff; + background: var(--color-teal-3); + color: #ffffff; } ::-moz-selection { - background: var(--color-teal-3); - color: #ffffff; + background: var(--color-teal-3); + color: #ffffff; } /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme="dark"] { - --ifm-color-primary: var(--color-pink-3); - --ifm-color-primary-dark: var(--color-pink-4); - --ifm-color-primary-darker: var(--color-pink-5); - --ifm-color-primary-darkest: var(--color-pink-6); - --ifm-color-primary-light: var(--color-pink-2); - --ifm-color-primary-lighter: var(--color-pink-1); - --ifm-color-primary-lightest: var(--color-pink-0); - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); - - --ifm-font-family-base: "Onest", sans-serif; - --ifm-heading-font-family: "Onest", sans-serif; - - --ifm-landing-page-section-background-color: var(--ifm-color-gray-850); - --ifm-landing-page-feature-card-background-color: var(--ifm-color-gray-800); - --ifm-landing-page-feature-card-box-shadow: 8px 8px 0 0 - var(--ifm-color-gray-700); + --ifm-color-primary: var(--color-pink-3); + --ifm-color-primary-dark: var(--color-pink-4); + --ifm-color-primary-darker: var(--color-pink-5); + --ifm-color-primary-darkest: var(--color-pink-6); + --ifm-color-primary-light: var(--color-pink-2); + --ifm-color-primary-lighter: var(--color-pink-1); + --ifm-color-primary-lightest: var(--color-pink-0); + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + + --ifm-font-family-base: "Onest", sans-serif; + --ifm-heading-font-family: "Onest", sans-serif; + + --ifm-landing-page-section-background-color: var(--ifm-color-gray-850); + --ifm-landing-page-feature-card-background-color: var(--ifm-color-gray-800); + --ifm-landing-page-feature-card-box-shadow: 8px 8px 0 0 + var(--ifm-color-gray-700); } .code-block-error-line { - background-color: #ff000020; - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); - border-left: 3px solid #ff000080; + background-color: #ff000020; + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); + border-left: 3px solid #ff000080; } diff --git a/src/pages/index.module.css b/src/pages/index.module.css index c58eeb3..f1b8644 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -4,127 +4,127 @@ */ .heroBanner { - padding: 4rem 0; - display: flex; - gap: 4rem; - text-align: center; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; - - background-color: var(--ifm-background-color); + padding: 4rem 0; + display: flex; + gap: 4rem; + text-align: center; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + + background-color: var(--ifm-background-color); } .heroBannerCode { - background-color: var(--ifm-color-gray-900); - padding: 0.5rem 1rem; - border-radius: 0.5rem; - border: 1px solid var(--ifm-color-gray-500); - color: white; - - .green { - color: var(--color-green-2); - } - - .purpleItalic { - color: var(--color-purple-2); - font-style: italic; - } - - .blue { - color: var(--color-blue-3); - } + background-color: var(--ifm-color-gray-900); + padding: 0.5rem 1rem; + border-radius: 0.5rem; + border: 1px solid var(--ifm-color-gray-500); + color: white; + + .green { + color: var(--color-green-2); + } + + .purpleItalic { + color: var(--color-purple-2); + font-style: italic; + } + + .blue { + color: var(--color-blue-3); + } } .heroBannerContent { - display: flex; - flex-direction: column; - justify-content: center; - text-align: left; - gap: 2rem; - - h1, - p { - margin: 0; - } + display: flex; + flex-direction: column; + justify-content: center; + text-align: left; + gap: 2rem; + + h1, + p { + margin: 0; + } } .heroBannerImage { - display: flex; - align-items: center; - justify-content: center; - - svg { - width: auto; - height: auto; - } + display: flex; + align-items: center; + justify-content: center; + + svg { + width: auto; + height: auto; + } } .buttons { - display: flex; + display: flex; } .brandTitle { + display: inline-flex; + align-items: baseline; + gap: 1rem; + color: var(--ifm-font-color-base); + font-weight: 500; + font-size: 56px; + + .brandTitleParts { display: inline-flex; align-items: baseline; - gap: 1rem; - color: var(--ifm-font-color-base); - font-weight: 500; - font-size: 56px; - - .brandTitleParts { - display: inline-flex; - align-items: baseline; - font-weight: 900; - } + font-weight: 900; + } - .brandLttle { - color: var(--ifm-color-primary); - } + .brandLttle { + color: var(--ifm-color-primary); + } - .brandDot { - color: var(--ifm-color-gray-600); - } + .brandDot { + color: var(--ifm-color-gray-600); + } - .brandCloud { - color: var(--ifm-color-emphasis-900); - } + .brandCloud { + color: var(--ifm-color-emphasis-900); + } } .brandTagline { - color: var(--ifm-font-color-base); - font-weight: 500; - font-size: 1.5rem; - line-height: 1.2; + color: var(--ifm-font-color-base); + font-weight: 500; + font-size: 1.5rem; + line-height: 1.2; } @media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - gap: 2rem; + .heroBanner { + padding: 2rem; + gap: 2rem; - svg { - max-width: 100%; - } + svg { + max-width: 100%; } + } - .heroBannerContent { - gap: 1rem; - } + .heroBannerContent { + gap: 1rem; + } - .brandTitle { - font-size: 32px; - } + .brandTitle { + font-size: 32px; + } - .brandTagline { - font-size: 1rem; - } + .brandTagline { + font-size: 1rem; + } } @media screen and (max-width: 768px) { - .heroBanner { - flex-direction: column-reverse; - gap: 2rem; - } + .heroBanner { + flex-direction: column-reverse; + gap: 2rem; + } } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 77fb25a..eabd28a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -11,76 +11,70 @@ import HomepageSocials from "@site/src/components/HomepageSocials"; import styles from "./index.module.css"; function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); - const brand = (siteConfig.customFields as any)?.brandTitleParts as - | { - lttle: string; - dot: string; - cloud: string; - suffix: string; - taglineHtml: string; - } - | undefined; - return ( -
    -
    - - {brand ? ( - <> - - - - {brand.lttle} - - - {brand.dot} - - - {brand.cloud} - - - {brand.suffix} - - - ) : ( - siteConfig.title - )} - -

    - - curl{" "} - -fsSL{" "} - https://install.lttle.sh |{" "} - bash - -

    - - start now - -
    -
    + const { siteConfig } = useDocusaurusContext(); + const brand = (siteConfig.customFields as any)?.brandTitleParts as + | { + lttle: string; + dot: string; + cloud: string; + suffix: string; + taglineHtml: string; + } + | undefined; + return ( +
    +
    + + {brand ? ( + <> + + + {brand.lttle} + {brand.dot} + {brand.cloud} + + {brand.suffix} + + + ) : ( + siteConfig.title + )} + +

    + + curl{" "} + -fsSL{" "} + https://install.lttle.sh |{" "} + bash + +

    + + start now + +
    +
    -
    - -
    -
    - ); +
    + +
    +
    + ); } export default function Home(): ReactNode { - const { siteConfig } = useDocusaurusContext(); - return ( - - -
    - - -
    -     - ); + const { siteConfig } = useDocusaurusContext(); + return ( + + +
    + + +
    +     + ); } diff --git a/src/theme/Footer/Copyright/index.tsx b/src/theme/Footer/Copyright/index.tsx index fcfc8b3..508da70 100644 --- a/src/theme/Footer/Copyright/index.tsx +++ b/src/theme/Footer/Copyright/index.tsx @@ -1,13 +1,13 @@ -import React, {type ReactNode} from 'react'; -import type {Props} from '@theme/Footer/Copyright'; +import React, { type ReactNode } from "react"; +import type { Props } from "@theme/Footer/Copyright"; -export default function FooterCopyright({copyright}: Props): ReactNode { +export default function FooterCopyright({ copyright }: Props): ReactNode { return (
    ); } diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx index 1501903..133c8ca 100644 --- a/src/theme/Footer/Layout/index.tsx +++ b/src/theme/Footer/Layout/index.tsx @@ -6,67 +6,65 @@ import FooterLogo from "@site/static/img/footer-logo.svg"; import styles from "./styles.module.css"; export default function FooterLayout({ - style, - links, - logo, - copyright, + style, + links, + logo, + copyright, }: Props): ReactNode { - const [windowWidth, setWindowWidth] = useState(0); - const logoHeight = windowWidth * 0.13; + const [windowWidth, setWindowWidth] = useState(0); + const logoHeight = windowWidth * 0.13; - useEffect(() => { - setWindowWidth(window.innerWidth); + useEffect(() => { + setWindowWidth(window.innerWidth); - const handleResize = () => { - setWindowWidth(window.innerWidth); - }; - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, []); + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); - return ( -
    -
    - {links} - {(logo || copyright) && ( -
    - {logo && ( -
    {logo}
    - )} - {copyright} -
    - )} -
    -
    - - -
    -
    - ); + return ( +
    +
    + {links} + {(logo || copyright) && ( +
    + {logo &&
    {logo}
    } + {copyright} +
    + )} +
    +
    + + +
    +
    + ); } diff --git a/src/theme/Footer/Layout/styles.module.css b/src/theme/Footer/Layout/styles.module.css index 5a92bb3..dc866bd 100644 --- a/src/theme/Footer/Layout/styles.module.css +++ b/src/theme/Footer/Layout/styles.module.css @@ -1,28 +1,28 @@ .footer { - display: flex; - flex-direction: column; - gap: 3rem; + display: flex; + flex-direction: column; + gap: 3rem; - overflow: hidden; - width: 100%; - max-width: 100vw; - padding-bottom: 0; + overflow: hidden; + width: 100%; + max-width: 100vw; + padding-bottom: 0; } .footerLogoContainer { - height: 300px; - position: relative; - overflow: visible; + height: 300px; + position: relative; + overflow: visible; - svg { - position: absolute; + svg { + position: absolute; - &:first-child { - left: -50%; - } + &:first-child { + left: -50%; + } - &:last-child { - right: -50%; - } + &:last-child { + right: -50%; } + } } diff --git a/src/theme/Footer/LinkItem/index.tsx b/src/theme/Footer/LinkItem/index.tsx index 59efcba..c0dfe6e 100644 --- a/src/theme/Footer/LinkItem/index.tsx +++ b/src/theme/Footer/LinkItem/index.tsx @@ -1,19 +1,19 @@ -import React, {type ReactNode} from 'react'; -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import isInternalUrl from '@docusaurus/isInternalUrl'; -import IconExternalLink from '@theme/Icon/ExternalLink'; -import type {Props} from '@theme/Footer/LinkItem'; +import React, { type ReactNode } from "react"; +import clsx from "clsx"; +import Link from "@docusaurus/Link"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import isInternalUrl from "@docusaurus/isInternalUrl"; +import IconExternalLink from "@theme/Icon/ExternalLink"; +import type { Props } from "@theme/Footer/LinkItem"; -export default function FooterLinkItem({item}: Props): ReactNode { - const {to, href, label, prependBaseUrlToHref, className, ...props} = item; +export default function FooterLinkItem({ item }: Props): ReactNode { + const { to, href, label, prependBaseUrlToHref, className, ...props } = item; const toUrl = useBaseUrl(to); - const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true}); + const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true }); return ( + {...props} + > {label} {href && !isInternalUrl(href) && } diff --git a/src/theme/Footer/Links/MultiColumn/index.tsx b/src/theme/Footer/Links/MultiColumn/index.tsx index 9afc9f6..f1fc498 100644 --- a/src/theme/Footer/Links/MultiColumn/index.tsx +++ b/src/theme/Footer/Links/MultiColumn/index.tsx @@ -8,45 +8,45 @@ type ColumnType = Props["columns"][number]; type ColumnItemType = ColumnType["items"][number]; function ColumnLinkItem({ item }: { item: ColumnItemType }) { - return item.html ? ( -
  • - ) : ( -
  • - -
    • - ); + return item.html ? ( +
  • + ) : ( +
  • + +
    • + ); } function Column({ column }: { column: ColumnType }) { - return ( -
    -

    {column.title}

    -
      - {column.items.map((item, i) => ( - - ))} -
    -
    - ); + return ( +
    +

    {column.title}

    +
      + {column.items.map((item, i) => ( + + ))} +
    +
    + ); } export default function FooterLinksMultiColumn({ columns }: Props): ReactNode { - return ( -
    - {columns.map((column, i) => ( - - ))} -
    - ); + return ( +
    + {columns.map((column, i) => ( + + ))} +
    + ); } diff --git a/src/theme/Footer/Links/Simple/index.tsx b/src/theme/Footer/Links/Simple/index.tsx index dc6cf9d..fc4f2ec 100644 --- a/src/theme/Footer/Links/Simple/index.tsx +++ b/src/theme/Footer/Links/Simple/index.tsx @@ -1,26 +1,26 @@ -import React, {type ReactNode} from 'react'; -import clsx from 'clsx'; -import LinkItem from '@theme/Footer/LinkItem'; -import type {Props} from '@theme/Footer/Links/Simple'; +import React, { type ReactNode } from "react"; +import clsx from "clsx"; +import LinkItem from "@theme/Footer/LinkItem"; +import type { Props } from "@theme/Footer/Links/Simple"; function Separator() { return ·; } -function SimpleLinkItem({item}: {item: Props['links'][number]}) { +function SimpleLinkItem({ item }: { item: Props["links"][number] }) { return item.html ? ( ) : ( ); } -export default function FooterLinksSimple({links}: Props): ReactNode { +export default function FooterLinksSimple({ links }: Props): ReactNode { return (
    diff --git a/src/theme/Footer/Links/index.tsx b/src/theme/Footer/Links/index.tsx index 2dd3d84..76bd9f4 100644 --- a/src/theme/Footer/Links/index.tsx +++ b/src/theme/Footer/Links/index.tsx @@ -1,11 +1,11 @@ -import React, {type ReactNode} from 'react'; +import React, { type ReactNode } from "react"; -import {isMultiColumnFooterLinks} from '@docusaurus/theme-common'; -import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn'; -import FooterLinksSimple from '@theme/Footer/Links/Simple'; -import type {Props} from '@theme/Footer/Links'; +import { isMultiColumnFooterLinks } from "@docusaurus/theme-common"; +import FooterLinksMultiColumn from "@theme/Footer/Links/MultiColumn"; +import FooterLinksSimple from "@theme/Footer/Links/Simple"; +import type { Props } from "@theme/Footer/Links"; -export default function FooterLinks({links}: Props): ReactNode { +export default function FooterLinks({ links }: Props): ReactNode { return isMultiColumnFooterLinks(links) ? ( ) : ( diff --git a/src/theme/Footer/Logo/index.tsx b/src/theme/Footer/Logo/index.tsx index 8274216..2aa257a 100644 --- a/src/theme/Footer/Logo/index.tsx +++ b/src/theme/Footer/Logo/index.tsx @@ -1,21 +1,21 @@ -import React, {type ReactNode} from 'react'; -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import {useBaseUrlUtils} from '@docusaurus/useBaseUrl'; -import ThemedImage from '@theme/ThemedImage'; -import type {Props} from '@theme/Footer/Logo'; +import React, { type ReactNode } from "react"; +import clsx from "clsx"; +import Link from "@docusaurus/Link"; +import { useBaseUrlUtils } from "@docusaurus/useBaseUrl"; +import ThemedImage from "@theme/ThemedImage"; +import type { Props } from "@theme/Footer/Logo"; -import styles from './styles.module.css'; +import styles from "./styles.module.css"; -function LogoImage({logo}: Props) { - const {withBaseUrl} = useBaseUrlUtils(); +function LogoImage({ logo }: Props) { + const { withBaseUrl } = useBaseUrlUtils(); const sources = { light: withBaseUrl(logo.src), dark: withBaseUrl(logo.srcDark ?? logo.src), }; return ( + target={logo.target} + > ) : ( diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx index 595bc51..a7862df 100644 --- a/src/theme/Footer/index.tsx +++ b/src/theme/Footer/index.tsx @@ -1,17 +1,17 @@ -import React, {type ReactNode} from 'react'; +import React, { type ReactNode } from "react"; -import {useThemeConfig} from '@docusaurus/theme-common'; -import FooterLinks from '@theme/Footer/Links'; -import FooterLogo from '@theme/Footer/Logo'; -import FooterCopyright from '@theme/Footer/Copyright'; -import FooterLayout from '@theme/Footer/Layout'; +import { useThemeConfig } from "@docusaurus/theme-common"; +import FooterLinks from "@theme/Footer/Links"; +import FooterLogo from "@theme/Footer/Logo"; +import FooterCopyright from "@theme/Footer/Copyright"; +import FooterLayout from "@theme/Footer/Layout"; function Footer(): ReactNode { - const {footer} = useThemeConfig(); + const { footer } = useThemeConfig(); if (!footer) { return null; } - const {copyright, links, logo, style} = footer; + const { copyright, links, logo, style } = footer; return ( ]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while|deploy|login|machine|service|svc|namespace|ns|volume|certificate|cert)(?=$|[)\s;|&])/; } else { console.error( - "Could not add our custom functions & keywords to prismjs bash component" + "Could not add our custom functions & keywords to prismjs bash component", ); }