Add Algolia docsearch language facet (#1568)
* add docsearch language facet and initialize Algolia with the language facet filter * disable facetFilters in docsearch revisit implementation once Astro docs have been indexed by lang
This commit is contained in:
parent
059aff923b
commit
1acb13e4bf
3 changed files with 12 additions and 4 deletions
|
@ -1,9 +1,10 @@
|
||||||
---
|
---
|
||||||
import {SITE, OPEN_GRAPH} from '../config.ts';
|
import {SITE, OPEN_GRAPH} from '../config.ts';
|
||||||
|
import { getLanguageFromURL } from '../util.ts';
|
||||||
export interface Props {
|
export interface Props {
|
||||||
content: any,
|
content: any,
|
||||||
site: any,
|
site: any,
|
||||||
canonicalURL: URL | string,
|
canonicalURL: URL,
|
||||||
};
|
};
|
||||||
const {
|
const {
|
||||||
content = {},
|
content = {},
|
||||||
|
@ -12,10 +13,14 @@ const {
|
||||||
const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
|
const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
|
||||||
const canonicalImageSrc = new URL(imageSrc, Astro.site);
|
const canonicalImageSrc = new URL(imageSrc, Astro.site);
|
||||||
const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
|
const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
|
||||||
|
const lang = canonicalURL && getLanguageFromURL(canonicalURL.pathname);
|
||||||
---
|
---
|
||||||
<!-- Page Metadata -->
|
<!-- Page Metadata -->
|
||||||
<link rel="canonical" href={canonicalURL}/>
|
<link rel="canonical" href={canonicalURL}/>
|
||||||
|
|
||||||
|
<!-- Algolia docsearch language facet -->
|
||||||
|
<meta name="docsearch:language" content="{lang}" />
|
||||||
|
|
||||||
<!-- OpenGraph Tags -->
|
<!-- OpenGraph Tags -->
|
||||||
<meta property="og:title" content={content.title ?? SITE.title}/>
|
<meta property="og:title" content={content.title ?? SITE.title}/>
|
||||||
<meta property="og:type" content="article"/>
|
<meta property="og:type" content="article"/>
|
||||||
|
|
|
@ -154,6 +154,6 @@ const lang = currentPage && getLanguageFromURL(currentPage);
|
||||||
</div>
|
</div>
|
||||||
<div style="flex-grow: 1;"></div>
|
<div style="flex-grow: 1;"></div>
|
||||||
{lang && <LanguageSelect lang={lang} client:idle />}
|
{lang && <LanguageSelect lang={lang} client:idle />}
|
||||||
<div class="search-item"><Search client:idle /></div>
|
<div class="search-item"><Search lang={lang} client:idle /></div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
|
@ -5,10 +5,11 @@ import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
|
||||||
import '@docsearch/css//dist/style.css';
|
import '@docsearch/css//dist/style.css';
|
||||||
import './Search.css';
|
import './Search.css';
|
||||||
|
|
||||||
export default function Search() {
|
export default function Search(props) {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const searchButtonRef = useRef();
|
const searchButtonRef = useRef();
|
||||||
const [initialQuery, setInitialQuery] = useState(null);
|
const [initialQuery, setInitialQuery] = useState(null);
|
||||||
|
const {lang = 'en'} = props;
|
||||||
|
|
||||||
const onOpen = useCallback(() => {
|
const onOpen = useCallback(() => {
|
||||||
setIsOpen(true);
|
setIsOpen(true);
|
||||||
|
@ -66,6 +67,8 @@ export default function Search() {
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
indexName="astro"
|
indexName="astro"
|
||||||
apiKey="0f387260ad74f9cbf4353facd29c919c"
|
apiKey="0f387260ad74f9cbf4353facd29c919c"
|
||||||
|
// Set facetFilters once Astro docs have been indexed by language
|
||||||
|
// searchParameters={{ facetFilters: [`lang:${lang}`] }}
|
||||||
transformItems={(items) => {
|
transformItems={(items) => {
|
||||||
return items.map((item) => {
|
return items.map((item) => {
|
||||||
// We transform the absolute URL into a relative URL to
|
// We transform the absolute URL into a relative URL to
|
||||||
|
|
Loading…
Add table
Reference in a new issue