From edc0f27e0f32e6f0838327775408ca3577da65d8 Mon Sep 17 00:00:00 2001 From: Lalit Sudhir Date: Mon, 20 Oct 2025 12:31:04 -0700 Subject: [PATCH 1/6] Adding Docker image for Simple mode --- .github/workflows/build-and-publish.yml | 24 +++++++++++++++++++----- docker-compose.yml | 6 +++--- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/.github/workflows/build-and-publish.yml b/.github/workflows/build-and-publish.yml index 5f4c975..26954ef 100644 --- a/.github/workflows/build-and-publish.yml +++ b/.github/workflows/build-and-publish.yml @@ -1,4 +1,4 @@ -name: build docker image and push to dockerhub +name: Build and Push Docker Images (Default + Simple Mode) on: push: @@ -6,6 +6,7 @@ on: - 'main' tags: - 'v*' + workflow_dispatch: jobs: docker-build-and-push: @@ -13,6 +14,15 @@ jobs: permissions: contents: write packages: write + strategy: + matrix: + mode: + - name: default + simple_mode: false + suffix: "" + - name: simple + simple_mode: true + suffix: "-simple" steps: - name: Set up QEMU uses: docker/setup-qemu-action@v3 @@ -35,12 +45,16 @@ jobs: echo "version_without_v=latest" >> $GITHUB_OUTPUT fi - - name: Build and push + - name: Build and push ${{ matrix.mode.name }} image uses: docker/build-push-action@v6 with: push: true + build-args: | + SIMPLE_MODE=${{ matrix.mode.simple_mode }} tags: | - bentopdf/bentopdf:latest - bentopdf/bentopdf:${{ steps.version.outputs.version_without_v }} - bentopdf/bentopdf:${{ steps.version.outputs.version }} + altruisticisopod/bentopdf${{ matrix.mode.suffix }}:latest + altruisticisopod/bentopdf${{ matrix.mode.suffix }}:${{ steps.version.outputs.version_without_v }} + altruisticisopod/bentopdf${{ matrix.mode.suffix }}:${{ steps.version.outputs.version }} platforms: linux/amd64,linux/arm64 + cache-from: type=gha + cache-to: type=gha,mode=max diff --git a/docker-compose.yml b/docker-compose.yml index 2c9d236..bb6c88f 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,9 +1,9 @@ services: bentopdf: + # default mode + # simple mode - bentopdf-simple:latest image: bentopdf/bentopdf:latest container_name: bentopdf restart: unless-stopped ports: - - '3000:80' - environment: - - SIMPLE_MODE=${SIMPLE_MODE:-false} + - '3000:80' \ No newline at end of file From 4e2d04fb9c55767627db32a2d93c1743fc58a725 Mon Sep 17 00:00:00 2001 From: Lalit Sudhir Date: Mon, 20 Oct 2025 13:01:52 -0700 Subject: [PATCH 2/6] optimize Simple Mode with true dead code elimination --- src/js/main.ts | 140 ++++++++++++++++++++++++------------------------- 1 file changed, 70 insertions(+), 70 deletions(-) diff --git a/src/js/main.ts b/src/js/main.ts index 1eacb7f..47152f5 100644 --- a/src/js/main.ts +++ b/src/js/main.ts @@ -5,76 +5,6 @@ import { createIcons, icons } from 'lucide'; import * as pdfjsLib from 'pdfjs-dist'; import '../css/styles.css'; -const hideBrandingSections = () => { - const nav = document.querySelector('nav'); - if (nav) { - nav.style.display = 'none'; - } - - const heroSection = document.getElementById('hero-section'); - if (heroSection) { - heroSection.style.display = 'none'; - } - - const featuresSection = document.getElementById('features-section'); - if (featuresSection) { - featuresSection.style.display = 'none'; - } - - const securitySection = document.getElementById( - 'security-compliance-section' - ); - if (securitySection) { - securitySection.style.display = 'none'; - } - - const faqSection = document.getElementById('faq-accordion'); - if (faqSection) { - faqSection.style.display = 'none'; - } - - const testimonialsSection = document.getElementById('testimonials-section'); - if (testimonialsSection) { - testimonialsSection.style.display = 'none'; - } - - const supportSection = document.getElementById('support-section'); - if (supportSection) { - supportSection.style.display = 'none'; - } - - const footer = document.querySelector('footer'); - if (footer) { - footer.style.display = 'none'; - } - - const sectionDividers = document.querySelectorAll('.section-divider'); - sectionDividers.forEach((divider) => { - (divider as HTMLElement).style.display = 'none'; - }); - - document.title = 'PDF Tools'; - - const toolsHeader = document.getElementById('tools-header'); - if (toolsHeader) { - const title = toolsHeader.querySelector('h2'); - const subtitle = toolsHeader.querySelector('p'); - if (title) { - title.textContent = 'PDF Tools'; - title.className = 'text-4xl md:text-5xl font-bold text-white mb-3'; - } - if (subtitle) { - subtitle.textContent = 'Select a tool to get started'; - subtitle.className = 'text-lg text-gray-400'; - } - } - - const app = document.getElementById('app'); - if (app) { - app.style.paddingTop = '2rem'; - } -}; - const init = () => { pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( 'pdfjs-dist/build/pdf.worker.min.mjs', @@ -83,6 +13,76 @@ const init = () => { // Handle simple mode - hide branding sections if (__SIMPLE_MODE__) { + const hideBrandingSections = () => { + const nav = document.querySelector('nav'); + if (nav) { + nav.style.display = 'none'; + } + + const heroSection = document.getElementById('hero-section'); + if (heroSection) { + heroSection.style.display = 'none'; + } + + const featuresSection = document.getElementById('features-section'); + if (featuresSection) { + featuresSection.style.display = 'none'; + } + + const securitySection = document.getElementById( + 'security-compliance-section' + ); + if (securitySection) { + securitySection.style.display = 'none'; + } + + const faqSection = document.getElementById('faq-accordion'); + if (faqSection) { + faqSection.style.display = 'none'; + } + + const testimonialsSection = document.getElementById('testimonials-section'); + if (testimonialsSection) { + testimonialsSection.style.display = 'none'; + } + + const supportSection = document.getElementById('support-section'); + if (supportSection) { + supportSection.style.display = 'none'; + } + + const footer = document.querySelector('footer'); + if (footer) { + footer.style.display = 'none'; + } + + const sectionDividers = document.querySelectorAll('.section-divider'); + sectionDividers.forEach((divider) => { + (divider as HTMLElement).style.display = 'none'; + }); + + document.title = 'PDF Tools'; + + const toolsHeader = document.getElementById('tools-header'); + if (toolsHeader) { + const title = toolsHeader.querySelector('h2'); + const subtitle = toolsHeader.querySelector('p'); + if (title) { + title.textContent = 'PDF Tools'; + title.className = 'text-4xl md:text-5xl font-bold text-white mb-3'; + } + if (subtitle) { + subtitle.textContent = 'Select a tool to get started'; + subtitle.className = 'text-lg text-gray-400'; + } + } + + const app = document.getElementById('app'); + if (app) { + app.style.paddingTop = '2rem'; + } + }; + hideBrandingSections(); } From a8df98f20dc905cf8c0a4c559105ee6b29674780 Mon Sep 17 00:00:00 2001 From: Lalit Sudhir Date: Mon, 20 Oct 2025 17:53:09 -0700 Subject: [PATCH 3/6] add Simple Mode for internal organizational use --- .github/workflows/build-and-publish.yml | 6 +++--- SIMPLE_MODE.md | 2 +- docker-compose.yml | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/build-and-publish.yml b/.github/workflows/build-and-publish.yml index 26954ef..cdfc700 100644 --- a/.github/workflows/build-and-publish.yml +++ b/.github/workflows/build-and-publish.yml @@ -52,9 +52,9 @@ jobs: build-args: | SIMPLE_MODE=${{ matrix.mode.simple_mode }} tags: | - altruisticisopod/bentopdf${{ matrix.mode.suffix }}:latest - altruisticisopod/bentopdf${{ matrix.mode.suffix }}:${{ steps.version.outputs.version_without_v }} - altruisticisopod/bentopdf${{ matrix.mode.suffix }}:${{ steps.version.outputs.version }} + bentopdf/bentopdf${{ matrix.mode.suffix }}:latest + bentopdf/bentopdf${{ matrix.mode.suffix }}:${{ steps.version.outputs.version_without_v }} + bentopdf/bentopdf${{ matrix.mode.suffix }}:${{ steps.version.outputs.version }} platforms: linux/amd64,linux/arm64 cache-from: type=gha cache-to: type=gha,mode=max diff --git a/SIMPLE_MODE.md b/SIMPLE_MODE.md index b41d41e..67245ad 100644 --- a/SIMPLE_MODE.md +++ b/SIMPLE_MODE.md @@ -81,7 +81,7 @@ When Simple Mode is working correctly, you should see: ```yaml services: bentopdf: - image: bentopdf/bentopdf:latest + image: bentopdf/bentopdf-simple:latest container_name: bentopdf restart: unless-stopped ports: diff --git a/docker-compose.yml b/docker-compose.yml index bb6c88f..61b66f0 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -2,7 +2,7 @@ services: bentopdf: # default mode # simple mode - bentopdf-simple:latest - image: bentopdf/bentopdf:latest + image: bentopdf/bentopdf-simple:latest container_name: bentopdf restart: unless-stopped ports: From 835c3c9423ce64acda148955f1591858db7b3071 Mon Sep 17 00:00:00 2001 From: Lalit Sudhir Date: Mon, 20 Oct 2025 18:11:24 -0700 Subject: [PATCH 4/6] update docker-compose.yml to use Normal Mode by default --- docker-compose.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 61b66f0..3906b17 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,7 +1,7 @@ services: bentopdf: - # default mode - # simple mode - bentopdf-simple:latest + # simple mode - bentopdf/bentopdf-simple:latest + # default mode - bentopdf/bentopdf:latest image: bentopdf/bentopdf-simple:latest container_name: bentopdf restart: unless-stopped From 9af9c33f7407cf69892b52b15670ec71ccaa12e7 Mon Sep 17 00:00:00 2001 From: Lalit Sudhir Date: Mon, 20 Oct 2025 18:19:29 -0700 Subject: [PATCH 5/6] updated SIMPLE_MODE.md --- SIMPLE_MODE.md | 87 ++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 74 insertions(+), 13 deletions(-) diff --git a/SIMPLE_MODE.md b/SIMPLE_MODE.md index 67245ad..2be1eb6 100644 --- a/SIMPLE_MODE.md +++ b/SIMPLE_MODE.md @@ -19,40 +19,67 @@ When enabled, Simple Mode will: ## How to Enable Simple Mode -### Using Docker Compose +### Method 1: Using Pre-built Simple Mode Image (Recommended) -1. Create a `.env` file in your project root: +Use the pre-built Simple Mode image directly: ```bash -SIMPLE_MODE=true +docker run -p 3000:80 bentopdf/bentopdf-simple:latest ``` -2. Run with docker-compose: +Or with Docker Compose: + +```yaml +services: + bentopdf: + image: bentopdf/bentopdf-simple:latest + container_name: bentopdf + restart: unless-stopped + ports: + - '3000:80' +``` + +### Method 2: Using Docker Compose with Build + +Build the image locally with Simple Mode enabled: ```bash -docker-compose up -d +docker compose -f docker-compose.dev.yml build --build-arg SIMPLE_MODE=true +docker compose -f docker-compose.dev.yml up -d ``` -### Using Docker Build +### Method 3: Using Docker Build -Build the image with the SIMPLE_MODE environment variable: +Build the image with the SIMPLE_MODE build argument: ```bash docker build --build-arg SIMPLE_MODE=true -t bentopdf-simple . +docker run -p 3000:80 bentopdf-simple ``` -### Using Environment Variables +### Method 4: Using Environment Variables Set the environment variable before building: ```bash export SIMPLE_MODE=true npm run build +npx serve dist -p 3000 ``` ## ๐Ÿงช Testing Simple Mode Locally -After building with Simple Mode enabled, you need to serve the built files locally. +### Method 1: Using Pre-built Image (Easiest) + +```bash +# Pull and run the Simple Mode image +docker pull bentopdf/bentopdf-simple:latest +docker run -p 3000:80 bentopdf/bentopdf-simple:latest +``` + +Open `http://localhost:3000` in your browser. + +### Method 2: Build and Test Locally ```bash # Build with simple mode @@ -62,7 +89,20 @@ SIMPLE_MODE=true npm run build npx serve dist -p 3000 ``` -Then open `http://localhost:3000` in your browser. +Open `http://localhost:3000` in your browser. + +### Method 3: Compare Both Modes + +```bash +# Test Normal Mode +docker run -p 3000:80 bentopdf/bentopdf:latest + +# Test Simple Mode +docker run -p 3001:80 bentopdf/bentopdf-simple:latest +``` + +- Normal Mode: `http://localhost:3000` +- Simple Mode: `http://localhost:3001` ## ๐Ÿ” What to Look For @@ -76,8 +116,19 @@ When Simple Mode is working correctly, you should see: - โŒ No hero section with "The PDF Toolkit built for privacy" - โŒ No features, FAQ, testimonials, or footer sections -## Example Docker Compose Configuration +## ๐Ÿ“ฆ Available Docker Images +### Normal Mode (Full Branding) +- `bentopdf/bentopdf:latest` +- `bentopdf/bentopdf:v1.0.0` (versioned) + +### Simple Mode (Clean Interface) +- `bentopdf/bentopdf-simple:latest` +- `bentopdf/bentopdf-simple:v1.0.0` (versioned) + +## ๐Ÿš€ Production Deployment Examples + +### Internal Company Tool ```yaml services: bentopdf: @@ -85,7 +136,17 @@ services: container_name: bentopdf restart: unless-stopped ports: - - '3000:80' + - "80:80" environment: - - SIMPLE_MODE=true + - PUID=1000 + - PGID=1000 ``` + + + +## โš ๏ธ Important Notes + +- **Pre-built images**: Use `bentopdf/bentopdf-simple:latest` for Simple Mode +- **Environment variables**: `SIMPLE_MODE=true` only works during build, not runtime +- **Build-time optimization**: Simple Mode uses dead code elimination for smaller bundles +- **Same functionality**: All PDF tools work identically in both modes From 11c24c1ff12f69df48269c467f7d948a24be085c Mon Sep 17 00:00:00 2001 From: Lalit Sudhir Date: Tue, 21 Oct 2025 00:03:23 -0700 Subject: [PATCH 6/6] enhance Simple Mode with logo branding and npm script to serve SIMPLE_MODE --- SIMPLE_MODE.md | 29 +++++++++++++++++++++++++---- package.json | 3 ++- src/js/main.ts | 39 ++++++++++++++++++++++++++++++++++++--- 3 files changed, 63 insertions(+), 8 deletions(-) diff --git a/SIMPLE_MODE.md b/SIMPLE_MODE.md index 2be1eb6..5a9873e 100644 --- a/SIMPLE_MODE.md +++ b/SIMPLE_MODE.md @@ -57,7 +57,20 @@ docker build --build-arg SIMPLE_MODE=true -t bentopdf-simple . docker run -p 3000:80 bentopdf-simple ``` -### Method 4: Using Environment Variables +### Method 4: Using npm Script (Easiest for Local Development) + +Use the built-in npm script that handles everything: + +```bash +npm run serve:simple +``` + +This command automatically: +- Sets `SIMPLE_MODE=true` +- Builds the project with Simple Mode enabled +- Serves the built files on `http://localhost:3000` + +### Method 5: Using Environment Variables Set the environment variable before building: @@ -69,7 +82,15 @@ npx serve dist -p 3000 ## ๐Ÿงช Testing Simple Mode Locally -### Method 1: Using Pre-built Image (Easiest) +### Method 1: Using npm Script (Easiest for Development) + +```bash +npm run serve:simple +``` + +This automatically builds and serves Simple Mode on `http://localhost:3000`. + +### Method 2: Using Pre-built Image (Easiest for Production) ```bash # Pull and run the Simple Mode image @@ -79,7 +100,7 @@ docker run -p 3000:80 bentopdf/bentopdf-simple:latest Open `http://localhost:3000` in your browser. -### Method 2: Build and Test Locally +### Method 3: Build and Test Locally ```bash # Build with simple mode @@ -91,7 +112,7 @@ npx serve dist -p 3000 Open `http://localhost:3000` in your browser. -### Method 3: Compare Both Modes +### Method 4: Compare Both Modes ```bash # Test Normal Mode diff --git a/package.json b/package.json index 762b0d0..48782ad 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "format": "prettier --write .", "release": "node scripts/release.js patch", "release:minor": "node scripts/release.js minor", - "release:major": "node scripts/release.js major" + "release:major": "node scripts/release.js major", + "serve:simple": "SIMPLE_MODE=true npm run build && npx serve dist -p 3000" }, "devDependencies": { "@testing-library/dom": "^10.4.1", diff --git a/src/js/main.ts b/src/js/main.ts index 47152f5..dc529e8 100644 --- a/src/js/main.ts +++ b/src/js/main.ts @@ -11,12 +11,29 @@ const init = () => { import.meta.url ).toString(); - // Handle simple mode - hide branding sections + // Handle simple mode - hide branding sections but keep logo and copyright if (__SIMPLE_MODE__) { const hideBrandingSections = () => { + // Hide navigation but keep logo const nav = document.querySelector('nav'); if (nav) { + // Hide the entire nav but we'll create a minimal one with just logo nav.style.display = 'none'; + + // Create a simple nav with just logo on the right + const simpleNav = document.createElement('nav'); + simpleNav.className = 'bg-gray-800 border-b border-gray-700 sticky top-0 z-30'; + simpleNav.innerHTML = ` +
+
+
+ Bento PDF Logo + BentoPDF +
+
+
+ `; + document.body.insertBefore(simpleNav, document.body.firstChild); } const heroSection = document.getElementById('hero-section'); @@ -51,9 +68,25 @@ const init = () => { supportSection.style.display = 'none'; } + // Hide footer but keep copyright const footer = document.querySelector('footer'); if (footer) { footer.style.display = 'none'; + + const simpleFooter = document.createElement('footer'); + simpleFooter.className = 'mt-16 border-t-2 border-gray-700 py-8'; + simpleFooter.innerHTML = ` +
+
+ Bento PDF Logo + BentoPDF +
+

+ © 2025 BentoPDF. All rights reserved. +

+
+ `; + document.body.appendChild(simpleFooter); } const sectionDividers = document.querySelectorAll('.section-divider'); @@ -61,7 +94,7 @@ const init = () => { (divider as HTMLElement).style.display = 'none'; }); - document.title = 'PDF Tools'; + document.title = 'BentoPDF - PDF Tools'; const toolsHeader = document.getElementById('tools-header'); if (toolsHeader) { @@ -79,7 +112,7 @@ const init = () => { const app = document.getElementById('app'); if (app) { - app.style.paddingTop = '2rem'; + app.style.paddingTop = '1rem'; } };