More work on docs
This commit is contained in:
parent
b699a39b0f
commit
516c82d5c0
packages
core/lib
docs/lib
|
@ -13,7 +13,7 @@ import {
|
|||
ITreeNode,
|
||||
} from '../types';
|
||||
import { model } from '../block-helpers';
|
||||
import { Mode, SbMode } from '../mode';
|
||||
import { SymMode, SbMode } from '../mode';
|
||||
import { SymBlockLibrary} from '../use-dynamic-blocks';
|
||||
import {
|
||||
SymBlockTree,
|
||||
|
@ -58,7 +58,7 @@ export const SbMain = defineComponent({
|
|||
useResizeObserver(el, SymEditorDimensions);
|
||||
|
||||
const mode = ref(props.mode);
|
||||
provide(Mode, mode);
|
||||
provide(SymMode, mode);
|
||||
|
||||
const activeBlock = ref(null);
|
||||
provide(SymActiveBlock, activeBlock);
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
/**
|
||||
* The mode the Schlechtenburg editor is currently in
|
||||
*/
|
||||
export enum SbMode {
|
||||
Edit = 'edit',
|
||||
Display = 'display',
|
||||
}
|
||||
export const Mode = Symbol('Schlechtenburg mode');
|
||||
export const SymMode = Symbol('Schlechtenburg mode');
|
||||
|
|
|
@ -4,11 +4,11 @@ import {
|
|||
reactive,
|
||||
} from 'vue';
|
||||
import { IBlockLibrary } from './types';
|
||||
import { Mode, SbMode } from './mode';
|
||||
import { SymMode, SbMode } from './mode';
|
||||
|
||||
export const SymBlockLibrary = Symbol('Schlechtenburg block library');
|
||||
export function useDynamicBlocks() {
|
||||
const mode = inject(Mode, ref(SbMode.Edit));
|
||||
const mode = inject(SymMode, ref(SbMode.Edit));
|
||||
const customBlocks: IBlockLibrary = inject(SymBlockLibrary, reactive({}));
|
||||
const getBlock = (name: string) => customBlocks[name];
|
||||
|
||||
|
|
|
@ -3,9 +3,20 @@
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #2c3e50;
|
||||
padding: 3rem 4rem;
|
||||
display: flex;
|
||||
|
||||
&--mode {
|
||||
margin-bottom: 2rem;
|
||||
&--sidemenu {
|
||||
width: 300px;
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
&--main {
|
||||
padding: 3rem 4rem;
|
||||
margin: 0 auto;
|
||||
flex-basis: 700px;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,8 +11,8 @@ export default defineComponent({
|
|||
|
||||
setup() {
|
||||
return () => <div class="app">
|
||||
<SideMenu></SideMenu>
|
||||
<RouterView></RouterView>
|
||||
<SideMenu class="app--sidemenu"></SideMenu>
|
||||
<RouterView class="app--main"></RouterView>
|
||||
</div>;
|
||||
},
|
||||
});
|
||||
|
|
|
@ -18,8 +18,26 @@ export default defineComponent({
|
|||
|
||||
setup(props) {
|
||||
const docs = props.docs;
|
||||
console.log(docs);
|
||||
return () => <section class="docs component-docs">
|
||||
<h2 id={docs.exportName}>{docs.exportName}</h2>
|
||||
<header class="docs--header">
|
||||
<h2
|
||||
class="docs--title"
|
||||
id={docs.exportName}
|
||||
>{docs.exportName}</h2>
|
||||
<p class="docs--type">Component <code><{docs.displayName} /></code></p>
|
||||
</header>
|
||||
|
||||
<p class="docs--description">{docs.description}</p>
|
||||
|
||||
<h3>Props</h3>
|
||||
|
||||
{...(docs.props || []).map(prop => <div class="component-docs--prop">
|
||||
<h4 class="component-docs--prop-name">{prop.name}</h4>
|
||||
<p class="component-docs--prop-description">{prop.description}</p>
|
||||
{prop.type ? <p>Type: <code>{prop.type.name}</code></p> : null}
|
||||
{prop.defaultValue ? <p>Default: <code>{prop.defaultValue.value}</code></p>: null}
|
||||
</div>)}
|
||||
</section>;
|
||||
},
|
||||
});
|
||||
|
|
|
@ -23,14 +23,23 @@ export default defineComponent({
|
|||
|
||||
setup(props) {
|
||||
const docs = props.docs;
|
||||
console.log(docs);
|
||||
return () => <section class="docs ts-docs">
|
||||
<h2 id={docs.name}>
|
||||
{docs.name}
|
||||
{docs.typeParameters ? getTypeParamString(docs.typeParameters) : ''}
|
||||
</h2>
|
||||
<p>{docs.kindString}</p>
|
||||
<p>{docs.comment}</p>
|
||||
<header class="docs--header">
|
||||
<h2
|
||||
class="docs--title"
|
||||
id={docs.name}
|
||||
>
|
||||
{docs.name}
|
||||
{docs.typeParameters ? getTypeParamString(docs.typeParameters) : ''}
|
||||
</h2>
|
||||
<p class="docs--type">{docs.kindString}</p>
|
||||
</header>
|
||||
|
||||
<p class="docs--description">{docs.comment?.shortText || ''}</p>
|
||||
|
||||
{...(docs.children || []).map(child => <pre><code>
|
||||
{child.name}: {child.type?.name}
|
||||
</code></pre>)}
|
||||
</section>;
|
||||
},
|
||||
});
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
export const getShortPackageName = (name: string) => {
|
||||
const parts = name.split('/');
|
||||
console.log(parts);
|
||||
return parts[1] || parts[0] || name;
|
||||
}
|
||||
|
|
|
@ -17,7 +17,7 @@ export default defineComponent({
|
|||
const packageName = route.params.package;
|
||||
const docs = getByName(Array.isArray(packageName) ? packageName[0] : packageName);
|
||||
if (!docs) {
|
||||
return () => <div>Unknown package name {packageName}</div>
|
||||
return () => <div>Unknown package name {packageName}</div>;
|
||||
}
|
||||
|
||||
const { lib, components } = docs;
|
||||
|
|
|
@ -1,13 +1,12 @@
|
|||
|
||||
export default [
|
||||
{
|
||||
name: 'home',
|
||||
path: '/',
|
||||
component: () => import('./pages/Introduction').then(d => d.default),
|
||||
component: () => import('./pages/Introduction'),
|
||||
},
|
||||
{
|
||||
name: 'package',
|
||||
path: '/@schlechtenburg/:package',
|
||||
component: () => import('./pages/Package').then(d => d.default),
|
||||
component: () => import('./pages/Package'),
|
||||
},
|
||||
]
|
||||
|
|
|
@ -0,0 +1,10 @@
|
|||
.sidemenu {
|
||||
&--link {
|
||||
color: #0080ff;
|
||||
padding:
|
||||
}
|
||||
|
||||
&--package-child {
|
||||
|
||||
}
|
||||
}
|
|
@ -19,18 +19,24 @@ export default defineComponent({
|
|||
setup(props) {
|
||||
const { lib, components } = props.package;
|
||||
const shortName = getShortPackageName(lib.name);
|
||||
return () => <div class="sidemenu-package">
|
||||
<RouterLink to={{
|
||||
name: 'package',
|
||||
params: { package: shortName },
|
||||
}}>{lib.name}</RouterLink>
|
||||
<ul>
|
||||
{...(lib.children || []).map(child => <li>
|
||||
<RouterLink to={{
|
||||
name: 'package',
|
||||
params: { package: shortName },
|
||||
hash: '#' + child.name,
|
||||
}}>{child.name}</RouterLink>
|
||||
return () => <div>
|
||||
<RouterLink
|
||||
class="sidemenu--link sidemenu--link_package"
|
||||
to={{
|
||||
name: 'package',
|
||||
params: { package: shortName },
|
||||
}}
|
||||
>{lib.name}</RouterLink>
|
||||
<ul class="sidemenu--package-children">
|
||||
{...(lib.children || []).map(child => <li class="sidemenu--package-child">
|
||||
<RouterLink
|
||||
class="sidemenu--link"
|
||||
to={{
|
||||
name: 'package',
|
||||
params: { package: shortName },
|
||||
hash: '#' + child.name,
|
||||
}}
|
||||
>{child.name}</RouterLink>
|
||||
</li>)}
|
||||
</ul>
|
||||
</div>;
|
||||
|
|
Loading…
Reference in a new issue