diff --git a/README.md b/README.md index 7e0ccb3..60d63ed 100644 --- a/README.md +++ b/README.md @@ -1 +1,209 @@ -# Sendook \ No newline at end of file +# Sendook + +> Email infrastructure for AI agents + +[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) +[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)](https://www.typescriptlang.org/) +[![MongoDB](https://img.shields.io/badge/MongoDB-4EA94B?logo=mongodb&logoColor=white)](https://www.mongodb.com/) + +Stop wrestling with Gmail APIs and AWS SES setup. Sendook provides simple, powerful email infrastructure designed specifically for AI agents. + +## ๐Ÿš€ Quick Start + +```bash +# Install the SDK +npm install @sendook/node-sdk + +# Create an inbox and start sending emails +import { Sendook } from '@sendook/node-sdk'; + +const client = new Sendook({ apiKey: process.env.SENDOOK_API_KEY }); + +// Create an inbox +const inbox = await client.inboxes.create({ + name: 'My AI Agent' +}); + +// Send an email +await client.messages.send({ + inboxId: inbox.id, + to: 'customer@example.com', + subject: 'Hello from my AI agent', + body: 'This is easy!' +}); +``` + +## โœจ Why Sendook? + +Traditional email setup for AI agents is painful: +- โŒ Days of DNS configuration (SPF, DKIM, DMARC) +- โŒ Complex Gmail OAuth flows or AWS SES setup +- โŒ Manual MIME parsing and attachment handling +- โŒ Polling for new emails +- โŒ Managing threads and conversations + +Sendook eliminates all of this: +- โœ… Create inboxes via API in seconds +- โœ… Receive real-time webhooks for incoming emails +- โœ… Pre-decoded JSON responses, ready for consumption +- โœ… Automatic thread management +- โœ… Built-in search and storage +- โœ… Open source (MIT license) + +## ๐Ÿ—๏ธ Repository Structure + +This monorepo contains: + +- **`api/`** - Backend API server (Node.js + MongoDB) +- **`landing/`** - Marketing website (Nuxt 3 + Nuxt UI) +- **`node-sdk/`** - Official Node.js SDK + +## ๐Ÿ› ๏ธ Development Setup + +### Prerequisites + +- Node.js 18+ +- Bun or npm +- MongoDB 5.0+ +- Docker (optional, for containerized development) + +### Local Development + +1. **Clone the repository** + +```bash +git clone https://github.com/sendook/sendook.git +cd sendook +``` + +2. **Install dependencies** + +```bash +# Install dependencies for all packages +npm install +``` + +3. **Set up environment variables** + +```bash +# API +cd api +cp .env.example .env +# Edit .env with your MongoDB connection string and other settings + +# Landing page +cd ../landing +cp .env.example .env +# Edit .env with your configuration +``` + +4. **Start MongoDB** + +```bash +# Using Docker +docker run -d -p 27017:27017 --name sendook-mongo mongo:5.0 + +# Or use your local MongoDB installation +``` + +5. **Start the API server** + +```bash +cd api +bun dev +# API runs on http://localhost:3000 +``` + +6. **Start the landing page** + +```bash +cd landing +bun dev +# Landing page runs on http://localhost:3001 +``` + +## ๐Ÿณ Docker Setup + +Run the entire stack with Docker Compose: + +```bash +docker-compose up -d +``` + +This starts: +- API server on port 3000 +- Landing page on port 3001 +- MongoDB on port 27017 + +## ๐Ÿ“– Documentation + +- **[Getting Started](./landing/content/1.docs/1.getting-started/1.index.md)** - Introduction and setup +- **[Installation](./landing/content/1.docs/1.getting-started/2.installation.md)** - Detailed installation guide +- **[Usage Guide](./landing/content/1.docs/1.getting-started/3.usage.md)** - Core workflows and examples +- **[API Documentation](./api/README.md)** - Complete API reference +- **[SDK Documentation](./node-sdk/README.md)** - Node.js SDK reference + +## ๐Ÿงช Running Tests + +```bash +# Run all tests +npm test + +# Run API tests +cd api && bun test + +# Run SDK tests +cd node-sdk && bun test +``` + +## ๐Ÿšข Deployment + +### Cloud Hosting (Recommended for Production) + +Deploy to your preferred platform: + +- **Vercel/Netlify** - Landing page +- **Railway/Render/Fly.io** - API server +- **MongoDB Atlas** - Database + +### Self-Hosting + +See the [Installation Guide](./landing/content/1.docs/1.getting-started/2.installation.md#self-hosted-setup) for complete self-hosting instructions. + +## ๐Ÿค Contributing + +We welcome contributions! Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for details. + +1. Fork the repository +2. Create a feature branch (`git checkout -b feature/amazing-feature`) +3. Commit your changes (`git commit -m 'Add amazing feature'`) +4. Push to the branch (`git push origin feature/amazing-feature`) +5. Open a Pull Request + +## ๐Ÿ“ License + +Sendook is open source software licensed under the [MIT license](./LICENSE). + +## ๐ŸŒŸ Support + +- ๐Ÿ“š [Documentation](https://sendook.com/docs) +- ๐Ÿ’ฌ [Discord Community](https://discord.gg/sendook) +- ๐Ÿ› [Issue Tracker](https://github.com/sendook/sendook/issues) +- ๐Ÿ“ง [Email Support](mailto:support@sendook.com) + +## ๐Ÿ—บ๏ธ Roadmap + +- [x] Core email infrastructure +- [x] Webhook notifications +- [x] Multi-inbox support +- [x] Node.js SDK +- [ ] Python SDK +- [ ] Go SDK +- [ ] Advanced analytics +- [ ] Email templates +- [ ] A/B testing +- [ ] Email tracking (opens, clicks) + +--- + +Built with โค๏ธ for AI agents that need to communicate \ No newline at end of file diff --git a/landing/.editorconfig b/landing/.editorconfig new file mode 100755 index 0000000..9142239 --- /dev/null +++ b/landing/.editorconfig @@ -0,0 +1,13 @@ +# editorconfig.org +root = true + +[*] +indent_size = 2 +indent_style = space +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/landing/.env.example b/landing/.env.example new file mode 100644 index 0000000..7e60b07 --- /dev/null +++ b/landing/.env.example @@ -0,0 +1,2 @@ +# Public URL, used for OG Image when running nuxt generate +NUXT_PUBLIC_SITE_URL= diff --git a/landing/.github/workflows/ci.yml b/landing/.github/workflows/ci.yml new file mode 100644 index 0000000..a556faf --- /dev/null +++ b/landing/.github/workflows/ci.yml @@ -0,0 +1,34 @@ +name: ci + +on: push + +jobs: + ci: + runs-on: ${{ matrix.os }} + + strategy: + matrix: + os: [ubuntu-latest] + node: [22] + + steps: + - name: Checkout + uses: actions/checkout@v5 + + - name: Install pnpm + uses: pnpm/action-setup@v4 + + - name: Install node + uses: actions/setup-node@v6 + with: + node-version: ${{ matrix.node }} + cache: pnpm + + - name: Install dependencies + run: pnpm install + + - name: Lint + run: pnpm run lint + + - name: Typecheck + run: pnpm run typecheck diff --git a/landing/.gitignore b/landing/.gitignore new file mode 100644 index 0000000..6bbb425 --- /dev/null +++ b/landing/.gitignore @@ -0,0 +1,27 @@ +# Nuxt dev/build outputs +.output +.data +.nuxt +.nitro +.cache +dist + +# Node dependencies +node_modules + +# Logs +logs +*.log + +# Misc +.DS_Store +.fleet +.idea + +# Local env files +.env +.env.* +!.env.example + +# VSC +.history diff --git a/landing/.npmrc b/landing/.npmrc new file mode 100644 index 0000000..bf2e764 --- /dev/null +++ b/landing/.npmrc @@ -0,0 +1 @@ +shamefully-hoist=true diff --git a/landing/README.md b/landing/README.md new file mode 100644 index 0000000..d88773e --- /dev/null +++ b/landing/README.md @@ -0,0 +1,211 @@ +# Sendook Landing Page + +> Marketing website and documentation for Sendook - Email infrastructure for AI agents + +[![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com) +[![Nuxt 3](https://img.shields.io/badge/Nuxt-3-00DC82?logo=nuxt&logoColor=white)](https://nuxt.com) +[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)](https://www.typescriptlang.org/) + +This is the landing page and documentation site for Sendook, built with [Nuxt 3](https://nuxt.com) and [Nuxt UI](https://ui.nuxt.com). + +## ๐Ÿš€ Quick Start + +### Prerequisites + +- Node.js 18+ +- Bun, npm, or pnpm + +### Setup + +Install dependencies: + +```bash +bun install +# or +npm install +# or +pnpm install +``` + +### Development Server + +Start the development server on `http://localhost:3001`: + +```bash +bun dev +# or +npm run dev +# or +pnpm dev +``` + +The site will be available at [http://localhost:3001](http://localhost:3001). + +## ๐Ÿ“ Project Structure + +``` +landing/ +โ”œโ”€โ”€ app/ +โ”‚ โ”œโ”€โ”€ components/ # Vue components +โ”‚ โ”œโ”€โ”€ layouts/ # Page layouts (default, auth, docs) +โ”‚ โ”œโ”€โ”€ pages/ # Route pages (index, pricing, blog, docs) +โ”‚ โ””โ”€โ”€ assets/ # CSS and static assets +โ”œโ”€โ”€ content/ # Markdown and YAML content +โ”‚ โ”œโ”€โ”€ 0.index.yml # Homepage content +โ”‚ โ”œโ”€โ”€ 1.docs/ # Documentation pages +โ”‚ โ”œโ”€โ”€ 2.pricing.yml # Pricing page content +โ”‚ โ”œโ”€โ”€ 3.blog/ # Blog posts +โ”‚ โ””โ”€โ”€ 4.changelog/ # Changelog entries +โ”œโ”€โ”€ public/ # Static files (favicon, images, etc.) +โ””โ”€โ”€ nuxt.config.ts # Nuxt configuration +``` + +## โœ๏ธ Editing Content + +### Homepage + +Edit `content/0.index.yml` to update: +- Hero section +- Feature sections +- Testimonials +- CTA + +### Pricing + +Edit `content/2.pricing.yml` to update: +- Pricing plans +- FAQ +- Logos + +### Documentation + +Add or edit Markdown files in `content/1.docs/`: + +```markdown +--- +title: Your Page Title +description: Page description for SEO +navigation: + icon: i-lucide-icon-name +--- + +Your content here... +``` + +### Blog Posts + +Add Markdown files in `content/3.blog/`: + +```markdown +--- +title: Blog Post Title +description: Post description +date: 2024-01-01 +author: Your Name +--- + +Your blog content... +``` + +## ๐ŸŽจ Customization + +### Theme Colors + +Edit `app/app.config.ts` to customize colors: + +```typescript +export default defineAppConfig({ + ui: { + primary: 'blue', + gray: 'slate' + } +}) +``` + +### CSS Styles + +Global styles are in `app/assets/css/main.css`. + +### Components + +Custom components are in `app/components/`. Nuxt UI components are auto-imported. + +## ๐Ÿ“ฆ Production + +Build the application for production: + +```bash +bun run build +# or +npm run build +# or +pnpm build +``` + +Preview the production build locally: + +```bash +bun run preview +# or +npm run preview +# or +pnpm preview +``` + +## ๐Ÿšข Deployment + +The landing page can be deployed to any static hosting provider: + +### Vercel + +```bash +vercel --prod +``` + +### Netlify + +```bash +netlify deploy --prod +``` + +### Other Platforms + +Build the static site and deploy the `.output/public` directory: + +```bash +bun run generate +# Deploy the .output/public directory +``` + +Check out the [Nuxt deployment documentation](https://nuxt.com/docs/getting-started/deployment) for platform-specific guides. + +## ๐Ÿ”ง Tech Stack + +- **[Nuxt 3](https://nuxt.com)** - Vue.js framework +- **[Nuxt UI](https://ui.nuxt.com)** - Component library +- **[Nuxt Content](https://content.nuxt.com)** - File-based CMS +- **[Tailwind CSS](https://tailwindcss.com)** - CSS framework +- **[TypeScript](https://www.typescriptlang.org/)** - Type safety + +## ๐Ÿ“– Documentation + +- [Nuxt 3 Documentation](https://nuxt.com/docs) +- [Nuxt UI Documentation](https://ui.nuxt.com) +- [Nuxt Content Documentation](https://content.nuxt.com) + +## ๐Ÿค Contributing + +Contributions to improve the landing page are welcome! + +1. Fork the repository +2. Create a feature branch +3. Make your changes +4. Submit a pull request + +## ๐Ÿ”„ Renovate Integration + +Install the [Renovate GitHub app](https://github.com/apps/renovate/installations/select_target) on your repository to automatically keep dependencies up to date. + +## ๐Ÿ“ License + +MIT License - see the [LICENSE](../LICENSE) file for details. diff --git a/landing/app/app.config.ts b/landing/app/app.config.ts new file mode 100644 index 0000000..5c9906d --- /dev/null +++ b/landing/app/app.config.ts @@ -0,0 +1,8 @@ +export default defineAppConfig({ + ui: { + colors: { + primary: 'primary', + neutral: 'gray' + } + } +}) diff --git a/landing/app/app.vue b/landing/app/app.vue new file mode 100644 index 0000000..88a08dc --- /dev/null +++ b/landing/app/app.vue @@ -0,0 +1,82 @@ + + + diff --git a/landing/app/assets/css/main.css b/landing/app/assets/css/main.css new file mode 100644 index 0000000..9406445 --- /dev/null +++ b/landing/app/assets/css/main.css @@ -0,0 +1,80 @@ +@import "tailwindcss"; +@import "@nuxt/ui"; + +@source "../../../content/**/*"; + +@theme static { + --font-sans: 'Public Sans', sans-serif; + + /* Primary - Black */ + --color-primary-50: #f5f5f5; + --color-primary-100: #e8e8e8; + --color-primary-200: #d1d1d1; + --color-primary-300: #ababab; + --color-primary-400: #7a7a7a; + --color-primary-500: #4a4a4a; + --color-primary-600: #2d2d2d; + --color-primary-700: #1a1a1a; + --color-primary-800: #0f0f0f; + --color-primary-900: #080708; + --color-primary-950: #030303; + + /* Blue - Accent */ + --color-blue-50: #eff6ff; + --color-blue-100: #dbeafe; + --color-blue-200: #bfdbfe; + --color-blue-300: #93c5fd; + --color-blue-400: #60a5fa; + --color-blue-500: #3772FF; + --color-blue-600: #2563eb; + --color-blue-700: #1d4ed8; + --color-blue-800: #1e40af; + --color-blue-900: #1e3a8a; + --color-blue-950: #172554; + + /* Red - Accent */ + --color-red-50: #fef2f2; + --color-red-100: #fee2e2; + --color-red-200: #fecaca; + --color-red-300: #fca5a5; + --color-red-400: #f87171; + --color-red-500: #DF2935; + --color-red-600: #dc2626; + --color-red-700: #b91c1c; + --color-red-800: #991b1b; + --color-red-900: #7f1d1d; + --color-red-950: #450a0a; + + /* Yellow - Accent */ + --color-yellow-50: #fefce8; + --color-yellow-100: #fef9c3; + --color-yellow-200: #fef08a; + --color-yellow-300: #fde047; + --color-yellow-400: #FDCA40; + --color-yellow-500: #eab308; + --color-yellow-600: #ca8a04; + --color-yellow-700: #a16207; + --color-yellow-800: #854d0e; + --color-yellow-900: #713f12; + --color-yellow-950: #422006; + + /* Gray - Neutral */ + --color-gray-50: #fafafa; + --color-gray-100: #f5f5f5; + --color-gray-200: #E6E8E6; + --color-gray-300: #d4d4d4; + --color-gray-400: #a3a3a3; + --color-gray-500: #737373; + --color-gray-600: #525252; + --color-gray-700: #404040; + --color-gray-800: #262626; + --color-gray-900: #171717; + --color-gray-950: #0a0a0a; +} + +.dark { + --ui-bg: var(--ui-color-neutral-950); + --ui-bg-muted: var(--ui-color-neutral-900); + --ui-bg-elevated: var(--ui-color-neutral-900); + --ui-bg-accented: var(--ui-color-neutral-800); +} diff --git a/landing/app/components/AppFooter.vue b/landing/app/components/AppFooter.vue new file mode 100644 index 0000000..9116ac7 --- /dev/null +++ b/landing/app/components/AppFooter.vue @@ -0,0 +1,116 @@ + + + diff --git a/landing/app/components/AppHeader.vue b/landing/app/components/AppHeader.vue new file mode 100644 index 0000000..e842269 --- /dev/null +++ b/landing/app/components/AppHeader.vue @@ -0,0 +1,95 @@ + + + diff --git a/landing/app/components/AppLogo.vue b/landing/app/components/AppLogo.vue new file mode 100644 index 0000000..b3576fc --- /dev/null +++ b/landing/app/components/AppLogo.vue @@ -0,0 +1,7 @@ + diff --git a/landing/app/components/HeroBackground.vue b/landing/app/components/HeroBackground.vue new file mode 100644 index 0000000..2f14ef1 --- /dev/null +++ b/landing/app/components/HeroBackground.vue @@ -0,0 +1,88 @@ + + + diff --git a/landing/app/components/ImagePlaceholder.vue b/landing/app/components/ImagePlaceholder.vue new file mode 100644 index 0000000..9266357 --- /dev/null +++ b/landing/app/components/ImagePlaceholder.vue @@ -0,0 +1,33 @@ + diff --git a/landing/app/components/OgImage/OgImageSaas.vue b/landing/app/components/OgImage/OgImageSaas.vue new file mode 100644 index 0000000..4b5f790 --- /dev/null +++ b/landing/app/components/OgImage/OgImageSaas.vue @@ -0,0 +1,29 @@ + + + diff --git a/landing/app/components/PromotionalVideo.vue b/landing/app/components/PromotionalVideo.vue new file mode 100644 index 0000000..2d72d82 --- /dev/null +++ b/landing/app/components/PromotionalVideo.vue @@ -0,0 +1,29 @@ + diff --git a/landing/app/components/StarsBg.vue b/landing/app/components/StarsBg.vue new file mode 100644 index 0000000..7084375 --- /dev/null +++ b/landing/app/components/StarsBg.vue @@ -0,0 +1,183 @@ + + + + + diff --git a/landing/app/components/TemplateMenu.vue b/landing/app/components/TemplateMenu.vue new file mode 100644 index 0000000..755b838 --- /dev/null +++ b/landing/app/components/TemplateMenu.vue @@ -0,0 +1,49 @@ + diff --git a/landing/app/components/content/PictureAndText.vue b/landing/app/components/content/PictureAndText.vue new file mode 100644 index 0000000..8b5c935 --- /dev/null +++ b/landing/app/components/content/PictureAndText.vue @@ -0,0 +1,21 @@ + + + diff --git a/landing/app/components/content/Pictures.vue b/landing/app/components/content/Pictures.vue new file mode 100644 index 0000000..f58abd2 --- /dev/null +++ b/landing/app/components/content/Pictures.vue @@ -0,0 +1,14 @@ + + + diff --git a/landing/app/error.vue b/landing/app/error.vue new file mode 100644 index 0000000..b4bcd66 --- /dev/null +++ b/landing/app/error.vue @@ -0,0 +1,70 @@ + + + diff --git a/landing/app/layouts/auth.vue b/landing/app/layouts/auth.vue new file mode 100644 index 0000000..c8e04c8 --- /dev/null +++ b/landing/app/layouts/auth.vue @@ -0,0 +1,19 @@ + diff --git a/landing/app/layouts/default.vue b/landing/app/layouts/default.vue new file mode 100644 index 0000000..29ccb0b --- /dev/null +++ b/landing/app/layouts/default.vue @@ -0,0 +1,11 @@ + diff --git a/landing/app/layouts/docs.vue b/landing/app/layouts/docs.vue new file mode 100644 index 0000000..fc76f95 --- /dev/null +++ b/landing/app/layouts/docs.vue @@ -0,0 +1,34 @@ + + + diff --git a/landing/app/pages/blog.vue b/landing/app/pages/blog.vue new file mode 100644 index 0000000..8f62b8b --- /dev/null +++ b/landing/app/pages/blog.vue @@ -0,0 +1,3 @@ + diff --git a/landing/app/pages/blog/[slug].vue b/landing/app/pages/blog/[slug].vue new file mode 100644 index 0000000..4dc6215 --- /dev/null +++ b/landing/app/pages/blog/[slug].vue @@ -0,0 +1,92 @@ + + + diff --git a/landing/app/pages/blog/index.vue b/landing/app/pages/blog/index.vue new file mode 100644 index 0000000..c9033bd --- /dev/null +++ b/landing/app/pages/blog/index.vue @@ -0,0 +1,49 @@ + + + diff --git a/landing/app/pages/changelog/index.vue b/landing/app/pages/changelog/index.vue new file mode 100644 index 0000000..6883cbd --- /dev/null +++ b/landing/app/pages/changelog/index.vue @@ -0,0 +1,41 @@ + + + diff --git a/landing/app/pages/docs/[...slug].vue b/landing/app/pages/docs/[...slug].vue new file mode 100644 index 0000000..31c86d2 --- /dev/null +++ b/landing/app/pages/docs/[...slug].vue @@ -0,0 +1,57 @@ + + + diff --git a/landing/app/pages/index.vue b/landing/app/pages/index.vue new file mode 100644 index 0000000..d9dbf2a --- /dev/null +++ b/landing/app/pages/index.vue @@ -0,0 +1,113 @@ + + + diff --git a/landing/app/pages/login.vue b/landing/app/pages/login.vue new file mode 100644 index 0000000..d1df7b4 --- /dev/null +++ b/landing/app/pages/login.vue @@ -0,0 +1,90 @@ + + + diff --git a/landing/app/pages/pricing.vue b/landing/app/pages/pricing.vue new file mode 100644 index 0000000..8c2f7f6 --- /dev/null +++ b/landing/app/pages/pricing.vue @@ -0,0 +1,178 @@ + + + diff --git a/landing/app/pages/signup.vue b/landing/app/pages/signup.vue new file mode 100644 index 0000000..16da487 --- /dev/null +++ b/landing/app/pages/signup.vue @@ -0,0 +1,83 @@ + + + diff --git a/landing/app/types/index.d.ts b/landing/app/types/index.d.ts new file mode 100644 index 0000000..cf66873 --- /dev/null +++ b/landing/app/types/index.d.ts @@ -0,0 +1,15 @@ +import type { ParsedContent } from '@nuxt/content' +import type { Avatar, Badge, Link } from '#ui/types' + +export interface BlogPost extends ParsedContent { + title: string + description: string + date: string + image?: HTMLImageElement + badge?: Badge + authors?: ({ + name: string + description?: string + avatar: Avatar + } & Link)[] +} diff --git a/landing/bun.lockb b/landing/bun.lockb new file mode 100755 index 0000000..b39d783 Binary files /dev/null and b/landing/bun.lockb differ diff --git a/landing/content.config.ts b/landing/content.config.ts new file mode 100644 index 0000000..82a829e --- /dev/null +++ b/landing/content.config.ts @@ -0,0 +1,145 @@ +import { defineCollection, z } from '@nuxt/content' + +const variantEnum = z.enum(['solid', 'outline', 'subtle', 'soft', 'ghost', 'link']) +const colorEnum = z.enum(['primary', 'secondary', 'neutral', 'error', 'warning', 'success', 'info']) +const sizeEnum = z.enum(['xs', 'sm', 'md', 'lg', 'xl']) +const orientationEnum = z.enum(['vertical', 'horizontal']) + +const createBaseSchema = () => z.object({ + title: z.string().nonempty(), + description: z.string().nonempty() +}) + +const createFeatureItemSchema = () => createBaseSchema().extend({ + icon: z.string().nonempty().editor({ input: 'icon' }) +}) + +const createLinkSchema = () => z.object({ + label: z.string().nonempty(), + to: z.string().nonempty(), + icon: z.string().optional().editor({ input: 'icon' }), + size: sizeEnum.optional(), + trailing: z.boolean().optional(), + target: z.string().optional(), + color: colorEnum.optional(), + variant: variantEnum.optional() +}) + +const createImageSchema = () => z.object({ + src: z.string().nonempty().editor({ input: 'media' }), + alt: z.string().optional(), + loading: z.enum(['lazy', 'eager']).optional(), + srcset: z.string().optional() +}) + +export const collections = { + index: defineCollection({ + source: '0.index.yml', + type: 'page', + schema: z.object({ + hero: z.object(({ + links: z.array(createLinkSchema()) + })), + sections: z.array( + createBaseSchema().extend({ + id: z.string().nonempty(), + orientation: orientationEnum.optional(), + reverse: z.boolean().optional(), + features: z.array(createFeatureItemSchema()) + }) + ), + features: createBaseSchema().extend({ + items: z.array(createFeatureItemSchema()) + }), + testimonials: createBaseSchema().extend({ + headline: z.string().optional(), + items: z.array( + z.object({ + quote: z.string().nonempty(), + user: z.object({ + name: z.string().nonempty(), + description: z.string().nonempty(), + to: z.string().nonempty(), + target: z.string().nonempty(), + avatar: createImageSchema() + }) + }) + ) + }), + cta: createBaseSchema().extend({ + links: z.array(createLinkSchema()) + }) + }) + }), + docs: defineCollection({ + source: '1.docs/**/*', + type: 'page' + }), + pricing: defineCollection({ + source: '2.pricing.yml', + type: 'page', + schema: z.object({ + plans: z.array( + z.object({ + title: z.string().nonempty(), + description: z.string().nonempty(), + price: z.object({ + month: z.string().nonempty(), + year: z.string().nonempty() + }), + billing_period: z.string().nonempty(), + billing_cycle: z.string().nonempty(), + button: createLinkSchema(), + features: z.array(z.string().nonempty()), + highlight: z.boolean().optional() + }) + ), + logos: z.object({ + title: z.string().nonempty(), + icons: z.array(z.string()) + }), + faq: createBaseSchema().extend({ + items: z.array( + z.object({ + label: z.string().nonempty(), + content: z.string().nonempty() + }) + ) + }) + }) + }), + blog: defineCollection({ + source: '3.blog.yml', + type: 'page' + }), + posts: defineCollection({ + source: '3.blog/**/*', + type: 'page', + schema: z.object({ + image: z.object({ src: z.string().nonempty().editor({ input: 'media' }) }), + authors: z.array( + z.object({ + name: z.string().nonempty(), + to: z.string().nonempty(), + avatar: z.object({ src: z.string().nonempty().editor({ input: 'media' }) }) + }) + ), + date: z.date(), + badge: z.object({ label: z.string().nonempty() }) + }) + }), + changelog: defineCollection({ + source: '4.changelog.yml', + type: 'page' + }), + versions: defineCollection({ + source: '4.changelog/**/*', + type: 'page', + schema: z.object({ + title: z.string().nonempty(), + description: z.string(), + date: z.date(), + image: z.string() + }) + }) +} diff --git a/landing/content/0.index.yml b/landing/content/0.index.yml new file mode 100644 index 0000000..7423cc8 --- /dev/null +++ b/landing/content/0.index.yml @@ -0,0 +1,155 @@ +title: Email Infrastructure for [AI Agents]{class="text-primary"} +description: Create inboxes and receive emails with webhooks. Get pre-decoded JSON responses. Built for developers who want to go fast. +seo: + title: Sendook - Email Infrastructure for AI Agents + description: Simple, powerful email infrastructure for AI agents. Create inboxes via API, receive webhooks, send and reply to emails instantly. Open source and developer-friendly. +navigation: false +hero: + links: + - label: Get Started + icon: i-lucide-arrow-right + trailing: true + to: /docs/getting-started + size: xl + - label: View on GitHub + icon: i-simple-icons-github + size: xl + color: neutral + variant: subtle + to: https://github.com/getrupt/sendook + target: _blank +sections: + - title: Core Features + id: why-sendook + orientation: horizontal + features: + - name: Create Inboxes + description: One API call creates a functional inbox. No DNS setup required. + icon: i-lucide-inbox + - name: Webhooks + description: Get instant notifications when emails arrive. No polling required. + icon: i-lucide-webhook + - name: Pre-decoded JSON + description: Every email arrives formatted as JSON. Attachments included. + icon: i-lucide-file-json + - title: Built for Speed + description: Simple APIs for sending, replying, and searching emails. Focus on building your product. + orientation: horizontal + reverse: true + features: + - name: Send & Reply + description: Send emails and replies with one API call. Threading handled automatically. + icon: i-lucide-send + - name: Search Everything + description: Every email is indexed and searchable. Query by sender, subject, date, or content. + icon: i-lucide-search + - name: Production Ready + description: Built on proven email infrastructure. Spam filtering and deliverability included. + icon: i-lucide-shield-check +features: + title: Complete Email API + description: Everything you need to handle email in your application. Simple APIs, webhook events, and JSON responses. + items: + - title: RESTful APIs + description: Create inboxes, send emails, search messages, and manage domains. Full programmatic control. + icon: i-lucide-code + - title: Webhook Events + description: Get notified for incoming emails, delivery status, bounces, and opens. + icon: i-lucide-bell + - title: Thread Management + description: Automatic email threading and conversation tracking. + icon: i-lucide-messages-square + - title: Attachment Handling + description: Attachments decoded and accessible via API. Images, PDFs, and documents. + icon: i-lucide-paperclip + - title: Full-Text Search + description: Search emails by sender, recipient, subject, body, date range, or metadata. + icon: i-lucide-search-code + - title: Multiple Inboxes + description: Create unlimited inboxes per organization. Complete isolation between inboxes. + icon: i-lucide-mail + - title: Custom Domains + description: Use your own domains. SPF, DKIM, and DMARC configuration handled automatically. + icon: i-lucide-globe + - title: SDKs & Libraries + description: Official SDKs for Node.js, Python, and more. Type-safe and idiomatic. + icon: i-lucide-package + - title: Open Source + description: MIT licensed. Self-host or use our cloud. + icon: i-lucide-git-fork +testimonials: + headline: Trusted by AI Developers + title: Built for Teams Building Intelligent Agents + description: See why developers choose Sendook to power their AI agents' email capabilities. + items: + - quote: We went from zero to functional email in our AI agent in under an hour. No DNS setup, no Gmail OAuth dance, just pure productivity. Game changer for prototyping. + user: + name: Alex Martinez + description: Founder at AgentFlow + avatar: + src: https://i.pravatar.cc/120?img=1 + - quote: The webhook integration is perfect. Our agents respond to emails in real-time without any polling overhead. Clean, simple, and it just works. + user: + name: Sarah Kim + description: Engineering Lead at AutoMate AI + avatar: + src: https://i.pravatar.cc/120?img=5 + - quote: After spending two days fighting with AWS SES, we switched to Sendook and had everything working in 30 minutes. The JSON responses are exactly what we needed. + user: + name: David Chen + description: CTO at InboxGenius + avatar: + src: https://i.pravatar.cc/120?img=3 + - quote: The search API is brilliant. Our agent can recall any email conversation instantly. It's like giving our AI a perfect memory for customer communications. + user: + name: Emily Rodriguez + description: Product Manager at ReplyBot + avatar: + src: https://i.pravatar.cc/120?img=7 + - quote: Being open source was crucial for us. We needed to understand the entire stack, and Sendook's transparent codebase gave us that confidence. + user: + name: Michael Foster + description: Security Engineer at SecureAI + avatar: + src: https://i.pravatar.cc/120?img=8 + - quote: The multi-inbox support is perfect for our use case. Each customer gets their own isolated inbox, and our agent manages them all seamlessly. + user: + name: Jessica Wang + description: VP Engineering at CustomerFirst + avatar: + src: https://i.pravatar.cc/120?img=9 + - quote: We prototyped with the cloud version and moved to self-hosted in production. The flexibility to switch without code changes is incredible. + user: + name: Ryan Thompson + description: DevOps Lead at PrivateAI + avatar: + src: https://i.pravatar.cc/120?img=11 + - quote: The SDK made integration trivial. TypeScript support is excellent, and the API design is intuitive. Our team was productive immediately. + user: + name: Nina Patel + description: Staff Engineer at AgentCore + avatar: + src: https://i.pravatar.cc/120?img=10 + - quote: Finally, email infrastructure that doesn't slow us down. We ship features for our AI agent, not email plumbing. That's the win. + user: + name: Carlos Mendez + description: Founder at FastAgent + avatar: + src: https://i.pravatar.cc/120?img=12 + - quote: The thread management is exactly what we needed. Our agent maintains perfect context across long email conversations with customers. + user: + name: Lisa Johnson + description: AI Product Lead at ConversationAI + avatar: + src: https://i.pravatar.cc/120?img=14 +cta: + title: Ready to give your AI agent email superpowers? + description: Join developers building the next generation of AI agents. Start sending and receiving emails in minutes, not days. + links: + - label: Get Started Free + to: '/signup' + trailingIcon: i-lucide-arrow-right + - label: View Documentation + to: '/docs' + variant: subtle + icon: i-lucide-book-open diff --git a/landing/content/1.docs/1.getting-started/.navigation.yml b/landing/content/1.docs/1.getting-started/.navigation.yml new file mode 100644 index 0000000..6dca48e --- /dev/null +++ b/landing/content/1.docs/1.getting-started/.navigation.yml @@ -0,0 +1,2 @@ +title: Getting Started +icon: false diff --git a/landing/content/1.docs/1.getting-started/1.index.md b/landing/content/1.docs/1.getting-started/1.index.md new file mode 100644 index 0000000..3cfcf43 --- /dev/null +++ b/landing/content/1.docs/1.getting-started/1.index.md @@ -0,0 +1,66 @@ +--- +title: Introduction +description: Welcome to Sendook - Email infrastructure for AI agents. +navigation: + icon: i-lucide-house +--- + +Sendook is an open-source email infrastructure platform designed specifically for AI agents. Stop wrestling with Gmail APIs, AWS SES configuration, and MIME parsing. Start building intelligent email-powered agents in minutes. + +## Why Sendook? + +Traditional email setup for AI agents is painful: +- **Days of configuration**: DNS records, SPF, DKIM, DMARC, domain verification +- **Complex APIs**: Gmail OAuth flows, SES credential management, API rate limits +- **Manual parsing**: MIME decoding, attachment handling, thread management +- **Infrastructure overhead**: Polling for emails, webhook setup, storage management + +Sendook eliminates all of this complexity with a simple, API-first approach. + +## Key Features + +Everything your AI agent needs to communicate via email: + +- **Instant Inbox Creation**: One API call creates a fully functional inbox. No DNS, no domain setup. +- **Real-time Webhooks**: Get notified the moment emails arrive. No polling required. +- **JSON-Ready Emails**: Pre-decoded, formatted emails with parsed attachments. Ready for consumption. +- **Send & Reply**: Simple APIs for sending emails and replying to threads. Threading handled automatically. +- **Full-Text Search**: Query emails by any field. Your agent's perfect memory. +- **Multi-Inbox Support**: Create unlimited inboxes. One per customer, use case, or department. +- **Custom Domains**: Use your own domains with automatic SPF/DKIM/DMARC setup. +- **Open Source**: MIT licensed. Self-host or use our cloud. Complete transparency. + +## Quick Start + +Get started in under 5 minutes: + +```bash +# Install the SDK +npm install @sendook/node-sdk + +# Create an inbox and send your first email +import { Sendook } from '@sendook/node-sdk'; + +const client = new Sendook({ apiKey: process.env.SENDOOK_API_KEY }); + +// Create an inbox +const inbox = await client.inboxes.create({ + name: 'My AI Agent Inbox' +}); + +console.log(`Inbox created: ${inbox.email}`); + +// Send an email +await client.messages.send({ + inboxId: inbox.id, + to: 'customer@example.com', + subject: 'Hello from my AI agent', + body: 'This email was sent via Sendook!' +}); +``` + +## What's Next? + +- [Installation](/docs/getting-started/installation) - Set up Sendook and get your API keys +- [Usage Guide](/docs/getting-started/usage) - Learn the core concepts and workflows +- [API Reference](/docs/essentials/markdown-syntax) - Explore the complete API documentation diff --git a/landing/content/1.docs/1.getting-started/2.installation.md b/landing/content/1.docs/1.getting-started/2.installation.md new file mode 100644 index 0000000..078589a --- /dev/null +++ b/landing/content/1.docs/1.getting-started/2.installation.md @@ -0,0 +1,190 @@ +--- +title: Installation +description: Get Sendook up and running in minutes. +navigation: + icon: i-lucide-download +--- + +## Choose Your Path + +Sendook offers two deployment options: **Cloud** (hosted by us) or **Self-Hosted** (on your infrastructure). + +### Cloud Setup (Recommended for Getting Started) + +The fastest way to get started. No infrastructure to manage. + +#### 1. Sign Up + +Create your free account at [sendook.com/signup](/signup) - no credit card required. + +#### 2. Get Your API Key + +After signing up, navigate to your dashboard and create an API key: + +1. Go to **Settings** โ†’ **API Keys** +2. Click **Create API Key** +3. Copy your key (it won't be shown again!) +4. Store it securely as `SENDOOK_API_KEY` + +#### 3. Install the SDK + +Install the official SDK for your language: + +```bash [Node.js] +npm install @sendook/node-sdk +``` + +```bash [Python] +pip install sendook +``` + +```bash [Go] +go get github.com/sendook/sendook-go +``` + +#### 4. Verify Installation + +Test your setup with a quick verification: + +```javascript [Node.js] +import { Sendook } from '@sendook/node-sdk'; + +const client = new Sendook({ + apiKey: process.env.SENDOOK_API_KEY +}); + +// Verify connection +const organization = await client.organizations.get(); +console.log(`Connected as: ${organization.name}`); +``` + +```python [Python] +from sendook import Sendook + +client = Sendook(api_key=os.environ['SENDOOK_API_KEY']) + +# Verify connection +organization = client.organizations.get() +print(f"Connected as: {organization.name}") +``` + +That's it! You're ready to create inboxes and send emails. + +--- + +### Self-Hosted Setup + +For complete control over your infrastructure. + +#### Prerequisites + +- Docker & Docker Compose +- MongoDB 5.0+ +- Node.js 18+ (for building) +- A domain for receiving emails + +#### 1. Clone the Repository + +```bash +git clone https://github.com/sendook/sendook.git +cd sendook +``` + +#### 2. Configure Environment + +Create a `.env` file with your configuration: + +```bash +# MongoDB Connection +MONGODB_URI=mongodb://localhost:27017/sendook + +# Email Domain +EMAIL_DOMAIN=yourdomain.com + +# API Configuration +API_PORT=3000 +JWT_SECRET=your-secure-random-secret + +# SMTP Settings (for sending) +SMTP_HOST=smtp.yourprovider.com +SMTP_PORT=587 +SMTP_USER=your@email.com +SMTP_PASS=your-password + +# Webhook Configuration +WEBHOOK_SECRET=your-webhook-secret +``` + +#### 3. Start with Docker Compose + +```bash +docker-compose up -d +``` + +This starts: +- Sendook API server +- MongoDB database +- SMTP receiver +- Worker processes for webhooks + +#### 4. Configure DNS Records + +Add these DNS records to receive emails: + +```text +MX @ 10 mail.yourdomain.com +A mail your-server-ip +TXT @ "v=spf1 mx ~all" +``` + +For DKIM, generate keys and add the provided TXT record: + +```bash +docker exec sendook npm run generate-dkim +``` + +#### 5. Create Your First Organization + +```bash +curl -X POST http://localhost:3000/api/v1/auth/signup \ + -H "Content-Type: application/json" \ + -d '{ + "email": "admin@yourdomain.com", + "password": "secure-password", + "organizationName": "My Organization" + }' +``` + +#### 6. Get Your API Key + +Log in to the dashboard at `http://localhost:3000` and create an API key. + +--- + +## Environment Variables Reference + +### Required Variables + +| Variable | Description | Example | +|----------|-------------|---------| +| `MONGODB_URI` | MongoDB connection string | `mongodb://localhost:27017/sendook` | +| `JWT_SECRET` | Secret for JWT tokens | Random 32+ char string | +| `EMAIL_DOMAIN` | Your email domain | `mail.example.com` | + +### Optional Variables + +| Variable | Description | Default | +|----------|-------------|---------| +| `API_PORT` | API server port | `3000` | +| `SMTP_HOST` | SMTP server for sending | Required for sending | +| `WEBHOOK_MAX_RETRIES` | Webhook retry attempts | `3` | +| `EMAIL_RETENTION_DAYS` | Days to keep emails | `30` | +| `MAX_ATTACHMENT_SIZE` | Max attachment size (MB) | `25` | + +--- + +## Next Steps + +- [Usage Guide](/docs/getting-started/usage) - Learn core concepts +- [API Reference](/docs/essentials/markdown-syntax) - Explore the API +- [Webhook Setup](/docs/essentials/code-blocks) - Configure webhooks diff --git a/landing/content/1.docs/1.getting-started/3.usage.md b/landing/content/1.docs/1.getting-started/3.usage.md new file mode 100644 index 0000000..be36077 --- /dev/null +++ b/landing/content/1.docs/1.getting-started/3.usage.md @@ -0,0 +1,346 @@ +--- +title: Usage Guide +description: Master Sendook's core workflows for AI agent email communication. +navigation: + icon: i-lucide-sliders +--- + +This guide covers the essential workflows for integrating Sendook into your AI agent. + +## Core Concepts + +### Organizations + +Every account belongs to an **Organization**. Organizations contain: +- Inboxes +- API Keys +- Team members +- Custom domains +- Billing settings + +### Inboxes + +An **Inbox** is a mailbox your AI agent can send and receive from. Each inbox has: +- A unique email address (e.g., `agent-123@sendook.app`) +- Independent message storage +- Configurable webhooks +- Optional custom domain + +### Messages + +**Messages** are emails sent or received by an inbox. They include: +- Sender and recipients +- Subject and body (HTML and plain text) +- Attachments (decoded and accessible via URL) +- Thread ID for conversation tracking +- Metadata for custom attributes + +--- + +## Common Workflows + +### 1. Create an Inbox + +Every AI agent needs at least one inbox to communicate: + +```javascript +const inbox = await client.inboxes.create({ + name: 'Customer Support Agent', + description: 'Handles all customer support emails', + webhookUrl: 'https://your-app.com/webhooks/email' +}); + +console.log(`Inbox created: ${inbox.email}`); +// Example output: agent-abc123@sendook.app +``` + +::tip +**Pro tip**: Create separate inboxes for different purposes (support, sales, notifications) to keep messages organized. +:: + +### 2. Send an Email + +Send emails from any inbox: + +```javascript +const message = await client.messages.send({ + inboxId: inbox.id, + to: 'customer@example.com', + subject: 'Re: Your Support Request', + body: 'Thanks for reaching out! Here's the solution...', + + // Optional fields + cc: ['team@example.com'], + bcc: ['archive@example.com'], + attachments: [ + { + filename: 'solution.pdf', + content: Buffer.from(pdfData).toString('base64'), + contentType: 'application/pdf' + } + ] +}); +``` + +### 3. Reply to a Thread + +Maintain conversation context with automatic threading: + +```javascript +// When replying, include the original message ID +const reply = await client.messages.send({ + inboxId: inbox.id, + to: message.from, + subject: `Re: ${message.subject}`, + body: 'Here's my follow-up response...', + inReplyTo: message.id, // Links to original message + threadId: message.threadId // Keeps conversation together +}); +``` + +### 4. Receive Emails via Webhooks + +Configure your webhook endpoint to receive emails in real-time: + +```javascript +// Express.js example +app.post('/webhooks/email', async (req, res) => { + const event = req.body; + + // Verify webhook signature + const signature = req.headers['x-sendook-signature']; + if (!client.webhooks.verify(req.body, signature)) { + return res.status(401).send('Invalid signature'); + } + + // Handle the incoming email + if (event.type === 'message.received') { + const message = event.data.message; + + console.log(`New email from: ${message.from}`); + console.log(`Subject: ${message.subject}`); + console.log(`Body: ${message.body.text}`); + + // Process with your AI agent + const aiResponse = await yourAI.generateResponse(message); + + // Send reply + await client.messages.send({ + inboxId: message.inboxId, + to: message.from, + subject: `Re: ${message.subject}`, + body: aiResponse, + inReplyTo: message.id + }); + } + + res.status(200).send('OK'); +}); +``` + +::warning +**Important**: Always verify webhook signatures to ensure requests are from Sendook. +:: + +### 5. Search Messages + +Query your agent's email history: + +```javascript +// Find all emails from a specific sender +const messages = await client.messages.search({ + inboxId: inbox.id, + from: 'customer@example.com', + limit: 50 +}); + +// Search by content +const results = await client.messages.search({ + inboxId: inbox.id, + query: 'invoice payment', + dateRange: { + start: '2024-01-01', + end: '2024-01-31' + } +}); + +// Find all messages in a thread +const thread = await client.threads.get(threadId); +console.log(`Thread has ${thread.messages.length} messages`); +``` + +### 6. Handle Attachments + +Attachments are automatically decoded and accessible: + +```javascript +app.post('/webhooks/email', async (req, res) => { + const { message } = req.body.data; + + if (message.attachments && message.attachments.length > 0) { + for (const attachment of message.attachments) { + console.log(`Attachment: ${attachment.filename}`); + console.log(`Type: ${attachment.contentType}`); + console.log(`Size: ${attachment.size} bytes`); + console.log(`URL: ${attachment.url}`); + + // Download and process + const response = await fetch(attachment.url); + const data = await response.arrayBuffer(); + + // Process with your AI (e.g., OCR, image analysis) + await processAttachment(data, attachment.contentType); + } + } + + res.status(200).send('OK'); +}); +``` + +--- + +## Advanced Features + +### Custom Domains + +Use your own domain for professional emails: + +```javascript +// Add a domain +const domain = await client.domains.create({ + domain: 'mail.yourcompany.com' +}); + +// Get DNS records to configure +console.log('Add these DNS records:'); +console.log(domain.dnsRecords); + +// Verify domain +await client.domains.verify(domain.id); + +// Create inbox with custom domain +const inbox = await client.inboxes.create({ + name: 'Sales Team', + domain: domain.id +}); + +// Now inbox.email will be: sales@mail.yourcompany.com +``` + +### Email Metadata + +Tag emails with custom metadata for tracking: + +```javascript +const message = await client.messages.send({ + inboxId: inbox.id, + to: 'customer@example.com', + subject: 'Your Order Confirmation', + body: 'Thank you for your order!', + metadata: { + orderId: 'ORD-12345', + customerId: 'CUST-789', + campaign: 'summer-sale' + } +}); + +// Search by metadata +const orders = await client.messages.search({ + inboxId: inbox.id, + metadata: { campaign: 'summer-sale' } +}); +``` + +### Webhook Events + +Sendook sends various webhook events: + +| Event Type | Description | +|------------|-------------| +| `message.received` | New email arrived in inbox | +| `message.sent` | Email successfully sent | +| `message.delivered` | Email delivered to recipient | +| `message.bounced` | Email bounced | +| `message.opened` | Recipient opened email (if tracking enabled) | +| `message.clicked` | Recipient clicked link (if tracking enabled) | + +--- + +## Best Practices + +### 1. Idempotent Processing + +Handle duplicate webhook deliveries gracefully: + +```javascript +const processedMessages = new Set(); + +app.post('/webhooks/email', async (req, res) => { + const messageId = req.body.data.message.id; + + // Check if already processed + if (processedMessages.has(messageId)) { + return res.status(200).send('Already processed'); + } + + // Process message + await processMessage(req.body.data.message); + + // Mark as processed + processedMessages.add(messageId); + + res.status(200).send('OK'); +}); +``` + +### 2. Rate Limiting + +Be mindful of API rate limits: + +```javascript +import pLimit from 'p-limit'; + +const limit = pLimit(10); // Max 10 concurrent requests + +const messages = customers.map(customer => + limit(() => client.messages.send({ + inboxId: inbox.id, + to: customer.email, + subject: 'Update from our team', + body: `Hi ${customer.name}...` + })) +); + +await Promise.all(messages); +``` + +### 3. Error Handling + +Always handle API errors gracefully: + +```javascript +try { + await client.messages.send({ + inboxId: inbox.id, + to: 'invalid-email', + subject: 'Test', + body: 'Test' + }); +} catch (error) { + if (error.code === 'INVALID_EMAIL') { + console.error('Email address is invalid'); + } else if (error.code === 'RATE_LIMIT_EXCEEDED') { + console.error('Rate limit exceeded, retry later'); + } else { + console.error('Unexpected error:', error); + } +} +``` + +--- + +## Next Steps + +- [API Reference](/docs/essentials/markdown-syntax) - Complete API documentation +- [Webhooks](/docs/essentials/code-blocks) - Advanced webhook configuration +- [Code Examples](/docs/essentials/prose-components) - More integration examples diff --git a/landing/content/1.docs/2.essentials/.navigation.yml b/landing/content/1.docs/2.essentials/.navigation.yml new file mode 100644 index 0000000..b82ae3f --- /dev/null +++ b/landing/content/1.docs/2.essentials/.navigation.yml @@ -0,0 +1 @@ +title: Essentials diff --git a/landing/content/1.docs/2.essentials/1.markdown-syntax.md b/landing/content/1.docs/2.essentials/1.markdown-syntax.md new file mode 100644 index 0000000..ba31d6a --- /dev/null +++ b/landing/content/1.docs/2.essentials/1.markdown-syntax.md @@ -0,0 +1,230 @@ +--- +title: Markdown Syntax +description: Text, title, and styling in standard markdown. +navigation: + icon: i-lucide-heading-1 +--- + +## Titles + +Use titles to introduce main sections. They structure your documentation and help users navigate content. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +## Titles + +#code +```mdc +## Titles +``` +:: + +### Subtitles + +Use subtitles to divide sections further. They create a more detailed content hierarchy for better readability. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +### Subtitles + +#code +```mdc +### Subtitles +``` +:: + +::tip +Each title and subtitle creates an anchor and shows up automatically in the table of contents. +:: + +## Text Formatting + +Nuxt UI supports most Markdown formatting options. + +| Style | How to use | Result | +| ------ | ------------ | ---------- | +| Bold | `**bold**` | **Bold** | +| Italic | `*italic*` | *Italic* | +| Strike | `~~strike~~` | ~~Strike~~ | + +Combine formatting for richer text styles and visual emphasis. + +| Style | How to use | Result | +| ------------- | ------------------- | ----------------- | +| Bold Italic | `**_bold italic_**` | ***Bold Italic*** | +| Bold Strike | `~~**bold**~~` | ~~**Bold**~~ | +| Italic Strike | `~~*italic*~~` | ~~*Italic*~~ | + +For exponents, indices, or mathematical notations, use HTML `` and `` tags. + +| Style | How to use | Result | +| ----------- | ------------------------ | ----------- | +| Superscript | `superscript` | superscript | +| Subscript | `subscript` | subscript | + +## Links + +Links connect different parts of your documentation and external resources, essential for user navigation and providing references. +To create a link, wrap the link text in brackets `[]()`. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +[Nuxt UI](https://ui.nuxt.com/getting-started/installation) + +#code +```mdc +[Nuxt UI](https://ui.nuxt.com/getting-started/installation) +``` +:: + +### Internal links + +For linking within your documentation, use root-relative paths like `/getting-started/installation`. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +[Installation](/getting-started/installation) + +#code +```mdc +[Installation](/getting-started/installation) +``` +:: + +## Lists + +Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs. + +### Unordered + +Use unordered lists for items without a specific sequence. Start each item with a `-` symbol. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +- I'm a list item. +- I'm another list item. +- I'm the last list item. + +#code +```mdc +- I'm a list item. +- I'm another list item. +- I'm the last list item. +``` +:: + +### Ordered + +Use ordered lists when item order matters, like steps in a process. Start each item with a number. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +1. I'm a list item. +2. I'm another list item. +3. I'm the last list item. + +#code +```mdc +1. I'm a list item. +2. I'm another list item. +3. I'm the last list item. +``` +:: + +### Nested + +Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +- I'm a list item. + - I'm a nested list item. + - I'm another nested list item. +- I'm another list item. + +#code +```mdc +- I'm a list item. + - I'm a nested list item. + - I'm another nested list item. +- I'm another list item. +``` +:: + +## Tables + +Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- +| Prop | Default | Type | +| ------- | --------- | -------- | +| `name` | | `string` | +| `size` | `md` | `string` | +| `color` | `neutral` | `string` | + +#code +```mdc +| Prop | Default | Type | +|---------|-----------|--------------------------| +| `name` | | `string`{lang="ts-type"} | +| `size` | `md` | `string`{lang="ts-type"} | +| `color` | `neutral` | `string`{lang="ts-type"} | +``` +:: + +## Blockquotes + +Highlight important quotations, citations, or emphasized text. Blockquotes visually distinguish quoted content. + +### Singleline + +Single-line blockquotes are best for short, impactful quotes or citations that fit within a single line. To create a single-line blockquote, add a `>` in front of a paragraph. Ideal for short and impactful quotes. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +> Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces. + +#code +```mdc +> Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces. +``` +:: + +### Multiline + +Multi-line blockquotes are suitable for longer quotes or when you need to include multiple paragraphs within a single quotation. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +> Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces. +> +> Create beautiful, responsive, and accessible Vue applications with Nuxt UI. + +#code +```mdc +> Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces. +> +> Create beautiful, responsive, and accessible Vue applications with Nuxt UI. +``` +:: diff --git a/landing/content/1.docs/2.essentials/2.code-blocks.md b/landing/content/1.docs/2.essentials/2.code-blocks.md new file mode 100644 index 0000000..aedb7c7 --- /dev/null +++ b/landing/content/1.docs/2.essentials/2.code-blocks.md @@ -0,0 +1,456 @@ +--- +title: Code Blocks +description: Display inline code and code blocks +navigation: + icon: i-lucide-code-xml +--- + +## Basic + +### Inline Code + +Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +`inline code` + +#code +```mdc +`inline code` +``` +:: + +### Code Blocks + +Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- +```ts +export default defineNuxtConfig({ + modules: ['@nuxt/ui'] +}) +``` + +#code +````mdc +```ts +export default defineNuxtConfig({ + modules: ['@nuxt/ui'] +}) +``` +```` +:: + +When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name. +Filenames help users understand the code's location and purpose within a project. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/ui'] +}) +``` + +#code +````mdc +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/ui'] +}) +``` +```` +:: + +::tip +Some icons are already defined by default, but you can add more in your `app.config.ts` through the `ui.prose.codeIcon` key: + +```ts [app.config.ts] +export default defineAppConfig({ + ui: { + prose: { + codeIcon: { + terminal: 'i-ph-terminal-window-duotone' + } + } + } +}) +``` +:: + +Every code-block has a built-in copy button that will copy the code to your clipboard. + +::tip +You can change the icon in your `app.config.ts` through the `ui.icons.copy` and `ui.icons.copyCheck` keys: + +```ts [app.config.ts] +export default defineAppConfig({ + ui: { + icons: { + copy: 'i-lucide-copy', + copyCheck: 'i-lucide-copy-check' + } + } +}) +``` +:: + +#### Highlight Line + +To highlight lines of code, add `{}` around the line numbers you want to highlight. +Line highlighting is useful for focusing users on important parts of code examples. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- +```ts [nuxt.config.ts]{4-5} +export default defineAppConfig({ + ui: { + icons: { + copy: 'i-lucide-copy', + copyCheck: 'i-lucide-copy-check' + } + } +}) +``` + +#code +````mdc +```ts [nuxt.config.ts]{4-5} +export default defineAppConfig({ + ui: { + icons: { + copy: 'i-lucide-copy', + copyCheck: 'i-lucide-copy-check' + } + } +}) +``` +```` +:: + +## Advanced + +### CodeGroup + +Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- + :::code-group{.w-full} + ```bash [pnpm] + pnpm add @nuxt/ui + ``` + + ```bash [yarn] + yarn add @nuxt/ui + ``` + + ```bash [npm] + npm install @nuxt/ui + ``` + + ```bash [bun] + bun add @nuxt/ui + ``` + ::: + +#code +````mdc +:::code-group + +```bash [pnpm] +pnpm add @nuxt/ui +``` + +```bash [yarn] +yarn add @nuxt/ui +``` + +```bash [npm] +npm install @nuxt/ui +``` + +```bash [bun] +bun add @nuxt/ui +``` + +:: +```` +:: + +::note{to="#pre"} +Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button. +:: + +### CodeTree + +Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships. + +::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} + :::code-tree{default-value="app/app.config.ts"} + ```ts [nuxt.config.ts] + export default defineNuxtConfig({ + modules: ['@nuxt/ui'], + + css: ['~/assets/css/main.css'] + }) + + ``` + + ```css [app/assets/css/main.css] + @import "tailwindcss"; + @import "@nuxt/ui"; + ``` + + ```ts [app/app.config.ts] + export default defineAppConfig({ + ui: { + colors: { + primary: 'sky', + colors: 'slate' + } + } + }) + ``` + + ```vue [app/app.vue] + + ``` + + ```json [package.json] + { + "name": "nuxt-app", + "private": true, + "type": "module", + "scripts": { + "build": "nuxt build", + "dev": "nuxt dev", + "generate": "nuxt generate", + "preview": "nuxt preview", + "postinstall": "nuxt prepare", + "lint": "eslint .", + "lint:fix": "eslint --fix ." + }, + "dependencies": { + "@iconify-json/lucide": "^1.2.63", + "@nuxt/content": "^3.6.3", + "@nuxt/ui": "^4.0.0", + "nuxt": "^4.1.0" + }, + "devDependencies": { + "@nuxt/eslint": "^1.9.0", + "eslint": "^9.34.0", + "typescript": "^5.9.2", + "vue-tsc": "^3.0.6" + } + } + ``` + + ```json [tsconfig.json] + { + "extends": "./.nuxt/tsconfig.json" + } + ``` + + ````md [README.md] + # Nuxt Minimal Starter + + Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. + + ## Setup + + Make sure to install the dependencies: + + ```bash + # npm + npm install + + # pnpm + pnpm install + + # yarn + yarn install + + # bun + bun install + ``` + + ## Development Server + + Start the development server on `http://localhost:3000`: + + ```bash + # npm + npm run dev + + # pnpm + pnpm run dev + + # yarn + yarn dev + + # bun + bun run dev + ``` + + ## Production + + Build the application for production: + + ```bash + # npm + npm run build + + # pnpm + pnpm run build + + # yarn + yarn build + + # bun + bun run build + ``` + + Locally preview production build: + + ```bash + # npm + npm run preview + + # pnpm + pnpm run preview + + # yarn + yarn preview + + # bun + bun run preview + ``` + + Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. + ```` + ::: +:: + +::note +--- +target: _blank +to: https://ui.nuxt.com/getting-started/typography#codetree +--- +Learn more about the `code-tree` component. +:: + +### `CodePreview` + +Use `code-preview` to show code output alongside the code. `code-preview` is ideal for interactive examples and demonstrating code results. +Write the code to be previewed in a the `default` slot and the actual code in the `code` slot. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +label: Preview +--- + :::code-preview + --- + class: "[&>div]:*:my-0" + --- + `inline code` + + #code + ```mdc + `inline code` + ``` + ::: + +#code +````mdc +::code-preview +`inline code` + +#code +```mdc +`inline code` +``` +:: +```` +:: + +### `CodeCollapse` + +Use `code-collapse` for long code blocks to keep pages clean. `code-collapse` allows users to expand code blocks only when needed, improving readability. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- + :::code-collapse{class="[&>div]:my-0"} + ```css [main.css] + @import "tailwindcss"; + @import "@nuxt/ui"; + + @theme { + --font-sans: 'Public Sans', sans-serif; + + --breakpoint-3xl: 1920px; + + --color-green-50: #EFFDF5; + --color-green-100: #D9FBE8; + --color-green-200: #B3F5D1; + --color-green-300: #75EDAE; + --color-green-400: #00DC82; + --color-green-500: #00C16A; + --color-green-600: #00A155; + --color-green-700: #007F45; + --color-green-800: #016538; + --color-green-900: #0A5331; + --color-green-950: #052E16; + } + ``` + ::: + +#code +````mdc +::code-collapse + +```css [main.css] +@import "tailwindcss"; +@import "@nuxt/ui"; + +@theme { + --font-sans: 'Public Sans', sans-serif; + + --breakpoint-3xl: 1920px; + + --color-green-50: #EFFDF5; + --color-green-100: #D9FBE8; + --color-green-200: #B3F5D1; + --color-green-300: #75EDAE; + --color-green-400: #00DC82; + --color-green-500: #00C16A; + --color-green-600: #00A155; + --color-green-700: #007F45; + --color-green-800: #016538; + --color-green-900: #0A5331; + --color-green-950: #052E16; +} +``` + +:: +```` +:: diff --git a/landing/content/1.docs/2.essentials/3.prose-components.md b/landing/content/1.docs/2.essentials/3.prose-components.md new file mode 100644 index 0000000..8de40ba --- /dev/null +++ b/landing/content/1.docs/2.essentials/3.prose-components.md @@ -0,0 +1,481 @@ +--- +title: Prose Components +description: Components to help you structure your content. +navigation: + icon: i-lucide-component +--- + +### Accordion + +Use `accordion` and `accordion-item` to create collapsible content sections. Accordions are useful for organizing FAQs, expandable details, or grouped information in an interactive way. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- + :::accordion + ::::accordion-item + --- + icon: i-lucide-circle-help + label: What are the main considerations when upgrading to Nuxt UI v3? + --- + The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment. + :::: + + ::::accordion-item + --- + icon: i-lucide-circle-help + label: Is Nuxt UI v3 compatible with standalone Vue projects? + --- + Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started. + :::: + ::: + +#code +```mdc +::accordion + +:::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"} +The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment. +::: + +:::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"} +Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started. +::: + +:: +``` +:: + +### Badge + +Use badge to display status indicators or labels. Badges are great for highlighting version numbers, statuses, or categories within your content. + +::code-preview +--- +label: Preview +--- + :::badge + **v3.0.0-alpha.10** + ::: + +#code +```mdc +::badge +**v3.0.0-alpha.10** +:: +``` +:: + +### Callout + +Use callout to emphasize important contextual information. Callouts draw attention to notes, tips, warnings, or cautions, making key information stand out. + +Customize with `icon` and `color` props or use `note`, `tip`, `warning`, `caution` shortcuts for pre-defined semantic styles. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- + :::callout + This is a `callout` with full **markdown** support. + ::: + +#code +```mdc +::callout +This is a `callout` with full **markdown** support. +:: +``` +:: + +::code-preview + :::div{.flex.flex-col.gap-4.w-full} + ::::note{.w-full.my-0} + Here's some additional information for you. + :::: + + ::::tip{.w-full.my-0} + Here's a helpful suggestion. + :::: + + ::::warning{.w-full.my-0} + Be careful with this action as it might have unexpected results. + :::: + + ::::caution{.w-full.my-0} + This action cannot be undone. + :::: + ::: + +#code +```mdc +::note +Here's some additional information. +:: + +::tip +Here's a helpful suggestion. +:: + +::warning +Be careful with this action as it might have unexpected results. +:: + +::caution +This action cannot be undone. +:: +``` +:: + +### Card + +Use `card` to highlight content blocks. Cards are useful for showcasing features, resources, or related information in visually distinct and interactive containers. + +Customize with `title`, `icon`, and `color` props. Cards can also act as links using `` properties for navigation. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- + :::card + --- + icon: i-simple-icons-github + target: _blank + title: Dashboard + to: https://github.com/nuxt-ui-templates/dashboard + --- + A dashboard with multi-column layout. + ::: + +#code +```mdc +::card +--- +title: Dashboard +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-templates/dashboard +target: _blank +--- +A dashboard with multi-column layout. +:: +``` +:: + +### CardGroup + +Use `card-group` to arrange cards in a grid layout. `card-group` is ideal for displaying collections of cards in a structured, visually appealing, and responsive grid. + +::code-preview + :::card-group{.w-full} + ::::card + --- + icon: i-simple-icons-github + target: _blank + title: Dashboard + to: https://github.com/nuxt-ui-templates/dashboard + --- + A dashboard with multi-column layout. + :::: + + ::::card + --- + icon: i-simple-icons-github + target: _blank + title: SaaS + to: https://github.com/nuxt-ui-templates/saas + --- + A template with landing, pricing, docs and blog. + :::: + + ::::card + --- + icon: i-simple-icons-github + target: _blank + title: Docs + to: https://github.com/nuxt-ui-templates/docs + --- + A documentation with `@nuxt/content`. + :::: + + ::::card + --- + icon: i-simple-icons-github + target: _blank + title: Landing + to: https://github.com/nuxt-ui-templates/landing + --- + A landing page you can use as starting point. + :::: + ::: + +#code +```mdc +::card-group + +::card +--- +title: Dashboard +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-templates/dashboard +target: _blank +--- +A dashboard with multi-column layout. +:: + +::card +--- +title: SaaS +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-templates/saas +target: _blank +--- +A template with landing, pricing, docs and blog. +:: + +::card +--- +title: Docs +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-templates/docs +target: _blank +--- +A documentation with `@nuxt/content`. +:: + +::card +--- +title: Landing +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-templates/landing +target: _blank +--- +A landing page you can use as starting point. +:: + +:: +``` +:: + +### Collapsible + +Use `collapsible` to hide and reveal content sections. `collapsible` is ideal for showing optional details, technical specifications, or less frequently needed information. + +::code-preview +--- +class: "[&>div]:*:w-full" +--- + :::collapsible + | Prop | Default | Type | + | ------- | --------- | -------- | + | `name` | | `string` | + | `size` | `md` | `string` | + | `color` | `neutral` | `string` | + ::: + +#code +```mdc +::collapsible + +| Prop | Default | Type | +|---------|-----------|--------------------------| +| `name` | | `string`{lang="ts-type"} | +| `size` | `md` | `string`{lang="ts-type"} | +| `color` | `neutral` | `string`{lang="ts-type"} | + +:: +``` +:: + +### Field + +Use `field` to describe a specific field, property, or parameter. `field` components are perfect for documenting API parameters, component props, or configuration options. + +::code-preview + :::field{.w-full required name="name" type="string"} + The `description` can be set as prop or in the default slot with full **markdown** support. + ::: + +#code +```mdc +::field{name="name" type="string" required} +The `description` can be set as prop or in the default slot with full **markdown** support. +:: +``` +:: + +### FieldGroup + +Use `field-group` to group related fields together in a list. `field-group` helps organize and structure documentation for multiple related fields or properties. + +::code-preview + :::field-group + ::::field{name="analytics" type="boolean"} + Default to `false` - Enables analytics for your project (coming soon). + :::: + + ::::field{name="blob" type="boolean"} + Default to `false` - Enables blob storage to store static assets, such as images, videos and more. + :::: + + ::::field{name="cache" type="boolean"} + Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` + :::: + + ::::field{name="database" type="boolean"} + Default to `false` - Enables SQL database to store your application's data. + :::: + ::: + +#code +```mdc +::field-group + ::field{name="analytics" type="boolean"} + Default to `false` - Enables analytics for your project (coming soon). + :: + + ::field{name="blob" type="boolean"} + Default to `false` - Enables blob storage to store static assets, such as images, videos and more. + :: + + ::field{name="cache" type="boolean"} + Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` + :: + + ::field{name="database" type="boolean"} + Default to `false` - Enables SQL database to store your application's data. + :: +:: +``` +:: + +### Icon + +Use `icon` to insert icons from icon libraries. Icons provide visual cues and enhance the user interface of your documentation. + +::code-preview +:icon{name="i-simple-icons-nuxtdotjs"} + + + +#code +```mdc +:icon{name="i-simple-icons-nuxtdotjs"} +``` +:: + +### Kbd + +Use `kbd` to display keyboard keys or shortcuts. `kbd` components clearly indicate keyboard inputs for instructions or command references. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +:kbd{value="meta"} :kbd{value="K"} + +#code +```mdc +:kbd{value="meta"} :kbd{value="K"} +``` +:: + +### Tabs + +Use `tabs` and `tabs-item` to organize content into tabbed interfaces. Tabs are effective for separating content into logical sections, improving content discoverability and organization. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- + :::tabs{.w-full} + ::::tabs-item{icon="i-lucide-code" label="Code"} + ```mdc + ::callout + Lorem velit voluptate ex reprehenderit ullamco et culpa. + :: + ``` + :::: + + ::::tabs-item{icon="i-lucide-eye" label="Preview"} + :::::callout + Lorem velit voluptate ex reprehenderit ullamco et culpa. + ::::: + :::: + ::: + +#code +````mdc +::tabs + +:::tabs-item{label="Code" icon="i-lucide-code"} + +```mdc +::callout +Lorem velit voluptate ex reprehenderit ullamco et culpa. +:: +``` + +::: + +:::tabs-item{label="Preview" icon="i-lucide-eye"} + +::::callout +Lorem velit voluptate ex reprehenderit ullamco et culpa. +:::: + +::: + +:: +```` +:: + +### Steps + +Use `steps` to create step-by-step guides from document headings. `steps` component automatically numbers headings, creating a numbered guide for processes and tutorials. + +Set the `level` prop to define the heading level to include in the step-by-step guide. + +::code-preview +--- +class: "[&>div]:*:w-full" +--- + :::steps{level="4"} + #### Add the Nuxt UI module in your `nuxt.config.ts` + + ```ts [nuxt.config.ts] + export default defineNuxtConfig({ + modules: ['@nuxt/ui'] + }) + ``` + + #### Import Tailwind CSS and Nuxt UI in your CSS + + ```css [assets/css/main.css] + @import "tailwindcss"; + @import "@nuxt/ui"; + ``` + ::: + +#code +````mdc +::steps{level="4"} + +#### Add the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"} + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/ui'] +}) +``` + +#### Import Tailwind CSS and Nuxt UI in your CSS + +```css [assets/css/main.css] +@import "tailwindcss"; +@import "@nuxt/ui"; +``` + +:: +```` +:: diff --git a/landing/content/1.docs/2.essentials/4.images-embeds.md b/landing/content/1.docs/2.essentials/4.images-embeds.md new file mode 100644 index 0000000..4df024b --- /dev/null +++ b/landing/content/1.docs/2.essentials/4.images-embeds.md @@ -0,0 +1,57 @@ +--- +title: Images and Embeds +description: Add image, video, and other HTML elements +navigation: + icon: i-lucide-image +--- + +## Image + +### Using Markdown + +Display images using standard Markdown syntax. Markdown images are simple to implement for basic image display. + +::code-preview +![Nuxt Social Image](https://nuxt.com/new-social.jpg) + +#code +```mdc +![Nuxt Social Image](https://nuxt.com/new-social.jpg) +``` +:: + +::note +If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed, the `` component will be used instead of the native `img` tag. +:: + +### Using Embeds + +Use embeds for more image customization. Embeds offer greater control over image attributes like size and styling. + +::code-preview +![Nuxt Social Image](https://nuxt.com/new-social.jpg){height="150"} + + + +#code +```mdc +:img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"} +``` +:: + +## Embeds and HTML elements + +Embeds allow adding various HTML elements like videos and iframes. This feature extends documentation capabilities to include interactive and multimedia content. + +::code-preview +--- +class: "[&>div]:*:w-full" +--- +:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"} + + +#code +```mdc +:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"} +``` +:: diff --git a/landing/content/2.pricing.yml b/landing/content/2.pricing.yml new file mode 100644 index 0000000..a887187 --- /dev/null +++ b/landing/content/2.pricing.yml @@ -0,0 +1,80 @@ +title: Simple, Transparent Pricing +description: Pay only for what you use. No hidden fees, no surprises, no complicated tiers. +seo: + title: Pricing - Sendook + description: Simple, transparent pricing for AI agent email infrastructure. First 1,000 emails free every month. +navigation.icon: i-lucide-credit-card +headline: Pricing that scales with you +pricing: + tagline: Email infrastructure that grows with your needs + description: | + Start building immediately with our generous free tier. As your AI agents scale, + our pricing scales linearlyโ€”no sudden jumps, no enterprise sales calls, just transparent + per-email pricing. + benefits: + - title: No Surprises + description: Predictable pricing that scales linearly with your usage. No hidden fees or unexpected charges. + icon: i-lucide-shield-check + - title: Start Free + description: 1,000 free emails every month. Perfect for development, testing, and small projects. + icon: i-lucide-zap + - title: Open Source + description: Fully open source under MIT license. Self-host for complete control and zero cost. + icon: i-lucide-code +plan: + title: Pay As You Grow + description: One simple plan. Unlimited everything except emails. + price: + base: $0 + perEmail: $0.0015 + features: + - Unlimited inboxes + - Unlimited domains + - 1,000 free emails/month + - $0.0015 per additional email + - Full webhook support + - Complete API access + - Community support + button: + label: Get Started Free + to: /signup +calculator: + title: Calculate Your Monthly Cost + description: See how affordable email infrastructure can be + examples: + - emails: 1000 + cost: $0 + description: Perfect for development + - emails: 10000 + cost: $13.50 + description: Growing production apps + - emails: 100000 + cost: $148.50 + description: High-volume AI agents + - emails: 1000000 + cost: $1498.50 + description: Enterprise scale +faq: + title: Frequently Asked Questions + description: Everything you need to know about Sendook's email infrastructure for AI agents. + items: + - label: Can I self-host Sendook? + content: Yes! Sendook is fully open source under the MIT license. You can self-host the entire platform on your own infrastructure. We provide Docker containers and deployment guides to make self-hosting straightforward. + - label: How do webhooks work? + content: When an email arrives at any of your inboxes, we immediately POST a JSON payload to your configured webhook URL. The payload includes the decoded email content, sender, subject, attachments, and metadata. No polling required - you get instant notifications. + - label: What happens if I exceed my plan limits? + content: We'll notify you as you approach your limits. You can upgrade your plan anytime. We won't stop your service - instead, we'll work with you to find the right plan. For occasional overages, we charge a small per-email fee rather than cutting you off. + - label: How long are emails stored? + content: The Free plan stores emails for 30 days, Pro for 1 year, and Enterprise has unlimited retention. You can also export emails anytime via API or configure automatic archival to your own storage. + - label: Can I use my own domain? + content: Yes! On Pro and Enterprise plans, you can use custom domains for sending emails. We handle all the DNS configuration (SPF, DKIM, DMARC) automatically. Your emails will come from your domain, not ours. + - label: Is there a free trial? + content: The Free plan is available immediately with no credit card required. Pro plans include a 14-day free trial so you can test all features before committing. Enterprise plans include a custom proof-of-concept period. + - label: What kind of support do you offer? + content: Free plans get community support via Discord and GitHub. Pro plans include email support with 24-hour response time. Enterprise plans get dedicated support with SLA guarantees, Slack integration, and direct engineering access. + - label: How secure is my email data? + content: All emails are encrypted at rest and in transit. We use industry-standard encryption (AES-256). Webhook payloads are signed for verification. For maximum security, self-host on your own infrastructure. We never train AI models on your data. + - label: Can multiple team members access the same organization? + content: Yes! Pro and Enterprise plans include team collaboration features. You can invite team members, assign role-based permissions, and manage inboxes collaboratively. Each member gets their own API keys with granular access control. + - label: What's your uptime guarantee? + content: Our cloud service targets 99.9% uptime. Enterprise plans include SLA guarantees with financial credits for downtime. All services have comprehensive monitoring, automatic failover, and redundant infrastructure across multiple availability zones. diff --git a/landing/content/3.blog.yml b/landing/content/3.blog.yml new file mode 100644 index 0000000..c37adae --- /dev/null +++ b/landing/content/3.blog.yml @@ -0,0 +1,3 @@ +title: Blog +description: Insights on building AI agents, email infrastructure best practices, integration tutorials, and the latest updates from the Sendook team. +navigation.icon: i-lucide-newspaper diff --git a/landing/content/3.blog/1.asian-cuisine.md b/landing/content/3.blog/1.asian-cuisine.md new file mode 100644 index 0000000..559cdef --- /dev/null +++ b/landing/content/3.blog/1.asian-cuisine.md @@ -0,0 +1,252 @@ +--- +title: Exploring the Culinary Wonders of Asia +description: "Embark on a tantalizing expedition through the diverse and + enchanting flavors of Asia " +image: + src: https://picsum.photos/id/490/640/360 +authors: + - name: Alexia wong + to: https://twitter.com/benjamincanac + avatar: + src: https://i.pravatar.cc/128?u=0 +date: 2023-08-25 +badge: + label: Cooking +--- + +## Introduction to the Enchanting World of Asian Cuisine + +Dive into the rich tapestry of Asian cuisine, a journey through centuries-old traditions and a symphony of flavors that tantalize the taste buds. From the bustling street markets of Bangkok to the serene tea houses of Kyoto, each corner of Asia offers a culinary adventure waiting to be explored. In this chapter, we embark on a quest to understand what makes Asian cuisine truly extraordinary. + +Asia's culinary landscape is as diverse as its cultures. Chinese, Japanese, Thai, Indian, Vietnamese, Malaysian โ€“ each region boasts its own unique culinary identity. The use of fresh, locally sourced ingredients, a delicate balance of spices, and a reverence for tradition are the common threads that bind these diverse cuisines. + +::pictures + :::div + ![grappes](https://picsum.photos/id/75/400/400){.rounded-lg height="400" width="400"} + ::: + + :::div + ![sakura](https://picsum.photos/id/82/400/400){.rounded-lg height="400" width="400"} + ::: + + :::div + ![raspberry](https://picsum.photos/id/102/400/400){.rounded-lg height="400" width="400"} + ::: +:: + +## Unraveling the Secrets of Asian Flavors and Techniques + +The heart of Asian cuisine lies in its distinct flavors and time-honored cooking techniques. Take a journey through the spice-laden streets of Sichuan in China, where the fiery heat of the wok creates mouthwatering masterpieces. Learn the art of sushi making in Japan, where precision and presentation are paramount. Delve into the aromatic world of Thai curries, where the interplay of sweet, sour, salty, and spicy creates a dance of flavors on the palate. + +Asian kitchens are a treasure trove of ingredients, each with its own story. Soy sauce, miso, coconut milk, lemongrass, and an array of exotic spices elevate dishes to new heights. Discover the magic of umami, the elusive fifth taste that defines many Asian dishes, leaving a lingering and savory sensation. + +::pictures + :::div + ![wheat](https://picsum.photos/id/107/400/400){.rounded-lg height="400" width="400"} + ::: + + :::div + ![tea](https://picsum.photos/id/225/400/400){.rounded-lg height="400" width="400"} + ::: + + :::div + ![nenuphar](https://picsum.photos/id/306/400/400){.rounded-lg height="400" width="400"} + ::: + + :::div + ![flowers](https://picsum.photos/id/488/400/400){.rounded-lg height="400" width="400"} + ::: + + :::div + ![yuzu](https://picsum.photos/id/326/400/400){.rounded-lg height="400" width="400"} + ::: + + :::div + ![strawberry](https://picsum.photos/id/493/400/400){.rounded-lg height="400" width="400"} + ::: +:: + +## Some Cooking Recipe + +### Salmon Avocado Sushi Rolls (Japan ๐Ÿ‡ฏ๐Ÿ‡ต) + +![fish](https://picsum.photos/id/615/1200/400){.rounded-lg height="400" width="1200"} + +::tabs + :::div{icon="i-lucide-flame" label="Ingredients"} + - 2 cups sushi rice, cooked and seasoned with + :br + rice vinegar, sugar, and salt + - 10 sheets nori (seaweed) + - 1/2 lb fresh sushi-grade salmon, thinly sliced + - 1 ripe avocado, sliced + - 1 cucumber, julienned + - Soy sauce, pickled ginger, and wasabi for serving + ::: + + :::div{icon="i-lucide-list" label="Instructions"} + - **Prepare Sushi Rice:** + Cook sushi rice according to package instructions. Once cooked, season with a mixture of rice vinegar, sugar, and salt. Allow it to cool. + - **Prepare Ingredients:** + Slice the salmon into thin strips. + Slice the avocado and julienne the cucumber. + - **Assemble Sushi Roll:** + Place a sheet of nori on the bamboo sushi rolling mat, shiny side down. + Wet your hands to prevent sticking and spread a thin layer of sushi rice on the nori, leaving a small border at the top. + Add Filling: + Arrange slices of salmon, avocado, and julienned cucumber in the center of the rice. + - **Roll the Sushi:** + Using the bamboo mat, start rolling the sushi away from you, applying gentle pressure to create a tight roll. + Moisten the top border of the nori with a little water to seal the roll. + - **Slice the Roll:** + With a sharp, wet knife, slice the roll into bite-sized pieces. + - **Serve:** + Arrange the sushi rolls on a plate. + Serve with soy sauce, pickled ginger, and wasabi on the side. + - **Enjoy:** + Pick up a slice of sushi with chopsticks, dip it in soy sauce, and savor the delicious combination of fresh salmon, creamy avocado, and crunchy cucumber. + ::: +:: + +### Nems/Cha Gio (Vietnam ๐Ÿ‡ป๐Ÿ‡ณ) + +![kitchen boat](https://picsum.photos/id/686/1200/400){.rounded-lg height="400" width="1200"} + +::tabs + :::div + --- + class: flex space-between w-full items-center + icon: i-lucide-flame + label: Ingredients + --- + - 1/2 lb (about 225g) ground pork + - 1 cup finely shredded carrots + - 1 cup bean sprouts + - 1 cup finely chopped wood ear mushrooms (soaked and softened if dried) + - 1 cup thin rice vermicelli noodles (cooked according to package instructions) + - 2 cloves garlic, minced + - 1 shallot, minced + - 1 tablespoon fish sauce + - 1 teaspoon sugar + - 1/2 teaspoon black pepper + - 2 tablespoons vegetable oil for stir-frying + ::: + + :::div{icon="i-lucide-list" label="Instructions"} + - **Prepare the Filling:** + In a pan, heat 2 tablespoons of vegetable oil. Add minced garlic and shallots, stir-frying until fragrant. + Add ground pork and cook until browned. Add fish sauce, sugar, and black pepper. + Add shredded carrots, bean sprouts, wood ear mushrooms, and cooked rice vermicelli. Stir-fry until vegetables are slightly softened. Remove from heat and let it cool. + - **Soak Rice Paper:** + Dip one rice paper sheet into warm water for a few seconds until it becomes pliable. Place it on a clean, damp cloth. + - **Roll the Spring Rolls:** + Place a generous spoonful of the filling on the lower third of the rice paper. + Fold the sides of the rice paper over the filling and then roll it up tightly from the bottom to the top. + - **Seal and Repeat:** + Seal the edges by moistening with water. Repeat until all the filling is used. + - **Deep Fry:** + Heat vegetable oil in a deep fryer or a deep pan to 350ยฐF (180ยฐC). + Fry the spring rolls until golden brown and crispy. Drain on paper towels. + - **Prepare Dipping Sauce:** + Mix fish sauce, water, sugar, lime juice, minced garlic, and chopped chili (if using). Stir until sugar is dissolved. + - **Serve:** + Serve the Vietnamese Spring Rolls with the dipping sauce and garnish with shredded carrots. + - **Enjoy:** + Enjoy these crispy and flavorful Vietnamese Spring Rolls as an appetizer or a snack. + ::: +:: + +### Bibimbap (South Korean ๐Ÿ‡ฐ๐Ÿ‡ท) + +![bibimbap](https://picsum.photos/id/292/1200/400){.rounded-lg height="400" width="1200"} + +::tabs + :::div + --- + class: flex space-between w-full items-center + icon: i-lucide-flame + label: Ingredients + --- + - 2 cups cooked short-grain rice + - 1 cup assorted vegetables (such as carrots, spinach, mushrooms, zucchini, bean sprouts) + - 1 cup protein (such as thinly sliced beef, chicken, or tofu) + - 2 tablespoons vegetable oil + - 2 cloves garlic, minced + - Salt, to taste + - Soy sauce, to taste + - Sesame oil, to taste + - Gochujang (Korean red chili paste), to taste + - Toasted sesame seeds, for garnish + - Fried eggs (optional), for topping + ::: + + :::div{icon="i-lucide-list" label="Instructions"} + - **Cook the Rice:** + Prepare 2 cups of short-grain rice according to package instructions. + Set aside once cooked. + - **Prepare the Vegetables:** + Slice assorted vegetables thinly (carrots, spinach, mushrooms, zucchini, bean sprouts). + Blanch or stir-fry the vegetables separately or together, seasoning with salt and soy sauce to taste. + Set aside. + - **Cook the Protein (Optional):** + Thinly slice your choice of protein (beef, chicken, or tofu) against the grain. + Heat 1 tablespoon of vegetable oil in a skillet over medium-high heat. + Add minced garlic and cook until fragrant (about 30 seconds). + Add the sliced meat and cook until browned and cooked through. + Season with salt and soy sauce to taste. + Set aside. + - **Assemble the Bibimbap:** + Divide the cooked rice among serving bowls. + Arrange the cooked vegetables and protein on top of the rice in separate sections. + - **Add Flavorings:** + Drizzle each bowl with sesame oil and gochujang, adjusting the amount to taste. + - **Garnish and Serve:** + Sprinkle toasted sesame seeds over the top of each bowl. + Optionally, top each bowl with a fried egg. + - **Enjoy:** + Serve the Bibimbap immediately. + Mix everything together just before eating for the best flavor experience. + ::: +:: + +### Cheese Naan (India ๐Ÿ‡ฎ๐Ÿ‡ณ) + +![Naan](https://picsum.photos/id/999/1200/400){.rounded-lg height="400" width="1200"} + +::tabs + :::div{icon="i-lucide-flame" label="Ingredients"} + - 2 1/4 teaspoons (1 packet) active dry yeast + - 1 teaspoon sugar + - 3/4 cup warm water (about 110ยฐF or 43ยฐC) + - 2 cups all-purpose flour, plus extra for rolling + - 1 teaspoon salt + - 1/4 teaspoon baking soda + - 1/4 cup plain yogurt + - 1 tablespoon olive oil or melted ghee + ::: + + :::div{icon="i-lucide-list" label="Instructions"} + - **Activate the Yeast:** + In a small bowl, combine the active dry yeast, sugar, and warm water. Let it sit for about 5-10 minutes until it becomes frothy. + - **Prepare the Dough:** + In a large mixing bowl, combine the flour, salt, and baking soda. + Make a well in the center and add the activated yeast mixture, yogurt, and olive oil. + Mix the ingredients until a dough forms. + - **Knead the Dough:** + Transfer the dough to a floured surface and knead for about 5-7 minutes until it becomes smooth and elastic. + - **Let it Rise:** + Place the dough in a lightly oiled bowl, cover it with a damp cloth, and let it rise in a warm place for 1-2 hours or until it has doubled in size. + - **Preheat the Oven:** + Preheat your oven to the highest setting, usually around 500ยฐF (260ยฐC). If you have a pizza stone, place it in the oven to heat. + - **Divide and Shape:** + Divide the dough into equal portions and shape each portion into a ball. + Roll out each ball into an oval or round shape, about 1/4 inch thick. + - **Bake:** + If using a pizza stone, transfer the rolled-out naan directly onto the stone in the preheated oven. Alternatively, place the rolled-out naan on a baking sheet. + Bake for 5-7 minutes or until the naan puffs up and the edges turn golden brown. + - **Optional Toppings:** + Brush the hot naan with melted ghee or butter and sprinkle with chopped fresh cilantro if desired. + - **Serve:** + Serve the naan warm, either as a side to your favorite curry or as a delicious flatbread. + ::: +:: diff --git a/landing/content/3.blog/2.pyrenees.md b/landing/content/3.blog/2.pyrenees.md new file mode 100644 index 0000000..2b23f3a --- /dev/null +++ b/landing/content/3.blog/2.pyrenees.md @@ -0,0 +1,111 @@ +--- +title: Discovering the Majestic Peaks +description: Embark on an unforgettable odyssey through the Pyrenees, where + majestic peaks, pristine valleys, and rich cultural tapestries await in this + immersive exploration. +image: + src: https://picsum.photos/id/29/640/360 +authors: + - name: Nicolas Maillet + to: https://twitter.com/benjamincanac + avatar: + src: https://i.pravatar.cc/128?u=1 +date: 2022-07-08 +badge: + label: Nature +--- + +## Introduction to the Pyrenean Wonderland + +Embark on a breathtaking exploration of the Pyrenees, a mountain range that weaves its way between Spain and France, standing as a majestic guardian of natural beauty. This chapter introduces you to the rugged charm and ecological diversity that make the Pyrenees a haven for adventure seekers and nature enthusiasts alike. + +The Pyrenees are not merely a geographical boundary; they are a realm of awe-inspiring landscapes, ranging from lush green valleys to snow-capped peaks. The pristine wilderness is home to a diverse array of flora and fauna, creating a captivating tapestry of life that unfolds as you ascend. + +![mountains](https://picsum.photos/id/11/1000/600){.rounded-lg height="600" width="1000"} + +## Peaks and Valleys - Nature's Masterpiece + +Delve into the heart of the Pyrenees, where towering peaks touch the sky, and deep valleys cradle crystal-clear lakes and meandering rivers. From the iconic Pic du Midi to the serene Cirque de Gavarnie, each summit tells a story of geological wonder and natural splendor. + +Explore the verdant meadows adorned with wildflowers, witness the dance of marmots in rocky outcrops, and breathe in the crisp mountain air. The Pyrenees offer a sanctuary for biodiversity, where rare species find refuge in the untouched wilderness. + +::pictures + :::div + ![rocks](https://picsum.photos/id/15/400/400){.rounded-lg height="400" width="400"} + ::: + + :::div + ![valley](https://picsum.photos/id/28/400/400){.rounded-lg height="400" width="400"} + ::: + + :::div + ![mountains](https://picsum.photos/id/29/400/400){.rounded-lg height="400" width="400"} + ::: +:: + +## A Tapestry of Culture and History + +Beyond its natural wonders, the Pyrenees boast a rich tapestry of human history and cultural heritage. Ancient pilgrimage routes like the Camino de Santiago wind their way through picturesque villages, medieval castles cling to mountain slopes, and traditional mountain festivals celebrate the spirit of the local communities. + +Discover the legends that echo through the valleys, from tales of shepherds and their flocks to the myths that shroud hidden caves. The Pyrenees bear witness to centuries of human existence, leaving behind a cultural legacy that adds depth to the mountainous landscape. + +::pictures{orientation="vertical"} + :::div + ![valley](https://picsum.photos/id/118/1200/400){.rounded-lg.w-full height="400" width="1200"} + ::: + + :::pictures + ::::div + ![valley](https://picsum.photos/id/121/600/400){.rounded-lg height="400" width="600"} + :::: + + ::::div + ![traveler](https://picsum.photos/id/177/600/400){.rounded-lg height="400" width="600"} + :::: + + ::::div + :::: + ::: +:: + +## Outdoor Adventures in the Pyrenean Playground + +For the adventure-seekers, the Pyrenees offer an exhilarating playground. Whether it's scaling peaks, hiking through ancient trails, or skiing down powdery slopes, there's no shortage of adrenaline-pumping activities. Traverse the GR10, a long-distance hiking trail that spans the entire length of the Pyrenees, or test your mettle on the challenging rock faces that beckon climbers from around the world. + +The Pyrenees cater to all levels of outdoor enthusiasts, making it a haven for both seasoned mountaineers and casual hikers. The variety of landscapes ensures that every outdoor pursuit comes with a stunning backdrop of nature's grandeur. + +::pictures + :::div + ![wood](https://picsum.photos/id/190/200/200){.rounded-lg height="200" width="200"} + ::: + + :::div + ![cow](https://picsum.photos/id/200/200/200){.rounded-lg height="200" width="200"} + ::: + + :::div + ![meadow](https://picsum.photos/id/206/200/200){.rounded-lg height="200" width="200"} + ::: + + :::div + ![birds](https://picsum.photos/id/258/200/200){.rounded-lg height="200" width="200"} + ::: +:: + +::pictures + :::div + ![road](https://picsum.photos/id/278/600/300){.rounded-lg.w-full height="300" width="600"} + ::: + + :::div + ![hole in a rock](https://picsum.photos/id/343/600/300){.rounded-lg.w-full height="300" width="600"} + ::: +:: + +## Preserving the Pyrenean Legacy + +As we look to the future, conservation efforts and sustainable tourism initiatives are vital for preserving the Pyrenees' unique ecosystem. Balancing the thrill of exploration with the responsibility of preservation ensures that future generations can continue to be captivated by the untamed beauty of these ancient mountains. + +In conclusion, 'Discovering the Majestic Peaks: A Journey Through the Pyrenees' invites you to witness the grandeur of a mountain range that transcends geographical boundaries, offering a symphony of nature, culture, and adventure in every chapter. + +![mountains](https://picsum.photos/id/368/600/300){.rounded-lg.w-full height="300" width="600"} diff --git a/landing/content/3.blog/3.james-webb.md b/landing/content/3.blog/3.james-webb.md new file mode 100644 index 0000000..246ec22 --- /dev/null +++ b/landing/content/3.blog/3.james-webb.md @@ -0,0 +1,83 @@ +--- +title: Unveiling the Marvel +description: The Journey to Create the James Webb Space Telescope +image: + src: https://picsum.photos/id/903/640/360 +authors: + - name: Josh Bayers + to: https://twitter.com/benjamincanac + avatar: + src: https://i.pravatar.cc/128?u=2 +date: 2020-12-12 +badge: + label: Science, Astronomie, History +--- + +## Building the Vision + +::picture-and-text +### Designing the Future + +In the bustling halls of NASA's engineering facilities, a team of brilliant minds gathered around blueprints and prototypes. They envisioned a telescope unlike any other, one that would revolutionize our understanding of the cosmos. Led by Dr. Catherine Nguyen, they meticulously crafted the design for what would become the James Webb Space Telescope (JWST). With its massive primary mirror and cutting-edge infrared technology, the JWST promised to unveil the deepest mysteries of the universe. + +#image +![sky](https://picsum.photos/id/120/400/400){.rounded-lg height="400" width="400"} +:: + +::picture-and-text +--- +reverse: true +--- +### Overcoming Challenges + +However, the path to launch was fraught with challenges. Engineers faced immense pressure to ensure the JWST's success, navigating technical hurdles and budget constraints. Delays mounted as unforeseen complications arose, testing the team's resolve. Yet, fueled by their passion for exploration, they pressed onward, refining each component with unwavering determination. Through perseverance and ingenuity, they transformed the JWST from a concept into a marvel of modern engineering. + +#image +![mountain](https://picsum.photos/id/235/400/400){.rounded-lg height="400" width="400"} +:: + +## Embarking into the Unknown + +::picture-and-text +### Launching into Space + +On a crisp morning at the Guiana Space Centre in French Guiana, anticipation hung in the air as the JWST stood tall atop its Ariane 5 rocket. Millions around the world held their breath as countdown reached its final moments. Then, with a thunderous roar, the rocket ignited, propelling the telescope into the vast expanse of space. As it soared higher and higher, the JWST represented humanity's boundless curiosity and relentless pursuit of knowledge. + +#image +![rocket](https://picsum.photos/id/137/400/400){.rounded-lg height="400" width="400"} +:: + +::picture-and-text +--- +reverse: true +--- +### Unfolding the Universe + +Months later, nestled in its orbit around the Earth, the JWST embarked on its monumental mission. With its golden mirrors unfurled like petals, it peered into the depths of the cosmos, capturing breathtaking images of distant galaxies and nebulae. Each observation unveiled new wonders, shedding light on the origins of stars, planets, and life itself. From the icy realms of the outer solar system to the fiery cores of distant exoplanets, the JWST's gaze transcended the limits of human imagination. + +#image +![universe](https://picsum.photos/id/974/400/400){.rounded-lg height="400" width="400"} +:: + +## Legacy of Discovery + +::picture-and-text +### Inspiring Future Generations + +As the years passed, the JWST's legacy continued to grow, inspiring generations to dream of the stars. Its groundbreaking discoveries sparked scientific revolutions and expanded humanity's collective understanding of the universe. From classrooms to observatories, its images adorned the walls, igniting the spark of curiosity in the minds of countless individuals. The JWST served as a beacon of hope, reminding us of our capacity to explore, discover, and unite in pursuit of a shared destiny among the stars. + +#image +![woman](https://picsum.photos/id/550/400/400){.rounded-lg height="400" width="400"} +:: + +::picture-and-text +--- +reverse: true +--- +### A Journey Without End + +Though the JWST's mission eventually came to a close, its impact endured far beyond the boundaries of space and time. Its data continued to fuel scientific inquiry for decades to come, unlocking new realms of knowledge and shaping the course of human history. And as future telescopes followed in its wake, each building upon its pioneering legacy, the spirit of exploration embodied by the James Webb Space Telescope lived on, guiding humanity toward ever greater heights of discovery and understanding. + +#image +![sunset](https://picsum.photos/id/967/400/400){.rounded-lg height="400" width="400"} +:: diff --git a/landing/content/3.blog/4.meditation.md b/landing/content/3.blog/4.meditation.md new file mode 100644 index 0000000..384b0a8 --- /dev/null +++ b/landing/content/3.blog/4.meditation.md @@ -0,0 +1,60 @@ +--- +title: The Benefits of Meditation +description: The Benefits of Meditation and Mindfulness Practices on Mental Health +image: + src: https://picsum.photos/id/691/640/360 +authors: + - name: Rebecca Millers + to: https://twitter.com/benjamincanac + avatar: + src: https://i.pravatar.cc/128?u=3 +date: 2021-04-23 +badge: + label: Health +--- + +![grass in wood](https://picsum.photos/id/55/1200/600){.rounded-lg height="600" width="1200"} + +## ๐Ÿง˜๐Ÿป Introduction + +In today's fast-paced world, where stress and anxiety seem to be constant companions, the importance of mental well-being cannot be overstated. Fortunately, there are ancient practices like meditation and mindfulness that offer profound benefits for our mental health. Research continues to uncover the transformative effects of these practices, showing how they can help alleviate stress, improve focus, and cultivate a sense of inner peace and resilience. + +## ๐Ÿชท Understanding Meditation and Mindfulness + +Meditation is a practice that involves training the mind to focus and redirect thoughts. It often involves techniques such as deep breathing, visualization, or repeating a mantra. Mindfulness, on the other hand, is about being fully present in the moment, acknowledging and accepting one's thoughts, feelings, and bodily sensations without judgment. + +One of the most well-documented benefits of meditation and mindfulness is their ability to reduce stress and anxiety. Studies have shown that regular meditation practice can lower levels of cortisol, the stress hormone, in the body. By quieting the mind and promoting relaxation, meditation helps to interrupt the cycle of anxious thoughts and bodily tension, leading to a greater sense of calm and tranquility. + +::pictures + :::div + ![flowers](https://picsum.photos/id/106/600/200){.rounded-lg height="200" width="600"} + ::: + + :::div + ![sakura](https://picsum.photos/id/82/600/200){.rounded-lg height="200" width="600"} + ::: +:: + +## ๐Ÿง  Improved Focus and Cognitive Function + +In today's digital age, our attention is constantly pulled in multiple directions, leading to reduced focus and cognitive overload. Meditation and mindfulness have been found to enhance cognitive function by increasing attention span, concentration, and memory. By training the mind to stay present and focused, these practices can improve productivity and mental clarity, enabling individuals to perform better in various tasks and activities. + +## ๐Ÿ˜Œ Enhanced Emotional Well-being + +Another significant benefit of meditation and mindfulness is their positive impact on emotional well-being. By fostering self-awareness and acceptance, these practices help individuals develop a healthier relationship with their emotions. Studies have shown that regular meditation can reduce symptoms of depression and anxiety disorders, while also increasing feelings of happiness and overall life satisfaction. + +## ๐Ÿ’ช๐Ÿป Building Resilience and Coping Skills + +![water](https://picsum.photos/id/126/1200/300){.rounded-lg height="300" width="1200"} + +Life is filled with ups and downs, challenges, and setbacks. Meditation and mindfulness provide valuable tools for building resilience and coping with adversity. By cultivating a sense of inner strength and equanimity, these practices help individuals navigate difficult situations with greater ease and grace. They teach us to respond to stressors with mindfulness and compassion, rather than reacting impulsively out of fear or frustration. + +## โค๏ธ Cultivating a Sense of Connection and Compassion + +Beyond benefiting individual mental health, meditation and mindfulness also promote a greater sense of connection and compassion towards others. By cultivating empathy and understanding, these practices foster harmonious relationships and a sense of interconnectedness with the world around us. They remind us that we are all part of a larger tapestry of humanity, bound together by our shared experiences and aspirations. + +## ๐Ÿซถ๐Ÿป Conclusion + +In conclusion, the benefits of meditation and mindfulness on mental health are undeniable. From reducing stress and anxiety to improving focus, emotional well-being, and resilience, these ancient practices offer a holistic approach to mental wellness in an increasingly hectic world. By incorporating meditation and mindfulness into our daily lives, we can nurture a sense of inner peace, balance, and contentment that radiates outward, enriching not only our own lives but the lives of those around us as well. + +![nenuphar](https://picsum.photos/id/306/1200/600){.rounded-lg height="600" width="1200"} diff --git a/landing/content/3.blog/5.animals.md b/landing/content/3.blog/5.animals.md new file mode 100644 index 0000000..faa1e09 --- /dev/null +++ b/landing/content/3.blog/5.animals.md @@ -0,0 +1,138 @@ +--- +title: The 10 Most Dangerous Creatures on Earth +description: From Predators to the Ultimate Threat +image: + src: https://picsum.photos/id/219/640/360 +authors: + - name: Emilio Manuel + to: https://twitter.com/benjamincanac + avatar: + src: https://i.pravatar.cc/128?u=4 +date: 2018-05-15 +badge: + label: Animals +--- + +The natural world is teeming with creatures of all shapes and sizes, each with its own unique set of adaptations and behaviors. While many animals pose little threat to humans, there are some that command respect and caution due to their deadly capabilities. From apex predators to venomous insects, let's explore the 10 most dangerous creatures on Earth, culminating in the ultimate threat: humans. + +## Lion + +::picture-and-text +--- +card: true +--- +**Tigers** are dangerous to humans because of their immense strength, powerful jaws, and sharp claws, capable of causing fatal injuries. Additionally, tigers are territorial and can become highly aggressive if they feel threatened or if their territory is encroached upon. + +#image +![Lion](https://picsum.photos/id/1074/800/400){.rounded-lg height="400" width="800"} +:: + +## Monkeys + +::picture-and-text +--- +card: true +--- +**Monkeys** are dangerous to humans due to their sharp teeth and strong jaws, which can inflict serious bites, and their potential to carry and transmit diseases such as rabies. Additionally, monkeys can become aggressive if they feel threatened or if they are protecting their young. + +#image +![monkey](https://picsum.photos/id/783/800/400){.rounded-lg height="400" width="800"} +:: + +## Wolf + +::picture-and-text +--- +card: true +--- +**Wolves** are dangerous to humans due to their pack hunting behavior, which can overwhelm and outnumber a person, and their strong jaws capable of inflicting serious injuries. Additionally, wolves may become aggressive if they feel their territory or pack is threatened. + +#image +![wolf](https://picsum.photos/id/582/800/400){.rounded-lg height="400" width="800"} +:: + +## Bears + +::picture-and-text +--- +card: true +--- +**Bears** are dangerous to humans due to their immense strength and powerful claws, which can cause severe injuries or death. Additionally, bears are highly protective of their young and can become aggressive if they feel threatened or surprised. + +#image +![Bears](https://picsum.photos/id/1020/800/400){.rounded-lg height="400" width="800"} +:: + +## Great White Shark + +::picture-and-text +--- +card: true +--- +As the apex predator of the ocean, the **great white shark** strikes fear into the hearts of beachgoers and surfers around the world. With its razor-sharp teeth and lightning-fast attacks, this formidable predator is the stuff of nightmares for many. + +#image +![sea](https://picsum.photos/id/124/800/400){.rounded-lg height="400" width="800"} +:: + +## Mosquito + +::picture-and-text +--- +card: true +--- +While tiny in size, the **mosquito** is responsible for more human deaths than any other creature on Earth. As carriers of deadly diseases such as malaria, dengue fever, and Zika virus, these blood-sucking insects pose a significant threat to public health worldwide. + +#image +![human](https://picsum.photos/id/996/800/400){.rounded-lg height="400" width="800"} +:: + +## Golden Poison Frog + +::picture-and-text +--- +card: true +--- +The **Golden Poison Frog**, native to the rainforests of Colombia, is considered one of the most toxic amphibians on the planet. Despite its vibrant golden coloration, this frog secretes potent neurotoxins through its skin, which can cause severe reactions or even death if ingested or handled improperly. Its toxicity serves as a defense mechanism against predators, making it one of the most dangerous frogs in the world. + +#image +![marsh](https://picsum.photos/id/128/800/400){.rounded-lg height="400" width="800"} +:: + +## King Cobra + +::picture-and-text +--- +card: true +--- +As the largest venomous snake in the world, the **king cobra** commands respect wherever it is found. With its deadly venom and impressive size, this iconic serpent is a top predator in its habitat and a formidable adversary for any would-be threat. + +#image +![desert](https://picsum.photos/id/196/800/400){.rounded-lg height="400" width="800"} +:: + +## Jaguars + +::picture-and-text +--- +card: true +--- +**Jaguars** are dangerous to humans due to their powerful bite, capable of crushing skulls, and their aggressive territorial defense, especially if they feel threatened. Their stealth, agility, and adaptability to various environments further increase the risk of unexpected encounters. + +#image +![Jaguars](https://picsum.photos/id/219/800/400){.rounded-lg height="400" width="800"} +:: + +## Humans + +::picture-and-text +--- +card: true +--- +While not traditionally viewed as a "wild" creature, **humans** have proven to be the most dangerous and destructive force on Earth. From habitat destruction to pollution, overhunting, and warfare, humans have caused irreparable harm to countless species and ecosystems, threatening the very survival of life on our planet. + +In conclusion, while the natural world is filled with creatures of all shapes and sizes, it is ultimately humans who pose the greatest threat to our own survival and the delicate balance of life on Earth. As stewards of our planet, it is imperative that we respect and protect the diverse array of species that call it home, lest we face the consequences of our own actions. + +#image +![humans](https://picsum.photos/id/978/800/800){.rounded-lg height="800" width="800"} +:: diff --git a/landing/content/3.blog/6.cryptocurrencies.md b/landing/content/3.blog/6.cryptocurrencies.md new file mode 100644 index 0000000..19d200f --- /dev/null +++ b/landing/content/3.blog/6.cryptocurrencies.md @@ -0,0 +1,112 @@ +--- +title: The Rise of Cryptocurrencies +description: Transforming Finance and Economy +image: + src: https://picsum.photos/id/1048/640/360 +authors: + - name: Emily pasek + to: https://twitter.com/benjamincanac + avatar: + src: https://i.pravatar.cc/128?u=5 +date: 2024-02-01 +badge: + label: Economy, Information Technology +--- + +In recent years, cryptocurrencies have emerged as a disruptive force in the world of finance and economics. Born out of the decentralized ethos of blockchain technology, cryptocurrencies have challenged traditional financial systems, offering new avenues for investment, transactions, and economic empowerment. This article explores the impact of cryptocurrencies on the economy and finance, examining their evolution, opportunities, and challenges. + +![computer](https://picsum.photos/id/3/1000/600){.rounded-lg height="600" width="1000"} + +## The Evolution of Cryptocurrencies + +Bitcoin, introduced in 2009 by the pseudonymous Satoshi Nakamoto, marked the birth of cryptocurrencies. Initially met with skepticism, Bitcoin gradually gained traction, attracting attention from investors and technologists alike. Its underlying blockchain technology, a distributed ledger system, offered transparency, security, and immutability, laying the foundation for a new financial paradigm. + +Since then, thousands of cryptocurrencies, including Ethereum, Ripple, and Litecoin, have proliferated, each with its unique features and use cases. Ethereum introduced smart contracts, enabling programmable transactions, while Ripple focused on facilitating cross-border payments. These diverse offerings have expanded the scope of cryptocurrencies, fueling innovation and experimentation in the financial sector. + +## ๐Ÿ“ˆ Opportunities in Cryptocurrencies + +Cryptocurrencies present numerous opportunities for individuals, businesses, and economies: + +- **Financial Inclusion:** Cryptocurrencies offer financial services to the unbanked and underbanked populations, bypassing traditional banking infrastructure and reducing transaction costs. +- **Decentralized Finance (DeFi):** DeFi platforms leverage blockchain technology to provide decentralized alternatives to traditional financial services, including lending, borrowing, and trading, without intermediaries. +- **Investment Diversification:** Cryptocurrencies serve as a hedge against traditional assets, providing diversification benefits and offering exposure to a nascent asset class with high growth potential. +- **Technological Innovation:** The underlying blockchain technology of cryptocurrencies has applications beyond finance, including supply chain management, healthcare, and voting systems, driving innovation across industries. + +## ๐Ÿ“‰ Challenges and Risks + +Despite their potential, cryptocurrencies also face challenges and risks that warrant attention: + +- **Volatility:** Cryptocurrency markets are characterized by high volatility, subject to speculative trading, market manipulation, and sudden price fluctuations, posing risks to investors and stability. +- **Regulatory Uncertainty:** Governments and regulatory bodies worldwide are grappling with the regulation of cryptocurrencies, raising concerns about legal compliance, taxation, and investor protection. +- **Security Concerns:** Cryptocurrency exchanges and wallets are vulnerable to cyber attacks, theft, and fraud, necessitating robust security measures and risk management practices. +- **Environmental Impact:** The energy-intensive mining process of cryptocurrencies, particularly Bitcoin, raises environmental concerns due to its carbon footprint and energy consumption. + +## Here are the most well-known cryptocurrencies + +These cryptocurrencies are among the most recognized and widely used in the cryptocurrency ecosystem, each with its unique features and use cases. + +::card-group + :::card + --- + icon: i-simple-icons-bitcoin + target: _blank + title: Bitcoin (BTC) + to: https://bitcoin.org/ + --- + The first and most famous cryptocurrency, often considered a digital store of value and widely used as a medium of exchange. + ::: + + :::card + --- + icon: i-simple-icons-ethereum + target: _blank + title: Ethereum (ETH) + to: https://ethereum.org + --- + A blockchain platform enabling developers to create smart contracts and decentralized applications (DApps). + ::: + + :::card + --- + icon: i-simple-icons-ripple + target: _blank + title: Ripple (XRP) + to: https://ripple.com/ + --- + Focused on providing fast and inexpensive global payment solutions, especially for interbank transactions and cross-border payments. + ::: + + :::card + --- + icon: i-simple-icons-litecoin + target: _blank + title: Litecoin (LTC) + to: https://litecoin.com// + --- + Known for faster transaction times and a more decentralized approach compared to Bitcoin. + ::: + + :::card + --- + icon: i-simple-icons-bitcoincash + target: _blank + title: Bitcoin Cash (BCH) + to: https://bitcoincash.org + --- + A fork of Bitcoin aimed at improving scalability and transaction processing capabilities. + ::: + + :::card + --- + icon: i-simple-icons-cardano + target: _blank + title: Cardano (ADA) + to: https://cardano.org/ + --- + A blockchain platform designed for enhanced security and scalability, supporting smart contract and DApp development. + ::: +:: + +## Conclusion + +Cryptocurrencies have emerged as a transformative force in the economy and finance, offering opportunities for innovation, inclusion, and investment. However, their adoption and integration into mainstream financial systems require addressing regulatory, security, and scalability challenges. As cryptocurrencies continue to evolve, their impact on the global economy will be shaped by technological advancements, regulatory developments, and market dynamics, paving the way for a decentralized and digitized financial future. diff --git a/landing/content/4.changelog.yml b/landing/content/4.changelog.yml new file mode 100644 index 0000000..f0cf6a9 --- /dev/null +++ b/landing/content/4.changelog.yml @@ -0,0 +1,3 @@ +title: Changelog +description: Track the evolution of Sendook - new features, improvements, and updates to help your AI agents communicate better. +navigation.icon: i-lucide-rocket diff --git a/landing/content/4.changelog/1.launch.md b/landing/content/4.changelog/1.launch.md new file mode 100644 index 0000000..4e3467f --- /dev/null +++ b/landing/content/4.changelog/1.launch.md @@ -0,0 +1,25 @@ +--- +title: "Sendook Launch ๐Ÿš€" +description: "Introducing Sendook - email infrastructure for AI agents. Stop wrestling with Gmail APIs and AWS SES. Create inboxes, send emails, and receive webhooks in minutes." +date: "2024-04-01" +image: https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80 +--- + +๐Ÿš€ We're excited to announce the launch of Sendook! This milestone represents months of building, testing, and learning from developers building AI agents. Our mission: eliminate the painful complexity of email infrastructure so you can focus on building intelligence. + +Every AI agent we talked to had the same frustration: setting up email took days of configuration, OAuth flows, and MIME parsing. We built Sendook to make this instant. One API call, and your agent has a working inbox. ๐Ÿ’ก + +**Launch Features:** +- โšก **Instant Inbox Creation**: One API call creates a fully functional mailbox +- ๐Ÿ”” **Real-time Webhooks**: Get notified the moment emails arrive +- ๐Ÿ“ง **JSON-Ready Emails**: Pre-decoded, formatted, ready for your agent +- ๐Ÿ“ค **Send & Reply**: Simple APIs for outbound email and threading +- ๐Ÿ” **Full-Text Search**: Query any email by any field, instantly +- ๐Ÿ” **Secure by Default**: API key authentication, webhook signature verification +- ๐Ÿ“š **Complete Documentation**: Guides, examples, and SDK reference +- ๐ŸŒ **Open Source**: MIT licensed, self-host or use our cloud + +**Built for Production:** ๐Ÿ› ๏ธ +We run on battle-tested email infrastructure with spam filtering, deliverability optimization, and redundant systems. Automated testing and continuous deployment ensure reliability. Your AI agents deserve infrastructure they can depend on. + +This is just the beginning. We're building the email platform AI agents need to communicate at scale. Let us know what you'd like to see next! โœจ diff --git a/landing/content/4.changelog/10.fun.md b/landing/content/4.changelog/10.fun.md new file mode 100644 index 0000000..cb80f70 --- /dev/null +++ b/landing/content/4.changelog/10.fun.md @@ -0,0 +1,22 @@ +--- +title: "Clippy Integration (Beta) ๐Ÿค" +description: "Meet your new productivity assistant! For April Fools' Day, we're introducing Clippy, your friendly (and slightly mischievous) helper. He's here to make your day a little brighterโ€”and maybe a little more chaotic." +date: "2025-04-01" +image: https://images.unsplash.com/photo-1503676382389-4809596d5290?auto=format&fit=crop&w=800&q=80 +--- + +๐ŸŽ‰ Meet your new productivity assistant! For April Fools' Day, we're introducing Clippy, your friendly (and slightly mischievous) helper. He's here to make your day a little brighterโ€”and maybe a little more chaotic. ๐Ÿ˜œ + +Clippy pops up with tips, jokes, and the occasional dance across your dashboard. Don't worry, you can always dismiss him with a click (or just enjoy the nostalgia). ๐Ÿค + +**Features:** +- ๐Ÿ’ก Pops up with helpful (and sometimes unhelpful) tips +- ๐Ÿ•บ Animates across your dashboard with classic Clippy moves +- ๐Ÿ˜‚ Tells a random joke on demand +- โŒ Can be dismissed with a single click +- ๐Ÿฅš Easter eggs for the curious + +**Behind the scenes:** ๐ŸŽฌ +Our team had a blast bringing Clippy to life for a day. No productivity assistants were harmed in the making of this feature. + +Don't worry, Clippy will only stick around for a day. Or will he? ๐Ÿ˜‰ diff --git a/landing/content/4.changelog/2.teams.md b/landing/content/4.changelog/2.teams.md new file mode 100644 index 0000000..3420d4c --- /dev/null +++ b/landing/content/4.changelog/2.teams.md @@ -0,0 +1,22 @@ +--- +title: "Teams & Collaboration" +description: "Introducing Teams! Invite colleagues, assign roles, and collaborate in real-time. Perfect for startups and growing businesses." +date: "2024-05-10" +image: https://images.unsplash.com/photo-1518609878373-06d740f60d8b?auto=format&fit=crop&w=800&q=80 +--- + +๐Ÿค Collaboration just got easier! With Teams, you can now work together more efficiently and securely. This update is all about empowering organizations to scale and manage their members with confidence. + +We listened to your feedback and built a flexible system for inviting colleagues, assigning roles, and tracking activity. Whether you're onboarding new hires or collaborating across departments, Teams has you covered. ๐Ÿ‘ฅ + +**What's new:** +- โœ‰๏ธ Invite team members via email or shareable link +- ๐Ÿ›ก๏ธ Assign roles (Admin, Member, Viewer) for granular access control +- ๐Ÿ”” Real-time activity tracking and notifications +- ๐Ÿ“Š Team-based dashboards and analytics for better insights +- ๐Ÿ”„ Easy switching between multiple teams and organizations + +**Behind the scenes:** ๐Ÿ—๏ธ +We re-architected our user management system to support organizations of any size. This paves the way for future features like SSO, advanced permissions, and audit logs. + +Perfect for startups and growing businesses. Try it out and streamline your workflow! ๐Ÿš€ diff --git a/landing/content/4.changelog/3.dark-mode.md b/landing/content/4.changelog/3.dark-mode.md new file mode 100644 index 0000000..4500f4c --- /dev/null +++ b/landing/content/4.changelog/3.dark-mode.md @@ -0,0 +1,23 @@ +--- +title: "Dark Mode ๐ŸŒ™" +description: "Your eyes will thank you! Switch between light and dark themes with a single click. Fully integrated with Nuxt UI." +date: "2024-06-15" +image: https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80 +--- + +๐ŸŒ™ Give your eyes a break with our new Dark Mode! After many requests, we're thrilled to deliver a sleek, modern look that's easy on the eyesโ€”day or night. + +Switching themes is now effortless, and every component has been carefully tuned for contrast and accessibility. Whether you're burning the midnight oil or just prefer a darker palette, this update is for you. ๐ŸŒ“ + +**Improvements:** +- ๐ŸŒ— One-click theme toggle in the header +- ๐Ÿ–ฅ๏ธ Automatic adaptation to system preferences +- ๐Ÿงฉ Fully integrated with Nuxt UI components +- โ™ฟ Optimized for accessibility and contrast +- ๐Ÿ’พ Persistent theme preference across devices +- โœจ Subtle animations for a polished feel + +**Behind the scenes:** ๐ŸŽจ +We refactored our color system and tested across dozens of devices to ensure a consistent experience. Expect more theme customization options soon! + +Let us know how you like the new look and if you spot any areas for improvement! ๐Ÿ’ฌ diff --git a/landing/content/4.changelog/4.integrations.md b/landing/content/4.changelog/4.integrations.md new file mode 100644 index 0000000..ccf19fd --- /dev/null +++ b/landing/content/4.changelog/4.integrations.md @@ -0,0 +1,43 @@ +--- +title: "Webhook Events & SDK Improvements" +description: "New webhook events for delivery tracking, Python SDK launch, and enhanced error handling. Your AI agents just got smarter." +date: "2024-07-20" +image: https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=800&q=80 +--- + +๐Ÿ”Œ This release supercharges how your AI agents interact with email events! We've expanded webhook capabilities, launched our Python SDK, and made error handling much more robust. + +Based on feedback from teams building production AI agents, we focused on visibility, reliability, and multi-language support. These improvements make your agents more responsive and easier to debug. ๐Ÿ—‚๏ธ + +**New Features:** +- ๐Ÿ“ฌ **Enhanced Webhook Events:** Track `message.delivered`, `message.bounced`, `message.opened`, and `message.clicked` +- ๐Ÿ **Python SDK:** Official Python support with type hints, async support, and idiomatic APIs +- ๐Ÿ”’ **Webhook Signature Verification:** Built-in helpers to verify webhook authenticity +- ๐Ÿšจ **Improved Error Codes:** More granular error codes for better error handling +- ๐Ÿ“Š **Delivery Status Tracking:** Query delivery status for any sent email +- โšก **Retry Logic:** Configurable webhook retry with exponential backoff +- ๐Ÿ”— **Thread Context in Webhooks:** Full thread history included in `message.received` events + +**Python SDK Example:** +```python +from sendook import Sendook +import asyncio + +client = Sendook(api_key='your-api-key') + +# Create inbox +inbox = await client.inboxes.create(name='AI Support Agent') + +# Send email +await client.messages.send( + inbox_id=inbox.id, + to='customer@example.com', + subject='Your AI-powered response', + body='Thanks for reaching out!' +) +``` + +**Behind the scenes:** ๐Ÿ”ง +We rebuilt our webhook delivery system for better reliability. Failed webhooks now retry with exponential backoff, and you can view delivery logs in the dashboard. The Python SDK uses the same battle-tested patterns as our Node.js SDK. + +More language SDKs coming soonโ€”Go and Ruby are next! Let us know what you need. ๐Ÿ“จ diff --git a/landing/content/4.changelog/5.mobile.md b/landing/content/4.changelog/5.mobile.md new file mode 100644 index 0000000..9aa4aa5 --- /dev/null +++ b/landing/content/4.changelog/5.mobile.md @@ -0,0 +1,23 @@ +--- +title: "Mobile App Beta ๐Ÿ“ฑ" +description: "Access your dashboard on the go! Our mobile app beta is now open for all users. Available on iOS and Android." +date: "2024-08-30" +image: https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?auto=format&fit=crop&w=800&q=80 +--- + +๐Ÿ“ฑ Take your SaaS dashboard anywhere! Our mobile app beta is now available for iOS and Android, bringing your workspace to your pocket. Stay productive and connected, wherever you are. + +We designed the app from the ground up for speed and usability on small screens. Whether you're checking reports on the train or getting notifications on the go, the mobile app keeps you in the loop. ๐Ÿš† + +**Features:** +- ๐Ÿ“Š Access dashboards and reports on the go +- ๐Ÿ”” Push notifications for important updates +- ๐Ÿ“ด Offline support for uninterrupted productivity +- ๐Ÿค Optimized for touch and small screens +- ๐Ÿ›ก๏ธ Secure biometric login (Face ID & Touch ID) +- โšก Quick actions for common tasks + +**Behind the scenes:** ๐Ÿง‘โ€๐Ÿ’ป +We built the app using the latest cross-platform tech, ensuring a native feel on both iOS and Android. Your feedback during beta will help us polish and prioritize new features. + +We'd love your feedback as we prepare for the full launch! ๐Ÿš€ diff --git a/landing/content/4.changelog/6.performance.md b/landing/content/4.changelog/6.performance.md new file mode 100644 index 0000000..764fb6d --- /dev/null +++ b/landing/content/4.changelog/6.performance.md @@ -0,0 +1,22 @@ +--- +title: "Performance Boost โšก๏ธ" +description: "Our SaaS just got a whole lot faster! Enjoy snappier load times and smoother navigation across the app." +date: "2024-09-15" +image: https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=800&q=80 +--- + +โšก Our SaaS just got a whole lot faster! This update is all about speed, responsiveness, and a smoother experience for everyone. We know how important performance is, so we've made it a top priority for this release. + +From optimizing our backend infrastructure to fine-tuning the frontend, every part of the app has been reviewed and improved. You'll notice snappier load times, quicker navigation, and a more fluid feel throughout the platform. ๐Ÿš€ + +**Improvements:** +- ๐Ÿš„ 2x faster dashboard load times +- โฑ๏ธ Reduced API response latency by 40% +- ๐Ÿ–ผ๏ธ Optimized image delivery and caching for all devices +- ๐ŸŒ€ Smoother transitions and navigation between pages +- ๐Ÿง  Lower memory usage on mobile and desktop + +**Behind the scenes:** ๐Ÿ› ๏ธ +We introduced smarter caching, lazy loading, and database indexing. Our team also set up new monitoring tools to catch slowdowns before you do. + +Let us know if you notice the differenceโ€”and if there's anywhere else you'd like to see us speed things up! ๐Ÿ’ฌ diff --git a/landing/content/4.changelog/7.analytics.md b/landing/content/4.changelog/7.analytics.md new file mode 100644 index 0000000..ac3f9d5 --- /dev/null +++ b/landing/content/4.changelog/7.analytics.md @@ -0,0 +1,23 @@ +--- +title: "Advanced Analytics ๐Ÿ“Š" +description: "Gain deeper insights into your business with our new analytics dashboard. Track key metrics and visualize your growth." +date: "2024-10-05" +image: https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80 +--- + +๐Ÿ“Š Gain deeper insights into your business with our new analytics dashboard! This release brings powerful tools to help you track, measure, and growโ€”all in one place. + +We've reimagined analytics from the ground up, making it easier to visualize trends, monitor KPIs, and share reports with your team. Whether you're a data pro or just getting started, you'll find everything you need to make smarter decisions. ๐Ÿง  + +**New features:** +- ๐Ÿ“ˆ Customizable dashboards and reports +- โฑ๏ธ Real-time user and revenue tracking +- ๐Ÿ“ค Export data to CSV or Google Sheets +- ๐Ÿ“Š Visualize trends with interactive charts and graphs +- ๐Ÿ“ง Scheduled email reports for key metrics +- ๐Ÿ” Drill-down filters for granular analysis + +**Behind the scenes:** ๐Ÿ› ๏ธ +We built a new analytics engine using scalable cloud infrastructure, ensuring fast queries and reliable data. Expect more integrations and advanced visualizations soon! + +We're excited to see what insights you discoverโ€”let us know what you build with it! ๐Ÿš€ diff --git a/landing/content/4.changelog/8.api.md b/landing/content/4.changelog/8.api.md new file mode 100644 index 0000000..8ad641f --- /dev/null +++ b/landing/content/4.changelog/8.api.md @@ -0,0 +1,23 @@ +--- +title: "Public API Now Available ๐Ÿ› ๏ธ" +description: "Build your own integrations and automate workflows with our brand new public API." +date: "2024-10-25" +image: https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80 +--- + +๐Ÿ› ๏ธ Build your own integrations and automate workflows with our brand new public API! This is a huge step for our developer community, and we can't wait to see what you create. + +The API gives you secure, programmatic access to all major resources in your workspace. From automating routine tasks to building custom dashboards, the possibilities are endless. ๐Ÿค– + +**Highlights:** +- ๐ŸŒ RESTful endpoints for all major resources +- ๐Ÿ”‘ Secure API key authentication +- ๐Ÿ“š Comprehensive documentation and code samples +- ๐Ÿ“ก Webhook support for real-time updates +- ๐Ÿšฆ Rate limiting and monitoring for stability +- ๐Ÿ—ฃ๏ธ Community forum for sharing projects and getting help + +**Behind the scenes:** ๐Ÿ‘จโ€๐Ÿ’ป +We worked closely with early adopters to ensure the API is robust and easy to use. Our docs are open sourceโ€”contributions and feedback are welcome! + +We can't wait to see what you buildโ€”share your projects with us and help shape the next version of our API! ๐Ÿš€ diff --git a/landing/content/4.changelog/9.security.md b/landing/content/4.changelog/9.security.md new file mode 100644 index 0000000..22c17d9 --- /dev/null +++ b/landing/content/4.changelog/9.security.md @@ -0,0 +1,23 @@ +--- +title: "Security Enhancements ๐Ÿ”’" +description: "Your data is safer than ever. We've rolled out new security features and compliance updates." +date: "2024-11-12" +image: https://images.unsplash.com/photo-1510511459019-5dda7724fd87?auto=format&fit=crop&w=800&q=80 +--- + +๐Ÿ”’ Your data is safer than ever. This update brings a suite of new security features and compliance improvements, reflecting our ongoing commitment to protecting your business. + +We've worked with security experts and listened to customer feedback to deliver the most requested enhancements. Security is never done, but this release is a big leap forward. ๐Ÿ›ก๏ธ + +**Enhancements:** +- ๐Ÿ”‘ Two-factor authentication (2FA) for all accounts +- ๐Ÿข SSO support for enterprise customers +- ๐Ÿ“œ GDPR and SOC 2 compliance updates +- ๐Ÿ“ Improved audit logs and access controls +- โณ Session timeout and device management +- ๐Ÿ” Encrypted data at rest and in transit + +**Behind the scenes:** ๐Ÿ•ต๏ธโ€โ™‚๏ธ +We conducted a full security audit and implemented automated vulnerability scanning. Our team is now preparing for additional certifications and regular penetration testing. + +Thank you for trusting us with your businessโ€”security will always be our top priority! ๐Ÿ™ diff --git a/landing/eslint.config.mjs b/landing/eslint.config.mjs new file mode 100644 index 0000000..0516f1f --- /dev/null +++ b/landing/eslint.config.mjs @@ -0,0 +1,6 @@ +// @ts-check +import withNuxt from './.nuxt/eslint.config.mjs' + +export default withNuxt({ + // Your custom configs here +}) diff --git a/landing/nuxt.config.ts b/landing/nuxt.config.ts new file mode 100644 index 0000000..c7a4d05 --- /dev/null +++ b/landing/nuxt.config.ts @@ -0,0 +1,50 @@ +// https://nuxt.com/docs/api/configuration/nuxt-config +export default defineNuxtConfig({ + modules: [ + '@nuxt/eslint', + '@nuxt/image', + '@nuxt/ui', + '@nuxt/content', + '@vueuse/nuxt', + 'nuxt-og-image' + ], + + app: { + head: { + title: 'sendook', + meta: [ + { name: 'description', content: 'sendook - Email infrastructure for developers' } + ] + } + }, + + devtools: { + enabled: true + }, + + css: ['~/assets/css/main.css'], + + routeRules: { + '/docs': { redirect: '/docs/getting-started', prerender: false } + }, + + compatibilityDate: '2024-07-11', + + nitro: { + prerender: { + routes: [ + '/' + ], + crawlLinks: true + } + }, + + eslint: { + config: { + stylistic: { + commaDangle: 'never', + braceStyle: '1tbs' + } + } + } +}) diff --git a/landing/package.json b/landing/package.json new file mode 100644 index 0000000..cba5086 --- /dev/null +++ b/landing/package.json @@ -0,0 +1,33 @@ +{ + "name": "sendook", + "private": true, + "type": "module", + "scripts": { + "build": "nuxt build", + "dev": "nuxt dev", + "preview": "nuxt preview", + "postinstall": "nuxt prepare", + "lint": "eslint .", + "typecheck": "nuxt typecheck" + }, + "dependencies": { + "@iconify-json/lucide": "^1.2.73", + "@iconify-json/simple-icons": "^1.2.58", + "@nuxt/content": "^3.8.0", + "@nuxt/image": "^2.0.0", + "@nuxt/ui": "^4.1.0", + "@standard-schema/spec": "^1.0.0", + "@vueuse/nuxt": "^13.9.0", + "better-sqlite3": "^12.4.1", + "nuxt": "^4.2.1", + "nuxt-og-image": "^5.1.12", + "zod": "^4.1.12" + }, + "devDependencies": { + "@nuxt/eslint": "^1.10.0", + "eslint": "^9.39.1", + "typescript": "^5.9.3", + "vue-tsc": "^3.1.3" + }, + "packageManager": "pnpm@10.21.0" +} diff --git a/landing/public/android-chrome-192x192.png b/landing/public/android-chrome-192x192.png new file mode 100644 index 0000000..2a05622 Binary files /dev/null and b/landing/public/android-chrome-192x192.png differ diff --git a/landing/public/android-chrome-512x512.png b/landing/public/android-chrome-512x512.png new file mode 100644 index 0000000..037e75f Binary files /dev/null and b/landing/public/android-chrome-512x512.png differ diff --git a/landing/public/apple-touch-icon.png b/landing/public/apple-touch-icon.png new file mode 100644 index 0000000..259bf31 Binary files /dev/null and b/landing/public/apple-touch-icon.png differ diff --git a/landing/public/favicon-16x16.png b/landing/public/favicon-16x16.png new file mode 100644 index 0000000..448c3d7 Binary files /dev/null and b/landing/public/favicon-16x16.png differ diff --git a/landing/public/favicon-32x32.png b/landing/public/favicon-32x32.png new file mode 100644 index 0000000..55bdd10 Binary files /dev/null and b/landing/public/favicon-32x32.png differ diff --git a/landing/public/favicon.ico b/landing/public/favicon.ico new file mode 100644 index 0000000..ca3014b Binary files /dev/null and b/landing/public/favicon.ico differ diff --git a/landing/public/sendook-logo.svg b/landing/public/sendook-logo.svg new file mode 100644 index 0000000..ec0a0e1 --- /dev/null +++ b/landing/public/sendook-logo.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/landing/public/sendook-logomark.svg b/landing/public/sendook-logomark.svg new file mode 100644 index 0000000..88bd309 --- /dev/null +++ b/landing/public/sendook-logomark.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/landing/public/site.webmanifest b/landing/public/site.webmanifest new file mode 100644 index 0000000..b770ba4 --- /dev/null +++ b/landing/public/site.webmanifest @@ -0,0 +1,21 @@ +{ + "name": "Sendook", + "short_name": "Sendook", + "description": "Email infrastructure for AI agents. Create inboxes, send emails, and receive webhooks instantly.", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#080708", + "background_color": "#ffffff", + "display": "standalone", + "start_url": "/" +} \ No newline at end of file diff --git a/landing/renovate.json b/landing/renovate.json new file mode 100644 index 0000000..7180aab --- /dev/null +++ b/landing/renovate.json @@ -0,0 +1,13 @@ +{ + "extends": [ + "github>nuxt/renovate-config-nuxt" + ], + "lockFileMaintenance": { + "enabled": true + }, + "packageRules": [{ + "matchDepTypes": ["resolutions"], + "enabled": false + }], + "postUpdateOptions": ["pnpmDedupe"] +} diff --git a/landing/tsconfig.json b/landing/tsconfig.json new file mode 100644 index 0000000..103ec50 --- /dev/null +++ b/landing/tsconfig.json @@ -0,0 +1,10 @@ +{ + // https://nuxt.com/docs/guide/concepts/typescript + "files": [], + "references": [ + { "path": "./.nuxt/tsconfig.app.json" }, + { "path": "./.nuxt/tsconfig.server.json" }, + { "path": "./.nuxt/tsconfig.shared.json" }, + { "path": "./.nuxt/tsconfig.node.json" } + ] +}