From 14b918b7ae5f2b9c21a706764d7389f3791b59bb Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Wed, 12 Feb 2025 21:01:36 +0000
Subject: [PATCH] chore: enhance examples page

---
 packages/docs/docusaurus.config.js       | 11 +------
 packages/docs/scripts/buildTemplates.mjs | 10 +++++--
 packages/docs/scripts/template.html      | 37 +++++++++++++++++++++---
 3 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/packages/docs/docusaurus.config.js b/packages/docs/docusaurus.config.js
index 6a4bbd74c..97b77aeed 100644
--- a/packages/docs/docusaurus.config.js
+++ b/packages/docs/docusaurus.config.js
@@ -184,17 +184,8 @@ const config = {
                         label: 'API',
                     },
                     { to: '/blog', label: 'Blog', position: 'left' },
+                    { href: '/templates', target:"_blank", label: 'Examples', position: 'left' },
                     { to: '/demo', label: 'Demo', position: 'left' },
-                    // {
-                    //     to: 'https://dockview.dev/typedocs',
-                    //     label: 'TSDoc',
-                    //     position: 'left',
-                    // },
-
-                    // {
-                    //     type: 'docsVersionDropdown',
-                    //     position: 'right',
-                    // },
                     {
                         href: 'https://github.com/mathuo/dockview',
                         position: 'right',
diff --git a/packages/docs/scripts/buildTemplates.mjs b/packages/docs/scripts/buildTemplates.mjs
index f2cc212ce..555d4fd2d 100644
--- a/packages/docs/scripts/buildTemplates.mjs
+++ b/packages/docs/scripts/buildTemplates.mjs
@@ -1,7 +1,6 @@
 import fs from 'fs-extra';
 import * as path from 'path';
 import { argv } from 'process';
-import { execSync } from 'child_process';
 
 import { fileURLToPath } from 'url';
 
@@ -86,7 +85,8 @@ function createIndexHTML(options) {
                 .map(([key, value]) => `"${key}": "${value}"`)
                 .join(',\n')}`
         )
-        .replace('{{app}}', options.app);
+        .replace('{{app}}', options.app)
+        .replace('{{githubLink}}', options.githubUrl)
 }
 
 const input_dir = path.join(__dirname, '../templates');
@@ -97,6 +97,8 @@ const FRAMEWORKS = ['react', 'vue', 'typescript'];
 
 const list = [];
 
+const githubUrl = "https://github.com/mathuo/dockview/tree/master/packages/docs/templates"
+
 for (const component of COMPONENTS) {
     const componentDir = path.join(input_dir, component);
 
@@ -115,6 +117,9 @@ for (const component of COMPONENTS) {
                 path.join(componentDir, folder, framework, 'src'),
                 path.join(output, component, folder, framework, 'src')
             );
+
+            const templateGithubUrl = `${githubUrl}/${component}/${folder}/${framework}/src`
+
             const template = createIndexHTML({
                 title: `Dockview | ${folder} ${framework}`,
                 app:
@@ -127,6 +132,7 @@ for (const component of COMPONENTS) {
                         USE_LOCAL_CDN ? 'local' : 'remote'
                     ],
                 },
+                githubUrl: templateGithubUrl
             });
             fs.writeFileSync(
                 path.join(output, component, folder, framework, 'index.html'),
diff --git a/packages/docs/scripts/template.html b/packages/docs/scripts/template.html
index 56a5a9ebe..7dda559be 100644
--- a/packages/docs/scripts/template.html
+++ b/packages/docs/scripts/template.html
@@ -12,7 +12,7 @@
         <style media="only screen">
             html,
             body,
-            #app {
+            #root {
                 height: 100%;
                 width: 100%;
                 margin: 0;
@@ -22,6 +22,26 @@
                     BlinkMacSystemFont, Segoe UI, Roboto;
             }
 
+            #header {
+              height: 25px;
+              display: flex;
+              justify-content: flex-end;
+              align-items: center;
+            }
+
+            #header-btn {
+              height: 22px;
+            }
+
+            #gh-logo {
+              height: 22px;
+              width: 22px;
+            }
+
+            #app {
+              height: calc(100% - 25px);
+            }
+
             html {
                 position: absolute;
                 top: 0;
@@ -31,7 +51,7 @@
             }
 
             body {
-                padding: 16px;
+                padding: 8px;
                 overflow: auto;
             }
         </style>
@@ -62,9 +82,18 @@
     </head>
 
     <body>
-        <div id="app">
-            <script type="systemjs-module" src="import:{{app}}"></script>
+        <div id="root">
+          <div id="header">
+            <a target="_blank" rel="noopener noreferrer" href="{{githubLink}}">
+              <button id="header-btn">
+                View Source
+              </button>
+            </a>
+            <img id="gh-logo" src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png"/>
+          </div>
+          <div id="app"></div>
         </div>
+        <script type="systemjs-module" src="import:{{app}}"></script>
         <object
             id="loading-spinner"
             style="