Add <meta> tag for search order (#5859)

Author: gaearon

src/components/Layout/Page.tsx

@@ -35,7 +35,7 @@ interface PageProps {
 export function Page({children, toc, routeTree, meta, section}: PageProps) {
   const {asPath} = useRouter();
   const cleanedPath = asPath.split(/[\?\#]/)[0];
-  const {route, nextRoute, prevRoute, breadcrumbs} = getRouteMeta(
+  const {route, nextRoute, prevRoute, breadcrumbs, order} = getRouteMeta(
     cleanedPath,
     routeTree
   );
@@ -96,12 +96,18 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
     showSidebar = false;
   }
 
+  let searchOrder;
+  if (section === 'learn' || (section === 'blog' && !isBlogIndex)) {
+    searchOrder = order;
+  }
+
   return (
     <>
       <Seo
         title={title}
         isHomePage={isHomePage}
         image={`/images/og-` + section + '.png'}
+        searchOrder={searchOrder}
       />
       <SocialBanner />
       <TopNav

src/components/Layout/getRouteMeta.tsx

@@ -54,12 +54,23 @@ export interface RouteMeta {
   route?: RouteItem;
   /** Trail of parent routes */
   breadcrumbs?: RouteItem[];
+  /** Order in the section */
+  order?: number;
 }
 
+type TravesalContext = RouteMeta & {
+  currentIndex: number;
+};
+
 export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
   const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
+  const ctx: TravesalContext = {
+    currentIndex: 0,
+  };
+  buildRouteMeta(cleanedPath, routeTree, ctx);
+  const {currentIndex, ...meta} = ctx;
   return {
-    ...buildRouteMeta(cleanedPath, routeTree, {}),
+    ...meta,
     breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree],
   };
 }
@@ -68,8 +79,10 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
 function buildRouteMeta(
   searchPath: string,
   currentRoute: RouteItem,
-  ctx: RouteMeta
-): RouteMeta {
+  ctx: TravesalContext
+) {
+  ctx.currentIndex++;
+
   const {routes} = currentRoute;
 
   if (ctx.route && !ctx.nextRoute) {
@@ -78,6 +91,7 @@ function buildRouteMeta(
 
   if (currentRoute.path === searchPath) {
     ctx.route = currentRoute;
+    ctx.order = ctx.currentIndex;
     // If we've found a deeper match, reset the previously stored next route.
     // TODO: this only works reliably if deeper matches are first in the tree.
     // We should revamp all of this to be more explicit.
@@ -89,14 +103,12 @@ function buildRouteMeta(
   }
 
   if (!routes) {
-    return ctx;
+    return;
   }
 
   for (const route of routes) {
     buildRouteMeta(searchPath, route, ctx);
   }
-
-  return ctx;
 }
 
 // iterates the route tree from the current route to find its ancestors for breadcrumbs

src/components/Seo.tsx

@@ -13,6 +13,7 @@ export interface SeoProps {
   // jsonld?: JsonLDType | Array<JsonLDType>;
   children?: React.ReactNode;
   isHomePage: boolean;
+  searchOrder?: number;
 }
 
 export const Seo = withRouter(
@@ -23,6 +24,7 @@ export const Seo = withRouter(
     router,
     children,
     isHomePage,
+    searchOrder,
   }: SeoProps & {router: Router}) => {
     const pageTitle = isHomePage ? 'React' : title + ' – React';
     // Twitter's meta parser is not very good.
@@ -96,6 +98,9 @@ export const Seo = withRouter(
           name="google-site-verification"
           content="sIlAGs48RulR4DdP95YSWNKZIEtCqQmRjzn-Zq-CcD0"
         />
+        {searchOrder != null && (
+          <meta name="algolia-search-order" content={'' + searchOrder} />
+        )}
         <link
           rel="preload"
           href="/fonts/Source-Code-Pro-Regular.woff2"