mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-24 19:59:02 +08:00
add basic new page layout
This commit is contained in:
Philipp Kühn
parent
d006f96fb3
commit
c2309a63a7
17
docs/src/assets/images/logo.svg
Normal file
17
docs/src/assets/images/logo.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<svg width="102" height="28" viewBox="0 0 102 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M41.1627 9.44277H38.8001V6.43427H35.3174V9.44277H33.6006V12.0589H35.3174V18.5991C35.3011 21.0598 36.977 22.278 39.5032 22.1717C40.4024 22.139 41.0401 21.9591 41.3917 21.8447L40.8439 19.2531C40.6722 19.2858 40.3043 19.3676 39.9773 19.3676C39.2824 19.3676 38.8001 19.106 38.8001 18.1413V12.0589H41.1627V9.44277ZM43.4314 22H46.9141V9.44277H43.4314V22ZM45.1809 7.82407C46.2192 7.82407 47.0694 7.03107 47.0694 6.05821C47.0694 5.09352 46.2192 4.30052 45.1809 4.30052C44.1508 4.30052 43.3006 5.09352 43.3006 6.05821C43.3006 7.03107 44.1508 7.82407 45.1809 7.82407ZM49.7039 26.709H53.1865V19.9889H53.2928C53.7752 21.0353 54.8298 22.2044 56.8572 22.2044C59.7186 22.2044 61.9504 19.9398 61.9504 15.7377C61.9504 11.4212 59.6205 9.27927 56.8654 9.27927C54.7644 9.27927 53.7588 10.5301 53.2928 11.552H53.1375V9.44277H49.7039V26.709ZM53.113 15.7214C53.113 13.4814 54.0613 12.0507 55.7536 12.0507C57.4786 12.0507 58.3942 13.5468 58.3942 15.7214C58.3942 17.9124 57.4622 19.433 55.7536 19.433C54.0776 19.433 53.113 17.9614 53.113 15.7214ZM70.9514 9.44277H68.5888V6.43427H65.1061V9.44277H63.3893V12.0589H65.1061V18.5991C65.0897 21.0598 66.7657 22.278 69.2918 22.1717C70.1911 22.139 70.8288 21.9591 71.1803 21.8447L70.6326 19.2531C70.4609 19.2858 70.093 19.3676 69.766 19.3676C69.0711 19.3676 68.5888 19.106 68.5888 18.1413V12.0589H70.9514V9.44277ZM77.7124 22.2044C79.7398 22.2044 80.7945 21.0353 81.2768 19.9889H81.424V22H84.8576V9.44277H81.3831V11.552H81.2768C80.8108 10.5301 79.8052 9.27927 77.7042 9.27927C74.9491 9.27927 72.6192 11.4212 72.6192 15.7377C72.6192 19.9398 74.851 22.2044 77.7124 22.2044ZM78.816 19.433C77.1074 19.433 76.1754 17.9124 76.1754 15.7214C76.1754 13.5468 77.0911 12.0507 78.816 12.0507C80.5083 12.0507 81.4567 13.4814 81.4567 15.7214C81.4567 17.9614 80.492 19.433 78.816 19.433ZM87.721 26.709H91.2036V19.9889H91.3099C91.7922 21.0353 92.8469 22.2044 94.8743 22.2044C97.7357 22.2044 99.9675 19.9398 99.9675 15.7377C99.9675 11.4212 97.6376 9.27927 94.8825 9.27927C92.7815 9.27927 91.7759 10.5301 91.3099 11.552H91.1546V9.44277H87.721V26.709ZM91.1301 15.7214C91.1301 13.4814 92.0784 12.0507 93.7707 12.0507C95.4956 12.0507 96.4113 13.5468 96.4113 15.7214C96.4113 17.9124 95.4793 19.433 93.7707 19.433C92.0947 19.433 91.1301 17.9614 91.1301 15.7214Z" fill="black"/>
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="2" width="25" height="25">
|
||||
<circle cx="12.2302" cy="14.3884" r="12.2302" fill="#C4C4C4"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<line x1="-8.63232" y1="2.87774" x2="34.5331" y2="2.87774" stroke="black" stroke-width="1.43885"/>
|
||||
<line x1="-8.63281" y1="5.75543" x2="34.5327" y2="5.75543" stroke="black" stroke-width="1.43885"/>
|
||||
<line x1="-8.63281" y1="8.63311" x2="34.5327" y2="8.63311" stroke="black" stroke-width="1.43885"/>
|
||||
<line x1="-8.63281" y1="11.5108" x2="34.5327" y2="11.5108" stroke="black" stroke-width="1.43885"/>
|
||||
<line x1="-8.63281" y1="14.3885" x2="34.5327" y2="14.3885" stroke="black" stroke-width="1.43885"/>
|
||||
<line x1="-8.63281" y1="17.2662" x2="34.5327" y2="17.2662" stroke="black" stroke-width="1.43885"/>
|
||||
<line x1="-8.63281" y1="20.1439" x2="34.5327" y2="20.1439" stroke="black" stroke-width="1.43885"/>
|
||||
<line x1="-8.63281" y1="23.0215" x2="34.5327" y2="23.0215" stroke="black" stroke-width="1.43885"/>
|
||||
<line x1="-8.63281" y1="25.8992" x2="34.5327" y2="25.8992" stroke="black" stroke-width="1.43885"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@ -28,11 +28,11 @@
|
||||
border: 4px solid rgba(0, 0, 0, 0);
|
||||
background-clip: padding-box;
|
||||
border-radius: 8px;
|
||||
background-color: rgba($colorWhite, 0);
|
||||
background-color: rgba($colorBlack, 0);
|
||||
}
|
||||
|
||||
:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba($colorWhite, 0.1);
|
||||
background-color: rgba($colorBlack, 0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
|
||||
@ -1,117 +1,110 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<div class="app__sidebar">
|
||||
<div class="app__title">
|
||||
<g-link class="app__name" to="/">
|
||||
{{ $static.metadata.siteName }}
|
||||
</g-link>
|
||||
<g-link to="https://github.com/ueberdosis/tiptap-next">
|
||||
<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>
|
||||
<div class="app__navigation">
|
||||
<g-link class="app__name" to="/">
|
||||
<img src="~@/assets/images/logo.svg">
|
||||
</g-link>
|
||||
|
||||
<portal-target name="desktop-nav" />
|
||||
<span style="position: relative">
|
||||
Search
|
||||
<div class="app__search-docsearch" />
|
||||
</span>
|
||||
<g-link to="/overview/installation">
|
||||
Documentation
|
||||
</g-link>
|
||||
<g-link to="https://github.com/ueberdosis/tiptap-next">
|
||||
GitHub
|
||||
</g-link>
|
||||
|
||||
<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__content">
|
||||
<div class="app__top-bar">
|
||||
<div class="app__inner app__top-bar-inner">
|
||||
<div class="app__search">
|
||||
<div class="app__search-button" />
|
||||
<div class="app__search-docsearch" />
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
<div class="app__sidebar">
|
||||
<portal-target name="desktop-nav" />
|
||||
</div>
|
||||
|
||||
<main class="app__main">
|
||||
<div class="app__inner">
|
||||
<slot />
|
||||
<div class="app__top-bar">
|
||||
<div class="app__inner app__top-bar-inner" />
|
||||
<div class="app__mobile-nav" v-if="menuIsVisible">
|
||||
<portal-target name="mobile-nav" />
|
||||
</div>
|
||||
</div>
|
||||
<main class="app__main">
|
||||
<div class="app__inner">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
<div class="app__page-navigation">
|
||||
<div class="app__inner">
|
||||
<page-navigation />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="app__page-navigation">
|
||||
<div class="app__inner">
|
||||
<page-navigation />
|
||||
</div>
|
||||
</div>
|
||||
<div class="app__page-footer">
|
||||
<div class="app__inner">
|
||||
<a :href="editLink" target="_blank">Edit this page on GitHub</a>
|
||||
·
|
||||
Made with 🖤 by <a href="https://twitter.com/_ueberdosis">überdosis</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<portal :to="portal">
|
||||
<nav class="app__sidebar-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--exact': $router.currentRoute.path === item.link,
|
||||
'app__link--active': $router.currentRoute.path.startsWith(item.link),
|
||||
[`app__link--${item.type}`]: item.type !== null,
|
||||
'app__link--with-children': !!item.items
|
||||
}"
|
||||
:to="item.redirect || 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--exact': $router.currentRoute.path === item.link,
|
||||
'app__link--active': $router.currentRoute.path.startsWith(item.link),
|
||||
[`app__link--${item.type}`]: item.type !== null,
|
||||
}"
|
||||
:to="item.link"
|
||||
exact
|
||||
>
|
||||
{{ item.title }}
|
||||
</g-link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</portal>
|
||||
</div>
|
||||
|
||||
<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--exact': $router.currentRoute.path === item.link,
|
||||
'app__link--active': $router.currentRoute.path.startsWith(item.link),
|
||||
[`app__link--${item.type}`]: item.type !== null,
|
||||
'app__link--with-children': !!item.items
|
||||
}"
|
||||
:to="item.redirect || 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--exact': $router.currentRoute.path === item.link,
|
||||
'app__link--active': $router.currentRoute.path.startsWith(item.link),
|
||||
[`app__link--${item.type}`]: item.type !== null,
|
||||
}"
|
||||
:to="item.link"
|
||||
exact
|
||||
>
|
||||
{{ item.title }}
|
||||
</g-link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</portal>
|
||||
<footer class="app__footer">
|
||||
<a :href="editLink" target="_blank">Edit this page on GitHub</a>
|
||||
·
|
||||
Made with 🖤 by <a href="https://twitter.com/_ueberdosis">überdosis</a>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,14 +2,37 @@ $navHeight: 4.5rem;
|
||||
$mobileBreakPoint: 600px;
|
||||
$menuBreakPoint: 800px;
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
|
||||
&__title {
|
||||
|
||||
.app {
|
||||
&__navigation {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: $navHeight;
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba($colorBlack, 0.1);
|
||||
padding: 0 2rem;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $colorWhite;
|
||||
opacity: 0.8;
|
||||
transform: translate3d(0,0,0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
&__name {
|
||||
@ -45,20 +68,6 @@ $menuBreakPoint: 800px;
|
||||
|
||||
&__search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba($colorBlack, 0.1);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
&::after {
|
||||
content: 'Search';
|
||||
color: rgba($colorBlack, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&__search-docsearch {
|
||||
@ -85,48 +94,48 @@ $menuBreakPoint: 800px;
|
||||
top: 0;
|
||||
align-self: flex-start;
|
||||
padding: 2rem;
|
||||
padding-top: $navHeight + 2rem;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
border-right: 1px solid rgba($colorBlack, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__main {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__top-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem 0;
|
||||
position: sticky;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
backdrop-filter: blur(10px);
|
||||
max-height: 100vh;
|
||||
// &__top-bar {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// padding: 1rem 0;
|
||||
// position: sticky;
|
||||
// z-index: 2;
|
||||
// top: 0;
|
||||
// backdrop-filter: blur(10px);
|
||||
// max-height: 100vh;
|
||||
|
||||
@media (min-width: $menuBreakPoint) {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
// @media (min-width: $menuBreakPoint) {
|
||||
// padding: 1.5rem 0;
|
||||
// }
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $colorWhite;
|
||||
opacity: 0.8;
|
||||
transform: translate3d(0,0,0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
// &::after {
|
||||
// content: '';
|
||||
// z-index: -1;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// background-color: $colorWhite;
|
||||
// opacity: 0.8;
|
||||
// transform: translate3d(0,0,0);
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
&__top-bar-inner {
|
||||
width: 100%;
|
||||
@ -283,6 +292,7 @@ $menuBreakPoint: 800px;
|
||||
|
||||
@media (min-width: $mobileBreakPoint) {
|
||||
padding: 2rem 0;
|
||||
padding-top: $navHeight;
|
||||
}
|
||||
}
|
||||
|
||||
@ -290,17 +300,6 @@ $menuBreakPoint: 800px;
|
||||
border-top: 1px solid rgba($colorBlack, 0.1);
|
||||
}
|
||||
|
||||
&__page-footer {
|
||||
font-size: 0.85rem;
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid rgba($colorBlack, 0.1);
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__mobile-nav {
|
||||
padding: 1rem;
|
||||
flex: 1 1 auto;
|
||||
@ -313,4 +312,9 @@ $menuBreakPoint: 800px;
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
border-top: 1px solid rgba($colorBlack, 0.1);
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user