gh-here 1.1.1 → 2.1.0

package/SAMPLE.md

@@ -0,0 +1,287 @@
+# Syntax Highlighting Test
+
+This file contains code samples in various languages to test syntax highlighting in markdown rendering.
+
+## JavaScript
+
+```javascript
+function greet(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+  return message;
+}
+
+class Person {
+  constructor(name, age) {
+    this.name = name;
+    this.age = age;
+  }
+
+  introduce() {
+    return `My name is ${this.name} and I'm ${this.age} years old.`;
+  }
+}
+```
+
+## Python
+
+```python
+def calculate_fibonacci(n):
+    """Calculate the nth Fibonacci number."""
+    if n <= 1:
+        return n
+    return calculate_fibonacci(n - 1) + calculate_fibonacci(n - 2)
+
+class Animal:
+    def __init__(self, name, species):
+        self.name = name
+        self.species = species
+
+    def make_sound(self):
+        return f"{self.name} the {self.species} makes a sound"
+```
+
+## Go
+
+```go
+package main
+
+import (
+    "fmt"
+    "time"
+)
+
+type User struct {
+    Name      string
+    Email     string
+    CreatedAt time.Time
+}
+
+func (u *User) SendEmail(message string) error {
+    fmt.Printf("Sending email to %s: %s\n", u.Email, message)
+    return nil
+}
+
+func main() {
+    user := &User{
+        Name:      "John Doe",
+        Email:     "john@example.com",
+        CreatedAt: time.Now(),
+    }
+    user.SendEmail("Welcome!")
+}
+```
+
+## Rust
+
+```rust
+use std::collections::HashMap;
+
+fn main() {
+    let mut scores = HashMap::new();
+    scores.insert(String::from("Blue"), 10);
+    scores.insert(String::from("Red"), 50);
+
+    for (key, value) in &scores {
+        println!("{}: {}", key, value);
+    }
+}
+
+struct Rectangle {
+    width: u32,
+    height: u32,
+}
+
+impl Rectangle {
+    fn area(&self) -> u32 {
+        self.width * self.height
+    }
+}
+```
+
+## TypeScript
+
+```typescript
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+async function fetchUser(id: number): Promise<User> {
+  const response = await fetch(`/api/users/${id}`);
+  const data: User = await response.json();
+  return data;
+}
+
+class UserService {
+  private users: Map<number, User> = new Map();
+
+  addUser(user: User): void {
+    this.users.set(user.id, user);
+  }
+
+  getUser(id: number): User | undefined {
+    return this.users.get(id);
+  }
+}
+```
+
+## Bash
+
+```bash
+#!/bin/bash
+
+# Function to backup files
+backup_files() {
+    local source_dir=$1
+    local backup_dir=$2
+
+    if [ ! -d "$backup_dir" ]; then
+        mkdir -p "$backup_dir"
+    fi
+
+    tar -czf "$backup_dir/backup-$(date +%Y%m%d).tar.gz" "$source_dir"
+    echo "Backup completed successfully!"
+}
+
+backup_files "/home/user/documents" "/home/user/backups"
+```
+
+## SQL
+
+```sql
+-- Create users table
+CREATE TABLE users (
+    id SERIAL PRIMARY KEY,
+    username VARCHAR(50) UNIQUE NOT NULL,
+    email VARCHAR(100) UNIQUE NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Insert some data
+INSERT INTO users (username, email) VALUES
+    ('john_doe', 'john@example.com'),
+    ('jane_smith', 'jane@example.com');
+
+-- Query with JOIN
+SELECT u.username, o.order_date, o.total
+FROM users u
+INNER JOIN orders o ON u.id = o.user_id
+WHERE o.total > 100
+ORDER BY o.order_date DESC;
+```
+
+## JSON
+
+```json
+{
+  "name": "gh-here",
+  "version": "2.0.0",
+  "description": "A local GitHub-like file browser",
+  "dependencies": {
+    "express": "^4.18.2",
+    "highlight.js": "^11.9.0",
+    "marked": "^12.0.0"
+  },
+  "scripts": {
+    "start": "node bin/gh-here.js",
+    "test": "jest"
+  }
+}
+```
+
+## CSS
+
+```css
+:root {
+  --primary-color: #0366d6;
+  --background-color: #ffffff;
+  --text-color: #24292e;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.button {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: var(--primary-color);
+  color: white;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.button:hover {
+  background-color: #0256c7;
+  cursor: pointer;
+}
+```
+
+## HTML
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample Page</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>Welcome to My Site</h1>
+        <nav>
+            <ul>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <p>This is the main content area.</p>
+    </main>
+    <script src="script.js"></script>
+</body>
+</html>
+```
+
+## Java
+
+```java
+import java.util.ArrayList;
+import java.util.List;
+
+public class BankAccount {
+    private String accountNumber;
+    private double balance;
+    private List<Transaction> transactions;
+
+    public BankAccount(String accountNumber, double initialBalance) {
+        this.accountNumber = accountNumber;
+        this.balance = initialBalance;
+        this.transactions = new ArrayList<>();
+    }
+
+    public void deposit(double amount) {
+        if (amount > 0) {
+            balance += amount;
+            transactions.add(new Transaction("DEPOSIT", amount));
+        }
+    }
+
+    public boolean withdraw(double amount) {
+        if (amount > 0 && balance >= amount) {
+            balance -= amount;
+            transactions.add(new Transaction("WITHDRAWAL", amount));
+            return true;
+        }
+        return false;
+    }
+}
+```

package/bin/gh-here.js

@@ -9,7 +9,8 @@ const { setupRoutes } = require('../lib/server');
 
 // Parse command line arguments
 const args = process.argv.slice(2);
-const openBrowser = args.includes('--open') || args.includes('-o');
+const noOpen = args.includes('--no-open');
+const openBrowser = !noOpen; // Default is to open browser
 const helpRequested = args.includes('--help') || args.includes('-h');
 
 // Check for port specification
@@ -37,17 +38,17 @@ gh-here - GitHub-like local file browser
 Usage: npx gh-here [options]
 
 Options:
-  --open, -o              Open browser automatically
+  --no-open               Do not open browser automatically
   --browser=<name>        Specify browser (safari, chrome, firefox, arc)
   --port=<number>         Specify port number (default: 5555)
   --help, -h              Show this help message
 
 Examples:
-  npx gh-here                           Start server on port 5555 (or next available)
-  npx gh-here --open                    Start server and open browser
-  npx gh-here --port=8080               Start server on port 8080
-  npx gh-here --open --browser=safari   Start server and open in Safari
-  npx gh-here --open --browser=arc      Start server and open in Arc
+  npx gh-here                           Start server and open browser
+  npx gh-here --no-open                 Start server without opening browser
+  npx gh-here --port=8080               Start server on port 8080 and open browser
+  npx gh-here --browser=safari          Start server and open in Safari
+  npx gh-here --browser=arc             Start server and open in Arc
 `);
   process.exit(0);
 }
@@ -181,8 +182,6 @@ async function startServer() {
       if (openBrowser) {
         console.log(`🌍 Opening browser...`);
         setTimeout(() => openBrowserToUrl(url), 1000);
-      } else {
-        console.log(`💡 Tip: Use --open flag to launch browser automatically`);
       }
     });
   } catch (error) {

package/blog-post.md

@@ -0,0 +1,100 @@
+# Why gh-here is the Perfect Tool for Terminal-Heavy Developers
+
+If you're like most developers in 2025, you probably spend a lot of time in the terminal. You're using Claude Code to generate and refactor code, running commands left and right, and iterating quickly on projects that haven't even been pushed to GitHub yet. But sometimes you need to step back and get a bird's-eye view of your codebase—and that's where `gh-here` shines.
+
+## The Gap Between Terminal and IDE
+
+Picture this scenario: You're deep in a terminal session, using Claude Code to implement a new feature. You've got files scattered across multiple directories, you're testing things with curl, and you're in that flow state where opening a heavy IDE would just break your momentum. But you need to:
+
+- Quickly browse through your project structure
+- Check what files you've modified
+- Preview a README or markdown file
+- Navigate between related files without losing context
+- See language distribution across your codebase
+
+This is the exact gap that `gh-here` fills.
+
+## Built for Modern Development Workflows
+
+### 1. **Perfect for AI-Assisted Development**
+When you're working with Claude Code or GitHub Copilot, you're often generating and modifying files rapidly. `gh-here` gives you an instant, GitHub-like interface to review what's been changed without committing to version control or opening a full IDE.
+
+### 2. **Ideal for Pre-Push Workflows**
+Not everything needs to hit GitHub immediately. Whether you're experimenting with a proof of concept or working on a feature branch, `gh-here` lets you navigate and review your local changes in a familiar, web-based interface.
+
+### 3. **Terminal-Native but GUI-Friendly**
+Launch it with a single command (`gh-here`) from any directory, and instantly get a clean, GitHub-inspired interface in your browser. No configuration, no setup—just point and browse.
+
+## Real-World Use Cases
+
+**Scenario 1: Code Review Before Push**
+```bash
+$ claude "implement user authentication system"
+# ... lots of generated files and changes
+$ gh-here
+# Browse through generated files, check git status, review changes
+$ git add . && git commit -m "Add user authentication"
+```
+
+**Scenario 2: Project Exploration**
+```bash
+$ git clone some-interesting-repo
+$ cd some-interesting-repo
+$ gh-here
+# Instantly get an overview: languages used, file structure, README preview
+```
+
+**Scenario 3: Documentation Review**
+```bash
+$ claude "update all the documentation"
+$ gh-here
+# Preview all the markdown files in GitHub-style rendering
+# Check if everything looks good before committing
+```
+
+## Why Not Just Use GitHub or an IDE?
+
+**GitHub**: Your code isn't pushed yet, or you're working on experimental changes you don't want in version control.
+
+**IDE**: Too heavy for quick browsing, breaks your terminal flow, takes time to open and index.
+
+**File Explorer**: No syntax highlighting, no git integration, no markdown rendering, no language stats.
+
+**Terminal**: Great for editing, terrible for browsing and getting visual context.
+
+## The Sweet Spot
+
+`gh-here` hits the perfect sweet spot:
+- **Lightweight**: Starts instantly, no heavy indexing
+- **Familiar**: GitHub-style interface that every developer knows
+- **Integrated**: Shows git status, handles various file types, renders markdown
+- **Flexible**: Works with any directory, whether it's a git repo or not
+- **Terminal-friendly**: Launch with one command, works alongside your existing workflow
+
+## Features That Just Make Sense
+
+- **Language statistics**: Instantly see what technologies your project uses
+- **Git integration**: Visual git status indicators, diff viewing
+- **File type support**: Syntax highlighting, image viewing, markdown rendering
+- **Search functionality**: Quick file search with keyboard shortcuts
+- **Breadcrumb navigation**: Always know where you are in your project
+
+## Perfect for 2025 Development
+
+As development workflows become more AI-assisted and terminal-centric, tools like `gh-here` become essential. You're not always in an IDE, you're not always ready to push to GitHub, but you always need to understand your codebase structure and changes.
+
+It's the missing link between your terminal workflow and the visual context you need to stay productive.
+
+## Get Started
+
+```bash
+npm install -g gh-here
+cd your-project
+gh-here
+```
+
+That's it. Your local codebase is now browsable in a clean, GitHub-style interface at `localhost:5556`.
+
+---
+
+*Built for developers who live in the terminal but occasionally need a better view of their code.*

package/lib/renderers.js

@@ -8,6 +8,23 @@ const { exec } = require('child_process');
 const { getFileIcon, getLanguageFromExtension, getLanguageColor, formatBytes, isImageFile, isBinaryFile, isTextFile } = require('./file-utils');
 const { getGitStatusIcon, getGitStatusDescription } = require('./git');
 
+// Configure marked to use highlight.js for syntax highlighting
+marked.use({
+  renderer: {
+    code(code, language) {
+      if (language && hljs.getLanguage(language)) {
+        try {
+          return `<pre><code class="hljs language-${language}">${hljs.highlight(code, { language }).value}</code></pre>`;
+        } catch (err) {
+          // Fall back to auto-detection if language-specific highlighting fails
+        }
+      }
+      // Auto-detect language if not specified or language not found
+      return `<pre><code class="hljs">${hljs.highlightAuto(code).value}</code></pre>`;
+    }
+  }
+});
+
 /**
  * HTML rendering module
  * Handles all HTML template generation for different views
@@ -18,7 +35,8 @@ function renderDirectory(currentPath, items, showGitignored = false, gitBranch =
   const breadcrumbs = generateBreadcrumbs(currentPath, gitBranch, workingDirName);
   const readmeFile = findReadmeFile(items);
   const readmePreview = readmeFile ? generateReadmePreview(currentPath, readmeFile) : '';
-  const languageStats = generateLanguageStats(items);
+  // Only show language stats on root/top-level directory
+  const languageStats = (!currentPath || currentPath === '.') ? generateLanguageStats(items) : '';
   
   const itemsHtml = items.map(item => `
     <tr class="file-row" data-name="${item.name.toLowerCase()}" data-type="${item.isDirectory ? 'dir' : 'file'}" data-path="${item.path}">
@@ -113,6 +131,7 @@ function renderDirectory(currentPath, items, showGitignored = false, gitBranch =
                   ${octicons['chevron-down'].toSVG({ class: 'octicon-chevron' })}
                 </button>
               ` : ''}
+              ${languageStats}
             </div>
             <div class="repo-controls-right">
               <div class="search-container">
@@ -130,7 +149,6 @@ function renderDirectory(currentPath, items, showGitignored = false, gitBranch =
       <main>
         <div class="repo-canvas">
           <div class="repo-canvas-content">
-            ${languageStats}
             <div class="file-table-container">
               <table class="file-table" id="file-table">
             <thead>
@@ -242,8 +260,9 @@ function generateLanguageStats(items) {
   `;
 }
 
-async function renderFileDiff(filePath, ext, gitInfo, gitRepoRoot) {
-  const breadcrumbs = generateBreadcrumbs(filePath);
+async function renderFileDiff(filePath, ext, gitInfo, gitRepoRoot, workingDir = null) {
+  const workingDirName = workingDir ? path.basename(workingDir) : null;
+  const breadcrumbs = generateBreadcrumbs(filePath, null, workingDirName);
   
   // Get git diff for the file
   return new Promise((resolve, reject) => {
@@ -370,8 +389,9 @@ function renderRawDiff(diffOutput, ext) {
 }
 
 
-async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStatus = null, workingDir) {
-  const breadcrumbs = generateBreadcrumbs(filePath);
+async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStatus = null, workingDir = null) {
+  const workingDirName = workingDir ? path.basename(workingDir) : null;
+  const breadcrumbs = generateBreadcrumbs(filePath, null, workingDirName);
   let displayContent;
   let viewToggle = '';
   
@@ -551,8 +571,9 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
   `;
 }
 
-function renderNewFile(currentPath) {
-  const breadcrumbs = generateBreadcrumbs(currentPath);
+function renderNewFile(currentPath, workingDir = null) {
+  const workingDirName = workingDir ? path.basename(workingDir) : null;
+  const breadcrumbs = generateBreadcrumbs(currentPath, null, workingDirName);
   
   return `
     <!DOCTYPE html>

package/lib/server.js

@@ -108,7 +108,7 @@ function setupRoutes(app, workingDir, isGitRepo, gitRepoRoot) {
           const absolutePath = path.resolve(fullPath);
           const gitInfo = gitStatus[absolutePath];
           if (gitInfo) {
-            const diffHtml = await renderFileDiff(currentPath, ext, gitInfo, gitRepoRoot);
+            const diffHtml = await renderFileDiff(currentPath, ext, gitInfo, gitRepoRoot, workingDir);
             return res.send(diffHtml);
           }
         }
@@ -123,7 +123,7 @@ function setupRoutes(app, workingDir, isGitRepo, gitRepoRoot) {
   // Route for creating new files
   app.get('/new', (req, res) => {
     const currentPath = req.query.path || '';
-    res.send(renderNewFile(currentPath));
+    res.send(renderNewFile(currentPath, workingDir));
   });
 
   // API endpoint to get file content for editing

package/package.json

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

package/public/styles.css

@@ -499,29 +499,54 @@ main {
 
 /* Old search styles removed - using new GitHub-style search */
 
-/* Language stats */
+/* Language stats in control bar */
 .language-stats {
   display: flex;
-  gap: 16px;
-  margin-bottom: 16px;
-  padding: 12px 0;
-  border-bottom: 1px solid var(--border-primary);
-  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-left: 16px;
+  max-width: 300px;
+  overflow: hidden;
+  position: relative;
+}
+
+.language-stats:hover {
+  overflow: visible;
+  z-index: 10;
+}
+
+.language-stats:hover::before {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: -8px;
+  right: -8px;
+  bottom: -4px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: -1;
+  pointer-events: none;
 }
 
 .lang-stat {
   display: flex;
   align-items: center;
-  gap: 6px;
-  font-size: 12px;
+  gap: 4px;
+  font-size: 11px;
   color: var(--text-secondary);
+  white-space: nowrap;
+  flex-shrink: 0;
+  padding: 2px 0;
 }
 
 .lang-dot {
-  width: 12px;
-  height: 12px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   display: inline-block;
+  flex-shrink: 0;
 }
 
 .lang-name {
@@ -2010,6 +2035,31 @@ main {
   height: 14px;
 }
 
+/* General modal overlay */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+  padding: 20px;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
 /* Clean commit modal */
 .commit-modal-overlay {
   position: fixed;