feat: add YouTube channel links and promotion across the site

Author: tannerlinsley

src/components/DocsLayout.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { ChevronLeft, ChevronRight, Menu } from 'lucide-react'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { DiscordIcon } from '~/components/icons/DiscordIcon'
+import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
 import { Link, useMatches, useParams } from '@tanstack/react-router'
 import { useLocalStorage } from '~/utils/useLocalStorage'
 import { useClickOutside } from '~/hooks/useClickOutside'
@@ -408,6 +409,14 @@ const useMenuConfig = ({
         ),
         to: `https://github.com/${repo}`,
       },
+      {
+        label: (
+          <div className="flex items-center gap-2">
+            YouTube <YouTubeIcon className="text-lg opacity-20" />
+          </div>
+        ),
+        to: 'https://youtube.com/@tan_stack',
+      },
       {
         label: (
           <div className="flex items-center gap-2">

src/components/Footer.tsx

@@ -10,8 +10,8 @@ const footerLinks = [
   },
   { label: 'GitHub', to: 'https://github.com/tanstack' },
   {
-    label: 'Youtube',
-    to: 'https://www.youtube.com/user/tannerlinsley',
+    label: 'YouTube',
+    to: 'https://youtube.com/@tan_stack',
   },
   {
     label: 'Nozzle.io - Keyword Rank Tracker',

src/components/Navbar.tsx

@@ -49,6 +49,7 @@ import { DiscordIcon } from '~/components/icons/DiscordIcon'
 import { InstagramIcon } from '~/components/icons/InstagramIcon'
 import { BSkyIcon } from '~/components/icons/BSkyIcon'
 import { BrandXIcon } from '~/components/icons/BrandXIcon'
+import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
 const LazyAuthenticatedUserMenu = React.lazy(() =>
   import('~/components/AuthenticatedUserMenu').then((m) => ({
     default: m.AuthenticatedUserMenu,
@@ -278,6 +279,12 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       >
         <InstagramIcon />
       </a>
+      <a
+        href="https://youtube.com/@tan_stack"
+        aria-label="Subscribe to TanStack on YouTube"
+      >
+        <YouTubeIcon />
+      </a>
       <a href="https://tlinz.com/discord" aria-label="Join TanStack Discord">
         <DiscordIcon />
       </a>
@@ -634,6 +641,12 @@ export function Navbar({ children }: { children: React.ReactNode }) {
             icon: TrendingUp,
             to: '/stats/npm',
           },
+          {
+            label: 'YouTube',
+            icon: YouTubeIcon,
+            to: 'https://youtube.com/@tan_stack',
+            target: '_blank',
+          },
           {
             label: 'Discord',
             icon: DiscordIcon,

src/components/icons/YouTubeIcon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+export function YouTubeIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 461 461"
+      fill="currentColor"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z" />
+    </svg>
+  )
+}

src/components/landing/IntentLanding.tsx

@@ -148,17 +148,36 @@ function IntentRegistryPreview() {
                 params={{ packageName: pkg.name.replace('/', '__') }}
                 className="group flex flex-col gap-2 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-4 hover:border-sky-300 dark:hover:border-sky-700 transition-colors"
               >
-                <div className="flex items-center justify-between gap-2">
+                <div className="flex items-start justify-between gap-2 mb-1">
                   <span className="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-sky-600 dark:group-hover:text-sky-400 transition-colors truncate">
                     {pkg.name}
                   </span>
+                  <div className="shrink-0 w-20">
+                    {skillHistory[pkg.name] &&
+                    skillHistory[pkg.name].length > 0 ? (
+                      <SkillSparkline
+                        history={skillHistory[pkg.name]}
+                        height={24}
+                        maxSlots={maxSlots}
+                        onVersionClick={(entry: SkillHistoryEntry) => {
+                          navigate({
+                            to: '/intent/registry/$packageName',
+                            params: {
+                              packageName: pkg.name.replace('/', '__'),
+                            },
+                            search: { version: entry.version },
+                          })
+                        }}
+                      />
+                    ) : null}
+                  </div>
+                </div>
+                {/* Stats row */}
+                <div className="flex items-center gap-3 text-[11px] text-gray-400 dark:text-gray-500">
                   <span className="shrink-0 text-xs font-medium text-sky-600 dark:text-sky-400 tabular-nums">
                     {pkg.skillNames.length}{' '}
                     {pkg.skillNames.length === 1 ? 'skill' : 'skills'}
                   </span>
-                </div>
-                {/* Stats row */}
-                <div className="flex items-center gap-3 text-[11px] text-gray-400 dark:text-gray-500">
                   {pkg.monthlyDownloads > 0 && (
                     <span className="tabular-nums">
                       {pkg.monthlyDownloads >= 1_000_000
@@ -179,23 +198,6 @@ function IntentRegistryPreview() {
                     {pkg.description}
                   </p>
                 )}
-                {skillHistory[pkg.name] &&
-                  skillHistory[pkg.name].length > 0 && (
-                    <SkillSparkline
-                      history={skillHistory[pkg.name]}
-                      height={28}
-                      maxSlots={maxSlots}
-                      onVersionClick={(entry: SkillHistoryEntry) => {
-                        navigate({
-                          to: '/intent/registry/$packageName',
-                          params: {
-                            packageName: pkg.name.replace('/', '__'),
-                          },
-                          search: { version: entry.version },
-                        })
-                      }}
-                    />
-                  )}
               </Link>
             ))}
           </div>

src/routes/feed.tsx

@@ -4,6 +4,7 @@ import { Card } from '~/components/Card'
 import { seo } from '~/utils/seo'
 import { Rss, BookOpen, Github } from 'lucide-react'
 import { BrandXIcon } from '~/components/icons/BrandXIcon'
+import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
 
 export const Route = createFileRoute('/feed')({
   component: RouteComp,
@@ -50,6 +51,17 @@ const alternatives = [
     label: 'Follow on X',
     internal: false,
   },
+  {
+    title: 'YouTube',
+    icon: YouTubeIcon,
+    gradient: 'from-red-500 to-red-700',
+    borderColor: 'hover:border-red-500/50',
+    description:
+      'Tutorials, deep dives, and release walkthroughs on the official TanStack channel.',
+    href: 'https://youtube.com/@tan_stack',
+    label: 'Subscribe on YouTube',
+    internal: false,
+  },
 ]
 
 function RouteComp() {

src/routes/index.tsx

@@ -24,7 +24,8 @@ import { setResponseHeaders } from '@tanstack/react-start/server'
 import { AdGate } from '~/contexts/AdsContext'
 import { GamHeader } from '~/components/Gam'
 import { TrustedByMarquee } from '~/components/TrustedByMarquee'
-import { ArrowRight, Code2, Layers, Shield, Zap } from 'lucide-react'
+import { ArrowRight, Code2, Layers, Shield, Zap, Play } from 'lucide-react'
+import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
 import { Card } from '~/components/Card'
 import LibraryCard from '~/components/LibraryCard'
 import { FeaturedShowcases } from '~/components/ShowcaseSection'
@@ -590,6 +591,51 @@ function Index() {
             </div>
           </div>
         </div>
+
+        <div className="px-4 mx-auto max-w-(--breakpoint-lg)">
+          <div
+            className={`
+          rounded-md p-4 grid gap-6
+          bg-gradient-to-br from-red-500 to-red-700 text-white overflow-hidden relative
+          shadow-xl shadow-red-700/30
+          sm:p-8 sm:grid-cols-3 items-center`}
+          >
+            <div
+              className={`absolute transform opacity-10 z-0
+            right-0 top-0 -translate-y-1/3 translate-x-1/3
+            sm:opacity-20`}
+            >
+              <YouTubeIcon width={300} height={300} />
+            </div>
+            <div className={`sm:col-span-2`}>
+              <h3 id="youtube" className="text-3xl font-bold scroll-mt-24">
+                <a
+                  href="#youtube"
+                  className="hover:underline decoration-white/50"
+                >
+                  TanStack on YouTube
+                </a>
+              </h3>
+              <p className={`mt-4`}>
+                The official TanStack YouTube channel. Tutorials, deep dives,
+                release walkthroughs, and more — free for everyone!
+              </p>
+            </div>
+            <div className={`flex items-center justify-center`}>
+              <Button
+                as="a"
+                href="https://youtube.com/@tan_stack"
+                target="_blank"
+                rel="noreferrer"
+                className="w-full mt-4 bg-white border-white hover:bg-gray-100 text-red-600 justify-center shadow-lg text-sm"
+              >
+                <Play className="w-4 h-4" />
+                Subscribe on YouTube
+              </Button>
+            </div>
+          </div>
+        </div>
+
         <div className="h-4" />
         <div className="px-4 mx-auto max-w-(--breakpoint-lg) relative">
           <Card className="rounded-md p-8 md:p-14">

src/routes/intent/registry/index.tsx

@@ -156,6 +156,48 @@ function IntentRegistryPage() {
               </span>
             </div>
           </div>
+
+          <div className="mt-6">
+            <Link
+              to="/$libraryId/$version/docs/$"
+              params={
+                {
+                  libraryId: 'intent',
+                  version: 'latest',
+                  _splat: 'registry',
+                } as never
+              }
+              className="inline-flex items-center gap-1.5 text-sm text-sky-600 dark:text-sky-400 hover:text-sky-700 dark:hover:text-sky-300 transition-colors"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={1.75}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0-3-3m3 3 3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
+                />
+              </svg>
+              Ship skills with your library and get listed here
+              <svg
+                className="w-3.5 h-3.5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
+                />
+              </svg>
+            </Link>
+          </div>
         </div>
       </div>
 
@@ -414,6 +456,62 @@ function IntentRegistryPage() {
               </div>
             </>
           ))}
+
+        {/* Ship your skills CTA */}
+        <div className="mt-16 mb-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-gradient-to-br from-sky-50/50 to-white dark:from-sky-950/20 dark:to-gray-900 p-8 text-center">
+          <div className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-sky-100 dark:bg-sky-950/60 mb-4">
+            <svg
+              className="w-5 h-5 text-sky-600 dark:text-sky-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.75}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0-3-3m3 3 3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
+              />
+            </svg>
+          </div>
+          <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2">
+            Ship Agent Skills with your library
+          </h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400 max-w-lg mx-auto mb-5">
+            Add the{' '}
+            <code className="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono">
+              tanstack-intent
+            </code>{' '}
+            keyword to your package, generate skills with the CLI, and your
+            library appears here automatically.
+          </p>
+          <Link
+            to="/$libraryId/$version/docs/$"
+            params={
+              {
+                libraryId: 'intent',
+                version: 'latest',
+                _splat: 'registry',
+              } as never
+            }
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-600 text-white text-sm font-medium transition-colors"
+          >
+            Get started
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
+              />
+            </svg>
+          </Link>
+        </div>
       </div>
     </div>
   )