refactor: NPM project structure with GitHub Pages deployment

Author: Luckycat133

.github/workflows/deploy.yml

@@ -0,0 +1,50 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,24 +1,33 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+build/
+
+# Environment variables
+.env
+.env.local
+.env.production
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
 # Logs
-logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
 
-node_modules
-dist
-dist-ssr
-*.local
+# Testing
+coverage/
+.nyc_output/
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# Temporary
+.tmp/
+.temp/

README.md

@@ -15,27 +15,79 @@ PDF Toolkit Pro provides a range of tools to manage your PDF documents directly
 -   **PDF to JPG**: Convert selected pages of your PDF into high-quality JPG images.
 -   **PDF to Text**: Extract all text content from a PDF document for easy copying and editing.
 
-## 🚀 Getting Started
+## 🚀 Quick Start
 
-This is a client-side application and requires no backend. To run it locally, you can serve the project directory with any static file server.
+### Install Dependencies
 
-1.  **Download the project files.**
-2.  **Serve the files.** A simple way is to use a VS Code extension like "Live Server" or a simple command-line server:
-    ```bash
-    # If you have Python 3
-    python -m http.server
+```bash
+npm install
+```
 
-    # If you have Node.js and the 'serve' package installed
-    # npm install -g serve
-    # serve .
-    ```
-3.  **Open your browser** and navigate to the local server address (e.g., `http://localhost:8000`).
+### Development
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+### Build for Production
+
+```bash
+npm run build
+```
+
+Preview the production build:
+
+```bash
+npm run preview
+```
 
 ## 🛠️ Built With
 
 -   [React](https://reactjs.org/) - A JavaScript library for building user interfaces.
 -   [TypeScript](https://www.typescriptlang.org/) - A typed superset of JavaScript that compiles to plain JavaScript.
+-   [Vite](https://vitejs.dev/) - Next generation frontend tooling.
 -   [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework for rapid UI development.
 -   [pdf-lib](https://pdf-lib.js.org/) - A JavaScript library for creating and modifying PDF documents.
 -   [pdf.js](https://mozilla.github.io/pdf.js/) - A Portable Document Format (PDF) viewer that is built with HTML5.
 -   [JSZip](https://stuk.github.io/jszip/) - A JavaScript library for creating, reading and editing .zip files.
+
+## 📁 Project Structure
+
+```
+src/
+├── App.tsx              # Main application component
+├── main.tsx             # Application entry point
+├── components/          # React components
+│   ├── Splitter.tsx     # PDF splitting tool
+│   ├── Merger.tsx       # PDF merging tool
+│   ├── Compressor.tsx   # PDF compression tool
+│   ├── Rotator.tsx      # PDF rotation tool
+│   ├── PdfToJpg.tsx    # PDF to JPG conversion
+│   ├── PdfToText.tsx   # PDF to text extraction
+│   └── ...
+├── services/
+│   └── pdfUtils.ts     # PDF processing utilities
+└── hooks/
+    └── usePdfHandler.ts # PDF handling React hook
+```
+
+## 🌐 Deployment
+
+This project is configured for automatic deployment via GitHub Actions to GitHub Pages.
+
+### GitHub Pages Deployment
+
+1. Push this project to a GitHub repository.
+2. Go to repository **Settings** → **Pages**.
+3. Under **Source**, select **GitHub Actions**.
+4. Push to `main` branch - deployment starts automatically.
+
+Or trigger manually from **Actions** tab → **Deploy to GitHub Pages** → **Run workflow**.
+
+The live site will be available at: `https://[username].github.io/[repo-name]/`
+
+## 📝 License
+
+MIT License

eslint.config.js

@@ -0,0 +1,36 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+
+export default tseslint.config(
+  { ignores: ['dist', 'node_modules'] },
+  {
+    extends: [js.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    },
+  },
+);

index.html

@@ -1,24 +1,14 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PDF Toolkit Pro</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
-    <script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
-    <script src="https://unpkg.com/downloadjs@1.4.7/download.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
-    <script>
-      pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
-    </script>
     <style>
       body {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       }
-      @import url('https://rsms.me/inter/inter.css');
 
       @keyframes shake {
         10%, 90% { transform: translate3d(-1px, 0, 0); }
@@ -46,18 +36,9 @@
           animation: fade-in 0.5s ease-out forwards;
       }
     </style>
-  <script type="importmap">
-{
-  "imports": {
-    "react/": "https://aistudiocdn.com/react@^19.2.0/",
-    "react": "https://aistudiocdn.com/react@^19.2.0",
-    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/"
-  }
-}
-</script>
-</head>
+  </head>
   <body class="bg-slate-50 text-slate-800">
     <div id="root"></div>
-    <script type="module" src="/index.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>

package.json

@@ -1,10 +1,43 @@
 {
   "name": "pdf-toolkit-pro",
   "version": "1.0.0",
-  "description": "A powerful and beautiful web application to split, merge, and edit PDF files with ease. Upload your files to get started with a suite of useful PDF tools.",
+  "description": "A powerful and beautiful web application to split, merge, and edit PDF files with ease.",
+  "type": "module",
   "private": true,
   "scripts": {
-    "start": "echo \"Serve the project root folder with a static file server.\" && exit 1"
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "pdf-lib": "^1.17.1",
+    "pdfjs-dist": "^4.9.155",
+    "jszip": "^3.10.1",
+    "downloadjs": "^1.4.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/downloadjs": "^1.4.3",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.1",
+    "vitest": "^2.1.8"
   },
   "keywords": [
     "pdf",

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/App.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import Header from './components/Header';
+import Splitter from './components/Splitter';
+import Merger from './components/Merger';
+import Compressor from './components/Compressor';
+import Rotator from './components/Rotator';
+import PdfToJpg from './components/PdfToJpg';
+import PdfToText from './components/PdfToText';
+
+type Tool = 'split' | 'merge' | 'compress' | 'rotate' | 'pdf-to-jpg' | 'pdf-to-text';
+
+const App: React.FC = () => {
+  const [activeTool, setActiveTool] = useState<Tool>('split');
+
+  const renderTool = () => {
+    switch (activeTool) {
+      case 'split':
+        return <Splitter />;
+      case 'merge':
+        return <Merger />;
+      case 'compress':
+        return <Compressor />;
+      case 'rotate':
+        return <Rotator />;
+      case 'pdf-to-jpg':
+        return <PdfToJpg />;
+      case 'pdf-to-text':
+        return <PdfToText />;
+      default:
+        return <Splitter />;
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-50 flex flex-col items-center">
+      <main className="container mx-auto p-4 md:p-8 w-full max-w-6xl">
+        <div className="text-center mb-8">
+            <h1 className="text-4xl md:text-5xl font-extrabold text-slate-800">
+                PDF Toolkit <span className="text-blue-600">Pro</span>
+            </h1>
+            <p className="mt-4 text-lg text-slate-500">
+                Your one-stop solution for splitting, merging, and editing PDF documents effortlessly.
+            </p>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-2xl shadow-slate-200 ring-1 ring-slate-100 p-2">
+            <Header activeTool={activeTool} setActiveTool={setActiveTool} />
+            <div className="p-4 sm:p-8">
+                {renderTool()}
+            </div>
+        </div>
+
+        <footer className="text-center mt-12 text-slate-400 text-sm">
+            <p>&copy; {new Date().getFullYear()} PDF Toolkit Pro. All Rights Reserved.</p>
+        </footer>
+      </main>
+    </div>
+  );
+};
+
+export default App;