feat(macros): add InteractiveExample macro (#84)

* feat(macros): add InteractiveExample macro

* handle interactive-example code-example class

* add name argument to macro

* render height optional and minor refactor

---------

Co-authored-by: Florian Dieminger <me@fiji-flo.de>

crates/rari-doc/src/html/rewriter.rs

@@ -124,6 +124,9 @@ pub fn post_process_html<T: PageLike>(
             let class = el.get_attribute("class");
             let class = class.as_deref().unwrap_or_default();
             let is_hidden = class.split_ascii_whitespace().any(|c| c == "hidden");
+            let is_interactive_example = class
+                .split_ascii_whitespace()
+                .any(|c| c.starts_with("interactive-example"));
             let name = class
                 .split_ascii_whitespace()
                 .skip_while(|s| *s != "brush:")
@@ -134,7 +137,7 @@ pub fn post_process_html<T: PageLike>(
                 el.prepend("<code>", ContentType::Html);
                 el.append("</code>", ContentType::Html);
             }
-            if is_hidden {
+            if is_hidden || is_interactive_example {
                 el.before(r#"<div class="code-example">"#, ContentType::Html);
                 el.after("</div>", ContentType::Html);
             } else if !name.is_empty() && name != "plain" {

crates/rari-doc/src/templ/templs/embeds/interactive_example.rs

@@ -0,0 +1,42 @@
+use html_escape::encode_double_quoted_attribute;
+use rari_templ_func::rari_f;
+use rari_utils::concat_strs;
+
+use crate::error::DocError;
+use crate::helpers::l10n::l10n_json_data;
+use crate::templ::api::RariApi;
+
+/// Adds an <interactive-example> element to the content
+///
+/// Parameters:
+///  $0 - Name of interactive example
+///  $1 - Optional custom height class to set on interactive-example element
+///
+///  Example call {{InteractiveExample("JavaScript Demo: Array.from()", "taller")}}
+#[rari_f]
+pub fn interactive_example(name: String, height: Option<String>) -> Result<String, DocError> {
+    let title = l10n_json_data("Template", "interactive_example_cta", env.locale)?;
+    let id = RariApi::anchorize(title);
+
+    let height = height
+        .map(|height| {
+            concat_strs!(
+                r#" height="#,
+                &encode_double_quoted_attribute(&height).as_ref(),
+                r#"""#
+            )
+        })
+        .unwrap_or_default();
+    Ok(concat_strs!(
+        r#"<h2 id=""#,
+        &id,
+        r#"">"#,
+        title,
+        "</h2>\n",
+        r#"<interactive-example name=""#,
+        encode_double_quoted_attribute(&name).as_ref(),
+        r#"""#,
+        &height,
+        r#"></interactive-example>"#
+    ))
+}

crates/rari-doc/src/templ/templs/embeds/mod.rs

@@ -2,5 +2,6 @@ pub mod embed_gh_live_sample;
 pub mod embed_interactive_example;
 pub mod embed_live_sample;
 pub mod embed_youtube;
+pub mod interactive_example;
 pub mod jsfiddle_embed;
 pub mod live_sample_link;

crates/rari-doc/src/templ/templs/mod.rs

@@ -103,6 +103,7 @@ pub fn invoke(
         "embedinteractiveexample" => {
             embeds::embed_interactive_example::embed_interactive_example_any
         }
+        "interactiveexample" => embeds::interactive_example::interactive_example_any,
         "embedghlivesample" => embeds::embed_gh_live_sample::embed_gh_live_sample_any,
         "embedlivesample" => embeds::embed_live_sample::embed_live_sample_any,
         "embedyoutube" => embeds::embed_youtube::embed_youtube_any,