mib

app/(app)/components/page.tsx

@@ -8,15 +8,15 @@ import type { Metadata } from "next"
 import { Container } from "ui"
 
 export const metadata: Metadata = {
-  title: "Components / " + siteConfig.name,
+  title: "Components",
   description:
     "Over 50 accessible components, neatly grouped into sections. Guaranteed usability for all!",
   metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url),
   applicationName: siteConfig.name,
   openGraph: {
-    title: "Components / " + siteConfig.name,
+    title: "Components",
     description:
-      "Over 50 accessible components, neatly grouped into sections. Guaranteed usability for all!",
+      "Discover over 50 accessible components, meticulously organized into sections to ensure seamless usability for everyone. Experience guaranteed functionality and ease of use!",
     url: "https://getjustd.com/components",
     type: "website",
     images: [

app/(app)/docs/[...slug]/page.tsx

@@ -33,23 +33,12 @@ export async function generateMetadata({ params }: DocPageProps): Promise<Metada
   ogSearchParams.set("title", doc.title)
 
   return {
-    title: `${doc.title}`,
+    title: doc.title,
     description: doc.description,
     applicationName: siteConfig.name,
     category: "Docs",
-    twitter: {
-      card: "summary_large_image",
-      title: `${doc.title} / ${siteConfig.name}`,
-      description: doc.description
-    },
-    openGraph: {
-      title: `${doc.title} / ${siteConfig.name}`,
-      description: doc.description,
-      url: `https://getjustd.com/docs/${doc.slugAsParams}`,
-      type: "article"
-    },
     keywords: [
-      `${doc.title}`,
+      doc.title,
       `${doc.title} components`,
       `${doc.title} component`,
       `${doc.title} on React`,

app/layout.tsx

@@ -15,8 +15,8 @@ import { Toast } from "ui"
 export const metadata: Metadata = {
   metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url),
   title: {
-    default: siteConfig.name,
-    template: `%s / ${siteConfig.name}`
+    default: `${siteConfig.name} - Modern and Customizable React Components`,
+    template: `%s / ${siteConfig.name} - Modern and Customizable React Components`
   },
   description: siteConfig.description,
   alternates: {

components/docs/surfaces/heading-demo.tsx

@@ -1,5 +1,5 @@
 import { Heading } from "ui"
 
 export default function HeadingDemo() {
-  return <Heading>The quick brown fox jumps over the lazy dog</Heading>
+  return <Heading level={2}>The quick brown fox jumps over the lazy dog</Heading>
 }

resources/content/docs/components/collections/accordion.mdx

@@ -1,6 +1,6 @@
 ---
 title: Accordion
-description: An accordion's like a vertical stack of headers that pop open to show or hide content sections.
+description: "An accordion is a vertical stack of headers that expand or collapse to reveal or conceal content sections, providing an organized and user-friendly way to manage information."
 order: 6
 published: true
 status: updated

resources/content/docs/components/collections/list-box.mdx

@@ -1,6 +1,6 @@
 ---
 title: "List Box"
-description: ListBoxes are used to present and manage lists of options or data entries.
+description: "ListBox are designed to present and manage lists of options or data entries, allowing users to view and select from multiple choices efficiently."
 order: 2
 published: true
 references: ["https://react-spectrum.adobe.com/react-aria/ListBox.html#props"]

resources/content/docs/components/collections/tag-group.mdx

@@ -41,7 +41,7 @@ Incorporate a hyperlink within the tag group using the `href` prop.
 
 
 ## Shape
-The tag group can be shaped to be a square or a circle. Just like the badge component, see [badge](/d/badge?#shape) documentation for more information.
+The tag group can be shaped to be a square or a circle. Just like the badge component, see [badge](/docs/components/statuses/badge?#shape) documentation for more information.
 <How toUse="collections/tag-group-shape-demo" />
 
 ## Disabled

resources/content/docs/components/colors/color-field.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Color Field"
-description: A color field lets folks tweak a hex color or fiddle with the individual color channels.
+description: "A color field allows users to adjust a hex color or fine-tune individual color channels, offering precise control over color customization."
 order: 2
 published: true
 status: beta

resources/content/docs/components/controls/context-menu.mdx

@@ -9,7 +9,7 @@ status: alpha
 ## Basic
 This component excels in desktop applications but has significant limitations. Its lack of accessibility and mobile compatibility are notable drawbacks. **React Aria** hasn't released an official version of this component yet, possibly due to these issues.
 
-Unless it's absolutely necessary for your project, I'd advise against using it. For most scenarios requiring accessible, rich interfaces, consider alternatives like [Menus](/d/menu) or [Popovers](/d/popover) instead. These components typically offer better cross-platform support and accessibility features.
+Unless it's absolutely necessary for your project, I'd advise against using it. For most scenarios requiring accessible, rich interfaces, consider alternatives like [Menus](/docs/components/collections/menu) or [Popovers](/docs/components/overlays/popover) instead. These components typically offer better cross-platform support and accessibility features.
 
 The initial release will be an alpha version due to ongoing issues with cursor positioning accuracy. If you're able to contribute, I'd appreciate your help in submitting a [pull request](https://github.com/justdlabs/justd) to address this component's limitations.
 <How toUse="controls/context-menu-demo" />

resources/content/docs/components/controls/switch.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Switch"
-description: Flip on or off, like a light switch, for binary decisions that need a simple tap to toggle states.
+description: "Toggle on or off like a light switch, ideal for binary decisions where a simple tap effortlessly changes states, providing clear and immediate control."
 order: 2
 published: true
 references: ["https://react-spectrum.adobe.com/react-aria/Switch.html#props"]

resources/content/docs/components/date-and-time/date-range-picker.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Date Range Picker"
-description: Date Range Pickers are used to communicate information to the user.
+description: "Date Range Pickers are essential tools for communicating date-based information to users effectively, enhancing the interaction experience with precise date selections."
 order: 6
 published: true
 references: ["https://react-spectrum.adobe.com/react-aria/DateRangePicker.html#props"]

resources/content/docs/components/forms/text-field.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Text Field"
-description: Enter text, like jotting down notes on your phone, versatile for any data that requires typing.
+description: "Enter text similar to jotting down notes on your phone, offering versatility for any data entry that involves typing, accommodating various types of information."
 order: 2
 published: true
 references: ["https://react-spectrum.adobe.com/react-aria/TextField.html#props", "https://www.framer.com/motion/animate-presence"]

resources/content/docs/components/forms/textarea.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Textarea"
-description: Bigger space for more text, like drafting an email, giving you room to elaborate on your thoughts..
+description: "Provides ample space for detailed text, similar to drafting an email, allowing you to elaborate on your thoughts and present comprehensive information with ease."
 order: 4
 published: true
 references: ["https://react-spectrum.adobe.com/react-aria/TextField.html#textarea-1"]

resources/content/docs/components/pickers/select.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Select"
-description: Select a start and end date, like booking a vacation span, ideal for setting periods efficiently..
+description: "Select a start and end date, perfect for booking a vacation or setting periods efficiently, streamlining the process of defining time spans with ease."
 order: 2
 published: true
 status: updated

resources/content/docs/components/surfaces/heading.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Heading"
-description: Heading is a component that is used to display titles and subtitles.
+description: "Heading is a component used to display titles and subtitles, providing a clear structure and emphasis for organizing and presenting content."
 order: 4
 published: true
 status: new

resources/content/docs/getting-started/client-side-routing.mdx

@@ -6,7 +6,7 @@ published: true
 ---
 
 ## Introduction
-React Aria components such as [Link](https://getjustd.com/d/link), [Menu](https://getjustd.com/d/menu), [Tabs](https://getjustd.com/d/tabs), and [Table](https://getjustd.com/d/table) transform elements into clickable links that navigate when clicked. These components utilize the `href` prop to render as an `<a>` tag, supporting attributes like `target` and `download`.
+React Aria components such as [Link](/docs/components/navigation/link), [Menu](/docs/components/collections/menu), [Tabs](/docs/components/navigation/tabs), and [Table](/docs/components/collections/table) transform elements into clickable links that navigate when clicked. These components utilize the `href` prop to render as an `<a>` tag, supporting attributes like `target` and `download`.
 
 User interactions with these links vary by component. For instance, one might use arrow keys to navigate tabs or press enter to open a link within a ComboBox. With the href prop, React Aria facilitates seamless navigation for each component.
 

resources/content/docs/getting-started/introduction.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Introduction"
-description: Embark on a witty adventure with this open-source design system, built with React Aria. Master troubleshooting tips to solve the mystery of missing props in your React app.
+description: "Embark on a witty adventure with this open-source design system using React Aria. Master troubleshooting tips to solve missing props in your React app."
 order: 1
 published: true
 ---

resources/content/docs/prologue/contribution-guide.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Contribution Guide"
-description: Interested in contributing to Justd? This guide covers setting up your development environment, understanding the project structure, and best practices for your first pull request.
+description: "Interested in contributing to Justd? This guide covers setting up your development environment, understanding the project structure, and best practices for your first PR."
 order: 1
 published: true
 ---

resources/content/docs/prologue/release-notes.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Release Notes"
-description: All the releases that have been made to Justd
+description: "All releases made to Justd, detailing every update and enhancement introduced to the platform, providing a comprehensive overview of changes and improvements."
 order: 2
 published: true
 ---