docs(examples): add button to show example code

And open example in full screen

Co-authored-by: Adnane Belmadiaf <daker@users.noreply.github.com>

Author: finetjul

Documentation/scripts/generate-examples.mjs

@@ -50,7 +50,6 @@ async function walkExamples(config, dir = config.root, results = []) {
       const fullPath = path.join(dir, entry.name);
       if (entry.isDirectory()) {
         const relDir = path.relative(config.root, fullPath).replace(/\\/g, '/');
-        // console.log('Visiting directory:', relDir);
         if (relDir && config.shouldSkipDir(relDir)) {
           return;
         }
@@ -62,11 +61,13 @@ async function walkExamples(config, dir = config.root, results = []) {
         if (!config.isExampleFile(relPath)) return;
         const exampleUrl = buildExampleUrl(config.baseSegment, relPath);
         const exampleName = config.getExampleName(fullPath, relPath);
+        const exampleCode = await fs.readFile(fullPath, 'utf-8');
         // Link convention
         const link = `./examples/${exampleName}.html`;
         results.push({
           title: exampleName,
           link,
+          exampleCode,
           exampleUrl,
         });
       }
@@ -75,8 +76,9 @@ async function walkExamples(config, dir = config.root, results = []) {
   return results;
 }
 
-function buildExampleMarkdown(name) {
+function buildExampleMarkdown(name, exampleCode) {
   const examplePage = `${name}/index.html`;
+  const encodedExampleCode = encodeURIComponent(exampleCode);
   return `---
 layout: page
 sidebar: false
@@ -85,14 +87,53 @@ title: ${name}
 
 <!-- This file is auto-generated by scripts/generate-examples.mjs -->
 <ClientOnly>
-  <div style="height: calc(100vh - 154px);">
+  <div style="position: relative; height: calc(100vh - 154px);">
     <iframe
       src="${examplePage}"
       title="${name} example"
       loading="lazy"
-      style="width: 100%; height: 100%; border: none;"
+      style="position: absolute; width: 100%; height: 100%; border: none;"
       allowfullscreen
     ></iframe>
+    <div style="position: absolute; bottom: 20px; left: 20px; z-index: 40; display: flex; flex-direction: column; gap: 8px;" >
+      <a href="${examplePage}" target="_blank">
+        <button style="
+          padding: 8px 12px; background-color: rgba(50,50,50,0.6); color: white;
+          border: none; cursor: pointer; border-radius: 4px;
+        ">Full screen</button>
+      </a>
+      <button
+        id="showSourceBtn"
+        data-source="${encodedExampleCode}"
+        style="
+          padding: 8px 12px; background-color: rgba(50,50,50,0.6); color: white;
+          border: none; cursor: pointer; border-radius: 4px;
+        "
+        onclick="
+          if (this.dataset.state === 'off') {
+            this.textContent = 'Hide JS';
+            this.dataset.state = 'on';
+            document.getElementById('sourceContent').textContent = decodeURIComponent(this.dataset.source);
+            document.getElementById('sourceModal').style.display = 'block';
+          } else {
+            this.textContent = 'Show JS';
+            this.dataset.state = 'off';
+            document.getElementById('sourceModal').style.display = 'none';
+          }
+        "
+        data-state="off"
+      >Show JS</button>
+    </div>
+    <div
+      id="sourceModal"
+      style="
+          display: none; position: absolute; width: 100%; height: 100%;
+          background: rgba(245,245,245,0.8); z-index: 20; color: black;
+          overflow: auto; padding-top: 20px; padding-left: 130px; font-family: monospace;
+        "
+    >
+      <pre id="sourceContent"></pre>
+    </div>
   </div>
 </ClientOnly>
 `;
@@ -139,8 +180,8 @@ async function writeMarkdownFiles(examples) {
   await removeStaleExampleDirs(validNames);
 
   await Promise.all(
-    examples.map(async ({ title, exampleUrl }) => {
-      const mdContent = buildExampleMarkdown(title);
+    examples.map(async ({ title, exampleCode }) => {
+      const mdContent = buildExampleMarkdown(title, exampleCode);
       const mdPath = path.join(OUTPUT_FOLDER, `${title}.md`);
       await fs.writeFile(mdPath, mdContent, 'utf-8');
     })