diff --git a/.gitignore b/.gitignore index 3ccda25c..170070a4 100644 --- a/.gitignore +++ b/.gitignore @@ -25,9 +25,6 @@ dist-ssr *.sw? doc_build -.nx/cache -.nx/workspace-data - .env # Local Netlify folder @@ -37,5 +34,3 @@ yarn.lock package-lock.yaml temp-search-index.json -.cursor/rules/nx-rules.mdc -.github/instructions/nx.instructions.md diff --git a/.nvmrc b/.nvmrc index 92f279e3..18c92ea9 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v22 \ No newline at end of file +v24 \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 1e8afa28..00000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,9 +0,0 @@ -## 0.0.2 (2025-03-17) - -### 🩹 Fixes - -- Adding the initial changelog and release mechanisms ([7eff85c](https://github.com/ZephyrCloudIO/zephyr-documentation/commit/7eff85c)) - -### ❀️ Thank You - -- Zack Chapple \ No newline at end of file diff --git a/README.md b/README.md index a8919f3b..f7f980a6 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,91 @@ -# Zephyr Cloud Docs +# Zephyr Documentation - Module Federation -Welcome to the Zephyr Cloud documentation repository. +This repository contains the Zephyr Cloud documentation implemented as a module federation architecture with multiple independent micro-frontend applications. -[![Netlify Status](https://api.netlify.com/api/v1/badges/a6a769b6-39a8-4a3b-84f4-d4b970f68c1f/deploy-status)](https://app.netlify.com/sites/zephyr-cloud-docs/deploys) +## Architecture -## Building docs +- **Host App** (`apps/host/`): Main documentation site running on port 3030 +- **AI App** (`apps/ai/`): AI and machine learning documentation on port 3001 +- **Cloud App** (`apps/cloud/`): Cloud deployment and infrastructure on port 3002 +- **Mobile App** (`apps/mobile/`): Mobile development and React Native on port 3003 +- **Sidepanel App** (`apps/sidepanel/`): Browser extension and tools on port 3004 +- **Web App** (`apps/web/`): Web development and frontend guides on port 3005 -Built using [Rspress](https://rspress.dev/). -Run: +## Getting Started +### Prerequisites + +- Node.js 22.x +- pnpm 10.x + +### Installation + +1. Install dependencies for all applications: + ```bash + pnpm install:all + ``` + +2. Start all applications in development mode: + ```bash + pnpm dev + ``` + +3. Visit the host application at [http://localhost:3030](http://localhost:3030) + +4. Navigate to `/apps` to see the module federation navigation page + +### Individual App Commands + +Start individual applications: +```bash +pnpm dev:host # Host app on port 3030 +pnpm dev:ai # AI docs on port 3001 +pnpm dev:cloud # Cloud docs on port 3002 +pnpm dev:mobile # Mobile docs on port 3003 +pnpm dev:sidepanel # Sidepanel docs on port 3004 +pnpm dev:web # Web docs on port 3005 +``` + +Build individual applications: +```bash +pnpm build:host +pnpm build:ai +pnpm build:cloud +pnpm build:mobile +pnpm build:sidepanel +pnpm build:web +``` + +### Build All + +Build all applications: ```bash -pnpm install pnpm build ``` -## Sitemap Note -Because sitemap is not visible to the bundler (for now). We need to manually update -the site map file in the root of the repo when adding pages. +## Module Federation Configuration + +Each remote application exposes: +- `./App`: Main documentation index +- `./Guide`: Guide section + +The host application consumes all remote applications and provides a unified navigation experience. + +## Development Workflow + +1. Each app can be developed independently +2. Changes are reflected immediately with hot reload +3. The host app provides navigation between all documentation sections +4. Each app maintains its own dependencies and can use different RSPress versions if needed + +## Technology Stack + +- **RSPress**: Documentation framework +- **Module Federation**: Micro-frontend architecture +- **React**: UI framework +- **TypeScript**: Type safety +- **Tailwind CSS**: Styling (in host app) + +## Deployment -## Contributors -![Alt](https://repobeats.axiom.co/api/embed/fd0de09aa25d444bf55d21d43902d7c71f4e69d2.svg "Repobeats analytics image") +Each application can be deployed independently to different domains or the same domain with different paths. Update the `remotes` configuration in the host app's module federation config to point to the deployed URLs. \ No newline at end of file diff --git a/apps/ai/.gitignore b/apps/ai/.gitignore new file mode 100644 index 00000000..23a4bc92 --- /dev/null +++ b/apps/ai/.gitignore @@ -0,0 +1,14 @@ +# Local +.DS_Store +*.local +*.log* + +# Dist +node_modules +dist/ +doc_build/ + +# IDE +.vscode/* +!.vscode/extensions.json +.idea diff --git a/apps/ai/.prettierignore b/apps/ai/.prettierignore new file mode 100644 index 00000000..ac66857c --- /dev/null +++ b/apps/ai/.prettierignore @@ -0,0 +1,4 @@ +# Lock files +package-lock.json +pnpm-lock.yaml +yarn.lock diff --git a/apps/ai/.prettierrc b/apps/ai/.prettierrc new file mode 100644 index 00000000..544138be --- /dev/null +++ b/apps/ai/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/apps/ai/README.md b/apps/ai/README.md new file mode 100644 index 00000000..8a9c78ca --- /dev/null +++ b/apps/ai/README.md @@ -0,0 +1,29 @@ +# Rspress website + +## Setup + +Install the dependencies: + +```bash +npm install +``` + +## Get started + +Start the dev server: + +```bash +npm run dev +``` + +Build the website for production: + +```bash +npm run build +``` + +Preview the production build locally: + +```bash +npm run preview +``` diff --git a/apps/ai/docs/_nav.json b/apps/ai/docs/_nav.json new file mode 100644 index 00000000..f4a2b6c0 --- /dev/null +++ b/apps/ai/docs/_nav.json @@ -0,0 +1,11 @@ +[ + { + "text": "Hello world", + "link": "/hello/", + "activeMatch": "/hello/" + }, + { + "text": "API", + "link": "https://rspress.rs/api/index.html" + } +] diff --git a/apps/ai/docs/hello.mdx b/apps/ai/docs/hello.mdx new file mode 100644 index 00000000..0e509541 --- /dev/null +++ b/apps/ai/docs/hello.mdx @@ -0,0 +1,5 @@ +# Hello world! + +## Start + +Write something to build your own docs! 🎁 diff --git a/apps/ai/docs/index.mdx b/apps/ai/docs/index.mdx new file mode 100644 index 00000000..ffc0c6e4 --- /dev/null +++ b/apps/ai/docs/index.mdx @@ -0,0 +1,7 @@ +--- +pageType: custom +navbar: false +sidebar: false +outline: false +lastUpdated: false +--- diff --git a/apps/ai/docs/public/rspress-dark-logo.png b/apps/ai/docs/public/rspress-dark-logo.png new file mode 100644 index 00000000..928bcc91 Binary files /dev/null and b/apps/ai/docs/public/rspress-dark-logo.png differ diff --git a/apps/ai/docs/public/rspress-icon.png b/apps/ai/docs/public/rspress-icon.png new file mode 100644 index 00000000..6be2af2f Binary files /dev/null and b/apps/ai/docs/public/rspress-icon.png differ diff --git a/apps/ai/docs/public/rspress-light-logo.png b/apps/ai/docs/public/rspress-light-logo.png new file mode 100644 index 00000000..1e3442ee Binary files /dev/null and b/apps/ai/docs/public/rspress-light-logo.png differ diff --git a/apps/ai/eslint.config.mjs b/apps/ai/eslint.config.mjs new file mode 100644 index 00000000..84a10c6e --- /dev/null +++ b/apps/ai/eslint.config.mjs @@ -0,0 +1,10 @@ +import js from '@eslint/js'; +import globals from 'globals'; +import ts from 'typescript-eslint'; + +export default [ + { languageOptions: { globals: globals.browser } }, + js.configs.recommended, + ...ts.configs.recommended, + { ignores: ['dist/'] }, +]; diff --git a/apps/ai/module-federation.config.ts b/apps/ai/module-federation.config.ts new file mode 100644 index 00000000..0856566f --- /dev/null +++ b/apps/ai/module-federation.config.ts @@ -0,0 +1,10 @@ +import { createModuleFederationConfig } from '@module-federation/rspress-plugin'; + +export default createModuleFederationConfig({ + filename: 'remoteEntry.js', + name: 'ai_docs', + exposes: { + './intro': './docs/index.mdx', + './hello': './docs/hello.mdx', + }, +}); diff --git a/apps/ai/package.json b/apps/ai/package.json new file mode 100644 index 00000000..631690dd --- /dev/null +++ b/apps/ai/package.json @@ -0,0 +1,25 @@ +{ + "name": "ai", + "version": "1.0.0", + "private": true, + "scripts": { + "build": "rspress build", + "dev": "rspress dev --port 3001", + "format": "prettier --write .", + "lint": "eslint .", + "preview": "rspress preview" + }, + "dependencies": { + "@module-federation/rspress-plugin": "^0.18.3", + "@rspress/core": "2.0.0-beta.31", + "@zephyr-docs/shared": "workspace:*" + }, + "devDependencies": { + "@eslint/js": "^9.32.0", + "@types/node": "^22.8.1", + "eslint": "^9.32.0", + "globals": "^16.3.0", + "prettier": "^3.6.2", + "typescript-eslint": "^8.38.0" + } +} diff --git a/apps/ai/rspress.config.ts b/apps/ai/rspress.config.ts new file mode 100644 index 00000000..ff19fb61 --- /dev/null +++ b/apps/ai/rspress.config.ts @@ -0,0 +1,30 @@ +import * as path from 'node:path'; +import { defineConfig } from '@rspress/core'; +import { pluginModuleFederation } from '@module-federation/rspress-plugin'; +import mfConfig from './module-federation.config'; + +export default defineConfig({ + root: path.join(__dirname, 'docs'), + title: 'AI Documentation', + icon: '/rspress-icon.png', + // base: '/ai/', + logo: { + light: '/rspress-light-logo.png', + dark: '/rspress-dark-logo.png', + }, + builderConfig: { + output: { + assetPrefix: 'https://docs.zephyr-cloud.io/ai', + }, + }, + themeConfig: { + socialLinks: [ + { + icon: 'github', + mode: 'link', + content: 'https://github.com/web-infra-dev/rspress', + }, + ], + }, + plugins: [pluginModuleFederation(mfConfig)], +}); diff --git a/apps/ai/tsconfig.json b/apps/ai/tsconfig.json new file mode 100644 index 00000000..3e042051 --- /dev/null +++ b/apps/ai/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ES2020", + "lib": ["DOM", "ES2020"], + "module": "ESNext", + "jsx": "react-jsx", + "strict": true, + "skipLibCheck": true, + "isolatedModules": true, + "resolveJsonModule": true, + "moduleResolution": "bundler", + "useDefineForClassFields": true, + "allowImportingTsExtensions": true, + "composite": true + }, + "include": ["docs", "theme", "rspress.config.ts"], + "mdx": { + "checkMdx": true + } +} diff --git a/apps/cloud/.gitignore b/apps/cloud/.gitignore new file mode 100644 index 00000000..23a4bc92 --- /dev/null +++ b/apps/cloud/.gitignore @@ -0,0 +1,14 @@ +# Local +.DS_Store +*.local +*.log* + +# Dist +node_modules +dist/ +doc_build/ + +# IDE +.vscode/* +!.vscode/extensions.json +.idea diff --git a/apps/cloud/.prettierignore b/apps/cloud/.prettierignore new file mode 100644 index 00000000..ac66857c --- /dev/null +++ b/apps/cloud/.prettierignore @@ -0,0 +1,4 @@ +# Lock files +package-lock.json +pnpm-lock.yaml +yarn.lock diff --git a/apps/cloud/.prettierrc b/apps/cloud/.prettierrc new file mode 100644 index 00000000..544138be --- /dev/null +++ b/apps/cloud/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/apps/cloud/README.md b/apps/cloud/README.md new file mode 100644 index 00000000..8a9c78ca --- /dev/null +++ b/apps/cloud/README.md @@ -0,0 +1,29 @@ +# Rspress website + +## Setup + +Install the dependencies: + +```bash +npm install +``` + +## Get started + +Start the dev server: + +```bash +npm run dev +``` + +Build the website for production: + +```bash +npm run build +``` + +Preview the production build locally: + +```bash +npm run preview +``` diff --git a/apps/cloud/components/cloud-hero-section.tsx b/apps/cloud/components/cloud-hero-section.tsx new file mode 100644 index 00000000..72c61ecb --- /dev/null +++ b/apps/cloud/components/cloud-hero-section.tsx @@ -0,0 +1,261 @@ +import { CloudProviderCards } from './cloud-provider'; +import { + CloudflareIcon, + NetlifyIcon, + FastlyIcon, + AkamaiIcon, +} from '@zephyr-docs/shared'; + +export function CloudHeroSection() { + return ( +
+ {/* Background Effects */} +
+
+
+
+ +
+ {/* Hero Header */} +
+
+
+ ☁️ +
+
+ +

