Fix search regression (#465)

* Fix search regression

* Change “Blockquote” to “Callout” which is more semantically correct

Author: benface

algolia-crawler.config.js

@@ -25,12 +25,12 @@ new Crawler({
               selectors: '.graph-docs-current-group',
               defaultValue: 'The Graph Docs',
             },
-            lvl1: '.graph-docs-content h1 > span:first-of-type',
-            lvl2: '.graph-docs-content h2 > span:first-of-type',
-            lvl3: '.graph-docs-content h3 > span:first-of-type',
-            lvl4: '.graph-docs-content h4 > span:first-of-type',
-            lvl5: '.graph-docs-content h5 > span:first-of-type',
-            lvl6: '.graph-docs-content h6 > span:first-of-type',
+            lvl1: '.graph-docs-content h1',
+            lvl2: '.graph-docs-content h2',
+            lvl3: '.graph-docs-content h3',
+            lvl4: '.graph-docs-content h4',
+            lvl5: '.graph-docs-content h5',
+            lvl6: '.graph-docs-content h6',
             content: '.graph-docs-content p, .graph-docs-content li',
           },
         })

packages/nextra-theme/src/components/Blockquote.tsx renamed to packages/nextra-theme/src/components/Callout.tsx

@@ -1,13 +1,10 @@
-import { BlockquoteHTMLAttributes } from 'react'
-
 import { buildBorder, Spacing, Text, TextProps } from '@edgeandnode/gds'
 
-export type BlockquoteProps = Omit<TextProps & BlockquoteHTMLAttributes<HTMLQuoteElement>, 'color'>
+export type CalloutProps = Omit<TextProps, 'color'>
 
-export const Blockquote = ({ children, ...props }: BlockquoteProps) => {
+export const Callout = ({ children, ...props }: CalloutProps) => {
   return (
     <Text
-      as="blockquote"
       sx={{
         my: Spacing['32px'],
         '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ &:nth-child(1 of :not(style))':

packages/nextra-theme/src/components/Heading.tsx

@@ -1,5 +1,5 @@
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
-import { HTMLAttributes, useContext } from 'react'
+import { ElementType, useContext } from 'react'
 import { useInView } from 'react-intersection-observer'
 import { useDebounce } from 'react-use'
 
@@ -10,13 +10,15 @@ import { DocumentContext } from '@/layout/DocumentContext'
 
 export type HeadingProps = TextProps & {
   level: 1 | 2 | 3 | 4 | 5 | 6
-} & HTMLAttributes<HTMLHeadingElement>
+}
 
 const BaseHeading = ({ level, id, children, ...props }: HeadingProps) => {
   const { markOutlineItem } = useContext(DocumentContext)!
+
   const { ref, inView: inOrAboveView } = useInView({
-    rootMargin: '99999px 0px -90% 0px', // consider it "in or above view" if it's anywhere above 10% from the top of the viewport
+    rootMargin: '99999px 0px -80% 0px', // consider it "in or above view" if it's anywhere above 20% from the top of the viewport
   })
+
   useDebounce(
     () => {
       if (id) {
@@ -26,17 +28,20 @@ const BaseHeading = ({ level, id, children, ...props }: HeadingProps) => {
     100,
     [id, inOrAboveView, markOutlineItem],
   )
+
+  const Heading: ElementType = `h${level}`
+
   const { t } = useI18n<any>()
 
   return (
-    <Text ref={ref} as={`h${level}`} id={id} weight="SEMIBOLD" color="White" {...props}>
-      {children}
+    <Text ref={ref} id={id} weight="SEMIBOLD" color="White" {...props}>
+      <Heading sx={{ display: 'inline' }}>{children}</Heading>
       {id ? (
         <span
           sx={{
             marginInlineStart: '0.35em',
             opacity: Opacity['0%'],
-            [`h${level}:hover &, &:focus-within`]: { opacity: Opacity['100%'] },
+            [`*:hover > &, &:focus-within`]: { opacity: Opacity['100%'] },
             transition: buildTransition('OPACITY'),
           }}
         >

packages/nextra-theme/src/components/Paragraph.tsx

@@ -1,8 +1,6 @@
-import { HTMLAttributes } from 'react'
-
 import { Spacing, Text, TextProps } from '@edgeandnode/gds'
 
-export type ParagraphProps = Omit<TextProps & HTMLAttributes<HTMLParagraphElement>, 'color'>
+export type ParagraphProps = Omit<TextProps, 'color'>
 
 export const Paragraph = ({ children, ...props }: ParagraphProps) => {
   return (

packages/nextra-theme/src/components/index.ts

@@ -1,4 +1,4 @@
-export * from './Blockquote'
+export * from './Callout'
 export * from './Code'
 export * from './Difficulty'
 export * from './DocSearch'

packages/nextra-theme/src/index.tsx

@@ -12,7 +12,7 @@ import { Divider, DividerProps, Flex, Icon, Spacing, useI18n } from '@edgeandnod
 import { NPSForm } from '@edgeandnode/organisms'
 
 import {
-  Blockquote,
+  Callout,
   CodeBlock,
   CodeInline,
   Difficulty,
@@ -30,7 +30,7 @@ import {
 import { DocumentContext, MDXLayoutNav, MDXLayoutOutline, MDXLayoutPagination, NavContext } from '@/layout'
 
 const mdxComponents = {
-  blockquote: Blockquote,
+  blockquote: Callout,
   pre: CodeBlock,
   code: CodeInline,
   hr: (props: DividerProps) => <Divider sx={{ my: Spacing['32px'] }} {...props} />,