gh-here 1.1.0 → 1.1.1

package/lib/file-utils.js

@@ -256,9 +256,53 @@ function formatBytes(bytes) {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 }
 
+/**
+ * File type detection functions
+ */
+function isImageFile(filePathOrExt) {
+  const ext = getExtension(filePathOrExt);
+  const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp', 'tiff', 'ico'];
+  return imageExtensions.includes(ext);
+}
+
+function isBinaryFile(filePathOrExt) {
+  const ext = getExtension(filePathOrExt);
+  const binaryExtensions = [
+    // Images (handled separately)
+    'png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp', 'tiff', 'ico',
+    // Archives
+    'zip', 'tar', 'gz', 'rar', '7z', 
+    // Executables
+    'exe', 'bin', 'app', 'deb', 'rpm',
+    // Documents
+    'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx',
+    // Media
+    'mp4', 'mov', 'avi', 'mkv', 'mp3', 'wav', 'flac',
+    // Other
+    'class', 'so', 'dll', 'dylib'
+  ];
+  return binaryExtensions.includes(ext);
+}
+
+function isTextFile(filePathOrExt) {
+  return !isBinaryFile(filePathOrExt);
+}
+
+function getExtension(filePathOrExt) {
+  // If it's already just an extension (no dots), return as-is
+  if (!filePathOrExt.includes('.') && !filePathOrExt.includes('/') && !filePathOrExt.includes('\\')) {
+    return filePathOrExt.toLowerCase();
+  }
+  // Extract extension from file path
+  return path.extname(filePathOrExt).toLowerCase().slice(1);
+}
+
 module.exports = {
   getFileIcon,
   getLanguageFromExtension,
   getLanguageColor,
-  formatBytes
+  formatBytes,
+  isImageFile,
+  isBinaryFile,
+  isTextFile
 };

package/lib/renderers.js

@@ -5,7 +5,7 @@ const marked = require('marked');
 const octicons = require('@primer/octicons');
 const { exec } = require('child_process');
 
