feat: add sitemap integration and update site configuration

- Integrated `@astrojs/sitemap` for automatic sitemap generation.
- Updated site URL in `astro.config.mjs`.
- Added `robots.txt` to allow search engines to crawl the site.
- Updated package dependencies to include `@astrojs/sitemap`.
- Enhanced various documentation pages with descriptions for better SEO.
- Improved layout and styling in the main page and other components.
- Refactored the recipes page to use a more concise format.
- Added social proof statistics for weekly downloads and GitHub stars.

Author: jbetancur

README.md

@@ -42,11 +42,11 @@ The documentation contains information about installation, usage and contributio
 
 # Supporting React Data Table Component
 
-React Data Table Component is maintained by one person and downloaded ~200k times a week. If your team ships products with it, your support keeps it maintained, bug-free, and moving forward.
+React Data Table Component has been actively maintained since 2018 and is downloaded ~215k times a week. If your team ships products with it, your support keeps it maintained, bug-free, and moving forward.
 
 ## Sponsor the project
 
-Sponsoring puts your company logo in front of ~200k developers a week: in the README, the docs site, and every release. It's the right move if your team depends on this library and you want it to keep improving.
+Sponsoring puts your company logo in front of ~215k developers a week: in the README, the docs site, and every release. It's the right move if your team depends on this library and you want it to keep improving.
 
 | Tier | Price/month | Perk |
 | --- | --- | --- |

apps/docs/astro.config.mjs

@@ -1,12 +1,14 @@
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
 import tailwind from '@astrojs/tailwind';
+import sitemap from '@astrojs/sitemap';
 
 export default defineConfig({
+	site: 'https://reactdatatable.com',
 	markdown: {
 		shikiConfig: { theme: 'catppuccin-macchiato' },
 	},
-	integrations: [react(), tailwind({ applyBaseStyles: false })],
+	integrations: [react(), tailwind({ applyBaseStyles: false }), sitemap()],
 	vite: {
 		resolve: {
 			alias: {

apps/docs/package-lock.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@astrojs/react": "^4.2.0",
+    "@astrojs/sitemap": "^3.7.2",
     "@astrojs/tailwind": "^5.1.4",
     "@shikijs/langs": "^4.1.0",
     "astro": "^5.7.0",

apps/docs/package.json

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://reactdatatable.com/sitemap-index.xml

apps/docs/public/robots.txt

@@ -13,7 +13,7 @@ const { code, lang = 'tsx' } = Astro.props;
 <div class="not-prose my-6 rounded-xl overflow-hidden text-sm leading-relaxed relative group">
   <Code code={code} lang={lang} theme="catppuccin-macchiato" defaultColor={false} />
   <button
-    class="copy-btn absolute top-3 right-3 flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-white/10 text-gray-300 hover:bg-white/20 hover:text-white opacity-0 group-hover:opacity-100 transition-all"
+    class="copy-btn absolute top-[24px] right-4 flex items-center p-1.5 rounded-md bg-white/10 text-gray-300 hover:bg-white/20 hover:text-white opacity-0 group-hover:opacity-100 transition-all"
     aria-label="Copy code"
     data-code={code}
   >
@@ -24,7 +24,6 @@ const { code, lang = 'tsx' } = Astro.props;
     <svg class="icon-check hidden" width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <polyline points="2 8 6 12 14 4"/>
     </svg>
-    <span class="label">Copy</span>
   </button>
 </div>
 
@@ -35,14 +34,11 @@ const { code, lang = 'tsx' } = Astro.props;
       await navigator.clipboard.writeText(code);
       const iconCopy = btn.querySelector<SVGElement>('.icon-copy');
       const iconCheck = btn.querySelector<SVGElement>('.icon-check');
-      const label = btn.querySelector<HTMLSpanElement>('.label');
       iconCopy?.classList.add('hidden');
       iconCheck?.classList.remove('hidden');
-      if (label) label.textContent = 'Copied!';
       setTimeout(() => {
         iconCopy?.classList.remove('hidden');
         iconCheck?.classList.add('hidden');
-        if (label) label.textContent = 'Copy';
       }, 2000);
     });
   });

apps/docs/src/components/CodeBlock.astro

@@ -28,6 +28,7 @@ const {
     <meta name="twitter:title" content={title} />
     <meta name="twitter:description" content={description} />
     <meta name="twitter:image" content={new URL('/og-image.png', Astro.url).href} />
+    <link rel="canonical" href={Astro.url.href} />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>{title}</title>
   </head>
@@ -151,7 +152,6 @@ const {
       <p>
         Apache 2.0 licensed ·
         <a href="https://github.com/jbetancur/react-data-table-component" class="hover:text-gray-600">GitHub</a>
-        · Built with Astro
       </p>
     </footer>
 

apps/docs/src/layouts/Layout.astro

@@ -1,6 +1,7 @@
 ---
 layout: '../../layouts/DocsLayout.astro'
 title: 'Accessibility | react-data-table-component'
+description: 'ARIA roles, keyboard navigation, and screen reader support in react-data-table-component.'
 ---
 
 

apps/docs/src/pages/docs/accessibility.md

@@ -1,6 +1,7 @@
 ---
 layout: '../../layouts/DocsLayout.astro'
 title: 'API reference | react-data-table-component'
+description: 'Complete prop, type, and export reference for react-data-table-component v8.'
 ---
 
 # API reference

apps/docs/src/pages/docs/api.md

@@ -3,7 +3,7 @@ import DocsLayout from '../../layouts/DocsLayout.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
 ---
 
-<DocsLayout title="Changelog | react-data-table-component">
+<DocsLayout title="Changelog | react-data-table-component" description="Release history and breaking changes for react-data-table-component.">
   <h1>Changelog</h1>
 
   <p>