New --filter syntax

docs/components/Logo.tsx

@@ -116,4 +116,4 @@ export const Logo = () => (
       </linearGradient>
     </defs>
   </svg>
-)
+);

docs/components/SliderInput.tsx

@@ -1,39 +1,39 @@
-import * as React from 'react'
-import { SliderState, useSliderState } from '@react-stately/slider'
-import { useSlider, useSliderThumb } from '@react-aria/slider'
-import { useFocusRing } from '@react-aria/focus'
-import { VisuallyHidden } from '@react-aria/visually-hidden'
-import { mergeProps } from '@react-aria/utils'
-import { useNumberFormatter } from '@react-aria/i18n'
-import { AriaSliderProps, AriaSliderThumbProps } from '@react-types/slider'
-import { AriaNumberFieldProps } from '@react-types/numberfield'
+import * as React from "react";
+import { SliderState, useSliderState } from "@react-stately/slider";
+import { useSlider, useSliderThumb } from "@react-aria/slider";
+import { useFocusRing } from "@react-aria/focus";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { mergeProps } from "@react-aria/utils";
+import { useNumberFormatter } from "@react-aria/i18n";
+import { AriaSliderProps, AriaSliderThumbProps } from "@react-types/slider";
+import { AriaNumberFieldProps } from "@react-types/numberfield";
 
 export function Slider(
-  props: AriaSliderProps & Pick<AriaNumberFieldProps, 'formatOptions'>
+  props: AriaSliderProps & Pick<AriaNumberFieldProps, "formatOptions">
 ) {
-  let trackRef = React.useRef(null)
-  let numberFormatter = useNumberFormatter(props.formatOptions)
-  let state = useSliderState({ ...props, numberFormatter })
+  let trackRef = React.useRef(null);
+  let numberFormatter = useNumberFormatter(props.formatOptions);
+  let state = useSliderState({ ...props, numberFormatter });
   let { groupProps, trackProps, labelProps, outputProps } = useSlider(
     props,
     state,
     trackRef
-  )
+  );
 
   return (
     <div
       {...groupProps}
       style={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
 
-        touchAction: 'none',
+        touchAction: "none",
       }}
     >
       {/* Create a flex container for the label and output element. */}
-      <div style={{ display: 'flex', alignSelf: 'stretch' }}>
+      <div style={{ display: "flex", alignSelf: "stretch" }}>
         {props.label && (
           <label className="text-blue-400 text-xl font-medium" {...labelProps}>
             {props.label}
@@ -42,7 +42,7 @@ export function Slider(
         <output
           {...outputProps}
           className="text-blue-400 text-xl font-bold pl-6"
-          style={{ flex: '1 0 auto', textAlign: 'end' }}
+          style={{ flex: "1 0 auto", textAlign: "end" }}
         >
           {state.getThumbValueLabel(0)}
         </output>
@@ -53,48 +53,48 @@ export function Slider(
         ref={trackRef}
         className="mt-2"
         style={{
-          position: 'relative',
+          position: "relative",
           height: 30,
-          width: ' 100%',
+          width: " 100%",
         }}
       >
         <div
           style={{
-            position: 'absolute',
+            position: "absolute",
 
             height: 2,
             top: 13,
-            width: '100%',
+            width: "100%",
           }}
           className="bg-blue-400 bg-opacity-50"
         />
         <Thumb index={0} state={state} trackRef={trackRef} />
       </div>
     </div>
-  )
+  );
 }
 
 function Thumb(
   props: AriaSliderThumbProps & { state: SliderState; trackRef: any }
 ) {
-  let { state, trackRef, index } = props
-  let inputRef = React.useRef(null)
+  let { state, trackRef, index } = props;
+  let inputRef = React.useRef(null);
   let { thumbProps, inputProps } = useSliderThumb(
     {
       index,
       trackRef,
       inputRef,
     },
     state
-  )
+  );
 
-  let { focusProps, isFocusVisible } = useFocusRing()
+  let { focusProps, isFocusVisible } = useFocusRing();
   return (
     <div
       style={{
-        position: 'absolute',
+        position: "absolute",
         top: 4,
-        transform: 'translateX(-50%)',
+        transform: "translateX(-50%)",
         left: `${state.getThumbPercent(index) * 100}%`,
       }}
     >
@@ -103,20 +103,20 @@ function Thumb(
         style={{
           width: 20,
           height: 20,
-          borderRadius: '50%',
+          borderRadius: "50%",
         }}
         className={
           isFocusVisible
-            ? 'bg-blue-200 border border-blue-400 shadow'
+            ? "bg-blue-200 border border-blue-400 shadow"
             : state.isThumbDragging(index)
-            ? 'bg-blue-500 border border-blue-400 shadow'
-            : 'bg-blue-400 border border-blue-400 shadow'
+            ? "bg-blue-500 border border-blue-400 shadow"
+            : "bg-blue-400 border border-blue-400 shadow"
         }
       >
         <VisuallyHidden>
           <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />
         </VisuallyHidden>
       </div>
     </div>
-  )
+  );
 }