+ + Zephyr Cloud + +

+ +

+ Deploy with Your Own Cloud +

+ +

+ Bring Your Own Cloud (BYOC) - Use your existing cloud infrastructure + with Zephyr's powerful deployment platform. No vendor lock-in, full + control over your resources. +

+
+ + {/* Stats Section */} +
+
+
+
5+
+
Cloud Providers
+
+ AWS, Cloudflare, Netlify & more +
+
+
+
100%
+
Your Infrastructure
+
+ Full control & ownership +
+
+
+
0
+
Vendor Lock-in
+
+ Switch providers anytime +
+
+
+
+ + {/* CTA Buttons */} +
+
+ + πŸš€ + Get Started + + + πŸ”§ + Setup Integration + +
+
+ + {/* Featured Cloud Providers */} +
+
+

+ Supported Cloud Providers +

+

+ Choose from our growing list of supported cloud providers. Each + integration is designed to leverage your provider's unique + features and global infrastructure. +

+
+ + {/* Provider Grid */} +
+
+
+
+ 🟠 +
+
+

+ AWS +

+

Amazon Web Services

+
+
+

+ Deploy to AWS Lambda, CloudFront, and S3 with full CDN + integration. +

+
+ +
+
+
+ +
+
+

+ Cloudflare +

+

Workers & Pages

+
+
+

+ Leverage Cloudflare's global edge network with Workers and + Pages. +

+
+ +
+
+
+ +
+
+

+ Netlify +

+

Edge Functions

+
+
+

+ Deploy with Netlify's powerful edge functions and instant + deployments. +

+
+ +
+
+
+ +
+
+

+ Fastly +

+

Compute@Edge

+
+
+

+ High-performance edge computing with Fastly's global network. +

+
+ +
+
+
+ +
+
+

+ Akamai +

+

EdgeWorkers

+
+
+

+ Enterprise-grade edge computing with Akamai's trusted + infrastructure. +

+
+ +
+
+
+ βž• +
+
+

+ More Coming +

+

Request a provider

+
+
+

+ Don't see your provider? Let us know and we'll add support. +

+
+
+ + {/* Benefits Section */} +
+

+ Why Choose BYOC? +

+
+
+
+ πŸ’° +
+

Cost Control

+

+ Use your existing cloud credits and billing +

+
+
+
+ πŸ”’ +
+

Security

+

+ Data stays in your cloud environment +

+
+
+
+ ⚑ +
+

Performance

+

+ Leverage your provider's global CDN +

+
+
+
+ πŸ”„ +
+

Flexibility

+

+ Switch providers without vendor lock-in +

