mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add new docsearch

Browse Source
This commit is contained in:
Philipp Kühn 2020-11-06 17:11:52 +01:00
parent 15c9efc5cf
commit 6d61c0801c
4 changed files with 76 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/src/index.html
View File

@ -2,11 +2,11 @@
<html ${htmlAttrs}>
<head>
${head}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
</head>
<body ${bodyAttrs}>
${app}
${scripts}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
</body>
</html>
</html>

45
docs/src/layouts/App/base.scss
View File

@ -1,3 +1,48 @@
:root {
--docsearch-primary-color: #{$colorBlack};
--docsearch-text-color: rgb(28, 30, 33);
--docsearch-spacing: 12px;
--docsearch-icon-stroke-width: 1.4;
--docsearch-highlight-color: var(--docsearch-primary-color);
--docsearch-muted-color: rgb(150, 159, 175);
--docsearch-container-background: #{rgba($colorBlack, 0.7)};
--docsearch-logo-color: #{$colorBlack};
/* modal */
--docsearch-modal-width: 560px;
--docsearch-modal-height: 600px;
--docsearch-modal-background: rgb(245, 246, 247);
--docsearch-modal-shadow: none;
/* searchbox */
--docsearch-searchbox-height: 56px;
--docsearch-searchbox-background: rgb(235, 237, 240);
--docsearch-searchbox-focus-background: #fff;
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
/* hit */
--docsearch-hit-height: 56px;
--docsearch-hit-color: rgb(68, 73, 80);
--docsearch-hit-active-color: #fff;
--docsearch-hit-background: #fff;
--docsearch-hit-shadow: 0 1px 3px 0 rgb(212, 217, 225);
/* key */
--docsearch-key-gradient: linear-gradient(
-225deg,
rgb(213, 219, 228) 0%,
rgb(248, 248, 248) 100%
);
--docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230),
inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
/* footer */
--docsearch-footer-height: 44px;
--docsearch-footer-background: #fff;
--docsearch-footer-shadow: 0 -1px 0 0 rgb(224, 227, 232),
0 -3px 6px 0 rgba(69, 98, 155, 0.12);
}
*,
*::before,
*::after {

7
docs/src/layouts/App/index.vue
View File

@ -102,7 +102,10 @@
<div class="app__content">
<div class="app__top-bar">
<div class="app__inner app__top-bar-inner">
<input class="app__search" type="search" placeholder="Search">
<div class="app__search">
<div class="app__search-button" />
<div class="app__search-docsearch" />
</div>
<button
class="app__menu-icon"
@click="menuIsVisible = true"
@ -238,7 +241,7 @@ export default {
docsearch({
apiKey: '1abe7fb0f0dac150d0e963d2eda930fe',
indexName: 'ueberdosis_tiptap',
inputSelector: '.app__search',
container: '.app__search-docsearch',
debug: false,
})
},

27
docs/src/layouts/App/style.scss
View File

@ -29,15 +29,34 @@ $menuBreakPoint: 800px;
}
&__search {
display: block;
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 3rem;
overflow: hidden;
background-color: transparent;
border: 1px solid rgba($colorWhite, 0.1);
border-radius: 0.5rem;
font: inherit;
color: $colorWhite;
padding: 0.5rem 0.75rem;
-webkit-appearance: none;
&::after {
content: 'Search';
color: rgba($colorWhite, 0.5);
}
}
&__search-docsearch {
::v-deep > button {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
}
}
&__sidebar {