npm - gh-here - Versions diffs - 3.0.0 → 3.0.2 - Mend

gh-here 3.0.0 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # gh-here
-Local GitHub-style file browser for viewing codebases. Browse directories, view files with syntax highlighting, and explore git diffs.
+A fast, local GitHub-style file browser for exploring codebases. Browse directories with a file tree, view files with syntax highlighting, and explore git diffs - all in your browser.
 ## Installation
@@ -18,39 +18,42 @@ npm install -g gh-here
 ```bash
 gh-here                           # Start server on available port
-gh-here --open                    # Start and open browser
+gh-here --open                    # Start and open browser (default)
 gh-here --port=8080               # Use specific port
 gh-here --open --browser=safari   # Open in Safari
 ```
 ## Features
-- Directory browsing with file icons
-- Syntax highlighting for 30+ languages
-- README preview with markdown rendering
-- Language statistics
-- Git status indicators
-- Diff viewer with line numbers
-- Search files
-- Copy/download files
-- Rename/delete files and folders
-- .gitignore filtering
-- Dark/light themes
-- Keyboard navigation
+### Core
+- **File Tree Sidebar** - Navigate your repository structure with an interactive file tree
+- **Context-Aware Search** - Global repository search or filter the file tree
+- **Client-Side Navigation** - Fast page transitions without full reloads
+- **Syntax Highlighting** - Support for 30+ languages via highlight.js
+- **Git Integration** - Status indicators and diff viewer with line numbers
+### UI/UX
+- **Gitignore Toggle** - Show/hide gitignored files (persists in localStorage)
+- **Dark/Light Themes** - Toggle between themes
+- **README Preview** - Automatic markdown rendering
+- **Language Statistics** - See breakdown of languages in your repo
+- **File Operations** - Copy file paths, download files, view raw content
 ## Keyboard Shortcuts
 | Key | Action |
 |-----|--------|
-| `j`/`k` or arrows | Navigate files |
-| `Enter` or `o` | Open file/folder |
-| `h` | Go up directory |
-| `/` or `s` | Focus search |
-| `t` | Toggle theme |
-| `i` | Toggle .gitignore |
-| `d` | Show diff (if git changes) |
-| `r` | Refresh |
-| `?` | Show shortcuts |
+| `Cmd/Ctrl + K` | Focus search |
+| `Escape` | Close search/modals |
+## How It Works
+gh-here runs a local Express server that serves a read-only view of your codebase. It:
+1. Respects your `.gitignore` (optional toggle to show ignored files)
+2. Shows git status and diffs for modified files
+3. Provides a familiar GitHub-like interface
+4. Works entirely offline - no data leaves your machine
 ## Development
