feat: add additional information to final app rendering

Author: MR-Addict

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "mdbook-embedify"
-version = "0.2.17"
+version = "0.2.18"
 edition = "2021"
 license = "MIT"
 readme = "README.md"

Cargo.toml

@@ -1,6 +1,6 @@
 function appendVersion() {
   const shield = document.createElement("span");
-  shield.textContent = "0.2.17";
+  shield.textContent = "0.2.18";
   document.querySelector(".menu-title").appendChild(shield);
 }
 

docs/assets/js/patch.js

@@ -49,7 +49,7 @@ footer.enable = true
 footer.message = "Copyright © 2025 • Created with ❤️ by [MR-Addict](https://github.com/MR-Addict)"
 
 announcement-banner.enable = true
-announcement-banner.id = "0.2.17"
+announcement-banner.id = "0.2.18"
 announcement-banner.message = "*New version [0.2.17](https://github.com/MR-Addict/mdbook-embedify/releases/tag/0.2.17) relased*"
 
 giscus.enable = true

docs/book.toml

@@ -53,16 +53,19 @@ Let's create a **canvas** app - a simple drawable canvas component.
 
 **Step 1: Create the template file** (`assets/templates/canvas.html`)
 
-**Basic HTML structure with styling:**
+**Basic HTML:**
 
 ```html
 <div class="canvas-container">
   <canvas height="400"></canvas>
 </div>
-{% embed include file="assets/templates/canvas.html" range="4-15" type="raw" %}
 ```
 
-**Add interactive JavaScript:**
+**Add some styles:**
+
+{% embed include file="assets/templates/canvas.html" range="4-15" %}
+
+**Add interactive javaScript:**
 
 {% embed include file="assets/templates/canvas.html" range="16-" %}
 

docs/src/development/template.md

@@ -12,7 +12,7 @@ Announcement banner allows you put important messages at the top of the page. It
 ## Example
 
 ```text
-{% embed-ignore announcement-banner id="0.2.17" message="*New version [0.2.17](https://github.com/MR-Addict/mdbook-embedify/releases/tag/0.2.17) relased*" %}
+{% embed-ignore announcement-banner id="0.2.18" message="*New version [0.2.17](https://github.com/MR-Addict/mdbook-embedify/releases/tag/0.2.17) relased*" %}
 ```
 
 This book's announcement banner is enabled, you can see it at the top of this page.

docs/src/local/announcement-banner.md

@@ -4,9 +4,8 @@ use crate::parser;
 use mdbook::preprocess::PreprocessorContext;
 use std::fs;
 
