more

Author: tannerlinsley

media/brand.sketch

@@ -63,7 +63,7 @@ We’re fortunate to build alongside an incredible lineup of partners whose supp
 
 ### Special thanks to Cloudflare and Netlify
 
-Their collaboration is a pivotal force driving the open web forward. Explore their announcement to see how we’re building the modern web together: [Cloudflare, Astro, and TanStack: building the modern web together](https://blog.cloudflare.com/cloudflare-astro-tanstack).
+Their collaboration is a pivotal force driving the open web forward. Explore their announcements to see how we’re building the modern web together: [Cloudflare, Astro, and TanStack: building the modern web together](https://blog.cloudflare.com/cloudflare-astro-tanstack) and [Supporting an Open Web with Netlify + Cloudflare](https://www.netlify.com/blog/supporting-an-open-web-with-netlify-cloudflare/).
 
 ## Your feedback counts
 

src/blog/announcing-tanstack-start-v1.md

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { partners as allPartners } from '~/utils/partners'
+
+type PartnerItem = (typeof allPartners)[number]
+
+type PartnersGridProps = {
+  partnersList?: PartnerItem[]
+}
+
+export function PartnersGrid({ partnersList }: PartnersGridProps) {
+  const items = (partnersList ?? allPartners).filter(
+    (partner) => partner.status === 'active'
+  )
+
+  return (
+    <div className={`flex flex-wrap gap-6 justify-center relative`}>
+      {items.map((partner) => {
+        return (
+          <a
+            key={partner.name}
+            href={partner.href}
+            target="_blank"
+            rel="noreferrer"
+            className="bg-white/80 shadow-xl shadow-gray-500/20 rounded-lg dark:border border-gray-500/20 dark:bg-black/40 dark:shadow-none
+              flex grow-1 justify-center p-8 hover:scale-[1.05] transition-all duration-100 ease-out"
+          >
+            <div
+              className="z-0 row-start-1 col-start-1 flex items-center justify-center transition-all duration-200"
+              style={{
+                width: Math.max(Math.round(100 + 300 * partner.score), 150),
+              }}
+            >
+              {partner.homepageImg}
+            </div>
+          </a>
+        )
+      })}
+    </div>
+  )
+}

src/components/PartnersGrid.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { Link } from '@tanstack/react-router'
 import { partners } from '~/utils/partners'
+import { PartnersGrid } from './PartnersGrid'
 import { PartnershipCallout } from './PartnershipCallout'
 import { LibraryId } from '~/libraries'
 
@@ -32,37 +33,7 @@ export function PartnersSection({
           <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
             {title}
           </h3>
-          <div className={`flex flex-wrap gap-6 justify-center relative`}>
-            {partners
-              .filter((partner) => partner.status === 'active')
-              .map((partner) => {
-                return (
-                  <a
-                    key={partner.name}
-                    href={partner.href}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="bg-white/80 shadow-xl shadow-gray-500/20 rounded-lg dark:border border-gray-500/20 dark:bg-black/40 dark:shadow-none
-                    overflow-hidden flex grow-1 justify-center p-8 hover:scale-[1.05] transition-all duration-100 ease-out"
-                  >
-                    <div
-                      className="z-0 row-start-1 col-start-1 flex items-center justify-center transition-all duration-200"
-                      style={{
-                        width: Math.max(
-                          Math.round(100 + 300 * partner.score),
-                          150
-                        ),
-                      }}
-                    >
-                      {partner.homepageImg}
-                    </div>
-                    {/* <div className="z-10 row-start-1 col-start-1 max-w-full p-4 text-sm flex flex-col gap-4 items-start justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white/70 dark:bg-gray-800/80">
-                      {partner.content}
-                    </div> */}
-                  </a>
-                )
-              })}
-          </div>
+          <PartnersGrid />
           <PartnershipCallout libraryId={libraryId} />
           {showPreviousLink ? (
             <div className="text-center mt-6">

src/components/PartnersSection.tsx

@@ -17,6 +17,7 @@ import { createServerRootRoute } from '@tanstack/react-start/server'
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as SponsorsEmbedRouteImport } from './routes/sponsors-embed'
+import { Route as PartnersEmbedRouteImport } from './routes/partners-embed'
 import { Route as MerchRouteImport } from './routes/merch'
 import { Route as BuilderRouteImport } from './routes/builder'
 import { Route as AdminRouteRouteImport } from './routes/admin/route'
@@ -75,6 +76,11 @@ const SponsorsEmbedRoute = SponsorsEmbedRouteImport.update({
   path: '/sponsors-embed',
   getParentRoute: () => rootRouteImport,
 } as any)
+const PartnersEmbedRoute = PartnersEmbedRouteImport.update({
+  id: '/partners-embed',
+  path: '/partners-embed',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const MerchRoute = MerchRouteImport.update({
   id: '/merch',
   path: '/merch',
@@ -352,6 +358,7 @@ export interface FileRoutesByFullPath {
   '/admin': typeof AdminRouteRouteWithChildren
   '/builder': typeof BuilderRoute
   '/merch': typeof MerchRoute
+  '/partners-embed': typeof PartnersEmbedRoute
   '/sponsors-embed': typeof SponsorsEmbedRoute
   '/$libraryId/$version': typeof LibraryIdVersionRouteWithChildren
   '/account': typeof LibrariesAccountRoute
@@ -399,6 +406,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/builder': typeof BuilderRoute
   '/merch': typeof MerchRoute
+  '/partners-embed': typeof PartnersEmbedRoute
   '/sponsors-embed': typeof SponsorsEmbedRoute
   '/$libraryId/$version': typeof LibraryIdVersionRouteWithChildren
   '/account': typeof LibrariesAccountRoute
@@ -448,6 +456,7 @@ export interface FileRoutesById {
   '/admin': typeof AdminRouteRouteWithChildren
   '/builder': typeof BuilderRoute
   '/merch': typeof MerchRoute
+  '/partners-embed': typeof PartnersEmbedRoute
   '/sponsors-embed': typeof SponsorsEmbedRoute
   '/$libraryId/$version': typeof LibraryIdVersionRouteWithChildren
   '/_libraries/account': typeof LibrariesAccountRoute
@@ -499,6 +508,7 @@ export interface FileRouteTypes {
     | '/admin'
     | '/builder'
     | '/merch'
+    | '/partners-embed'
     | '/sponsors-embed'
     | '/$libraryId/$version'
     | '/account'
@@ -546,6 +556,7 @@ export interface FileRouteTypes {
   to:
     | '/builder'
     | '/merch'
+    | '/partners-embed'
     | '/sponsors-embed'
     | '/$libraryId/$version'
     | '/account'
@@ -594,6 +605,7 @@ export interface FileRouteTypes {
     | '/admin'
     | '/builder'
     | '/merch'
+    | '/partners-embed'
     | '/sponsors-embed'
     | '/$libraryId/$version'
     | '/_libraries/account'
@@ -645,6 +657,7 @@ export interface RootRouteChildren {
   AdminRouteRoute: typeof AdminRouteRouteWithChildren
   BuilderRoute: typeof BuilderRoute
   MerchRoute: typeof MerchRoute
+  PartnersEmbedRoute: typeof PartnersEmbedRoute
   SponsorsEmbedRoute: typeof SponsorsEmbedRoute
   StatsIndexRoute: typeof StatsIndexRoute
   StatsNpmIndexRoute: typeof StatsNpmIndexRoute
@@ -726,6 +739,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MerchRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/partners-embed': {
+      id: '/partners-embed'
+      path: '/partners-embed'
+      fullPath: '/partners-embed'
+      preLoaderRoute: typeof PartnersEmbedRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/sponsors-embed': {
       id: '/sponsors-embed'
       path: '/sponsors-embed'
@@ -1087,6 +1107,13 @@ declare module '@tanstack/react-start/server' {
       preLoaderRoute: unknown
       parentRoute: typeof rootServerRouteImport
     }
+    '/partners-embed': {
+      id: '/partners-embed'
+      path: '/partners-embed'
+      fullPath: '/partners-embed'
+      preLoaderRoute: unknown
+      parentRoute: typeof rootServerRouteImport
+    }
     '/sponsors-embed': {
       id: '/sponsors-embed'
       path: '/sponsors-embed'
@@ -1497,6 +1524,23 @@ declare module './routes/merch' {
     unknown
   >
 }
+declare module './routes/partners-embed' {
+  const createFileRoute: CreateFileRoute<
+    '/partners-embed',
+    FileRoutesByPath['/partners-embed']['parentRoute'],
+    FileRoutesByPath['/partners-embed']['id'],
+    FileRoutesByPath['/partners-embed']['path'],
+    FileRoutesByPath['/partners-embed']['fullPath']
+  >
+
+  const createServerFileRoute: CreateServerFileRoute<
+    ServerFileRoutesByPath['/partners-embed']['parentRoute'],
+    ServerFileRoutesByPath['/partners-embed']['id'],
+    ServerFileRoutesByPath['/partners-embed']['path'],
+    ServerFileRoutesByPath['/partners-embed']['fullPath'],
+    unknown
+  >
+}
 declare module './routes/sponsors-embed' {
   const createFileRoute: CreateFileRoute<
     '/sponsors-embed',
@@ -2428,6 +2472,7 @@ const rootRouteChildren: RootRouteChildren = {
   AdminRouteRoute: AdminRouteRouteWithChildren,
   BuilderRoute: BuilderRoute,
   MerchRoute: MerchRoute,
+  PartnersEmbedRoute: PartnersEmbedRoute,
   SponsorsEmbedRoute: SponsorsEmbedRoute,
   StatsIndexRoute: StatsIndexRoute,
   StatsNpmIndexRoute: StatsNpmIndexRoute,

src/routeTree.gen.ts

@@ -86,5 +86,6 @@ declare module '@tanstack/react-router' {
   interface StaticDataRouteOption {
     baseParent?: boolean
     Title?: () => any
+    showNavbar?: boolean
   }
 }

src/router.tsx

@@ -211,6 +211,10 @@ function HtmlWrapper({ children }: { children: React.ReactNode }) {
 
   const showDevtools = canShowLoading && isRouterPage
 
+  const hideNavbar = useMatches({
+    select: (s) => s.some((d) => d.staticData?.showNavbar === false),
+  })
+
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
@@ -224,7 +228,7 @@ function HtmlWrapper({ children }: { children: React.ReactNode }) {
         <ToastProvider>
           <BackgroundGradient />
           <React.Suspense fallback={null}>
-            <Navbar>{children}</Navbar>
+            {hideNavbar ? children : <Navbar>{children}</Navbar>}
           </React.Suspense>
           {showDevtools ? (
             <TanStackRouterDevtoolsInProd position="bottom-right" />

src/routes/__root.tsx

@@ -11,6 +11,7 @@ import { useMutation } from '~/hooks/useMutation'
 import { librariesByGroup, librariesGroupNamesMap, Library } from '~/libraries'
 import bytesImage from '~/images/bytes.svg'
 import { partners } from '../../utils/partners'
+import { PartnersGrid } from '~/components/PartnersGrid'
 import OpenSourceStats from '~/components/OpenSourceStats'
 // Using public asset URLs for splash images
 import { BrandContextMenu } from '~/components/BrandContextMenu'
@@ -292,37 +293,7 @@ function Index() {
 
         <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
           <h3 className={`text-4xl font-light mb-6`}>Partners</h3>
-          <div className={`flex flex-wrap gap-6 justify-center`}>
-            {partners
-              .filter((partner) => partner.status === 'active')
-              .map((partner) => {
-                return (
-                  <a
-                    key={partner.name}
-                    href={partner.href}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="bg-white/80 shadow-xl shadow-gray-500/20 rounded-lg dark:border border-gray-500/20 dark:bg-black/40 dark:shadow-none
-                    flex grow-1 justify-center p-8 hover:scale-[1.05] transition-all duration-100 ease-out"
-                  >
-                    <div
-                      className="z-0 row-start-1 col-start-1 flex items-center justify-center transition-all duration-200"
-                      style={{
-                        width: Math.max(
-                          Math.round(100 + 300 * partner.score),
-                          150
-                        ),
-                      }}
-                    >
-                      {partner.homepageImg}
-                    </div>
-                    {/* <div className="z-10 row-start-1 col-start-1 max-w-full p-4 text-sm flex flex-col gap-4 items-start justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white/70 dark:bg-gray-800/80">
-                      {partner.content}
-                    </div> */}
-                  </a>
-                )
-              })}
-          </div>
+          <PartnersGrid />
           <div className="text-center mt-6">
             <Link
               to="/partners"

src/routes/_libraries/index.tsx

@@ -0,0 +1,46 @@
+import { partners } from '~/utils/partners'
+import { PartnersGrid } from '~/components/PartnersGrid'
+
+const cacheHeaders = {
+  'Cache-Control': 'max-age=300, s-maxage=3600, stale-while-revalidate',
+}
+
+export const Route = createFileRoute({
+  staleTime: Infinity,
+  headers: () => {
+    // Cache the entire HTML response for 5 minutes
+    return cacheHeaders
+  },
+  staticData: {
+    baseParent: true,
+    showNavbar: false,
+  },
+  component: PartnersEmbed,
+})
+
+function PartnersEmbed() {
+  const activePartners = partners.filter(
+    (partner) => partner.status === 'active'
+  )
+
+  return (
+    <>
+      <div
+        className={`min-h-screen w-screen flex items-start justify-center overflow-hidden`}
+      >
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+  html, body {
+    background: transparent !important;
+  }
+`,
+          }}
+        />
+        <div className="px-4 w-full">
+          <PartnersGrid partnersList={activePartners} />
+        </div>
+      </div>
+    </>
+  )
+}

src/routes/partners-embed.tsx

@@ -14,6 +14,7 @@ export const Route = createFileRoute({
   },
   staticData: {
     baseParent: true,
+    showNavbar: false,
   },
   component: SponsorsEmbed,
 })