mirror of
https://github.com/mathuo/dockview
synced 2025-02-15 12:55:44 +00:00
chore: enhance examples page
This commit is contained in:
parent
cd1aa81d93
commit
14b918b7ae
@ -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',
|
||||
|
@ -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'),
|
||||
|
@ -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="
|
||||
|
Loading…
Reference in New Issue
Block a user