{"plugin":{"id":2,"name":"mdx-tailwind-docs","icon":"📄","description":"Create beautiful documentation site all in markdown with full control over your project","longDescription":"# Frame Master Template: MDX Documentation Site\n\nA modern, high-performance starter template for building documentation sites with MDX, React, and Tailwind CSS, Ready for CDN.\n\n![Frame Master Template](https://img.shields.io/badge/Frame%20Master-Template-blueviolet)\n![React](https://img.shields.io/badge/React-19-blue)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.1-38bdf8)\n![Bun](https://img.shields.io/badge/Bun-1.3-black)\n\n## 🚀 Features\n\n- **MDX Support**: Write documentation in Markdown with embedded React components\n- **React 19**: The latest version of React for building interactive UIs\n- **Tailwind CSS**: Utility-first CSS framework with Typography plugin\n- **Pre-built Components**: Ready-to-use Header and Footer components\n- **Site Configuration**: Centralized config file for easy customization\n- **Frame Master**: Integrated workflow for seamless development\n- **Bun**: Lightning-fast JavaScript runtime and package manager\n- **TypeScript**: Type-safe development for better code quality\n\n## 📁 Project Structure\n\n```\nsrc/\n├── site.config.ts      # ⚙️ Site configuration (name, links, nav, etc.)\n├── shell.tsx           # HTML shell wrapper\n├── common.ts           # Shared utilities\n├── components/\n│   ├── index.ts        # Components barrel export\n│   ├── Header.tsx      # Site header with navigation\n│   └── Footer.tsx      # Site footer with links\n└── pages/\n    ├── layout.tsx      # Page layout wrapper\n    └── index.mdx       # Home page\nstatic/\n├── style.css           # Compiled Tailwind CSS\n├── tailwind.css        # Tailwind source\n└── favicon.svg         # Site favicon\n```\n\n## 🛠️ Getting Started\n\n### Prerequisites\n\n- [Bun](https://bun.sh) (v1.3 or later)\n\n### Installation\n\n1. **Clone the repository (or use the template):**\n\n   ```bash\n   git clone <your-repo-url>\n   cd <your-project-directory>\n   ```\n\n2. **Install dependencies:**\n\n   ```bash\n   bun install\n   ```\n\n3. **Initialize Frame Master:**\n\n   ```bash\n   bun frame-master init\n   ```\n\n### Development\n\nStart the development server with Hot Module Replacement (HMR):\n\n```bash\nbun run dev\n```\n\n### Build for Production\n\n```bash\nbun run build\n```\n\n## ⚙️ Configuration\n\n### Site Configuration (`src/site.config.ts`)\n\nThe main configuration file for your documentation site. Update these values to customize your site:\n\n```typescript\nexport const siteConfig = {\n  // Site name displayed in header and title\n  name: \"My Documentation\",\n\n  // Site description for SEO\n  description: \"Documentation site built with Frame Master\",\n\n  // Author information\n  author: {\n    name: \"Your Name\",\n    url: \"https://github.com/yourusername\",\n  },\n\n  // Social links (leave empty to hide)\n  links: {\n    github: \"https://github.com/yourusername/your-repo\",\n    twitter: \"https://twitter.com/yourusername\",\n    discord: \"\",\n  },\n\n  // Navigation items\n  nav: [\n    { label: \"Home\", href: \"/\" },\n    { label: \"Docs\", href: \"/docs\" },\n    { label: \"Blog\", href: \"/blog\" },\n  ],\n\n  // Footer sections\n  footer: {\n    sections: [\n      {\n        title: \"Documentation\",\n        links: [\n          { label: \"Getting Started\", href: \"/docs/getting-started\" },\n          // ...\n        ],\n      },\n    ],\n    copyright: \"© 2025 Your Project. All rights reserved.\",\n  },\n};\n```\n\n## 📝 Writing Documentation\n\n### Creating Pages\n\nAdd `.mdx` files in the `src/pages` directory:\n\n```\nsrc/pages/\n├── index.mdx           # / (home)\n├── about.mdx           # /about\n├── docs/\n│   ├── index.mdx       # /docs\n│   ├── getting-started.mdx  # /docs/getting-started\n│   └── api/\n│       └── index.mdx   # /docs/api\n```\n\n### Using Components in MDX\n\nImport and use React components directly in your MDX files:\n\n```mdx\nimport { Alert } from \"../components/Alert\";\n\n# My Page\n\n<Alert type=\"info\">This is an informational alert!</Alert>\n\nRegular markdown content continues here...\n```\n\n### Creating Custom Components\n\nAdd new components in `src/components/`:\n\n```tsx\n// src/components/Alert.tsx\nexport function Alert({ type, children }) {\n  return <div className={`alert alert-${type}`}>{children}</div>;\n}\n```\n\nExport from the barrel file:\n\n```typescript\n// src/components/index.ts\nexport { Alert } from \"./Alert\";\n```\n\n## 🚀 Deployment\n\n### Cloudflare Pages\n\n1. Push your code to GitHub\n2. Connect your repository to Cloudflare Pages\n3. Set build command: `bun i && bun run build`\n4. Set output directory: `.frame-master/build`\n\n### Manual Deployment\n\n```bash\nbun run build\n# Deploy the .frame-master/build directory to your hosting provider\n```\n\n## 📜 License\n\nMIT License - feel free to use this template for any project!\n","author":"Justin","ownerId":"c166cdde-5f5c-40e5-a3ff-236652fa88a9","category":"cdn","tags":["mdx","react","markdown","cdn","static"],"published":true,"githubReleaseUrl":"https://github.com/shpaw415/frame-master-template-mdx-doc-site/releases/tag/v1.0.0","githubRepoUrl":"https://github.com/shpaw415/frame-master-template-mdx-doc-site","defaultVersion":"1.0.1","installation":"frame-master create --template mdx-tailwind-docs","features":["CDN ready","SSG","MDX","Tailwind for styling"],"includedPlugins":["frame-master-plugin-react-to-html","frame-master-plugin-apply-react","frame-master-plugin-tailwind","frame-master-plugin-mdx-to-js-loader"],"previewUrl":"https://frame-master-template-mdx-doc-site.pages.dev/","createdAt":"2025-12-09T06:52:33.000Z","updatedAt":"2026-01-15T19:10:12.000Z"}}