Skip to content

Commit 58dfc04

Browse files
thavelickthavelick
authored
Merge pull request #14 from thavelick/about_page
Implement comprehensive about page with proper attribution
2 parents cb12ca0 + ddaf6a7 commit 58dfc04

File tree

11 files changed

+751
-3
lines changed

11 files changed

+751
-3
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.claude/

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,11 @@ No build process or external dependencies required for the core application.
105105

106106
GNU Affero General Public License v3.0 - same as the original just-bangs project.
107107

108+
## Created By
109+
110+
- [Idiomdrottning](https://idiomdrottning.org/about) - original idea for bang redirects website, custom bangs concept
111+
- [Tristan Havelick](https://tristanhavelick.com) - ongoing programming and enhancement
112+
108113
## Related Projects
109114

110115
- [just-bangs](https://github.com/thavelick/just-bangs) - The original Python server-based version

‎plan.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# About Page Implementation Plan
2+
3+
## Overview
4+
Create an about page at `./about/index.html` that explains Just Bangs Lite, provides project context, compares it with related tools, and shows the project timeline.
5+
6+
## Content Structure
7+
8+
### 1. What Just Bangs Lite Does
9+
- Explain bang shortcuts (e.g., `python w!` → Wikipedia search)
10+
- Highlight key features: client-side, dependency-free, automatic dark mode
11+
- Show example usage with screenshots or demos
12+
13+
### 2. GitHub Link
14+
- Prominent link to the repository
15+
- Include contributor information and how to contribute
16+
17+
### 3. Feature Comparison Grid
18+
Comparison table showing Just Bangs Lite vs related bang redirect tools:
19+
20+
| Feature | Just Bangs Lite | Original Just Bangs | Unduck | DuckDuckGo |
21+
|---------|-----------------|-------------------|--------|------------|
22+
| **Architecture** | Client-side only | Python server | Client-side only | Server-side (global) |
23+
| **Dependencies** | None (pure HTML/JS/CSS) | Python 3.10 | TypeScript, Vite, vite-plugin-pwa | N/A (hosted service) |
24+
| **Deployment** | Static hosting | Server required | Static hosting | Global CDN |
25+
| **Bang Source** | Built-in curated list | Downloads from DDG | Complete DDG bang list | Official bang database |
26+
| **Custom Bangs** | Hard coded | ✅ custom-bang.js file | ❌ Not supported | ❌ Not supported |
27+
| **Dark Mode** | ✅ Auto + manual toggle | ✅ Basic support | ✅ Auto only (system preference) | ✅ Yes (user preference) |
28+
| **PWA Support** | ✅ Yes (service worker) | ❌ No | ✅ Yes (vite-plugin-pwa) | ❌ No |
29+
| **Mobile Friendly** | ✅ Fully responsive | ✅ Basic | ✅ Responsive | ✅ Fully responsive |
30+
| **Search Interface** | Form + URL params | Form + URL path | URL params only | Full search engine |
31+
| **Default Bang** | User configurable (settings) | Environment variable | Configurable (localStorage) | Not applicable |
32+
| **Offline Support** | ✅ Yes (cached)* | ❌ No | ✅ Yes (PWA cached)* | ❌ No |
33+
| **Speed** | Instant (cached) | Local server speed | Instant (cached) | Network dependent |
34+
| **Source Available** | Open source (AGPL v3) | Open source (AGPL v3) | Open source (MIT) | Proprietary |
35+
| **Search Results** | Just bangs | Just bangs | Only bangs | Full search + bangs |
36+
37+
*You can use custom bangs with other locally self-hosted search engines
38+
39+
### 4. Project Timeline
40+
High-level milestones and evolution:
41+
42+
**Original Just Bangs (2022-2025)**
43+
- April 7, 2022: Initial concept - Python server with DDG bang redirects
44+
- April 8, 2022: Added custom bang support (custom-bang.js)
45+
- April 24, 2022: Dark mode support added
46+
- September 2023: OpenSearch browser integration
47+
- 2025: Ongoing maintenance and refinements
48+
49+
**Just Bangs Lite (July 2025)**
50+
- July 18, 2025: Complete rewrite as client-side JavaScript application
51+
- July 18, 2025: Added modular architecture with dependency injection for testing
52+
- July 18, 2025: Implemented Jest unit testing without package.json
53+
- July 18, 2025: Added Biome for formatting/linting and GitHub Actions CI/CD
54+
- July 20, 2025: Added PWA features with service worker and environment-aware caching
55+
- July 20, 2025: Implemented settings panel with hamburger menu and configurable default bang
56+
- July 20, 2025: Added mobile responsiveness and responsive design
57+
58+
**Unduck (2023-2024)**
59+
- 2023: TypeScript implementation focusing on speed
60+
- 2024: Deployed as public service at unduck.link
61+
62+
## Technical Implementation
63+
64+
### File Structure
65+
```
66+
public_html/about/
67+
├── index.html (standalone page matching main site design)
68+
└── style.css (about page specific styles)
69+
```
70+
71+
### Design Approach
72+
- **Styling**: Extend existing `style.css` patterns or create inline styles that match
73+
- **Layout**: Similar structure to main page but content-focused
74+
- **Navigation**: Link back to main search page
75+
- **Responsive**: Follow existing mobile-first approach
76+
- **Dark Mode**: Inherit from main site's dark mode system
77+
78+
### Content Sections Layout
79+
1. **Header**: "About Just Bangs Lite" with navigation
80+
2. **Hero Section**: What it does + key benefits
81+
3. **Feature Grid**: Visual comparison table
82+
4. **Timeline**: Interactive or visual timeline
83+
5. **GitHub Section**: Repository link + contribution info
84+
6. **Footer**: Back to search link
85+
86+
## Implementation Checklist
87+
88+
### Phase 1: Content Creation
89+
- [x] Write explanatory content about what Just Bangs Lite does
90+
- [x] Create feature comparison grid with accurate data
91+
- [x] Develop timeline content from git history research
92+
- [x] Prepare GitHub/contribution section content
93+
94+
### Phase 2: HTML Structure
95+
- [x] Create `about/index.html` with semantic markup
96+
- [x] Implement responsive grid layout for comparison table
97+
- [x] Add navigation elements (back to main, GitHub links)
98+
- [x] Include proper meta tags and favicon references
99+
100+
### Phase 3: Styling
101+
- [x] Apply consistent styling matching main site
102+
- [x] Implement dark mode support
103+
- [x] Style comparison grid for readability
104+
- [x] Add responsive breakpoints for mobile
105+
- [x] Style timeline section
106+
107+
### Phase 4: Integration
108+
- [x] Add "About" link to main page (hamburger menu)
109+
- [x] Test navigation between pages
110+
- [x] Verify dark mode works consistently
111+
- [x] Test responsive design on various screen sizes
112+
113+
### Phase 5: Quality Assurance
114+
- [x] Verify all links work correctly
115+
- [x] Test content accuracy against actual features
116+
- [x] Run accessibility checks
117+
- [x] Test on mobile devices
118+
- [x] Validate HTML markup
119+
120+
## Future Maintenance
121+
- Update feature comparisons when new features are added
122+
- Update timeline with major milestones
123+
- Keep GitHub information current
124+
- Maintain consistency with main site design changes
125+
126+
## Notes
127+
- This is primarily a content/documentation task rather than a code feature
128+
- Focus on accuracy and clarity for users comparing these tools
129+
- Keep content concise but informative
130+
- Ensure the about page enhances rather than competes with the main search functionality

‎public_html/about/index.html‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
<!doctype html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" type="image/svg+xml" href="../icon.svg" />
7+
<title>About Just Bangs Lite</title>
8+
<script src="../search.js"></script>
9+
<script src="../content.js"></script>
10+
<link rel="stylesheet" href="../style.css" />
11+
<link rel="stylesheet" href="style.css" />
12+
</head>
13+
14+
<body>
15+
<div class="nav-links">
16+
<a href="../">← Back to Search</a>
17+
</div>
18+
19+
20+
<button class="dark-mode-toggle">
21+
<div class="toggle-slider"></div>
22+
</button>
23+
24+
<div class="header">
25+
<h1>About Just Bangs! Lite</h1>
26+
</div>
27+
28+
<div class="hero">
29+
<h2>Lightning-Fast Search Shortcuts</h2>
30+
<p>Just Bangs Lite is a client-side search tool that turns your browser into a powerful search launcher using bang shortcuts. Type <strong>stranger things jw!</strong> to find where to watch on JustWatch, or <strong>!e vintage vinyl records</strong> to search eBay for vintage vinyl records.</p>
31+
</div>
32+
33+
<section>
34+
<h2>What Just Bangs Lite Does</h2>
35+
<p>Just Bangs Lite provides instant access to hundreds of websites through simple text shortcuts called "bangs". Instead of navigating to a website and then searching, you can search directly from one simple interface.</p>
36+
37+
<div class="feature-list">
38+
<div class="feature-item">
39+
<h3>Client-Side Only</h3>
40+
<p>Runs entirely in your browser with zero server dependencies. No data ever leaves your device.</p>
41+
</div>
42+
<div class="feature-item">
43+
<h3>Dependency-Free</h3>
44+
<p>Pure HTML, CSS, and JavaScript. No frameworks, no build steps, no package.json.</p>
45+
</div>
46+
<div class="feature-item">
47+
<h3>Smart Dark Mode</h3>
48+
<p>Automatic dark mode detection with manual toggle. Respects your system preferences.</p>
49+
</div>
50+
<div class="feature-item">
51+
<h3>Mobile-First</h3>
52+
<p>Fully responsive design optimized for both desktop and mobile devices.</p>
53+
</div>
54+
<div class="feature-item">
55+
<h3>Configurable</h3>
56+
<p>Set your default search engine and customize your search experience.</p>
57+
</div>
58+
<div class="feature-item">
59+
<h3>Privacy-Focused</h3>
60+
<p>No tracking, no analytics, no data collection. Your searches stay private.</p>
61+
</div>
62+
</div>
63+
64+
<h3>Example Usage</h3>
65+
<ul>
66+
<li><code>cats w!</code> → Search Wikipedia for "cats"</li>
67+
<li><code>!e vintage vinyl records</code> → Search eBay for "vintage vinyl records"</li>
68+
<li><code>stranger things jw!</code> → Find where to watch on JustWatch</li>
69+
<li><code>!g chocolate cake recipes</code> → Search Google for "chocolate cake recipes"</li>
70+
</ul>
71+
</section>
72+
73+
<section>
74+
<h2>Feature Comparison</h2>
75+
<p>How Just Bangs Lite compares to related bang redirect tools:</p>
76+
77+
<div class="comparison-table">
78+
<table>
79+
<thead>
80+
<tr>
81+
<th>Feature</th>
82+
<th>Just Bangs Lite</th>
83+
<th>Original Just Bangs</th>
84+
<th>Unduck</th>
85+
<th>DuckDuckGo</th>
86+
</tr>
87+
</thead>
88+
<tbody>
89+
<tr>
90+
<td><strong>Architecture</strong></td>
91+
<td>Client-side only</td>
92+
<td>Python server</td>
93+
<td>Client-side only</td>
94+
<td>Server-side (global)</td>
95+
</tr>
96+
<tr>
97+
<td><strong>Dependencies</strong></td>
98+
<td>None (pure HTML/JS/CSS)</td>
99+
<td>Python 3.10</td>
100+
<td>TypeScript, Vite, vite-plugin-pwa</td>
101+
<td>N/A (hosted service)</td>
102+
</tr>
103+
<tr>
104+
<td><strong>Deployment</strong></td>
105+
<td>Static hosting</td>
106+
<td>Server required</td>
107+
<td>Static hosting</td>
108+
<td>Global CDN</td>
109+
</tr>
110+
<tr>
111+
<td><strong>Bang Source</strong></td>
112+
<td>Built-in curated list</td>
113+
<td>Downloads from DDG</td>
114+
<td>Complete DDG bang list</td>
115+
<td>Official bang database</td>
116+
</tr>
117+
<tr>
118+
<td><strong>Custom Bangs</strong></td>
119+
<td>Hard coded</td>
120+
<td>✅ custom-bang.js file</td>
121+
<td>❌ Not supported</td>
122+
<td>❌ Not supported</td>
123+
</tr>
124+
<tr>
125+
<td><strong>Dark Mode</strong></td>
126+
<td>✅ Auto + manual toggle</td>
127+
<td>✅ Basic support</td>
128+
<td>✅ Auto only (system preference)</td>
129+
<td>✅ Yes (user preference)</td>
130+
</tr>
131+
<tr>
132+
<td><strong>PWA Support</strong></td>
133+
<td>✅ Yes (service worker)</td>
134+
<td>❌ No</td>
135+
<td>✅ Yes (vite-plugin-pwa)</td>
136+
<td>❌ No</td>
137+
</tr>
138+
<tr>
139+
<td><strong>Mobile Friendly</strong></td>
140+
<td>✅ Fully responsive</td>
141+
<td>✅ Basic</td>
142+
<td>✅ Responsive</td>
143+
<td>✅ Fully responsive</td>
144+
</tr>
145+
<tr>
146+
<td><strong>Search Interface</strong></td>
147+
<td>Form + URL params</td>
148+
<td>Form + URL path</td>
149+
<td>URL params only</td>
150+
<td>Full search engine</td>
151+
</tr>
152+
<tr>
153+
<td><strong>Default Bang</strong></td>
154+
<td>User configurable (settings)</td>
155+
<td>Environment variable</td>
156+
<td>Configurable (localStorage)</td>
157+
<td>Not applicable</td>
158+
</tr>
159+
<tr>
160+
<td><strong>Offline Support</strong></td>
161+
<td>✅ Yes (cached)*</td>
162+
<td>❌ No</td>
163+
<td>✅ Yes (PWA cached)*</td>
164+
<td>❌ No</td>
165+
</tr>
166+
<tr>
167+
<td><strong>Speed</strong></td>
168+
<td>Instant (cached)</td>
169+
<td>Local server speed</td>
170+
<td>Instant (cached)</td>
171+
<td>Network dependent</td>
172+
</tr>
173+
<tr>
174+
<td><strong>Source Available</strong></td>
175+
<td>Open source (AGPL v3)</td>
176+
<td>Open source (AGPL v3)</td>
177+
<td>Open source (MIT)</td>
178+
<td>Proprietary</td>
179+
</tr>
180+
<tr>
181+
<td><strong>Search Results</strong></td>
182+
<td>Just bangs</td>
183+
<td>Just bangs</td>
184+
<td>Only bangs</td>
185+
<td>Full search + bangs</td>
186+
</tr>
187+
</tbody>
188+
</table>
189+
</div>
190+
<p><em>*You can use custom bangs with other locally self-hosted search engines</em></p>
191+
</section>
192+
193+
<section>
194+
<h2>Project Timeline</h2>
195+
<div class="timeline">
196+
<div class="timeline-item">
197+
<div class="timeline-date">Original Just Bangs (2022-2025)</div>
198+
<ul>
199+
<li><strong>Early April 2022:</strong> <a href="https://idiomdrottning.org/about" target="_blank">Idiomdrottning</a> conceived initial idea for a bang redirects website</li>
200+
<li><strong>April 7, 2022:</strong> Tristan coded up the original version in Python</li>
201+
<li><strong>April 8, 2022:</strong> Idiomdrottning added custom bang support (custom-bang.js)</li>
202+
<li><strong>April 24, 2022:</strong> Added dark mode support</li>
203+
<li><strong>September 2023:</strong> Added OpenSearch browser integration</li>
204+
<li><strong>2025:</strong> Ongoing maintenance and refinements</li>
205+
</ul>
206+
</div>
207+
208+
<div class="timeline-item">
209+
<div class="timeline-date">Just Bangs Lite (July 2025)</div>
210+
<ul>
211+
<li><strong>July 18, 2025:</strong> Completed rewrite as client-side JavaScript application</li>
212+
<li><strong>July 18, 2025:</strong> Added modular architecture with dependency injection for testing</li>
213+
<li><strong>July 18, 2025:</strong> Implemented Jest unit testing without package.json</li>
214+
<li><strong>July 18, 2025:</strong> Added Biome for formatting/linting and GitHub Actions CI/CD</li>
215+
<li><strong>July 20, 2025:</strong> Added PWA features with service worker and environment-aware caching</li>
216+
<li><strong>July 20, 2025:</strong> Implemented settings panel with hamburger menu and configurable default bang</li>
217+
<li><strong>July 20, 2025:</strong> Added mobile responsiveness and responsive design</li>
218+
</ul>
219+
</div>
220+
</div>
221+
</section>
222+
223+
<section>
224+
<div class="github-section">
225+
<h2>Open Source & Contributing</h2>
226+
<p>Just Bangs Lite is open source software licensed under AGPL v3. We welcome contributions, bug reports, and feature requests!</p>
227+
228+
<p style="margin-top: 20px;">
229+
<a href="https://github.com/thavelick/just-bangs-lite" target="_blank">View Source Code</a>
230+
</p>
231+
232+
<p style="margin-top: 30px;">
233+
<strong>How to Contribute:</strong><br>
234+
• Fork the repository and create a feature branch<br>
235+
• Make your changes and add tests if applicable<br>
236+
• Run <code>make check</code> and <code>make test</code> to verify your changes<br>
237+
• Submit a pull request with a clear description of your changes
238+
</p>
239+
</div>
240+
</section>
241+
242+
<section>
243+
<h2>Credits</h2>
244+
<ul>
245+
<li><a href="https://idiomdrottning.org/about" target="_blank">Idiomdrottning</a> - original idea for bang redirects website, custom bangs concept</li>
246+
<li><a href="https://tristanhavelick.com" target="_blank">Tristan Havelick</a> - ongoing programming and enhancement</li>
247+
</ul>
248+
</section>
249+
250+
</body>
251+
</html>

0 commit comments

Comments
 (0)