feat: adding new packages rasengan-shuriken cli

docs/.gitignore

@@ -31,4 +31,8 @@ dist-ssr
 .netlify
 
 # Local Vercel folder
-.vercel
+.vercel
+
+# Env variables
+.env 
+.env-*

docs/package.json

@@ -10,22 +10,25 @@
   },
   "dependencies": {
     "@rasenganjs/image": "^1.0.0",
-    "@rasenganjs/mdx": "workspace:1.1.0-beta.0",
+    "@rasenganjs/mdx": "1.1.0-beta.1",
     "@rasenganjs/serve": "1.0.0-beta.54",
     "@rasenganjs/theme": "^1.0.1",
     "@tailwindcss/vite": "^4.*",
+    "axios": "^1.8.3",
     "lucide-react": "^0.477.0",
     "motion": "^12.4.10",
-    "rasengan": "workspace:1.0.0-beta.57",
+    "rasengan": "1.0.0-beta.58",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^3.0.2",
-    "tailwindcss": "^4.*"
+    "tailwindcss": "^4.*",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "cross-env": "^7.0.3",
+    "sass": "^1.85.1",
     "typescript": "^5.1.3",
     "vite": "^6.0.0"
   }

docs/src/api/index.ts

@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export const instance = axios.create({
+  baseURL: 'https://api.smadmail.com/api/v1',
+  timeout: 10000,
+});

docs/src/api/newsletter/index.ts

@@ -0,0 +1,30 @@
+import { instance } from '..';
+
+const env = import.meta.env;
+
+export const newsletterProvider = {
+  subscribe: async (email: string) => {
+    try {
+      const payload = {
+        email,
+        project_id: env.RASENGAN_SMAD_PROJECT_ID,
+        private_key: env.RASENGAN_SMAD_PRIVATE_KEY,
+      };
+      const response = await instance.post('/email/save', payload);
+
+      if (response.status === 201) {
+        return {
+          data: 'Your subscrition has been done',
+        };
+      }
+
+      return {
+        error: 'Error while subscribing to the newsletter',
+      };
+    } catch (error) {
+      return {
+        error: 'Error while subscribing to the newsletter',
+      };
+    }
+  },
+};

docs/src/app/app.layout.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
-import { Outlet, LayoutComponent } from 'rasengan';
+import { Outlet, LayoutComponent, Link } from 'rasengan';
 import { useTheme } from '@rasenganjs/theme';
 import { twMerge } from 'tailwind-merge';
+import { useNavigationStore } from '@/store/navigation';
+import { motion, AnimatePresence } from 'motion/react';
+import { NavigationData } from '@/data/docs';
+import { X } from 'lucide-react';
+import ThemeButton from '@/components/atoms/buttons/theme-button';
+import Footer from '@/components/layout/footer';
 
 const AppLayout: LayoutComponent = () => {
   const { isDark } = useTheme();
+  const { isOpen, toggle } = useNavigationStore();
 
   return (
     <section
@@ -14,6 +21,43 @@ const AppLayout: LayoutComponent = () => {
       )}
     >
       <Outlet />
+
+      <Footer />
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, x: '100%' }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: '100%' }}
+            transition={{ duration: 0.2 }}
+            className="fixed top-0 left-0 w-full h-full bg-background z-50 flex"
+          >
+            <div className="w-full bg-background">
+              <nav className="p-6 mt-2">
+                <ul className="flex flex-col gap-4">
+                  {NavigationData.navbar.map((nav) => (
+                    <Link key={nav.id} to={nav.link ?? '#'} onClick={toggle}>
+                      <li>{nav.name}</li>
+                    </Link>
+                  ))}
+                </ul>
+              </nav>
+            </div>
+
+            <div
+              className="fixed top-8 right-8 size-8 rounded-full flex items-center justify-center border-[1px] border-foreground/30"
+              onClick={toggle}
+            >
+              <X size={20} className="text-foreground" />
+            </div>
+
+            <div className="fixed bottom-8 right-8 size-8 flex items-center justify-center">
+              <ThemeButton />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </section>
   );
 };

