diff --git a/application/docusaurus.config.ts b/application/docusaurus.config.ts index e01de442..5a1e749f 100644 --- a/application/docusaurus.config.ts +++ b/application/docusaurus.config.ts @@ -7,7 +7,6 @@ import type * as Preset from '@docusaurus/preset-classic'; const config: Config = { title: 'Hoverkraft Docs', tagline: 'Documentation for Hoverkraft open-source projects (aka openkraft)', - favicon: 'img/favicon.ico', // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future future: { @@ -46,13 +45,12 @@ const config: Config = { editUrl: 'https://github.com/hoverkraft-tech/public-docs/tree/main/', }, - theme: { - customCss: './src/css/custom.css', - }, } satisfies Preset.Options, ], ], + themes: ['@hoverkraft/docusaurus-theme'], + themeConfig: { // Replace with your project's social card image: 'img/docusaurus-social-card.jpg', @@ -61,10 +59,6 @@ const config: Config = { }, navbar: { title: 'Hoverkraft Docs', - logo: { - alt: 'Hoverkraft Logo', - src: 'img/logo.svg', - }, items: [ { type: 'docSidebar', diff --git a/application/package-lock.json b/application/package-lock.json index 016d5106..fced559b 100644 --- a/application/package-lock.json +++ b/application/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@docusaurus/core": "3.9.2", "@docusaurus/preset-classic": "3.9.2", + "@hoverkraft/docusaurus-theme": "^0.1.1", "@mdx-js/react": "^3.0.0", "@octokit/rest": "^22.0.0", "clsx": "^2.0.0", @@ -27,6 +28,36 @@ "node": ">=20.0" } }, + "../../../../../../tmp/docusaurus-theme/packages/theme": { + "name": "@hoverkraft/docusaurus-theme", + "version": "1.0.0", + "extraneous": true, + "license": "MIT", + "devDependencies": { + "@docusaurus/core": "^3.9.2", + "@docusaurus/theme-common": "^3.9.2", + "@docusaurus/types": "^3.9.2", + "@docusaurus/utils": "^3.9.2", + "@docusaurus/utils-validation": "^3.9.2", + "@types/react": "^19.2.2", + "@types/react-dom": "^19.2.2", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "typescript": "^5.9.3" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@docusaurus/core": "^3.0.0", + "@docusaurus/theme-common": "^3.0.0", + "@docusaurus/types": "^3.0.0", + "@docusaurus/utils": "^3.0.0", + "@docusaurus/utils-validation": "^3.0.0", + "react": "^19.2.0", + "react-dom": "^19.2.0" + } + }, "node_modules/@ai-sdk/gateway": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-2.0.0.tgz", @@ -4019,6 +4050,24 @@ "@hapi/hoek": "^9.0.0" } }, + "node_modules/@hoverkraft/docusaurus-theme": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@hoverkraft/docusaurus-theme/-/docusaurus-theme-0.1.1.tgz", + "integrity": "sha512-9e22zJtRTTEedOQBFAWDeO5kqjzoy2mjae3naKryniNuZukR6YN1H68lIcgsN6aowT15HI/1qeUOEOXCXFCpTg==", + "license": "MIT", + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@docusaurus/core": "^3.0.0", + "@docusaurus/theme-common": "^3.0.0", + "@docusaurus/types": "^3.0.0", + "@docusaurus/utils": "^3.0.0", + "@docusaurus/utils-validation": "^3.0.0", + "react": "^19.2.0", + "react-dom": "^19.2.0" + } + }, "node_modules/@jest/schemas": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz", diff --git a/application/package.json b/application/package.json index c4ef39da..ad120798 100644 --- a/application/package.json +++ b/application/package.json @@ -21,6 +21,7 @@ "dependencies": { "@docusaurus/core": "3.9.2", "@docusaurus/preset-classic": "3.9.2", + "@hoverkraft/docusaurus-theme": "^0.1.1", "@mdx-js/react": "^3.0.0", "@octokit/rest": "^22.0.0", "clsx": "^2.0.0", diff --git a/application/src/components/HomepageFeatures/index.tsx b/application/src/components/HomepageFeatures/index.tsx deleted file mode 100644 index 8df4e9f6..00000000 --- a/application/src/components/HomepageFeatures/index.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import type {ReactNode} from 'react'; -import clsx from 'clsx'; -import Heading from '@theme/Heading'; -import styles from './styles.module.css'; - -type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: ReactNode; -}; - -const FeatureList: FeatureItem[] = [ - { - title: 'Open Source First', - Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, - description: ( - <> - All Hoverkraft projects are open source and community-driven. - Explore our repositories and contribute to the ecosystem. - - ), - }, - { - title: 'Developer Friendly', - Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, - description: ( - <> - Our documentation is built by developers, for developers. - Find comprehensive guides, APIs, and examples to get you started quickly. - - ), - }, - { - title: 'Community Powered', - Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, - description: ( - <> - Join our growing community of developers building amazing things - with Hoverkraft technologies and contributing back to the ecosystem. - - ), - }, -]; - -function Feature({title, Svg, description}: FeatureItem) { - return ( -
-
- -
-
- {title} -

{description}

-
-
- ); -} - -export default function HomepageFeatures(): ReactNode { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); -} diff --git a/application/src/components/HomepageFeatures/styles.module.css b/application/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index b248eb2e..00000000 --- a/application/src/components/HomepageFeatures/styles.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/application/src/css/custom.css b/application/src/css/custom.css deleted file mode 100644 index 9071054a..00000000 --- a/application/src/css/custom.css +++ /dev/null @@ -1,146 +0,0 @@ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ - -/* Import Hoverkraft brand fonts */ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600;700&display=swap"); - -/* Hoverkraft brand color palette */ -:root { - /* Hoverkraft brand colors */ - --hk-primary: #1d2026; - --hk-secondary: #1998ff; - --hk-accent: #ff5a02; - --hk-info: #00b3ff; - --hk-warning: #ffe671; - --hk-danger: #ff696d; - --hk-success: #00d663; - --hk-light: #506690; - --hk-dark: #000000; - - /* Docusaurus theme variables using Hoverkraft colors */ - --ifm-color-primary: #1998ff; - --ifm-color-primary-dark: #0585e6; - --ifm-color-primary-darker: #0580db; - --ifm-color-primary-darkest: #046ab5; - --ifm-color-primary-light: #33abff; - --ifm-color-primary-lighter: #40b0ff; - --ifm-color-primary-lightest: #66c2ff; - - /* Secondary colors */ - --ifm-color-secondary: #ff5a02; - --ifm-color-info: #00b3ff; - --ifm-color-success: #00d663; - --ifm-color-warning: #ffe671; - --ifm-color-danger: #ff696d; - - /* Typography */ - --ifm-font-family-base: - "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Helvetica Neue", Arial, sans-serif; - --ifm-font-family-monospace: - "Roboto Mono", "Monaco", "Consolas", "Courier New", monospace; - --ifm-code-font-size: 95%; - - /* Background and text colors */ - --ifm-background-color: #ffffff; - --ifm-navbar-background-color: #ffffff; - --ifm-footer-background-color: #1d2026; - --ifm-footer-color: #ffffff; - - /* Code highlighting */ - --docusaurus-highlighted-code-line-bg: rgba(25, 152, 255, 0.1); - - /* Custom properties for components */ - --ifm-navbar-shadow: 0 1px 3px rgba(29, 32, 38, 0.1); - --ifm-button-border-radius: 8px; -} - -/* Dark mode colors using Hoverkraft palette */ -[data-theme="dark"] { - --ifm-color-primary: #1998ff; - --ifm-color-primary-dark: #0585e6; - --ifm-color-primary-darker: #0580db; - --ifm-color-primary-darkest: #046ab5; - --ifm-color-primary-light: #33abff; - --ifm-color-primary-lighter: #40b0ff; - --ifm-color-primary-lightest: #66c2ff; - - /* Dark theme background */ - --ifm-background-color: #1d2026; - --ifm-background-surface-color: #252832; - - /* Dark theme text */ - --ifm-font-color-base: #ffffff; - --ifm-font-color-secondary: #506690; - - /* Dark theme navbar */ - --ifm-navbar-background-color: #252832; - --ifm-navbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); - - /* Code highlighting for dark mode */ - --docusaurus-highlighted-code-line-bg: rgba(25, 152, 255, 0.2); -} - -/* Enhanced button styles with Hoverkraft branding */ -.button--primary { - background: linear-gradient(45deg, #1998ff, #ff5a02); - border: none; - transition: all 0.3s ease; -} - -.button--primary:hover { - background: linear-gradient(45deg, #0585e6, #e64a00); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(25, 152, 255, 0.3); -} - -/* Navbar enhancements */ -.navbar { - backdrop-filter: blur(10px); - background: rgba(255, 255, 255, 0.95) !important; -} - -[data-theme="dark"] .navbar { - background: rgba(37, 40, 50, 0.95) !important; -} - -/* Footer styling with Hoverkraft colors */ -.footer--dark { - background: linear-gradient(135deg, #1d2026 0%, #252832 100%); -} - -/* Custom link colors */ -a { - color: #1998ff; -} - -a:hover { - color: #ff5a02; - text-decoration: none; -} - -/* Enhanced focus states for accessibility */ -button:focus, -.button:focus, -a:focus { - outline: 2px solid #1998ff; - outline-offset: 2px; -} - -/* Code block enhancements */ -.prism-code { - border-radius: 8px; -} - -/* Table of contents styling */ -.table-of-contents__link { - color: #506690; -} - -.table-of-contents__link:hover, -.table-of-contents__link--active { - color: #1998ff; -} diff --git a/application/src/pages/index.module.css b/application/src/pages/index.module.css deleted file mode 100644 index 4637f98f..00000000 --- a/application/src/pages/index.module.css +++ /dev/null @@ -1,422 +0,0 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -/* Hero Section with Hoverkraft branding */ -.hero { - background: linear-gradient(135deg, #1d2026 0%, #506690 50%, #1998ff 100%); - color: white; - padding: 0; - min-height: 600px; - display: flex; - align-items: center; - overflow: hidden; - position: relative; -} - -.hero::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: url('data:image/svg+xml,'); - opacity: 0.2; -} - -.heroContainer { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; - width: 100%; - position: relative; - z-index: 1; -} - -.heroContent { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 4rem; - align-items: center; - min-height: 500px; -} - -.heroText { - text-align: left; -} - -.heroTitle { - font-size: 3.5rem; - font-weight: 800; - margin-bottom: 1.5rem; - line-height: 1.1; - color: white; -} - -.brandHighlight { - background: linear-gradient(45deg, #1998ff, #ff5a02); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-weight: 900; -} - -.heroSubtitle { - font-size: 1.25rem; - opacity: 0.9; - margin-bottom: 2.5rem; - line-height: 1.6; - max-width: 500px; -} - -.heroActions { - display: flex; - gap: 1rem; - flex-wrap: wrap; -} - -.ctaPrimary { - background: linear-gradient(45deg, #1998ff, #ff5a02); - color: white !important; - padding: 1rem 2rem; - border-radius: 50px; - font-weight: 600; - text-decoration: none !important; - transition: all 0.3s ease; - display: inline-block; - box-shadow: 0 4px 15px rgba(25, 152, 255, 0.3); -} - -.ctaPrimary:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(25, 152, 255, 0.4); -} - -.ctaSecondary { - background: transparent; - color: white !important; - padding: 1rem 2rem; - border-radius: 50px; - font-weight: 600; - text-decoration: none !important; - transition: all 0.3s ease; - border: 2px solid rgba(255, 255, 255, 0.3); - display: inline-block; -} - -.ctaSecondary:hover { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.5); -} - -/* Hero Visual */ -.heroVisual { - display: flex; - justify-content: center; - align-items: center; -} - -.floatingCard { - background: rgba(255, 255, 255, 0.95); - border-radius: 16px; - padding: 0; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); - max-width: 400px; - animation: float 6s ease-in-out infinite; - backdrop-filter: blur(10px); -} - -@keyframes float { - 0%, - 100% { - transform: translateY(0px); - } - 50% { - transform: translateY(-10px); - } -} - -.cardHeader { - padding: 1rem 1.5rem; - border-bottom: 1px solid #e1e5e9; -} - -.cardDots { - display: flex; - gap: 0.5rem; -} - -.cardDots span { - width: 12px; - height: 12px; - border-radius: 50%; -} - -.cardDots span:nth-child(1) { - background: #ff5f56; -} -.cardDots span:nth-child(2) { - background: #ffbd2e; -} -.cardDots span:nth-child(3) { - background: #27ca3f; -} - -.cardContent { - padding: 1.5rem; -} - -.codeBlock { - font-family: "Monaco", "Consolas", monospace; - font-size: 0.9rem; - line-height: 1.8; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.codeComment { - color: #6a737d; -} - -.codeCommand { - color: #24292e; - font-weight: 600; -} - -.heroImage { - width: 100%; - height: auto; - border-radius: 8px; - display: block; -} - -/* Value Props Section with Hoverkraft styling */ -.valueProps { - padding: 6rem 0; - background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; -} - -.sectionTitle { - font-size: 2.5rem; - font-weight: 700; - text-align: center; - margin-bottom: 3rem; - color: #1a202c; -} - -.sectionDescription { - font-size: 1.1rem; - text-align: center; - margin-bottom: 3rem; - color: #4a5568; - max-width: 600px; - margin-left: auto; - margin-right: auto; -} - -.valuesGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2rem; -} - -.valueCard { - background: white; - padding: 2rem; - border-radius: 16px; - text-align: center; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); - transition: all 0.3s ease; - border: 1px solid #e2e8f0; -} - -.valueCard:hover { - transform: translateY(-4px); - box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1); -} - -.valueIcon { - font-size: 3rem; - margin-bottom: 1rem; - display: block; -} - -.valueTitle { - font-size: 1.25rem; - font-weight: 600; - margin-bottom: 1rem; - color: #1a202c; -} - -.valueDescription { - color: #4a5568; - line-height: 1.6; - margin: 0; -} - -/* Projects Section */ -.projects { - padding: 6rem 0; - background: white; -} - -.projectsHeader { - text-align: center; - margin-bottom: 4rem; -} - -.projectsGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 2rem; - margin-bottom: 3rem; -} - -.projectCard { - background: #f8fafc; - border-radius: 16px; - padding: 2rem; - border: 1px solid #e2e8f0; - transition: all 0.3s ease; -} - -.projectCard:hover { - transform: translateY(-2px); - box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); - border-color: #1998ff; -} - -.projectHeader { - display: flex; - align-items: flex-start; - gap: 1rem; - margin-bottom: 1rem; -} - -.projectIcon { - font-size: 2rem; - flex-shrink: 0; -} - -.projectTitle { - font-size: 1.25rem; - font-weight: 600; - margin-bottom: 0.25rem; - color: #1a202c; -} - -.projectMeta { - font-size: 0.9rem; - color: #1998ff; - margin: 0; - font-weight: 500; -} - -.projectDescription { - color: #4a5568; - line-height: 1.6; - margin-bottom: 1.5rem; -} - -.projectFooter { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; -} - -.projectTag { - background: #e2e8f0; - color: #4a5568; - padding: 0.25rem 0.75rem; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 500; -} - -.projectsCTA { - text-align: center; - margin-top: 3rem; -} - -/* Responsive Design */ -@media screen and (max-width: 996px) { - .heroContent { - grid-template-columns: 1fr; - gap: 3rem; - text-align: center; - } - - .heroText { - text-align: center; - } - - .heroTitle { - font-size: 2.5rem; - } - - .heroActions { - justify-content: center; - } - - .floatingCard { - max-width: 350px; - } - - .valuesGrid { - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - } - - .projectsGrid { - grid-template-columns: 1fr; - } - - .sectionTitle { - font-size: 2rem; - } -} - -@media screen and (max-width: 768px) { - .hero { - min-height: 500px; - } - - .heroContainer { - padding: 2rem 1rem; - } - - .heroTitle { - font-size: 2rem; - } - - .heroSubtitle { - font-size: 1.1rem; - } - - .ctaPrimary, - .ctaSecondary { - padding: 0.875rem 1.5rem; - } - - .container { - padding: 0 1rem; - } - - .valueProps, - .projects { - padding: 4rem 0; - } - - .valueCard, - .projectCard { - padding: 1.5rem; - } -} diff --git a/application/src/pages/index.tsx b/application/src/pages/index.tsx index f54c2967..758818d7 100644 --- a/application/src/pages/index.tsx +++ b/application/src/pages/index.tsx @@ -1,61 +1,47 @@ import type {ReactNode} from 'react'; -import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; - -import styles from './index.module.css'; +import { HoverkraftHero, HoverkraftBrandHighlight } from '@theme/hoverscape/HoverkraftHero'; +import { HoverkraftFeatureList } from '@theme/hoverscape/HoverkraftFeatureList'; +import { HoverkraftProjectCard } from '@theme/hoverscape/HoverkraftProjectCard'; function HeroSection() { return ( -
-
-
-
-

