Skip to content

Commit d95df6d

Browse files
authored
[UG] Run Prettier over search.md page (#2203)
1 parent 86b4f3a commit d95df6d

File tree

2 files changed

+121
-45
lines changed

2 files changed

+121
-45
lines changed

userguide/.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
!/content/en/docs/adding-content
1313
/content/en/docs/adding-content/*
14+
!/content/en/docs/adding-content/search.md
1415

1516
!/content/en/docs/adding-content/lookandfeel.md
1617

userguide/content/en/docs/adding-content/search.md

Lines changed: 120 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,29 @@ title: Search
33
date: 2017-01-05
44
weight: 3.5
55
description: >
6-
Let users search your Docsy site with a choice of configurable search options.
6+
Let users search your Docsy site with a choice of configurable search options.
77
cSpell:ignore: GCSE
88
---
99

10-
Docsy offers multiple options that let your readers search your site content, so you can pick one that suits your needs or [design your own](#custom-search). You can choose from:
11-
12-
* [Google Custom Search Engine](#configure-search-with-a-google-custom-search-engine) (GCSE), the default option, which uses Google's index of your public site to generate a search results page.
13-
* [Algolia DocSearch](#algolia-docsearch), which uses Algolia's indexing and search mechanism. Search results are displayed as a pop-up. Algolia DocSearch is free for public documentation sites.
14-
* [Local search with Lunr](#local-search-with-lunr), which uses Javascript to index and search your site without the need to connect to external services. This option doesn't require your site to be public.
15-
16-
If you enable any of these search options in your project [configuration file], a search box displays in the right of your top navigation bar. By default a search box also displays at the top of the section menu in the left navigation pane, which you can disable if you prefer, or if you're using a search option that only works with the top search box.
10+
Docsy offers multiple options that let your readers search your site content, so
11+
you can pick one that suits your needs or [design your own](#custom-search). You
12+
can choose from:
13+
14+
- [Google Custom Search Engine](#configure-search-with-a-google-custom-search-engine)
15+
(GCSE), the default option, which uses Google's index of your public site to
16+
generate a search results page.
17+
- [Algolia DocSearch](#algolia-docsearch), which uses Algolia's indexing and
18+
search mechanism. Search results are displayed as a pop-up. Algolia DocSearch
19+
is free for public documentation sites.
20+
- [Local search with Lunr](#local-search-with-lunr), which uses Javascript to
21+
index and search your site without the need to connect to external services.
22+
This option doesn't require your site to be public.
23+
24+
If you enable any of these search options in your project [configuration file],
25+
a search box displays in the right of your top navigation bar. By default a
26+
search box also displays at the top of the section menu in the left navigation
27+
pane, which you can disable if you prefer, or if you're using a search option
28+
that only works with the top search box.
1729

1830
{{% alert title="You can only enable a single search option at a time" color=warning %}}
1931

@@ -25,8 +37,12 @@ behavior when serving your site.
2537

2638
## Disabling the sidebar search box
2739

28-
By default, the search box appears in both the top navigation bar and at the top of the sidebar left navigation pane. If you don't want the sidebar search box, set the site parameter `sidebar_search_disable` to `true` in `hugo.toml`/`hugo.yaml`/`hugo.json`:
40+
By default, the search box appears in both the top navigation bar and at the top
41+
of the sidebar left navigation pane. If you don't want the sidebar search box,
42+
set the site parameter `sidebar_search_disable` to `true` in
43+
`hugo.toml`/`hugo.yaml`/`hugo.json`:
2944

45+
<!-- prettier-ignore -->
3046
{{< tabpane >}}
3147
{{< tab header="Configuration file:" disabled=true />}}
3248
{{< tab header="hugo.toml" lang="toml" >}}
@@ -46,31 +62,52 @@ params:
4662
}
4763
}
4864
}
49-
5065
{{< /tab >}}
5166
{{< /tabpane >}}
5267

5368
## Configure search with a Google Custom Search Engine
5469

55-
By default Docsy uses a [Google Custom Search Engine](https://cse.google.com/cse/all) (GCSE) to search your site. To enable this feature, you'll first need to make sure that you have built and deployed [a production version of your site](/docs/deployment#build-environments-and-indexing), as otherwise your site won't be crawled and indexed.
70+
By default Docsy uses a [Google Custom Search Engine][GCSE] (GCSE) to search
71+
your site. To enable this feature, you'll first need to make sure that you have
72+
built and deployed a
73+
[production version of your site](/docs/deployment#build-environments-and-indexing),
74+
as otherwise your site won't be crawled and indexed.
5675

5776
### Setting up site search
5877

59-
1. Create a Google Custom Search Engine for your deployed site by clicking **New search engine** on the [Custom Search page](https://cse.google.com/cse/all) and following the instructions. Make a note of the ID for your new search engine.
60-
1. Add any further configuration you want to your search engine using the **Edit search engine** options. In particular you may want to do the following:
61-
62-
* Select **Look and feel**. Change from the default **Overlay** layout to **Results only**, as this option means your search results are embedded in your search page rather than appearing in a separate box. Click **Save** to save your changes.
63-
* Edit the default result link behavior so that search results from your site don't open in a new tab. To do this, select **Search Features** - **Advanced** - **Websearch Settings**. In the **Link Target** field, type "\_parent". Click **Save** to save your changes.
78+
1. Create a Google Custom Search Engine for your deployed site by clicking
79+
**New search engine** on the [Custom Search page][GCSE] and following the
80+
instructions. Make a note of the ID for your new search engine.
81+
1. Add any further configuration you want to your search engine using the
82+
**Edit search engine** options. In particular you may want to do the
83+
following:
84+
85+
- Select **Look and feel**. Change from the default **Overlay** layout to
86+
**Results only**, as this option means your search results are embedded in
87+
your search page rather than appearing in a separate box. Click **Save**
88+
to save your changes.
89+
- Edit the default result link behavior so that search results from your
90+
site don't open in a new tab. To do this, select **Search Features** -
91+
**Advanced** - **Websearch Settings**. In the **Link Target** field, type
92+
"\_parent". Click **Save** to save your changes.
6493

6594
{{% alert title="Tip" %}}
66-
Your site search results should show up within a couple of days. If it takes longer than that, you can manually request that your site is indexed by [submitting a sitemap through the Google Search Console](https://support.google.com/webmasters/answer/183668?hl=en).
95+
96+
Your site search results should show up within a couple of days. If it takes
97+
longer than that, you can manually request that your site is indexed by
98+
[submitting a sitemap through the Google Search Console](https://support.google.com/webmasters/answer/183668?hl=en).
99+
67100
{{% /alert %}}
68101

69102
### Adding the search page
70103

71104
Once you have your search engine set up, you can add the feature to your site:
72105

73-
1. Ensure you have a Markdown file in `content/en/search.md` (and one per other languages if needed) to display your search results. It only needs a title and `layout: search`, as in the following example:
106+
<!-- prettier-ignore-start -->
107+
108+
1. Ensure you have a Markdown file in `content/en/search.md` (and one per other
109+
languages if needed) to display your search results. It only needs a title
110+
and `layout: search`, as in the following example:
74111

75112
{{< tabpane >}}
76113
{{< tab header="Front matter:" disabled=true />}}
@@ -94,7 +131,9 @@ layout: search
94131
{{< /tab >}}
95132
{{< /tabpane >}}
96133

97-
1. Add your Google Custom Search Engine ID to the site params in `hugo.toml`/`hugo.yaml`/`hugo.json`. You can add different values per language if needed.
134+
1. Add your Google Custom Search Engine ID to the site params in
135+
`hugo.toml`/`hugo.yaml`/`hugo.json`. You can add different values per
136+
language if needed.
98137

99138
{{< tabpane >}}
100139
{{< tab header="Configuration file:" disabled=true />}}
@@ -116,42 +155,50 @@ params:
116155
{{< /tab >}}
117156
{{< /tabpane >}}
118157

158+
<!-- prettier-ignore-end -->
119159

120160
### Disabling GCSE search
121161

122-
If you don't specify a Google Custom Search Engine ID for your project and haven't enabled any other search options, the search box won't appear in your site. If you're using the default `hugo.toml` from the example site and want to disable search, just comment out or remove the relevant line.
162+
If you don't specify a Google Custom Search Engine ID for your project and
163+
haven't enabled any other search options, the search box won't appear in your
164+
site. If you're using the default `hugo.toml` from the example site and want to
165+
disable search, just comment out or remove the relevant line.
123166

124167
## Algolia DocSearch
125168

126-
As an alternative to GCSE, you can use [Algolia
127-
DocSearch](https://docsearch.algolia.com), which is
128-
free for public documentation sites. Docsy supports **Algolia DocSearch v3**.
169+
As an alternative to GCSE, you can use
170+
[Algolia DocSearch](https://docsearch.algolia.com), which is free for public
171+
documentation sites. Docsy supports **Algolia DocSearch v3**.
129172

130173
{{% alert title="Algolia v2 is deprecated" %}}
174+
131175
Docsy previously supported Algolia DocSearch v2, which is now deprecated. If you
132176
are an existing Algolia DocSearch v2 user and want to use the latest Docsy
133-
version, [follow the migration
134-
instructions](https://docsearch.algolia.com/docs/migrating-from-v2) in the
135-
DocSearch documentation to update your DocSearch code snippet.
177+
version, follow the
178+
[migration instructions](https://docsearch.algolia.com/docs/migrating-from-v2)
179+
in the DocSearch documentation to update your DocSearch code snippet.
180+
136181
{{% /alert %}}
137182

138183
### Sign up for Algolia DocSearch
139184

140-
Complete the form at <https://docsearch.algolia.com/apply>.
141-
Proceed to the next step once you've received Algolia DocSearch
142-
parameters for your project.
185+
Complete the form at <https://docsearch.algolia.com/apply>. Proceed to the next
186+
step once you've received Algolia DocSearch parameters for your project.
143187

144188
### Eager to test DocSearch?
145189

146-
Docsy defaults to the [Algolia test][]-site parameters when
147-
none are provided. To enable search over the Algolia test, define
148-
`params.search.algolia` without any other fields, as outlined next.
190+
Docsy defaults to the [Algolia test][]-site parameters when none are provided.
191+
To enable search over the Algolia test, define `params.search.algolia` without
192+
any other fields, as outlined next.
149193

150194
### Configure Algolia DocSearch
151195

196+
<!-- prettier-ignore-start -->
197+
152198
1. Ensure that [GCSE search](#disabling-gcse-search) is disabled.
153199
2. Add your project's Algolia DocSearch parameters to
154-
`hugo.toml`/`hugo.yaml`/`hugo.json`, for example (using [Algolia test][] values):
200+
`hugo.toml`/`hugo.yaml`/`hugo.json`, for example (using [Algolia test][]
201+
values):
155202

156203
{{< tabpane >}}
157204
{{< tab header="Configuration file:" disabled=true />}}
@@ -184,8 +231,10 @@ params:
184231
{{< /tab >}}
185232
{{< /tabpane >}}
186233

187-
To learn more about Algolia DocSearch V3, see [Getting
188-
started](https://docsearch.algolia.com/docs/DocSearch-v3).
234+
<!-- prettier-ignore-end -->
235+
236+
To learn more about Algolia DocSearch V3, see
237+
[Getting started](https://docsearch.algolia.com/docs/DocSearch-v3).
189238

190239
When you've completed these steps, Algolia search should be enabled on your
191240
site. Search results are displayed as a pop-up, so you don't need to add any
@@ -206,10 +255,15 @@ Leave either file empty to disable Docsy's implementation.
206255

207256
## Local search with Lunr
208257

209-
[Lunr](https://lunrjs.com/) is a Javascript-based search option that lets you index your site and make it searchable without the need for external, server-side search services. This is a good option particularly for smaller or non-public sites.
258+
[Lunr](https://lunrjs.com/) is a Javascript-based search option that lets you
259+
index your site and make it searchable without the need for external,
260+
server-side search services. This is a good option particularly for smaller or
261+
non-public sites.
210262

211263
To add Lunr search to your Docsy site:
212264

265+
<!-- prettier-ignore-start -->
266+
213267
1. Enable local search in `hugo.toml`/`hugo.yaml`/`hugo.json`.
214268

215269
{{< tabpane >}}
@@ -231,18 +285,31 @@ params:
231285
{{< /tab >}}
232286
{{< /tabpane >}}
233287

234-
2. Remove or comment out any GCSE ID in `hugo.toml`/`hugo.yaml`/`hugo.json` and ensure Algolia DocSearch is set to `false`, as you can only have one type of search enabled. See [Disabling GCSE search](#disabling-gcse-search).
288+
2. Remove or comment out any GCSE ID in `hugo.toml`/`hugo.yaml`/`hugo.json` and
289+
ensure Algolia DocSearch is set to `false`, as you can only have one type of
290+
search enabled. See [Disabling GCSE search](#disabling-gcse-search).
235291

236-
Once you've completed these steps, local search is enabled for your site and results appear in a drop down when you use the search box.
292+
<!-- prettier-ignore-end -->
293+
294+
Once you've completed these steps, local search is enabled for your site and
295+
results appear in a drop down when you use the search box.
237296

238297
{{% alert title="Tip" %}}
239-
If you're [testing this locally](/docs/deployment/#serving-your-site-locally) using Hugo’s local server functionality, you need to build your `offline-search-index.xxx.json` file first by running `hugo`. If you have the Hugo server running while you build `offline-search-index.xxx.json`, you may need to stop the server and restart it in order to see your search results.
298+
299+
If you're [testing this locally](/docs/deployment/#serving-your-site-locally)
300+
using Hugo’s local server functionality, you need to build your
301+
`offline-search-index.xxx.json` file first by running `hugo`. If you have the
302+
Hugo server running while you build `offline-search-index.xxx.json`, you may
303+
need to stop the server and restart it in order to see your search results.
304+
240305
{{% /alert %}}
241306

242307
### Changing the summary length of the local search results
243308

244-
You can customize the summary length by setting `offlineSearchSummaryLength` in `hugo.toml`/`hugo.yaml`/`hugo.json`.
309+
You can customize the summary length by setting `offlineSearchSummaryLength` in
310+
`hugo.toml`/`hugo.yaml`/`hugo.json`.
245311

312+
<!-- prettier-ignore -->
246313
{{< tabpane >}}
247314
{{< tab header="Configuration file:" disabled=true />}}
248315
{{< tab header="hugo.toml" lang="toml" >}}
@@ -268,8 +335,10 @@ params:
268335

269336
### Changing the maximum result count of the local search
270337

271-
You can customize the maximum result count by setting `offlineSearchMaxResults` in `hugo.toml`/`hugo.yaml`/`hugo.json`.
338+
You can customize the maximum result count by setting `offlineSearchMaxResults`
339+
in `hugo.toml`/`hugo.yaml`/`hugo.json`.
272340

341+
<!-- prettier-ignore -->
273342
{{< tabpane >}}
274343
{{< tab header="Configuration file:" disabled=true />}}
275344
{{< tab header="hugo.toml" lang="toml" >}}
@@ -294,9 +363,11 @@ params:
294363

295364
### Changing the width of the local search results popover
296365

297-
The width of the search results popover will automatically widen according to the content.
366+
The width of the search results popover will automatically widen according to
367+
the content.
298368

299-
If you want to limit the width, add the following scss into `assets/scss/_variables_project.scss`.
369+
If you want to limit the width, add the following scss into
370+
`assets/scss/_variables_project.scss`.
300371

301372
```scss
302373
.td-offline-search-results {
@@ -306,8 +377,10 @@ If you want to limit the width, add the following scss into `assets/scss/_variab
306377

307378
### Excluding pages from local search results
308379

309-
To exclude pages from local search results, add `exclude_search: true` to the the frontmatter of each page:
380+
To exclude pages from local search results, add `exclude_search: true` to the
381+
the frontmatter of each page:
310382

383+
<!-- prettier-ignore-start -->
311384
{{< tabpane >}}
312385
{{< tab header="Front matter:" disabled=true />}}
313386
{{< tab header="toml" lang="toml" >}}
@@ -319,7 +392,7 @@ exclude_search = true
319392
{{< /tab >}}
320393
{{< tab header="yaml" lang="yaml" >}}
321394
---
322-
title: "Index"
395+
title: Index
323396
weight: 10
324397
exclude_search: true
325398
---
@@ -332,6 +405,7 @@ exclude_search: true
332405
}
333406
{{< /tab >}}
334407
{{< /tabpane >}}
408+
<!-- prettier-ignore-end -->
335409

336410
### Custom search
337411

@@ -350,5 +424,6 @@ design, then you can implement custom search by overriding the following files:
350424
https://github.com/google/docsy/blob/main/assets/scss/_search.scss
351425
[configuration file]:
352426
https://gohugo.io/getting-started/configuration/#configuration-file
427+
[GCSE]: https://cse.google.com/cse/all
353428
[layouts/partials/search-input.html]:
354429
https://github.com/google/docsy/blob/main/layouts/partials/search-input.html

0 commit comments

Comments
 (0)