From c43bb9754b87b34b52cb0150b9275cf034ddf5e5 Mon Sep 17 00:00:00 2001 From: Heba Yasser Date: Fri, 1 Nov 2024 03:11:51 +0200 Subject: [PATCH] Enhance UI Styling --- app/docs/installation/page.tsx | 126 ++++++++++++----------- app/docs/layout.tsx | 19 ++-- app/docs/page.tsx | 48 +++++---- app/docs/routing/page.tsx | 158 +++++++++++++++-------------- app/docs/write-middleware/page.tsx | 130 +++++++++++++----------- app/page.tsx | 30 +++--- components/Sidebar.tsx | 7 +- 7 files changed, 282 insertions(+), 236 deletions(-) diff --git a/app/docs/installation/page.tsx b/app/docs/installation/page.tsx index 51a7ae5..fbc1368 100644 --- a/app/docs/installation/page.tsx +++ b/app/docs/installation/page.tsx @@ -1,65 +1,73 @@ -import { ArrowLeft, ArrowRight } from "lucide-react" -import { Metadata } from "next" -import Link from "next/link" +import { ArrowLeft, ArrowRight } from "lucide-react"; +import { Metadata } from "next"; +import Link from "next/link"; -import SyntaxHighlighter from "@/components/SyntaxHighlighter" -import { Button } from "@/components/ui/button" -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import SyntaxHighlighter from "@/components/SyntaxHighlighter"; +import { Button } from "@/components/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; export const metadata: Metadata = { - title: "Installation | Eframix", - description: "Learn how to install and set up Eframix in your project.", -} + title: "Installation | Eframix", + description: "Learn how to install and set up Eframix in your project.", +}; export default function Installation() { - return ( -
-
-
-

- Installation -

-

- Learn how to install and set up Eframix in your project. -

