serve-my-md 1.1.0

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "serve-my-md",
+  "version": "1.1.0",
+  "type": "module",
+  "description": "Generate beautiful SEO-friendly static websites from Markdown files.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AshishAntil07/serve-my-md.git"
+  },
+  "homepage": "https://ashishantil.dev/serve-my-md",
+  "author": "AshishAntil07 <ashishantil.antil07@gmail.com>",
+  "license": "MIT",
+  "keywords": [
+    "markdown",
+    "docs",
+    "documentation",
+    "ssg",
+    "documentation-generator",
+    "seo",
+    "vite",
+    "react"
+  ],
+  "bin": {
+    "serve-my-md": "bin/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "bin",
+    "web",
+    "shared",
+    "index.html",
+    "README.md",
+    "LICENSE",
+    "package.json"
+  ],
+  "scripts": {
+    "dev": "tsup cli/src/index.ts --tsconfig cli/tsconfig.json --watch",
+    "build": "tsup cli/src/index.ts --tsconfig cli/tsconfig.json",
+    "start": "node bin/index.js",
+    "test": "vitest run --config cli/vitest.config.ts",
+    "dev:web": "vite --config web/vite.config.ts --port 3000",
+    "build:web": "vite build --config web/vite.config.ts",
+    "serve:web": "vite preview --config web/vite.config.ts",
+    "test:web": "vitest run --config web/vitest.config.ts",
+    "lint:web": "eslint web",
+    "format:web": "prettier --write web",
+    "check:web": "prettier --write web && eslint web --fix",
+    "prepublishOnly": "pnpm build"
+  },
+  "devDependencies": {
+    "@tanstack/devtools-vite": "^0.3.11",
+    "@tanstack/eslint-config": "^0.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/markdown-it": "^14",
+    "@types/markdown-it-footnote": "^3.0.4",
+    "@types/node": "^24.10.1",
+    "@types/prismjs": "^1.26.5",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "esbuild": "^0.27.3",
+    "jsdom": "^27.0.0",
+    "prettier": "^3.6.2",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.7",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "^4.0.15",
+    "web-vitals": "^5.1.0"
+  },
+  "dependencies": {
+    "@inquirer/prompts": "^7.10.1",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-router": "^1.132.0",
+    "@tanstack/react-router-devtools": "^1.132.0",
+    "@types/path-browserify": "^1.0.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "commander": "^14.0.3",
+    "lucide-react": "^0.544.0",
+    "markdown-it": "^14.1.1",
+    "markdown-it-footnote": "^4.0.0",
+    "markdown-it-github-headings": "^2.0.1",
+    "markdown-it-prism": "^3.0.1",
+    "markdown-it-task-lists": "^2.1.1",
+    "minimatch": "^10.2.0",
+    "path-browserify": "^1.0.1",
+    "prismjs": "^1.30.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hotkeys-hook": "^5.2.1",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.0.6",
+    "tw-animate-css": "^1.3.6"
+  },
+  "volta": {
+    "node": "26.1.0",
+    "npm": "11.15.0"
+  }
+}

package/shared/constants.json

@@ -0,0 +1,3 @@
+{
+  "STATIC_TEMP_CONTENT_PREFIX": "__smm_static_temp_content__"
+}

package/shared/index.d.ts

@@ -0,0 +1,34 @@
+export interface Out {
+  rootTitle: string;
+  description: string;
+  baseRoute: string;
+  defaultTheme: string;
+  favicon?: string;
+  logo?: string;
+  name: string;
+  version?: string;
+  fonts?: {
+    title: string;
+    body: string;
+    mono: string;
+  };
+  showNameWithLogo: boolean;
+  outDir: string;
+  routes: Route[];
+}
+export interface Route {
+  path: string;
+  content: string;
+}
+
+export type RouteTree = {
+  label: string;
+  children: RouteTree[] | null;
+  pathSegment: string;
+  isGrouper?: boolean;
+};
+
+/**
+ * A unique prefix for static content in the HTML template, used to replace temp content with react components.
+ */
+export const STATIC_TEMP_CONTENT_PREFIX = "__smm_static_temp_content__";

package/web/.cta.json