-fn wrap_content_in_code_block(content: &str, language: &str, lang_detected: &str) -> String {
-    // check if the language is markdown, if so, wrapped by backticks
-    if lang_detected == "markdown" {
+fn wrap_content_in_code_block(content: String, language: String, lang_detected: String) -> String {
+    let backticks = if lang_detected == "markdown" {
         // Count the maximum number of consecutive backticks in the content
         let max_backticks = content
             .lines()
@@ -22,12 +21,12 @@ fn wrap_content_in_code_block(content: &str, language: &str, lang_detected: &str
             .unwrap_or(2) // Default to 2 if no backticks found
             + 1; // Add 1 to ensure we have enough backticks
 
-        let backticks = "`".repeat(max_backticks);
-
-        format!("{}{}\n{}\n{}", backticks, language, content, backticks)
+        "`".repeat(max_backticks)
     } else {
-        format!("```{}\n{}\n```", language, content)
-    }
+        "```".to_string()
+    };
+
+    format!("{}{}\n{}\n{}", backticks, language, content, backticks)
 }
 
 fn parse_include_range(input: String, max_line: usize) -> (usize, usize) {
@@ -73,12 +72,16 @@ pub fn include_script(
     options: Vec<parser::EmbedAppOption>,
 ) -> Result<String, String> {
     // get the file path from the options
-    let file_path = parser::get_option("file", options.clone());
-    if file_path.is_none() {
+    let file_path_option = parser::get_option("file", options.clone());
+    if file_path_option.is_none() {
         return Err("Option file is required".to_string());
     }
-    let file_path = ctx.root.join(&file_path.unwrap().value);
-    let file_path = file_path.to_string_lossy().to_string();
+
+    let file_path = ctx
+        .root
+        .join(file_path_option.unwrap().value)
+        .to_string_lossy()
+        .to_string();
 
     // read the file content
     if !std::path::Path::new(&file_path).exists() {
@@ -117,9 +120,5 @@ pub fn include_script(
         _ => lang_detected.clone(),
     };
 
-    Ok(wrap_content_in_code_block(
-        &content,
-        &language,
-        &lang_detected,
-    ))
+    Ok(wrap_content_in_code_block(content, language, lang_detected))
 }

src/assets/scripts/include.rs

@@ -184,7 +184,26 @@ fn render_embeds(ctx: &PreprocessorContext, chapter: Chapter, content: String) -
             }
 
             // unwrap the result
-            rendered.unwrap().unwrap()
+            // Convert app.options to JSON string for data attribute
+            let options_string = {
+                let mut json_parts = Vec::new();
+                for option in &app.options {
+                    json_parts.push(format!(
+                        "data-option-{}=\"{}\"",
+                        option.name,
+                        option.value
+                    ));
+                }
+                format!("{}", json_parts.join(" "))
+            };
+
+            format!(
+                "<!-- {} -->\n\n<div data-embedify data-app=\"{}\" {} style=\"display:none\"></div>\n\n{}",
+                input,
+                app.name,
+                options_string,
+                rendered.unwrap().unwrap()
+            )
         })
         .to_string();
 

src/embed.rs

@@ -8,6 +8,10 @@ This page tests the include app functionality for including source files with va
 
 Include a Python file with automatic language detection:
 
+<!-- {% embed include file="src/samples/hello.py" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/hello.py" style="display:none"></div>
+
 ```python
 #!/usr/bin/env python3
 
@@ -31,6 +35,10 @@ if __name__ == "__main__":
 
 Include a JavaScript file with automatic language detection:
 
+<!-- {% embed include file="src/samples/fibonacci.js" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/fibonacci.js" style="display:none"></div>
+
 ```javascript
 function fibonacci(n) {
   if (n <= 1) {
@@ -54,6 +62,10 @@ console.log(generateSequence(10));
 
 Include a JSON file with automatic language detection:
 
+<!-- {% embed include file="src/samples/package.json" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/package.json" style="display:none"></div>
+
 ```json
 {
   "name": "test-project",
@@ -82,6 +94,10 @@ Include a JSON file with automatic language detection:
 
 Include only the first 5 lines of the Python file:
 
+<!-- {% embed include file="src/samples/hello.py" range="-5" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/hello.py" data-option-range="-5" style="display:none"></div>
+
 ```python
 #!/usr/bin/env python3
 
@@ -94,6 +110,10 @@ def greet(name):
 
 Include lines 3 through 8 of the JavaScript file:
 
+<!-- {% embed include file="src/samples/fibonacci.js" range="3-8" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/fibonacci.js" data-option-range="3-8" style="display:none"></div>
+
 ```javascript
     return n;
   }
@@ -107,6 +127,10 @@ function generateSequence(length) {
 
 Include from line 10 to the end of the JavaScript file:
 
+<!-- {% embed include file="src/samples/fibonacci.js" range="10-" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/fibonacci.js" data-option-range="10-" style="display:none"></div>
+
 ```javascript
   for (let i = 0; i < length; i++) {
     sequence.push(fibonacci(i));
@@ -121,6 +145,10 @@ console.log(generateSequence(10));
 
 Include only line 1 of the Python file:
 
+<!-- {% embed include file="src/samples/hello.py" range="1-1" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/hello.py" data-option-range="1-1" style="display:none"></div>
+
 ```python
 #!/usr/bin/env python3
 ```
@@ -131,6 +159,10 @@ Include only line 1 of the Python file:
 
 Include Python file but override language to text:
 
+<!-- {% embed include file="src/samples/hello.py" lang="text" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/hello.py" data-option-lang="text" style="display:none"></div>
+
 ```text
 #!/usr/bin/env python3
 
@@ -154,6 +186,10 @@ if __name__ == "__main__":
 
 Include JSON file but override language to JavaScript:
 
+<!-- {% embed include file="src/samples/package.json" lang="javascript" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/package.json" data-option-lang="javascript" style="display:none"></div>
+
 ```javascript
 {
   "name": "test-project",
@@ -182,6 +218,10 @@ Include JSON file but override language to JavaScript:
 
 Include markdown file as raw content (not wrapped in code block):
 
+<!-- {% embed include file="src/samples/config.md" type="raw" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/config.md" data-option-type="raw" style="display:none"></div>
+
 # Sample Configuration
 
 This is a sample configuration file for testing include functionality.
@@ -208,6 +248,10 @@ This is a sample configuration file for testing include functionality.
 
 Include lines 3-6 of Python file as raw content:
 
+<!-- {% embed include file="src/samples/hello.py" range="3-6" type="raw" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/hello.py" data-option-range="3-6" data-option-type="raw" style="display:none"></div>
+
 
 def greet(name):
     """Greet someone with a hello message."""
@@ -219,6 +263,10 @@ def greet(name):
 
 Include lines 1-3 of JavaScript file with Python syntax highlighting:
 
+<!-- {% embed include file="src/samples/fibonacci.js" range="1-3" lang="python" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/fibonacci.js" data-option-range="1-3" data-option-lang="python" style="display:none"></div>
+
 ```python
 function fibonacci(n) {
   if (n <= 1) {
@@ -229,6 +277,10 @@ function fibonacci(n) {
 
 Include lines 2-4 of JSON file as raw content:
 
+<!-- {% embed include file="src/samples/package.json" range="2-4" type="raw" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/package.json" data-option-range="2-4" data-option-type="raw" style="display:none"></div>
+
   "name": "test-project",
   "version": "1.0.0",
   "description": "A test project for include functionality",
@@ -237,6 +289,10 @@ Include lines 2-4 of JSON file as raw content:
 
 Include lines 5-10 of Python file as raw content with language override:
 
+<!-- {% embed include file="src/samples/hello.py" range="5-10" lang="bash" type="raw" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/hello.py" data-option-range="5-10" data-option-lang="bash" data-option-type="raw" style="display:none"></div>
+
     """Greet someone with a hello message."""
     return f"Hello, {name}!"
 
@@ -250,6 +306,10 @@ def main():
 
 Test empty range defaults to full file:
 
+<!-- {% embed include file="src/samples/hello.py" range="" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/hello.py" data-option-range="" style="display:none"></div>
+
 ```python
 #!/usr/bin/env python3
 
@@ -273,6 +333,10 @@ if __name__ == "__main__":
 
 Test invalid range defaults to full file:
 
+<!-- {% embed include file="src/samples/hello.py" range="invalid-range" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/hello.py" data-option-range="invalid-range" style="display:none"></div>
+
 ```python
 #!/usr/bin/env python3
 
@@ -296,6 +360,10 @@ if __name__ == "__main__":
 
 Test range that goes beyond file length:
 
+<!-- {% embed include file="src/samples/hello.py" range="1-1000" %} -->
+
+<div data-embedify data-app="include" data-option-file="src/samples/hello.py" data-option-range="1-1000" style="display:none"></div>
+
 ```python
 #!/usr/bin/env python3