2020-04-17 23:06:55 +08:00
|
|
|
<template>
|
2020-10-12 19:58:41 +08:00
|
|
|
<!-- <div class="app">
|
2020-04-17 23:06:55 +08:00
|
|
|
<header class="app__header">
|
2020-04-23 03:57:26 +08:00
|
|
|
<div class="app__header-inner">
|
|
|
|
<g-link class="app__logo" to="/">
|
|
|
|
{{ $static.metadata.siteName }}
|
|
|
|
</g-link>
|
2020-04-23 18:22:59 +08:00
|
|
|
<div>
|
2020-09-24 06:29:05 +08:00
|
|
|
<input class="search" type="search" placeholder="Search">
|
2020-08-13 18:56:06 +08:00
|
|
|
<a href="https://github.com/sponsors/ueberdosis">
|
|
|
|
Sponsor
|
|
|
|
</a>
|
2020-04-23 18:22:59 +08:00
|
|
|
<github-button
|
2020-08-11 22:35:13 +08:00
|
|
|
href="https://github.com/ueberdosis/tiptap"
|
2020-04-23 18:22:59 +08:00
|
|
|
data-show-count="true"
|
2020-08-11 22:35:13 +08:00
|
|
|
aria-label="Star ueberdosis/tiptap on GitHub"
|
2020-04-23 18:22:59 +08:00
|
|
|
/>
|
|
|
|
<button
|
|
|
|
class="app__menu-icon"
|
|
|
|
@click="menuIsVisible = true"
|
|
|
|
v-if="!menuIsVisible"
|
|
|
|
>
|
|
|
|
<icon name="menu" />
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
class="app__close-icon"
|
|
|
|
@click="menuIsVisible = false"
|
|
|
|
v-if="menuIsVisible"
|
|
|
|
>
|
|
|
|
<icon name="close" />
|
|
|
|
</button>
|
|
|
|
</div>
|
2020-04-23 03:57:26 +08:00
|
|
|
</div>
|
2020-04-17 23:06:55 +08:00
|
|
|
</header>
|
|
|
|
<div class="app__content">
|
2020-04-23 18:22:59 +08:00
|
|
|
<div class="app__sidebar-wrapper" :class="{ 'is-mobile-visible': menuIsVisible }">
|
2020-04-23 03:23:24 +08:00
|
|
|
<nav class="app__sidebar">
|
|
|
|
<div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
|
|
|
|
<div class="app__link-group-title">
|
|
|
|
{{ linkGroup.title }}
|
|
|
|
</div>
|
2020-08-21 03:30:05 +08:00
|
|
|
<ul class="app__link-list">
|
2020-04-23 03:23:24 +08:00
|
|
|
<li v-for="(item, j) in linkGroup.items" :key="j">
|
2020-09-26 04:37:37 +08:00
|
|
|
<g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true, 'app__link--with-children': item.items }" :to="item.link" :exact="item.link === '/'">
|
2020-04-23 03:23:24 +08:00
|
|
|
{{ item.title }}
|
|
|
|
</g-link>
|
2020-08-19 03:39:41 +08:00
|
|
|
|
2020-08-21 03:30:05 +08:00
|
|
|
<ul v-if="item.items" class="app__link-list">
|
2020-08-19 03:39:41 +08:00
|
|
|
<li v-for="(item, k) in item.items" :key="k">
|
2020-09-01 23:06:34 +08:00
|
|
|
<g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true }" :to="item.link" exact>
|
2020-08-21 03:30:05 +08:00
|
|
|
{{ item.title }}
|
2020-08-19 03:39:41 +08:00
|
|
|
</g-link>
|
|
|
|
</li>
|
|
|
|
</ul>
|
2020-04-23 03:23:24 +08:00
|
|
|
</li>
|
|
|
|
</ul>
|
2020-04-19 04:35:29 +08:00
|
|
|
</div>
|
2020-04-23 03:23:24 +08:00
|
|
|
</nav>
|
|
|
|
</div>
|
2020-04-19 04:35:29 +08:00
|
|
|
<main class="app__main">
|
2020-09-24 06:29:05 +08:00
|
|
|
<slot />
|
2020-08-13 16:12:52 +08:00
|
|
|
<p>
|
2020-09-24 06:29:05 +08:00
|
|
|
<br>
|
2020-08-13 16:12:52 +08:00
|
|
|
<a :href="editLink" target="_blank">
|
2020-08-13 16:13:56 +08:00
|
|
|
<span>Edit this page on GitHub</span>
|
2020-08-13 16:12:52 +08:00
|
|
|
</a>
|
|
|
|
</p>
|
2020-08-28 19:20:49 +08:00
|
|
|
<p>
|
|
|
|
Made with 🖤 by <a href="https://twitter.com/_ueberdosis">überdosis</a>
|
|
|
|
</p>
|
2020-04-19 04:35:29 +08:00
|
|
|
<page-navigation />
|
|
|
|
</main>
|
2020-04-17 23:06:55 +08:00
|
|
|
</div>
|
2020-10-12 19:58:41 +08:00
|
|
|
</div> -->
|
|
|
|
|
|
|
|
<div class="app">
|
|
|
|
<div class="app__sidebar">
|
2020-10-12 23:43:20 +08:00
|
|
|
<div class="app__title">
|
|
|
|
<g-link class="app__name" to="/">
|
|
|
|
{{ $static.metadata.siteName }}
|
|
|
|
</g-link>
|
|
|
|
<g-link to="https://github.com/ueberdosis/tiptap">
|
|
|
|
<svg
|
|
|
|
class="app__github"
|
|
|
|
width="15"
|
|
|
|
height="15"
|
|
|
|
fill="none"
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
viewBox="0 0 15 15"
|
|
|
|
><path
|
|
|
|
d="M7.49936 0.849976C3.82767 0.849976 0.849976 3.82727 0.849976 7.5002C0.849976 10.4379 2.75523 12.9306 5.39775 13.8103C5.73047 13.8712 5.85171 13.6658 5.85171 13.4895C5.85171 13.3315 5.846 12.9134 5.84273 12.3586C3.99301 12.7603 3.60273 11.467 3.60273 11.467C3.30022 10.6987 2.86423 10.4942 2.86423 10.4942C2.26044 10.0819 2.90995 10.0901 2.90995 10.0901C3.57742 10.137 3.9285 10.7755 3.9285 10.7755C4.52167 11.7916 5.48512 11.4981 5.86396 11.3278C5.92438 10.8984 6.09625 10.6052 6.28608 10.4391C4.80948 10.2709 3.25695 9.7006 3.25695 7.15238C3.25695 6.42612 3.51618 5.83295 3.94157 5.36797C3.87299 5.19977 3.64478 4.52372 4.00689 3.60804C4.00689 3.60804 4.56494 3.42923 5.83538 4.28938C6.36568 4.14201 6.93477 4.06853 7.50018 4.06567C8.06518 4.06853 8.63386 4.14201 9.16498 4.28938C10.4346 3.42923 10.9918 3.60804 10.9918 3.60804C11.3548 4.52372 11.1266 5.19977 11.0584 5.36797C11.4846 5.83295 11.7418 6.42612 11.7418 7.15238C11.7418 9.70713 10.1868 10.2693 8.70571 10.4338C8.94412 10.6391 9.15681 11.0449 9.15681 11.6654C9.15681 12.5542 9.14865 13.2715 9.14865 13.4895C9.14865 13.6675 9.26867 13.8744 9.60588 13.8095C12.2464 12.9281 14.15 10.4375 14.15 7.5002C14.15 3.82727 11.1723 0.849976 7.49936 0.849976Z"
|
|
|
|
fill="currentColor"
|
|
|
|
fill-rule="evenodd"
|
|
|
|
clip-rule="evenodd"
|
|
|
|
/></svg>
|
|
|
|
</g-link>
|
|
|
|
</div>
|
|
|
|
|
2020-10-13 00:42:47 +08:00
|
|
|
<portal-target name="desktop-nav" />
|
2020-10-12 19:58:41 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="app__content">
|
|
|
|
<div class="app__top-bar">
|
2020-10-13 00:42:47 +08:00
|
|
|
<div class="app__inner app__top-bar-inner">
|
2020-10-12 19:58:41 +08:00
|
|
|
<input class="app__search" type="search" placeholder="Search">
|
2020-10-13 00:42:47 +08:00
|
|
|
<button
|
|
|
|
class="app__menu-icon"
|
|
|
|
@click="menuIsVisible = true"
|
|
|
|
v-if="!menuIsVisible"
|
|
|
|
>
|
|
|
|
<icon name="menu" />
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
class="app__close-icon"
|
|
|
|
@click="menuIsVisible = false"
|
|
|
|
v-if="menuIsVisible"
|
|
|
|
>
|
|
|
|
<icon name="close" />
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="app__mobile-nav" v-if="menuIsVisible">
|
|
|
|
<portal-target name="mobile-nav" />
|
2020-10-12 19:58:41 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-10-13 00:09:20 +08:00
|
|
|
<main class="app__main">
|
|
|
|
<div class="app__inner">
|
2020-10-12 19:58:41 +08:00
|
|
|
<slot />
|
2020-10-13 00:09:20 +08:00
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<div class="app__page-navigation">
|
|
|
|
<div class="app__inner">
|
2020-10-12 19:58:41 +08:00
|
|
|
<page-navigation />
|
2020-10-13 00:09:20 +08:00
|
|
|
</div>
|
2020-10-12 19:58:41 +08:00
|
|
|
</div>
|
2020-10-28 23:32:37 +08:00
|
|
|
<!-- TODO: -->
|
|
|
|
<div>
|
|
|
|
<a :href="editLink" target="_blank">
|
|
|
|
<span>Edit this page on GitHub</span> ·
|
|
|
|
</a>
|
|
|
|
Made with 🖤 by <a href="https://twitter.com/_ueberdosis">überdosis</a>
|
|
|
|
</div>
|
2020-10-12 19:58:41 +08:00
|
|
|
</div>
|
2020-10-13 00:42:47 +08:00
|
|
|
|
|
|
|
<portal :to="portal">
|
|
|
|
<nav class="app__navigation">
|
|
|
|
<div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
|
|
|
|
<div class="app__link-group-title">
|
|
|
|
{{ linkGroup.title }}
|
|
|
|
</div>
|
|
|
|
<ul class="app__link-list">
|
|
|
|
<li v-for="(item, j) in linkGroup.items" :key="j">
|
|
|
|
<g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true, 'app__link--with-children': item.items }" :to="item.link" :exact="item.link === '/'">
|
|
|
|
{{ item.title }}
|
|
|
|
</g-link>
|
|
|
|
|
|
|
|
<ul v-if="item.items" class="app__link-list">
|
|
|
|
<li v-for="(item, k) in item.items" :key="k">
|
|
|
|
<g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true }" :to="item.link" exact>
|
|
|
|
{{ item.title }}
|
|
|
|
</g-link>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
</portal>
|
2020-04-17 23:06:55 +08:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<static-query>
|
|
|
|
query {
|
|
|
|
metadata {
|
|
|
|
siteName
|
|
|
|
}
|
2020-04-18 18:48:20 +08:00
|
|
|
}
|
|
|
|
</static-query>
|
|
|
|
|
|
|
|
<script>
|
2020-04-24 16:03:15 +08:00
|
|
|
import linkGroups from '@/links.yaml'
|
2020-10-13 00:42:47 +08:00
|
|
|
import Icon from '@/components/Icon'
|
2020-04-19 01:50:06 +08:00
|
|
|
import PageNavigation from '@/components/PageNavigation'
|
2020-10-12 23:45:38 +08:00
|
|
|
// import GithubButton from 'vue-github-button'
|
2020-04-18 18:48:20 +08:00
|
|
|
|
|
|
|
export default {
|
2020-04-19 01:50:06 +08:00
|
|
|
components: {
|
2020-10-13 00:42:47 +08:00
|
|
|
Icon,
|
2020-04-19 01:50:06 +08:00
|
|
|
PageNavigation,
|
2020-10-12 23:45:38 +08:00
|
|
|
// GithubButton,
|
2020-04-19 01:50:06 +08:00
|
|
|
},
|
|
|
|
|
2020-04-18 18:48:20 +08:00
|
|
|
data() {
|
|
|
|
return {
|
2020-04-19 01:50:06 +08:00
|
|
|
linkGroups,
|
2020-04-23 18:22:59 +08:00
|
|
|
menuIsVisible: false,
|
2020-10-13 00:42:47 +08:00
|
|
|
windowWidth: null,
|
2020-04-17 23:06:55 +08:00
|
|
|
}
|
2020-04-19 01:50:06 +08:00
|
|
|
},
|
2020-08-13 16:12:52 +08:00
|
|
|
|
|
|
|
computed: {
|
2020-10-13 00:42:47 +08:00
|
|
|
portal() {
|
|
|
|
if (this.windowWidth && this.windowWidth < 800) {
|
|
|
|
return 'mobile-nav'
|
|
|
|
}
|
|
|
|
|
|
|
|
return 'desktop-nav'
|
|
|
|
},
|
|
|
|
|
2020-09-24 06:29:05 +08:00
|
|
|
currentPath() {
|
2020-08-13 16:12:52 +08:00
|
|
|
return this.$route.matched[0].path
|
|
|
|
},
|
2020-10-13 00:42:47 +08:00
|
|
|
|
2020-09-24 06:29:05 +08:00
|
|
|
editLink() {
|
|
|
|
const { currentPath } = this
|
2020-09-21 23:17:28 +08:00
|
|
|
const filePath = currentPath === '' ? '/introduction' : currentPath
|
2020-08-13 16:12:52 +08:00
|
|
|
|
2020-09-21 23:17:28 +08:00
|
|
|
return `https://github.com/ueberdosis/tiptap-next/blob/main/docs/src/docPages${filePath}.md`
|
2020-08-13 16:12:52 +08:00
|
|
|
},
|
2020-08-13 23:27:34 +08:00
|
|
|
},
|
|
|
|
|
2020-10-13 00:42:47 +08:00
|
|
|
watch: {
|
|
|
|
$route() {
|
|
|
|
this.menuIsVisible = false
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2020-08-13 23:27:34 +08:00
|
|
|
methods: {
|
|
|
|
initSearch() {
|
2020-09-24 06:29:05 +08:00
|
|
|
// eslint-disable-next-line
|
2020-08-13 23:27:34 +08:00
|
|
|
docsearch({
|
|
|
|
apiKey: '1abe7fb0f0dac150d0e963d2eda930fe',
|
|
|
|
indexName: 'ueberdosis_tiptap',
|
2020-10-12 19:58:41 +08:00
|
|
|
inputSelector: '.app__search',
|
2020-08-13 23:27:34 +08:00
|
|
|
debug: false,
|
|
|
|
})
|
2020-09-24 06:29:05 +08:00
|
|
|
},
|
2020-10-13 00:42:47 +08:00
|
|
|
|
|
|
|
handleResize() {
|
|
|
|
this.windowWidth = window.innerWidth
|
|
|
|
},
|
2020-08-13 23:27:34 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
this.initSearch()
|
2020-10-13 00:42:47 +08:00
|
|
|
this.handleResize()
|
|
|
|
|
|
|
|
window.addEventListener('resize', this.handleResize)
|
|
|
|
},
|
|
|
|
|
|
|
|
beforeDestroy() {
|
|
|
|
window.removeEventListener('resize', this.handleResize)
|
2020-08-13 23:27:34 +08:00
|
|
|
},
|
2020-04-17 23:06:55 +08:00
|
|
|
}
|
2020-04-18 18:48:20 +08:00
|
|
|
</script>
|
2020-04-17 23:06:55 +08:00
|
|
|
|
2020-04-18 05:18:18 +08:00
|
|
|
<style lang="scss" src="./fonts.scss"></style>
|
2020-04-18 18:48:20 +08:00
|
|
|
<style lang="scss" src="./base.scss"></style>
|
2020-04-18 05:35:07 +08:00
|
|
|
<style lang="scss" src="./prism.scss"></style>
|
2020-09-24 06:29:05 +08:00
|
|
|
<style lang="scss" src="./style.scss" scoped></style>
|