veslx 0.1.29 → 0.1.31

package/bin/lib/build.ts

@@ -86,6 +86,7 @@ export default async function buildApp(dir?: string) {
       ...fileConfig?.site,
     },
     slides: fileConfig?.slides,
+    posts: fileConfig?.posts,
   };
 
   const veslxRoot = new URL('../..', import.meta.url).pathname;

package/bin/lib/export.ts

@@ -124,6 +124,7 @@ export default async function exportToPdf(
         ...fileConfig?.site,
       },
       slides: fileConfig?.slides,
+      posts: fileConfig?.posts,
     }
 
     const veslxRoot = new URL('../..', import.meta.url).pathname

package/bin/lib/serve.ts

@@ -81,6 +81,7 @@ export default async function serve(dir?: string) {
       ...fileConfig?.site,
     },
     slides: fileConfig?.slides,
+    posts: fileConfig?.posts,
   };
 
   const veslxRoot = new URL('../..', import.meta.url).pathname;

package/dist/client/components/post-list.js

@@ -38,15 +38,17 @@ function PostList() {
     return /* @__PURE__ */ jsx("div", { className: "py-24 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground font-mono text-sm tracking-wide", children: "no entries" }) });
   }
   const sortMode = ((_a = veslxConfig.posts) == null ? void 0 : _a.sort) ?? "alpha";
