chore: update SEO tags + add new static assets

Author: ashuvssut

docs/docusaurus.config.ts

@@ -4,8 +4,17 @@ import { themes as prismThemes } from "prism-react-renderer"
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
+const title = "FS Prober"
+const siteUrl = "https://stacknide.github.io/fs-prober"
+const repoUrl = "https://github.com/stacknide/fs-prober"
+const meta = {
+  description:
+    "FS Prober extends react-dropzone by enabling detection of empty folders, including deeply nested ones. Fully compatible with react-dropzone, it leverages standard file system APIs for recursive directory traversals. Supports modern browsers.",
+  siteUrl,
+  socialCardUrl: `${siteUrl}/img/social-card.png`,
+}
 const config: Config = {
-  title: "FS Prober",
+  title,
   tagline:
     "FS Prober helps you extract file and folder structures from user inputs or drag-and-drop events in browsers.",
   favicon: "img/favicon.ico",
@@ -42,7 +51,7 @@ const config: Config = {
           sidebarPath: "./sidebars.ts",
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl: "https://github.com/stacknide/fs-prober/tree/main/docs",
+          editUrl: `${repoUrl}/tree/main/docs`,
         },
         blog: false,
         // blog: {
@@ -53,7 +62,7 @@ const config: Config = {
         //   },
         //   // Please change this to your repo.
         //   // Remove this to remove the "edit this page" links.
-        //   editUrl: "https://github.com/stacknide/fs-prober/tree/main/docs",
+        //   editUrl: `${repoUrl}/tree/main/docs`,
         //   // Useful options to enforce blogging best practices
         //   onInlineTags: "warn",
         //   onInlineAuthors: "warn",
@@ -68,13 +77,33 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: "img/docusaurus-social-card.jpg",
+    image: "img/social-card.png",
+    metadata: [
+      { name: "robots", content: "max-image-preview:large" },
+      { name: "description", content: meta.description },
+
+      // Google / Search Engine Tags
+      { itemprop: "name", content: title },
+      { itemprop: "description", content: meta.description },
+      { itemprop: "image", content: meta.socialCardUrl },
+
+      // Open Graph / Facebook Meta Tags
+      { property: "og:url", content: meta.siteUrl },
+      { property: "og:type", content: "website" },
+      { property: "og:title", content: title },
+      { property: "og:description", content: meta.description },
+      { property: "og:image", content: meta.socialCardUrl },
+
+      // Twitter Meta Tags
+      { name: "twitter:card", content: "summary_large_image" },
+      { name: "twitter:title", content: title },
+      { name: "twitter:description", content: meta.description },
+      { name: "twitter:image", content: meta.socialCardUrl },
+      { name: "twitter:image:alt", content: `${title} logo` },
+    ],
     navbar: {
-      title: "FS Prober",
-      logo: {
-        alt: "FS Prober",
-        src: "img/logo.svg",
-      },
+      title,
+      logo: { alt: `${title} logo`, src: "img/logo.svg" },
       items: [
         {
           type: "docSidebar",
@@ -83,11 +112,7 @@ const config: Config = {
           label: "Tutorial",
         },
         // { to: "/blog", label: "Blog", position: "left" },
-        {
-          href: "https://github.com/stacknide/fs-prober",
-          label: "GitHub",
-          position: "right",
-        },
+        { href: repoUrl, label: "GitHub", position: "right" },
       ],
     },
     footer: {
@@ -96,14 +121,8 @@ const config: Config = {
         {
           title: "Docs",
           items: [
-            {
-              label: "Introduction",
-              to: "/docs/intro",
-            },
-            {
-              label: "Usage Guide",
-              to: "/docs/usage",
-            },
+            { label: "Introduction", to: "/docs/intro" },
+            { label: "Usage Guide", to: "/docs/usage" },
           ],
         },
         // {
@@ -135,14 +154,8 @@ const config: Config = {
         {
           title: "Links",
           items: [
-            {
-              label: "GitHub",
-              href: "https://github.com/stacknide",
-            },
-            {
-              label: "@ashuvssut (Author)",
-              href: "https://github.com/ashuvssut",
-            },
+            { label: "GitHub", href: repoUrl },
+            { label: "@ashuvssut (Author)", href: "https://github.com/ashuvssut" },
           ],
         },
       ],
@@ -152,6 +165,11 @@ const config: Config = {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
     },
+    colorMode: {
+      defaultMode: "dark",
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
+    },
   } satisfies Preset.ThemeConfig,
 }
 

docs/src/pages/index.tsx

@@ -30,8 +30,9 @@ export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext()
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
+      title={`${siteConfig.title} - ${siteConfig.tagline}`}
+      // title={`Hello from ${siteConfig.title}`}
+      // description="Description will go into a meta tag in <head />"
     >
       <HomepageHeader />
       <main>