PanicMode

PanicMode is a lightweight package designed to simplify the creation of static sites. It provides easy integration of Tailwind CSS and DaisyUI components without the complexity of heavier frameworks like React. Ideal for small projects and rapid prototyping, PanicMode offers a developer-friendly solution for those who want to focus on building rather than configuring.

Useful Links

• npm - panicmode
• GitHub - panicmode
• GitHub - Documentation (Coming Soon)
• Live Demo

Features

• Easy integration with Tailwind CSS and DaisyUI
• Lightweight and fast
• Simple routing system
• Ready-to-use UI components
• Perfect for quick prototyping and small projects

Installation

npm install panicmode
# or
pnpm add panicmode

Quick Start

Here's a basic example of how to use PanicMode in your main.ts:

import "panicmode/dist/panicmode.css";
import { PanicRouter } from "panicmode";
import { PanicHeader } from "panicmode";

const rootElement = document.getElementById("app");
if (!rootElement) throw new Error("Root element not found");

const header = new PanicHeader("<a href='/'>panicMode</a>");
const router = new PanicRouter(rootElement, header);

rootElement.appendChild(header.render());

const contentElement = document.createElement("div");
contentElement.id = "content";
rootElement.appendChild(contentElement);

router.addRoute(
  "/",
  () => {
    const panicJumbo = new PanicJumbo(
      "Welcome to panicMode",
      "h2",
      "p",
      "This is a panic jumbo",
      "Learn More",
      "a",
      "primary",
      "About PanicMode",
      "/about"
    );

    const panicCard = new PanicCard(
      "Panic Card",
      "This is a panic card",
      "/vite.svg",
      "PanicMode logo",
      "View Details",
      "/contact",
      "primary"
    );
    contentElement.innerHTML = "";
    contentElement.appendChild(panicJumbo.render());
    contentElement.appendChild(panicCard.render());
  },
  "Home"
);

router.addRoute(
  "/about",
  () => {
    contentElement.innerHTML =
      "<h1>About PanicMode</h1><p>PanicMode is a UI component library for quick prototyping.</p>";
  },
  "About"
);

router.addRoute(
  "/contact",
  () => {
    contentElement.innerHTML =
      "<h1>Contact Us</h1><p>Get in touch with the PanicMode team.</p>";
  },
  "Contact"
);

router.render();

Install the repo

cd panicmode
npm i
npm run dev

Contribute

Contributions are welcome! If you have any ideas, suggestions, or find any bugs, feel free to:

1. Fork the repository
2. Create a new branch (git checkout -b feature-branch-name)
3. Make your changes
4. Commit your changes (git commit -m 'Add some feature')
5. Push to the branch (git push origin feature-branch-name)
6. Open a pull request

Please make sure your code follows the project's coding style and is properly documented.

If you're not familiar with contributing on GitHub, this guide can help you get started. Thanks for helping to improve PanicMode!