saul365/LoveIt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(search): add local search (#231)

Browse Source 
* feat(search): add local search

* docs: add docs for search
This commit is contained in:
Dillon
2020-04-15 15:46:50 +08:00
committed by GitHub
parent b6ce753ae7
commit 90184ca3e7
92 changed files with 4843 additions and 1214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/_partial/_archive/_tags.scss
View File

@@ -8,25 +8,18 @@
position: relative;
margin: 5px 10px;
overflow-wrap: break-word;
-webkit-transition: all ease-out .3s;
-moz-transition: all ease-out .3s;
-o-transition: all ease-out .3s;
transition: all ease-out .3s;
@include transition(all ease-out 0.3s);
&:active,
&:focus,
&:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
@include transform(scale(1.2));
}
sup {
color: $global-font-secondary-color;
.dark-theme & {
.dark & {
color: $global-font-secondary-color-dark;
}
}

9
assets/css/_partial/_archive/_terms.scss
View File

@@ -44,7 +44,6 @@
.archive-item-link {
display: inline-block;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -55,15 +54,11 @@
background-color: transparent;
}
.dark-theme & {
.dark & {
color: $global-link-color-dark;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
&:hover {
color: $global-link-hover-color-dark;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
}
}
@@ -73,7 +68,7 @@
text-align: right;
color: $global-font-secondary-color;
.dark-theme & {
.dark & {
color: $global-font-secondary-color-dark;
}
}

10
assets/css/_partial/_fixed-button.scss
View File

@@ -13,7 +13,9 @@
color: $global-font-secondary-color;
background: $header-background-color;
border: 1px solid darken($global-border-color, 10%);
border-radius: 2rem;
@include border-radius(2rem);
@include blur;
&:hover, &:active {
color: $global-font-color;
@@ -24,7 +26,7 @@
outline: none;
}
.dark-theme & {
.dark & {
color: $global-font-secondary-color-dark;
background: $header-background-color-dark;
border-color: darken($global-border-color-dark, 10%);
@@ -35,11 +37,11 @@
}
}
#top-button {
#back-to-top {
display: block;
bottom: 1.5rem;
}
#comment-button {
#view-comments {
bottom: 4.5rem;
}

23
assets/css/_partial/_footer.scss
View File