-const { getFileIcon, getLanguageFromExtension, getLanguageColor, formatBytes } = require('./file-utils');
+const { getFileIcon, getLanguageFromExtension, getLanguageColor, formatBytes, isImageFile, isBinaryFile, isTextFile } = require('./file-utils');
 const { getGitStatusIcon, getGitStatusDescription } = require('./git');
 
 /**
@@ -369,6 +369,7 @@ function renderRawDiff(diffOutput, ext) {
   return `<div class="raw-diff-container">${linesHtml}</div>`;
 }
 
+
 async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStatus = null, workingDir) {
   const breadcrumbs = generateBreadcrumbs(filePath);
   let displayContent;
@@ -378,7 +379,49 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
   const absolutePath = path.resolve(path.join(workingDir, filePath));
   const hasGitChanges = gitStatus && gitStatus[absolutePath];
   
-  if (ext === 'md') {
+  // Determine file category and handle accordingly
+  if (isImageFile(ext)) {
+    // Handle image files
+    const imageUrl = `/download?path=${encodeURIComponent(filePath)}`;
+    displayContent = `
+      <div class="image-container">
+        <img src="${imageUrl}" alt="${path.basename(filePath)}" class="image-display">
+        <div class="image-info">
+          <span class="image-filename">${path.basename(filePath)}</span>
+        </div>
+      </div>
+    `;
+    
+    // Add diff view for images with git changes
+    if (hasGitChanges) {
+      const currentParams = new URLSearchParams({ path: filePath });
+      const diffUrl = `/?${currentParams.toString()}&view=diff`;
+      
+      viewToggle = `
+        <div class="view-toggle">
+          <a href="/?path=${encodeURIComponent(filePath)}" class="view-btn active">
+            ${octicons.eye.toSVG({ class: 'view-icon' })} View
+          </a>
+          <a href="${diffUrl}" class="view-btn">
+            ${octicons.diff.toSVG({ class: 'view-icon' })} Diff
+          </a>
+        </div>
+      `;
+    }
+  } else if (isBinaryFile(ext) && !isImageFile(ext)) {
+    // Handle other binary files - download only
+    displayContent = `
+      <div class="binary-file-container">
+        <div class="binary-file-info">
+          <h3>Binary File</h3>
+          <p>This is a binary file that cannot be displayed in the browser.</p>
+          <a href="/download?path=${encodeURIComponent(filePath)}" class="btn btn-primary" download="${path.basename(filePath)}">
+            ${octicons.download.toSVG({ class: 'download-icon' })} Download File
+          </a>
+        </div>
+      </div>
+    `;
+  } else if (ext === 'md') {
     if (viewMode === 'raw') {
       const highlighted = hljs.highlight(content, { language: 'markdown' }).value;
       
@@ -468,9 +511,11 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
             <div id="filename-input-container" class="filename-input-container" style="display: none;">
               <input type="text" id="filename-input" class="filename-input" placeholder="Name your file...">
             </div>
-            <button id="edit-btn" class="edit-btn" aria-label="Edit file">
-              ${octicons.pencil.toSVG({ class: 'edit-icon' })}
-            </button>
+            ${isTextFile(ext) ? `
+              <button id="edit-btn" class="edit-btn" aria-label="Edit file">
+                ${octicons.pencil.toSVG({ class: 'edit-icon' })}
+              </button>
+            ` : ''}
             ${viewToggle}
             <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
               ${octicons.moon.toSVG({ class: 'theme-icon' })}
@@ -484,6 +529,7 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
           <div class="file-content">
             ${displayContent}
           </div>
+        ${isTextFile(ext) ? `
         <div id="editor-container" class="editor-container" style="display: none;">
           <div class="editor-header">
             <div class="editor-title">Edit ${path.basename(filePath)}</div>
@@ -497,6 +543,7 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
             <div id="file-editor" class="monaco-editor"></div>
           </div>
         </div>
+        ` : ''}
         </div>
       </main>
     </body>

package/lib/server.js

@@ -5,6 +5,7 @@ const path = require('path');
 const { getGitStatus, getGitBranch, commitAllChanges, commitSelectedFiles, getGitDiff } = require('./git');
 const { isIgnoredByGitignore, getGitignoreRules } = require('./gitignore');
 const { renderDirectory, renderFileDiff, renderFile, renderNewFile } = require('./renderers');
+const { isImageFile, isBinaryFile } = require('./file-utils');
 
 /**
  * Express server setup and route handlers
@@ -16,6 +17,7 @@ function setupRoutes(app, workingDir, isGitRepo, gitRepoRoot) {
   app.use('/static', express.static(path.join(__dirname, '..', 'public')));
   app.use('/octicons', express.static(path.join(__dirname, '..', 'node_modules', '@primer', 'octicons', 'build')));
 
+
   // Download route
   app.get('/download', (req, res) => {
     const filePath = req.query.path || '';
@@ -25,8 +27,16 @@ function setupRoutes(app, workingDir, isGitRepo, gitRepoRoot) {
       const stats = fs.statSync(fullPath);
       if (stats.isFile()) {
         const fileName = path.basename(fullPath);
-        res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
-        res.sendFile(fullPath);
+        
+        // For images, serve inline for viewing, otherwise force download
+        if (isImageFile(fullPath)) {
+          // Serve image inline
+          res.sendFile(fullPath);
+        } else {
+          // Force download for non-images
+          res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
+          res.sendFile(fullPath);
+        }
       } else {
         res.status(400).send('Cannot download directories');
       }
@@ -84,10 +94,15 @@ function setupRoutes(app, workingDir, isGitRepo, gitRepoRoot) {
         
         res.send(renderDirectory(currentPath, items, showGitignored, gitBranch, gitStatus, workingDir));
       } else {
-        const content = fs.readFileSync(fullPath, 'utf8');
         const ext = path.extname(fullPath).slice(1);
         const viewMode = req.query.view || 'rendered';
         
+        // For image files, don't try to read as text
+        let content = '';
+        if (!isImageFile(fullPath)) {
+          content = fs.readFileSync(fullPath, 'utf8');
+        }
+        
         if (viewMode === 'diff' && isGitRepo) {
           // Check if file has git status
           const absolutePath = path.resolve(fullPath);
@@ -122,6 +137,11 @@ function setupRoutes(app, workingDir, isGitRepo, gitRepoRoot) {
         return res.status(403).send('Access denied');
       }
       
+      // Check if it's a binary file - prevent editing
+      if (isBinaryFile(fullPath)) {
+        return res.status(400).json({ error: 'Cannot edit binary files' });
+      }
+      
       const content = fs.readFileSync(fullPath, 'utf-8');
       res.send(content);
     } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gh-here",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A local GitHub-like file browser for viewing code",
   "repository": "https://github.com/corywilkerson/gh-here",
   "main": "index.js",

package/public/styles.css

@@ -722,6 +722,83 @@ main {
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
 }
 
+/* Image viewing styles */
+.image-container {
+  padding: 20px;
+  text-align: center;
+  background-color: var(--bg-primary);
+  border-radius: 6px;
+}
+
+.image-display {
+  max-width: 100%;
+  max-height: 80vh;
+  height: auto;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  background: var(--bg-secondary);
+}
+
+[data-theme="light"] .image-display {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.image-info {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-primary);
+}
+
+.image-filename {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* Binary file viewing styles */
+.binary-file-container {
+  padding: 40px 20px;
+  text-align: center;
+  background-color: var(--bg-primary);
+  border-radius: 6px;
+  border: 1px solid var(--border-primary);
+}
+
+.binary-file-info h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 12px;
+}
+
+.binary-file-info p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 20px;
+}
+
+.binary-file-info .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+.binary-file-info .btn-primary {
+  background-color: var(--link-color);
+  color: white;
+}
+
+.binary-file-info .btn-primary:hover {
+  opacity: 0.9;
+}
+
 /* Line numbers for code viewing */
 .with-line-numbers {
   counter-reset: line;

package/tests/fileTypeDetection.test.js

@@ -0,0 +1,111 @@
+// Simple unit tests for file type detection
+// Run with: node tests/fileTypeDetection.test.js
+
+// Import the functions from our file-utils module
+const { isImageFile, isBinaryFile, isTextFile } = require('../lib/file-utils');
+
+function test(description, testFn) {
+  try {
+    testFn();
+    console.log(`✅ ${description}`);
+  } catch (error) {
+    console.log(`❌ ${description}`);
+    console.log(`   Error: ${error.message}`);
+  }
+}
+
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message || 'Assertion failed');
+  }
+}
+
+// Test isImageFile function
+test('should detect PNG files as images', () => {
+  assert(isImageFile('photo.png'), 'PNG should be detected as image');
+  assert(isImageFile('PNG'), 'Extension-only PNG should work');
+});
+
+test('should detect common image formats', () => {
+  const imageFiles = ['test.jpg', 'test.jpeg', 'test.gif', 'test.svg', 'test.webp', 'test.bmp', 'test.tiff', 'test.ico'];
+  imageFiles.forEach(file => {
+    assert(isImageFile(file), `${file} should be detected as image`);
+  });
+});
+
+test('should not detect text files as images', () => {
+  const textFiles = ['readme.md', 'script.js', 'style.css', 'config.json'];
+  textFiles.forEach(file => {
+    assert(!isImageFile(file), `${file} should not be detected as image`);
+  });
+});
+
+// Test isBinaryFile function
+test('should detect images as binary files', () => {
+  assert(isBinaryFile('photo.png'), 'Images should be binary');
+  assert(isBinaryFile('animation.gif'), 'GIFs should be binary');
+});
+
+test('should detect archives as binary files', () => {
+  const archives = ['file.zip', 'backup.tar', 'compressed.gz', 'archive.rar', 'package.7z'];
+  archives.forEach(file => {
+    assert(isBinaryFile(file), `${file} should be detected as binary`);
+  });
+});
+
+test('should detect executables as binary files', () => {
+  const executables = ['program.exe', 'binary.bin', 'application.app'];
+  executables.forEach(file => {
+    assert(isBinaryFile(file), `${file} should be detected as binary`);
+  });
+});
+
+test('should detect documents as binary files', () => {
+  const docs = ['document.pdf', 'spreadsheet.xlsx', 'presentation.pptx'];
+  docs.forEach(file => {
+    assert(isBinaryFile(file), `${file} should be detected as binary`);
+  });
+});
+
+test('should not detect text files as binary', () => {
+  const textFiles = ['readme.md', 'script.js', 'style.css', 'data.json', 'config.yml', 'index.html'];
+  textFiles.forEach(file => {
+    assert(!isBinaryFile(file), `${file} should not be detected as binary`);
+  });
+});
+
+// Test isTextFile function
+test('should detect common text files', () => {
+  const textFiles = ['readme.md', 'script.js', 'style.css', 'data.json', 'config.yml', 'index.html', 'app.py', 'main.go'];
+  textFiles.forEach(file => {
+    assert(isTextFile(file), `${file} should be detected as text`);
+  });
+});
+
+test('should not detect binary files as text', () => {
+  const binaryFiles = ['photo.png', 'archive.zip', 'program.exe', 'document.pdf'];
+  binaryFiles.forEach(file => {
+    assert(!isTextFile(file), `${file} should not be detected as text`);
+  });
+});
+
+// Test edge cases
+test('should handle files without extensions', () => {
+  assert(isTextFile('README'), 'Files without extensions should default to text');
+  assert(isTextFile('Makefile'), 'Common text files without extensions should be text');
+});
+
+test('should handle extension-only input', () => {
+  assert(isImageFile('png'), 'Should handle bare extensions');
+  assert(isBinaryFile('exe'), 'Should handle bare extensions for binary');
+  assert(isTextFile('js'), 'Should handle bare extensions for text');
+});
+
+test('should be case insensitive', () => {
+  assert(isImageFile('PHOTO.PNG'), 'Should handle uppercase extensions');
+  assert(isBinaryFile('ARCHIVE.ZIP'), 'Should handle uppercase extensions');
+  assert(isTextFile('SCRIPT.JS'), 'Should handle uppercase extensions');
+});
+
+// Run all tests
+console.log('Running file type detection tests...\n');