+
+
+
+
+
+
+ ); +} diff --git a/apps/cloud/components/cloud-provider.tsx b/apps/cloud/components/cloud-provider.tsx new file mode 100644 index 00000000..a9d4f931 --- /dev/null +++ b/apps/cloud/components/cloud-provider.tsx @@ -0,0 +1,35 @@ +import { SiteConfig, type CardItemProps } from '@zephyr-docs/shared'; +import { + AkamaiIcon, + CloudflareIcon, + FastlyIcon, + NetlifyIcon, + Card, +} from '@zephyr-docs/shared'; + +export const CloudProviderCards = () => { + return ( + <> + {SiteConfig.cloud.map((item, i) => ( + + ))} + + ); +}; + +const item = { + title: 'Add Environments', + href: '/how-to/environments', + description: + 'Configure custom domain for your application with your deployment integration platform.', + variant: 'default', + icons: [, , , ], +} satisfies CardItemProps; + +export const CustomDomain = () => { + return ( + <> + + + ); +}; diff --git a/apps/cloud/components/cloud-sidebar-layout.tsx b/apps/cloud/components/cloud-sidebar-layout.tsx new file mode 100644 index 00000000..360119be --- /dev/null +++ b/apps/cloud/components/cloud-sidebar-layout.tsx @@ -0,0 +1,17 @@ +import { ReactNode } from 'react'; +import { SidebarLayout as SharedSidebarLayout } from "@zephyr-docs/shared"; +import { CloudSidebar } from './cloud-sidebar'; + +interface CloudSidebarLayoutProps { + children: ReactNode; +} + +export function CloudSidebarLayout({ children }: CloudSidebarLayoutProps) { + return ( + } wrapContent={false}> +
+ {children} +
+ + ); +} \ No newline at end of file diff --git a/apps/cloud/components/cloud-sidebar.tsx b/apps/cloud/components/cloud-sidebar.tsx new file mode 100644 index 00000000..27a6ded9 --- /dev/null +++ b/apps/cloud/components/cloud-sidebar.tsx @@ -0,0 +1,148 @@ +import { CloudflareIcon, NetlifyIcon, FastlyIcon, AkamaiIcon } from '@zephyr-docs/shared'; +import { Search } from 'lucide-react'; + +const cloudProviders = [ + { + name: 'AWS', + icon: '🟠', + href: '/cloud/aws', + description: 'Amazon Web Services' + }, + { + name: 'Cloudflare', + icon: , + href: '/cloud/cloudflare', + description: 'Cloudflare Workers & Pages' + }, + { + name: 'Netlify', + icon: , + href: '/cloud/netlify', + description: 'Netlify Edge Functions' + }, + { + name: 'Fastly', + icon: , + href: '/cloud/fastly', + description: 'Fastly Compute@Edge' + }, + { + name: 'Akamai', + icon: , + href: '/cloud/akamai', + description: 'Akamai EdgeWorkers' + } +]; + +const quickLinks = [ + { name: 'Getting Started', href: '/cloud', icon: 'πŸš€' }, + { name: 'Integration Setup', href: '/cloud/updating-integrations', icon: 'πŸ”§' }, + { name: 'BYOC Benefits', href: '/cloud#benefits', icon: 'πŸ’‘' }, + { name: 'Cost Calculator', href: '/cloud#pricing', icon: 'πŸ’°' } +]; + +export function CloudSidebar() { + return ( +
+ {/* Header */} +
+ +
+ Zephyr +
+ ZEPHYR DOCS CLOUD + + + {/* Search */} +
+
+ +
+ +
+ ⌘ + K +
+
+
+ + {/* Quick Links */} +
+

+ Quick Start +

+
+ {quickLinks.map((link, index) => ( + + {link.icon} + + {link.name} + + + ))} +
+
+ + {/* Divider */} +
+ + {/* Cloud Providers */} +
+
+

+ Supported Providers +

+
+ {cloudProviders.map((provider, index) => ( + +
+
+ {provider.icon} +
+ + {provider.name} + +
+

+ {provider.description} +

+ + ))} +
+
+
+ + {/* Dashboard Link */} + +
+ ); +} \ No newline at end of file diff --git a/docs/cloud.mdx b/apps/cloud/docs/cloud.mdx similarity index 87% rename from docs/cloud.mdx rename to apps/cloud/docs/cloud.mdx index 007d8a0f..8a6b112e 100644 --- a/docs/cloud.mdx +++ b/apps/cloud/docs/cloud.mdx @@ -1,13 +1,16 @@ --- title: Manage Cloud Providers description: With Zephyr's bring your own cloud feature, you can use Zephyr with your existing cloud infrastructure to manage your applications +pageType: doc +navbar: false +sidebar: false +outline: false +lastUpdated: false --- -import { Button } from '../components/ui/button.tsx'; -import { Steps, Badge } from '@theme'; -import { Separator } from '../components/ui/separator.tsx'; -import { CardLayout } from '../components/ui/card-layout'; -import { CloudProviderCards } from "../components/cloud-provider" +import { Steps, Badge } from '@rspress/core/theme'; +import { Separator, Button, CardLayout } from '@zephyr-docs/shared'; +import { CloudProviderCards } from '../components/cloud-provider'; # Manage Cloud Providers on Zephyr @@ -17,10 +20,10 @@ With BYOC, users are able to _manage configuration_, _understand the underlying Users belong to an organization can manage and configure cloud providers on Zephyr's [dashboard](https://app.zephyr-cloud.io), and user's organization gets connected with cloud provider account by creating an integration under **Deployment Integration** tab. -## Choose your Cloud provider +## Choose your Cloud provider - + ## About Deployment Integrations @@ -47,9 +50,9 @@ For detailed instructions on updating your deployment integrations, see our [Upd Zephyr regularly releases updates to deployment integrations that provide: - **New Features**: Access to the latest Zephyr capabilities and cloud provider features -- **Performance Improvements**: Faster deployments and better resource utilization +- **Performance Improvements**: Faster deployments and better resource utilization - **Security Updates**: Latest security patches and compliance improvements - **Bug Fixes**: Resolution of known issues and edge cases - **Compatibility**: Support for new versions of bundlers and frameworks -The beauty of Zephyr's integration system is that these updates happen at the infrastructure level, meaning your development team can benefit from improvements without modifying their build processes, deployment scripts, or workflows. \ No newline at end of file +The beauty of Zephyr's integration system is that these updates happen at the infrastructure level, meaning your development team can benefit from improvements without modifying their build processes, deployment scripts, or workflows. diff --git a/docs/cloud/akamai.mdx b/apps/cloud/docs/cloud/akamai.mdx similarity index 84% rename from docs/cloud/akamai.mdx rename to apps/cloud/docs/cloud/akamai.mdx index 8a5fdaa9..a248106a 100644 --- a/docs/cloud/akamai.mdx +++ b/apps/cloud/docs/cloud/akamai.mdx @@ -1,10 +1,15 @@ --- title: 'Configure Akamai on Zephyr' description: 'Configuring Akamai as your deployment integration provider on Zephyr' +pageType: doc +navbar: false +sidebar: false +outline: false +lastUpdated: false --- -import { Steps } from '@theme'; -import { Button } from '../../components/ui/button.tsx'; +import { Steps } from '@rspress/core/theme'; +import { Button } from '@zephyr-docs/shared'; # Configure Akamai on Zephyr @@ -51,11 +56,11 @@ Before proceeding, you will need some data from Akamai: | API | Access Level | | :-------------------------------- | :----------: | -| CPcode and Reporting group (cprg) | READ-WRITE | -| Edge Hostnames API (hapi) | READ-WRITE | -| EdgeKV | READ-WRITE | -| EdgeWorkers | READ-WRITE | -| Property Manager (PAPI) | READ-WRITE | +| CPcode and Reporting group (cprg) | READ-WRITE | +| Edge Hostnames API (hapi) | READ-WRITE | +| EdgeKV | READ-WRITE | +| EdgeWorkers | READ-WRITE | +| Property Manager (PAPI) | READ-WRITE | - Copy or download token and add `[default]` as a header, so token will look like: @@ -85,50 +90,48 @@ client_token = YOUR_CLIENT_TOKEN Find you product [here](https://techdocs.akamai.com/property-mgr/reference/id-prefixes#common-product-ids) and choose product id regarding contract - **prd_Fresca** or **prd_SPM** - ### Configuration Inputs Details for each input after clicking **Add Integration** under **Akamai**:
Integration Name
-
- A unique name within your organization, used as a slug. -
+
A unique name within your organization, used as a slug.
Integration Display Name
-
- The name of the integration shown on the dashboard. -
+
The name of the integration shown on the dashboard.
API Token
- Obtainable from Akamai. [See instructions](#1-api-token) for creating your API token. + Obtainable from Akamai. [See instructions](#1-api-token) for creating your API + token.
Domain
-
- Your domain. -
+
Your domain.
Akamai contract id
- Obtainable from Akamai. [See instructions](#2-contract-id) for getting your contract id. + Obtainable from Akamai. [See instructions](#2-contract-id) for getting your + contract id.
Akamai group id
- Obtainable from Akamai. [See instructions](#3-group-id) for getting your group id. + Obtainable from Akamai. [See instructions](#3-group-id) for getting your group + id.
Akamai product id
- Obtainable from Akamai. [See instructions](#4-product-id) for getting your product id. + Obtainable from Akamai. [See instructions](#4-product-id) for getting your + product id.
Set Integration as Default
When set as default, all Zephyr deployments will use this integration until a - new one (default integration) is set. Deployment using integration won't work until Akamai worker and property become activated. + new one (default integration) is set. Deployment using integration won't work + until Akamai worker and property become activated.
### Validate domain and setup DNS @@ -141,11 +144,11 @@ Details for each input after clicking **Add Integration** under **Akamai**: - Go to your domain provider (e.g., GoDaddy) - Add some CNAME records - | Subdomain | Type | Value | - |-----------------------------------|-------|--------------------------------------------| - | _acme-challenge.ze.yourdomain.com | CNAME | < value from verification record > | - | ze.yourdomain.com | CNAME | ze.yourdomain.com.edgesuite.net. | - | *.ze.yourdomain.com | CNAME | ze.yourdomain.com.edgesuite.net. | + | Subdomain | Type | Value | + | ---------------------------------- | ----- | ---------------------------------- | + | \_acme-challenge.ze.yourdomain.com | CNAME | < value from verification record > | + | ze.yourdomain.com | CNAME | ze.yourdomain.com.edgesuite.net. | + | \*.ze.yourdomain.com | CNAME | ze.yourdomain.com.edgesuite.net. | ### Wait until worker and property become activated @@ -226,7 +229,7 @@ const { promisify } = require('node:util'); const edgercPath = homedir() + '/.edgerc'; const edgercSection = 'default'; const eg = new EdgeGrid({ -path: edgercPath, + path: edgercPath, section: edgercSection, }); @@ -235,16 +238,16 @@ const network = process.env.NETWORK || 'production'; // staging or production eg.auth({ path: `/edgekv/v1/networks/${network}/namespaces/${namespaceId}`, - method: 'DELETE', - headers: { + method: 'DELETE', + headers: { 'Content-Type': 'application/json', - Accept: 'application/json', + Accept: 'application/json', }, body: {}, }); const send = promisify(eg.send.bind(eg)); - send() +send() .then(({ data }) => { console.log('Namespace deleting result', data); }) @@ -252,7 +255,6 @@ const send = promisify(eg.send.bind(eg)); console.error('Namespace deleting error', error); process.exit(1); }); - ``` ### Revoke EdgeKV access token @@ -268,7 +270,7 @@ const { promisify } = require('node:util'); const edgercPath = homedir() + '/.edgerc'; const edgercSection = 'default'; const eg = new EdgeGrid({ -path: edgercPath, + path: edgercPath, section: edgercSection, }); @@ -276,10 +278,10 @@ const tokenName = process.env.TOKEN_NAME; eg.auth({ path: `/edgekv/v1/tokens/${tokenName}`, - method: 'DELETE', - headers: { + method: 'DELETE', + headers: { 'Content-Type': 'application/json', - Accept: 'application/json', + Accept: 'application/json', }, body: {}, }); @@ -293,5 +295,5 @@ send() console.error('Token revoking error', error); process.exit(1); }); - ``` + diff --git a/docs/cloud/aws.mdx b/apps/cloud/docs/cloud/aws.mdx similarity index 95% rename from docs/cloud/aws.mdx rename to apps/cloud/docs/cloud/aws.mdx index 916d6243..4b9636a0 100644 --- a/docs/cloud/aws.mdx +++ b/apps/cloud/docs/cloud/aws.mdx @@ -1,10 +1,15 @@ --- title: 'Configure AWS on Zephyr' description: 'Configuring AWS as your deployment integration provider on Zephyr' +pageType: doc +navbar: false +sidebar: false +outline: false +lastUpdated: false --- -import { Steps } from '@theme'; -import { Button } from '../../components/ui/button.tsx'; +import { Steps } from '@rspress/core/theme'; +import { Button } from '@zephyr-docs/shared'; # Configure AWS on Zephyr @@ -98,34 +103,28 @@ aws_secret_access_key = YOUR_ACCESS_KEY_SECRET Details for each input after clicking **Add Integration** under **AWS**:
Integration Name
-
- A unique name within your organization, used as a slug. -
+
A unique name within your organization, used as a slug.
Integration Display Name
-
- The name of the integration shown on the dashboard. -
+
The name of the integration shown on the dashboard.
API Token
- Obtainable from AWS. [See instructions](#1-api-token) for creating your API token. + Obtainable from AWS. [See instructions](#1-api-token) for creating your API + token.
Domain
-
- Your domain. -
+
Your domain.
Certificate arn
-
- Certificate arn for domain (ze.your.domain) -
+
Certificate arn for domain (ze.your.domain)
Set Integration as Default
When set as default, all Zephyr deployments will use this integration until a - new one (default integration) is set. Deployment using integration won't work until AWS worker and property become activated. + new one (default integration) is set. Deployment using integration won't work + until AWS worker and property become activated.
### Validate domain and setup DNS @@ -134,10 +133,10 @@ Details for each input after clicking **Add Integration** under **AWS**: - Find you domain - Copy value from `Domain name (standard)` column and add DNS records described in the table below -| Subdomain | Type | Value | -|-----------------------------------|-------|--------------------------------------------| -| ze.yourdomain.com | CNAME | < Domain name value > | -| *.ze.yourdomain.com | CNAME | < Domain name value > | +| Subdomain | Type | Value | +| -------------------- | ----- | --------------------- | +| ze.yourdomain.com | CNAME | < Domain name value > | +| \*.ze.yourdomain.com | CNAME | < Domain name value > | @@ -383,9 +382,7 @@ if [[ -n "$S3_BUCKET" ]]; then log " Bucket is versioned β€” cleaning versions:" while : ; do VERS="$(aws s3api list-object-versions --bucket "$S3_BUCKET" --max-items 1000)" - CNT=$(echo "$VERS" | jq '[.Versions[]?, .DeleteMarkers[]?] | length') [[ "$CNT" -eq 0 ]] && break - IDS=$(echo "$VERS" | jq -c '{Objects: ([.Versions[]? , .DeleteMarkers[]?] | map({Key:.Key, VersionId:.VersionId})), Quiet:true}') echo "$IDS" | aws s3api delete-objects --bucket "$S3_BUCKET" --delete file:///dev/stdin >/dev/null || true done fi @@ -681,7 +678,7 @@ log "==> PHASE 2 completed." #### Collect necessary data | Variable | Where to find in the AWS dashboard | Description | -|-------------------|------------------------------------|------------------------------------------------------| +| ----------------- | ---------------------------------- | ---------------------------------------------------- | | DDB_TABLES | DynamoDB -> Tables | envs and snaphots table names | | LOG_GROUPS | Cloudwatch -> Log groups | Cloudwatch log groups of Lambda@Edge function | | CF_DIST_ID | Cloudfront -> Distributions | Cloudfron distribution id | diff --git a/docs/cloud/cloudflare.mdx b/apps/cloud/docs/cloud/cloudflare.mdx similarity index 90% rename from docs/cloud/cloudflare.mdx rename to apps/cloud/docs/cloud/cloudflare.mdx index 378d4c7a..d4e442d1 100644 --- a/docs/cloud/cloudflare.mdx +++ b/apps/cloud/docs/cloud/cloudflare.mdx @@ -1,11 +1,16 @@ --- title: 'Configure Cloudflare on Zephyr' description: 'Configuring Cloudflare as your deployment integration provider on Zephyr' +pageType: doc +navbar: false +sidebar: false +outline: false +lastUpdated: false --- -import { Button } from '../../components/ui/button.tsx'; -import { Steps, Badge } from '@theme'; -import { Separator } from '../../components/ui/separator.tsx'; +import { Button } from '@zephyr-docs/shared'; +import { Steps, Badge } from '@rspress/core/theme'; +import { Separator } from '@zephyr-docs/shared'; import { CustomDomain } from '../../components/cloud-provider.tsx'; # Configure Cloudflare on Zephyr @@ -73,7 +78,7 @@ Before proceeding, you will need two details and one DNS configuration from Clou - Return to your domain’s home page (the **Overview** page should still be open) and click on **DNS** on the left sidebar. - Click **Add record** on the _Records_ page and enter the following details: -![dns](../public/cf-dns-entry-cname.png) +![dns](/cf-dns-entry-cname.png)
Click to view DNS record details @@ -101,13 +106,15 @@ Details for each input after clicking **Add Integration** under **Cloudflare**:
The name of the integration shown on the dashboard.
Delimiter
-
Choose the delimiter for application subdomains: `-` (your deploy URL will be `*-ze.your.domain`) or `.` (your deploy URL will be `*.ze.your.domain`)
+
+ Choose the delimiter for application subdomains: `-` (your deploy URL will be + `*-ze.your.domain`) or `.` (your deploy URL will be `*.ze.your.domain`){' '} +
API Token
- Obtainable from Cloudflare. [See - instructions](#2-api-token) for creating - your API token. + Obtainable from Cloudflare. [See instructions](#2-api-token) for creating your + API token.
Zone ID
@@ -133,7 +140,7 @@ Details for each input after clicking **Add Integration** under **Cloudflare**: ### Testing Cloudflare Integration -Visit our [recipes](/recipes) to test an application. Your next deployment should use your designated domain! (If not, [talk to us on Discord](https://zephyr-cloud.io/discord)). +Your next deployment should use your designated domain! (If not, [talk to us on Discord](https://zephyr-cloud.io/discord)). When using our managed cloud (Cloudflare) or custom Cloudflare integration, avoid including capital letters in names for `package.json`, module federation configuration, or assets to prevent issues with Cloudflare queries. @@ -166,7 +173,7 @@ A CNAME record will be added to your domain with the following details: | Type | Name | Content | Proxy Status | TTL | | :---: | :--: | :------------------: | :----------: | :--: | -| CNAME | `*` | `ze.zephyrcloud.app` | βœ” Proxied | Auto | +| CNAME | `*` | `ze.zephyrcloud.app` | βœ” Proxied | Auto | ### Deployment and Inspecting Assets @@ -180,7 +187,7 @@ In your Cloudflare dashboard, navigate to **Workers & Pages** and then **KV** to - `ze_envs`: stores application environment and access rights. - `ze_snapshot`: stores application snapshots compared against the previous build. - If deploying an application previously on our managed cloud, run `rm -rf ~/.zephyr` before deployment. -- If you encounter issues deploying Micro-frontend applications, see our [Micro-frontend deployment guide](/how-to/mf-guide). +- If you encounter issues deploying Micro-frontend applications, refer to our deployment documentation. ::: @@ -232,6 +239,7 @@ Select both projects, choose **Manage**, and click **Delete**. 3. Select the integration name and click **Remove**. -## What’s Next? +## What's Next? + diff --git a/docs/cloud/fastly.mdx b/apps/cloud/docs/cloud/fastly.mdx similarity index 76% rename from docs/cloud/fastly.mdx rename to apps/cloud/docs/cloud/fastly.mdx index fe81dd23..2f23ef0b 100644 --- a/docs/cloud/fastly.mdx +++ b/apps/cloud/docs/cloud/fastly.mdx @@ -1,11 +1,16 @@ --- title: Configure Fastly on Zephyr description: Configuring Fastly as your deployment integration provider on Zephyr +pageType: doc +navbar: false +sidebar: false +outline: false +lastUpdated: false --- -import { Button } from '../../components/ui/button.tsx'; -import { Steps, Badge } from '@theme'; -import { Separator } from '../../components/ui/separator.tsx'; +import { Button } from '@zephyr-docs/shared'; +import { Steps, Badge } from '@rspress/core/theme'; +import { Separator } from '@zephyr-docs/shared'; # Configure Fastly on Zephyr @@ -26,7 +31,7 @@ Fastly's best-in-class edge cloud platform helps you modernize and automate to m ## Integration Setup -:::info +:::info API Token Configuration - Create your API token [here](https://manage.fastly.com/account/personal/tokens). For detailed steps on creating an API token, refer to the [Fastly API token documentation](https://www.fastly.com/documentation/guides/account-info/account-management/using-api-tokens/). @@ -43,10 +48,10 @@ API Token Configuration 1. Navigate to the Organization Level in Zephyr 2. Select **Settings** tab, choose **Deployment integration** and then click on **Available** 3. On this page choose **Fastly Integration** and click on **Add integration** -3. Complete the form with: +4. Complete the form with: - API Token - Site ID -4. Click **Add Integration** +5. Click **Add Integration** ### Configure DNS Domain @@ -55,7 +60,7 @@ API Token Configuration 3. Add two domains: - `ze.yourdomain.com` - `*.ze.yourdomain.com` -4. Click "Add" then "Submit" +4. Click "Add" then "Submit" 5. You'll see a "Pending verification" status 6. You will see CNAME records here that you'll need for the next step @@ -67,18 +72,19 @@ API Token Configuration 4. Click "View/Edit" once verified 5. Create two CNAME records: -| Subdomain | Type | Priority | Target | -|-----------|------|----------|--------| -| ze.yourdomain.com | CNAME | - | t.sni.global.fastly.net | -| *.ze.yourdomain.com | CNAME | - | t.sni.global.fastly.net | +| Subdomain | Type | Priority | Target | +| -------------------- | ----- | -------- | ----------------------- | +| ze.yourdomain.com | CNAME | - | t.sni.global.fastly.net | +| \*.ze.yourdomain.com | CNAME | - | t.sni.global.fastly.net | -*Note: Actual target values will be shown in your Fastly dashboard* +_Note: Actual target values will be shown in your Fastly dashboard_ ## System Components The integration creates: + - Config store for jwt-secret - KV stores: - ze-snapshots @@ -92,4 +98,5 @@ The integration creates: 2. Build a new application with Zephyr 3. During deployment: - System retrieves site information using provided parameters - - Zephyr Plugin uploads build assets to KV stores \ No newline at end of file + - Zephyr Plugin uploads build assets to KV stores + diff --git a/docs/cloud/netlify.mdx b/apps/cloud/docs/cloud/netlify.mdx similarity index 71% rename from docs/cloud/netlify.mdx rename to apps/cloud/docs/cloud/netlify.mdx index 38c355e8..6190ed4c 100644 --- a/docs/cloud/netlify.mdx +++ b/apps/cloud/docs/cloud/netlify.mdx @@ -1,32 +1,37 @@ --- title: Configure Netlify on Zephyr description: Configuring Netlify as your deployment integration provider on Zephyr +pageType: doc +navbar: false +sidebar: false +outline: false +lastUpdated: false --- -import { Button } from '../../components/ui/button.tsx'; -import { Steps, Badge } from '@theme'; -import { Separator } from '../../components/ui/separator.tsx'; -import { CustomDomain } from '../../components/cloud-provider.tsx' +import { Button } from '@zephyr-docs/shared'; +import { Steps, Badge } from '@rspress/core/theme'; +import { Separator } from '@zephyr-docs/shared'; +import { CustomDomain } from '../../components/cloud-provider.tsx'; -# Configure Netlify on Zephyr +# Configure Netlify on Zephyr -According to Netlify's documentation, Netlify is an enterprise-ready platform, with plug&play feature to help customers build fast and reliable web experiences. +According to Netlify's documentation, Netlify is an enterprise-ready platform, with plug&play feature to help customers build fast and reliable web experiences. -We will discuss how to configure Netlify as your default cloud provider with Blob storage, Netlify sites and Netlify functions to deploy and version your application with Zephyr Cloud, deliver content to your users using Netlify's Blob storage, Functions and Edge network. +We will discuss how to configure Netlify as your default cloud provider with Blob storage, Netlify sites and Netlify functions to deploy and version your application with Zephyr Cloud, deliver content to your users using Netlify's Blob storage, Functions and Edge network. [Launch Week 1 - Netlify's Blog on how to use Zephyr with Netlify](https://developers.netlify.com/guides/micro-frontends-with-zephyr-cloud/). :::tip -To deploy a Micro-frontend application on Netlify, the bare minimum set up will **only require you to configure one site** on Netlify. +To deploy a Micro-frontend application on Netlify, the bare minimum set up will **only require you to configure one site** on Netlify. -In the land of Micro-Frontend and how Zephyr deploy applications, we map each individual components and serve them with edge functions via the wildcards of one domain (so you don't need to configure multiple site project on Netlify for a Micro-Frontend application). +In the land of Micro-Frontend and how Zephyr deploy applications, we map each individual components and serve them with edge functions via the wildcards of one domain (so you don't need to configure multiple site project on Netlify for a Micro-Frontend application). ::: ## Pre-requisites -:::info +:::info - A registered Netlify account and a team with Pro plan (to enable custom domain) - A registered Zephyr account @@ -35,21 +40,21 @@ In the land of Micro-Frontend and how Zephyr deploy applications, we map each in ::: -### Wildcard subdomain on Netlify - +### Wildcard subdomain on Netlify :::warning How-to Because Zephyr Cloud handles deployments on your behalf, it needs the ability to create subdomains on your behalf, which means that you need to be able to configure a wildcard `CNAME` record on your domain, and you can’t use dynamic domain features from Netlify, such as branch deploys or deploy previews. Wildcard subdomains can be activated via [contacting Netlify support](https://www.netlify.com/support/), but there are a few requirements: + 1. The site must be on a Pro or above team. βœ… 2. The DNS must be managed by Netlify OR you need to bring a custom wildcard SSL certificate. βœ… 3. The site should not have any branch subdomains. βœ… 4. The site cannot use Automatic Deploy Subdomains, so please disable this feature if you are currently using it. βœ… -5. The primary domain of the website should be on the same level as the required wildcard domain. -🚨 For example: -If you need the wildcard to be `*.bundlercorp.com` (`*.ze.bundlercorp.com` if you plan using `.` delimiter)⁣ where `*`⁣ can be your wildcard subdomain, the primary domain must be `www.bundlercorp.com (`www.ze.bundlercorp.com` if you plan using `.` delimiter)⁣` (www⁣ can be replaced with any string). +5. The primary domain of the website should be on the same level as the required wildcard domain. + 🚨 For example: + If you need the wildcard to be `*.bundlercorp.com` (`*.ze.bundlercorp.com` if you plan using `.` delimiter)⁣ where `*`⁣ can be your wildcard subdomain, the primary domain must be `www.bundlercorp.com (`www.ze.bundlercorp.com` if you plan using `.` delimiter)⁣` (www⁣ can be replaced with any string). 6. You need to configure the DNS for the wildcard subdomain even in case you are using Netlify DNS. You can follow the external DNS configuration for subdomains and add a CNAME entry with `*⁣` as the hostname or any other value that you want. The value of this DNS entry should be the Netlify site address. [Read more about subdomain in Netlify's Documentation](https://docs.netlify.com/domains-https/environmentss/configure-external-dns/#configure-a-subdomain). @@ -58,23 +63,21 @@ If you need the wildcard to be `*.bundlercorp.com` (`*.ze.bundlercorp.com` if yo ### Successful custom domain configuration example on Netlify - - 1. You have a Netlify site and it's auto-assigned by Netlify. -2. The domain is assigned or configured on Netlify as `random-very-long-string.netlify.app`. +2. The domain is assigned or configured on Netlify as `random-very-long-string.netlify.app`. 3. You have a custom domain `bundlercorp.com` (**an example domain**) **purchased from Netlify's team page**. -#### Example DNS settings +#### Example DNS settings **Please [contact Netlify support to enable wildcard domain](https://www.netlify.com/support/)**. -Below is an example of `bundlercorp.com`'s DNS settings: +Below is an example of `bundlercorp.com`'s DNS settings: -| Type | Name | Value | TTL | -| :--: | :---: | :----: | :--: | -| NETLIFY | `bundlercorp.com` | `random-very-long-string.netlify.app` | 3600 | -| NETLIFY | `www.bundlercorp.com` | `random-very-long-string.netlify.app` | 3600 | -| CNAME | `*.bundlercorp.com` | `random-very-long-string.netlify.app` | 3600 | +| Type | Name | Value | TTL | +| :-----: | :-------------------: | :-----------------------------------: | :--: | +| NETLIFY | `bundlercorp.com` | `random-very-long-string.netlify.app` | 3600 | +| NETLIFY | `www.bundlercorp.com` | `random-very-long-string.netlify.app` | 3600 | +| CNAME | `*.bundlercorp.com` | `random-very-long-string.netlify.app` | 3600 | or the following (if you plan using `.` delimiter) | Type | Name | Value | TTL | @@ -83,33 +86,30 @@ or the following (if you plan using `.` delimiter) | NETLIFY | `www.ze.bundlercorp.com` | `random-very-long-string.netlify.app` | 3600 | | CNAME | `*.ze.bundlercorp.com` | `random-very-long-string.netlify.app` | 3600 | +#### Example name servers -#### Example name servers - -Name servers are auto-managed by Netlify if you register a domain from Netlify, otherwise the value should be similar below. [Read more](https://docs.netlify.com/domains-https/environmentss/). - +Name servers are auto-managed by Netlify if you register a domain from Netlify, otherwise the value should be similar below. [Read more](https://docs.netlify.com/domains-https/environmentss/). Below is an example of `bundlercorp.com`'s name servers: -| Name servers | -| :--------: | -| `dns1.p09.nsone.net` | -| `dns2.p09.nsone.net` | -| `dns3.p09.nsone.net` | -| `dns4.p09.nsone.net` | - +| Name servers | +| :------------------: | +| `dns1.p09.nsone.net` | +| `dns2.p09.nsone.net` | +| `dns3.p09.nsone.net` | +| `dns4.p09.nsone.net` | -#### Example site project's domain settings +#### Example site project's domain settings -1. Within the selected site's **Domain management** page (`https://app.netlify.com/sites/{site-name}/domain-management`): +1. Within the selected site's **Domain management** page (`https://app.netlify.com/sites/{site-name}/domain-management`): -| Domain | Description | -| :---- | :---------- | -| `bundlercorp.netlify.app` | Netlify subdomain | -| `www.bundlercorp.com` | **⭐️ Primary domain** | -| `bundlercorp.com` | Redirects automatically to primary domain | +| Domain | Description | +| :------------------------ | :---------------------------------------- | +| `bundlercorp.netlify.app` | Netlify subdomain | +| `www.bundlercorp.com` | **⭐️ Primary domain** | +| `bundlercorp.com` | Redirects automatically to primary domain | -2. Scroll down on this page to **HTTPS** section to verify if domain is has SSL/TLS certificate by clicking on **Verify DNS configuration** or **Provide your own certificate**. +2. Scroll down on this page to **HTTPS** section to verify if domain is has SSL/TLS certificate by clicking on **Verify DNS configuration** or **Provide your own certificate**. [Read more about **HTTPS** settings on Netlify](https://docs.netlify.com/domains-https/https-ssl/). @@ -122,14 +122,12 @@ If your domain has TLS/SSL certificate verified for both wildcard domain and pri
###### - Your site has HTTPS enabled βœ… + ###### - Domains: `*.bundlercorp.com`, `bundlercorp.com` (additionally `*.ze.bundlercorp.com` if you plan using `.` delimiter) +
- - - - ## Configure and enable Netlify @@ -152,18 +150,17 @@ Before you move to the next step, you will need two details and one DNS configur **1. API token** -- On the upper right of your Netlify dashboard, click on your user profile and select **User settings** in the dropdown menu. -- Choose **Applications** on the left and then **New access token** under _Personal access tokens_. -- Give your personal access token a name and select an expiration period, then **Generate token**. +- On the upper right of your Netlify dashboard, click on your user profile and select **User settings** in the dropdown menu. +- Choose **Applications** on the left and then **New access token** under _Personal access tokens_. +- Give your personal access token a name and select an expiration period, then **Generate token**. - Give your API token a meaningfull name (who created this, what's this for etc). **2. Site ID** -- Click on the selected site (or the one your just deployed through us) and choose **Site configuration**. -- Under **Site information**, copy the **Site ID**. - +- Click on the selected site (or the one your just deployed through us) and choose **Site configuration**. +- Under **Site information**, copy the **Site ID**. -**3. Custom domain settings** +**3. Custom domain settings** Please follow [custom domain configuration in Pre-requisites section on this page](#pre-requisites). @@ -172,38 +169,35 @@ Please follow [custom domain configuration in Pre-requisites section on this pag Below are the input fields on [Zephyr's dashboard](https://app.zephyr-cloud.io) to enable Netlify as deployment cloud after clicking **Add integration** under **Netlify**:
Integration name
-
-A unique name within your organization. It will be used as a slug. -
+
A unique name within your organization. It will be used as a slug.
Integration display name
-
-The name of integration shown on dashboard. -
+
The name of integration shown on dashboard.
Delimiter
-
Choose the delimiter for application subdomains: `-` (your deploy URL will be `*-ze.your.domain`) or `.` (your deploy URL will be `*.ze.your.domain`)
+
+ Choose the delimiter for application subdomains: `-` (your deploy URL will be + `*-ze.your.domain`) or `.` (your deploy URL will be `*.ze.your.domain`){' '} +
API token
-Obtained from Netlify. The [instruction above](#how-to-get-credentials) should walk you through how to get your API token. + Obtained from Netlify. The [instruction above](#how-to-get-credentials) should + walk you through how to get your API token.
Site ID
-
-Obtained from Netlify. -
+
Obtained from Netlify.
Set integration as default.
-Make every repository deployed through Zephyr attempt to deploy through this + Make every repository deployed through Zephyr attempt to deploy through this integration setting. This won't change until you delete this integration or add new integration as default.
-
+
### How to test it -Navigate to our [recipes](/recipes) to try one of the application, you should see your next deployment deployed through your designated domain! (if not come [talk to us](https://zephyr-cloud.io/discord)) - +Navigate to our recipes to try one of the application, you should see your next deployment deployed through your designated domain! (if not come [talk to us](https://zephyr-cloud.io/discord)) @@ -221,11 +215,11 @@ Three blob storage space will be added: - `site:ze_files` - `site:ze_env` -2. Environment variable +2. Environment variable -An environment variable name `JWT_SECRET` will be created and being used by Zephyr to validate your access right when you are deploying applications. +An environment variable name `JWT_SECRET` will be created and being used by Zephyr to validate your access right when you are deploying applications. -3. Function +3. Function - `ze_worker_for_upload` (used for uploading assets) @@ -247,38 +241,33 @@ Sign in to your Netlify team's main dashboard page and select your site project, - `site:ze_envs` stores you application's environment, access right etc. - `site:ze_snapshot` stores your application's snapshots comparing against previous build. - If you are deploying an application that's previously deployed through our managed cloud, you will need to run `rm -rf ~/.zephyr` before deployment. -- If you faced issues while deploying Micro-frontend application, you can follow your complete guide on [how to deploy Micro-frontend applications on Zephyr](/how-to/mf-guide). ::: +## Clean uninstall and reset +:::danger Warning -## Clean uninstall and reset - -:::danger Warning - -- Zephyr Cloud do not handle your API token's and any other properties related to your Netlify account's deletion. -- Assets and information on your Netlify account are by default immutable. If you are performing a **clean uninstall** (as below), you previous deployed assets and information are unrecoverable. +- Zephyr Cloud do not handle your API token's and any other properties related to your Netlify account's deletion. +- Assets and information on your Netlify account are by default immutable. If you are performing a **clean uninstall** (as below), you previous deployed assets and information are unrecoverable. ::: -### Delete Netlify site project - -At the moment, the only way to remove all the deployment assets, information and previous configuration on Netlify is by deleting your site project. +### Delete Netlify site project -On your site project's dashboard, click on **Site configuration** on the left, scroll down to find **Delete site**. +At the moment, the only way to remove all the deployment assets, information and previous configuration on Netlify is by deleting your site project. +On your site project's dashboard, click on **Site configuration** on the left, scroll down to find **Delete site**. ### Delete deployment integration +1. Log into your account and select the organization associated with the deployment integration you want to delete. -1. Log into your account and select the organization associated with the deployment integration you want to delete. - -2. Select **Settings** on the organization dashboard. On the left side choose **Deployment Integration**. +2. Select **Settings** on the organization dashboard. On the left side choose **Deployment Integration**. -3. Choose the name of integration you want to delete and select **Remove** on the next page. +3. Choose the name of integration you want to delete and select **Remove** on the next page. +## What's next? -## What's next? + - diff --git a/docs/cloud/updating-integrations.mdx b/apps/cloud/docs/cloud/updating-integrations.mdx similarity index 89% rename from docs/cloud/updating-integrations.mdx rename to apps/cloud/docs/cloud/updating-integrations.mdx index 3a27ffcf..83155b75 100644 --- a/docs/cloud/updating-integrations.mdx +++ b/apps/cloud/docs/cloud/updating-integrations.mdx @@ -1,9 +1,14 @@ --- title: 'Updating Deployment Integrations' description: 'Step-by-step guide to update your deployment integrations and keep them current' +pageType: doc +navbar: false +sidebar: false +outline: false +lastUpdated: false --- -import { Steps, Badge } from '@theme'; +import { Steps, Badge } from '@rspress/core/theme'; # Updating Deployment Integrations @@ -45,7 +50,7 @@ Click the **Update Worker Version** button to apply the latest version. The upda :::warning Important Rollback Note -If you need to perform a rollback of your deployment integration, you must do so through your specific cloud provider's interface, not through the Zephyr dashboard. +If you need to perform a rollback of your deployment integration, you must do so through your specific cloud provider's interface, not through the Zephyr dashboard. Each cloud provider has different rollback procedures. Consult your cloud provider's documentation for specific rollback instructions. @@ -63,5 +68,6 @@ If you encounter issues after updating an integration: ## Next Steps - Return to [Cloud Providers](/cloud) overview -- Explore [deployment environments](/how-to/environments) for better testing workflows -- Set up [automated deployments](/how-to/github-automations) with your updated integrations \ No newline at end of file +- Explore deployment environments for better testing workflows +- Set up automated deployments with your updated integrations + diff --git a/apps/cloud/docs/index.mdx b/apps/cloud/docs/index.mdx new file mode 100644 index 00000000..32204917 --- /dev/null +++ b/apps/cloud/docs/index.mdx @@ -0,0 +1,14 @@ +--- +pageType: custom +navbar: false +sidebar: false +outline: false +lastUpdated: false +--- + +import { CloudSidebarLayout } from '../components/cloud-sidebar-layout'; +import { CloudHeroSection } from '../components/cloud-hero-section'; + + + + diff --git a/docs/public/Nebulica-Black.ttf b/apps/cloud/docs/public/Nebulica-Black.ttf similarity index 100% rename from docs/public/Nebulica-Black.ttf rename to apps/cloud/docs/public/Nebulica-Black.ttf diff --git a/docs/public/Nebulica-ExtraLight.ttf b/apps/cloud/docs/public/Nebulica-ExtraLight.ttf similarity index 100% rename from docs/public/Nebulica-ExtraLight.ttf rename to apps/cloud/docs/public/Nebulica-ExtraLight.ttf diff --git a/docs/public/Nebulica-Regular.ttf b/apps/cloud/docs/public/Nebulica-Regular.ttf similarity index 100% rename from docs/public/Nebulica-Regular.ttf rename to apps/cloud/docs/public/Nebulica-Regular.ttf diff --git a/docs/public/Nebulica-SemiBold.ttf b/apps/cloud/docs/public/Nebulica-SemiBold.ttf similarity index 100% rename from docs/public/Nebulica-SemiBold.ttf rename to apps/cloud/docs/public/Nebulica-SemiBold.ttf diff --git a/apps/cloud/docs/public/akamai_white.webp b/apps/cloud/docs/public/akamai_white.webp new file mode 100644 index 00000000..d209111b Binary files /dev/null and b/apps/cloud/docs/public/akamai_white.webp differ diff --git a/apps/cloud/docs/public/aws_white.webp b/apps/cloud/docs/public/aws_white.webp new file mode 100644 index 00000000..2ba3fdc0 Binary files /dev/null and b/apps/cloud/docs/public/aws_white.webp differ diff --git a/apps/cloud/docs/public/azure_white.webp b/apps/cloud/docs/public/azure_white.webp new file mode 100644 index 00000000..eea3d68d Binary files /dev/null and b/apps/cloud/docs/public/azure_white.webp differ diff --git a/docs/public/cf-dns-entry-cname.png b/apps/cloud/docs/public/cf-dns-entry-cname.png similarity index 100% rename from docs/public/cf-dns-entry-cname.png rename to apps/cloud/docs/public/cf-dns-entry-cname.png diff --git a/apps/cloud/docs/public/cloudflare_white.webp b/apps/cloud/docs/public/cloudflare_white.webp new file mode 100644 index 00000000..69d05d7c Binary files /dev/null and b/apps/cloud/docs/public/cloudflare_white.webp differ diff --git a/docs/public/dark-bg-icon.png b/apps/cloud/docs/public/dark-bg-icon.png similarity index 100% rename from docs/public/dark-bg-icon.png rename to apps/cloud/docs/public/dark-bg-icon.png diff --git a/docs/public/dark-bg-logo.png b/apps/cloud/docs/public/dark-bg-logo.png similarity index 100% rename from docs/public/dark-bg-logo.png rename to apps/cloud/docs/public/dark-bg-logo.png diff --git a/apps/cloud/docs/public/fastly_white.webp b/apps/cloud/docs/public/fastly_white.webp new file mode 100644 index 00000000..7ed58d95 Binary files /dev/null and b/apps/cloud/docs/public/fastly_white.webp differ diff --git a/docs/public/favicon.ico b/apps/cloud/docs/public/favicon.ico similarity index 100% rename from docs/public/favicon.ico rename to apps/cloud/docs/public/favicon.ico diff --git a/apps/cloud/docs/public/fonts.css b/apps/cloud/docs/public/fonts.css new file mode 100644 index 00000000..2e9232e8 --- /dev/null +++ b/apps/cloud/docs/public/fonts.css @@ -0,0 +1,19 @@ +@font-face { + font-family: "Nebulica-Black"; + src: url("../docs/public/Nebulica-Black.ttf"); +} + +@font-face { + font-family: "Nebulica-Regular"; + src: url("../docs/public/Nebulica-Regular.ttf"); +} + +@font-face { + font-family: "Nebulica-ExtraLight"; + src: url("../docs/public/Nebulica-ExtraLight.ttf"); +} + +@font-face { + font-family: "Nebulica-SemiBold"; + src: url("../docs/public/Nebulica-SemiBold.ttf"); +} \ No newline at end of file diff --git a/docs/public/light-bg-logo.png b/apps/cloud/docs/public/light-bg-logo.png similarity index 100% rename from docs/public/light-bg-logo.png rename to apps/cloud/docs/public/light-bg-logo.png diff --git a/apps/cloud/docs/public/netlify_white.webp b/apps/cloud/docs/public/netlify_white.webp new file mode 100644 index 00000000..52989d27 Binary files /dev/null and b/apps/cloud/docs/public/netlify_white.webp differ diff --git a/apps/cloud/docs/public/rspress-dark-logo.png b/apps/cloud/docs/public/rspress-dark-logo.png new file mode 100644 index 00000000..928bcc91 Binary files /dev/null and b/apps/cloud/docs/public/rspress-dark-logo.png differ diff --git a/apps/cloud/docs/public/rspress-icon.png b/apps/cloud/docs/public/rspress-icon.png new file mode 100644 index 00000000..6be2af2f Binary files /dev/null and b/apps/cloud/docs/public/rspress-icon.png differ diff --git a/apps/cloud/docs/public/rspress-light-logo.png b/apps/cloud/docs/public/rspress-light-logo.png new file mode 100644 index 00000000..1e3442ee Binary files /dev/null and b/apps/cloud/docs/public/rspress-light-logo.png differ diff --git a/apps/cloud/docs/public/zephyr-logo.svg b/apps/cloud/docs/public/zephyr-logo.svg new file mode 100644 index 00000000..9fda7925 --- /dev/null +++ b/apps/cloud/docs/public/zephyr-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/cloud/eslint.config.mjs b/apps/cloud/eslint.config.mjs new file mode 100644 index 00000000..84a10c6e --- /dev/null +++ b/apps/cloud/eslint.config.mjs @@ -0,0 +1,10 @@ +import js from '@eslint/js'; +import globals from 'globals'; +import ts from 'typescript-eslint'; + +export default [ + { languageOptions: { globals: globals.browser } }, + js.configs.recommended, + ...ts.configs.recommended, + { ignores: ['dist/'] }, +]; diff --git a/apps/cloud/module-federation.config.ts b/apps/cloud/module-federation.config.ts new file mode 100644 index 00000000..78531fc6 --- /dev/null +++ b/apps/cloud/module-federation.config.ts @@ -0,0 +1,22 @@ +import { createModuleFederationConfig } from '@module-federation/rspress-plugin'; + +export default createModuleFederationConfig({ + filename: 'remoteEntry.js', + name: 'cloud_docs', + exposes: { + // Main cloud documentation entry points + './CloudDocs': './docs/index.mdx', + './CloudOverview': './docs/cloud.mdx', + + // Cloud provider specific documentation + './CloudProviders': './docs/cloud', + './CloudflareProvider': './docs/cloud/cloudflare.mdx', + './NetlifyProvider': './docs/cloud/netlify.mdx', + './AWSProvider': './docs/cloud/aws.mdx', + './AkamaiProvider': './docs/cloud/akamai.mdx', + './FastlyProvider': './docs/cloud/fastly.mdx', + + // Cloud management and operations + './UpdatingIntegrations': './docs/cloud/updating-integrations.mdx', + }, +}); diff --git a/apps/cloud/package.json b/apps/cloud/package.json new file mode 100644 index 00000000..98eed1ec --- /dev/null +++ b/apps/cloud/package.json @@ -0,0 +1,32 @@ +{ + "name": "cloud", + "version": "1.0.0", + "private": true, + "scripts": { + "build": "rspress build", + "dev": "rspress dev --port 3002", + "format": "prettier --write .", + "lint": "eslint .", + "preview": "rspress preview" + }, + "dependencies": { + "@module-federation/rspress-plugin": "^0.18.3", + "@rspress/core": "2.0.0-beta.31", + "@zephyr-docs/shared": "workspace:*", + "lucide-react": "^0.484.0" + }, + "devDependencies": { + "@eslint/js": "^9.32.0", + "@tailwindcss/postcss": "^4.1.13", + "@tailwindcss/typography": "^0.5.16", + "@types/node": "^22.8.1", + "@types/react": "^19.0.12", + "eslint": "^9.32.0", + "globals": "^16.3.0", + "postcss": "^8.5.6", + "postcss-loader": "^8.2.0", + "prettier": "^3.6.2", + "tailwindcss": "^4.1.13", + "typescript-eslint": "^8.38.0" + } +} diff --git a/apps/cloud/postcss.config.mjs b/apps/cloud/postcss.config.mjs new file mode 100644 index 00000000..a34a3d56 --- /dev/null +++ b/apps/cloud/postcss.config.mjs @@ -0,0 +1,5 @@ +export default { + plugins: { + '@tailwindcss/postcss': {}, + }, +}; diff --git a/apps/cloud/rspress.config.ts b/apps/cloud/rspress.config.ts new file mode 100644 index 00000000..b56be864 --- /dev/null +++ b/apps/cloud/rspress.config.ts @@ -0,0 +1,91 @@ +import { defineConfig, UserConfig } from '@rspress/core'; +import { pluginModuleFederation } from '@module-federation/rspress-plugin'; +import mfConfig from './module-federation.config'; +import path from "node:path" + +const config: UserConfig = defineConfig({ + root: 'docs', + title: 'Zephyr Cloud Documentation', + description: + 'Comprehensive documentation for Zephyr Cloud - Build, deploy, and manage your micro-frontends with ease.', + icon: '/favicon.ico', + globalStyles: path.join(__dirname, 'styles/index.css'), + builderConfig: { + output: { + distPath: { + root: '../dist', + }, + }, + }, + logo: { + light: '/light-bg-logo.png', + dark: '/dark-bg-logo.png', + }, + themeConfig: { + footer: { + message: 'Made with ❀️ by the Module Federation Team', + }, + nav: [ + { + text: 'Cloud Overview', + link: '/cloud', + activeMatch: '^/cloud$', + }, + { + text: 'Providers', + link: '/cloud/cloudflare', + activeMatch: '^/cloud/', + }, + ], + sidebar: { + '/': [ + { + text: 'Overview', + items: [ + { + text: 'Cloud Providers Overview', + link: '/cloud', + }, + ], + }, + { + text: 'Cloud Providers', + items: [ + { + text: 'AWS', + link: '/cloud/aws', + }, + { + text: 'Cloudflare', + link: '/cloud/cloudflare', + }, + { + text: 'Netlify', + link: '/cloud/netlify', + }, + { + text: 'Akamai', + link: '/cloud/akamai', + }, + { + text: 'Fastly', + link: '/cloud/fastly', + }, + ], + }, + { + text: 'Configuration', + items: [ + { + text: 'Updating Integrations', + link: '/cloud/updating-integrations', + }, + ], + }, + ], + }, + }, + plugins: [pluginModuleFederation(mfConfig)], +}); + +export default config; diff --git a/apps/cloud/styles/fonts.css b/apps/cloud/styles/fonts.css new file mode 100644 index 00000000..2e9232e8 --- /dev/null +++ b/apps/cloud/styles/fonts.css @@ -0,0 +1,19 @@ +@font-face { + font-family: "Nebulica-Black"; + src: url("../docs/public/Nebulica-Black.ttf"); +} + +@font-face { + font-family: "Nebulica-Regular"; + src: url("../docs/public/Nebulica-Regular.ttf"); +} + +@font-face { + font-family: "Nebulica-ExtraLight"; + src: url("../docs/public/Nebulica-ExtraLight.ttf"); +} + +@font-face { + font-family: "Nebulica-SemiBold"; + src: url("../docs/public/Nebulica-SemiBold.ttf"); +} \ No newline at end of file diff --git a/apps/cloud/styles/index.css b/apps/cloud/styles/index.css new file mode 100644 index 00000000..31e94033 --- /dev/null +++ b/apps/cloud/styles/index.css @@ -0,0 +1,212 @@ +/** + * Some common css theme variables and they will be used in the tailwind theme as well. + */ + +@import 'tailwindcss'; + +@import url('./fonts.css'); +:root { + /*--rp-nav-height: 72px;*/ + /*--rp-sidebar-width: 320px;*/ + /*--rp-aside-width: 268px;*/ +} + +:root { + --rp-c-bg: #ffffff; + --rp-c-bg-soft: #f9f9f9; + --rp-c-bg-mute: #f1f1f1; + + /*--rp-c-divider: rgba(60, 60, 60, 0.29);*/ + --rp-c-divider-light: rgba(60, 60, 60, 0.12); + + --rp-c-text-1: #213547; + /*--rp-c-text-2: rgba(60, 60, 60, 0.66);*/ + /*--rp-c-text-3: rgba(60, 60, 60, 0.33);*/ + /*--rp-c-text-4: rgba(60, 60, 60, 0.18);*/ + + /*--rp-c-text-code: #476573;*/ + + --rp-c-brand: #5889d5; + --rp-c-brand-light: #00aaff; + --rp-c-brand-lighter: #ecf4ff; + --rp-c-brand-dark: #287dde; + --rp-c-brand-darker: #3367af; + --rp-c-brand-tint: rgba(127, 163, 255, 0.16); + + /*--rp-c-gray: #8e8e8e;*/ + --rp-c-gray-light-1: #aeaeae; + --rp-c-gray-light-2: #c7c7c7; + --rp-c-gray-light-3: #d1d1d1; + /*--rp-c-gray-light-4: #e5e5e5;*/ + /*--rp-c-gray-light-5: #f2f2f2;*/ + + --rp-c-dark: #000000; + --rp-c-dark-light-1: #2f2f2f; + --rp-c-dark-light-2: #3a3a3a; + /*--rp-c-dark-light-3: #4a4a4a;*/ + /*--rp-c-dark-light-4: #5c5c5c;*/ + /*--rp-c-dark-light-5: #6b6b6b;*/ + + --rp-radiu-none: 0rem; + --rp-radius: 1rem; + /*--rp-radius-small: 0.5rem;*/ + --rp-radius-large: 1.5rem; +} + +.dark { + --rp-c-bg: #010101; + --rp-c-bg-soft: #111111; + --rp-c-bg-mute: #1e1e1e; + --rp-c-bg-alt: #000; + + --rp-c-divider: rgba(84, 84, 84, 0.65); + --rp-c-divider-light: rgba(84, 84, 84, 0.48); + + --rp-c-text-1: rgba(255, 255, 255, 0.87); + --rp-c-text-2: rgba(235, 235, 235, 0.66); + --rp-c-text-3: rgba(235, 235, 235, 0.38); + --rp-c-text-4: rgba(235, 235, 235, 0.18); + + /*!* Will be used in overview page *!*/ + --rp-c-text-code: #c9def1; +} + +:root { + /*--rp-z-index-local-nav: 10;*/ + /*--rp-z-index-nav: 20;*/ + /*--rp-z-index-backdrop: 30;*/ + /*--rp-z-index-sidebar: 40;*/ +} + +:root { + /*--rp-shadow-1: 0 1px 4px rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.06);*/ + /*--rp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);*/ + /*--rp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);*/ + /*--rp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);*/ + /*--rp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);*/ +} + +html { + scroll-behavior: smooth; +} + +dt { + font-weight: bold; + padding: 0em 0em; + color: var(--rp-c-text-1); +} + +dd { + display: inline-block; + padding: 0.02em 2em; + color: var(--rp-c-text-1); +} + +.glow { + animation: move 5s linear infinite; + background: radial-gradient(#6d9d9d, #ffffff, transparent); + offset-path: rect(0% auto 100% auto); +} + +.keyboard-shortcut { + font-family: 'Inter', sans-serif; + font-size: 0.75rem; + font-weight: 500; + line-height: 1.4; + letter-spacing: -0.015rem; + border: 1px solid var(--rp-c-text-2); + border-radius: 3px; + box-shadow: 0 1px 0 0 var(--rp-c-text-2); + padding: 0.8px 6px; + color: var(--rp-c-text-1); +} + +@keyframes move { + 0% { + offset-distance: 0%; + } + + 50% { + offset-distance: 50%; + } + + 100% { + offset-distance: 100%; + } +} + +/* Fix prev/next navigation buttons - must be outside @layer for proper specificity */ +.rspress-doc-footer footer > div:last-child { + display: flex !important; + flex-direction: row !important; + justify-content: space-between !important; + gap: 1rem !important; +} + +.rspress-doc-footer [class*='prev_'], +.rspress-doc-footer [class*='next_'] { + flex: 1 1 50% !important; + width: 50% !important; + min-width: 0 !important; +} + +.rspress-doc-footer [class*='prev_'] { + text-align: left !important; +} + +.rspress-doc-footer [class*='next_'] { + text-align: right !important; +} + +.rspress-doc-footer [class*='prev_'] a, +.rspress-doc-footer [class*='next_'] a { + width: 100% !important; + display: block !important; +} + +@layer base { + hr { + @apply border-b-[0.4px] items-center w-full opacity-20 !py-4 flex; + } + + hr { + @apply border-b-[0.4px] items-center w-full opacity-20 !py-4 flex; + } + + ol { + & a { + & h2 { + @apply lg:text-lg text-base font-bold tracking-tight !my-0; + } + + & p { + @apply text-sm tracking-tight; + } + } + } + + p { + & strong { + @apply !py-4; + } + } + + sup { + @apply text-xs text-[var(--rp-c-brand)]; + } + + div::selection, + p::selection, + h1::selection, + h2::selection, + h3::selection, + h4::selection, + h5::selection, + h6::selection, + span::selection, + a::selection, + li::selection, + code::selection { + background-color: var(--rp-c-brand-tint); + } +} diff --git a/apps/cloud/tailwind.config.ts b/apps/cloud/tailwind.config.ts new file mode 100644 index 00000000..623ca890 --- /dev/null +++ b/apps/cloud/tailwind.config.ts @@ -0,0 +1,91 @@ +import colors from "tailwindcss/colors"; +/** @type {import('tailwindcss').Config} */ +import theme from "tailwindcss/defaultTheme"; + +module.exports = { + content: [ + "./docs/**/*.{js,ts,jsx,tsx,md,mdx}", + "./components/**/*.{js,ts,jsx,tsx,md,mdx}", + "./components/*.{js,ts,jsx,tsx,md,mdx}", + "./theme/*.{js,ts,jsx,tsx,md,mdx}", + ], + theme: { + ...theme, + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + colors: { + transparent: "transparent", + current: "currentColor", + black: colors.black, + slate: colors.slate, + neutral: colors.neutral, + stone: colors.stone, + zinc: colors.zinc, + white: colors.white, + gray: colors.gray, + red: colors.red, + orange: colors.orange, + amber: colors.amber, + lime: colors.lime, + green: colors.green, + emerald: colors.emerald, + teal: colors.teal, + cyan: colors.cyan, + sky: colors.sky, + indigo: colors.indigo, + violet: colors.violet, + purple: colors.purple, + fuchsia: colors.fuchsia, + pink: colors.pink, + rose: colors.rose, + yellow: colors.yellow, + }, + fontWeights: { + thin: 100, + extralight: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, + }, + extend: { + colors: { + // FIXME: this is not work yet not sure why + background: { + DEFAULT: "hsl(var(--rp-c-bg)/)", + dark: "#1a1a1a", + }, + "background-soft": "hsl(var(--rp-c-bg-soft)/)", + "background-muted": "hsl(var(--rp-c-bg-mute)/)", + divider: "hsl(var(--rp-c-divider)/)", + "divider-light": "hsl(var(--rp-c-divider-light)/)", + text_1: "hsl(var(--rp-c-text-1)/)", + text_2: "hsl(var(--rp-c-text-2)/)", + text_3: "hsl(var(--rp-c-text-3)/)", + text_4: "hsl(var(--rp-c-text-4)/)", + text_code: "hsl(var(--rp-c-text-code)/)", + brand: "hsl(var(--rp-c-brand)/)", + "brand-light": "hsl(var(--rp-c-brand-light)/)", + "brand-lighter": "hsl(var(--rp-c-brand-lighter)/)", + "brand-dark": "hsl(var(--rp-c-brand-dark)/)", + "brand-darker": "hsl(var(--rp-c-brand-darker)/)", + "brand-tint": "hsl(var(--rp-c-brand-tint)/)", + "gray-light-1": "hsl(var(--rp-c-gray-light-1)/)", + "gray-light-2": "hsl(var(--rp-c-gray-light-2)/)", + }, + fontFamily: { + "nebu-semibold": ["Nebulica-SemiBold", "sans-serif"], + nebu: ["Nebulica-Regular", "sans-serif"], + }, + }, + }, + plugins: [require("@tailwindcss/typography")], +}; \ No newline at end of file diff --git a/apps/cloud/theme/index.tsx b/apps/cloud/theme/index.tsx new file mode 100644 index 00000000..7d4f650f --- /dev/null +++ b/apps/cloud/theme/index.tsx @@ -0,0 +1,31 @@ +import { Layout as BasicLayout } from '@rspress/core/theme'; +import { CloudSidebar } from '../components/cloud-sidebar'; + +const Layout = () => { + const pageData = usePageData(); + const { pageType } = pageData; + + // For doc pages, use our custom layout with CloudSidebar + if (pageType === 'doc') { + return ( +
+ +
+
+ +
+
+
+ ); + } + + // For all other page types, use the default layout + return ; +}; + +const setup = () => {}; + +export { Layout, setup }; + +// Re-export all content from the default theme +export * from '@rspress/core/theme'; diff --git a/apps/cloud/tsconfig.json b/apps/cloud/tsconfig.json new file mode 100644 index 00000000..f4ebba76 --- /dev/null +++ b/apps/cloud/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ES2020", + "lib": ["DOM", "ES2020"], + "module": "ESNext", + "jsx": "react-jsx", + "strict": true, + "skipLibCheck": true, + "isolatedModules": true, + "resolveJsonModule": true, + "moduleResolution": "bundler", + "useDefineForClassFields": true, + "emitDeclarationOnly": true, + "allowImportingTsExtensions": true, + "composite": true + }, + "include": ["docs", "theme", "rspress.config.ts", "components", "module-federation.config.ts"], + "mdx": { + "checkMdx": true + } +} diff --git a/apps/host/README.md b/apps/host/README.md new file mode 100644 index 00000000..a8919f3b --- /dev/null +++ b/apps/host/README.md @@ -0,0 +1,22 @@ +# Zephyr Cloud Docs + +Welcome to the Zephyr Cloud documentation repository. + +[![Netlify Status](https://api.netlify.com/api/v1/badges/a6a769b6-39a8-4a3b-84f4-d4b970f68c1f/deploy-status)](https://app.netlify.com/sites/zephyr-cloud-docs/deploys) + +## Building docs + +Built using [Rspress](https://rspress.dev/). +Run: + +```bash +pnpm install +pnpm build +``` + +## Sitemap Note +Because sitemap is not visible to the bundler (for now). We need to manually update +the site map file in the root of the repo when adding pages. + +## Contributors +![Alt](https://repobeats.axiom.co/api/embed/fd0de09aa25d444bf55d21d43902d7c71f4e69d2.svg "Repobeats analytics image") diff --git a/components/browser-table.tsx b/apps/host/components/browser-table.tsx similarity index 98% rename from components/browser-table.tsx rename to apps/host/components/browser-table.tsx index d07497f2..37361fa7 100644 --- a/components/browser-table.tsx +++ b/apps/host/components/browser-table.tsx @@ -1,5 +1,4 @@ import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons"; -import { supportedBrowser } from "../lib/site.config"; import { Table, TableBody, @@ -8,7 +7,8 @@ import { TableHead, TableHeader, TableRow, -} from "./ui/table"; +} from "@zephyr-docs/shared"; +import { supportedBrowser } from "../lib/site.config"; export default function SupportedBrowser() { return ( diff --git a/apps/host/components/dynamic-content-layout.tsx b/apps/host/components/dynamic-content-layout.tsx new file mode 100644 index 00000000..06df7044 --- /dev/null +++ b/apps/host/components/dynamic-content-layout.tsx @@ -0,0 +1,244 @@ +import { ChevronDown, ChevronRight, Search } from "lucide-react"; +import { useState } from "react"; +import { HeroSection } from "./hero-section"; +import { MFEContent } from "./mfe-content"; + +const mfeApps = [ + { + name: "AI", + badge: "BETA", + docsUrl: "http://localhost:3001", + examplesUrl: + "https://github.com/zephyrcloudio/zephyr-examples/tree/main/ai", + githubUrl: "https://github.com/zephyrcloudio/zephyr-ai", + }, + { + name: "Cloud", + badge: null, + docsUrl: "http://localhost:3002", + examplesUrl: + "https://github.com/zephyrcloudio/zephyr-examples/tree/main/cloud", + githubUrl: "https://github.com/zephyrcloudio/zephyr-cloud", + }, + { + name: "Mobile", + badge: "NEW", + docsUrl: "http://localhost:3003", + examplesUrl: + "https://github.com/zephyrcloudio/zephyr-examples/tree/main/mobile", + githubUrl: "https://github.com/zephyrcloudio/zephyr-mobile", + }, + { + name: "Sidepanel", + badge: "ALPHA", + docsUrl: "http://localhost:3004", + examplesUrl: + "https://github.com/zephyrcloudio/zephyr-examples/tree/main/sidepanel", + githubUrl: "https://github.com/zephyrcloudio/zephyr-sidepanel", + }, + { + name: "Web", + badge: null, + docsUrl: "http://localhost:3005", + examplesUrl: + "https://github.com/zephyrcloudio/zephyr-examples/tree/main/web", + githubUrl: "https://github.com/zephyrcloudio/zephyr-web", + }, +]; + +const socialItems = [ + { name: "Discord", href: "https://zephyr-cloud.io/discord" }, + { name: "GitHub", href: "https://github.com/zephyrcloudio" }, + { name: "Blog", href: "https://zephyr-cloud.io/blog" }, + { name: "Twitter", href: "https://twitter.com/ZephyrCloudIO" }, +]; + +export function DynamicContentLayout() { + const [selectedMfe, setSelectedMfe] = useState(null); + const [expandedMfe, setExpandedMfe] = useState(null); + + const toggleMfe = (name: string) => { + setExpandedMfe(expandedMfe === name ? null : name); + }; + + const selectMfe = (name: string) => { + setSelectedMfe(name); + }; + + const goHome = () => { + setSelectedMfe(null); + setExpandedMfe(null); + }; + + return ( +
+ {/* Sidebar */} +
+ {/* Header */} +
+ +
+
+ AUTO +
+
+ + {/* Search */} +
+
+ +
+ +
+ ⌘ + K +
+
+
+ + {/* MFE Apps Navigation */} +
+
+ {mfeApps.map((app) => ( +
+ + + {/* Dropdown Menu */} + {expandedMfe === app.name && ( + + )} +
+ ))} +
+ + {/* Divider */} +
+ + {/* Social Items */} +
+ {socialItems.map((item) => ( + + ))} +
+ + {/* Dashboard Link */} + +
+
+ + {/* Main Content Area */} +
+
+ {selectedMfe ? ( + + ) : ( + + )} +
+
+
+ ); +} diff --git a/components/errors/info.tsx b/apps/host/components/errors/info.tsx similarity index 96% rename from components/errors/info.tsx rename to apps/host/components/errors/info.tsx index 949b711a..83f40c24 100644 --- a/components/errors/info.tsx +++ b/apps/host/components/errors/info.tsx @@ -1,4 +1,3 @@ -import { Helmet } from "rspress/runtime"; import { getErrorMessage } from "../../lib/error-helpers"; import { ErrorLink } from "./link"; @@ -29,7 +28,7 @@ export function ErrorInfo({ return (
- + @@ -40,7 +39,7 @@ export function ErrorInfo({ {code} - {message} - +
  • diff --git a/components/errors/link.tsx b/apps/host/components/errors/link.tsx similarity index 94% rename from components/errors/link.tsx rename to apps/host/components/errors/link.tsx index 1808cedd..060e4ef9 100644 --- a/components/errors/link.tsx +++ b/apps/host/components/errors/link.tsx @@ -1,5 +1,5 @@ +import { useNavigate } from "@rspress/runtime"; import { useState } from "react"; -import { useNavigate } from "rspress/runtime"; import { getErrorMessage } from "../../lib/error-helpers"; export function ErrorLink({ code }: { code: string }) { diff --git a/components/errors/tables.tsx b/apps/host/components/errors/tables.tsx similarity index 95% rename from components/errors/tables.tsx rename to apps/host/components/errors/tables.tsx index 89a3a047..acf219b8 100644 --- a/components/errors/tables.tsx +++ b/apps/host/components/errors/tables.tsx @@ -1,5 +1,4 @@ -import { useNavigate } from "rspress/runtime"; -import { Categories, Errors } from "../../lib/error-codes-messages"; +import { useNavigate } from "@rspress/runtime"; import { Table, TableBody, @@ -7,7 +6,8 @@ import { TableHead, TableHeader, TableRow, -} from "../ui/table"; +} from "@zephyr-docs/shared"; +import { Categories, Errors } from "../../lib/error-codes-messages"; export function ErrorTables({ category, diff --git a/components/footer.tsx b/apps/host/components/footer.tsx similarity index 94% rename from components/footer.tsx rename to apps/host/components/footer.tsx index c3e6acad..8027b99e 100644 --- a/components/footer.tsx +++ b/apps/host/components/footer.tsx @@ -46,20 +46,20 @@ export const Footer = () => {