feat: add optional page description to search (#550)

Add optional page description to the search result list. The feature can be enabled by `geekdocSearchShowDescription=true` and is disabled by default. The max length of the description is set to `55` and will be truncated automatically if the limit is exceeded.

src/sass/_base.scss

@@ -228,7 +228,6 @@ svg.gdoc-icon {
 
 .gdoc-nav {
   flex: 0 0 $menu-width;
-  font-size: $font-size-14;
 
   nav {
     width: $menu-width;
@@ -329,7 +328,6 @@ svg.gdoc-icon {
 }
 
 .gdoc-nav__entry,
-.gdoc-search__entry,
 .gdoc-language__entry {
   flex: 1;
   color: var(--body-font-color);
@@ -349,10 +347,10 @@ svg.gdoc-icon {
 .gdoc-language__list {
   background: var(--body-background);
   border-radius: $border-radius;
-  box-shadow: 0 1px 3px 0 var(--accent-color), 0 1px 2px 0 var(--accent-color-lite);
+  box-shadow: 0 1px 3px 0 var(--accent-color-dark), 0 1px 2px 0 var(--accent-color);
   position: absolute;
   margin: 0;
-  padding: $padding-8 !important;
+  padding: $padding-8 $padding-4 !important;
   list-style: none;
   top: calc(100% + #{$padding-8});
   z-index: 2;
@@ -576,8 +574,8 @@ svg.gdoc-icon {
     position: absolute;
     left: $padding-8;
     color: var(--control-icons);
-    width: $font-size-16;
-    height: $font-size-16;
+    width: $font-size-20;
+    height: $font-size-20;
   }
 
   &::after {
@@ -591,33 +589,19 @@ svg.gdoc-icon {
     padding: $padding-8;
     padding-left: $padding-32;
 
-    border: $border-1 solid var(--accent-color);
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    border: 1px solid transparent;
     border-radius: $border-radius;
 
     background: var(--accent-color-lite);
     color: var(--body-font-color);
 
-    &:required + &__spinner {
-      display: block;
+    &:focus {
+      outline: none !important;
+      border: 1px solid var(--accent-color);
     }
   }
 
-  &__spinner {
-    position: absolute;
-    margin: $padding-8;
-    right: 0;
-    top: 0;
-
-    width: $padding-16;
-    height: $padding-16;
-
-    border: $border-1 solid transparent;
-    border-top-color: var(--body-font-color);
-    border-radius: 50%;
-
-    @include spin(1s);
-  }
-
   &__list {
     visibility: hidden;
     left: 0;
@@ -625,20 +609,15 @@ svg.gdoc-icon {
 
     ul {
       list-style: none;
-      margin-top: $padding-8;
       padding-left: 0;
     }
 
-    li {
-      margin: $padding-4 0;
-    }
-
     > li > span {
       font-weight: bold;
     }
 
     > li + li {
-      margin-top: $padding-8;
+      margin-top: $padding-4;
     }
 
     svg.gdoc-icon {
@@ -646,6 +625,40 @@ svg.gdoc-icon {
     }
   }
 
+  &__section {
+    display: flex;
+    flex-direction: column;
+    padding: $padding-4 !important;
+  }
+
+  &__entry {
+    display: flex;
+    flex-direction: column;
+    color: var(--body-font-color);
+    padding: $padding-4 !important;
+    border-radius: $border-radius;
+
+    &:hover,
+    &.is-active {
+      background: var(--accent-color-lite);
+      text-decoration: none;
+
+      .gdoc-search__entry--title {
+        text-decoration-style: dashed !important;
+        text-decoration: underline;
+      }
+    }
+
+    &:visited {
+      color: var(--body-font-color);
+    }
+
+    &--description {
+      font-size: $font-size-14;
+      font-style: italic;
+    }
+  }
+
   &:focus-within &__list.has-hits,
   &__list.has-hits:active {
     visibility: visible;

src/sass/_color_mode.scss

@@ -13,6 +13,7 @@
   --link-color: #{$link-color};
   --link-color-visited: #{$link-color-visited};
 
+  --accent-color-dark: #{$gray-300};
   --accent-color: #{$gray-200};
   --accent-color-lite: #{$gray-100};
 
@@ -58,6 +59,7 @@
   --link-color: #{$link-color-dark};
   --link-color-visited: #{$link-color-visited-dark};
 
+  --accent-color-dark: #{darken($body-background-dark, 6)};
   --accent-color: #{darken($body-background-dark, 4)};
   --accent-color-lite: #{darken($body-background-dark, 2)};
 

src/sass/_defaults.scss

@@ -5,6 +5,7 @@ $padding-8: 0.5rem !default;
 $padding-16: 1rem !default;
 $padding-24: 1.5rem !default;
 $padding-32: 2rem !default;
+$padding-48: 3rem !default;
 $padding-64: 4rem !default;
 $padding-96: 6rem !default;
 
@@ -47,13 +48,13 @@ $body-font-color: $gray-800 !default;
 $body-font-weight: normal !default;
 $body-min-width: 20rem !default;
 
-$code-font-color: rgba(95, 95, 95, 1) !default;
+$code-font-color: rgba(70, 70, 70, 1) !default;
 $code-font-color-dark: rgba(185, 185, 185, 1) !default;
 
 $body-background-dark: $gray-800 !default;
 $body-font-color-dark: $gray-100 !default;
 
-$container-max-width: 80rem !default;
+$container-max-width: 82rem !default;
 
 $main-color: rgba(65, 134, 201, 1) !default;
 $second-color: rgba(47, 51, 62, 1) !default;
@@ -63,11 +64,11 @@ $body-background-dark: mix(invert($body-background, 75%), $second-color) !defaul
 $link-color-dark: rgba(110, 168, 212, 1) !default;
 $link-color-visited-dark: rgba(186, 142, 240) !default;
 
-$code-background: lighten($gray-200, 4) !default;
+$code-background: $gray-100 !default;
 $code-background-dark: darken($body-background-dark, 2) !default;
 
 $header-height: 3.5rem !default;
-$menu-width: 16rem !default;
+$menu-width: 18rem !default;
 
 $sm-breakpoint: $menu-width + $body-min-width + 3rem !default;
 

src/sass/_utils.scss

@@ -89,12 +89,3 @@
   display: inline-block;
   min-width: 4rem;
 }
-
-@mixin spin($duration) {
-  animation: spin $duration ease infinite;
-  @keyframes spin {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-}