TanStack · TkDodo · Apr 22, 2024 · Apr 22, 2024 · Apr 22, 2024
diff --git a/app/components/RenderMarkdown.tsx b/app/components/RenderMarkdown.tsx
@@ -4,6 +4,7 @@ import { MarkdownLink } from '~/components/MarkdownLink'
 import type { HTMLProps } from 'react'
 import Markdown from 'markdown-to-jsx'
 import { getHighlighter as shikiGetHighlighter } from 'shiki/bundle-web.mjs'
+import { transformerNotationDiff } from '@shikijs/transformers'
 
 const CustomHeading = ({
   Comp,
@@ -86,6 +87,7 @@ function CodeBlock(props: React.HTMLProps<HTMLPreElement>) {
           highlighter.codeToHtml(code, {
             lang,
             theme,
+            transformers: [transformerNotationDiff()],
           })
         )
       )

diff --git a/app/styles/app.css b/app/styles/app.css
@@ -174,6 +174,13 @@ pre.shiki .language-id {
   display: none;
 }
 
+pre.has-diff span.remove {
+  background-color: #ff000036;
+}
+
+pre.has-diff span.add {
+  background-color: #00ff0036;
+}
 /* Visually differentiates twoslash code samples  */
 pre.twoslash {
   border-color: #719af4;

diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
   },
   "devDependencies": {
     "@orama/orama": "^2.0.16",
+    "@shikijs/transformers": "^1.3.0",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
     "@types/remove-markdown": "^0.3.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
  useMatches,
  useNavigate,
  useParams,
  useRouterState,
 } from '@tanstack/react-router'
 import type { AnyOrama, SearchParamsFullText, AnyDocument } from '@orama/orama'
 import { SearchBox, SearchButton } from '@orama/searchbox'
 import { Carbon } from '~/components/Carbon'
 import { Select } from '~/components/Select'
 import { useLocalStorage } from '~/utils/useLocalStorage'
    )
  })

  const library = getLibrary(libraryId!)

  const oramaSearchParams: SearchParamsFullText<AnyOrama, AnyDocument> = {
    threshold: 0,
diff --git a/app/components/MarkdownLink.tsx b/app/components/MarkdownLink.tsx

 export function MarkdownLink(props: HTMLProps<HTMLAnchorElement>) {
  if ((props as { href: string }).href?.startsWith('http')) {
    return <a {...props} />
  }

  return (
diff --git a/app/components/SponsorPack.tsx b/app/components/SponsorPack.tsx
 import { Pack, hierarchy } from '@visx/hierarchy'
 import { ParentSize } from '@visx/responsive'
 import { twMerge } from 'tailwind-merge'
 import { set } from 'date-fns'

 export default function SponsorPack({ sponsors }: { sponsors: any }) {
  const pack = React.useMemo(
                              flex flex-col items-center
                            `,

                              tooltipX == 'left'
                                ? `left-1/4 -translate-x-full`
                                : `right-1/4 translate-x-full`,
                              tooltipY == 'top'
                                ? `top-1/4 -translate-y-full`
                                : `bottom-1/4 translate-y-full`
                            )}
diff --git a/app/hooks/useSessionStorage.ts b/app/hooks/useSessionStorage.ts

  React.useEffect(() => {
    sessionStorage.setItem(key, JSON.stringify(state))
  }, [state])

  return [state, setState]
 }
diff --git a/app/old-routes/api.github-sponsors-webhook.ts b/app/old-routes/api.github-sponsors-webhook.ts
    throw new Error('No event body action found on request')
  }

  if (event.action == 'created') {
    sponsorCreated({
      login: event.sponsorship.sponsor.login,
      newTier: event.sponsorship.tier,
    return new Response('Created', { status: 200 })
  }

  if (event.action == 'cancelled') {
    sponsorCancelled({
      login: event.sponsorship.sponsor.login,
      oldTier: event.sponsorship.tier,
	useMatches,
	useNavigate,
	useParams,
	useRouterState,
Check warning on line 15 in app/components/DocsLayout.tsx GitHub Actions / PR `'useRouterState' is defined but never used`
	} from '@tanstack/react-router'
	import type { AnyOrama, SearchParamsFullText, AnyDocument } from '@orama/orama'
	import { SearchBox, SearchButton } from '@orama/searchbox'
Check warning on line 18 in app/components/DocsLayout.tsx GitHub Actions / PR `'SearchButton' is defined but never used`
	import { Carbon } from '~/components/Carbon'
	import { Select } from '~/components/Select'
	import { useLocalStorage } from '~/utils/useLocalStorage'
	)
	})

	const library = getLibrary(libraryId!)
Check warning on line 431 in app/components/DocsLayout.tsx GitHub Actions / PR `'library' is assigned a value but never used`

	const oramaSearchParams: SearchParamsFullText<AnyOrama, AnyDocument> = {
	threshold: 0,

	export function MarkdownLink(props: HTMLProps<HTMLAnchorElement>) {
	if ((props as { href: string }).href?.startsWith('http')) {
	return <a {...props} />
Check warning on line 6 in app/components/MarkdownLink.tsx GitHub Actions / PR `Anchors must have content and the content must be accessible by a screen reader`
	}

	return (
	import { Pack, hierarchy } from '@visx/hierarchy'
	import { ParentSize } from '@visx/responsive'
	import { twMerge } from 'tailwind-merge'
	import { set } from 'date-fns'
Check warning on line 5 in app/components/SponsorPack.tsx GitHub Actions / PR `'set' is defined but never used`

	export default function SponsorPack({ sponsors }: { sponsors: any }) {
	const pack = React.useMemo(
	flex flex-col items-center
	`,

	tooltipX == 'left'
Check warning on line 119 in app/components/SponsorPack.tsx GitHub Actions / PR `Expected '===' and instead saw '=='`
	? `left-1/4 -translate-x-full`
	: `right-1/4 translate-x-full`,
	tooltipY == 'top'
Check warning on line 122 in app/components/SponsorPack.tsx GitHub Actions / PR `Expected '===' and instead saw '=='`
	? `top-1/4 -translate-y-full`
	: `bottom-1/4 translate-y-full`
	)}

	React.useEffect(() => {
	sessionStorage.setItem(key, JSON.stringify(state))
	}, [state])
Check warning on line 21 in app/hooks/useSessionStorage.ts GitHub Actions / PR `React Hook React.useEffect has a missing dependency: 'key'. Either include it or remove the dependency array`

	return [state, setState]
	}
	throw new Error('No event body action found on request')
	}

	if (event.action == 'created') {
Check warning on line 55 in app/old-routes/api.github-sponsors-webhook.ts GitHub Actions / PR `Expected '===' and instead saw '=='`
	sponsorCreated({
	login: event.sponsorship.sponsor.login,
	newTier: event.sponsorship.tier,
	return new Response('Created', { status: 200 })
	}

	if (event.action == 'cancelled') {
Check warning on line 63 in app/old-routes/api.github-sponsors-webhook.ts GitHub Actions / PR `Expected '===' and instead saw '=='`
	sponsorCancelled({
	login: event.sponsorship.sponsor.login,
	oldTier: event.sponsorship.tier,