chore: enhance examples page

This commit is contained in:
mathuo 2025-02-12 21:01:36 +00:00
parent cd1aa81d93
commit 14b918b7ae
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
3 changed files with 42 additions and 16 deletions

View File

@ -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',

View File

@ -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'),

View File

@ -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="