-
-
-
- - - Quick Start - Get up and running with Eframix in minutes. - - - - - npm - Yarn - - - - - - - - - - -
- - -
+ return ( +
+
+
+

+ Installation +

+

+ Learn how to install and set up Eframix in your project. +

- ) -} \ No newline at end of file +
+
+ + + Quick Start + + Get up and running with Eframix in minutes. + + + + + + npm + Yarn + + + + + + + + + + +
+ + +
+
+ ); +} diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx index 72ec196..b5e9607 100644 --- a/app/docs/layout.tsx +++ b/app/docs/layout.tsx @@ -2,15 +2,14 @@ import { ReactNode, useState } from "react"; import Sidebar from "@/components/Sidebar"; -import { Button } from "@/components/ui/button"; -import { Menu } from "lucide-react"; +import { ChevronRight } from "lucide-react"; interface DocsLayoutProps { children: ReactNode; } export default function DocsLayout({ children }: DocsLayoutProps) { - const [isOpen, setIsOpen] = useState(true); + const [isOpen, setIsOpen] = useState(false); return (
-
- {/* Mobile toggle button */} - - {children} +
+
setIsOpen(true)} + className="md:hidden sticky top-0 z-50 p-4 backdrop-blur-md backdrop-brightness-50 flex items-center" + > + Menu +
+
{children}
diff --git a/app/docs/page.tsx b/app/docs/page.tsx index ebbf49c..b064003 100644 --- a/app/docs/page.tsx +++ b/app/docs/page.tsx @@ -1,21 +1,31 @@ -import { Button } from "@/components/ui/button" -import Link from "next/link" +import { Button } from "@/components/ui/button"; +import Link from "next/link"; export default function DocsHome() { - return ( -
-

Welcome to Eframix Documentation

-

- Eframix is a minimalistic Node.js framework inspired by Express.js, offering core routing, middleware, and JSON body parsing features with zero dependencies. -

-
- - -
-
- ) -} \ No newline at end of file + return ( +
+

+ Welcome to Eframix Documentation +

+

+ Eframix is a minimalistic Node.js framework inspired by Express.js, + offering core routing, middleware, and JSON body parsing features with + zero dependencies. +

+
+ + +
+
+ ); +} diff --git a/app/docs/routing/page.tsx b/app/docs/routing/page.tsx index a11c4f5..703c7d6 100644 --- a/app/docs/routing/page.tsx +++ b/app/docs/routing/page.tsx @@ -7,99 +7,109 @@ import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; export const metadata: Metadata = { - title: "Routing | Eframix", - description: "Learn how to define routes in your Eframix application.", + title: "Routing | Eframix", + description: "Learn how to define routes in your Eframix application.", }; export default function Routing() { - return ( -
-

- Routing -

-

- Learn how to define routes in your Eframix application. -

+ return ( +
+

+ Routing +

+

+ Learn how to define routes in your Eframix application. +

- - - Routing Overview - - -

- Eframix allows you to define routes for handling HTTP requests. Below are examples of how to handle different HTTP methods: -

+ + + Routing Overview + + +

+ Eframix allows you to define routes for handling HTTP requests. + Below are examples of how to handle different HTTP methods: +

- {/* GET Request */} -

GET Request

-

- The `GET` method is used to retrieve data from the server. Below is an example of how to define a `GET` route: -

- GET Request +

+ The `GET` method is used to retrieve data from the server. Below is + an example of how to define a `GET` route: +

+ { res.end('Home Page'); }); `.trim()} - /> -

- In this example, the root route ('/') responds with the text "Home Page". -

+ /> +

+ In this example, the root route ('/') responds with the + text "Home Page". +

-

GET Request - About Page

-

- You can also define additional `GET` routes like this: -

- + GET Request - About Page + +

+ You can also define additional `GET` routes like this: +

+ { res.end('About Page'); }); `.trim()} - /> -

- Here, the `/about` route will return "About Page" when accessed. -

+ /> +

+ Here, the `/about` route will return "About Page" when + accessed. +

- {/* POST Request */} -

POST Request

-

- The `POST` method is used to send data to the server. Below is an example of how to define a `POST` route: -

- POST Request +

+ The `POST` method is used to send data to the server. Below is an + example of how to define a `POST` route: +

+ { res.json({ message: 'Data received' }); }); `.trim()} - /> -

- In this example, when data is sent to the `/api/data` route, the server responds with a JSON object confirming receipt. -

- - + /> +

+ In this example, when data is sent to the `/api/data` route, the + server responds with a JSON object confirming receipt. +

+ + -

- These examples demonstrate how to define routes for different HTTP methods and paths. Feel free to explore and customize your routes based on your application needs. -

+

+ These examples demonstrate how to define routes for different HTTP + methods and paths. Feel free to explore and customize your routes based + on your application needs. +

-
- - -
-
- ); +
+ + +
+
+ ); } diff --git a/app/docs/write-middleware/page.tsx b/app/docs/write-middleware/page.tsx index ac57ab5..ecba656 100644 --- a/app/docs/write-middleware/page.tsx +++ b/app/docs/write-middleware/page.tsx @@ -7,51 +7,56 @@ import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; export const metadata: Metadata = { - title: "Writing Middleware | Eframix", - description: "Learn how to write custom middleware for your Eframix application.", + title: "Writing Middleware | Eframix", + description: + "Learn how to write custom middleware for your Eframix application.", }; export default function WriteMiddleware() { - return ( -
-

- Writing Middleware -

-

- Learn how to write custom middleware for your Eframix application. -

+ return ( +
+

+ Writing Middleware +

+

+ Learn how to write custom middleware for your Eframix application. +

- - - What is Middleware? - - -

- Middleware is a function that has access to the request, response, and the next middleware function in the application's request-response cycle. It can perform various tasks such as: -

-
    -
  • Executing code.
    • -
  • Modifying the request and response objects.
    • -
  • Ending the request-response cycle.
    • -
  • Calling the next middleware function in the stack.
    • -
-

- Middleware can be used for various purposes, including logging, authentication, error handling, and more. -

- - + + + What is Middleware? + + +

+ Middleware is a function that has access to the request, response, + and the next middleware function in the application's + request-response cycle. It can perform various tasks such as: +

+
    +
  • Executing code.
    • +
  • Modifying the request and response objects.
    • +
  • Ending the request-response cycle.
    • +
  • Calling the next middleware function in the stack.
    • +
+

+ Middleware can be used for various purposes, including logging, + authentication, error handling, and more. +

+ + - - - Custom Logging Middleware - - -

- Below is an example of a simple logging middleware that logs the request method and URL along with the timestamp. -

- + + Custom Logging Middleware + + +

+ Below is an example of a simple logging middleware that logs the + request method and URL along with the timestamp. +

+ { console.log('Server running on http://localhost:3000'); }); `.trim()} - /> -

- This middleware logs the method and URL of every incoming request to the console. -

- - + /> +

+ This middleware logs the method and URL of every incoming request to + the console. +

+ + -
- - -
-
- ); +
+ + +
+
+ ); } diff --git a/app/page.tsx b/app/page.tsx index 574a772..7e07ed8 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,9 +1,9 @@ -import { ArrowRight, Github } from "lucide-react" -import Link from "next/link" +import { ArrowRight, Github } from "lucide-react"; +import Link from "next/link"; -import CopyCommand from "@/components/CommandCopy" -import { Button } from "@/components/ui/button" -import { Card, CardContent } from "@/components/ui/card" +import CopyCommand from "@/components/CommandCopy"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; export default function Home() { return ( @@ -15,8 +15,8 @@ export default function Home() { Eframix

- A minimalistic Node.js framework inspired by Express.js, offering core - routing, middleware, and JSON body parsing features with zero + A minimalistic Node.js framework inspired by Express.js, offering + core routing, middleware, and JSON body parsing features with zero dependencies. Ideal for lightweight HTTP server applications.

@@ -29,7 +29,11 @@ export default function Home() {