feat: docs

documentation/docs/integrations/getting-started/index.mdx

@@ -4,6 +4,6 @@ title: Overview
 sidebar_label: Overview
 ---
 
-import { Integrations } from "./landing/index";
+import { Integrations } from "./integrations/index";
 
 <Integrations />

documentation/docs/integrations/getting-started/landing/card/card.tsx → documentation/docs/integrations/getting-started/integrations/card/card.tsx

@@ -1,38 +1,38 @@
 import Link from "@docusaurus/Link";
 import { Description, Title } from "@site/src/components";
+import { useSidebar } from "@site/src/hooks/use-sidebar";
+import { Section } from "@site/src/modules";
+import clsx from "clsx";
 
 export type CardProps = {
-  item: {
-    link: string;
-    category?: string;
-    img?: string;
-    name: string;
-    featured?: boolean;
-    description: string;
-    className?: string;
-  };
+  section: Section;
   className?: string;
 };
 
-export function IntegrationCard({ item }: CardProps) {
+export function IntegrationCard({ section, className }: CardProps) {
+  const { sidebar } = useSidebar();
+
+  const item = sidebar.find((element) => element.section.label === section.label);
+
   return (
     <Link
-      to={item.link}
-      className="!no-underline bg-gradient-to-tr from-zinc-100 to-zinc-50 dark:from-zinc-800 dark:to-zinc-800 rounded-3xl border dark:border-zinc-800 dark:hover:border-zinc-700 transition-colors group relative"
+      to={item.link.path}
+      className={clsx(
+        className,
+        "flex !no-underline bg-gradient-to-tr from-zinc-100 to-zinc-50 dark:from-zinc-800 dark:to-zinc-800 rounded-3xl border dark:border-zinc-800 dark:hover:border-zinc-700 transition-colors group relative",
+      )}
     >
       <div className="flex flex-col p-5 h-full">
         <div className="flex items-center space-x-3 mb-2">
-          {item.img && (
+          {item.section.img && (
             <div className="relative mr-2">
-              <img
-                src={item.img}
-                alt={item.name}
+              <item.img
                 width="40"
                 height="40"
                 style={{ background: "radial-gradient(#fff 68%, #3a373722 72%)" }}
-                className={`w-[38px] h-[38px] border-0 rounded-full overflow-hidden p-1.5 ${item.className || ""}`}
+                className={`w-[38px] h-[38px] border-0 rounded-full overflow-hidden p-1.5 ${item.section.icon || ""}`}
               />
-              {item.featured && (
+              {item.section.featured && (
                 <img
                   className="absolute top-0 -right-1"
                   src="/img/star.svg"

documentation/docs/integrations/getting-started/landing/integrations.tsx → documentation/docs/integrations/getting-started/integrations/integrations.tsx

@@ -1,16 +1,15 @@
 import { Description, Particles, Title } from "@site/src/components";
 
-import { IntegrationCard } from "./card/card";
-import { integrations } from "./integrations.constants";
 import { IntegrationsList } from "./list/list";
+import { PromotedCarousel } from "./promoted-carousel/promoted-carousel";
 
 const styles = `
 .theme-doc-breadcrumbs, article header, .theme-doc-version-badge {
   display: none!important;
 }
-main, main .col {
+main > div > .row > .col {
   width: 100%!important;
-  max-width: 100%!important;
+  max-width: none!important;
 }
 `;
 
@@ -19,12 +18,12 @@ export const Integrations = () => {
     <>
       <style>{styles}</style>
       <div className="relative opacity-90 dark:opacity-100 -z-10">
-        {/* Illustration 02 */}
+        {/* Graphic 02 */}
         <div
           className="md:block absolute left-1/2 -translate-x-1/2 bottom-0 -mb-16 blur-2xl opacity-90 pointer-events-none -z-10 max-w-[100vw]"
           aria-hidden="true"
         >
-          <img src="/img/page-illustration-02.svg" width={1440} height={427} alt="Page Illustration 02" />
+          <img src="/img/page-illustration-02.svg" width={1440} height={427} alt="Page Graphic 02" />
         </div>
 
         {/* Opacity layer */}
@@ -42,17 +41,16 @@ export const Integrations = () => {
         {/* Particles animation */}
         <Particles className="absolute inset-0 h-96 -z-10" quantity={15} />
 
-        {/* Illustration */}
+        {/* Graphic */}
         <div
           className="md:block absolute left-1/2 -translate-x-1/2 -mt-16 blur-2xl opacity-90 pointer-events-none -z-10 max-w-[100vw]"
           aria-hidden="true"
         >
-          <img src="/img/page-illustration.svg" width={1440} height={427} alt="Page Illustration" />
+          <img src="/img/page-illustration.svg" width={1440} height={427} alt="Page Graphic" />
         </div>
       </div>
       <section className="max-w-6xl mx-auto px-4 sm:px-6">
         <div className="pt-6 md:pt-12">
-          {/* Section header */}
           <div className="text-center pb-4 md:pb-8">
             <div className="inline-flex font-medium bg-clip-text !text-transparent bg-gradient-to-r from-yellow-500 to-orange-500 dark:from-yellow-500 dark:to-yellow-200 pb-3">
               Integrations & Add-ons
@@ -64,14 +62,10 @@ export const Integrations = () => {
               </Description>
             </div>
           </div>
-
-          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-            <IntegrationCard item={integrations[0]} />
-            <IntegrationCard item={integrations[1]} />
-            <IntegrationCard item={integrations[2]} />
-          </div>
+          <PromotedCarousel />
         </div>
       </section>
+
       <IntegrationsList />
 
       <div className="px-4 mb-20 flex flex-col items-center">

documentation/docs/integrations/getting-started/landing/list/list.tsx → documentation/docs/integrations/getting-started/integrations/list/list.tsx

@@ -1,37 +1,40 @@
 /* eslint-disable react/no-array-index-key */
 import { Title } from "@site/src/components";
-import { CodeIcon, LucideProps, Server, Usb, Users } from "lucide-react";
+import { Code, LucideProps, PlugZap, Server, Usb, Users } from "lucide-react";
+import { integrations } from "@site/src/integrations";
 
 import { IntegrationCard } from "../card/card";
-import { integrations } from "../integrations.constants";
 
-const categories = integrations.reduce((acc, item) => {
-  if (!acc[item.category]) {
-    acc[item.category] = [item];
-  } else {
-    acc[item.category].push(item);
-  }
+const categories = integrations
+  .filter((section) => section.isPackage)
+  .reduce((acc, item) => {
+    if (!acc[item.category]) {
+      acc[item.category] = [item];
+    } else {
+      acc[item.category].push(item);
+    }
 
-  return acc;
-}, {});
+    return acc;
+  }, {});
 
 const categoriesKeys = Object.keys(categories);
 
 const icons: Record<
   string,
   React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>
 > = {
-  Tools: CodeIcon,
+  Plugin: PlugZap,
+  Tools: Code,
   Adapters: Usb,
   Service: Server,
   Community: Users,
 };
 
 export function IntegrationsList() {
   return (
-    <section className="mt-20">
+    <section>
       <div className="max-w-6xl mx-auto px-4 sm:px-6">
-        <div className="pb-12 md:pb-20">
+        <div className="pb-6 md:pb-10">
           <div className="flex justify-between items-center py-6 border-b [border-image:linear-gradient(to_right,transparent,theme(colors.slate.300),transparent)1] dark:[border-image:linear-gradient(to_right,transparent,theme(colors.slate.800),transparent)1] space-x-8 overflow-x-scroll no-scrollbar">
             <div className="flex flex-wrap items-center text-md font-medium space-x-8">
               {categoriesKeys.map((category, index) => {
@@ -42,21 +45,21 @@ export function IntegrationsList() {
                     className="flex gap-2 items-center text-slate-500 hover:text-slate-400 dark:text-slate-50 dark:hover:text-white stroke-slate-50 whitespace-nowrap transition-colors space-x-2"
                     href={`#${category.toLocaleLowerCase()}`}
                   >
-                    {Icon ? <Icon className="brightness-50 w-5 h-5" /> : <CodeIcon className="brightness-50 w-5 h-5" />}
+                    {Icon ? <Icon className="brightness-50 w-5 h-5" /> : <Code className="brightness-50 w-5 h-5" />}
                     {category}
                   </a>
                 );
               })}
             </div>
           </div>
           {categoriesKeys.map((key) => (
-            <div className="mt-12 md:mt-16" key={key}>
-              <Title size="sm" id={key.toLocaleLowerCase()} wrapperClass="scroll-mt-8 pb-8">
+            <div className="mt-4 md:mt-6" key={key}>
+              <Title size="sm" id={key.toLocaleLowerCase()} wrapperClass="scroll-mt-8 pb-4 mt-4">
                 {key}
               </Title>
               <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                {categories[key].map((item, index) => (
-                  <IntegrationCard item={item} key={index} />
+                {categories[key].map((section, index) => (
+                  <IntegrationCard section={section} key={index} />
                 ))}
               </div>
             </div>

documentation/docs/integrations/getting-started/integrations/promoted-carousel/promoted-carousel.tsx

@@ -0,0 +1,72 @@
+import { useCallback, useRef } from "react";
+import { integrations } from "@site/src/integrations";
+import { Swiper, SwiperSlide, SwiperRef } from "swiper/react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import "swiper/css";
+
+import { IntegrationCard } from "../card/card";
+
+export const PromotedCarousel = () => {
+  const sliderRef = useRef<SwiperRef>(null);
+
+  const handlePrev = useCallback(() => {
+    if (!sliderRef.current) return;
+    sliderRef.current.swiper.slidePrev();
+  }, []);
+
+  const handleNext = useCallback(() => {
+    if (!sliderRef.current) return;
+    sliderRef.current.swiper.slideNext();
+  }, []);
+
+  return (
+    <>
+      <Swiper
+        ref={sliderRef}
+        spaceBetween={50}
+        breakpoints={{
+          320: {
+            slidesPerView: 1,
+          },
+          640: {
+            slidesPerView: 2,
+          },
+          1280: {
+            slidesPerView: 3,
+          },
+        }}
+        autoplay={{
+          delay: 2500,
+        }}
+      >
+        {integrations
+          .filter((section) => section.isPackage && section.featured)
+          .map((section) => (
+            <SwiperSlide key={section.label}>
+              <IntegrationCard className="h-full" section={section} />
+            </SwiperSlide>
+          ))}
+      </Swiper>
+
+      {/* Arrows */}
+      <div className="flex pt-4 justify-end">
+        <button
+          type="button"
+          onClick={handlePrev}
+          className="carousel-prev relative z-20 w-12 h-12 flex items-center justify-center group"
+        >
+          <span className="sr-only">Previous</span>
+          <ArrowLeft className="w-6 h-6 stroke-slate-500 group-hover:stroke-yellow-500 transition duration-150 ease-in-out" />
+        </button>
+        <button
+          type="button"
+          onClick={handleNext}
+          className="carousel-next relative z-20 w-12 h-12 flex items-center justify-center group"
+        >
+          <span className="sr-only">Next</span>
+          <ArrowRight className="w-6 h-6 stroke-slate-500 group-hover:stroke-yellow-500 transition duration-150 ease-in-out" />
+        </button>
+      </div>
+    </>
+  );
+};

documentation/docs/integrations/plugin-eslint/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "ESlint"
+}

documentation/package.json

@@ -35,7 +35,7 @@
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "^0.2.5",
     "events": "^3.3.0",
-    "gsap": "2.1.3",
+    "gsap": "3.12.5",
     "lucide-react": "^0.453.0",
     "postcss": "^8.4.31",
     "prismjs": "^1.29.0",

documentation/src/components/package-details/package-details.tsx

@@ -48,7 +48,7 @@ export const PackageDetails = ({ pkg }: { pkg: string | string[] }) => {
           <div className="text-center mb-5">
             <div className="mb-4">
               <div className="relative inline-flex">
-                <img src="/img/integrations-github.svg" width={80} height={80} alt="Icon 08" />
+                <img src="/img/github-logo.svg" width={80} height={80} alt="Icon 08" />
                 <img
                   className="absolute top-0 -right-1"
                   src="/img/star.svg"

documentation/src/components/sidebar-menu/sidebar-menu.tsx

@@ -20,7 +20,7 @@ export const SidebarMenu = () => {
   const { sidebar, activeItem } = useSidebar();
 
   return (
-    <div className="px-4">
+    <div className="px-4 min-w-[250px]">
       <div className="docs_sidebar">
         <VersionDropdown
           className="nav_versioning shadow-zinc-500/20 dark:shadow-zinc-200/20 shadow-[inset_0_1px_1px_rgba(0,0,0,0.6)] text-black/50 dark:text-white/60 py-1 px-4 font-bold leading-5 bg-zinc-400/20 dark:bg-zinc-400/10 rounded-full flex items-center space-x-2 w-fit hover:opacity-80"