docs/components/Sticky.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react'
+import * as React from "react";
 
-import cn from 'classnames'
+import cn from "classnames";
 
 export interface StickyProps {
-  offset?: number
-  shadow?: boolean
-  className?: string
+  offset?: number;
+  shadow?: boolean;
+  className?: string;
 }
 
 export const Sticky: React.FC<StickyProps> = ({
@@ -17,7 +17,7 @@ export const Sticky: React.FC<StickyProps> = ({
   return (
     <div
       style={{ top: offset || 0 }}
-      className={cn({ shadow }, 'z-20', className)}
+      className={cn({ shadow }, "z-20", className)}
     >
       {children}
 
@@ -30,7 +30,7 @@ export const Sticky: React.FC<StickyProps> = ({
         }
       `}</style>
     </div>
-  )
-}
+  );
+};
 
-Sticky.displayName = 'Sticky'
+Sticky.displayName = "Sticky";

docs/nextra-theme-docs/arrow-right.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 const ArrowRight = ({ height = 24, ...props }) => {
   return (
@@ -16,7 +16,7 @@ const ArrowRight = ({ height = 24, ...props }) => {
         d="M9 5l7 7-7 7"
       />
     </svg>
-  )
+  );
 };
 
 export default ArrowRight;

docs/nextra-theme-docs/bleed.js

@@ -1,17 +1,14 @@
-import React from 'react'
-import cn from 'classnames'
+import React from "react";
+import cn from "classnames";
 
-const Bleed = (
-  {
-    full,
-    children,
-  }
-) => {
+const Bleed = ({ full, children }) => {
   return (
-    <div className={cn('bleed relative mt-6 -mx-6 md:-mx-8 2xl:-mx-24', { full })}>
+    <div
+      className={cn("bleed relative mt-6 -mx-6 md:-mx-8 2xl:-mx-24", { full })}
+    >
       {children}
     </div>
-  )
+  );
 };
 
 export default Bleed;

docs/nextra-theme-docs/callout.js

@@ -1,28 +1,29 @@
-import React from 'react'
+import React from "react";
 
 const themes = {
   default:
-    'bg-orange-100 text-orange-800 dark:text-orange-300 dark:bg-orange-200 dark:bg-opacity-10',
+    "bg-orange-100 text-orange-800 dark:text-orange-300 dark:bg-orange-200 dark:bg-opacity-10",
   error:
-    'bg-red-200 text-red-900 dark:text-red-200 dark:bg-red-600 dark:bg-opacity-30',
+    "bg-red-200 text-red-900 dark:text-red-200 dark:bg-red-600 dark:bg-opacity-30",
   warning:
-    'bg-yellow-200 text-yellow-900 dark:text-yellow-200 dark:bg-yellow-700 dark:bg-opacity-30'
-}
+    "bg-yellow-200 text-yellow-900 dark:text-yellow-200 dark:bg-yellow-700 dark:bg-opacity-30",
+};
 
-const Callout = ({ children, type = 'default', emoji = '💡' }) => {
+const Callout = ({ children, type = "default", emoji = "💡" }) => {
   return (
     <div className={`${themes[type]} flex rounded-lg callout mt-6`}>
       <div
         className="pl-3 pr-2 py-2 select-none text-xl"
         style={{
-          fontFamily: '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+          fontFamily:
+            '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
         }}
       >
         {emoji}
       </div>
       <div className="pr-4 py-2">{children}</div>
     </div>
-  )
+  );
 };
 
 export default Callout;

docs/nextra-theme-docs/flatten.js

@@ -2,6 +2,6 @@ export default function flatten(list) {
   return list.reduce((flat, toFlatten) => {
     return flat.concat(
       toFlatten.children ? flatten(toFlatten.children) : toFlatten
-    )
-  }, [])
+    );
+  }, []);
 }

docs/nextra-theme-docs/get-fs-route.js

@@ -1,7 +1,7 @@
 export const getFSRoute = (asPath, locale) => {
-  if (!locale) return asPath.replace(new RegExp('/index(/|$)'), '$1')
+  if (!locale) return asPath.replace(new RegExp("/index(/|$)"), "$1");
 
   return asPath
-    .replace(new RegExp(`\.${locale}(\/|$)`), '$1')
-    .replace(new RegExp('/index(/|$)'), '$1')
-}
+    .replace(new RegExp(`\.${locale}(\/|$)`), "$1")
+    .replace(new RegExp("/index(/|$)"), "$1");
+};

docs/nextra-theme-docs/head.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import NextHead from 'next/head'
+import React from "react";
+import NextHead from "next/head";
 
-import renderComponent from './utils/render-component'
+import renderComponent from "./utils/render-component";
 
 export default function Head({ config, title, locale, meta }) {
   return (
@@ -16,7 +16,7 @@ export default function Head({ config, title, locale, meta }) {
       {config.font ? (
         <style
           dangerouslySetInnerHTML={{
-            __html: `html{font-family:Inter,sans-serif}@supports(font-variation-settings:normal){html{font-family:'Inter var',sans-serif}}`
+            __html: `html{font-family:Inter,sans-serif}@supports(font-variation-settings:normal){html{font-family:'Inter var',sans-serif}}`,
           }}
         />
       ) : null}
@@ -28,5 +28,5 @@ export default function Head({ config, title, locale, meta }) {
         />
       ) : null}
     </NextHead>
-  )
+  );
 }

docs/nextra-theme-docs/menu-context.js

@@ -1,6 +1,6 @@
-import { useContext, createContext } from 'react'
+import { useContext, createContext } from "react";
 
-export const MenuContext = createContext(false)
+export const MenuContext = createContext(false);
 export default function useMenuContext() {
-  return useContext(MenuContext)
+  return useContext(MenuContext);
 }

docs/nextra-theme-docs/misc/active-anchor.js

@@ -1,17 +1,19 @@
-import React, { createContext, useContext, useState } from 'react'
+import React, { createContext, useContext, useState } from "react";
 
-const ActiveAnchorContext = createContext()
-const ActiveAnchorSetterContext = createContext()
+const ActiveAnchorContext = createContext();
+const ActiveAnchorSetterContext = createContext();
 
 // Separate the state as 2 contexts here to avoid
 // re-renders of the content triggered by the state update.
-export const useActiveAnchor = () => useContext(ActiveAnchorContext)
-export const useActiveAnchorSet = () => useContext(ActiveAnchorSetterContext)
+export const useActiveAnchor = () => useContext(ActiveAnchorContext);
+export const useActiveAnchorSet = () => useContext(ActiveAnchorSetterContext);
 export const ActiveAnchor = ({ children }) => {
-  const state = useState({})
-  return <ActiveAnchorContext.Provider value={state[0]}>
-    <ActiveAnchorSetterContext.Provider value={state[1]}>
-      {children}
-    </ActiveAnchorSetterContext.Provider>
-  </ActiveAnchorContext.Provider>
-}
+  const state = useState({});
+  return (
+    <ActiveAnchorContext.Provider value={state[0]}>
+      <ActiveAnchorSetterContext.Provider value={state[1]}>
+        {children}
+      </ActiveAnchorSetterContext.Provider>
+    </ActiveAnchorContext.Provider>
+  );
+};

docs/nextra-theme-docs/misc/default.config.js

@@ -1,8 +1,8 @@
-import React from 'react'
+import React from "react";
 
 export default {
-  docsRepositoryBase: 'https://github.com/shuding/nextra',
-  titleSuffix: ' – Nextra',
+  docsRepositoryBase: "https://github.com/shuding/nextra",
+  titleSuffix: " – Nextra",
   nextLinks: true,
   prevLinks: true,
   search: true,
@@ -11,7 +11,7 @@ export default {
   font: true,
   footer: true,
   footerText: `MIT ${new Date().getFullYear()} © Nextra.`,
-  footerEditLink: 'Edit this page',
+  footerEditLink: "Edit this page",
   logo: (
     <React.Fragment>
       <span className="mr-2 font-extrabold hidden md:inline">Nextra</span>
@@ -33,7 +33,7 @@ export default {
       <meta property="og:description" content="Nextra: the next docs builder" />
       <meta name="apple-mobile-web-app-title" content="Nextra" />
     </React.Fragment>
-  )
+  ),
   // direction: 'ltr',
   // i18n: [{ locale: 'en-US', text: 'English', direction: 'ltr' }],
-}
+};