Merge branch 'main' into main

Author: KevinVandy

convex/users.ts

@@ -54,7 +54,11 @@ export const listUsers = query({
     nameFilter: v.optional(v.string()),
     capabilityFilter: v.optional(
       v.array(
-        v.union(v.literal('admin'), v.literal('disableAds'), v.literal('builder'))
+        v.union(
+          v.literal('admin'),
+          v.literal('disableAds'),
+          v.literal('builder')
+        )
       )
     ),
     noCapabilitiesFilter: v.optional(v.boolean()),
@@ -96,10 +100,7 @@ export const listUsers = query({
 
       // No capabilities filter
       if (args.noCapabilitiesFilter === true) {
-        if (
-          !Array.isArray(user.capabilities) ||
-          user.capabilities.length > 0
-        ) {
+        if (!Array.isArray(user.capabilities) || user.capabilities.length > 0) {
           return false
         }
       }
@@ -116,7 +117,11 @@ export const listUsers = query({
         if (Boolean(user.adsDisabled) !== args.adsDisabledFilter) return false
       }
       if (typeof args.interestedInHidingAdsFilter === 'boolean') {
-        if (Boolean(user.interestedInHidingAds) !== args.interestedInHidingAdsFilter) return false
+        if (
+          Boolean(user.interestedInHidingAds) !==
+          args.interestedInHidingAdsFilter
+        )
+          return false
       }
       return true
     })

package.json

@@ -41,10 +41,10 @@
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-pacer": "^0.16.3",
     "@tanstack/react-query": "^5.90.2",
-    "@tanstack/react-router": "1.136.4",
-    "@tanstack/react-router-devtools": "1.136.4",
-    "@tanstack/react-router-ssr-query": "1.136.4",
-    "@tanstack/react-start": "1.136.4",
+    "@tanstack/react-router": "1.139.12",
+    "@tanstack/react-router-devtools": "1.139.12",
+    "@tanstack/react-router-ssr-query": "1.139.12",
+    "@tanstack/react-start": "1.139.12",
     "@tanstack/react-table": "^8.21.3",
     "@types/d3": "^7.4.3",
     "@typescript-eslint/parser": "^7.2.0",
@@ -62,12 +62,11 @@
     "downshift": "^9.0.9",
     "eslint-config-react-app": "^7.0.1",
     "gray-matter": "^4.0.3",
+    "hast-util-is-element": "^3.0.0",
+    "hast-util-to-string": "^3.0.1",
     "html-react-parser": "^5.1.10",
     "import-meta-resolve": "^4.0.0",
     "lru-cache": "^7.13.1",
-    "marked": "^13.0.2",
-    "marked-alert": "^2.0.1",
-    "marked-gfm-heading-id": "^4.0.0",
     "mermaid": "^11.11.0",
     "qss": "^3.0.0",
     "react": "^19.2.0",
@@ -76,11 +75,22 @@
     "react-icons": "^5.3.0",
     "react-instantsearch": "7",
     "react-markdown": "^6.0.3",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-callouts": "^2.1.2",
+    "rehype-parse": "^9.0.1",
+    "rehype-raw": "^7.0.0",
+    "rehype-slug": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
     "remix-utils": "^8.5.0",
     "remove-markdown": "^0.5.0",
     "shiki": "^1.4.0",
     "tailwind-merge": "^1.14.0",
     "tiny-invariant": "^1.3.3",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0",
     "vite-bundle-analyzer": "^1.2.1",
     "vite-tsconfig-paths": "^5.0.1",
     "zod": "^4.0.17",

pnpm-lock.yaml

@@ -1,6 +1,3 @@
-import { marked } from 'marked'
-import markedAlert from 'marked-alert'
-import { getHeadingList, gfmHeadingId } from 'marked-gfm-heading-id'
 import * as React from 'react'
 import {
   BsArrowsCollapseVertical,
@@ -11,6 +8,10 @@ import { twMerge } from 'tailwind-merge'
 import { useWidthToggle } from '~/components/DocsLayout'
 import { DocTitle } from '~/components/DocTitle'
 import { Markdown } from '~/components/Markdown'
+import {
+  MarkdownHeadingProvider,
+  useMarkdownHeadings,
+} from '~/components/MarkdownHeadingContext'
 import { AdGate } from '~/contexts/AdsContext'
 import { CopyMarkdownButton } from './CopyMarkdownButton'
 import { GamHeader, GamLeader } from './Gam'
@@ -28,7 +29,7 @@ type DocProps = {
   colorTo?: string
 }
 
-export function Doc({
+function DocContent({
   title,
   content,
   repo,
@@ -38,17 +39,7 @@ export function Doc({
   colorFrom,
   colorTo,
 }: DocProps) {
-  const { markup, headings } = React.useMemo(() => {
-    const markup = marked.use(
-      { gfm: true },
-      gfmHeadingId(),
-      markedAlert()
-    )(content) as string
-
-    const headings = getHeadingList()
-
-    return { markup, headings }
-  }, [content])
+  const { headings } = useMarkdownHeadings()
 
   const isTocVisible = shouldRenderToc && headings && headings.length > 1
 
@@ -107,7 +98,7 @@ export function Doc({
     headingElements.forEach((el) => observer.observe(el))
 
     return () => observer.disconnect()
-  }, [])
+  }, [headings])
 
   return (
     <div className="flex-1 min-h-0 flex flex-col">
@@ -168,7 +159,7 @@ export function Doc({
               'styled-markdown-content'
             )}
           >
-            <Markdown htmlMarkup={markup} />
+            <Markdown rawContent={content} />
           </div>
           <div className="h-12" />
           <div className="w-full h-px bg-gray-500 opacity-30" />
@@ -197,3 +188,11 @@ export function Doc({
     </div>
   )
 }
+
+export function Doc(props: DocProps) {
+  return (
+    <MarkdownHeadingProvider>
+      <DocContent {...props} />
+    </MarkdownHeadingProvider>
+  )
+}

src/components/Doc.tsx

@@ -419,7 +419,11 @@ export function MaintainerRowCard({
   )
 }
 
-export function MaintainerCard({ maintainer, libraryId, hideLibraries }: MaintainerCardProps) {
+export function MaintainerCard({
+  maintainer,
+  libraryId,
+  hideLibraries,
+}: MaintainerCardProps) {
   const libraries = getPersonsMaintainerOf(maintainer)
   const [showAllLibraries, setShowAllLibraries] = useState(false)
 

src/components/MaintainerCard.tsx

@@ -10,12 +10,12 @@ import parse, {
   Element,
   HTMLReactParserOptions,
 } from 'html-react-parser'
-import { marked } from 'marked'
-import { gfmHeadingId } from 'marked-gfm-heading-id'
-import markedAlert from 'marked-alert'
 import mermaid from 'mermaid'
 import { useToast } from '~/components/ToastProvider'
 import { twMerge } from 'tailwind-merge'
+import { useMarkdownHeadings } from '~/components/MarkdownHeadingContext'
+import { renderMarkdown } from '~/utils/markdown'
+import { Tabs } from '~/components/Tabs'
 
 const CustomHeading = ({
   Comp,
@@ -194,7 +194,7 @@ export function CodeBlock({
   return (
     <div
       className={twMerge(
-        'w-full max-w-full relative not-prose border border-gray-500/20 rounded-md [&_pre]:rounded-md',
+        'codeblock w-full max-w-full relative not-prose border border-gray-500/20 rounded-md [&_pre]:rounded-md [*[data-tab]_&]:only:border-0',
         props.className
       )}
       style={props.style}
@@ -288,6 +288,35 @@ const getHighlighter = cache(async (language: string, themes: string[]) => {
 const options: HTMLReactParserOptions = {
   replace: (domNode) => {
     if (domNode instanceof Element && domNode.attribs) {
+      if (domNode.name === 'md-comment-component') {
+        const componentName = domNode.attribs['data-component']
+        const rawAttributes = domNode.attribs['data-attributes']
+        const attributes: Record<string, any> = {}
+        try {
+          Object.assign(attributes, JSON.parse(rawAttributes))
+        } catch {
+          // ignore JSON parse errors and fall back to empty props
+        }
+
+        switch (componentName?.toLowerCase()) {
+          case 'tabs': {
+            const tabs = attributes.tabs
+            const panelElements = domNode.children?.filter(
+              (child): child is Element =>
+                child instanceof Element && child.name === 'md-tab-panel'
+            )
+
+            const children = panelElements?.map((panel) =>
+              domToReact(panel.children as any, options)
+            )
+
+            return <Tabs tabs={tabs} children={children as any} />
+          }
+          default:
+            return <div>{domToReact(domNode.children as any, options)}</div>
+        }
+      }
+
       const replacer = markdownComponents[domNode.name]
       if (replacer) {
         return React.createElement(
@@ -302,24 +331,35 @@ const options: HTMLReactParserOptions = {
   },
 }
 
-type MarkdownProps = { rawContent?: string; htmlMarkup?: string }
+type MarkdownProps = {
+  rawContent?: string
+  htmlMarkup?: string
+}
 
 export function Markdown({ rawContent, htmlMarkup }: MarkdownProps) {
-  return React.useMemo(() => {
-    if (rawContent) {
-      const markup = marked.use(
-        { gfm: true },
-        gfmHeadingId(),
-        markedAlert()
-      )(rawContent) as string
+  const { setHeadings } = useMarkdownHeadings()
 
-      return parse(markup, options)
+  const rendered = React.useMemo(() => {
+    if (rawContent) {
+      return renderMarkdown(rawContent)
     }
 
     if (htmlMarkup) {
-      return parse(htmlMarkup, options)
+      return { markup: htmlMarkup, headings: [] }
     }
 
-    return null
+    return { markup: '', headings: [] }
   }, [rawContent, htmlMarkup])
+
+  React.useEffect(() => {
+    setHeadings(rendered.headings)
+  }, [rendered.headings, setHeadings])
+
+  return React.useMemo(() => {
+    if (!rendered.markup) {
+      return null
+    }
+
+    return parse(rendered.markup, options)
+  }, [rendered.markup])
 }

src/components/Markdown.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { MarkdownHeading } from '~/utils/markdown/processor'
+
+const MarkdownHeadingContext = React.createContext<{
+  headings: MarkdownHeading[]
+  setHeadings(headings: MarkdownHeading[]): void
+}>({
+  headings: [],
+  setHeadings: () => undefined,
+})
+
+export function MarkdownHeadingProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [headings, setHeadings] = React.useState<MarkdownHeading[]>([])
+
+  const value = React.useMemo(() => ({ headings, setHeadings }), [headings])
+
+  return (
+    <MarkdownHeadingContext.Provider value={value}>
+      {children}
+    </MarkdownHeadingContext.Provider>
+  )
+}
+
+export function useMarkdownHeadings() {
+  return React.useContext(MarkdownHeadingContext)
+}