📚 DocuStax

Your Modern Static Document Management System

A powerful, SEO-friendly platform for hosting and managing OCR'd PDF documents with HTML versions, featuring full-text search, filtering, and beautiful dark mode support.

Features • Demo • Installation • Usage • Documentation • Contributing

---

Demo

https://847c818f.docustax.pages.dev/

✨ Features

DocuStax is designed to be a production-ready static document library that combines the power of modern web technologies with simplicity and performance:

• 📄 Document Management - Host and organize OCR'd PDF documents with clean HTML versions
• 🔍 Full-Text Search - Powerful search functionality to find documents instantly
• 🏷️ Smart Filtering - Filter documents by categories, tags, authors, and dates
• 🎨 Modern UI/UX - Beautiful, responsive design with dark mode support
• 📱 Mobile-First - Fully responsive layout that works on all devices
• 🚀 SEO Optimized - Built-in sitemap generation and meta tags for better discoverability
• ⚡ Lightning Fast - Static site architecture for instant page loads
• 🎯 Easy Navigation - Intuitive browsing through categories and tags
• 📊 Document Metadata - Rich metadata support (author, date, description, tags)
• 🌐 Static Deployment - Deploy anywhere - Cloudflare Pages, Netlify, Vercel, GitHub Pages

🎯 Use Cases

DocuStax is perfect for:

• 📚 Corporate document libraries
• 📖 Knowledge base portals
• 🏛️ Government document archives
• 📋 Policy and procedure documentation
• 🎓 Educational resource centers
• 📑 API documentation hosting
• 📝 Legal document repositories

🛠️ Technology Stack

• Framework: Angular 20 - Modern, powerful frontend framework
• Language: TypeScript 5.8 - Type-safe JavaScript
• Styling: TailwindCSS - Utility-first CSS framework
• Build Tool: Angular CLI - Official Angular build system
• Routing: Angular Router with lazy loading support

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher) - Download
• npm (comes with Node.js) or yarn

🚀 Installation

Get DocuStax up and running in minutes:

1. Clone the repository

   git clone https://github.com/ariedotcodotnz/DocuStax.git
   cd DocuStax

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser

   Navigate to http://localhost:4200 to see your document library in action!

📖 Usage

Running the Application

# Development mode with hot reload
npm run dev

# Production build
npm run build

# Preview production build
npm run preview

Adding Documents

Documents are stored in the documents/ directory. Each document has its own folder with:

1. metadata.json - Document metadata (title, description, author, date, tags, category, people)
2. document.html - The HTML version of your document
3. document.pdf - (Optional) The original PDF file
4. thumbnail.png - (Auto-generated) Preview thumbnail

Example metadata.json:

{
  "title": "Privacy Policy Update 2024",
  "description": "An updated version of our company privacy policy",
  "author": "Legal Department",
  "date": "2024-01-01",
  "tags": ["legal", "policy", "privacy"],
  "category": "Legal Documents",
  "people": [
    { "firstname": "Jane", "lastname": "Doe" },
    { "firstname": "John", "lastname": "Smith" }
  ]
}

That's it! The manifest.json file is automatically generated during build or dev runs by scanning the documents directory. Simply create a new folder with a metadata.json file, and it will be automatically detected.

Configuration

Customize DocuStax by modifying:

• metadata.json (root) - Application name and description
• tailwind.config.js - Theme colors and styling
• angular.json - Build and deployment settings

📁 Project Structure

DocuStax/
├── documents/              # Document storage
│   ├── manifest.json      # Auto-generated list of all documents
│   └── [document-slug]/   # Individual document folders
│       ├── metadata.json  # Document metadata (required)
│       ├── document.html  # Document content (required)
│       ├── document.pdf   # Original PDF (optional)
│       └── thumbnail.png  # Auto-generated preview
├── src/
│   ├── components/        # Reusable Angular components
│   ├── services/          # Business logic and data services
│   ├── models/            # TypeScript interfaces and types
│   └── app.component.*    # Main application component
├── scripts/               # Build-time automation scripts
│   ├── generate-manifest.mjs    # Auto-generate document list
│   ├── generate-thumbnails.mjs  # Generate PDF thumbnails
│   └── generate-sitemap.mjs     # Generate SEO sitemap
├── angular.json           # Angular CLI configuration
├── tailwind.config.js     # TailwindCSS configuration
└── package.json           # Project dependencies

🌐 Deployment

DocuStax can be deployed to any static hosting platform:

Cloudflare Pages

npm run build
# Upload dist/cloudflare to Cloudflare Pages

Netlify / Vercel / GitHub Pages

npm run build
# Deploy the dist/ directory

The build output is optimized for static hosting with:

• Minified assets
• Tree-shaken bundles
• Pre-rendered routes (where applicable)
• Optimized images

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please ensure your PR:

• Follows the existing code style
• Includes appropriate tests (if applicable)
• Updates documentation as needed

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with ❤️ using Angular and TailwindCSS
• Icons and design inspiration from modern document management systems
• Community feedback and contributions

📞 Support

Having issues? Found a bug? Have a feature request?

• Open an issue
• Start a discussion
• Check existing documentation

---

⬆ back to top

Made with ❤️ by the DocuStax team