Skip to content

Commit 0e4cc60

Browse files
lamATnginxlamATnginx
committed
chore: Updated coveo to use Atomic + support coveo on MF
1 parent 2195cb3 commit 0e4cc60

File tree

6 files changed

+205
-8
lines changed

6 files changed

+205
-8
lines changed

‎assets/css/v2/style.css‎

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,6 @@ nav {
217217
.sidebar-layout {
218218
display: flex;
219219
flex-direction: column;
220-
z-index: 9999;
221220
}
222221

223222
@media (max-width: 1528px) {
@@ -371,6 +370,81 @@ nav {
371370
display: flex;
372371
}
373372

373+
/* Coveo */
374+
#search-v2 {
375+
display: inline-block !important;
376+
width: 95vw;
377+
grid-column: 1 / -1;
378+
}
379+
380+
atomic-search-box {
381+
&::part(wrapper) {
382+
border-radius: 0;
383+
border-color: black;
384+
}
385+
386+
&::part(suggestions-wrapper) {
387+
border-radius: 0;
388+
border-color: black;
389+
width: calc(100% + 2px);
390+
margin-left: -1px;
391+
}
392+
}
393+
394+
atomic-query-summary {
395+
/* Show duration */
396+
&::part(duration) {
397+
display: inline-block !important;
398+
}
399+
}
400+
401+
atomic-search-layout {
402+
grid-template-areas:
403+
"atomic-section-search"
404+
"atomic-section-main"
405+
"." !important;
406+
407+
grid-template-columns: minmax(50%, 100%) !important;
408+
409+
@media (min-width: 1024px) {
410+
grid-template-areas:
411+
". atomic-section-search"
412+
"atomic-section-facets atomic-section-main "
413+
"atomic-section-facets . " !important;
414+
415+
grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important;
416+
column-gap: calc(1.5rem + 2rem) !important;
417+
}
418+
}
419+
420+
atomic atomic-search-layout atomic-layout-section[section="search"] {
421+
/* Override Coveo's width to be full */
422+
max-width: 100%;
423+
width: 100% !important;
424+
}
425+
426+
.atomic-full-summary-and-sort {
427+
display: flex;
428+
flex-direction: column;
429+
align-items: start;
430+
gap: 1rem;
431+
justify-content: space-between;
432+
433+
@media (min-width: 480px) {
434+
flex-direction: row;
435+
align-items: center;
436+
}
437+
438+
atomic-sort-dropdown::part(label) {
439+
margin-left: 0;
440+
}
441+
}
442+
443+
#atomic-search-box-xqtsq-popup {
444+
z-index: 9999;
445+
}
446+
447+
/* Sidebar */
374448
.sidebar {
375449
display: flex;
376450
flex-direction: column;

‎assets/js/coveo.js‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,39 @@ async function getsearchObj() {
2020
return response.json();
2121
}
2222

23-
document.addEventListener('DOMContentLoaded', async () => {
23+
async function atomicCoveo() {
24+
await customElements.whenDefined('atomic-search-interface');
25+
const searchInterface = document.querySelector('#search-v2');
26+
const searchInterfaceStandalone =
27+
document.querySelector('#search-standalone');
28+
const token = localStorage.getItem('coveo_jwt_v1');
29+
const org_id = localStorage.getItem('coveo_org_id_v1');
30+
let searchObj = { token, org_id };
31+
32+
if (token === null || org_id === null || isJwtExpired(token)) {
33+
searchObj = await getsearchObj();
34+
localStorage.setItem('coveo_jwt_v1', searchObj.token);
35+
localStorage.setItem('coveo_org_id_v1', searchObj.org_id);
36+
}
37+
38+
if (searchInterface) {
39+
await searchInterface.initialize({
40+
accessToken: token,
41+
organizationId: org_id,
42+
renewAccessToken: () => {},
43+
});
44+
searchInterface.executeFirstSearch();
45+
}
46+
47+
await searchInterfaceStandalone.initialize({
48+
accessToken: token,
49+
organizationId: org_id,
50+
renewAccessToken: () => {},
51+
});
52+
searchInterfaceStandalone.executeFirstSearch();
53+
}
54+
55+
async function legacyCoveo() {
2456
const token = localStorage.getItem('coveo_jwt_v1');
2557
const org_id = localStorage.getItem('coveo_org_id_v1');
2658
let searchObj = { token, org_id };
@@ -79,4 +111,12 @@ document.addEventListener('DOMContentLoaded', async () => {
79111
},
80112
},
81113
});
114+
}
115+
116+
document.addEventListener('DOMContentLoaded', async () => {
117+
if (localStorage.getItem('useNewTheme') === 'true') {
118+
atomicCoveo();
119+
} else {
120+
legacyCoveo();
121+
}
82122
});

‎layouts/_default/baseof.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
});
5858