-  if (sortMode === "date") {
+  if (sortMode === "date" || sortMode === "date-asc") {
+    const ascending = sortMode === "date-asc";
     posts = posts.sort((a, b) => {
       var _a2, _b;
       const dateA = (_a2 = getFrontmatter(a)) == null ? void 0 : _a2.date;
       const dateB = (_b = getFrontmatter(b)) == null ? void 0 : _b.date;
       if (!dateA && !dateB) return a.name.localeCompare(b.name);
-      if (!dateA) return 1;
-      if (!dateB) return -1;
-      return new Date(dateB).getTime() - new Date(dateA).getTime();
+      if (!dateA) return -1;
+      if (!dateB) return 1;
+      const diff = new Date(dateA).getTime() - new Date(dateB).getTime();
+      return ascending ? diff : -diff;
     });
   } else {
     posts = posts.sort((a, b) => a.name.localeCompare(b.name));

package/dist/client/components/post-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-list.js","sources":["../../../src/components/post-list.tsx"],"sourcesContent":["import { useParams } from \"react-router-dom\";\nimport {\n  type PostEntry,\n  directoryToPostEntries,\n  filterVisiblePosts,\n  getFrontmatter,\n} from \"@/lib/content-classification\";\nimport { useDirectory } from \"../../plugin/src/client\";\nimport { ErrorDisplay } from \"./page-error\";\nimport Loading from \"./loading\";\nimport { PostListItem } from \"./post-list-item\";\nimport veslxConfig from \"virtual:veslx-config\";\n\n// Helper to format name for display (e.g., \"01-getting-started\" → \"Getting Started\")\nfunction formatName(name: string): string {\n  return name\n    .replace(/^\\d+-/, '')\n    .replace(/-/g, ' ')\n    .replace(/\\b\\w/g, c => c.toUpperCase());\n}\n\n// Helper to get link path from post\nfunction getLinkPath(post: PostEntry): string {\n  if (post.file) {\n    // Standalone MDX file\n    return `/${post.file.path}`;\n  } else if (post.slides && !post.readme) {\n    // Folder with only slides\n    return `/${post.slides.path}`;\n  } else if (post.readme) {\n    // Folder with readme\n    return `/${post.readme.path}`;\n  } else {\n    // Fallback to folder path\n    return `/${post.path}`;\n  }\n}\n\nexport function PostList() {\n  const { \"*\": path = \".\" } = useParams();\n\n  const { directory, loading, error } = useDirectory(path)\n\n  if (error) {\n    return <ErrorDisplay error={error} path={path} />;\n  }\n\n  if (loading) {\n    return (\n      <Loading />\n    )\n  }\n\n  if (!directory) {\n    return (\n      <div className=\"py-24 text-center\">\n        <p className=\"text-muted-foreground font-mono text-sm tracking-wide\">no entries</p>\n      </div>\n    );\n  }\n\n  let posts = directoryToPostEntries(directory);\n\n  if (posts.length === 0) {\n    return (\n      <div className=\"py-24 text-center\">\n        <p className=\"text-muted-foreground font-mono text-sm tracking-wide\">no entries</p>\n      </div>\n    );\n  }\n\n  // Filter out hidden and draft posts\n  posts = filterVisiblePosts(posts);\n\n  if (posts.length === 0) {\n    return (\n      <div className=\"py-24 text-center\">\n        <p className=\"text-muted-foreground font-mono text-sm tracking-wide\">no entries</p>\n      </div>\n    );\n  }\n\n  // Sort based on config\n  const sortMode = veslxConfig.posts?.sort ?? 'alpha';\n  if (sortMode === 'date') {\n    // Sort by date descending (newest first), posts without dates go to the end\n    posts = posts.sort((a, b) => {\n      const dateA = getFrontmatter(a)?.date;\n      const dateB = getFrontmatter(b)?.date;\n      if (!dateA && !dateB) return a.name.localeCompare(b.name);\n      if (!dateA) return 1;\n      if (!dateB) return -1;\n      return new Date(dateB as string).getTime() - new Date(dateA as string).getTime();\n    });\n  } else {\n    // Alphanumeric sorting by name\n    posts = posts.sort((a, b) => a.name.localeCompare(b.name));\n  }\n\n  return (\n    <div className=\"space-y-1 not-prose\">\n      {posts.map((post) => {\n        const frontmatter = getFrontmatter(post);\n        const title = (frontmatter?.title as string) || formatName(post.name);\n        const description = frontmatter?.description as string | undefined;\n        const date = frontmatter?.date ? new Date(frontmatter.date as string) : undefined;\n        const linkPath = getLinkPath(post);\n        const isSlides = linkPath.endsWith('SLIDES.mdx') || linkPath.endsWith('.slides.mdx');\n\n        return (\n          <PostListItem\n            key={post.path}\n            title={title}\n            description={description}\n            date={date}\n            linkPath={linkPath}\n            isSlides={isSlides}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["_a"],"mappings":";;;;;;;AAcA,SAAS,WAAW,MAAsB;AACxC,SAAO,KACJ,QAAQ,SAAS,EAAE,EACnB,QAAQ,MAAM,GAAG,EACjB,QAAQ,SAAS,CAAA,MAAK,EAAE,aAAa;AAC1C;AAGA,SAAS,YAAY,MAAyB;AAC5C,MAAI,KAAK,MAAM;AAEb,WAAO,IAAI,KAAK,KAAK,IAAI;AAAA,EAC3B,WAAW,KAAK,UAAU,CAAC,KAAK,QAAQ;AAEtC,WAAO,IAAI,KAAK,OAAO,IAAI;AAAA,EAC7B,WAAW,KAAK,QAAQ;AAEtB,WAAO,IAAI,KAAK,OAAO,IAAI;AAAA,EAC7B,OAAO;AAEL,WAAO,IAAI,KAAK,IAAI;AAAA,EACtB;AACF;AAEO,SAAS,WAAW;;AACzB,QAAM,EAAE,KAAK,OAAO,IAAA,IAAQ,UAAA;AAE5B,QAAM,EAAE,WAAoB,UAAU,aAAa,IAAI;AAEvD,MAAI,OAAO;AACT,WAAO,oBAAC,cAAA,EAAa,OAAc,KAAA,CAAY;AAAA,EACjD;AAQA,MAAI,CAAC,WAAW;AACd,WACE,oBAAC,SAAI,WAAU,qBACb,8BAAC,KAAA,EAAE,WAAU,yDAAwD,UAAA,aAAA,CAAU,EAAA,CACjF;AAAA,EAEJ;AAEA,MAAI,QAAQ,uBAAuB,SAAS;AAE5C,MAAI,MAAM,WAAW,GAAG;AACtB,WACE,oBAAC,SAAI,WAAU,qBACb,8BAAC,KAAA,EAAE,WAAU,yDAAwD,UAAA,aAAA,CAAU,EAAA,CACjF;AAAA,EAEJ;AAGA,UAAQ,mBAAmB,KAAK;AAEhC,MAAI,MAAM,WAAW,GAAG;AACtB,WACE,oBAAC,SAAI,WAAU,qBACb,8BAAC,KAAA,EAAE,WAAU,yDAAwD,UAAA,aAAA,CAAU,EAAA,CACjF;AAAA,EAEJ;AAGA,QAAM,aAAW,iBAAY,UAAZ,mBAAmB,SAAQ;AAC5C,MAAI,aAAa,QAAQ;AAEvB,YAAQ,MAAM,KAAK,CAAC,GAAG,MAAM;;AAC3B,YAAM,SAAQA,MAAA,eAAe,CAAC,MAAhB,gBAAAA,IAAmB;AACjC,YAAM,SAAQ,oBAAe,CAAC,MAAhB,mBAAmB;AACjC,UAAI,CAAC,SAAS,CAAC,cAAc,EAAE,KAAK,cAAc,EAAE,IAAI;AACxD,UAAI,CAAC,MAAO,QAAO;AACnB,UAAI,CAAC,MAAO,QAAO;AACnB,aAAO,IAAI,KAAK,KAAe,EAAE,QAAA,IAAY,IAAI,KAAK,KAAe,EAAE,QAAA;AAAA,IACzE,CAAC;AAAA,EACH,OAAO;AAEL,YAAQ,MAAM,KAAK,CAAC,GAAG,MAAM,EAAE,KAAK,cAAc,EAAE,IAAI,CAAC;AAAA,EAC3D;AAEA,6BACG,OAAA,EAAI,WAAU,uBACZ,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,UAAM,cAAc,eAAe,IAAI;AACvC,UAAM,SAAS,2CAAa,UAAoB,WAAW,KAAK,IAAI;AACpE,UAAM,cAAc,2CAAa;AACjC,UAAM,QAAO,2CAAa,QAAO,IAAI,KAAK,YAAY,IAAc,IAAI;AACxE,UAAM,WAAW,YAAY,IAAI;AACjC,UAAM,WAAW,SAAS,SAAS,YAAY,KAAK,SAAS,SAAS,aAAa;AAEnF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MALK,KAAK;AAAA,IAAA;AAAA,EAQhB,CAAC,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"post-list.js","sources":["../../../src/components/post-list.tsx"],"sourcesContent":["import { useParams } from \"react-router-dom\";\nimport {\n  type PostEntry,\n  directoryToPostEntries,\n  filterVisiblePosts,\n  getFrontmatter,\n} from \"@/lib/content-classification\";\nimport { useDirectory } from \"../../plugin/src/client\";\nimport { ErrorDisplay } from \"./page-error\";\nimport Loading from \"./loading\";\nimport { PostListItem } from \"./post-list-item\";\nimport veslxConfig from \"virtual:veslx-config\";\n\n// Helper to format name for display (e.g., \"01-getting-started\" → \"Getting Started\")\nfunction formatName(name: string): string {\n  return name\n    .replace(/^\\d+-/, '')\n    .replace(/-/g, ' ')\n    .replace(/\\b\\w/g, c => c.toUpperCase());\n}\n\n// Helper to get link path from post\nfunction getLinkPath(post: PostEntry): string {\n  if (post.file) {\n    // Standalone MDX file\n    return `/${post.file.path}`;\n  } else if (post.slides && !post.readme) {\n    // Folder with only slides\n    return `/${post.slides.path}`;\n  } else if (post.readme) {\n    // Folder with readme\n    return `/${post.readme.path}`;\n  } else {\n    // Fallback to folder path\n    return `/${post.path}`;\n  }\n}\n\nexport function PostList() {\n  const { \"*\": path = \".\" } = useParams();\n\n  const { directory, loading, error } = useDirectory(path)\n\n  if (error) {\n    return <ErrorDisplay error={error} path={path} />;\n  }\n\n  if (loading) {\n    return (\n      <Loading />\n    )\n  }\n\n  if (!directory) {\n    return (\n      <div className=\"py-24 text-center\">\n        <p className=\"text-muted-foreground font-mono text-sm tracking-wide\">no entries</p>\n      </div>\n    );\n  }\n\n  let posts = directoryToPostEntries(directory);\n\n  if (posts.length === 0) {\n    return (\n      <div className=\"py-24 text-center\">\n        <p className=\"text-muted-foreground font-mono text-sm tracking-wide\">no entries</p>\n      </div>\n    );\n  }\n\n  // Filter out hidden and draft posts\n  posts = filterVisiblePosts(posts);\n\n  if (posts.length === 0) {\n    return (\n      <div className=\"py-24 text-center\">\n        <p className=\"text-muted-foreground font-mono text-sm tracking-wide\">no entries</p>\n      </div>\n    );\n  }\n\n  // Sort based on config\n  const sortMode = veslxConfig.posts?.sort ?? 'alpha';\n  if (sortMode === 'date' || sortMode === 'date-asc') {\n    const ascending = sortMode === 'date-asc';\n    // Sort by date, posts without dates go to the top\n    posts = posts.sort((a, b) => {\n      const dateA = getFrontmatter(a)?.date;\n      const dateB = getFrontmatter(b)?.date;\n      if (!dateA && !dateB) return a.name.localeCompare(b.name);\n      if (!dateA) return -1;\n      if (!dateB) return 1;\n      const diff = new Date(dateA as string).getTime() - new Date(dateB as string).getTime();\n      return ascending ? diff : -diff;\n    });\n  } else {\n    // Alphanumeric sorting by name\n    posts = posts.sort((a, b) => a.name.localeCompare(b.name));\n  }\n\n  return (\n    <div className=\"space-y-1 not-prose\">\n      {posts.map((post) => {\n        const frontmatter = getFrontmatter(post);\n        const title = (frontmatter?.title as string) || formatName(post.name);\n        const description = frontmatter?.description as string | undefined;\n        const date = frontmatter?.date ? new Date(frontmatter.date as string) : undefined;\n        const linkPath = getLinkPath(post);\n        const isSlides = linkPath.endsWith('SLIDES.mdx') || linkPath.endsWith('.slides.mdx');\n\n        return (\n          <PostListItem\n            key={post.path}\n            title={title}\n            description={description}\n            date={date}\n            linkPath={linkPath}\n            isSlides={isSlides}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["_a"],"mappings":";;;;;;;AAcA,SAAS,WAAW,MAAsB;AACxC,SAAO,KACJ,QAAQ,SAAS,EAAE,EACnB,QAAQ,MAAM,GAAG,EACjB,QAAQ,SAAS,CAAA,MAAK,EAAE,aAAa;AAC1C;AAGA,SAAS,YAAY,MAAyB;AAC5C,MAAI,KAAK,MAAM;AAEb,WAAO,IAAI,KAAK,KAAK,IAAI;AAAA,EAC3B,WAAW,KAAK,UAAU,CAAC,KAAK,QAAQ;AAEtC,WAAO,IAAI,KAAK,OAAO,IAAI;AAAA,EAC7B,WAAW,KAAK,QAAQ;AAEtB,WAAO,IAAI,KAAK,OAAO,IAAI;AAAA,EAC7B,OAAO;AAEL,WAAO,IAAI,KAAK,IAAI;AAAA,EACtB;AACF;AAEO,SAAS,WAAW;;AACzB,QAAM,EAAE,KAAK,OAAO,IAAA,IAAQ,UAAA;AAE5B,QAAM,EAAE,WAAoB,UAAU,aAAa,IAAI;AAEvD,MAAI,OAAO;AACT,WAAO,oBAAC,cAAA,EAAa,OAAc,KAAA,CAAY;AAAA,EACjD;AAQA,MAAI,CAAC,WAAW;AACd,WACE,oBAAC,SAAI,WAAU,qBACb,8BAAC,KAAA,EAAE,WAAU,yDAAwD,UAAA,aAAA,CAAU,EAAA,CACjF;AAAA,EAEJ;AAEA,MAAI,QAAQ,uBAAuB,SAAS;AAE5C,MAAI,MAAM,WAAW,GAAG;AACtB,WACE,oBAAC,SAAI,WAAU,qBACb,8BAAC,KAAA,EAAE,WAAU,yDAAwD,UAAA,aAAA,CAAU,EAAA,CACjF;AAAA,EAEJ;AAGA,UAAQ,mBAAmB,KAAK;AAEhC,MAAI,MAAM,WAAW,GAAG;AACtB,WACE,oBAAC,SAAI,WAAU,qBACb,8BAAC,KAAA,EAAE,WAAU,yDAAwD,UAAA,aAAA,CAAU,EAAA,CACjF;AAAA,EAEJ;AAGA,QAAM,aAAW,iBAAY,UAAZ,mBAAmB,SAAQ;AAC5C,MAAI,aAAa,UAAU,aAAa,YAAY;AAClD,UAAM,YAAY,aAAa;AAE/B,YAAQ,MAAM,KAAK,CAAC,GAAG,MAAM;;AAC3B,YAAM,SAAQA,MAAA,eAAe,CAAC,MAAhB,gBAAAA,IAAmB;AACjC,YAAM,SAAQ,oBAAe,CAAC,MAAhB,mBAAmB;AACjC,UAAI,CAAC,SAAS,CAAC,cAAc,EAAE,KAAK,cAAc,EAAE,IAAI;AACxD,UAAI,CAAC,MAAO,QAAO;AACnB,UAAI,CAAC,MAAO,QAAO;AACnB,YAAM,OAAO,IAAI,KAAK,KAAe,EAAE,QAAA,IAAY,IAAI,KAAK,KAAe,EAAE,QAAA;AAC7E,aAAO,YAAY,OAAO,CAAC;AAAA,IAC7B,CAAC;AAAA,EACH,OAAO;AAEL,YAAQ,MAAM,KAAK,CAAC,GAAG,MAAM,EAAE,KAAK,cAAc,EAAE,IAAI,CAAC;AAAA,EAC3D;AAEA,6BACG,OAAA,EAAI,WAAU,uBACZ,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,UAAM,cAAc,eAAe,IAAI;AACvC,UAAM,SAAS,2CAAa,UAAoB,WAAW,KAAK,IAAI;AACpE,UAAM,cAAc,2CAAa;AACjC,UAAM,QAAO,2CAAa,QAAO,IAAI,KAAK,YAAY,IAAc,IAAI;AACxE,UAAM,WAAW,YAAY,IAAI;AACjC,UAAM,WAAW,SAAS,SAAS,YAAY,KAAK,SAAS,SAAS,aAAa;AAEnF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MALK,KAAK;AAAA,IAAA;AAAA,EAQhB,CAAC,EAAA,CACH;AAEJ;"}

package/package.json

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

package/plugin/src/plugin.ts

@@ -281,33 +281,15 @@ export default function contentPlugin(contentDir: string, config?: VeslxConfig,
     next()
   }
 
+  // Virtual module ID for the modified CSS
+  const VIRTUAL_CSS_MODULE = '\0veslx:index.css'
+
   return {
     name: 'content',
     enforce: 'pre',
 
-    // Inject @source directive for Tailwind to scan content directory for classes
-    transform(code, id) {
-      // Only process CSS files containing the tailwindcss import
-      if (!id.endsWith('.css')) return null
-      if (!code.includes('@import "tailwindcss"')) return null
-
-      // Calculate relative path from CSS file to content directory
-      const cssDir = path.dirname(id)
-      let relativeContentDir = path.relative(cssDir, dir)
-      relativeContentDir = relativeContentDir.replace(/\\/g, '/') // Windows compatibility
-
-      // Inject @source directive after the tailwindcss import
-      const sourceDirective = `@source "${relativeContentDir}";`
-      const modified = code.replace(
-        /(@import\s+["']tailwindcss["'];?)/,
-        `$1\n${sourceDirective}`
-      )
-
-      return { code: modified, map: null }
-    },
-
     // Inject @content alias and fs.allow into Vite config
-    config() {
+    config(config, { command }) {
       return {
         resolve: {
           alias: {
@@ -325,8 +307,18 @@ export default function contentPlugin(contentDir: string, config?: VeslxConfig,
       }
     },
 
-    // Virtual modules for content MDX imports and site config
-    resolveId(id) {
+    // Intercept CSS and virtual module imports
+    resolveId(id, importer) {
+      // Intercept index.css imported from main.tsx and redirect to our virtual module
+      // This allows us to inject @source directive for Tailwind to scan user content
+      if (id === './index.css' && importer?.endsWith('/src/main.tsx')) {
+        return VIRTUAL_CSS_MODULE
+      }
+      // Also catch the resolved path
+      if (id.endsWith('/src/index.css') && !id.startsWith('\0')) {
+        return VIRTUAL_CSS_MODULE
+      }
+      // Virtual modules for content
       if (id === VIRTUAL_MODULE_ID) {
         return RESOLVED_VIRTUAL_MODULE_ID
       }
@@ -336,6 +328,28 @@ export default function contentPlugin(contentDir: string, config?: VeslxConfig,
     },
 
     load(id) {
+      // Serve the modified CSS content with @source directive
+      // This enables Tailwind v4 to scan the user's content directory for classes
+      if (id === VIRTUAL_CSS_MODULE) {
+        // Read the original CSS
+        const veslxRoot = path.dirname(path.dirname(__dirname))
+        const cssPath = path.join(veslxRoot, 'src/index.css')
+        const cssContent = fs.readFileSync(cssPath, 'utf-8')
+
+        // Use absolute path for @source directive
+        const absoluteContentDir = dir.replace(/\\/g, '/')
+
+        // Inject @source directive after the tailwindcss import
+        const sourceDirective = `@source "${absoluteContentDir}";`
+        const modified = cssContent.replace(
+          /(@import\s+["']tailwindcss["'];?)/,
+          `$1\n${sourceDirective}`
+        )
+
+        return modified
+      }
+
+      // Virtual module for content
       if (id === RESOLVED_VIRTUAL_MODULE_ID) {
         // Extract frontmatter from MDX files at build time (avoids MDX hook issues)
         const frontmatterData = extractFrontmatters(dir);

package/plugin/src/types.ts

@@ -3,7 +3,7 @@ export interface SlidesConfig {
 }
 
 export interface PostsConfig {
-  sort?: 'date' | 'alpha';
+  sort?: 'date' | 'date-asc' | 'alpha';
 }
 
 export interface SiteConfig {
@@ -26,7 +26,7 @@ export interface ResolvedSlidesConfig {
 }
 
 export interface ResolvedPostsConfig {
-  sort: 'date' | 'alpha';
+  sort: 'date' | 'date-asc' | 'alpha';
 }
 
 export interface ResolvedSiteConfig {

package/src/components/post-list.tsx

@@ -82,15 +82,17 @@ export function PostList() {
 
   // Sort based on config
   const sortMode = veslxConfig.posts?.sort ?? 'alpha';
-  if (sortMode === 'date') {
-    // Sort by date descending (newest first), posts without dates go to the end
+  if (sortMode === 'date' || sortMode === 'date-asc') {
+    const ascending = sortMode === 'date-asc';
+    // Sort by date, posts without dates go to the top
     posts = posts.sort((a, b) => {
       const dateA = getFrontmatter(a)?.date;
       const dateB = getFrontmatter(b)?.date;
       if (!dateA && !dateB) return a.name.localeCompare(b.name);
-      if (!dateA) return 1;
-      if (!dateB) return -1;
-      return new Date(dateB as string).getTime() - new Date(dateA as string).getTime();
+      if (!dateA) return -1;
+      if (!dateB) return 1;
+      const diff = new Date(dateA as string).getTime() - new Date(dateB as string).getTime();
+      return ascending ? diff : -diff;
     });
   } else {
     // Alphanumeric sorting by name