@unsetsoft/ryunix-presets 1.0.20 → 1.0.23-canary.3

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@unsetsoft/ryunix-presets",
-  "description": "Package with presets for different development environments.",
-  "version": "1.0.20",
+  "description": "Package with presets for different development environments with MDX support.",
+  "version": "1.0.23-canary.3",
   "author": "Neyunse",
   "type": "module",
   "repository": "https://github.com/UnSetSoft/Ryunixjs",
   "license": "MIT",
   "keywords": [
-    "ryunixjs"
+    "ryunixjs",
+    "mdx",
+    "markdown"
   ],
   "files": [
     "vite/",
@@ -15,7 +17,7 @@
     "webpack/"
   ],
   "peerDependencies": {
-    "@unsetsoft/ryunixjs": "^1.2.1"
+    "@unsetsoft/ryunixjs": "^1.2.2"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -41,6 +43,8 @@
     "@babel/preset-react": "7.28.5",
     "@eslint/eslintrc": "3.3.1",
     "@eslint/js": "9.38.0",
+    "@mdx-js/loader": "^3.1.1",
+    "@mdx-js/rollup": "^3.1.1",
     "@rollup/plugin-terser": "0.4.4",
     "@swc/core": "1.12.14",
     "babel-loader": "10.0.0",
@@ -48,10 +52,9 @@
     "copy-webpack-plugin": "13.0.1",
     "css-loader": "7.1.2",
     "css-minimizer-webpack-plugin": "7.0.2",
-    "sass": "1.93.2",
-    "sass-loader": "16.0.6",
     "dotenv-webpack": "8.1.1",
     "eslint": "9.38.0",
+    "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-webpack-plugin": "5.0.2",
     "file-loader": "6.2.0",
@@ -61,8 +64,17 @@
     "html-webpack-plugin": "5.6.4",
     "image-webpack-loader": "^8.1.0",
     "lodash": "4.17.21",
+    "markdown-loader": "^8.0.0",
     "mini-css-extract-plugin": "2.9.4",
+    "rehype-highlight": "^7.0.1",
+    "rehype-katex": "^7.0.1",
+    "rehype-slug": "^6.0.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "rollup": "4.52.5",
+    "sass": "1.93.2",
+    "sass-loader": "16.0.6",
     "style-loader": "4.0.0",
     "terminal-log": "1.0.1",
     "terser-webpack-plugin": "5.3.14",
@@ -72,5 +84,9 @@
     "webpack-cli": "6.0.1",
     "webpack-dev-server": "5.2.2",
     "yargs": "18.0.0"
+  },
+  "optionalDependencies": {
+    "rehype-highlight": "^7.0.1",
+    "remark-gfm": "^4.0.0"
   }
-}
+}

package/webpack/bin/index.mjs

@@ -14,6 +14,7 @@ import {
 } from '../utils/index.mjs'
 import { ESLint } from 'eslint'
 import eslintConfig from '../eslint.config.mjs'