5959
// swap out v1 and v2 elements
60-
const v1ElementIds = ["sidebar", "footer", "toc", "api"]
60+
const v1ElementIds = ["sidebar", "footer", "toc", "api", "search-v1"]
6161

6262
v1ElementIds.forEach((elementId) => {
6363
const element = document.getElementById(elementId);
@@ -170,9 +170,10 @@
170170

171171
<section class="base-layout">
172172
<section class="breadcrumb-layout">
173-
<div data-mf="true" id="searchbox" style="display:none;">
174-
<div class="CoveoSearchbox-v2" data-placeholder='Search NGINX Docs...'></div>
175-
</div>
173+
<atomic-search-interface id="search-standalone" data-mf="true" style="display:none;">
174+
<atomic-search-box redirection-url="/search.html">
175+
</atomic-search-box>
176+
</atomic-search-interface>
176177
{{ if not .IsHome }}
177178
{{ if not (in .Params.display_breadcrumb "false" ) }}
178179
{{ partial "breadcrumb" .}}

‎layouts/partials/scripts.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@
1919
<script src="{{ $mermaid.RelPermalink }}" type="text/javascript" integrity="{{ $mermaid.Data.Integrity }}"></script>
2020
{{ end }}
2121

22+
<!-- Coveo Atomic -->
23+
<script
24+
type="module"
25+
src="https://static.cloud.coveo.com/atomic/v3.19.0/atomic.esm.js"
26+
integrity="sha512-VA9k6iDWhwxl8bwKUYPD63l93lGX7daV60k3yFxEt9EuEq4iWvsu5COq1mZ8OXKl0KCOFlUSDXS32Cy+YwbufQ=="
27+
crossorigin="anonymous">
28+
</script>
29+
2230
<!-- START COVEO -->
2331
<script class="coveo-script" src="https://static.cloud.coveo.com/searchui/v2.10104/0/js/CoveoJsSearch.Lazy.min.js"
2432
integrity="sha512-HxdDBIp5snbqtu1TPkBnXLKEvN9IPz3PeZW8zT9KfsflV9Ck822XDroDlpVbfCfXeiu8C0RDVn0fdu7aGy/H1g=="

‎layouts/partials/styles.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,13 @@
4141
integrity="sha512-9/A9yVCU4GS6/iIwTRJKnan4Hf8gDKj3anwItN9QCsU8SixaT5xkjjWsZ/iq0TWaizhtqOLacadXJfxHlwYCcA=="
4242
crossorigin="anonymous" />{{ end }}
4343

44+
<!-- load CSS Atomic CSS -->
45+
<link
46+
rel="stylesheet"
47+
href="https://static.cloud.coveo.com/atomic/v3.19.0/themes/coveo.css"
48+
integrity="sha512-m2BufPi8Tc6H2jcQfDj/PIl5H57C9jeqhbDFgFXKTtOhoC4S7ULXmx74FseZ8WXpfdT9uyccMHDBJDrIZlrUUQ=="
49+
crossorigin="anonymous"/>
50+
4451
{{ $cssHeader := $css1 | minify | fingerprint "sha512"}}
4552
<link href="{{ $cssHeader.RelPermalink }}" rel="stylesheet" type="text/css" id="css1">
4653

‎layouts/search/single.html‎

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{{ define "main" }}
22

3-
<div class="row flex-xl-nowrap">
3+
<div class="row flex-xl-nowrap" id="search-v1">
44
<main class="col-md-10 content" role="main">
55
<div class="container"><h1>{{ .Title}}</h1></div>
66

7-
<div id="search" class="CoveoSearchInterface" data-enable-history="true">
7+
<div id="search" class="CoveoSearchInterface" data-enable-history="true" >
88
<div class="CoveoFolding"></div>
99
<div class="CoveoAnalytics" data-search-hub="HUB_ES_Nginx_Docs_And_Org"></div>
1010
<div class="coveo-search-section" style="display: none;">
@@ -102,4 +102,71 @@
102102
</div>
103103
</div>
104104
</div>
105+
</main>
106+
</div>
107+
108+
<section class="main-layout" data-mf="true" style="display: none; margin-left: 2rem;" >
109+
<atomic-search-interface id="search-v2">
110+
<atomic-search-layout>
111+
<!-- Search/Metadata Section -->
112+
<atomic-layout-section section="search">
113+
<div class="atomic-full-summary-and-sort">
114+
<atomic-query-summary></atomic-query-summary>
115+
<atomic-sort-dropdown>
116+
<atomic-sort-expression label="relevance" expression="relevancy"></atomic-sort-expression>
117+
<atomic-sort-expression label="most-recent" expression="date descending"></atomic-sort-expression>
118+
</atomic-sort-dropdown>
119+
</div>
120+
</atomic-layout-section>
121+
122+
<!-- Facet Section -->
123+
<atomic-layout-section section="facets">
124+
<atomic-facet field="f5_product" label="Show by product"></atomic-facet>
125+
<atomic-refine-toggle></atomic-refine-toggle>
126+
</atomic-layout-section>
127+
128+
<!-- Main Section -->
129+
<atomic-layout-section section="main">
130+
<!-- Results -->
131+
<atomic-layout-section section="results">
132+
<atomic-no-results></atomic-no-results>
133+
<atomic-result-list>
134+
<atomic-result-template>
135+
<template>
136+
<!-- Title -->
137+
<atomic-result-section-title>
138+
<div style="display: flex; align-items: center; justify-content: space-between;">
139+
<atomic-result-link></atomic-result-link>
140+
<atomic-quickview></atomic-quickview>
141+
</div>
142+
</atomic-result-section-title>
143+
144+
<!-- URL -->
145+
<atomic-result-section-title-metadata>
146+
<atomic-result-printable-uri></atomic-result-printable-uri>
147+
</atomic-result-section-title-metadata>
148+
149+
<!-- Excerpt -->
150+
<atomic-result-section-excerpt>
151+
<atomic-result-text field="excerpt"></atomic-result-text>
152+
</atomic-result-section-excerpt>
153+
154+
<!-- Date -->
155+
<atomic-result-section-bottom-metadata>
156+
Modification Date: <atomic-result-date format="MMM D, YYYY"></atomic-result-date>
157+
</atomic-result-section-bottom-metadata>
158+
</template>
159+
</atomic-result-template>
160+
</atomic-result-list>
161+
</atomic-layout-section>
162+
163+
<!-- Pagination -->
164+
<atomic-layout-section section="pagination" style="margin-top: 2rem;">
165+
<atomic-pager></atomic-pager>
166+
<atomic-results-per-page></atomic-results-per-page>
167+
</atomic-layout-section>
168+
</atomic-layout-section>
169+
</atomic-search-layout>
170+
</atomic-search-interface>
171+
</section>
105172
{{ end }}

0 commit comments

Comments
 (0)