@@ -1,12 +1,21 @@
/**Footer**/
.copyright {
font-size: .875rem;
footer {
height: 2rem;
width: 100%;
text-align: center;
line-height: 1.5rem;
padding-top: 2rem;
.copyright-line {
width: 100%;
.copyright {
font-size: .875rem;
.icp-br {
display: none;
.copyright-line {
width: 100%;
.icp-br {
display: none;
}
}
}
@include blur;
}

408
assets/css/_partial/_header.scss
View File

@@ -1,73 +1,169 @@
header {
width: 100%;
z-index: 100;
z-index: 150;
background-color: $header-background-color;
.dark-theme & {
.dark & {
background-color: $header-background-color-dark;
}
}
.header-title {
font-family: $header-title-font-family;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.header-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
width: 100%;
}
.header-title {
font-family: $header-title-font-family;
font-weight: bold;
margin-right: .5rem;
min-width: 10%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include flex(10);
}
.menu .menu-item {
position: relative;
}
.language-select {
position: absolute;
opacity: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
&:hover {
cursor: pointer;
}
}
.menu .menu-item {
position: relative;
}
.search {
position: relative;
.language-select {
position: absolute;
opacity: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
input {
color: transparent;
box-sizing: border-box;
height: 2.5rem;
width: 2.5rem;
@include border-radius(.5rem);
border: none;
outline: none;
background-color: $header-background-color;
vertical-align: baseline !important;
@include transition(width 0.3s ease 0s);
&:hover {
cursor: pointer;
.dark & {
background-color: $header-background-color-dark;
}
}
.theme-switch i {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
@include placeholder(transparent);
.search-button {
margin: 0;
position: absolute;
left: auto;
right: 1rem;
}
.search-toggle {
left: .5rem;
right: auto;
}
.search-loading {
display: none;
}
.search-clear {
display: none;
}
.open &, &.mobile {
input {
color: $global-font-color;
background-color: $search-background-color;
padding: 0 2rem 0 2rem;
}
.dark & {
input {
color: $global-font-color-dark;
background-color: $search-background-color-dark;
}
@include placeholder($global-font-secondary-color-dark);
}
@include placeholder($global-font-secondary-color);
.search-button {
color: $global-font-secondary-color;
.dark & {
color: $global-font-secondary-color-dark;
}
}
.search-clear:hover {
color: #ff6b6b;
}
.search-toggle:hover {
cursor: default;
}
}
}
.theme-switch i {
@include transform(rotate(225deg));
}
#header-desktop {
display: block;
position: $header-position-desktop;
height: $header-height-desktop;
line-height: $header-height-desktop;
height: $header-height;
line-height: $header-height;
.header-wrapper {
width: auto;
text-align: center;
padding: 0 3%;
display: flex;
justify-content: space-between;
padding: 0 1.5rem;
.header-title {
font-size: $header-title-font-size-desktop;
max-width: 30%;
}
.menu {
overflow: hidden;
white-space: nowrap;
.menu-inner {
float: right;
}
.menu-item {
margin: 0 .5rem;
&.theme-switch {
margin: 0 .3rem;
&.delimiter {
border-left: 1.5px solid $global-font-color;
.dark & {
border-left-color: $global-border-color-dark;
}
}
&.language {
margin-right: 0;
}
&.search {
margin: 0 -.5rem 0 0;
}
}
@@ -75,58 +171,56 @@ header {
font-weight: 900;
color: $header-hover-color;
.dark-theme & {
.dark & {
color: $header-hover-color-dark;
}
}
}
}
&.open .header-wrapper .menu .menu-item.search {
margin: 0 .25rem 0 .5rem;
input {
width: 24rem;
}
}
}
#header-mobile {
display: none;
position: $header-position-mobile;
height: $header-height-mobile;
line-height: $header-height-mobile;
height: $header-height;
line-height: $header-height;
.header-wrapper {
.header-container {
padding: 0;
margin: 0;
transition: all 0.3s ease 0s;
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.header-wrapper {
padding: 0 1rem;
font-size: 1.125rem;
padding-right: 1rem;
padding-left: 1rem;
box-sizing: border-box;
@include transition(margin-top 0.3s ease 0s);
.header-title {
max-width: 80%;
font-size: $header-title-font-size-mobile;
max-width: 80%;
}
.menu-toggle {
cursor: pointer;
line-height: 4rem;
cursor: pointer;
@include transition(width 0.3s ease 0s);
span {
display: block;
background: $global-font-color;
width: 1.5rem;
height: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: .1s margin .1s, .1s transform;
-moz-transition: .1s margin .1s, .1s transform;
-o-transition: .1s margin .1s, .1s transform;
transition: .1s margin .1s, .1s transform;
@include border-radius(3px);
@include transition(all 0.3s ease-in-out);
.dark-theme & {
.dark & {
background: $global-font-color-dark;
}
}
@@ -140,19 +234,8 @@ header {
}
&.active {
span {
-webkit-transition: .1s margin, .1s transform .1s;
-moz-transition: .1s margin, .1s transform .1s;
-o-transition: .1s margin, .1s transform .1s;
transition: .1s margin, .1s transform .1s;
}
span:nth-child(1) {
-webkit-transform: rotate(45deg) translate(.4rem, .5rem);
-moz-transform: rotate(45deg) translate(.4rem, .5rem);
-ms-transform: rotate(45deg) translate(.4rem, .5rem);
-o-transform: rotate(45deg) translate(.4rem, .5rem);
transform: rotate(45deg) translate(.4rem, .5rem);
@include transform(rotate(45deg) translate(.4rem, .5rem));
}
span:nth-child(2) {
@@ -160,11 +243,7 @@ header {
}
span:nth-child(3) {
-moz-transform: rotate(-45deg) translate(.4rem, -.5rem);
-ms-transform: rotate(-45deg) translate(.4rem, -.5rem);
-webkit-transform: rotate(-45deg) translate(.4rem, -.5rem);
-o-transform: rotate(-45deg) translate(.4rem, -.5rem);
transform: rotate(-45deg) translate(.4rem, -.5rem);
@include transform(rotate(-45deg) translate(.4rem, -.5rem));
}
}
}
@@ -172,12 +251,35 @@ header {
.menu {
text-align: center;
background: $global-background-color;
border-top: 2px solid $global-font-color;
background: $header-background-color;
border-top: 2px solid $global-border-color;
display: none;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
padding-top: .5rem;
@include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
a {
.search-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: ($header-height - 2.5rem) / 2 1rem;
line-height: 2.5rem;
}
.search {
flex-grow: 10;
.algolia-autocomplete, input {
width: 100%;
}
}
.search-cancel {
display: none;
margin-left: .75rem;
}
.menu-item {
display: block;
line-height: 2.5rem;
}
@@ -186,9 +288,149 @@ header {
display: block;
}
.dark-theme & {
background: $global-background-color-dark;
border-top: 2px solid $global-font-color-dark;
.dark & {
background: $header-background-color-dark;
border-top-color: $global-border-color-dark;
}
}
}
&.open {
.header-wrapper {
margin-top: -$header-height;
}
.menu {
padding-top: 0;
border-top: none;
.menu-item {
display: none;
}
.search-cancel {
display: inline;
}
}
}
}
.search-dropdown {
position: fixed;
z-index: 200;
top: $header-height;
@include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
&.desktop {
right: 1.5rem;
width: 30rem;
}
&.mobile {
right: 0;
width: 100%;
}
.dropdown-menu {
right: 0 !important;
background-color: $global-background-color;
.dark & {
background-color: $global-background-color-dark;
}
.suggestions {
overflow-y: auto;
max-height: calc(100vh - #{$header-height});
.suggestion {
padding: .75rem 1rem;
.suggestion-title {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1rem;
font-weight: bold;
max-width: 75%;
}
.suggestion-date {
font-size: .875rem;
float: right;
text-align: right;
color: $global-font-secondary-color;
.dark & {
color: $global-font-secondary-color-dark;
}
}
.suggestion-context {
line-height: 1.25rem;
@include box(vertical);
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
color: $global-font-secondary-color;
.dark & {
color: $global-font-secondary-color-dark;
}
}
em {
font-style: normal;
background-color: $selection-color;
.dark & {
background-color: $selection-color-dark;
}
}
&.cursor {
background: darken($code-background-color, 5%);
.dark & {
background: lighten($code-background-color-dark, 5%);
}
}
&:hover {
cursor: pointer;
}
}
}
.search-empty {
padding: 1rem;
text-align: center;
.search-query {
font-weight: bold;
.dark & {
color: #ddd;
}
}
}
.search-footer {
padding: .5rem 1rem;
float: right;
font-size: .8rem;
color: $global-font-secondary-color;
.dark {
color: $global-font-secondary-color-dark;
}
@include link(false, false);
a {
font-size: 1rem;
}
}
}

16
assets/css/_partial/_mask.scss Normal file
View File

@@ -0,0 +1,16 @@
#mask {
background-repeat: no-repeat;
background-position: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgba(0, 0, 0, 0);
.blur & {
z-index: 100;
background-color: rgba(0, 0, 0, .25);
}
}

14
assets/css/_partial/_pagination.scss
View File

@@ -1,4 +1,3 @@
/** pagination **/
.pagination {
display: flex;
flex-direction: row;
@@ -9,14 +8,13 @@
padding: 1rem 0 0;
a {
-webkit-font-smoothing: antialiased;
font-size: .8rem;
color: #bfbfbf;
letter-spacing: .1rem;
font-weight: 700;
padding: 5px 5px;
text-decoration: none;
transition: 0.3s;
@include transition(0.3s);
}
li {
@@ -34,7 +32,7 @@
color: $pagination-link-hover-color;
}
.dark-theme &:hover a {
.dark &:hover a {
color: $pagination-link-hover-color-dark;
}
@@ -45,12 +43,12 @@
width: 0;
height: 3px;
background: $pagination-link-hover-color;
transition: 0.3s;
@include transition(0.3s);
bottom: 0px;
}
.dark-theme &:before,
.dark-theme &:after {
.dark &:before,
.dark &:after {
background: $pagination-link-hover-color-dark;
}
@@ -80,7 +78,7 @@
color: $pagination-link-hover-color;
}
.dark-theme & a {
.dark & a {
color: $pagination-link-hover-color-dark;
}

4
assets/css/_partial/_single/_admonition.scss
View File

@@ -68,7 +68,7 @@ details.admonition {
right: .5rem;
color: $global-font-color;
.dark-theme & {
.dark & {
color: $global-font-color-dark;
}
}
@@ -77,6 +77,6 @@ details.admonition {
details.admonition[open] {
i.details {
transform: rotate(180deg);
@include transform(rotate(180deg));
}
}

18
assets/css/_partial/_single/_code.scss
View File

@@ -4,7 +4,7 @@ code {
padding: .2rem .4rem;
color: $code-color;
.dark-theme & {
.dark & {
color: $code-color-dark;
}
}
@@ -12,7 +12,7 @@ code {
code, pre, .highlight table, .highlight tr, .highlight td {
background: $code-background-color;
.dark-theme & {
.dark & {
background: $code-background-color-dark;
}
}
@@ -27,14 +27,14 @@ code, pre, .highlight table, .highlight tr, .highlight td {
&::before {
display: block;
padding: .4rem;
padding: .2rem .4rem;
font-family: $global-font-family;
font-weight: bold;
color: $code-info-color;
background: darken($code-background-color, 3%);
content: 'Code';
.dark-theme & {
.dark & {
color: $code-info-color-dark;
background: darken($code-background-color-dark, 3%);
}
@@ -56,7 +56,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
display: block;
background-color: darken($code-background-color, 5%);
.dark-theme & {
.dark & {
background-color: darken($code-background-color-dark, 5%);
}
}
@@ -66,7 +66,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
.ln, .lnt {
color: $global-font-secondary-color;
.dark-theme & {
.dark & {
color: $global-font-secondary-color-dark;
}
}
@@ -89,7 +89,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
.#{$class} { color: $color; }
}
.dark-theme & {
.dark & {
@each $class, $color in $code-highlight-color-map-dark {
.#{$class} { color: $color; }
}
@@ -119,12 +119,12 @@ code, pre, .highlight table, .highlight tr, .highlight td {
@include link(false, false);
.dark-theme & {
.dark & {
background-color: darken($code-background-color-dark, 5%);
}
}
.dark-theme & {
.dark & {
// imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
.highlight {
background: #141414;

23
assets/css/_partial/_single/_footer.scss
View File

@@ -5,7 +5,7 @@
border-bottom: 1px solid $global-border-color;
padding: 1rem 0 0.3rem;
.dark-theme & {
.dark & {
border-bottom: 1px solid $global-border-color-dark;
}
@@ -17,7 +17,7 @@
font-size: 0.8em;
color: $global-font-secondary-color;
.dark-theme & {
.dark & {
color: $global-font-secondary-color-dark;
}
@@ -28,7 +28,7 @@
font-size: 0.8em;
color: $global-font-secondary-color;
.dark-theme & {
.dark & {
color: $global-font-secondary-color-dark;
}
}
@@ -68,10 +68,7 @@
& a.next {
font-size: 1rem;
font-weight: 600;
-webkit-transition: all ease-out .3s;
-moz-transition: all ease-out .3s;
-o-transition: all ease-out .3s;
transition: all ease-out .3s;
@include transition(all 0.3s ease-out);
}
& a.prev {
@@ -79,11 +76,7 @@
}
& a.prev:hover {
-webkit-transform: translateX(-4px);
-moz-transform: translateX(-4px);
-ms-transform: translateX(-4px);
-o-transform: translateX(-4px);
transform: translateX(-4px);
@include transform(translateX(-4px));
}
& a.next {
@@ -91,11 +84,7 @@
}
& a.next:hover {
-webkit-transform: translateX(4px);
-moz-transform: translateX(4px);
-ms-transform: translateX(4px);
-o-transform: translateX(4px);
transform: translateX(4px);
@include transform(translateX(4px));
}
}
}

2
assets/css/_partial/_single/_instagram.scss
View File

@@ -1,5 +1,5 @@
iframe.instagram-media {
.dark-theme & {
.dark & {
border: none !important;
}
}

18
assets/css/_partial/_single/_toc.scss
View File

@@ -9,7 +9,9 @@
top: if($header-normal-mode-desktop, 5rem, 10rem);
left: 10000px;
.dark-theme & {
@include blur;
.dark & {
border-left: 1px solid $global-border-color-dark;
}
@@ -39,7 +41,7 @@
margin-right: .5rem;
color: $single-link-color;
.dark-theme & {
.dark & {
color: $single-link-color-dark;
}
}
@@ -58,14 +60,14 @@
font-weight: bold;
color: $single-link-color;
.dark-theme & {
.dark & {
color: $single-link-color-dark;
}
&::before {
color: $single-link-hover-color;
.dark-theme & {
.dark & {
color: $single-link-hover-color-dark;
}
}
@@ -82,7 +84,7 @@
list-style: none;
background: darken($code-background-color, 3%);
.dark-theme & {
.dark & {
background: darken($code-background-color-dark, 3%);
}
@@ -111,7 +113,7 @@
details[open] {
i.details {
transform: rotate(180deg);
@include transform(rotate(180deg));
}
}
@@ -131,7 +133,7 @@
}
}
.dark-theme & {
.dark & {
background-color: $code-background-color-dark;
}
}
@@ -153,7 +155,7 @@
color: $global-font-secondary-color;
}
.dark-theme & {
.dark & {
background: $code-background-color-dark;
rt {