+import fs from 'fs'
 const lint = {
   command: 'lint',
   describe: 'Lint code',
@@ -72,7 +73,7 @@ const build = {
       return
     }
 
-    if (defaultSettings.experimental.ssg.prerender.length > 0) {
+    if (fs.existsSync(resolveApp(process.cwd(), 'src/pages/routes.ryx'))) {
       await cleanBuildDirectory(
         resolveApp(
           process.cwd(),
@@ -96,8 +97,8 @@ const build = {
       const formattedTime =
         minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`
 
-      if (defaultSettings.experimental.ssg.prerender.length > 0) {
-        await Prerender()
+      if (defaultSettings.webpack.production) {
+        await Prerender(defaultSettings.webpack.output.buildDirectory)
       }
 
       logger.info(chalk.green('Compilation successful! 🎉'))

package/webpack/bin/prerender.mjs

@@ -1,138 +1,47 @@
 /**
- * prerender metadata
- *
+ * Automatic Prerender - reads routes from manifest
  */
+import { buildSSG } from '../utils/ssg.mjs'
 import { configFileExist } from '../utils/settingfile.cjs'
 import defaultSettings from '../utils/config.cjs'
 import { resolveApp } from '../utils/index.mjs'
 import fs from 'fs'
 import path from 'path'
 
-// proyect/.ryunix/static
-const buildDirectory = resolveApp(process.cwd(), '.ryunix/static')
-const indexFile = path.join(buildDirectory, 'index.html')
+const Prerender = async (directory) => {
+  const buildDirectory = resolveApp(process.cwd(), directory)
 
-const siteMap = async (routes) => {
-  if (!defaultSettings.experimental.ssg.sitemap.baseURL) {
-    console.error(
-      '❌ Base URL is not defined in the configuration file. Please set `experimental.ssg.sitemap.baseURL`.',
-    )
-    process.exit(1)
-  }
-
-  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-${routes
-  .map((route) => {
-    const url = `${defaultSettings.experimental.ssg.sitemap.baseURL}${route.path === '/' ? '' : route.path}`
-    const meta = route.meta || {}
-    const sitemap_settings = route.sitemap || {}
-    const lastmod = meta.lastmod || new Date().toISOString().split('T')[0]
-
-    // sitemap settings
-    const changefreq =
-      sitemap_settings.changefreq ||
-      meta.changefreq || // TODO: Remove meta.changefreq
-      defaultSettings.experimental.ssg.sitemap.settings.changefreq
-    const priority =
-      sitemap_settings.priority ||
-      meta.priority || // TODO: Remove meta.priority
-      defaultSettings.experimental.ssg.sitemap.settings.priority
-
-    return `<url>
-  <loc>${url}</loc>
-  <lastmod>${lastmod}</lastmod>
-  <changefreq>${changefreq}</changefreq>
-  <priority>${priority}</priority>
-</url>`
-  })
-  .join('\n')}
-</urlset>`
-
-  await fs.writeFileSync(
-    path.resolve(buildDirectory, 'sitemap.xml'),
-    sitemap,
-    'utf-8',
-  )
-
-  console.log('✅ Sitemap created')
-}
-
-const Prerender = async () => {
   if (!configFileExist()) {
     console.error('❌ No configuration file found.')
     process.exit(1)
   }
 
-  const template = fs.readFileSync(indexFile, 'utf-8')
+  const manifestPath = path.join(process.cwd(), directory, 'ssg', 'routes.json')
+  let routes = []
 
-  for (const route of defaultSettings.experimental.ssg.prerender) {
-    if (route.path === '/') continue // Exclude root path, handled by defaultSettings.static.seo.meta
-    let html = template
-    const meta = route?.meta || defaultSettings.static.seo.meta
-
-    // title
-    if (meta.title) {
-      html = html.replace(/<title>.*<\/title>/, `<title>${meta.title}<\/title>`)
+  if (fs.existsSync(manifestPath)) {
+    try {
+      routes = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'))
+      console.log(`[SSG] Found ${routes.length} routes in manifest`)
+    } catch (error) {
+      console.error('[SSG] Error reading routes manifest:', error)
     }
+  }
 
-    // Helper to add or replace metatag
-    function upsertMetaTag(html, name, value) {
-      if (value === undefined || value === null) return html
-
-      const isProperty = name.startsWith('og:') || name.startsWith('twitter:')
-      const attr = isProperty ? 'property' : 'name'
-      const regex = new RegExp(`<meta ${attr}=["']${name}["'][^>]*>`, 'i')
-      const tag = `<meta ${attr}="${name}" content="${value}">`
-
-      if (regex.test(html)) {
-        return html.replace(regex, tag)
-      } else {
-        return html.replace(/<\/head>/i, `${tag}\n<\/head>`)
-      }
-    }
-
-    // Description
-    html = upsertMetaTag(html, 'description', meta.description)
-    // Keywords
-    html = upsertMetaTag(html, 'keywords', meta.keywords)
-
-    // dynamic metatags (excluding title, description, keywords, framework, mode)
-    for (const [key, value] of Object.entries(meta)) {
-      if (
-        [
-          'title',
-          'description',
-          'keywords',
-          'framework',
-          'mode',
-          'viewport',
-        ].includes(key)
-      )
-        continue
-      html = upsertMetaTag(html, key, value)
-    }
-
-    const outputDir =
-      route.path === '/'
-        ? buildDirectory
-        : path.join(buildDirectory, route.path)
-
-    if (!fs.existsSync(outputDir)) {
-      await fs.mkdirSync(outputDir, { recursive: true, force: true })
+  if (routes.length === 0) {
+    routes = defaultSettings.experimental?.ssg?.prerender || []
+    if (routes.length > 0) {
+      console.log(`[SSG] Using ${routes.length} routes from config`)
     }
-
-    await fs.writeFileSync(path.join(outputDir, 'index.html'), html)
-    console.log(`✅ Prerendered ${route.path}`)
   }
 
-  // need base url and enable
-  if (
-    defaultSettings.experimental.ssg.sitemap.enable &&
-    defaultSettings.experimental.ssg.sitemap.baseURL
-  ) {
-    await siteMap(defaultSettings.experimental.ssg.prerender)
+  if (routes.length === 0) {
+    console.log('[SSG] No routes to prerender, skipping SSG generation.')
+    return
   }
+
+  await buildSSG(routes, defaultSettings, buildDirectory)
+  console.log('✅ SSG build complete')
 }
 
 export default Prerender

package/webpack/eslint.config.mjs

@@ -1,11 +1,12 @@
 import config from './utils/config.cjs'
 import { resolveApp } from './utils/index.mjs'
 import { defineConfig } from 'eslint/config'
+
 const dir = process.cwd()
 
 const eslintConfig = defineConfig([
   {
-    files: ['**/*.ryx', ...config?.eslint?.files],
+    files: ['**/*.ryx', '**/*.mdx', ...config?.eslint?.files],
     languageOptions: {
       ecmaVersion: 2021,
       sourceType: 'module',
@@ -14,17 +15,23 @@ const eslintConfig = defineConfig([
         ecmaFeatures: {
           jsx: true,
         },
-        extraFileExtensions: ['.ryx'],
+        extraFileExtensions: ['.ryx', '.mdx'],
       },
     },
     settings: {
       react: {
-        pragma: 'Ryunix.createElement', // Para JSX transpile a Ryunix.createElement
-        fragment: 'Ryunix.Fragment', // Para fragmentos JSX
+        pragma: 'Ryunix.createElement',
+        fragment: 'Ryunix.Fragment',
       },
+      // MDX-specific settings
+      'mdx/code-blocks': true,
     },
     plugins: config?.eslint?.plugins,
-    rules: config?.eslint?.rules,
+    rules: {
+      ...config?.eslint?.rules,
+      // Disable some rules for MDX files that might conflict
+      'react/jsx-no-undef': 'off', // MDX might use components not explicitly imported
+    },
   },
 ])
 

package/webpack/utils/index.mjs

@@ -6,6 +6,8 @@ import { join, dirname } from 'path'
 import { fileURLToPath } from 'url'
 import logger from 'terminal-log'
 import chalk from 'chalk'
+import { createRequire } from 'node:module'
+import { readFile } from 'node:fs/promises'
 
 const resolveApp = (appDirectory, relativePath) =>
   resolve(appDirectory, relativePath)
@@ -58,19 +60,12 @@ const getEnviroment = () =>
       },
     )
 
+const require = createRequire(import.meta.url)
+
 const getPackageVersion = async () => {
-  const __dirname = dirname(fileURLToPath(import.meta.url)) // Para obtener el directorio actual
-  const packageJsonPath = join(
-    __dirname,
-    '..',
-    '..',
-    '..',
-    'ryunixjs',
-    'package.json',
-  )
-  const data = await fs.readFile(packageJsonPath, 'utf-8')
-  const packageJson = JSON.parse(data)
-  return packageJson
+  const packageJsonPath = require.resolve('@unsetsoft/ryunixjs/package.json')
+  const data = await readFile(packageJsonPath, 'utf-8')
+  return JSON.parse(data)
 }
 
 async function cleanCacheDir(dirPath) {

package/webpack/utils/mdx.mjs

@@ -0,0 +1,49 @@
+export const getMDXLoaderConfig = (options = {}) => {
+  const {
+    buildDirectory = '.ryunix',
+    remarkPlugins = [],
+    rehypePlugins = [],
+  } = options
+
+  return {
+    test: /\.mdx$/,
+    exclude: /node_modules/,
+    use: [
+      {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                targets: 'defaults and not IE 11',
+                useBuiltIns: false,
+                modules: false,
+                bugfixes: true,
+              },
+            ],
+          ],
+          cacheDirectory: `${buildDirectory}/cache/babel`,
+          plugins: [
+            [
+              '@babel/plugin-transform-react-jsx',
+              {
+                pragma: 'Ryunix.createElement',
+                pragmaFrag: 'Ryunix.Fragment',
+              },
+            ],
+          ],
+        },
+      },
+      {
+        loader: '@mdx-js/loader',
+        options: {
+          remarkPlugins: [...remarkPlugins],
+          rehypePlugins: [...rehypePlugins],
+        },
+      },
+    ],
+  }
+}
+
+export default getMDXLoaderConfig

package/webpack/utils/ssg.mjs

@@ -0,0 +1,197 @@
+/**
+ * SSG Utilities - Improved static site generation
+ */
+import fs from 'fs'
+import path from 'path'
+
+/**
+ * Extract routes from routes config for SSG
+ */
+const extractSSGRoutes = (routes) => {
+  const ssgRoutes = []
+
+  const processRoute = (route, parentPath = '') => {
+    if (!route.path || route.path.includes(':')) return // Skip dynamic routes
+    if (route.NotFound || route.noRenderLink) return // Skip special routes
+
+    const fullPath = parentPath + route.path
+
+    ssgRoutes.push({
+      path: fullPath === '' ? '/' : fullPath,
+      component: route.component,
+      meta: route.meta || {},
+      sitemap: route.sitemap || {},
+      label: route.label,
+    })
+
+    // Process nested routes
+    if (route.subRoutes) {
+      route.subRoutes.forEach((subRoute) => {
+        processRoute(subRoute, fullPath)
+      })
+    }
+  }
+
+  routes.forEach((route) => processRoute(route))
+  return ssgRoutes
+}
+
+/**
+ * Generate robots.txt
+ */
+const generateRobotsTxt = (baseURL, options = {}) => {
+  const { disallow = [], allow = [], userAgents = ['*'] } = options
+
+  let content = ''
+
+  userAgents.forEach((agent) => {
+    content += `User-agent: ${agent}\n`
+    allow.forEach((path) => (content += `Allow: ${path}\n`))
+    disallow.forEach((path) => (content += `Disallow: ${path}\n`))
+  })
+
+  content += `\nSitemap: ${baseURL}/sitemap.xml\n`
+
+  return content
+}
+
+/**
+ * Generate enhanced sitemap with all routes
+ */
+const generateSitemap = (routes, baseURL, defaultSettings = {}) => {
+  const { changefreq = 'weekly', priority = '0.7' } = defaultSettings
+
+  const urls = routes
+    .map((route) => {
+      const url = `${baseURL}${route.path === '/' ? '' : route.path}`
+      const meta = route.meta || {}
+      const sitemap = route.sitemap || {}
+
+      const lastmod =
+        meta.lastmod ||
+        sitemap.lastmod ||
+        new Date().toISOString().split('T')[0]
+      const freq = sitemap.changefreq || meta.changefreq || changefreq
+      const prio = sitemap.priority || meta.priority || priority
+
+      return `  <url>
+    <loc>${url}</loc>
+    <lastmod>${lastmod}</lastmod>
+    <changefreq>${freq}</changefreq>
+    <priority>${prio}</priority>
+  </url>`
+    })
+    .join('\n')
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls}
+</urlset>`
+}
+
+/**
+ * Generate meta tags HTML
+ */
+const generateMetaTags = (meta, defaultMeta = {}) => {
+  const tags = { ...defaultMeta, ...meta }
+  let html = ''
+
+  Object.entries(tags).forEach(([key, value]) => {
+    if (['title', 'canonical'].includes(key)) return
+
+    const isProperty = key.startsWith('og:') || key.startsWith('twitter:')
+    const attr = isProperty ? 'property' : 'name'
+    html += `    <meta ${attr}="${key}" content="${value}">\n`
+  })
+
+  return html
+}
+
+/**
+ * Prerender route to HTML
+ */
+const prerenderRoute = async (route, template, config) => {
+  const meta = route.meta || config.static.seo.meta
+  let html = template
+
+  // Replace title
+  if (meta.title) {
+    html = html.replace(/<title>.*?<\/title>/, `<title>${meta.title}</title>`)
+  }
+
+  // Add/replace meta tags
+  const metaTags = generateMetaTags(meta, config.static.seo.meta)
+
+  // Remove existing meta tags (except framework/mode)
+  html = html.replace(/<meta name="(?!framework|mode).*?>\n/g, '')
+  html = html.replace(/<meta property=.*?>\n/g, '')
+
+  // Add new meta tags before </head>
+  html = html.replace(/<\/head>/, `${metaTags}  </head>`)
+
+  // Add canonical if provided
+  if (meta.canonical) {
+    const canonical = `    <link rel="canonical" href="${meta.canonical}">\n`
+    html = html.replace(/<\/head>/, `${canonical}  </head>`)
+  }
+
+  return html
+}
+
+/**
+ * Full SSG build process
+ */
+const buildSSG = async (routesConfig, config, buildDir) => {
+  const routes = extractSSGRoutes(routesConfig)
+
+  // Template is in buildDir/static/index.html
+  const templatePath = path.join(buildDir, 'static', 'index.html')
+
+  if (!fs.existsSync(templatePath)) {
+    console.error('❌ Template not found at:', templatePath)
+    return
+  }
+
+  const template = fs.readFileSync(templatePath, 'utf-8')
+
+  for (const route of routes) {
+    const html = await prerenderRoute(route, template, config)
+
+    const outputDir =
+      route.path === '/'
+        ? path.join(buildDir, 'static')
+        : path.join(buildDir, 'static', route.path)
+
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir, { recursive: true })
+    }
+
+    fs.writeFileSync(path.join(outputDir, 'index.html'), html)
+    console.log(`✅ Prerendered ${route.path}`)
+  }
+
+  // Generate sitemap in static/
+  if (config.experimental?.ssg?.sitemap?.enable) {
+    const baseURL = config.experimental.ssg.sitemap.baseURL
+    const sitemap = generateSitemap(
+      routes,
+      baseURL,
+      config.experimental.ssg.sitemap.settings,
+    )
+    fs.writeFileSync(path.join(buildDir, 'static', 'sitemap.xml'), sitemap)
+    console.log('✅ Sitemap created')
+
+    const robots = generateRobotsTxt(baseURL, config.experimental?.ssg?.robots)
+    fs.writeFileSync(path.join(buildDir, 'static', 'robots.txt'), robots)
+    console.log('✅ Robots.txt created')
+  }
+}
+
+export {
+  extractSSGRoutes,
+  generateSitemap,
+  generateRobotsTxt,
+  generateMetaTags,
+  prerenderRoute,
+  buildSSG,
+}

package/webpack/utils/ssgPlugin.mjs

@@ -0,0 +1,118 @@
+/**
+ * Webpack plugin to extract routes for SSG
+ */
+import fs from 'fs'
+import path from 'path'
+
+class RyunixRoutesPlugin {
+  constructor(options = {}) {
+    this.routesPath = options.routesPath || 'src/pages/routes.ryx'
+    this.outputPath = options.outputPath || '.ryunix/ssg/routes.json'
+  }
+
+  apply(compiler) {
+    compiler.hooks.emit.tapAsync(
+      'RyunixRoutesPlugin',
+      (compilation, callback) => {
+        // Skip in development mode
+        if (compiler.options.mode !== 'production') {
+          callback()
+          return
+        }
+
+        const routesFile = path.resolve(process.cwd(), this.routesPath)
+
+        if (!fs.existsSync(routesFile)) {
+          console.log(
+            '[SSG] No routes file found, skipping manifest generation.',
+          )
+          callback()
+          return
+        }
+
+        try {
+          const content = fs.readFileSync(routesFile, 'utf-8')
+          console.log('📄 Routes file size:', content.length, 'bytes')
+
+          const routes = this.parseRoutes(content)
+          console.log('✅ Extracted routes:', JSON.stringify(routes, null, 2))
+
+          const manifest = JSON.stringify(routes, null, 2)
+          const outputPath = path.resolve(process.cwd(), this.outputPath)
+
+          fs.mkdirSync(path.dirname(outputPath), { recursive: true })
+          fs.writeFileSync(outputPath, manifest)
+        } catch (error) {
+          console.error('❌ Error generating routes manifest:', error)
+        }
+
+        callback()
+      },
+    )
+  }
+
+  parseRoutes(content) {
+    const routes = []
+
+    // Match route objects more loosely
+    const routeRegex = /\{\s*path:\s*["']([^"']+)["'][\s\S]*?\}/g
+    let match
+
+    while ((match = routeRegex.exec(content)) !== null) {
+      const path = match[1]
+
+      // Skip dynamic and special routes
+      if (path.includes(':') || path === '*') continue
+
+      const route = { path }
+
+      // Get full route block (find next closing brace at same level)
+      const startIdx = match.index
+      let braceCount = 1
+      let endIdx = startIdx + 1
+
+      for (let i = startIdx + 1; i < content.length; i++) {
+        if (content[i] === '{') braceCount++
+        if (content[i] === '}') braceCount--
+        if (braceCount === 0) {
+          endIdx = i
+          break
+        }
+      }
+
+      const routeBlock = content.substring(startIdx, endIdx + 1)
+
+      // Extract meta with nested braces support
+      const metaMatch = routeBlock.match(/meta:\s*\{([\s\S]*?)\}(?:\s*,|\s*\})/)
+      if (metaMatch) {
+        route.meta = this.parseObject(metaMatch[1])
+      }
+
+      // Extract sitemap
+      const sitemapMatch = routeBlock.match(/sitemap:\s*\{([^}]+)\}/)
+      if (sitemapMatch) {
+        route.sitemap = this.parseObject(sitemapMatch[1])
+      }
+
+      routes.push(route)
+    }
+
+    return routes
+  }
+
+  parseObject(str) {
+    const obj = {}
+    const pairs = str.match(/["']?[\w:]+["']?\s*:\s*["'][^"']*["']/g) || []
+
+    pairs.forEach((pair) => {
+      const [key, value] = pair
+        .split(':')
+        .map((s) => s.trim().replace(/["']/g, ''))
+      obj[key] = value
+    })
+
+    return obj
+  }
+}
+
+export default RyunixRoutesPlugin

package/webpack/webpack.config.mjs

@@ -15,13 +15,14 @@ import {
   resolveApp,
   RYUNIX_APP,
 } from './utils/index.mjs'
+import { getMDXLoaderConfig } from './utils/mdx.mjs'
 import fs from 'fs'
 import config from './utils/config.cjs'
 import Dotenv from 'dotenv-webpack'
 import { getPackageVersion } from './utils/index.mjs'
+import RyunixRoutesPlugin from './utils/ssgPlugin.mjs'
 
 const __filename = fileURLToPath(import.meta.url)
-
 const __dirname = dirname(__filename)
 
 let dir
@@ -48,7 +49,6 @@ function getAlias(object) {
 const { version } = await getPackageVersion()
 
 export default {
-  // context: src
   experiments: {
     lazyCompilation: config.webpack.experiments.lazyCompilation,
   },
@@ -56,7 +56,6 @@ export default {
   entry: './main.ryx',
   devtool: config.webpack.production ? 'source-map' : false,
   output: {
-    // path: .ryunix
     path: resolveApp(dir, `${config.webpack.output.buildDirectory}/static`),
     publicPath: '/',
     chunkFilename: './assets/js/[name].[fullhash:8].bundle.js',
@@ -126,8 +125,9 @@ export default {
   stats: 'errors-warnings',
   module: {
     rules: [
+      // JavaScript/JSX/Ryunix files
       {
-        test: /\.(js|jsx|ryx)$/,
+        test: /\.(js|jsx|ryx|mdx|md)$/,
         exclude: /node_modules/,
         use: [
           'thread-loader',
@@ -163,6 +163,11 @@ export default {
           },
         ],
       },
+      // MDX files (with JSX support)
+      getMDXLoaderConfig({
+        buildDirectory: config.webpack.output.buildDirectory,
+      }),
+      // CSS/SASS files
       {
         test: /\.s[ac]ss|css$/i,
         exclude: /node_modules/,
@@ -171,9 +176,9 @@ export default {
             ? MiniCssExtractPlugin.loader
             : 'style-loader',
           'css-loader',
-
         ],
       },
+      // Images
       {
         test: /\.(jpg|jpeg|png|gif|svg|ico)$/,
         exclude: /node_modules/,
@@ -182,6 +187,7 @@ export default {
           filename: 'assets/images/[name].[hash][ext]',
         },
       },
+      // Media files
       {
         test: /\.(mp3|mp4|pdf)$/,
         exclude: /node_modules/,
@@ -190,6 +196,7 @@ export default {
           filename: 'assets/files/[name].[hash][ext]',
         },
       },
+      // User-defined rules from config
       ...config.webpack.module.rules,
     ],
   },
@@ -201,6 +208,8 @@ export default {
       '.js',
       '.jsx',
       '.ryx',
+      '.mdx', // Add MDX extension
+      '.md',  // Add MD extension
       ...config.webpack.resolve.extensions,
     ],
     fallback: config.webpack.resolve.fallback,
@@ -215,13 +224,20 @@ export default {
         systemvars: false,
         ignoreStub: true,
       }),
+    new RyunixRoutesPlugin({
+      routesPath: resolveApp(dir, `${config.webpack.root}/pages/routes.ryx`),
+      outputPath: resolveApp(
+        dir,
+        `${config.webpack.output.buildDirectory}/ssg/routes.json`,
+      ),
+    }),
     new webpack.DefinePlugin({
       'ryunix.config.env': JSON.stringify(config.experimental.env),
     }),
     new ESLintPlugin({
       cwd: dir,
       files: ['**/*.ryx', ...config.eslint.files],
-      extensions: ['js', 'ryx', 'jsx'],
+      extensions: ['js', 'ryx', 'jsx', 'mdx'], // Add MDX to linting
       emitError: true,
       emitWarning: true,
       failOnWarning: false,
@@ -254,8 +270,6 @@ export default {
         {
           from: resolveApp(dir, 'public'),
           to: resolveApp(dir, `${config.webpack.output.buildDirectory}/static`),
-          // Exclude any html files (index.html or others) to avoid duplicate emission
-          // when HtmlWebpackPlugin also generates index.html from a template.
           globOptions: {
             ignore: [
               '**/template.html',