@quietmind/mdx-docs 0.1.0

package/README.md

@@ -0,0 +1,277 @@
+# Quietmind Wiki
+
+https://quietmind.dev/
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- Node.js (version 16 or higher)
+- Yarn package manager
+
+### Installation
+
+Clone the repository:
+
+```sh
+git clone https://github.com/ezrafree/quietmind-dev.git && \
+cd quietmind-dev
+```
+
+Install dependencies:
+
+```sh
+yarn
+```
+
+Start the development server:
+
+```sh
+yarn dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) in your browser
+
+## 📋 Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `yarn dev` | Start development server |
+| `yarn build` | Build for production |
+| `yarn preview` | Preview production build locally |
+| `yarn serve` | Preview production build with network access |
+| `yarn lint` | Run ESLint |
+| `yarn test` | Run tests |
+| `yarn test:watch` | Run tests in watch mode |
+| `yarn test:coverage` | Run tests with coverage |
+| `yarn test:ui` | Run tests with UI |
+| `yarn deploy` | Deploy to GitHub Pages |
+
+## 📚 Tech Stack
+
+- **Frontend**: React 19, Material-UI 7, Emotion
+- **Build Tool**: Vite 6
+- **Routing**: React Router DOM 7
+- **Documentation**: MDX 3
+- **Testing**: Vitest, Testing Library
+- **Deployment**: GitHub Pages
+
+## 📖 Documentation Structure
+
+### Adding New Pages
+
+Create a new MDX file in `src/contents/`:
+
+```mdx
+# My New Page
+
+This is my new documentation page with **markdown** and React components.
+```
+
+Update the pages configuration in `src/config/pages.js`:
+
+```js
+import MyNewPageMDX from "../contents/my-new-page.mdx";
+
+export const pages = [
+  // ... existing pages
+  {
+    name: "My New Page",
+    route: "/my-new-page",
+    component: MyNewPageMDX,
+  },
+];
+```
+
+### MDX Features
+
+- **Code Blocks**: Syntax highlighting with copy buttons
+- **Inline Code**: Styled inline code snippets
+- **React Components**: Embed any React component directly in MDX
+- **External Links**: Automatically open in new tabs
+
+## 🎨 Theming
+
+### Customizing Colors
+
+Update the theme files to customize the appearance:
+
+- **Light Theme**: `src/themes/lightTheme.js`
+- **Dark Theme**: `src/themes/darkTheme.js`
+
+Example theme customization:
+
+```js
+export const lightTheme = {
+  palette: {
+    primary: {
+      main: '#1976d2',
+    },
+    secondary: {
+      main: '#dc004e',
+    },
+  },
+};
+```
+
+### Theme Hook
+
+Use the `useTheme` hook to access theme state:
+
+```js
+import { useTheme } from './hooks/useTheme';
+
+function MyComponent() {
+  const { darkMode, setDarkMode } = useTheme();
+  // ...
+}
+```
+
+## 🏗️ Project Structure
+
+```none
+src/
+├── components/          # React components
+│   ├── AppBar.jsx      # Top navigation bar
+│   ├── CodeBlock.jsx   # Syntax highlighted code blocks
+│   ├── InlineCode.jsx  # Inline code styling
+│   ├── MDXContent.jsx  # MDX content renderer
+│   └── SideNavigation.jsx # Sidebar navigation
+├── config/
+│   └── pages.js        # Page configuration
+├── contents/           # MDX documentation files
+│   ├── button.mdx
+│   ├── colors.mdx
+│   ├── home.mdx
+│   └── typography.mdx
+├── hooks/
+│   └── useTheme.js     # Theme management hook
+├── themes/             # Material-UI themes
+│   ├── darkTheme.js
+│   ├── lightTheme.js
+│   └── index.js
+└── utils/
+    └── navigation.js   # Navigation utilities
+```
+
+## 🧪 Testing
+
+The project includes comprehensive tests with good coverage thresholds:
+
+- **Unit Tests**: Component and utility testing
+- **Coverage**: 70% minimum for branches, functions, lines, and statements
+- **Tools**: Vitest, Testing Library, jsdom
+
+Run tests:
+
+```sh
+# Run all tests
+yarn test
+
+# Watch mode
+yarn test:watch
+
+# With coverage
+yarn test:coverage
+
+# Interactive UI
+yarn test:ui
+```
+
+## 🚀 Deployment
+
+### GitHub Pages
+
+The project is configured for GitHub Pages deployment:
+
+1. Update the `homepage` field in `package.json`
+2. Run the deploy command:
+
+```sh
+yarn deploy
+```
+
+### Production Serving
+
+To serve the app in production mode locally:
+
+#### Option 1: Using Vite Preview (Recommended)
+
+```sh
+yarn build
+yarn preview
+```
+
+This serves the production build at `http://localhost:4173` (or another port if 4173 is taken).
+
+#### Option 2: Using Vite Preview with Network Access
+
+```sh
+yarn build
+yarn serve
+```
+
+This serves the production build and makes it accessible on your local network.
+
+#### Option 3: Using a Static File Server
+
+Install a static server globally:
+
+```sh
+npm install -g serve
+# or
+yarn global add serve
+```
+
+Then build and serve:
+
+```sh
+yarn build
+serve -s dist -l 3000
+```
+
+### Custom Deployment
+
+For other hosting platforms (Netlify, Vercel, AWS S3, etc.), build the project and serve the `dist` folder:
+
+```sh
+yarn build
+# Upload the dist/ directory to your hosting platform
+```
+
+## 🔧 Configuration
+
+### Vite Configuration
+
+The Vite config (`vite.config.js`) includes:
+
+- MDX plugin configuration
+- Emotion JSX runtime
+- Dynamic base URL for GitHub Pages
+
+### ESLint
+
+ESLint is configured with:
+
+- React and React Hooks rules
+- Import organization
+- Modern JavaScript standards
+
+## 🤝 Contributing
+
+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
+
+This project is open source and available under the [MIT License](LICENSE).
+
+## 🙏 Acknowledgments
+
+- [MDX](https://mdxjs.com/) for the amazing documentation framework
+- [Material-UI](https://mui.com/) for the beautiful component library
+- [Vite](https://vitejs.dev/) for the lightning-fast build tool
+- [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer) for syntax highlighting

package/dist/404.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Redirecting...</title>
+  </head>
+  <body>
+    <script>
+      // Get the current path
+      const path = window.location.pathname;
+
+      // Redirect to the main app with the route as a URL parameter
+      if (path && path !== "/") {
+        window.location.href = "/?redirect=" + encodeURIComponent(path);
+      } else {
+        window.location.href = "/";
+      }
+    </script>
+    <p>Redirecting...</p>
+  </body>
+</html>

package/dist/index.css

@@ -0,0 +1 @@
+:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background-color:#1976d233;color:inherit}::-moz-selection{background-color:#1976d233;color:inherit}@media (prefers-color-scheme: dark){::selection{background-color:#90caf94d;color:inherit}::-moz-selection{background-color:#90caf94d;color:inherit}}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html,body{min-height:100vh;width:100%;margin:0;padding:0}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}@media (max-width: 600px){*{word-wrap:break-word;overflow-wrap:break-word}body{word-wrap:break-word;overflow-wrap:break-word;overflow-x:hidden}pre,code{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}h1,h2,h3,h4,h5,h6,p{word-wrap:break-word;overflow-wrap:break-word}}@media (max-width: 378px){html,body{overflow-x:hidden;width:100%}*{word-wrap:break-word;overflow-wrap:break-word;max-width:100%}pre,code{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;max-width:100%}}