add latex auto deploy feature to doc

Dockerfile

@@ -2,6 +2,15 @@
 # Build with Playwright (browsers and deps ready)
 FROM mcr.microsoft.com/playwright:v1.55.0-jammy AS build
 
+# Install git, git-lfs, and dependencies for Pandoc (only if ENABLE_LATEX_CONVERSION=true)
+RUN apt-get update && apt-get install -y git git-lfs wget && apt-get clean
+
+# Install latest Pandoc from GitHub releases (only installed if needed later)
+RUN wget -qO- https://github.com/jgm/pandoc/releases/download/3.8/pandoc-3.8-linux-amd64.tar.gz | tar xzf - -C /tmp && \
+    cp /tmp/pandoc-3.8/bin/pandoc /usr/local/bin/ && \
+    cp /tmp/pandoc-3.8/bin/pandoc-lua /usr/local/bin/ && \
+    rm -rf /tmp/pandoc-3.8
+
 # Set the working directory in the container
 WORKDIR /app
 
@@ -14,6 +23,15 @@ RUN npm install
 # Copy the rest of the application code
 COPY app/ .
 
+# Conditionally convert LaTeX to MDX if ENABLE_LATEX_CONVERSION=true
+ARG ENABLE_LATEX_CONVERSION=false
+RUN if [ "$ENABLE_LATEX_CONVERSION" = "true" ]; then \
+    echo "🔄 LaTeX conversion enabled - running latex:convert..."; \
+    npm run latex:convert; \
+    else \
+    echo "⏭️  LaTeX conversion disabled - skipping..."; \
+    fi
+
 # Ensure `public/data` is a real directory with real files (not a symlink)
 # This handles the case where `public/data` is a symlink in the repo, which
 # would be broken inside the container after COPY.

app/src/content/chapters/demo/writing-your-content.mdx

@@ -140,9 +140,43 @@ Use the **color picker** below to see how the primary color affects the theme.
   Here is an example of an <a href="#">interactive element</a>.
 </Sidenote>
 
+#### Color palettes
+
+Here is a suggestion of **color palettes** for your **data visualizations** that align with your **brand identity**. These palettes are generated from your `--primary-color`.
+
+<Palettes />
+<br/>
+**Use color with care.**
+Color should rarely be the only channel of meaning.
+Always pair it with text, icons, shape or position. The simulation helps you spot palettes and states that become indistinguishable for people with color‑vision deficiencies.
+
+#### Using the palettes
+
+You can copy them manually from the palette viewer just above, or fetch colors via `window.ColorPalettes.getColors(key, count)` where `key` is one of `'categorical'`, `'sequential'`, `'diverging'`, and `count` is the desired number of colors (defaults to 6).
+
+<Accordion title="Code example">
+  ```js
+// Usage (with explicit counts)
+const cat = window.ColorPalettes.getColors('categorical', 8);
+const seq = window.ColorPalettes.getColors('sequential', 8);
+const div = window.ColorPalettes.getColors('diverging', 7);
+
+// For current primary color string
+const primaryHex = window.ColorPalettes.getPrimary();
+
+// If you change --primary-color dynamically, call refresh to notify listeners
+document.documentElement.style.setProperty('--primary-color', '#6D4AFF');
+window.ColorPalettes.refresh();
+```
+</Accordion>
+
 
 ### LaTeX to Template Conversion
 
+<Note variant="warning">
+⚠️ **Highly Experimental Feature** — This LaTeX conversion toolkit is in active development and may not work perfectly with all LaTeX documents. Results may vary depending on your document structure and complexity.
+</Note>
+
 Convert your existing LaTeX papers directly to this template using the built-in LaTeX to MDX toolkit. This powerful system transforms academic LaTeX documents into fully interactive web articles with all template features.
 
 #### How it works
@@ -248,32 +282,10 @@ node index.mjs --input=paper.tex --output=../content/
 
 The result is a fully interactive article that preserves your scientific content while gaining all template benefits: responsive design, interactive equations, zoomable figures, and modern web features.
 
-#### Color palettes
-
-Here is a suggestion of **color palettes** for your **data visualizations** that align with your **brand identity**. These palettes are generated from your `--primary-color`.
-
-<Palettes />
-<br/>
-**Use color with care.**
-Color should rarely be the only channel of meaning.
-Always pair it with text, icons, shape or position. The simulation helps you spot palettes and states that become indistinguishable for people with color‑vision deficiencies.
-
-#### Using the palettes
-
-You can copy them manually from the palette viewer just above, or fetch colors via `window.ColorPalettes.getColors(key, count)` where `key` is one of `'categorical'`, `'sequential'`, `'diverging'`, and `count` is the desired number of colors (defaults to 6).
+#### Docker deployment with LaTeX conversion
 
-<Accordion title="Code example">
-  ```js
-// Usage (with explicit counts)
-const cat = window.ColorPalettes.getColors('categorical', 8);
-const seq = window.ColorPalettes.getColors('sequential', 8);
-const div = window.ColorPalettes.getColors('diverging', 7);
+When deploying on Hugging Face Spaces, you can enable automatic LaTeX conversion during the build process by setting the `ENABLE_LATEX_CONVERSION=true` environment variable. 
 
-// For current primary color string
-const primaryHex = window.ColorPalettes.getPrimary();
+If this variable is configured in your Space, the build process will automatically execute the LaTeX to MDX conversion, transforming your LaTeX sources into the final blog post format.
 
-// If you change --primary-color dynamically, call refresh to notify listeners
-document.documentElement.style.setProperty('--primary-color', '#6D4AFF');
-window.ColorPalettes.refresh();
-```
-</Accordion>
+This allows you to maintain LaTeX sources in your repository while automatically generating the MDX content for production deployment.