michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add Algolia docsearch language facet (#1568)

Browse source 
* 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:
Taylor Beseda 2021-10-25 12:30:31 -06:00 committed by GitHub
parent 059aff923b
commit 1acb13e4bf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
docs/src/components/HeadSEO.astro
View file

@ -1,9 +1,10 @@
---
import {SITE, OPEN_GRAPH} from '../config.ts';
import { getLanguageFromURL } from '../util.ts';
export interface Props {
content: any,
site: any,
canonicalURL: URL | string,
canonicalURL: URL,
};
const {
content = {},
@ -12,10 +13,14 @@ const {
const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
const canonicalImageSrc = new URL(imageSrc, Astro.site);
const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
const lang = canonicalURL && getLanguageFromURL(canonicalURL.pathname);
---
<!-- Page Metadata -->
<link rel="canonical" href={canonicalURL}/>
<!-- Algolia docsearch language facet -->
<meta name="docsearch:language" content="{lang}" />
<!-- OpenGraph Tags -->
<meta property="og:title" content={content.title ?? SITE.title}/>
<meta property="og:type" content="article"/>

2
docs/src/components/Header/Header.astro
View file

@ -154,6 +154,6 @@ const lang = currentPage && getLanguageFromURL(currentPage);
</div>
<div style="flex-grow: 1;"></div>
{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>
</header>

5
docs/src/components/Header/Search.tsx
View file

@ -5,10 +5,11 @@ import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
import '@docsearch/css//dist/style.css';
import './Search.css';
export default function Search() {
export default function Search(props) {
const [isOpen, setIsOpen] = useState(false);
const searchButtonRef = useRef();
const [initialQuery, setInitialQuery] = useState(null);
const {lang = 'en'} = props;
const onOpen = useCallback(() => {
setIsOpen(true);
@ -66,6 +67,8 @@ export default function Search() {
onClose={onClose}
indexName="astro"
apiKey="0f387260ad74f9cbf4353facd29c919c"
// Set facetFilters once Astro docs have been indexed by language
// searchParameters={{ facetFilters: [`lang:${lang}`] }}
transformItems={(items) => {
return items.map((item) => {
// We transform the absolute URL into a relative URL to