docs/src/app/docs/components/layout/sidebar.tsx

@@ -1,22 +1,50 @@
-import { NavigationData, NavigationGroup, NavigationItem } from '@/data/docs';
+import {
+  NavigationData,
+  NavigationGroup,
+  NavigationItem,
+  NavigationType,
+} from '@/data/docs';
 import { BookOpen, Box, ChevronDown, LayoutTemplate, Tag } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 import { Link, useLocation } from 'rasengan';
-import { ComponentProps, Fragment, useState } from 'react';
+import { ComponentProps, Fragment, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-export default function SidebarNavigation() {
-  const [activeTab, setActiveTab] = useState(NavigationGroup.DOCUMENTATION);
+type Props = {
+  className?: ComponentProps<'aside'>['className'];
+  onClose?: () => void;
+};
+
+export default function SidebarNavigation({ className, onClose }: Props) {
+  const [activeTab, setActiveTab] = useState<NavigationType | null>(null);
 
   const { pathname } = useLocation();
 
+  useEffect(() => {
+    if (pathname.includes('/docs')) {
+      setActiveTab(NavigationGroup.DOCUMENTATION);
+    } else if (pathname.includes('/packages')) {
+      setActiveTab(NavigationGroup.PACKAGES);
+    }
+  }, [pathname]);
+
   const isActive = (path: string) => {
     return pathname.includes(path);
   };
 
+  const sortNavigation = (nav: NavigationItem[]) => {
+    // sort by name
+    return nav.sort((a, b) => a.name.localeCompare(b.name));
+  };
+
   return (
-    <aside className="w-[280px] border-r-[1px] border-r-border/60 text-foreground">
-      <section className="sticky top-8 w-full h-full max-h-[calc(100vh)] overflow-y-auto pt-16 p-6">
+    <aside
+      className={twMerge(
+        'w-[280px] border-r-[1px] border-r-border/60 text-foreground',
+        className
+      )}
+    >
+      <section className="lg:sticky lg:top-8 w-full h-(--mobile-main-height) lg:h-full max-h-[calc(100vh)] overflow-y-auto pb-16 lg:pt-16 p-6">
         <div className="flex flex-col gap-4 text-sm border-b-[1px] border-b-border pb-8">
           <div className="flex items-center mb-6 gap-2">
             <div className="size-10 rounded-md border-[1px] border-primary/40 bg-primary/10 flex items-center justify-center">
@@ -29,14 +57,18 @@ export default function SidebarNavigation() {
             </div>
           </div>
 
-          <Link to="/docs/introduction">
+          <Link to="/docs/getting-started/introduction">
             <div
               className={twMerge(
                 'flex items-center gap-4 hover:cursor-pointer hover:text-primary transition-all',
                 isActive('/docs')
                   ? 'text-primary font-lexend-medium'
                   : 'text-foreground/90'
               )}
+              onClick={() => {
+                setActiveTab(NavigationGroup.DOCUMENTATION);
+                onClose && onClose();
+              }}
             >
               <BookOpen size={20} />
               <span>Documentation</span>
@@ -51,6 +83,10 @@ export default function SidebarNavigation() {
                   ? 'text-primary font-lexend-medium'
                   : 'text-foreground/90'
               )}
+              onClick={() => {
+                setActiveTab(NavigationGroup.PACKAGES);
+                onClose && onClose();
+              }}
             >
               <Box size={20} />
               <span>Packages</span>
@@ -65,29 +101,37 @@ export default function SidebarNavigation() {
           </Link>
         </div>
 
-        {NavigationData[activeTab].map((nav) => {
-          return (
-            <div key={nav.id} className="mt-8">
-              <div className="flex items-center gap-2 text-foreground/60">
-                {nav.icon}
-                <span className="font-mono text-[12px]">{nav.name}</span>
-              </div>
+        {activeTab &&
+          NavigationData[activeTab].map((nav) => {
+            return (
+              <div key={nav.id} className="mt-8">
+                <div className="flex items-center gap-2 text-foreground/60">
+                  {nav.icon}
+                  <span className="font-mono text-[12px]">{nav.name}</span>
+                </div>
 
-              <div className="flex flex-col w-full text-sm py-4">
-                {nav.children &&
-                  nav.children.map((item) => {
-                    if (item.visible === false) return null;
-
-                    return (
-                      <Fragment key={item.id}>
-                        <NavItem item={item} isActive={isActive} />
-                      </Fragment>
-                    );
-                  })}
+                <div className="flex flex-col w-full text-sm py-4">
+                  {nav.children &&
+                    (activeTab === NavigationGroup.DOCUMENTATION
+                      ? nav.children
+                      : sortNavigation(nav.children)
+                    ).map((item) => {
+                      if (item.visible === false) return null;
+
+                      return (
+                        <Fragment key={item.id}>
+                          <NavItem
+                            item={item}
+                            isActive={isActive}
+                            onClose={onClose}
+                          />
+                        </Fragment>
+                      );
+                    })}
+                </div>
               </div>
-            </div>
-          );
-        })}
+            );
+          })}
       </section>
     </aside>
   );
@@ -97,19 +141,47 @@ type NavItemProps = {
   item: NavigationItem;
   className?: ComponentProps<'div'>['className'];
   isActive: (path: string) => boolean;
+  onClose?: () => void;
 };
 
-export const NavItem = ({ item, className, isActive }: NavItemProps) => {
+export const NavItem = ({
+  item,
+  className,
+  isActive,
+  onClose,
+}: NavItemProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    const active = hasActiveChild();
+
+    if (active) {
+      setIsOpen(true);
+    }
+  }, []);
+
   const hasActiveChild = () => {
     if (!item.children) return false;
 
     return item.children.some((item) => isActive(item.link ?? '#nothing'));
   };
 
+  const sortNavigation = (nav: NavigationItem[]) => {
+    if (pathname.includes('/docs')) {
+      return nav;
+    } else if (pathname.includes('/packages')) {
+      // sort by name
+      return nav.sort((a, b) => a.name.localeCompare(b.name));
+    }
+
+    // sort by name
+    return nav.sort((a, b) => a.name.localeCompare(b.name));
+  };
+
   return item.link ? (
-    <Link to={item.link}>
+    <Link to={item.link} onClick={() => onClose && onClose()}>
       <div
         className={twMerge(
           'flex items-center justify-between pl-4 py-1 border-l-[1px] border-l-border  cursor-pointer hover:text-primary/80 hover:border-l-primary/60 transition-all duration-300',
@@ -148,14 +220,16 @@ export const NavItem = ({ item, className, isActive }: NavItemProps) => {
             className="overflow-hidden"
           >
             {item.children &&
-              item.children.map((item) => {
+              sortNavigation(item.children).map((item) => {
                 if (item.visible === false) return null;
 
                 return (
                   <NavItem
+                    key={item.id}
                     item={item}
                     className={item.level === 2 ? '' : 'pl-8'}
                     isActive={isActive}
+                    onClose={onClose}
                   />
                 );
               })}
@@ -203,14 +277,16 @@ export const NavItem = ({ item, className, isActive }: NavItemProps) => {
             className="overflow-hidden"
           >
             {item.children &&
-              item.children.map((item) => {
+              sortNavigation(item.children).map((item) => {
                 if (item.visible === false) return null;
 
                 return (
                   <NavItem
+                    key={item.id}
                     item={item}
                     className={item.level === 2 ? '' : 'pl-8'}
                     isActive={isActive}
+                    onClose={onClose}
                   />
                 );
               })}