- Welcome to Hoverkraft -

-

- Your gateway to open-source innovation. Discover, contribute, and build amazing things with our developer-first ecosystem. -

-
- - Explore Projects - - - View on GitHub - -
-
-
-
-
-
- - - -
-
-
- Hoverkraft Platform -
-
-
-
-
-
+ + Welcome to Hoverkraft + + } + description="Your gateway to open-source innovation. Discover, contribute, and build amazing things with our developer-first ecosystem." + supportingVisual={ + Hoverkraft Platform + } + actions={[ + { + label: 'Explore Projects', + to: '/docs/intro', + variant: 'primary', + }, + { + label: 'View on GitHub', + href: 'https://github.com/hoverkraft-tech', + variant: 'secondary', + target: '_blank', + }, + ]} + align="left" + tone="midnight" + /> ); } function ValuePropsSection() { - const values = [ + const features = [ { icon: '🔓', title: 'Open Source', @@ -79,18 +65,10 @@ function ValuePropsSection() { ]; return ( -
-
-

Why Choose Hoverkraft?

-
- {values.map((value, idx) => ( -
-
{value.icon}
-

{value.title}

-

{value.description}

-
- ))} -
+
+
+

Why Choose Hoverkraft?

+
); @@ -98,77 +76,64 @@ function ValuePropsSection() { function ProjectsSection() { return ( -
-
-
-

Explore Our Ecosystem

-

+

+
+
+

Explore Our Ecosystem

+

Discover a curated collection of tools, libraries, and frameworks designed to accelerate your development workflow.

-
-
-
-
⚡
-
-

compose-action

-

⭐ 190 • TypeScript

-
-
-

- This action runs your docker-compose file and clean up before action finished. Available on GitHub Marketplace. -

-
- github-actions - docker-compose - ci -
-
+
+ -
-
-
🔧
-
-

bitnami-depreciation

-

⭐ 6 • Shell

-
-
-

- Help you to survive the Bitnami deprecation on 2025-08-28. Migration tools and guides for affected charts. -

-
- bitnami - helm - kubernetes -
-
+ -
-
-
⚡
-
-

ci-github-container

-

⭐ 4 • Smarty

-
-
-

- Opinionated GitHub Actions and workflows for continuous integration in container (OCI) context. -

-
- containers - github-actions - ci -
-
+
-