veslx 0.1.42 → 0.1.43

package/README.md

@@ -32,7 +32,7 @@ bun install -g veslx
 veslx serve
 ```
 
-That's it. Your docs are live at `localhost:3000`.
+That's it. Your docs are live at `localhost:3000` (or the next available port).
 
 ---
 
@@ -77,7 +77,7 @@ cd docs
 veslx serve
 ```
 
-Open [localhost:3000](http://localhost:3000). Done.
+Open the URL printed in the console (defaults to [localhost:3000](http://localhost:3000)). Done.
 
 ---
 
@@ -100,7 +100,7 @@ Open [localhost:3000](http://localhost:3000). Done.
 
 ## Content Structure
 
-veslx scans your directory for `README.mdx` (posts) and `SLIDES.mdx` (presentations):
+veslx scans your directory for `README.mdx` or `index.mdx` (docs) and `SLIDES.mdx` or `*.slides.mdx` (presentations):
 
 ```
 content/
@@ -115,6 +115,18 @@ content/
     └── README.mdx
 ```
 
+### Custom Homepage
+
+Put `README.mdx` (or `index.mdx`) at the root to replace the default homepage. A common pattern is to use `<PostList />` with `globs` to group content:
+
+```mdx
+# Docs
+<PostList globs={["00-*", "01-*"]} />
+
+# Guides
+<PostList globs={["guides/*"]} />
+```
+
 ### Frontmatter
 
 ```yaml
@@ -244,7 +256,7 @@ Each slide becomes one PDF page, centered and optimized for print.
 ## CLI Commands
 
 ```bash
-veslx init      # Create veslx.config.ts
+veslx init      # Create veslx.yaml
 veslx serve     # Start dev server with hot reload
 veslx build     # Build for production → dist/
 veslx start     # Run as background daemon (PM2)
@@ -255,12 +267,14 @@ veslx stop      # Stop the daemon
 
 ## Configuration
 
-Create `veslx.config.ts` in your content root:
+Create `veslx.yaml` in your content root:
 
-```typescript
-export default {
-  dir: './content',  // Content directory (default: current dir)
-}
+```yaml
+dir: content  # Content directory (default: .)
+site:
+  name: My Project
+  description: Project documentation
+  github: myorg/myproject
 ```
 
 Or run `veslx init` to generate it.
@@ -307,7 +321,7 @@ veslx/
 │   ├── hooks/        # React hooks
 │   ├── pages/        # Route pages
 │   └── lib/          # Utilities
-└── test-content/     # Example content for testing
+└── content/          # Docs and examples used for the site
 ```
 
 ---

package/bin/lib/serve.ts

@@ -33,6 +33,37 @@ async function getDefaultConfig(cwd: string) {
   };
 }
 
+function isAddressInUse(err: unknown) {
+  if (!err || typeof err !== 'object') return false;
+  const anyErr = err as { code?: string; message?: string };
+  if (anyErr.code === 'EADDRINUSE') return true;
+  return typeof anyErr.message === 'string' && anyErr.message.includes('already in use');
+}
+
+async function listenWithFallback(server: Awaited<ReturnType<typeof createServer>>) {
+  const startPort = server.config.server.port ?? 3000;
+  const maxAttempts = 50;
+
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    const port = startPort + attempt;
+    try {
+      await server.listen(port);
+      const address = server.httpServer?.address();
+      const resolvedPort = typeof address === 'object' && address ? address.port : port;
+      log.success(`listening :${resolvedPort}`);
+      return;
+    } catch (err: any) {
+      if (!isAddressInUse(err)) {
+        throw err;
+      }
+      log.info(`busy :${port} → :${port + 1}`);
+    }
+  }
+
+  log.error(`no available ports from ${startPort} to ${startPort + maxAttempts - 1}`);
+  process.exit(1);
+}
+
 export default async function serve(dir?: string) {
   const cwd = process.cwd()
 
@@ -82,6 +113,9 @@ export default async function serve(dir?: string) {
   const server = await createServer({
     root: veslxRoot,
     configFile,
+    server: {
+      strictPort: true,
+    },
     // Cache in user's project so it persists across bunx runs
     cacheDir: path.join(cwd, 'node_modules/.vite'),
     plugins: [
@@ -89,15 +123,7 @@ export default async function serve(dir?: string) {
     ],
   })
 
-  try {
-    await server.listen()
-  } catch (err: any) {
-    if (err?.code === 'EADDRINUSE') {
-      log.error(`port already in use`)
-      process.exit(1)
-    }
-    throw err
-  }
+  await listenWithFallback(server);
 
   const info = server.resolvedUrls
   if (info?.local[0]) {

package/dist/client/components/gallery/index.js

@@ -103,7 +103,7 @@ function Gallery({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("figure", { className: `not-prose relative py-6 md:py-8 ${shouldBreakOut ? isTwo ? "w-[75vw] ml-[calc(-37.5vw+50%)]" : isCompact ? "w-[96vw] ml-[calc(-48vw+50%)]" : "w-[var(--gallery-width)] ml-[calc(-45vw+50%)]" : ""}`, children: [
       !isSingleWithChildren && !isSingle && /* @__PURE__ */ jsx("div", { className: "max-w-[var(--content-width)] mx-auto px-[var(--page-padding)]", children: /* @__PURE__ */ jsx(FigureHeader, { title, subtitle }) }),
-      isSingleWithChildren ? /* @__PURE__ */ jsxs("div", { className: `grid items-start gap-10 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] ${childAlign === "left" ? "" : "md:[&>div:first-child]:order-2"}`, children: [
+      isSingleWithChildren ? /* @__PURE__ */ jsxs("div", { className: `grid items-start gap-12 md:gap-16 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] ${childAlign === "left" ? "" : "md:[&>div:first-child]:order-2"}`, children: [
         /* @__PURE__ */ jsx("div", { className: "min-w-0 self-center text-sm leading-relaxed text-foreground/90 space-y-3 [&>ul]:space-y-1.5 [&>ul]:list-disc [&>ul]:pl-5 [&>ol]:space-y-1.5 [&>ol]:list-decimal [&>ol]:pl-5", children }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx(FigureHeader, { title, subtitle }),

package/dist/client/components/gallery/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/gallery/index.tsx"],"sourcesContent":["import { useMemo, useRef, useEffect } from \"react\";\nimport { Image } from \"lucide-react\";\nimport { Lightbox, LightboxImage } from \"@/components/gallery/components/lightbox\";\nimport { useGalleryImages } from \"./hooks/use-gallery-images\";\nimport { useLightbox } from \"./hooks/use-lightbox\";\nimport { LoadingImage } from \"./components/loading-image\";\nimport { FigureHeader } from \"./components/figure-header\";\nimport { FigureCaption } from \"./components/figure-caption\";\n\n/**\n * Hook to prevent horizontal scroll from triggering browser back/forward gestures.\n * Captures wheel events and prevents default when at scroll boundaries.\n */\nfunction usePreventSwipeNavigation(ref: React.RefObject<HTMLElement | null>) {\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const handleWheel = (e: WheelEvent) => {\n      // Only handle horizontal scrolling\n      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;\n\n      const { scrollLeft, scrollWidth, clientWidth } = el;\n      const atLeftEdge = scrollLeft <= 0;\n      const atRightEdge = scrollLeft + clientWidth >= scrollWidth - 1;\n\n      // Prevent default if trying to scroll past boundaries\n      if ((atLeftEdge && e.deltaX < 0) || (atRightEdge && e.deltaX > 0)) {\n        e.preventDefault();\n      }\n    };\n\n    el.addEventListener('wheel', handleWheel, { passive: false });\n    return () => el.removeEventListener('wheel', handleWheel);\n  }, [ref]);\n}\n\nfunction getImageLabel(path: string): string {\n  const filename = path.split('/').pop() || path;\n  return filename\n    .replace(/\\.(png|jpg|jpeg|gif|svg|webp)$/i, '')\n    .replace(/[_-]/g, ' ')\n    .replace(/\\s+/g, ' ')\n    .trim();\n}\n\nfunction getImageUrl(path: string): string {\n  return `/raw/${path}`;\n}\n\nexport default function Gallery({\n  path,\n  globs = null,\n  caption,\n  captionLabel,\n  title,\n  subtitle,\n  limit = null,\n  page = 0,\n  children,\n  childAlign = \"right\",\n}: {\n  path?: string;\n  globs?: string[] | null;\n  caption?: string;\n  captionLabel?: string;\n  title?: string;\n  subtitle?: string;\n  limit?: number | null;\n  page?: number;\n  children?: React.ReactNode;\n  childAlign?: \"left\" | \"right\";\n}) {\n  const { paths, isLoading, isEmpty } = useGalleryImages({\n    path,\n    globs,\n    limit,\n    page: page,\n  });\n\n  const lightbox = useLightbox(paths.length);\n  const scrollRef = useRef<HTMLDivElement>(null);\n  usePreventSwipeNavigation(scrollRef);\n\n  const images: LightboxImage[] = useMemo(() =>\n    paths.map(p => ({ src: getImageUrl(p), label: getImageLabel(p) })),\n    [paths]\n  );\n\n  if (isLoading) {\n    return (\n      <figure className=\"not-prose py-6 md:py-8\">\n        <div className=\"grid grid-cols-3 gap-3 max-w-[var(--gallery-width)] mx-auto\">\n          {[...Array(3)].map((_, i) => (\n            <div\n              key={i}\n              className=\"aspect-square rounded-sm bg-muted/20 relative overflow-hidden\"\n            >\n              <div\n                className=\"absolute inset-0 bg-gradient-to-r from-transparent via-muted/30 to-transparent animate-shimmer\"\n                style={{ animationDelay: `${i * 150}ms` }}\n              />\n            </div>\n          ))}\n        </div>\n      </figure>\n    );\n  }\n\n  if (isEmpty) {\n    return (\n      <figure className=\"not-prose py-12 text-center\">\n        <div className=\"inline-flex items-center gap-2.5 text-muted-foreground/40\">\n          <Image className=\"h-3.5 w-3.5\" strokeWidth={1.5} />\n          <span className=\"font-mono text-xs uppercase tracking-widest\">No images</span>\n        </div>\n      </figure>\n    );\n  }\n\n  const isSingle = images.length === 1;\n  const isTwo = images.length === 2;\n  const isCompact = images.length <= 3;\n  const isSingleWithChildren = images.length === 1 && children;\n  // 2-3 images should break out of the content width\n  const shouldBreakOut = images.length >= 2;\n\n  const imageElement = (index: number, img: LightboxImage, className?: string) => (\n    <div\n      key={index}\n      title={img.label}\n      className={`aspect-square overflow-hidden rounded-sm bg-muted/10 cursor-pointer group ${className || ''}`}\n      onClick={() => lightbox.open(index)}\n    >\n      <LoadingImage\n        src={img.src}\n        alt={img.label}\n        className=\"object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]\"\n      />\n    </div>\n  );\n\n  return (\n    <>\n      <figure className={`not-prose relative py-6 md:py-8 ${shouldBreakOut ? (isTwo ? 'w-[75vw] ml-[calc(-37.5vw+50%)]' : isCompact ? 'w-[96vw] ml-[calc(-48vw+50%)]' : 'w-[var(--gallery-width)] ml-[calc(-45vw+50%)]') : ''}`}>\n        {!isSingleWithChildren && !isSingle && (\n          <div className=\"max-w-[var(--content-width)] mx-auto px-[var(--page-padding)]\">\n            <FigureHeader title={title} subtitle={subtitle} />\n          </div>\n        )}\n\n        {isSingleWithChildren ? (\n          <div className={`grid items-start gap-10 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] ${childAlign === 'left' ? '' : 'md:[&>div:first-child]:order-2'}`}>\n            <div className=\"min-w-0 self-center text-sm leading-relaxed text-foreground/90 space-y-3 [&>ul]:space-y-1.5 [&>ul]:list-disc [&>ul]:pl-5 [&>ol]:space-y-1.5 [&>ol]:list-decimal [&>ol]:pl-5\">\n              {children}\n            </div>\n            <div className=\"min-w-0\">\n              <FigureHeader title={title} subtitle={subtitle} />\n              {imageElement(0, images[0])}\n              <FigureCaption caption={caption} label={captionLabel} />\n            </div>\n          </div>\n        ) : isSingle ? (\n          <div className=\"max-w-[70%] mx-auto\">\n            <FigureHeader title={title} subtitle={subtitle} />\n            {imageElement(0, images[0])}\n            <FigureCaption caption={caption} label={captionLabel} />\n          </div>\n        ) : isCompact ? (\n          <div className=\"flex gap-3\">\n            {images.map((img, index) => imageElement(index, img, 'flex-1'))}\n          </div>\n        ) : (\n          <div ref={scrollRef} className=\"flex gap-3 overflow-x-auto overscroll-x-contain pb-4\">\n            {images.map((img, index) => (\n              <div\n                key={index}\n                title={img.label}\n                className=\"flex-none w-[30%] min-w-[250px] aspect-square overflow-hidden rounded-sm bg-muted/10 cursor-pointer group\"\n                onClick={() => lightbox.open(index)}\n              >\n                <LoadingImage\n                  src={img.src}\n                  alt={img.label}\n                  className=\"object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]\"\n                />\n              </div>\n            ))}\n          </div>\n        )}\n\n        {!isSingleWithChildren && !isSingle && (\n          <div className=\"max-w-[var(--content-width)] mx-auto px-[var(--page-padding)]\">\n            <FigureCaption caption={caption} label={captionLabel} />\n          </div>\n        )}\n      </figure>\n\n      {lightbox.isOpen && lightbox.selectedIndex !== null && (\n        <Lightbox\n          images={images}\n          selectedIndex={lightbox.selectedIndex}\n          onClose={lightbox.close}\n          onPrevious={lightbox.goToPrevious}\n          onNext={lightbox.goToNext}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/gallery/index.tsx"],"sourcesContent":["import { useMemo, useRef, useEffect } from \"react\";\nimport { Image } from \"lucide-react\";\nimport { Lightbox, LightboxImage } from \"@/components/gallery/components/lightbox\";\nimport { useGalleryImages } from \"./hooks/use-gallery-images\";\nimport { useLightbox } from \"./hooks/use-lightbox\";\nimport { LoadingImage } from \"./components/loading-image\";\nimport { FigureHeader } from \"./components/figure-header\";\nimport { FigureCaption } from \"./components/figure-caption\";\n\n/**\n * Hook to prevent horizontal scroll from triggering browser back/forward gestures.\n * Captures wheel events and prevents default when at scroll boundaries.\n */\nfunction usePreventSwipeNavigation(ref: React.RefObject<HTMLElement | null>) {\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const handleWheel = (e: WheelEvent) => {\n      // Only handle horizontal scrolling\n      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;\n\n      const { scrollLeft, scrollWidth, clientWidth } = el;\n      const atLeftEdge = scrollLeft <= 0;\n      const atRightEdge = scrollLeft + clientWidth >= scrollWidth - 1;\n\n      // Prevent default if trying to scroll past boundaries\n      if ((atLeftEdge && e.deltaX < 0) || (atRightEdge && e.deltaX > 0)) {\n        e.preventDefault();\n      }\n    };\n\n    el.addEventListener('wheel', handleWheel, { passive: false });\n    return () => el.removeEventListener('wheel', handleWheel);\n  }, [ref]);\n}\n\nfunction getImageLabel(path: string): string {\n  const filename = path.split('/').pop() || path;\n  return filename\n    .replace(/\\.(png|jpg|jpeg|gif|svg|webp)$/i, '')\n    .replace(/[_-]/g, ' ')\n    .replace(/\\s+/g, ' ')\n    .trim();\n}\n\nfunction getImageUrl(path: string): string {\n  return `/raw/${path}`;\n}\n\nexport default function Gallery({\n  path,\n  globs = null,\n  caption,\n  captionLabel,\n  title,\n  subtitle,\n  limit = null,\n  page = 0,\n  children,\n  childAlign = \"right\",\n}: {\n  path?: string;\n  globs?: string[] | null;\n  caption?: string;\n  captionLabel?: string;\n  title?: string;\n  subtitle?: string;\n  limit?: number | null;\n  page?: number;\n  children?: React.ReactNode;\n  childAlign?: \"left\" | \"right\";\n}) {\n  const { paths, isLoading, isEmpty } = useGalleryImages({\n    path,\n    globs,\n    limit,\n    page: page,\n  });\n\n  const lightbox = useLightbox(paths.length);\n  const scrollRef = useRef<HTMLDivElement>(null);\n  usePreventSwipeNavigation(scrollRef);\n\n  const images: LightboxImage[] = useMemo(() =>\n    paths.map(p => ({ src: getImageUrl(p), label: getImageLabel(p) })),\n    [paths]\n  );\n\n  if (isLoading) {\n    return (\n      <figure className=\"not-prose py-6 md:py-8\">\n        <div className=\"grid grid-cols-3 gap-3 max-w-[var(--gallery-width)] mx-auto\">\n          {[...Array(3)].map((_, i) => (\n            <div\n              key={i}\n              className=\"aspect-square rounded-sm bg-muted/20 relative overflow-hidden\"\n            >\n              <div\n                className=\"absolute inset-0 bg-gradient-to-r from-transparent via-muted/30 to-transparent animate-shimmer\"\n                style={{ animationDelay: `${i * 150}ms` }}\n              />\n            </div>\n          ))}\n        </div>\n      </figure>\n    );\n  }\n\n  if (isEmpty) {\n    return (\n      <figure className=\"not-prose py-12 text-center\">\n        <div className=\"inline-flex items-center gap-2.5 text-muted-foreground/40\">\n          <Image className=\"h-3.5 w-3.5\" strokeWidth={1.5} />\n          <span className=\"font-mono text-xs uppercase tracking-widest\">No images</span>\n        </div>\n      </figure>\n    );\n  }\n\n  const isSingle = images.length === 1;\n  const isTwo = images.length === 2;\n  const isCompact = images.length <= 3;\n  const isSingleWithChildren = images.length === 1 && children;\n  // 2-3 images should break out of the content width\n  const shouldBreakOut = images.length >= 2;\n\n  const imageElement = (index: number, img: LightboxImage, className?: string) => (\n    <div\n      key={index}\n      title={img.label}\n      className={`aspect-square overflow-hidden rounded-sm bg-muted/10 cursor-pointer group ${className || ''}`}\n      onClick={() => lightbox.open(index)}\n    >\n      <LoadingImage\n        src={img.src}\n        alt={img.label}\n        className=\"object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]\"\n      />\n    </div>\n  );\n\n  return (\n    <>\n      <figure className={`not-prose relative py-6 md:py-8 ${shouldBreakOut ? (isTwo ? 'w-[75vw] ml-[calc(-37.5vw+50%)]' : isCompact ? 'w-[96vw] ml-[calc(-48vw+50%)]' : 'w-[var(--gallery-width)] ml-[calc(-45vw+50%)]') : ''}`}>\n        {!isSingleWithChildren && !isSingle && (\n          <div className=\"max-w-[var(--content-width)] mx-auto px-[var(--page-padding)]\">\n            <FigureHeader title={title} subtitle={subtitle} />\n          </div>\n        )}\n\n        {isSingleWithChildren ? (\n          <div className={`grid items-start gap-12 md:gap-16 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] ${childAlign === 'left' ? '' : 'md:[&>div:first-child]:order-2'}`}>\n            <div className=\"min-w-0 self-center text-sm leading-relaxed text-foreground/90 space-y-3 [&>ul]:space-y-1.5 [&>ul]:list-disc [&>ul]:pl-5 [&>ol]:space-y-1.5 [&>ol]:list-decimal [&>ol]:pl-5\">\n              {children}\n            </div>\n            <div className=\"min-w-0\">\n              <FigureHeader title={title} subtitle={subtitle} />\n              {imageElement(0, images[0])}\n              <FigureCaption caption={caption} label={captionLabel} />\n            </div>\n          </div>\n        ) : isSingle ? (\n          <div className=\"max-w-[70%] mx-auto\">\n            <FigureHeader title={title} subtitle={subtitle} />\n            {imageElement(0, images[0])}\n            <FigureCaption caption={caption} label={captionLabel} />\n          </div>\n        ) : isCompact ? (\n          <div className=\"flex gap-3\">\n            {images.map((img, index) => imageElement(index, img, 'flex-1'))}\n          </div>\n        ) : (\n          <div ref={scrollRef} className=\"flex gap-3 overflow-x-auto overscroll-x-contain pb-4\">\n            {images.map((img, index) => (\n              <div\n                key={index}\n                title={img.label}\n                className=\"flex-none w-[30%] min-w-[250px] aspect-square overflow-hidden rounded-sm bg-muted/10 cursor-pointer group\"\n                onClick={() => lightbox.open(index)}\n              >\n                <LoadingImage\n                  src={img.src}\n                  alt={img.label}\n                  className=\"object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]\"\n                />\n              </div>\n            ))}\n          </div>\n        )}\n\n        {!isSingleWithChildren && !isSingle && (\n          <div className=\"max-w-[var(--content-width)] mx-auto px-[var(--page-padding)]\">\n            <FigureCaption caption={caption} label={captionLabel} />\n          </div>\n        )}\n      </figure>\n\n      {lightbox.isOpen && lightbox.selectedIndex !== null && (\n        <Lightbox\n          images={images}\n          selectedIndex={lightbox.selectedIndex}\n          onClose={lightbox.close}\n          onPrevious={lightbox.goToPrevious}\n          onNext={lightbox.goToNext}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/client/package.json.js

@@ -1,4 +1,4 @@
-const version = "0.1.42";
+const version = "0.1.43";
 const packageJson = {
   version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veslx",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/gallery/index.tsx

@@ -150,7 +150,7 @@ export default function Gallery({
         )}
 
         {isSingleWithChildren ? (
-          <div className={`grid items-start gap-10 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] ${childAlign === 'left' ? '' : 'md:[&>div:first-child]:order-2'}`}>
+          <div className={`grid items-start gap-12 md:gap-16 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] ${childAlign === 'left' ? '' : 'md:[&>div:first-child]:order-2'}`}>
             <div className="min-w-0 self-center text-sm leading-relaxed text-foreground/90 space-y-3 [&>ul]:space-y-1.5 [&>ul]:list-disc [&>ul]:pl-5 [&>ol]:space-y-1.5 [&>ol]:list-decimal [&>ol]:pl-5">
               {children}
             </div>