From 35c579eb97d94f161db78dcdfcdfcae3bf2eab22 Mon Sep 17 00:00:00 2001
From: mbehzad <m_online_net@yahoo.com>
Date: Mon, 4 May 2020 17:46:38 +0200
Subject: [PATCH] fix: convert the example name to kebab-case in the
 iframe/anchor url to be the same as the filename of the generetad html. fixes
 issue: (#94)

---
 src/generator.js | 51 ++++++++++++++++++++++++------------------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/generator.js b/src/generator.js
index 4b7d758..fe9725d 100644
--- a/src/generator.js
+++ b/src/generator.js
@@ -170,31 +170,32 @@ class Generator {
 		if (doc.description) {
 			// Replaces <example> tags with <iframe> tags
 			doc.description = doc.description.replace(
-				/<example name="([^"]+)"( height="\d+")?><\/example>/g,
-				`<div class="i-example">
-					<h5 class="i-example__heading">
-						<a
-							href="${doc.slug}-$1.html"
-							target="_blank"
-							class="plain-link"
-							data-toggle="tooltip"
-							data-placement="top"
-							title="Open in a new window"
-						>
-							<i class="fa fa-external-link-square fa-fw"></i>
-							Example
-						</a>
-					</h5>
-					<div class="i-example__body">
-						<div
-							class="i-example__iframe"
-							lazyframe
-							data-src="${doc.slug}-$1.html"
-							data-initinview="true"
-							data-title="Loading..." $2
-						></div>
-					</div>
-				</div>\n`
+        /<example name="([^"]+)"( height="\d+")?><\/example>/g,
+        (_match, name, optionalHeight) =>
+					`<div class="i-example">
+						<h5 class="i-example__heading">
+							<a
+								href="${doc.slug}-${_.kebabCase(name)}.html"
+								target="_blank"
+								class="plain-link"
+								data-toggle="tooltip"
+								data-placement="top"
+								title="Open in a new window"
+							>
+								<i class="fa fa-external-link-square fa-fw"></i>
+								Example
+							</a>
+						</h5>
+						<div class="i-example__body">
+							<div
+								class="i-example__iframe"
+								lazyframe
+								data-src="${doc.slug}-${_.kebabCase(name)}.html"
+								data-initinview="true"
+								data-title="Loading..." ${optionalHeight}
+							></div>
+						</div>
+					</div>\n`
 			);
 
 			// Replaces <info|success|warning|danger> tags with alert divs