@vxrn/mdx 1.2.53 → 1.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vxrn/mdx",
-  "version": "1.2.53",
+  "version": "1.2.55",
   "type": "commonjs",
   "exports": {
     "./package.json": "./package.json",

package/src/getAllFrontmatter.tsx

@@ -5,13 +5,16 @@ import matter from 'gray-matter'
 import readingTime from 'reading-time'
 import { getHeadings } from './getHeadings'
 import type { Frontmatter } from './types'
+import { notifyFileRead } from './watchFile'
 
 // the front matter and content of all mdx files based on `docsPaths`
 export const getAllFrontmatter = (fromPath: string): Frontmatter[] => {
   const paths = glob.sync(`${fromPath}/**/*.mdx`)
   return paths
     .map((filePath) => {
-      const source = fs.readFileSync(path.join(filePath), 'utf8')
+      const absolutePath = path.join(filePath)
+      notifyFileRead(absolutePath)
+      const source = fs.readFileSync(absolutePath, 'utf8')
       const { data, content } = matter(source)
       const slug = filePath
         .replace(`${fromPath.replaceAll('\\', '/')}/`, '')

package/src/getMDX.ts

@@ -4,17 +4,33 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeSlug from 'rehype-slug'
 import remarkGfm from 'remark-gfm'
 import { getHeadings } from './getHeadings'
+import { processImageMeta } from './processImageMeta'
 import { rehypeHighlightCode } from './rehypeHighlightCode'
 import rehypeMetaAttribute from './rehypeMetaAttribute'
-import type { Frontmatter, UnifiedPlugin } from './types'
+import type { Frontmatter, ImageMeta, UnifiedPlugin } from './types'
+
+export type GetMDXOptions = {
+  extraPlugins?: UnifiedPlugin
+  /** Public directory for resolving image paths starting with / (default: ./public) */
+  publicDir?: string
+}
+
+export async function getMDX(
+  source: string,
+  extraPluginsOrOptions?: UnifiedPlugin | GetMDXOptions
+) {
+  // Handle both old signature (extraPlugins) and new options object
+  const opts: GetMDXOptions =
+    Array.isArray(extraPluginsOrOptions)
+      ? { extraPlugins: extraPluginsOrOptions }
+      : extraPluginsOrOptions ?? {}
 
-export async function getMDX(source: string, extraPlugins?: UnifiedPlugin) {
   const { frontmatter, code } = await bundleMDX({
     source,
     mdxOptions(options) {
       options.remarkPlugins = [...(options.remarkPlugins ?? []), remarkGfm]
       const plugins = [
-        ...(extraPlugins || []),
+        ...(opts.extraPlugins || []),
         ...(options.rehypePlugins ?? []),
         rehypeMetaAttribute,
         rehypeHighlightCode,
@@ -26,11 +42,21 @@ export async function getMDX(source: string, extraPlugins?: UnifiedPlugin) {
     },
   })
 
+  // Process image metadata if frontmatter.image exists
+  let imageMeta: ImageMeta | undefined
+  if (frontmatter.image && typeof frontmatter.image === 'string') {
+    const meta = await processImageMeta(frontmatter.image, { publicDir: opts.publicDir })
+    if (meta) {
+      imageMeta = meta
+    }
+  }
+
   return {
     frontmatter: {
       ...frontmatter,
       headings: getHeadings(source),
       readingTime: readingTime(code),
+      imageMeta,
     } as Frontmatter,
     code,
   }

package/src/getMDXBySlug.tsx

@@ -3,6 +3,7 @@ import path from 'node:path'
 import compareVersions from 'compare-versions'
 import { getMDX } from './getMDX'
 import type { Frontmatter, UnifiedPlugin } from './types'
+import { notifyFileRead } from './watchFile'
 
 export const getMDXBySlug = async (
   basePath: string,
@@ -18,6 +19,7 @@ export const getMDXBySlug = async (
   }
 
   const filePath = path.join(basePath, `${mdxPath}.mdx`)
+  notifyFileRead(filePath)
   const source = fs.readFileSync(filePath, 'utf8')
   const bundle = await getMDX(source, extraPlugins)
   return bundle

package/src/index.ts

@@ -1,7 +1,8 @@
 export { getAllFrontmatter } from './getAllFrontmatter'
-export { getMDX } from './getMDX'
+export { getMDX, type GetMDXOptions } from './getMDX'
 export { getAllVersionsFromPath, getMDXBySlug } from './getMDXBySlug'
 export { createCodeHighlighter } from './highlightCode'
 export { rehypeHeroTemplate } from './rehypeHeroTemplate'
-export type { Frontmatter } from './types'
+export { notifyFileRead } from './watchFile'
+export type { Frontmatter, ImageMeta } from './types'
 export type { RehypeHeroTemplateOptions } from './rehypeHeroTemplate'

package/src/processImageMeta.ts

@@ -0,0 +1,55 @@
+import { existsSync } from 'node:fs'
+import { resolve } from 'node:path'
+import type { ImageMeta } from './types'
+
+async function getSharp(): Promise<typeof import('sharp') | null> {
+  try {
+    const sharpModule = await import('sharp')
+    return (sharpModule as any).default || sharpModule
+  } catch {
+    // silent fallback - no warning needed
+    return null
+  }
+}
+
+/**
+ * Process an image file and return its metadata.
+ * Returns null if sharp is not installed or processing fails.
+ */
+export async function processImageMeta(
+  imagePath: string,
+  opts?: { publicDir?: string }
+): Promise<ImageMeta | null> {
+  const publicDir = opts?.publicDir ?? './public'
+
+  // Resolve the file path
+  let filePath: string
+  if (imagePath.startsWith('/')) {
+    filePath = resolve(publicDir, imagePath.slice(1))
+  } else {
+    filePath = resolve(imagePath)
+  }
+
+  if (!existsSync(filePath)) {
+    return null
+  }
+
+  const sharp = await getSharp()
+  if (!sharp) {
+    return null
+  }
+
+  try {
+    const image = sharp(filePath)
+    const metadata = await image.metadata()
+    const { width = 0, height = 0 } = metadata
+
+    // Generate blur placeholder (10px wide, maintains aspect ratio)
+    const blurBuffer = await image.resize(10).blur(1).jpeg({ quality: 40 }).toBuffer()
+    const blurDataURL = `data:image/jpeg;base64,${blurBuffer.toString('base64')}`
+
+    return { width, height, blurDataURL }
+  } catch {
+    return null
+  }
+}

package/src/types.ts

@@ -1,3 +1,9 @@
+export type ImageMeta = {
+  width: number
+  height: number
+  blurDataURL: string
+}
+
 export type Frontmatter = {
   title: string
   headings?: { title: string; priority: number; id: string }[]
@@ -14,6 +20,8 @@ export type Frontmatter = {
   poster?: string
   slug: string
   image?: string
+  /** Image metadata (dimensions and blur placeholder) - populated if image exists and sharp is installed */
+  imageMeta?: ImageMeta
   component?: string
   package?: string
   demoName?: string

package/src/watchFile.ts

@@ -0,0 +1,13 @@
+const WATCH_FILE_KEY = '__oneWatchFile'
+
+/**
+ * Notifies One's HMR system about a file dependency.
+ * When One is present, this enables automatic hot reload when the file changes.
+ * No-op when One is not present or in production.
+ */
+export function notifyFileRead(filePath: string): void {
+  const watchFile = globalThis[WATCH_FILE_KEY] as ((path: string) => void) | undefined
+  if (watchFile) {
+    watchFile(filePath)
+  }
+}

package/types/getAllFrontmatter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getAllFrontmatter.d.ts","sourceRoot":"","sources":["../src/getAllFrontmatter.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,WAAW,EAoB/D,CAAA"}
+{"version":3,"file":"getAllFrontmatter.d.ts","sourceRoot":"","sources":["../src/getAllFrontmatter.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,WAAW,EAsB/D,CAAA"}

package/types/getMDX.d.ts

@@ -1,5 +1,10 @@
 import type { Frontmatter, UnifiedPlugin } from './types';
-export declare function getMDX(source: string, extraPlugins?: UnifiedPlugin): Promise<{
+export type GetMDXOptions = {
+    extraPlugins?: UnifiedPlugin;
+    /** Public directory for resolving image paths starting with / (default: ./public) */
+    publicDir?: string;
+};
+export declare function getMDX(source: string, extraPluginsOrOptions?: UnifiedPlugin | GetMDXOptions): Promise<{
     frontmatter: Frontmatter;
     code: string;
 }>;

package/types/getMDX.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getMDX.d.ts","sourceRoot":"","sources":["../src/getMDX.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEzD,wBAAsB,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,aAAa;iBAuBhE,WAAW;;GAGnB"}
+{"version":3,"file":"getMDX.d.ts","sourceRoot":"","sources":["../src/getMDX.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAa,aAAa,EAAE,MAAM,SAAS,CAAA;AAEpE,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,aAAa,CAAA;IAC5B,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAsB,MAAM,CAC1B,MAAM,EAAE,MAAM,EACd,qBAAqB,CAAC,EAAE,aAAa,GAAG,aAAa;iBAwC9C,WAAW;;GAGnB"}

package/types/getMDXBySlug.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getMDXBySlug.d.ts","sourceRoot":"","sources":["../src/getMDXBySlug.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEzD,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,EAChB,MAAM,MAAM,EACZ,eAAe,aAAa,KAC3B,OAAO,CAAC;IAAE,WAAW,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAapD,CAAA;AAED,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAOjE"}
+{"version":3,"file":"getMDXBySlug.d.ts","sourceRoot":"","sources":["../src/getMDXBySlug.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAGzD,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,EAChB,MAAM,MAAM,EACZ,eAAe,aAAa,KAC3B,OAAO,CAAC;IAAE,WAAW,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAcpD,CAAA;AAED,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAOjE"}

package/types/index.d.ts

@@ -1,8 +1,9 @@
 export { getAllFrontmatter } from './getAllFrontmatter';
-export { getMDX } from './getMDX';
+export { getMDX, type GetMDXOptions } from './getMDX';
 export { getAllVersionsFromPath, getMDXBySlug } from './getMDXBySlug';
 export { createCodeHighlighter } from './highlightCode';
 export { rehypeHeroTemplate } from './rehypeHeroTemplate';
-export type { Frontmatter } from './types';
+export { notifyFileRead } from './watchFile';
+export type { Frontmatter, ImageMeta } from './types';
 export type { RehypeHeroTemplateOptions } from './rehypeHeroTemplate';
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAC1C,YAAY,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAA;AACrD,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5C,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACrD,YAAY,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAA"}

package/types/processImageMeta.d.ts

@@ -0,0 +1,9 @@
+import type { ImageMeta } from './types';
+/**
+ * Process an image file and return its metadata.
+ * Returns null if sharp is not installed or processing fails.
+ */
+export declare function processImageMeta(imagePath: string, opts?: {
+    publicDir?: string;
+}): Promise<ImageMeta | null>;
+//# sourceMappingURL=processImageMeta.d.ts.map

package/types/processImageMeta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"processImageMeta.d.ts","sourceRoot":"","sources":["../src/processImageMeta.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAYxC;;;GAGG;AACH,wBAAsB,gBAAgB,CACpC,SAAS,EAAE,MAAM,EACjB,IAAI,CAAC,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAC5B,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAiC3B"}

package/types/types.d.ts

@@ -1,3 +1,8 @@
+export type ImageMeta = {
+    width: number;
+    height: number;
+    blurDataURL: string;
+};
 export type Frontmatter = {
     title: string;
     headings?: {
@@ -23,6 +28,8 @@ export type Frontmatter = {
     poster?: string;
     slug: string;
     image?: string;
+    /** Image metadata (dimensions and blur placeholder) - populated if image exists and sharp is installed */
+    imageMeta?: ImageMeta;
     component?: string;
     package?: string;
     demoName?: string;

package/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0GAA0G;IAC1G,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,EAAE,MAAM,EAAE,CAAA"}

package/types/watchFile.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Notifies One's HMR system about a file dependency.
+ * When One is present, this enables automatic hot reload when the file changes.
+ * No-op when One is not present or in production.
+ */
+export declare function notifyFileRead(filePath: string): void;
+//# sourceMappingURL=watchFile.d.ts.map

package/types/watchFile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"watchFile.d.ts","sourceRoot":"","sources":["../src/watchFile.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAKrD"}