fix(v2): DocSearch should keep working after a new release (#3393)

* We should create an alias for searching last version of docs on DocSearch/Algolia, so that on new version publish, search still works even if new version is not already indexed (#3391) * commit missing snapshot * update after algolia changes * put back facetFilters: [`version:${versions[0]}`] until latest facet is indexed
facebook · Sep 3, 2020 · 9c34f68 · 9c34f68
1 parent 3ace600
commit 9c34f68
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 22 deletions.
diff --git a/packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/index.test.ts.snap
@@ -291,6 +291,7 @@ Object {
   "version-current-metadata-prop-751.json": "{
   \\"version\\": \\"current\\",
   \\"label\\": \\"Next\\",
+  \\"isLast\\": true,
   \\"docsSidebars\\": {
     \\"docs\\": [
       {
@@ -615,6 +616,7 @@ Object {
   "version-1-0-0-metadata-prop-608.json": "{
   \\"version\\": \\"1.0.0\\",
   \\"label\\": \\"1.0.0\\",
+  \\"isLast\\": true,
   \\"docsSidebars\\": {
     \\"version-1.0.0/community\\": [
       {
@@ -631,6 +633,7 @@ Object {
   "version-current-metadata-prop-751.json": "{
   \\"version\\": \\"current\\",
   \\"label\\": \\"Next\\",
+  \\"isLast\\": false,
   \\"docsSidebars\\": {
     \\"community\\": [
       {
@@ -1073,6 +1076,7 @@ Object {
   "version-1-0-0-metadata-prop-608.json": "{
   \\"version\\": \\"1.0.0\\",
   \\"label\\": \\"1.0.0\\",
+  \\"isLast\\": false,
   \\"docsSidebars\\": {
     \\"version-1.0.0/docs\\": [
       {
@@ -1115,6 +1119,7 @@ Object {
   "version-1-0-1-metadata-prop-e87.json": "{
   \\"version\\": \\"1.0.1\\",
   \\"label\\": \\"1.0.1\\",
+  \\"isLast\\": true,
   \\"docsSidebars\\": {
     \\"version-1.0.1/docs\\": [
       {
@@ -1151,6 +1156,7 @@ Object {
   "version-current-metadata-prop-751.json": "{
   \\"version\\": \\"current\\",
   \\"label\\": \\"Next\\",
+  \\"isLast\\": false,
   \\"docsSidebars\\": {
     \\"docs\\": [
       {
@@ -1187,6 +1193,7 @@ Object {
   "version-with-slugs-metadata-prop-2bf.json": "{
   \\"version\\": \\"withSlugs\\",
   \\"label\\": \\"withSlugs\\",
+  \\"isLast\\": false,
   \\"docsSidebars\\": {
     \\"version-1.0.1/docs\\": [
       {

diff --git a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts b/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts
@@ -15,6 +15,7 @@ declare module '@docusaurus/plugin-content-docs-types' {
   export type PropVersionMetadata = {
     version: string;
     label: string;
+    isLast: boolean;
     docsSidebars: PropSidebars;
     permalinkToSidebar: PermalinkToSidebar;
   };

diff --git a/packages/docusaurus-plugin-content-docs/src/props.ts b/packages/docusaurus-plugin-content-docs/src/props.ts
@@ -67,6 +67,7 @@ export function toVersionMetadataProp(
   return {
     version: loadedVersion.versionName,
     label: loadedVersion.versionLabel,
+    isLast: loadedVersion.isLast,
     docsSidebars: toSidebarsProp(loadedVersion),
     permalinkToSidebar: loadedVersion.permalinkToSidebar,
   };

diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
@@ -18,6 +18,7 @@ import NotFound from '@theme/NotFound';
 import type {DocumentRoute} from '@theme/DocItem';
 import type {Props} from '@theme/DocPage';
 import {matchPath} from '@docusaurus/router';
+import Head from '@docusaurus/Head';
 
 import styles from './styles.module.css';
 
@@ -27,34 +28,61 @@ type DocPageContentProps = {
   readonly children: ReactNode;
 };
 
+// This theme is not coupled to Algolia, but can we do something else?
+// Note the last version is also indexed with "last", to avoid breaking search on new releases
+// See https://github.com/facebook/docusaurus/issues/3391
+function DocSearchVersionHeader({
+  version,
+  isLast,
+}: {
+  version: string;
+  isLast: boolean;
+}) {
+  const versions = isLast ? [version, 'latest'] : [version];
+  return (
+    <Head>
+      <meta
+        name="docsearch:version"
+        content={
+          // See https://github.com/facebook/docusaurus/issues/3391#issuecomment-685594160
+          versions.join(',')
+        }
+      />
+    </Head>
+  );
+}
+
 function DocPageContent({
   currentDocRoute,
   versionMetadata,
   children,
 }: DocPageContentProps): JSX.Element {
   const {siteConfig, isClient} = useDocusaurusContext();
-  const {permalinkToSidebar, docsSidebars, version} = versionMetadata;
+  const {permalinkToSidebar, docsSidebars, version, isLast} = versionMetadata;
   const sidebarName = permalinkToSidebar[currentDocRoute.path];
   const sidebar = docsSidebars[sidebarName];
   return (
-    <Layout version={version} key={isClient}>
-      <div className={styles.docPage}>
-        {sidebar && (
-          <div className={styles.docSidebarContainer} role="complementary">
-            <DocSidebar
-              sidebar={sidebar}
-              path={currentDocRoute.path}
-              sidebarCollapsible={
-                siteConfig.themeConfig?.sidebarCollapsible ?? true
-              }
-            />
-          </div>
-        )}
-        <main className={styles.docMainContainer}>
-          <MDXProvider components={MDXComponents}>{children}</MDXProvider>
-        </main>
-      </div>
-    </Layout>
+    <>
+      <DocSearchVersionHeader version={version} isLast={isLast} />
+      <Layout key={isClient}>
+        <div className={styles.docPage}>
+          {sidebar && (
+            <div className={styles.docSidebarContainer} role="complementary">
+              <DocSidebar
+                sidebar={sidebar}
+                path={currentDocRoute.path}
+                sidebarCollapsible={
+                  siteConfig.themeConfig?.sidebarCollapsible ?? true
+                }
+              />
+            </div>
+          )}
+          <main className={styles.docMainContainer}>
+            <MDXProvider components={MDXComponents}>{children}</MDXProvider>
+          </main>
+        </div>
+      </Layout>
+    </>
   );
 }
 

diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
@@ -43,7 +43,6 @@ function Layout(props: Props): JSX.Element {
     image,
     keywords,
     permalink,
-    version,
   } = props;
   const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
   const metaImage = image || defaultImage;
@@ -63,7 +62,6 @@ function Layout(props: Props): JSX.Element {
         {description && (
           <meta property="og:description" content={description} />
         )}
-        {version && <meta name="docsearch:version" content={version} />}
         {keywords && keywords.length && (
           <meta name="keywords" content={keywords.join(',')} />
         )}

diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -245,7 +245,6 @@ declare module '@theme/Layout' {
     image?: string;
     keywords?: string[];
     permalink?: string;
-    version?: string;
   };
 
   const Layout: (props: Props) => JSX.Element;

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -235,6 +235,7 @@ module.exports = {
       apiKey: '47ecd3b21be71c5822571b9f59e52544',
       indexName: 'docusaurus-2',
       searchParameters: {
+        // facetFilters: [`version:latest`],
         facetFilters: [`version:${versions[0]}`],
       },
     },