Docs landing page

commit/commit/doctype/commit_docs/commit_docs.json

@@ -10,6 +10,7 @@
   "route",
   "published",
   "company_name",
+  "description",
   "section_break_camv",
   "sidebar",
   "logo_section",
@@ -160,11 +161,16 @@
    "fieldname": "company_name",
    "fieldtype": "Data",
    "label": "Company Name"
+  },
+  {
+   "fieldname": "description",
+   "fieldtype": "Small Text",
+   "label": "Description"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-11-09 12:53:12.416589",
+ "modified": "2024-12-07 22:34:40.239467",
  "modified_by": "Administrator",
  "module": "commit",
  "name": "Commit Docs",

dashboard/package.json

@@ -42,6 +42,7 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-table": "^8.9.3",
     "@uiw/react-md-editor": "^4.0.4",
     "cal-sans": "^1.0.1",

dashboard/src/App.tsx

@@ -2,6 +2,7 @@ import { FrappeProvider } from 'frappe-react-sdk'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { lazy, Suspense } from 'react'
 import { FullPageLoader } from './components/common/FullPageLoader/FullPageLoader'
+import DocsLandingPage from './pages/features/docs/LandingPage/DocsLandingPage'
 
 const ERDViewer = lazy(async () => import('./pages/features/erd/ERDViewer'))
 const Overview = lazy(async () => import('./pages/overview/Overview'))
@@ -43,6 +44,7 @@ function App() {
             <Route path="/meta-viewer/:ID" element={<AppAPIViewerContainer />} />
             <Route path='/meta-erd/:ID' element={<ERDViewer />} />
             <Route path='/meta-erd/create' element={<CreateERD />} />
+            <Route path='/docs' element={<DocsLandingPage />} />
             <Route path='/docs/:ID' element={<DocsPage />} />
             <Route path='/docs/:ID/:pageID' element={<ViewDocs />} />
             <Route path='*' element={<PageNotFound />} />

dashboard/src/components/features/api_viewer/APIDetails.tsx

@@ -84,7 +84,7 @@ const APIDetails = ({ project_branch, endpointData, selectedEndpoint, setSelecte
                             <dt className="text-sm font-medium leading-6 text-gray-900">Endpoint :</dt>
                             <div className="flex items-center justify-between space-x-2 sm:col-span-4">
                                 <div className="flex items-center space-x-2">
-                                    <dd className="mt-1 text-sm text-blue-500 cursor-pointer max-w-[56ch] leading-6 sm:col-span-2 sm:mt-0 truncate">{data?.api_path}</dd>
+                                    <dd className="mt-1 text-sm text-blue-500 cursor-pointer max-w-[50ch] leading-6 sm:col-span-2 sm:mt-0 truncate">{data?.api_path}</dd>
                                     <CopyButton value={data?.api_path ?? ''} />
                                 </div>
                                 {viewerType === 'app' && <TooltipProvider>

dashboard/src/index.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

dashboard/src/pages/features/docs/LandingPage/DocsLandingPage.tsx

@@ -0,0 +1,56 @@
+import { ErrorBanner } from "@/components/common/ErrorBanner/ErrorBanner";
+import { CommitDocs } from "@/types/commit/CommitDocs";
+import { useFrappeGetDocList } from "frappe-react-sdk";
+import { FullPageLoader } from "@/components/common/FullPageLoader/FullPageLoader";
+import { ShootingStars } from "./ShootingStars";
+import HeroSection from "./HeroSection";
+import DocsList from "./DocsList";
+
+const DocsLandingPage = () => {
+  const { data, error, isLoading } = useFrappeGetDocList<CommitDocs>(
+    "Commit Docs",
+    {
+      fields: ["header", "light_mode_logo", "route", "published", "description"],
+    }
+  );
+
+  if (error) {
+    return <ErrorBanner error={error} />;
+  }
+
+  if (isLoading) {
+    return <FullPageLoader />;
+  }
+  if (data) {
+    return (
+      <div>
+        <div className="m-10 h-full relative">
+          <div className="absolute inset-0 z-0">
+            <ShootingStars
+              className="h-[100vh]"
+              maxSpeed={10}
+              minSpeed={8}
+              starColor="rgb(59 130 246)"
+              trailColor="#000"
+              starWidth={14}
+              starHeight={1}
+              maxStars={2}
+            />
+          </div>
+          <div className="relative z-10">
+            <HeroSection />
+          </div>
+        </div>
+        <div className="flex justify-center m-10">
+          <div className="w-full pb-10">
+            <DocsList data={data} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default DocsLandingPage;

dashboard/src/pages/features/docs/LandingPage/DocsList.tsx

@@ -0,0 +1,59 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button";
+import { CommitDocs } from "@/types/commit/CommitDocs"
+import { useMemo } from "react"
+import { MdArrowOutward } from "react-icons/md";
+import { useNavigate } from "react-router-dom";
+
+const DocsList = ({ data }: { data: CommitDocs[] }) => {
+    return (
+        <div className="overflow-hidden rounded-lg sm:grid sm:grid-cols-2 sm:gap-6 mx-4 sm:mx-14">
+            {data.map((item, idx) => (
+                <DocCard key={idx} data={item} />
+            ))}
+        </div>
+    )
+}
+
+export default DocsList
+
+const DocCard = ({ data }: { data: CommitDocs }) => {
+
+    const appNameInitials = useMemo(() => {
+        return data.header[0].toUpperCase()
+    }, [data])
+
+    const navigate = useNavigate()
+
+    return (
+        <div className="p-4 font-title_font border-l-[1.5px] ">
+            <div className="flex justify-between items-center">
+                <div className="flex items-center gap-2">
+                    <Avatar className="h-10 w-10 flex items-center rounded-lg">
+                        <AvatarImage src={data.light_mode_logo} className="object-contain h-full w-full" />
+                        <AvatarFallback className="rounded-lg text-xl">
+                            {appNameInitials}
+                        </AvatarFallback>
+                    </Avatar>
+                    <div className="font-bold text-xl">
+                        {data.header}
+                    </div>
+                    <a
+                        href={`../docs/${data.route}`}
+                        aria-label="redirect"
+                        className="inline-flex items-center p-1 hover:bg-slate-100 rounded-md"
+                    >
+                        <MdArrowOutward className="h-5 w-5" />
+                    </a>
+                </div>
+                {data.published == 1 && <div className="flex-none rounded-full bg-emerald-500/20 p-1.5">
+                    <div className="size-1.5 rounded-full bg-emerald-500" />
+                </div>}
+            </div>
+            <div className="pt-3 text-sm">
+                {data.description}
+            </div>
+
+        </div>
+    )
+}

dashboard/src/pages/features/docs/LandingPage/HeroSection.tsx

@@ -0,0 +1,34 @@
+
+import ManDoodle from "../../../../../public/man_doodle.png"
+import { Button } from "@/components/ui/button";
+
+const HeroSection = () => {
+    return (
+        <div className="relative z-10">
+            <div className="flex flex-col md:flex-row min-h-screen md:h-screen items-center justify-center px-4 sm:px-6 lg:px-6 ">
+                <div className="w-full md:w-1/2 p-4 md:p-8 text-center md:text-left z-20 relative">
+                    <div className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold font-title_font tracking-tighter mb-6">
+                        Documentation is now Lemon Sqeezy
+                    </div>
+                    <div className="font-title_font tracking-tight text-base sm:text-lg md:text-xl mb-8">
+                        Meet <span className="font-bold">Commit Docs</span>, built with Frappe Framework, it is the modern standard for public-facing documentation. Beautiful out of the box, easy to maintain, and <span className="text-gray-500">Open Source ✨</span>.
+                    </div>
+                    <div className="flex justify-center md:justify-start">
+                        <Button className="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg transition-colors duration-300 z-30 relative">
+                            Get Started &rarr;
+                        </Button>
+                    </div>
+                </div>
+                <div className="w-full md:w-1/2 p-4 md:p-8 z-20 relative">
+                    <img
+                        src={ManDoodle}
+                        alt="ManDoodle."
+                        className="w-full h-auto max-h-96 object-contain"
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default HeroSection

dashboard/src/pages/features/docs/LandingPage/ShootingStars.tsx

@@ -0,0 +1,154 @@
+import { cn } from "@/lib/utils";
+import React, { useEffect, useState, useRef } from "react";
+
+interface ShootingStar {
+  id: number;
+  x: number;
+  y: number;
+  angle: number;
+  scale: number;
+  speed: number;
+  distance: number;
+}
+
+interface ShootingStarsProps {
+  minSpeed?: number;
+  maxSpeed?: number;
+  minDelay?: number;
+  maxDelay?: number;
+  starColor?: string;
+  trailColor?: string;
+  starWidth?: number;
+  starHeight?: number;
+  className?: string;
+  maxStars?: number;
+}
+
+const getRandomStartPoint = () => {
+  const side = Math.floor(Math.random() * 4);
+  const offset = Math.random() * window.innerWidth;
+
+  switch (side) {
+    case 0:
+      return { x: offset, y: 0, angle: 45 };
+    case 1:
+      return { x: window.innerWidth, y: offset, angle: 135 };
+    case 2:
+      return { x: offset, y: window.innerHeight, angle: 225 };
+    case 3:
+      return { x: 0, y: offset, angle: 315 };
+    default:
+      return { x: 0, y: 0, angle: 45 };
+  }
+};
+
+export const ShootingStars: React.FC<ShootingStarsProps> = ({
+  minSpeed = 10,
+  maxSpeed = 30,
+  minDelay = 1200,
+  maxDelay = 4200,
+  starColor = "#9E00FF",
+  trailColor = "#2EB9DF",
+  starWidth = 10,
+  starHeight = 1,
+  className,
+  maxStars = 5, // Maximum stars on the screen
+}) => {
+  const [stars, setStars] = useState<ShootingStar[]>([]);
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    const createStar = () => {
+      if (stars.length >= maxStars) return; // Ensure we don't exceed maxStars
+
+      const { x, y, angle } = getRandomStartPoint();
+      const newStar: ShootingStar = {
+        id: Date.now() + Math.random(), // Unique ID
+        x,
+        y,
+        angle,
+        scale: 1,
+        speed: Math.random() * (maxSpeed - minSpeed) + minSpeed,
+        distance: 0,
+      };
+
+      setStars((prevStars) => [...prevStars, newStar]);
+
+      const randomDelay = Math.random() * (maxDelay - minDelay) + minDelay;
+      setTimeout(createStar, randomDelay);
+    };
+
+    const timeoutId = setTimeout(createStar, minDelay);
+
+    return () => clearTimeout(timeoutId);
+  }, [stars.length, minSpeed, maxSpeed, minDelay, maxDelay, maxStars]);
+
+  useEffect(() => {
+    const moveStars = () => {
+      setStars((prevStars) =>
+        prevStars
+          .map((star) => {
+            const newX =
+              star.x + star.speed * Math.cos((star.angle * Math.PI) / 180);
+            const newY =
+              star.y + star.speed * Math.sin((star.angle * Math.PI) / 180);
+            const newDistance = star.distance + star.speed;
+            const newScale = 1 + newDistance / 100;
+
+            // Remove stars that go out of bounds
+            if (
+              newX < -50 ||
+              newX > window.innerWidth + 50 ||
+              newY < -50 ||
+              newY > window.innerHeight + 50
+            ) {
+              return null;
+            }
+
+            return {
+              ...star,
+              x: newX,
+              y: newY,
+              distance: newDistance,
+              scale: newScale,
+            };
+          })
+          .filter((star) => star !== null) as ShootingStar[] // Remove null values
+      );
+
+      requestAnimationFrame(moveStars);
+    };
+
+    const animationFrame = requestAnimationFrame(moveStars);
+    return () => cancelAnimationFrame(animationFrame);
+  }, []);
+
+  return (
+    <svg
+      ref={svgRef}
+      className={cn("w-full h-full absolute inset-0", className)}
+    >
+      {stars.map((star) => (
+        <rect
+          key={star.id}
+          x={star.x}
+          y={star.y}
+          width={starWidth * star.scale}
+          height={starHeight}
+          fill="url(#gradient)"
+          transform={`rotate(${star.angle}, ${star.x + (starWidth * star.scale) / 2
+            }, ${star.y + starHeight / 2})`}
+        />
+      ))}
+      <defs>
+        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" style={{ stopColor: trailColor, stopOpacity: 0 }} />
+          <stop
+            offset="100%"
+            style={{ stopColor: starColor, stopOpacity: 1 }}
+          />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

dashboard/src/types/commit/CommitDocs.ts

@@ -45,4 +45,5 @@ export interface CommitDocs{
 	telegram?: string
 	/**	Footer : Table - Commit Docs Footer Item	*/
 	footer?: CommitDocsFooterItem[]
+	description?: string
 }