Add data tags to installation pages for docsearch crawler

Author: philipp-spiess

src/app/(docs)/docs/installation/(tabs)/framework-guides/page.tsx

@@ -21,8 +21,10 @@ export default async function FrameworkGuides() {
 
   return (
     <>
-      <div id="content-wrapper" className="prose mb-10 max-w-3xl">
-        <h3 className="sr-only">Framework Guides</h3>
+      <div id="content-wrapper" className="prose mb-10 max-w-3xl" data-content="true">
+        <h3 className="sr-only" data-title="true">
+          Framework Guides
+        </h3>
         <p>
           Framework-specific guides that cover our recommended approach to installing Tailwind CSS in a number of
           popular environments.

src/app/(docs)/docs/installation/(tabs)/layout.tsx

@@ -97,13 +97,16 @@ export default function Page({ children }: { children: React.ReactNode }) {
 
       <div className="isolate mx-auto grid w-full max-w-2xl grid-cols-1 gap-10 pt-10 md:pb-24 xl:max-w-5xl">
         <div className="px-4 sm:px-6">
-          <p className="font-mono text-xs/6 font-medium tracking-widest text-gray-600 uppercase dark:text-gray-400">
+          <p
+            data-section="true"
+            className="font-mono text-xs/6 font-medium tracking-widest text-gray-600 uppercase dark:text-gray-400"
+          >
             Installation
           </p>
           <h1 className="mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white">
             Get started with Tailwind CSS
           </h1>
-          <p className="mt-6 text-base/7 text-gray-700 dark:text-gray-300">
+          <p data-description="true" className="mt-6 text-base/7 text-gray-700 dark:text-gray-300">
             Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for
             class names, generating the corresponding styles and then writing them to a static CSS file.
           </p>

src/app/(docs)/docs/installation/(tabs)/play-cdn/page.tsx

@@ -85,8 +85,10 @@ const steps: Step[] = [
 export default function Page() {
   return (
     <>
-      <div id="content-wrapper" className="prose relative z-10 mb-10 max-w-3xl">
-        <h3 className="sr-only">Play CDN</h3>
+      <div id="content-wrapper" className="prose relative z-10 mb-10 max-w-3xl" data-content="true">
+        <h3 className="sr-only" data-title="true">
+          Using Play CDN
+        </h3>
         <p>
           Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for
           development purposes only, and is not intended for production.

src/app/(docs)/docs/installation/(tabs)/tailwind-cli/page.tsx

@@ -87,8 +87,10 @@ const steps: Step[] = [
 export default function Page() {
   return (
     <>
-      <div id="content-wrapper" className="prose relative z-10 mb-10 max-w-3xl">
-        <h3 className="sr-only">Installing Tailwind CLI</h3>
+      <div id="content-wrapper" className="prose relative z-10 mb-10 max-w-3xl" data-content="true">
+        <h3 className="sr-only" data-title="true">
+          Installing Tailwind CLI
+        </h3>
         <p>
           The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI
           tool. The CLI is also available as a <Link href="/blog/standalone-cli">standalone executable</Link> if you

src/app/(docs)/docs/installation/(tabs)/using-postcss/page.tsx

@@ -120,8 +120,10 @@ const steps: Step[] = [
 export default function Page() {
   return (
     <>
-      <div id="content-wrapper" className="prose relative z-10 mb-10 max-w-3xl">
-        <h3 className="sr-only">Installing Tailwind CSS as a PostCSS plugin</h3>
+      <div id="content-wrapper" className="prose relative z-10 mb-10 max-w-3xl" data-content="true">
+        <h3 data-title="true" className="sr-only">
+          Installing Tailwind CSS as a PostCSS plugin
+        </h3>
         <p>
           Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with frameworks like
           Next.js and Angular.

src/app/(docs)/docs/installation/(tabs)/using-vite/page.tsx

@@ -123,8 +123,10 @@ const steps: Step[] = [
 export default function Page() {
   return (
     <>
-      <div id="content-wrapper" className="prose relative z-10 mb-10 max-w-3xl">
-        <h3 className="sr-only">Installing Tailwind CSS as a Vite plugin</h3>
+      <div id="content-wrapper" className="prose relative z-10 mb-10 max-w-3xl" data-content="true">
+        <h3 data-title="true" className="sr-only">
+          Installing Tailwind CSS as a Vite plugin
+        </h3>
         <p>
           Installing Tailwind CSS as a Vite plugin is the most seamless way to integrate it with frameworks like
           Laravel, SvelteKit, React Router, Nuxt, and SolidJS.

src/app/(docs)/docs/installation/framework-guides/[...slug]/page.tsx

@@ -75,9 +75,18 @@ export default async function Page({ params }: Props) {
     <>
       <div className="mx-auto grid w-full max-w-2xl grid-cols-1 gap-10 pt-10 pb-24 xl:max-w-5xl">
         <div className="px-4 sm:px-6 xl:pr-0">
-          <p className="font-mono text-xs/6 tracking-widest text-gray-600 uppercase dark:text-gray-400">Installation</p>
-          <h1 className="mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white">{page.title}</h1>
-          <p className="mt-6 text-base/7 text-gray-700 dark:text-gray-400">{page.description}</p>
+          <p
+            className="font-mono text-xs/6 tracking-widest text-gray-600 uppercase dark:text-gray-400"
+            data-section="true"
+          >
+            Installation
+          </p>
+          <h1 className="mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white" data-title="true">
+            {page.title}
+          </h1>
+          <p className="mt-6 text-base/7 text-gray-700 dark:text-gray-400" data-description="true">
+            {page.description}
+          </p>
 
           {page.notice ? (
             <div className="relative my-4 overflow-hidden rounded-lg bg-gray-200 p-1">