feat: add SEO meta tags, canonical URLs, and sitemap

convex/_generated/api.js

@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 /**
  * Generated `api` utility.
  *

convex/_generated/dataModel.d.ts

@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 /**
  * Generated data model types.
  *

convex/_generated/server.d.ts

@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 /**
  * Generated utilities for implementing server-side Convex query and mutation functions.
  *

convex/_generated/server.js

@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 /**
  * Generated utilities for implementing server-side Convex query and mutation functions.
  *

convex/dashboard.ts

@@ -65,7 +65,7 @@ export const listEvents = query({
   },
   handler: async (ctx, args) => {
     if (args.search && args.search.trim().length > 0) {
-      let sq = ctx.db.query("events").withSearchIndex("search_name", (q) => {
+      const sq = ctx.db.query("events").withSearchIndex("search_name", (q) => {
         const base = q.search("name", args.search!);
         return args.type ? base.eq("type", args.type) : base;
       });

package.json

@@ -3,8 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "engines": { "node": ">=20" },
   "scripts": {
-    "prebuild": "node -e \"const fs=require('fs'),p=require('path');fs.mkdirSync('dist',{recursive:true});const src='changelog.md',dst=p.join('public','changelog.md');if(fs.existsSync(src)){fs.mkdirSync('public',{recursive:true});fs.copyFileSync(src,dst);}\"",
+    "prebuild": "node scripts/generate_sitemap.mjs && node -e \"const fs=require('fs'),p=require('path');fs.mkdirSync('dist',{recursive:true});const src='changelog.md',dst=p.join('public','changelog.md');if(fs.existsSync(src)){fs.mkdirSync('public',{recursive:true});fs.copyFileSync(src,dst);}\"",
     "dev": "concurrently \"pnpm run dev:vite\" \"pnpm run dev:server\"",
     "dev:vite": "vite",
     "dev:server": "node server.js",

public/robots.txt

@@ -1,2 +1,3 @@
 User-agent: *
-Allow: /
+Allow: /
+Sitemap: https://renderdragon.org/sitemap.xml

public/sitemap.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://renderdragon.org/</loc></url><url><loc>https://renderdragon.org/resources</loc></url><url><loc>https://renderdragon.org/blogs</loc></url><url><loc>https://renderdragon.org/guides</loc></url><url><loc>https://renderdragon.org/faq</loc></url><url><loc>https://renderdragon.org/contact</loc></url><url><loc>https://renderdragon.org/showcase</loc></url><url><loc>https://renderdragon.org/community</loc></url><url><loc>https://renderdragon.org/changelogs</loc></url><url><loc>https://renderdragon.org/utilities</loc></url><url><loc>https://renderdragon.org/generators</loc></url><url><loc>https://renderdragon.org/background-generator</loc></url><url><loc>https://renderdragon.org/text-generator</loc></url><url><loc>https://renderdragon.org/ai-title-helper</loc></url><url><loc>https://renderdragon.org/youtube-downloader</loc></url><url><loc>https://renderdragon.org/player-renderer</loc></url><url><loc>https://renderdragon.org/renderbot</loc></url><url><loc>https://renderdragon.org/native-application</loc></url><url><loc>https://renderdragon.org/tos</loc></url><url><loc>https://renderdragon.org/privacy</loc></url><url><loc>https://renderdragon.org/guides/scriptwriting</loc></url><url><loc>https://renderdragon.org/guides/AI</loc></url><url><loc>https://renderdragon.org/guides/questions</loc></url><url><loc>https://renderdragon.org/guides/copyright</loc></url><url><loc>https://renderdragon.org/guides/thingstoask</loc></url><url><loc>https://renderdragon.org/guides/voice</loc></url></urlset>

scripts/export_resources.ts

@@ -83,7 +83,7 @@ async function exportResources() {
       });
       return acc;
     },
-    {} as Record<string, any[]>,
+    {} as Record<string, Array<Record<string, unknown>>>,
   );
 
   const mcicons = await fetchMcicons();
@@ -112,7 +112,7 @@ async function exportResources() {
       file: `resources/${file}`,
     };
     allResources.push(
-      ...items.map((item: any) => ({
+      ...items.map((item: Record<string, unknown>) => ({
         ...item,
         category,
       })),

scripts/generate_sitemap.mjs

@@ -0,0 +1,42 @@
+import { mkdir, writeFile } from "node:fs/promises";
+
+const site = "https://renderdragon.org";
+const routes = [
+  "/", "/resources", "/blogs", "/guides", "/faq", "/contact", "/showcase",
+  "/community", "/changelogs", "/utilities", "/generators", "/background-generator",
+  "/text-generator", "/ai-title-helper", "/youtube-downloader", "/player-renderer",
+  "/renderbot", "/native-application", "/tos", "/privacy",
+  "/guides/scriptwriting", "/guides/AI", "/guides/questions", "/guides/copyright", "/guides/thingstoask", "/guides/voice",
+];
+
+const escapeXml = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&apos;");
+const urls = routes.map((route) => `<url><loc>${site}${route}</loc></url>`);
+
+// Public profile and creator-pack slugs are added when build credentials are available.
+if (process.env.VITE_SUPABASE_URL && process.env.VITE_SUPABASE_PUBLISHABLE_KEY) {
+  const headers = { apikey: process.env.VITE_SUPABASE_PUBLISHABLE_KEY };
+  const fetchJson = async (path) => {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 8000);
+    try {
+      const response = await fetch(`${process.env.VITE_SUPABASE_URL}/rest/v1/${path}`, { headers, signal: controller.signal });
+      return response.ok ? await response.json() : [];
+    } catch (error) {
+      console.warn(`Skipping sitemap enrichment for ${path}:`, error instanceof Error ? error.message : error);
+      return [];
+    } finally {
+      clearTimeout(timeout);
+    }
+  };
+  const [profiles, packs, blogs] = await Promise.all([
+    fetchJson("profiles?select=username&username=not.is.null"),
+    fetchJson("creator_packs?select=slug&status=eq.approved"),
+    fetchJson("blogs?select=slug&published=eq.true"),
+  ]);
+  for (const { username } of profiles) if (username) urls.push(`<url><loc>${site}/u/${escapeXml(username)}</loc></url>`);
+  for (const { slug } of packs) if (slug) urls.push(`<url><loc>${site}/creator-packs/${escapeXml(slug)}</loc></url>`);
+  for (const { slug } of blogs) if (slug) urls.push(`<url><loc>${site}/blogs/${escapeXml(slug)}</loc></url>`);
+}
+
+await mkdir("public", { recursive: true });
+await writeFile("public/sitemap.xml", `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${urls.join("")}</urlset>\n`);

src/App.tsx

@@ -14,6 +14,7 @@ import { IconLoader2 } from "@tabler/icons-react";
 import DonateButton from "@/components/DonateButton";
 import { AdBlockDetector } from "@/components/AdBlockDetector";
 import Navbar from "@/components/Navbar";
+import Seo from "@/components/Seo";
 
 const ExternalRedirect = ({ url }: { url: string }) => {
   useEffect(() => { window.location.href = url; }, [url]);
@@ -25,9 +26,12 @@ const GlobalComponents = () => {
   const location = useLocation();
   const hideDonateButton = location.pathname.startsWith('/admin') ||
     location.pathname.startsWith('/account');
+  const routeName = location.pathname === '/' ? 'Minecraft Creator Tools & Resources' :
+    location.pathname.split('/').filter(Boolean).map((part) => part.split('-').join(' ')).join(' / ');
 
   return (
     <>
+      <Seo title={`${routeName.replace(/\b\w/g, (letter) => letter.toUpperCase())} | RenderDragon`} description={`Explore ${routeName} on RenderDragon, free tools and resources for Minecraft content creators.`} path={location.pathname} />
       {!hideDonateButton && <DonateButton />}
       <AdBlockDetector />
     </>

src/components/AudioPlayer.tsx

@@ -1,5 +1,4 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
-import WaveSurfer from 'wavesurfer.js';
 import {
   IconPlayerPlay,
   IconPlayerPause,
@@ -23,14 +22,22 @@ const AudioPlayer = ({ src, className, isInView = true, allowPlayBeforeReady = f
   const [duration, setDuration] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const [isReady, setIsReady] = useState(false);
+  const [loadError, setLoadError] = useState(false);
+  const [retryKey, setRetryKey] = useState(0);
 
   const containerRef = useRef<HTMLDivElement>(null);
-  const wavesurfer = useRef<WaveSurfer | null>(null);
+  const wavesurfer = useRef<import('wavesurfer.js').default | null>(null);
 
   useEffect(() => {
     if (!containerRef.current) return;
 
-    const ws = WaveSurfer.create({
+    let ws: import('wavesurfer.js').default | null = null;
+    let isMounted = true;
+    setLoadError(false);
+    setIsReady(false);
+    import('wavesurfer.js').then(({ default: WaveSurfer }) => {
+      if (!isMounted || !containerRef.current) return;
+      ws = WaveSurfer.create({
       container: containerRef.current,
       waveColor: 'rgba(139, 92, 246, 0.2)', // Soft cow-purple
       progressColor: '#8b5cf6', // Solid cow-purple
@@ -42,42 +49,52 @@ const AudioPlayer = ({ src, className, isInView = true, allowPlayBeforeReady = f
       barGap: 3,
       normalize: true,
       hideScrollbar: true,
-    });
-
-    let isMounted = true;
-    wavesurfer.current = ws;
+      });
+      wavesurfer.current = ws;
 
     if (allowPlayBeforeReady) {
       setIsLoading(false);
     } else {
       setIsLoading(true);
     }
-    ws.load(src).catch((err) => {
+      ws.load(src).catch((err) => {
       if (err.name === 'AbortError') return;
       console.error('WaveSurfer load error:', err);
-    });
+        if (isMounted) {
+          setIsLoading(false);
+          setLoadError(true);
+        }
+      });
 
-    ws.on('ready', () => {
+      ws.on('ready', () => {
       if (!isMounted) return;
       setDuration(ws.getDuration());
       setIsLoading(false);
       setIsReady(true);
-    });
+      });
 
-    ws.on('audioprocess', () => {
+      ws.on('audioprocess', () => {
       if (!isMounted) return;
       setCurrentTime(ws.getCurrentTime());
-    });
+      });
 
-    ws.on('play', () => isMounted && setIsPlaying(true));
-    ws.on('pause', () => isMounted && setIsPlaying(false));
-    ws.on('finish', () => isMounted && setIsPlaying(false));
+      ws.on('play', () => isMounted && setIsPlaying(true));
+      ws.on('pause', () => isMounted && setIsPlaying(false));
+      ws.on('finish', () => isMounted && setIsPlaying(false));
+    }).catch((error: unknown) => {
+      if (!isMounted) return;
+      console.error('Failed to load WaveSurfer:', error);
+      setIsLoading(false);
+      setLoadError(true);
+    });
 
     return () => {
       isMounted = false;
-      ws.destroy();
+      setIsReady(false);
+      if (wavesurfer.current === ws) wavesurfer.current = null;
+      ws?.destroy();
     };
-  }, [src]);
+  }, [src, allowPlayBeforeReady, retryKey]);
 
   // Handle visibility
   useEffect(() => {
@@ -132,6 +149,12 @@ const AudioPlayer = ({ src, className, isInView = true, allowPlayBeforeReady = f
             </div>
           )}
           <div ref={containerRef} className="w-full" />
+          {loadError && (
+            <div className="absolute inset-0 flex items-center justify-center gap-2 bg-card/90 text-sm text-muted-foreground">
+              <span>Audio preview unavailable.</span>
+              <Button variant="outline" size="sm" onClick={() => setRetryKey((key) => key + 1)}>Retry</Button>
+            </div>
+          )}
         </div>
 
         {/* Controls and Info */}

