diff --git a/.gitignore b/.gitignore index 90ba476d..2ff15f00 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ /community-module-registry/ /assets/images/modules/share-logos/* !/assets/images/modules/share-logos/.gitkeep -/node_modules/ \ No newline at end of file +/node_modules/ +/static/_pagefind/ diff --git a/assets/sass/_header.scss b/assets/sass/_header.scss index 6649bda3..d3908ca3 100644 --- a/assets/sass/_header.scss +++ b/assets/sass/_header.scss @@ -309,4 +309,32 @@ height: 12px; } } +} + +#header-search-toggle { + border: 1px solid $fog; + border-radius: 4px; + background: none; + display: flex; + align-items: center; + gap: 8px; + padding: 7px 8px; + font-size: 14px; + line-height: 1; + color: $smoke; + cursor: text; + width: 100%; + max-width: 200px; + + .shortcut { + font-size: 12px; + font-weight: 500; + margin-left: auto; + } + + svg { + width: 16px; + height: 16px; + color: $eggplant; + } } \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss index cdd2d9c9..bea91850 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -20,6 +20,10 @@ body { @media (min-width: 500px) { font-size: rem(16px); } + + &.show-site-search { + overflow: hidden; + } } .container { @@ -167,6 +171,159 @@ a { } } +#site-search { + display: none; + position: fixed; + left: 0; + top: 0; + background: rgba($eggplant, 0.5); + width: 100%; + height: 100vh; + padding: 16px; + z-index: 999; + align-items: flex-start; + justify-content: center; + + body.show-site-search & { + display: flex; + } + + .wrapper { + background: #fff; + width: 100%; + max-width: 800px; + overflow: hidden; + border-radius: 8px; + position: relative; + max-height: 100%; + display: flex; + flex-direction: column; + } + + .controls { + display: flex; + align-items: center; + gap: 8px; + padding: 8px; + border-bottom: 1px solid $mist; + + label { + padding: 8px; + display: flex; + + svg { + width: 16px; + height: 16px; + } + } + + input { + width: 100%; + height: 32px; + border: none; + } + } +} + +#site-search-results { + padding: 16px; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 20px; + + .search-filter-item { + > .title { + font-size: 24px; + font-weight: 500; + color: $eggplant; + margin-bottom: 8px; + display: block; + } + + .results { + display: flex; + flex-direction: column; + gap: 8px; + } + } + + .result-item { + display: flex; + flex-direction: column; + gap: 8px; + + mark { + background-color: $violet; + color: #fff; + } + + a { + text-decoration: none; + color: $smoke; + border: 1px solid $mist; + padding: 16px; + display: block; + border-radius: 8px; + + &:hover, + &:focus { + background: $ghost; + + .title { + color: $pacific; + } + } + } + + .title { + color: $eggplant; + font-size: 16px; + font-weight: 500; + margin-bottom: 8px; + display: block; + } + + .excerpt { + font-size: 14px; + } + + .subresults { + border-left: 1px solid $mist; + padding-left: 20px; + display: flex; + flex-direction: column; + gap: 8px; + display: none; + } + } +} + +#site-search-close-catcher { + position: absolute; + top: 0; + left: 0; + background: none; + border: none; + width: 100%; + height: 100%; + z-index: 0; + margin: 0; +} + +#site-search-close { + border: none; + display: flex; + background: none; + padding: 8px; + cursor: pointer; + + svg { + width: 16px; + height: 16px; + } +} + @import "footer"; @import "glide"; @import "header"; diff --git a/build.sh b/build.sh index ee5b6619..f7105682 100755 --- a/build.sh +++ b/build.sh @@ -83,4 +83,7 @@ then echo "Hugo failed with return code ${hugoReturnCode}" fi +# Build search index +npx pagefind --site="public" --output-subdir="_pagefind" + exit $hugoReturnCode diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index b81e74bd..33efcc4d 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -29,6 +29,19 @@ {{- partial "footer.html" . -}} {{- partial "svgs/sprite.html" -}} {{- block "footerScripts" . }}{{- end }} + diff --git a/layouts/guides/single.html b/layouts/guides/single.html index b66724fc..c858e936 100644 --- a/layouts/guides/single.html +++ b/layouts/guides/single.html @@ -3,11 +3,13 @@ + + {{ end }} {{ define "main" }}
-
+
-
-
+
{{ if or .Params.officialPartner .Params.isOfficial }} -
+

@@ -119,7 +121,7 @@

{{ end }} {{ if $communityDocs }} -
+

diff --git a/layouts/partials/head.html b/layouts/partials/head.html index b8b61e94..8699fd22 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -90,4 +90,6 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index c0d69ab1..a86f89f2 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -21,6 +21,11 @@

+