Merge branch 'TanStack:main' into newSearchBox

Author: rjborba

app/components/BytesForm.tsx

@@ -16,7 +16,7 @@ export default function BytesForm() {
             <img height={38} width={38} src={bytesImage} alt="Bytes" />
           </figure>
           <input
-            className="text-xs md:text-base border border-black/50 dark:border-white/50 rounded p-2 mb-1 md:mb-2 w-full bg-transparent"
+            className="text-xs border border-black/50 dark:border-white/50 rounded p-2 mb-1 md:mb-2 w-full bg-transparent"
             name="email_address"
             placeholder="Your email address"
             type="email"
@@ -25,7 +25,7 @@ export default function BytesForm() {
         </div>
         <button
           type="submit"
-          className="text-xs md:text-base mb-4 border rounded bg-rose-600 border-none text-white p-2"
+          className="text-xs mb-4 border rounded bg-rose-600 border-none text-white p-2"
         >
           {state !== 'loading' ? (
             <span>Subscribe</span>

app/components/Markdown.tsx

@@ -23,7 +23,10 @@ const CustomHeading = ({
 }) => {
   if (id) {
     return (
-      <a href={`#${id}`} className={`anchor-heading`}>
+      <a
+        href={`#${id}`}
+        className={`anchor-heading [&>*]:scroll-my-[5rem] [&>*]:lg:scroll-my-4`}
+      >
         <Comp id={id} {...props} />
       </a>
     )

app/libraries/virtual.ts

@@ -6,7 +6,7 @@ export const virtualProject: Library = {
   cardStyles: `shadow-xl shadow-purple-700/20 dark:shadow-lg dark:shadow-purple-500/30 text-purple-500 border-2 border-transparent hover:border-current`,
   to: '/virtual',
   tagline: `Headless UI for Virtualizing Large Element Lists`,
-  description: `Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid, Svelte & Lit while retaining 100% control over markup and styles.`,
+  description: `Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit & Angular while retaining 100% control over markup and styles.`,
   ogImage: 'https://github.com/tanstack/query/raw/main/media/header.png',
   bgStyle: 'bg-purple-500',
   textStyle: 'text-purple-500',
@@ -17,7 +17,7 @@ export const virtualProject: Library = {
   colorFrom: 'from-purple-500',
   colorTo: 'to-violet-600',
   textColor: 'text-purple-600',
-  frameworks: ['react', 'solid', 'vue', 'svelte', 'lit'],
+  frameworks: ['react', 'solid', 'vue', 'svelte', 'lit', 'angular'],
   defaultDocs: 'framework/react/overview',
   scarfId: '32372eb1-91e0-48e7-8df1-4808a7be6b94',
 }

app/routes/_libraries.start.$version.index.tsx

@@ -4,6 +4,7 @@ import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'
 import { PiTreeStructureBold, PiRocketLaunchDuotone } from 'react-icons/pi'
 import { TbServerBolt } from 'react-icons/tb'
 import {
+  FaBook,
   FaDiscord,
   FaGithub,
   FaTshirt,
@@ -20,6 +21,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { Framework, getBranch } from '~/libraries'
 import { seo } from '~/utils/seo'
 import { partners } from '~/utils/partners'
+import { VscPreview } from 'react-icons/vsc'
 
 const menu = [
   {
@@ -30,22 +32,22 @@ const menu = [
     ),
     to: '/',
   },
-  // {
-  //   label: (
-  //     <div className="flex items-center gap-1">
-  //       <VscPreview className="text-lg" /> Examples
-  //     </div>
-  //   ),
-  //   to: './docs/react/examples/basic',
-  // },
-  // {
-  //   label: (
-  //     <div className="flex items-center gap-1">
-  //       <FaBook className="text-lg" /> Docs
-  //     </div>
-  //   ),
-  //   to: './docs/',
-  // },
+  {
+    label: (
+      <div className="flex items-center gap-1">
+        <VscPreview className="text-lg" /> Examples
+      </div>
+    ),
+    to: '../../router/latest/docs/framework/react/examples/start-basic',
+  },
+  {
+    label: (
+      <div className="flex items-center gap-1">
+        <FaBook className="text-lg" /> Docs
+      </div>
+    ),
+    to: '../../router/latest/docs/framework/react/start/overview',
+  },
   // {
   //   label: (
   //     <div className="flex items-center gap-1">
@@ -190,9 +192,9 @@ export default function VersionIndex() {
                 fully type-safe and powerfully-unmatched routing system
               </span>{' '}
               that is designed to handle the beefiest of full-stack routing
-              requirements with ease. Start builds on top of Router's type- to
-              also provide type-safe full-stack APIs that keep you in the fast
-              lane.
+              requirements with ease. Start builds on top of Router's fully
+              inferred type safety to also provide type-safe full-stack APIs
+              that keep you in the fast lane.
             </p>
           </div>
         </div>
@@ -323,6 +325,7 @@ Check it out at https://tanstack.com/start/`
             )}`}
             target="_blank"
             className={`flex items-center gap-2 py-2 px-4 bg-cyan-500 rounded text-white uppercase font-extrabold`}
+            rel="noreferrer"
           >
             <FaTwitter /> Tweet about it!
           </a>{' '}
@@ -497,6 +500,7 @@ Check it out at https://tanstack.com/start/`
                   href={partner.href}
                   target="_blank"
                   className="bg-white shadow-xl shadow-gray-500/20 rounded-lg dark:border border-gray-500/20 dark:bg-gray-800 dark:shadow-none group overflow-hidden grid"
+                  rel="noreferrer"
                 >
                   <div className="z-0 row-start-1 col-start-1 bg-white flex items-center justify-center group-hover:blur-sm transition-all duration-200">
                     {partner.homepageImg}

app/routes/_libraries.virtual.$version.index.tsx

@@ -162,8 +162,8 @@ export default function RouteComp() {
             lg:text-xl lg:max-w-2xl"
         >
           Virtualize only the visible DOM nodes within massive scrollable
-          elements at 60FPS in TS/JS, React, Vue, Solid, Svelte & Lit while
-          retaining 100% control over markup and styles.
+          elements at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit & Angular
+          while retaining 100% control over markup and styles.
         </p>
         <Link
           to="./docs/introduction"
@@ -401,6 +401,7 @@ export default function RouteComp() {
                 { label: 'Lit', value: 'lit' },
                 { label: 'Svelte', value: 'svelte' },
                 { label: 'Vue', value: 'vue' },
+                { label: 'Angular', value: 'angular' },
               ] as const
             ).map((item) => (
               <button

app/utils/partners.tsx

@@ -217,7 +217,7 @@ export const partners: Partner[] = [
       libraries: ['start', 'router'],
       sidebarImgLight: sentryWordMarkDarkSvg,
       sidebarImgDark: sentryWordMarkLightSvg,
-      sidebarImgClass: 'py-6 scale-[1.1]',
+      sidebarImgClass: 'py-4 scale-[1.1]',
       href,
       homepageImg: (
         <div className="dark:bg-black w-full h-full flex items-center justify-center px-4 py-6">