src/components/FeaturedResources.tsx

@@ -7,6 +7,8 @@ import ResourceCard from "@/components/resources/ResourceCard";
 import ResourceCardSkeleton from "./resources/ResourceCardSkeleton";
 
 const FEATURED_CATEGORIES = ["music", "images", "sfx", "fonts"];
+type RawResource = Record<string, unknown>;
+const stringValue = (value: unknown): string | undefined => typeof value === "string" && value.trim() ? value : undefined;
 
 const FeaturedResources = () => {
   const [featuredResources, setFeaturedResources] = useState<Resource[]>([]);
@@ -32,18 +34,15 @@ const FeaturedResources = () => {
         const rawItems = await catRes.json();
         const resources: Resource[] = (Array.isArray(rawItems) ? rawItems : [])
           .slice(0, 4)
-          .map((item: any, idx: number) => ({
-            id: item.id ?? `${catKeys[0]}-${idx}`,
-            title: String(item?.title || "").trim() || `Resource ${idx + 1}`,
+          .map((item: RawResource, idx: number) => ({
+            id: typeof item.id === "number" || typeof item.id === "string" ? item.id : `${catKeys[0]}-${idx}`,
+            title: stringValue(item.title) || `Resource ${idx + 1}`,
             category: catKeys[0] as Resource["category"],
-            subcategory: item.subcategory || undefined,
-            credit: item.credit || undefined,
-            filetype: item.filetype || item.ext || undefined,
-            download_url: item.download_url || item.url || undefined,
-            preview_url: item.preview_url || undefined,
-            image_url: item.image_url || undefined,
-            software: item.software || undefined,
-            description: item.description || undefined,
+            subcategory: stringValue(item.subcategory), credit: stringValue(item.credit),
+            filetype: stringValue(item.filetype) || stringValue(item.ext),
+            download_url: stringValue(item.download_url) || stringValue(item.url),
+            preview_url: stringValue(item.preview_url), image_url: stringValue(item.image_url),
+            software: stringValue(item.software), description: stringValue(item.description),
           }));
 
         setFeaturedResources(resources);

src/components/InfiniteMenu.tsx

@@ -1097,8 +1097,6 @@ const InfiniteMenu: FC<InfiniteMenuProps> = ({ items = [] }) => {
     if (!activeItem?.link) return;
     if (activeItem.link.startsWith('http')) {
       window.open(activeItem.link, '_blank', 'noopener,noreferrer');
-    } else {
-
     }
   };
 

src/components/Seo.tsx

@@ -0,0 +1,30 @@
+import { Helmet } from "react-helmet-async";
+
+const SITE_URL = "https://renderdragon.org";
+
+interface SeoProps {
+  title: string;
+  description: string;
+  path: string;
+  image?: string;
+}
+
+export default function Seo({ title, description, path, image = "/ogimg.png" }: SeoProps) {
+  const normalizedPath = path.replace(/\/+$/, "") || "/";
+  const canonical = `${SITE_URL}${normalizedPath === "/" ? "" : normalizedPath}`;
+  const imageUrl = image.startsWith("http") ? image : `${SITE_URL}${image}`;
+  return <Helmet>
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <link rel="canonical" href={canonical} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:url" content={canonical} />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content={imageUrl} />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={imageUrl} />
+  </Helmet>;
+}