feat: update SEO metadata, add sitemap and robots.txt

Todo.md

@@ -17,7 +17,7 @@
 
 ### SEO
 
-- [ ] create `sitemap.xml` and `robots.txt`.
-- [ ] Add specific metadata to the landing page.
-- [ ] Add specific metadata to MDX pages.
-- [ ] Review and update `site.ts` and ensure all the information is accurate and complete. The `fallbackURL` should be updated to the production URL.
+- [x] create `sitemap.xml` and `robots.txt`.
+- [x] Add specific metadata to the landing page.
+- [x] Add specific metadata to MDX pages.
+- [x] Review and update `site.ts` and ensure all the information is accurate and complete. The `fallbackURL` should be updated to the production URL.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aether-ui",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

public/robots.txt

@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /
+Sitemap: https://aetherui.in/sitemap.xml

src/app/(marketing)/page.tsx

@@ -1,10 +1,35 @@
 import Hero from "@/components/landing/Hero";
 import LandingHeader from "@/components/landing/header";
 import Footer from "@/components/landing/Footer";
+import { metaConfig, siteConfig } from "@/config/site";
+
+export const metadata = metaConfig({
+  title: "Aether/UI - Beautifully designed, animated components for your next product.",
+  description:
+    "Aether/ui is a collection of beautiful, animated components for your next product, built with Motion and Tailwind CSS.",
+  isRoot: true,
+});
+
+const structuredData = {
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  url: siteConfig.url,
+  name: siteConfig.name,
+  description: siteConfig.description,
+  publisher: {
+    "@type": "Person",
+    name: "pantharhsit007",
+    url: "https://hrshit.in",
+  },
+};
 
 export default function Home() {
   return (
     <div className="relative">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+      />
       <LandingHeader />
       <Hero />
       <Footer />

src/app/sitemap.ts

@@ -0,0 +1,30 @@
+import { MetadataRoute } from "next";
+import { NavigationLinks } from "@/data/navigation";
+
+const URL = "https://aetherui.in";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const staticRoutes = [
+    {
+      url: `${URL}/`,
+      lastModified: new Date(),
+    },
+    {
+      url: `${URL}/community`,
+      lastModified: new Date(),
+    },
+    {
+      url: `${URL}/showcase`,
+      lastModified: new Date(),
+    },
+  ];
+
+  const componentRoutes = NavigationLinks.flatMap((group) =>
+    group.children.map((item) => ({
+      url: `${URL}${item.href}`,
+      lastModified: new Date(),
+    }))
+  );
+
+  return [...staticRoutes, ...componentRoutes];
+}

src/components/landing/Hero.tsx

@@ -37,7 +37,7 @@ function Hero() {
         src={src}
         className="absolute inset-0 h-full w-full object-cover"
         fill
-        alt="hero-bg-image"
+        alt="Abstract background image for the hero section of Aether/UI."
         priority
         placeholder="empty"
       />
@@ -50,15 +50,15 @@ function Hero() {
           transition={variant.transition}
           className="mx-auto -mt-12 flex w-fit max-w-screen-lg flex-col justify-center"
         >
-          <div className="font-instrument-serif text-5xl font-bold tracking-tight text-transparent md:text-6xl lg:text-7xl xl:text-[5rem] xl:leading-[1]">
-            <p className="landing-gradient">
+          <h1 className="font-instrument-serif text-5xl font-bold tracking-tight text-transparent md:text-6xl lg:text-7xl xl:text-[5rem] xl:leading-[1]">
+            <span className="landing-gradient block">
               Build <span className="text-shadow-glow text-cyan-900">Fast.</span> Animate{" "}
               <span className="text-shadow-glow text-cyan-900">Bold.</span>
-            </p>
-            <p className="landing-gradient pb-1.5">
+            </span>
+            <span className="landing-gradient block pb-1.5">
               Ship <span className="text-shadow-glow text-cyan-900">Beautiful.</span>
-            </p>
-          </div>
+            </span>
+          </h1>
 
           <p className="font-bricolage-grotesque text-shadow-glow-2 mx-auto mt-2.5 text-center text-base tracking-tight text-zinc-200 md:w-[70%] md:text-lg">
             Breathe life into your website with beautifully designed animated components, a

src/config/site.ts

@@ -25,9 +25,10 @@ const formatName = (name: string) => {
 export interface MetaConfigProps {
   title: string;
   description: string;
+  isRoot?: boolean;
 }
 
-const fallbackURL = "https://ui-aether.vercel.app";
+const fallbackURL = "https://aetherui.in";
 
 /**
  * @param title: Metadata["title"];
@@ -36,6 +37,7 @@ const fallbackURL = "https://ui-aether.vercel.app";
 export const metaConfig = ({
   title = siteConfig.name,
   description = siteConfig.description,
+  isRoot = false,
 }: MetaConfigProps): Metadata => ({
   title,
   description,
@@ -65,7 +67,7 @@ export const metaConfig = ({
     title,
     description,
     siteName: siteConfig.name,
-    url: `${siteConfig.url}/docs/${formatName(title)}`,
+    url: isRoot ? siteConfig.url : `${siteConfig.url}/docs/${formatName(title)}`,
     locale: "en_US",
     images: [
       {