@@ -0,0 +1,12 @@
+{
+  "projectName": "web",
+  "mode": "code-router",
+  "typescript": true,
+  "tailwind": true,
+  "packageManager": "npm",
+  "addOnOptions": {},
+  "git": true,
+  "version": 1,
+  "framework": "react-cra",
+  "chosenAddOns": ["eslint", "compiler", "shadcn"]
+}

package/web/.cursorrules

@@ -0,0 +1,7 @@
+# shadcn instructions
+
+Use the latest version of Shadcn to install new components, like this command to add a button component:
+
+```bash
+pnpx shadcn@latest add button
+```

package/web/.prettierignore

@@ -0,0 +1,3 @@
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

package/web/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}

package/web/README.md

@@ -0,0 +1,489 @@
+Welcome to your new TanStack app!
+
+# Getting Started
+
+To run this application:
+
+```bash
+npm install
+npm run start
+```
+
+# Building For Production
+
+To build this application for production:
+
+```bash
+npm run build
+```
+
+## Testing
+
+This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
+
+```bash
+npm run test
+```
+
+## Styling
+
+This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
+
+## Linting & Formatting
+
+This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
+
+```bash
+npm run lint
+npm run format
+npm run check
+```
+
+## Shadcn
+
+Add components using the latest version of [Shadcn](https://ui.shadcn.com/).
+
+```bash
+pnpx shadcn@latest add button
+```
+
+## Routing
+
+This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.tsx` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing) guide.
+
+### Adding A Route
+
+To add a new route to your application just add another `createRoute` call to the `./src/main.tsx` file. The example below adds a new `/about`route to the root route.
+
+```tsx
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/about',
+  component: () => <h1>About</h1>,
+})
+```
+
+You will also need to add the route to the `routeTree` in the `./src/main.tsx` file.
+
+```tsx
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+```
+
+With this set up you should be able to navigate to `/about` and see the about page.
+
+Of course you don't need to implement the About page in the `main.tsx` file. You can create that component in another file and import it into the `main.tsx` file, then use it in the `component` property of the `createRoute` call, like so:
+
+```tsx
+import About from './components/About.tsx'
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/about',
+  component: About,
+})
+```
+
+That is how we have the `App` component set up with the home page.
+
+For more information on the options you have when you are creating code based routes check out the [Code Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/code-based-routing) documentation.
+
+Now that you have two routes you can use a `Link` component to navigate between them.
+
+### Adding Links
+
+To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
+
+```tsx
+import { Link } from '@tanstack/react-router'
+```
+
+Then anywhere in your JSX you can use it like so:
+
+```tsx
+<Link to="/about">About</Link>
+```
+
+This will create a link that will navigate to the `/about` route.
+
+More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
+
+### Using A Layout
+
+Layouts can be used to wrap the contents of the routes in menus, headers, footers, etc.
+
+There is already a layout in the `src/main.tsx` file:
+
+```tsx
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+
+You can use the React component specified in the `component` property of the `rootRoute` to wrap the contents of the routes. The `<Outlet />` component is used to render the current route within the body of the layout. For example you could add a header to the layout like so:
+
+```tsx
+import { Link } from '@tanstack/react-router'
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <header>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+        </nav>
+      </header>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+
+The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
+
+More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
+
+### Migrating To File Base Routing
+
+First you need to add the Vite plugin for Tanstack Router:
+
+```bash
+npm install @tanstack/router-plugin -D
+```
+
+From there you need to update your `vite.config.js` file to use the plugin:
+
+```ts
+import { defineConfig } from 'vite'
+import viteReact from '@vitejs/plugin-react'
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [TanStackRouterVite(), viteReact(), tailwindcss()],
+})
+```
+
+Now you'll need to rearrange your files a little bit. That starts with creating a `routes` directory in the `src` directory:
+
+```bash
+mkdir src/routes
+```
+
+Then you'll need to create a `src/routes/__root.tsx` file with the contents of the root route that was in `main.tsx`.
+
+```tsx
+import { Outlet, createRootRoute } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+
+Next up you'll need to move your home route code into `src/routes/index.tsx`
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+import logo from '../logo.svg'
+import '../App.css'
+
+export const Route = createFileRoute('/')({
+  component: App,
+})
+
+function App() {
+  return (
+    <div className="text-center">
+      <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]">
+        <img
+          src={logo}
+          className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
+          alt="logo"
+        />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <a
+          className="text-[#61dafb] hover:underline"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+        <a
+          className="text-[#61dafb] hover:underline"
+          href="https://tanstack.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn TanStack
+        </a>
+      </header>
+    </div>
+  )
+}
+```
+
+At this point you can delete `src/App.tsx`, you will no longer need it as the contents have moved into `src/routes/index.tsx`.
+
+The only additional code is the `createFileRoute` function that tells TanStack Router where to render the route. Helpfully the Vite plugin will keep the path argument that goes to `createFileRoute` automatically in sync with the file system.
+
+Finally the `src/main.tsx` file can be simplified down to this:
+
+```tsx
+import { StrictMode } from 'react'
+import ReactDOM from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+import './styles.css'
+import reportWebVitals from './reportWebVitals.ts'
+
+// Create a new router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  defaultPreloadStaleTime: 0,
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+})
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById('app')!
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+  )
+}
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals()
+```
+
+Now you've got a file based routing setup in your project! Let's have some fun with it! Just create a file in `about.tsx` in `src/routes` and it if the application is running TanStack will automatically add contents to the file and you'll have the start of your `/about` route ready to go with no additional work. You can see why folks find File Based Routing so easy to use.
+
+You can find out everything you need to know on how to use file based routing in the [File Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing) documentation.
+
+## Data Fetching
+
+There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
+
+For example:
+
+```tsx
+const peopleRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/people',
+  loader: async () => {
+    const response = await fetch('https://swapi.dev/api/people')
+    return response.json() as Promise<{
+      results: {
+        name: string
+      }[]
+    }>
+  },
+  component: () => {
+    const data = peopleRoute.useLoaderData()
+    return (
+      <ul>
+        {data.results.map((person) => (
+          <li key={person.name}>{person.name}</li>
+        ))}
+      </ul>
+    )
+  },
+})
+```
+
+Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
+
+### React-Query
+
+React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
+
+First add your dependencies:
+
+```bash
+npm install @tanstack/react-query @tanstack/react-query-devtools
+```
+
+Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
+
+```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+// ...
+
+const queryClient = new QueryClient()
+
+// ...
+
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+
+  root.render(
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>,
+  )
+}
+```
+
+You can also add TanStack Query Devtools to the root route (optional).
+
+```tsx
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <ReactQueryDevtools buttonPosition="top-right" />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+
+Now you can use `useQuery` to fetch your data.
+
+```tsx
+import { useQuery } from '@tanstack/react-query'
+
+import './App.css'
+
+function App() {
+  const { data } = useQuery({
+    queryKey: ['people'],
+    queryFn: () =>
+      fetch('https://swapi.dev/api/people')
+        .then((res) => res.json())
+        .then((data) => data.results as { name: string }[]),
+    initialData: [],
+  })
+
+  return (
+    <div>
+      <ul>
+        {data.map((person) => (
+          <li key={person.name}>{person.name}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default App
+```
+
+You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).
+
+## State Management
+
+Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.
+
+First you need to add TanStack Store as a dependency:
+
+```bash
+npm install @tanstack/store
+```
+
+Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
+
+```tsx
+import { useStore } from '@tanstack/react-store'
+import { Store } from '@tanstack/store'
+import './App.css'
+
+const countStore = new Store(0)
+
+function App() {
+  const count = useStore(countStore)
+  return (
+    <div>
+      <button onClick={() => countStore.setState((n) => n + 1)}>
+        Increment - {count}
+      </button>
+    </div>
+  )
+}
+
+export default App
+```
+
+One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
+
+Let's check this out by doubling the count using derived state.
+
+```tsx
+import { useStore } from '@tanstack/react-store'
+import { Store, Derived } from '@tanstack/store'
+import './App.css'
+
+const countStore = new Store(0)
+
+const doubledStore = new Derived({
+  fn: () => countStore.state * 2,
+  deps: [countStore],
+})
+doubledStore.mount()
+
+function App() {
+  const count = useStore(countStore)
+  const doubledCount = useStore(doubledStore)
+
+  return (
+    <div>
+      <button onClick={() => countStore.setState((n) => n + 1)}>
+        Increment - {count}
+      </button>
+      <div>Doubled - {doubledCount}</div>
+    </div>
+  )
+}
+
+export default App
+```
+
+We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.
+
+Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.
+
+You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
+
+# Demo files
+
+Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
+
+# Learn More
+
+You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).

package/web/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}