@@ -59,9 +62,27 @@ npm install
 npm start
 ```
+### Running Tests (Optional)
+Tests use Playwright for smoke testing but are optional for development:
+```bash
+# First time only - install Chromium for testing (~210MB)
+npx playwright install chromium
+# Run tests
+npm test
+```
+**Note**: End users don't need Playwright - it's only installed when you clone the repo and run `npm install` (devDependency).
 ## Dependencies
-- express
-- highlight.js
-- marked
-- @primer/octicons
+- express - Web server
+- highlight.js - Syntax highlighting
+- marked - Markdown rendering
+- @primer/octicons - GitHub icons
+## License
+MIT

package/lib/renderers.js CHANGED Viewed

@@ -103,7 +103,7 @@ function renderDirectory(currentPath, items, showGitignored = false, gitBranch =
     <html data-theme="dark">
     <head>
       <title>gh-here: ${currentPath || 'Root'}</title>
-      <link rel="stylesheet" href="/static/styles.css?v=${Date.now()}">
+      <link rel="stylesheet" href="/static/styles.css?v=3.0.5">
       <script>
         // Check localStorage and add showGitignored param if needed (before page renders)
         (function() {
@@ -306,18 +306,18 @@ function generateLanguageStats(items) {
 async function renderFileDiff(filePath, ext, gitInfo, gitRepoRoot, workingDir = null, gitBranch = 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) => {
-    const diffCommand = gitInfo.staged ?
-      `git diff --cached "${filePath}"` :
+    const diffCommand = gitInfo.staged ?
+      `git diff --cached "${filePath}"` :
       `git diff "${filePath}"`;
-    exec(diffCommand, { cwd: gitRepoRoot }, (error, stdout) => {
+    exec(diffCommand, { cwd: gitRepoRoot }, (error, stdout, stderr) => {
       if (error) {
         return reject(error);
       }
       const diffContent = renderRawDiff(stdout, ext);
       const currentParams = new URLSearchParams({ path: filePath });
       const viewUrl = `/?${currentParams.toString()}`;
@@ -407,7 +407,7 @@ async function renderFileDiff(filePath, ext, gitInfo, gitRepoRoot, workingDir =
         <html data-theme="dark">
         <head>
           <title>gh-here: ${path.basename(filePath)} (diff)</title>
-          <link rel="stylesheet" href="/static/styles.css?v=${Date.now()}">
+          <link rel="stylesheet" href="/static/styles.css?v=3.0.5">
           <link rel="stylesheet" href="/static/highlight.css?v=${Date.now()}">
           <script>
             // Check localStorage and add showGitignored param if needed (before page renders)
@@ -787,7 +787,7 @@ async function renderFile(filePath, content, ext, viewMode = 'rendered', gitStat
     <html data-theme="dark">
     <head>
       <title>gh-here: ${path.basename(filePath)}</title>
-      <link rel="stylesheet" href="/static/styles.css?v=${Date.now()}">
+      <link rel="stylesheet" href="/static/styles.css?v=3.0.5">
       <link rel="stylesheet" href="/static/highlight.css?v=${Date.now()}">
       <script>
         // Check localStorage and add showGitignored param if needed (before page renders)

package/package.json CHANGED Viewed

@@ -1,15 +1,18 @@
 {
   "name": "gh-here",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "A local GitHub-like file browser for viewing code",
-  "repository": "https://github.com/corywilkerson/gh-here",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/corywilkerson/gh-here.git"
+  },
   "main": "index.js",
   "bin": {
-    "gh-here": "./bin/gh-here.js"
+    "gh-here": "bin/gh-here.js"
   },
   "scripts": {
     "start": "node bin/gh-here.js",
-    "test": "echo yolo no tests yet"
+    "test": "node test.js"
   },
   "keywords": [
     "github",
@@ -20,9 +23,12 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@primer/octicons": "^19.8.0",
     "express": "^4.18.2",
     "highlight.js": "^11.9.0",
-    "marked": "^12.0.0",
-    "@primer/octicons": "^19.8.0"
+    "marked": "^12.0.0"
+  },
+  "devDependencies": {
+    "playwright": "^1.56.1"
   }
 }

package/public/styles.css CHANGED Viewed

@@ -120,7 +120,16 @@ header {
   font-weight: 600;
   margin: 0;
   color: var(--text-primary);
-  letter-spacing: -0.01em;
+  letter-spacing: 0.02em;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+.header-left h1::before {
+  content: '$';
+  color: var(--link-color);
+  margin-right: 8px;
+  opacity: 0.8;
+  font-weight: 400;
 }
 .header-path {
@@ -1623,7 +1632,7 @@ main {
 .line-content {
   white-space: pre;
-  display: inline-block;
+  display: inline;
   padding: 0 10px;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   font-size: 12px;

package/test.js ADDED Viewed

@@ -0,0 +1,138 @@
+/**
+ * Lightweight smoke tests for gh-here
+ * Run with: node test.js
+ */
+const { chromium } = require('playwright');
+const { spawn } = require('child_process');
+const TEST_PORT = 5556; // Use different port to avoid conflicts
+const BASE_URL = `http://localhost:${TEST_PORT}`;
+async function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+async function runTests() {
+  console.log('Starting gh-here server...');
+  // Start server
+  const server = spawn('node', ['bin/gh-here.js', `--port=${TEST_PORT}`], {
+    cwd: __dirname,
+    stdio: 'pipe'
+  });
+  // Wait for server to start
+  await sleep(2000);
+  let browser;
+  let failures = 0;
+  try {
+    console.log('Launching browser...');
+    browser = await chromium.launch({ headless: true });
+    const context = await browser.newContext();
+    const page = await context.newPage();
+    // Test 1: Root page loads
+    console.log('\n✓ Test 1: Root page loads');
+    await page.goto(BASE_URL);
+    const title = await page.title();
+    if (!title.includes('gh-here')) {
+      console.error('  ✗ FAILED: Page title incorrect');
+      failures++;
+    }
+    // Test 2: File tree exists (may be hidden on root)
+    console.log('✓ Test 2: File tree element exists');
+    const fileTreeExists = await page.$('#file-tree');
+    if (!fileTreeExists) {
+      console.error('  ✗ FAILED: File tree element not found');
+      failures++;
+    }
+    // Test 3: Navigate to a file and check line numbers display correctly
+    console.log('✓ Test 3: File view with line numbers');
+    await page.goto(`${BASE_URL}/?path=lib/renderers.js`);
+    await page.waitForSelector('.line-container', { timeout: 5000 });
+    // Check that line numbers are in a vertical column (not nested)
+    const lineContainers = await page.$$('.line-container');
+    if (lineContainers.length < 10) {
+      console.error('  ✗ FAILED: Not enough line containers found');
+      failures++;
+    }
+    // Check line 1 and line 2 have sequential numbers
+    const line1 = await page.$('.line-container[data-line="1"]');
+    const line2 = await page.$('.line-container[data-line="2"]');
+    if (!line1 || !line2) {
+      console.error('  ✗ FAILED: Line containers missing data-line attributes');
+      failures++;
+    }
+    // Verify line numbers are not nested (check display property)
+    const line1Display = await page.$eval('.line-container[data-line="1"]',
+      el => window.getComputedStyle(el).display
+    );
+    if (line1Display !== 'block') {
+      console.error(`  ✗ FAILED: Line containers should have display:block, got ${line1Display}`);
+      failures++;
+    }
+    // Test 4: Check if modified files show diff button
+    console.log('✓ Test 4: Modified files show diff button');
+    await page.goto(BASE_URL);
+    const diffButtons = await page.$$('.diff-btn');
+    // Should have at least one diff button if there are modified files
+    console.log(`  Found ${diffButtons.length} diff buttons`);
+    // Test 5: Gitignore toggle exists and is clickable
+    console.log('✓ Test 5: Gitignore toggle button');
+    const gitignoreToggle = await page.$('#gitignore-toggle');
+    if (!gitignoreToggle) {
+      console.error('  ✗ FAILED: Gitignore toggle button not found');
+      failures++;
+    }
+    // Test 6: Theme toggle works
+    console.log('✓ Test 6: Theme toggle');
+    const themeToggle = await page.$('#theme-toggle');
+    if (!themeToggle) {
+      console.error('  ✗ FAILED: Theme toggle button not found');
+      failures++;
+    }
+    // Test 7: Search functionality
+    console.log('✓ Test 7: Search input exists');
+    const searchInput = await page.$('#file-search, #root-file-search');
+    if (!searchInput) {
+      console.error('  ✗ FAILED: Search input not found');
+      failures++;
+    }
+    console.log('\n' + '='.repeat(50));
+    if (failures === 0) {
+      console.log('✓ All tests passed!');
+    } else {
+      console.log(`✗ ${failures} test(s) failed`);
+    }
+    console.log('='.repeat(50) + '\n');
+  } catch (error) {
+    console.error('\n✗ Test failed with error:', error.message);
+    failures++;
+  } finally {
+    if (browser) {
+      await browser.close();
+    }
+    // Kill server
+    server.kill();
+    // Exit with appropriate code
+    process.exit(failures > 0 ? 1 : 0);
+  }
+}
+runTests();