remove live-demo and typedoc
This commit is contained in:
Philipp Kühn
@@ -1,86 +0,0 @@
|
||||
<template>
|
||||
<div class="live-demo-template">
|
||||
<div class="live-demo-template__preview">
|
||||
<slot name="preview" />
|
||||
</div>
|
||||
<div class="live-demo-template__editor">
|
||||
<slot name="editor" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
let firstLoad = true
|
||||
const pre = this.$el.getElementsByClassName('prism-editor__editor')[0]
|
||||
const textarea = this.$el.getElementsByClassName('prism-editor__textarea')[0]
|
||||
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
const width = pre.scrollWidth
|
||||
const height = pre.scrollHeight
|
||||
textarea.style.width = `${width}px`
|
||||
textarea.style.height = `${height}px`
|
||||
|
||||
if (!firstLoad) {
|
||||
textarea.blur()
|
||||
textarea.focus()
|
||||
}
|
||||
|
||||
firstLoad = false
|
||||
})
|
||||
|
||||
resizeObserver.observe(pre)
|
||||
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
resizeObserver.unobserve(pre)
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.live-demo-template {
|
||||
background-color: $colorWhite;
|
||||
overflow: hidden;
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
|
||||
&__preview {
|
||||
padding: 1.25rem;
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-width: 0;
|
||||
color: $colorBlack;
|
||||
}
|
||||
|
||||
&__editor {
|
||||
border: 1px solid rgba($colorWhite, 0.1);
|
||||
background-color: $colorBlack;
|
||||
}
|
||||
|
||||
&__editor ::v-deep {
|
||||
.prism-editor-wrapper {
|
||||
overflow: auto;
|
||||
max-height: unquote("max(300px, 60vh)");
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.prism-editor__container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.prism-editor__textarea {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
resize: none;
|
||||
-webkit-text-fill-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<div class="live-demo">
|
||||
<template v-if="file">
|
||||
<div class="live-demo__preview">
|
||||
<vue-live
|
||||
:code="file.content"
|
||||
:layout="CustomLayout"
|
||||
:requires="requires"
|
||||
/>
|
||||
</div>
|
||||
<div class="live-demo__meta">
|
||||
<div class="live-demo__name">
|
||||
Demo/{{ name }}
|
||||
</div>
|
||||
<a class="live-demo__link" :href="githubUrl" target="_blank">
|
||||
Edit on GitHub →
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="live-demo__error">
|
||||
Could not find a demo called “{{ name }}”.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
<static-query>
|
||||
query {
|
||||
packages: allPackage {
|
||||
edges {
|
||||
node {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</static-query>
|
||||
*/
|
||||
// import collect from 'collect.js'
|
||||
import { VueLive } from 'vue-live'
|
||||
import CustomLayout from './CustomLayout'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueLive,
|
||||
},
|
||||
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
files: [],
|
||||
content: null,
|
||||
currentIndex: 0,
|
||||
CustomLayout,
|
||||
syntax: {
|
||||
vue: 'html',
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
requires() {
|
||||
// const names = this.$static.packages.edges
|
||||
// .map(item => item.node.name)
|
||||
// .filter(name => name !== 'html')
|
||||
|
||||
// const packages = Object.fromEntries(names.map(name => {
|
||||
// const module = require(`~/../../packages/${name}/index.ts`)
|
||||
// const onlyDefault = module.default && Object.keys(module).length === 1
|
||||
|
||||
// return [`@tiptap/${name}`, onlyDefault ? module.default : module]
|
||||
// }))
|
||||
|
||||
// return packages
|
||||
return {}
|
||||
},
|
||||
|
||||
file() {
|
||||
return this.files[0]
|
||||
},
|
||||
|
||||
githubUrl() {
|
||||
return `https://github.com/ueberdosis/tiptap-next/tree/main/docs/src/demos/${this.name}`
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// this.files = collect(require.context('~/demos/', true, /.+\..+$/).keys())
|
||||
// .filter(path => path.startsWith(`./${this.name}/index.vue`))
|
||||
// .map(path => path.replace('./', ''))
|
||||
// .map(path => {
|
||||
// return {
|
||||
// path,
|
||||
// name: path.replace(`${this.name}/`, ''),
|
||||
// content: require(`!!raw-loader!~/demos/${path}`).default,
|
||||
// }
|
||||
// })
|
||||
// .toArray()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="./style.scss" scoped />
|
||||
@@ -1,58 +0,0 @@
|
||||
.live-demo {
|
||||
background-color: $colorWhite;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem;
|
||||
|
||||
&__preview {
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
color: rgba($colorWhite, 0.7);
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 5px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
&:first-child {
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&:hover {
|
||||
color: $colorWhite;
|
||||
background-color: rgba($colorWhite, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
pre {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0.5rem 1.25rem;
|
||||
border: 1px solid rgba($colorWhite, 0.1);
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
border-top-width: 0;
|
||||
background-color: $colorBlack;
|
||||
}
|
||||
|
||||
&__error {
|
||||
padding: 1.25rem;
|
||||
color: $colorRed;
|
||||
background-color: rgba($colorRed, 0.1);
|
||||
}
|
||||
}
|
||||
@@ -42,9 +42,7 @@
|
||||
</div>
|
||||
|
||||
<main class="app__main">
|
||||
<div class="app__inner">
|
||||
<slot />
|
||||
</div>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<portal :to="menuPortal">
|
||||
|
||||
@@ -3,8 +3,6 @@ $mobileBreakPoint: 600px;
|
||||
$menuBreakPoint: 800px;
|
||||
|
||||
.app {
|
||||
overflow: hidden;
|
||||
|
||||
&__navigation {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
@@ -153,6 +151,7 @@ $menuBreakPoint: 800px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
padding-top: $navHeight;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__menu-icon,
|
||||
|
||||
@@ -51,5 +51,4 @@ export default function (Vue) {
|
||||
|
||||
Vue.component('Layout', App)
|
||||
Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo'))
|
||||
Vue.component('LiveDemo', () => import(/* webpackChunkName: "live-demo" */ '~/components/LiveDemo'))
|
||||
}
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div>
|
||||
<div v-for="(file, i) in this.package.children" :key="i">
|
||||
<h2>
|
||||
{{ file.name }}
|
||||
</h2>
|
||||
<div v-for="(bla, j) in file.children" :key="j">
|
||||
<template v-if="['Class', 'Method', 'Module'].includes(bla.kindString)">
|
||||
<h3>
|
||||
{{ bla.name }}
|
||||
</h3>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// props: {
|
||||
// package: {
|
||||
// default: null,
|
||||
// type: Object
|
||||
// }
|
||||
// },
|
||||
|
||||
computed: {
|
||||
package() {
|
||||
console.log(this.$context.package)
|
||||
return this.$context.package
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="./style.scss" scoped></style>
|
||||
Reference in New Issue
Block a user