FAQ, Frontmatters, Open graph meta, Thumbnail added so closes #3 and #4

components/utils.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useConfig, useTheme } from "nextra-theme-docs";
+import { useTheme } from "nextra-theme-docs";
 import { ReactElement, useState } from "react";
 
 import { RiOpenSourceFill, RiMoonFill, RiSunFill } from "react-icons/ri";
@@ -95,46 +95,6 @@ export function LicenseFooter(): ReactElement {
   );
 }
 
-export function HeadElement({ currentUrl }: { currentUrl: string }) {
-  const { frontMatter } = useConfig();
-
-  const title: string = `${frontMatter.title} | Richie JS API References | OpenSource at Cresteem`;
-  return (
-    <>
-      {/* general page description */}
-      <meta name="description" content={frontMatter.description} />
-
-      {/* fb meta */}
-      <meta property="og:type" content="website" />
-      <meta property="og:url" content={currentUrl} />
-      <meta property="og:title" content={title} />
-      <meta property="og:description" content={frontMatter.description} />
-      <meta property="og:site_name" content="CRESTEEM" />
-      <meta property="og:locale" content="en_US" />
-
-      <meta property="og:image" content={frontMatter.thumbnailUrl} />
-      <meta property="og:image:width" content="1200" />
-      <meta property="og:image:height" content="630" />
-
-      {/* TWITTER META */}
-      <meta name="twitter:card" content={frontMatter.description} />
-      <meta name="twitter:site" content="@cresteem" />
-      <meta name="twitter:url" content={currentUrl} />
-      <meta name="twitter:title" content={title} />
-      <meta name="twitter:description" content={frontMatter.description} />
-      <meta name="twitter:image" content={frontMatter.thumbnailUrl} />
-
-      <title>title</title>
-
-      <link
-        rel="icon"
-        type="image/webp"
-        href="https://cresteem.com/favicon.webp"
-      ></link>
-    </>
-  );
-}
-
 export function CresteemLogo() {
   return (
     <div className={style.logoDiv}>

pages/configurations.mdx

@@ -1,3 +1,8 @@
+---
+title: Configurations
+description: Learn how to configure Richie JS for your web project with ease. Discover the power of customizing input parsing and results with our intuitive configuration file structure. Get started with configuring rich results for your website today!
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Tabs } from 'nextra/components'
 
 # Configurations

pages/configurations/_meta.json

@@ -1,47 +1,47 @@
 {
     "article": {
-        "title": "Article"
+        "title": "Article - Configurations"
     },
     "breadcrumb": {
-        "title": "Breadcrumb"
+        "title": "Breadcrumb - Configurations"
     },
     "movie-carousel": {
-        "title": "Movie & Carousel"
+        "title": "Movie & Carousel - Configurations"
     },
     "recipe-carousel": {
-        "title": "Recipe & Carousel"
+        "title": "Recipe & Carousel - Configurations"
     },
     "course-carousel": {
-        "title": "Course & Carousel"
+        "title": "Course & Carousel - Configurations"
     },
     "restaurant-carousel": {
-        "title": "Restaurant & Carousel"
+        "title": "Restaurant & Carousel - Configurations"
     },
     "event": {
-        "title": "Event"
+        "title": "Event - Configurations"
     },
     "faq": {
-        "title": "FAQ"
+        "title": "FAQ - Configurations"
     },
     "learning-video": {
-        "title": "Learning Video"
+        "title": "Learning Video - Configurations"
     },
     "local-business": {
-        "title": "Local Business"
+        "title": "Local Business - Configurations"
     },
     "organization": {
-        "title": "Organization"
+        "title": "Organization - Configurations"
     },
     "product": {
-        "title": "Product & Varients"
+        "title": "Product & Varients - Configurations"
     },
     "profile-page": {
-        "title": "Profile Page"
+        "title": "Profile Page - Configurations"
     },
     "sitelinks-search-box": {
-        "title": "Sitelinks Search Box"
+        "title": "Sitelinks Search Box - Configurations"
     },
     "software-app": {
-        "title": "Software App"
+        "title": "Software App - Configurations"
     }
 }

pages/configurations/article.mdx

@@ -1,3 +1,8 @@
+---
+title: Article - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/breadcrumb.mdx

@@ -1,3 +1,8 @@
+---
+title: Breadcrumb - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/course-carousel.mdx

@@ -1,3 +1,8 @@
+---
+title: Course & Carousel - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/event.mdx

@@ -1,3 +1,8 @@
+---
+title: Event - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/faq.mdx

@@ -1,3 +1,8 @@
+---
+title: FAQ - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/learning-video.mdx

@@ -1,3 +1,8 @@
+---
+title: Learning Video - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/local-business.mdx

@@ -1,3 +1,8 @@
+---
+title: Local Business - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/movie-carousel.mdx

@@ -1,3 +1,8 @@
+---
+title: Movie & Carousel - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/organization.mdx

@@ -1,3 +1,8 @@
+---
+title: Organization - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/product.mdx

@@ -1,3 +1,8 @@
+---
+title: Product & Variants - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/profile-page.mdx

@@ -1,3 +1,8 @@
+---
+title: Profile Page - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/recipe-carousel.mdx

@@ -1,3 +1,8 @@
+---
+title: Recipe & Carousel - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/restaurant-carousel.mdx

@@ -1,3 +1,8 @@
+---
+title: Restaurant & Carousel - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/sitelinks-search-box.mdx

@@ -1,3 +1,8 @@
+---
+title: Sitelinks Search Box - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/configurations/software-app.mdx

@@ -1,3 +1,8 @@
+---
+title: Software App - Configurations
+description: Configurations - Richie JS API References
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 <Callout type='error' emoji="🚨">Help opensource RJS community by your contribution. Kindly follow [Contribute](/contribute).</Callout>

pages/contribute.mdx

@@ -1,7 +1,7 @@
 ---
-title: Contribute | Richie JS API References
-description: Richie JS API References
-thumbnailUrl: https://cresteem.com/opensource/richie-js/test.jpg
+title: Contribute
+description: Contribute to Richie JS, an open-source SEO tool that generates rich results. Learn how to get involved, fork the repository, and submit pull requests. Join our community and help improve Richie JS for a better SEO experience.
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
 ---
 
 # Contributing to Richie JS

pages/faq.mdx

@@ -1,9 +1,86 @@
+---
+title: FAQ
+description: Learn about Richie JS, an open-source SEO tool that generates rich results for enhanced search engine visibility and user experience. Discover its features, configurations, and usage guides to improve your website's search engine performance.
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
+---
 import { Callout } from 'nextra/components'
 
 # FAQ
-No FAQ were added so far.
 <Callout type='error' emoji='🚨'>
-Help us to add FAQ by asking your questions on [telegram channel](https://t.me/cresteem/1)
+Help us to add more FAQ by asking your questions on [telegram channel](https://t.me/cresteem/1)
 </Callout>
 
+<details>
+    <summary>
+        What types of rich results does Richie JS support?
+    </summary>
+        Richie JS can generate wide range of rich results recognized by Google, including article, breadcrumb, movie & carousel, recipe & carousel, course & carousel, restaurant & carousel, event, faq, learning video, local business, organization, product & variants, profile page, sitelinks search box, and software app.
+</details>
+
+<details>
+    <summary>
+        How can I contribute to Richie JS or report issues?
+    </summary>
+        You can report your issue on our Github repo of [Richie JS](https://github.com/cresteem/Richie-JS) and we encourage opensource contributor to follow our [contributor guidelines](contribute).
+</details>
+
+<details>
+    <summary>
+        What output format does Richie JS generate?
+    </summary>
+        Richie JS generates JSON-linked data and automatically injects them into HTML input sources, eliminating the need for manual intervention. Once you've commanded Richie JS, the output files are ready for deployment.
+</details>
+
+
+<details>
+    <summary>
+        How does Richie JS simplify the process of generating rich results?
+    </summary>
+        To create rich results, traditionally you'd need to manually copy and paste your page content, even though it's already on your webpage. But fear not! That's where Richie JS steps in. It automates this process for you. All you need to do is use a reserved class name. You're free to choose your own or simply use one of our predefined ones. Richie JS then looks up by queries it using CSS selectors. From there, it automatically generates rich results without any interruptions, effectively cutting out the manual work for you.
+</details>
+
+<details>
+    <summary>
+        What steps are involved in using Richie JS?
+    </summary>
+        Simply follow our documentation to use the reserved class name corresponding to your desired rich result type. Then, command Richie JS, and voila, you've got it!
+</details>
+
+<details>
+    <summary>
+        Where are the outputs stored by default?
+    </summary>
+        By default outputs are stored inside `dist` You can change output directory by passing it to the command line when exucuting Richie JS (Kindly refer [working with API & CLI](how-to-use)).
+</details>
+
+<details>
+    <summary>
+        How do I use reserved classes in HTML with Richie JS?
+    </summary>
+        To use reserved classes in HTML for Richie JS, simply refer to the documentation corresponding to your desired rich result type. Each rich result type has its own set of reserved names, so it's important to follow the guidelines provided for that specific type. By doing so, you'll be able to use the reserved class names accordingly and generate the desired rich results seamlessly.
+</details>
+
+
+<details>
+    <summary>
+        Is Richie JS open-source? What license does it use?
+    </summary>
+        Yes it is open source. and licenced under Apache 2.0, By means we give complete freedom to users and developers to use commercially or non commercially without any limitation.
+</details>
+
+
+<details>
+    <summary>
+        Can I use Richie JS for both personal and commercial projects?
+    </summary>
+        Yes, absolutely since it is licence under Apache 2.0.
+</details>
+
+
+<details>
+    <summary>
+        Does Richie JS provide any support or assistance for troubleshooting?
+    </summary>
+        You can reach us through our telegram channel or via email ([email protected]). We're here to assist you every step of the way.
+</details>
 

pages/getting-started.mdx

@@ -1,7 +1,7 @@
 ---
 title: Getting Started
-description: Richie JS API References
-thumbnailUrl: https://cresteem.com/opensource/richie-js/test.jpg
+description: Discover Richie JS, a powerful SEO tool that generates rich results for enhanced search engine visibility and improved user experience. Learn how to simplify your SEO process and increase your online presence with our innovative solution.
+thumbnailUrl: https://cresteem.com/opensource/richie-js/thumbnail.png
 ---
 
 # Getting Started
@@ -13,6 +13,7 @@ To use **Richie JS**, you will need the following prerequisites:
 [https://nodejs.org/en/download](https://nodejs.org/en/download).
 - **NPM** (Node Package Manager) or **YARN** should be installed along with Node.js.
 - **Internet** to install Richie JS from npm registry.
+- **Basic knowledge** of CSS selectors and HTML attributes.
 
 Once you have these prerequisites in place, you can follow the installation steps in the project's documentation
 to set up and run the project on your local machine.