ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 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
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/index.html
View File

@@ -2,11 +2,11 @@
<html ${htmlAttrs}> <html ${htmlAttrs}>
<head> <head>
${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> </head>
<body ${bodyAttrs}> <body ${bodyAttrs}>
${app} ${app}
${scripts} ${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> </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, *::before,
*::after { *::after {

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

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

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

@@ -29,15 +29,34 @@ $menuBreakPoint: 800px;
} }
&__search { &__search {
display: block; position: relative;
display: flex;
align-items: center;
width: 100%; width: 100%;
height: 3rem;
overflow: hidden;
background-color: transparent; background-color: transparent;
border: 1px solid rgba($colorWhite, 0.1); border: 1px solid rgba($colorWhite, 0.1);
border-radius: 0.5rem; border-radius: 0.5rem;
font: inherit;
color: $colorWhite;
padding: 0.5rem 0.75rem; 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 { &__sidebar {