Skip to content

Commit b7f2eab

Browse files
dorlugasigalCopilot
dorlugasigal
and
Copilot
authored
feat: SEO, discoverability, and content improvements (#115)
Adds missing SEO infrastructure and content to improve traffic, social sharing, and search discoverability across the landing page and docs site. Landing page changes: og:image/twitter:image/canonical meta tags, JSON-LD structured data (SoftwareApplication schema), theme-color, robots.txt, sitemap.xml, Plausible Analytics placeholder, a comparison section (TermBeam vs SSH vs mosh vs Termux), and a GitHub stars badge in the hero. Docs site changes: new comparison page with feature matrix and fair "when to use what" guide, new use-cases page covering server management, pair programming, teaching, on-call, and IoT scenarios, plus mkdocs.yml nav and analytics config updates. Repo changes: enabled GitHub Discussions, added FUNDING.yml for Sponsors button. Closes #114. --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 7a7c94c commit b7f2eab

9 files changed

Lines changed: 342 additions & 0 deletions

File tree

‎.github/FUNDING.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# These are supported funding model platforms
2+
github: dorlugasigal

‎docs/comparison.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: TermBeam vs the Traditional Way
3+
description: >-
4+
Why accessing your terminal from a phone usually requires too many steps,
5+
and how TermBeam simplifies it to one command and a QR code.
6+
---
7+
8+
# TermBeam vs the Traditional Way
9+
10+
TermBeam exists because accessing a terminal from your phone is surprisingly painful. There's no real equivalent tool — so instead of a competitor comparison, here's what the experience looks like with and without it.
11+
12+
## Without TermBeam
13+
14+
To get a terminal on your phone today, you'd typically:
15+
16+
1. Install a dedicated SSH client app (Termius, Prompt, JuiceSSH…)
17+
2. Generate SSH keys and transfer them to your phone
18+
3. Configure your server's firewall or set up port forwarding
19+
4. Optionally set up a VPN or tunnel for internet access
20+
5. Manually type your server's IP address on a tiny keyboard
21+
6. Work in a UI designed for desktop monitors — no touch-friendly keys, no tabs, no split view
22+
23+
That's a lot of setup for "I just want to check something on my server."
24+
25+
## With TermBeam
26+
27+
```bash
28+
npx termbeam
29+
```
30+
31+
Scan the QR code with your phone. Done.
32+
33+
You get a full terminal with a touch keyboard bar (Ctrl, Tab, arrows, Esc), multi-session tabs, split view, file upload, 12 themes — all designed for mobile from the ground up.
34+
35+
!!! tip "No install on the client"
36+
TermBeam runs in any browser. Your phone doesn't need an app, SSH keys, or any configuration. The built-in DevTunnel means it works over the internet automatically — no port forwarding needed.
37+
38+
## When SSH is Still the Right Choice
39+
40+
TermBeam isn't a replacement for SSH. Use SSH when you need:
41+
42+
- **Automated access** — CI/CD pipelines, scripts, cron jobs
43+
- **File transfers** — SCP/SFTP for bulk file operations
44+
- **Long-running production sessions** — pair with tmux or screen
45+
- **Key-based authentication** — environments that require certificate-based auth
46+
47+
!!! info "They work great together"
48+
A common setup is SSH (with tmux) for long-running production sessions and TermBeam for quick mobile access when you're away from your desk.

‎docs/use-cases.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
title: Use Cases
3+
description: >-
4+
Practical scenarios for TermBeam — server management from your phone, pair
5+
programming, teaching, on-call incident response, and IoT device access.
6+
---
7+
8+
# Use Cases
9+
10+
TermBeam is built for situations where you need terminal access fast, from any device, without installing anything on the client side. Here are the most common scenarios.
11+
12+
---
13+
14+
## Remote Server Management
15+
16+
Access your server terminal from your phone while commuting, traveling, or away from your desk.
17+
18+
Start TermBeam on the server, scan the QR code with your phone, and you're in — no SSH client needed. The touch keyboard bar gives you quick access to arrow keys, Ctrl, Tab, and other keys that are awkward to type on a phone keyboard.
19+
20+
```bash
21+
termbeam --port 3000
22+
```
23+
24+
!!! tip
25+
Use `termbeam service install` to run TermBeam as a background service so it's always available when you need it. See [Running in Background](running-in-background.md) for details.
26+
27+
---
28+
29+
## Pair Programming
30+
31+
Share a terminal session with a colleague via QR code or URL — no screen-sharing software required.
32+
33+
Start TermBeam with `--lan` to make it accessible on your local network, or use the default tunnel for internet access. Your colleague opens the link, authenticates with the shared password, and you're both looking at the same terminal. Multiple people can attach to the same session simultaneously.
34+
35+
**Local network:**
36+
37+
```bash
38+
termbeam --lan
39+
```
40+
41+
**Over the internet (via built-in tunnel):**
42+
43+
```bash
44+
termbeam
45+
```
46+
47+
!!! info
48+
All connected clients see the same output in real time. Input from any client is sent to the same PTY, so coordinate who's typing — or use separate sessions via tabs.
49+
50+
---
51+
52+
## Teaching & Workshops
53+
54+
Let students connect to an instructor's terminal from their own devices — laptops, tablets, or phones.
55+
56+
The instructor starts TermBeam with a known password and shares the QR code on a projector or via chat. Students scan it and watch the terminal live. This is useful for live coding demos, command-line workshops, and debugging walkthroughs where screen-sharing introduces lag or resolution issues.
57+
58+
```bash
59+
termbeam --password workshop2025
60+
```
61+
62+
!!! warning
63+
When sharing with a group, everyone who has the password can send input to the terminal. For read-only demos, ask participants not to type — there's no built-in read-only mode yet.
64+
65+
---
66+
67+
## DevOps On-Call
68+
69+
Respond to incidents from your mobile device — check logs, restart services, and run diagnostics without opening a laptop.
70+
71+
TermBeam's tunnel support means you can reach your terminal from anywhere, even on cellular data. Combined with `termbeam service`, you can have a persistent TermBeam instance ready on your jump host or bastion server, waiting for when you need it.
72+
73+
```bash
74+
termbeam service install --password "$ONCALL_PASSWORD" --port 4000
75+
```
76+
77+
!!! tip
78+
Pair TermBeam with a process manager like PM2 or systemd so the service restarts automatically if the host reboots. See [Running in Background](running-in-background.md).
79+
80+
---
81+
82+
## IoT & Raspberry Pi
83+
84+
Access headless devices from any browser — no monitor, keyboard, or SSH client required.
85+
86+
Install Node.js on your Raspberry Pi (or similar device), run `npx termbeam --lan`, and connect from your phone or laptop on the same network. This is especially useful during initial setup when you haven't configured SSH keys or don't have a spare monitor.
87+
88+
```bash
89+
npx termbeam --lan --port 3000
90+
```
91+
92+
!!! info
93+
For devices behind NAT or on a different network, omit `--lan` to use the built-in tunnel and access the device over the internet.

‎landing/index.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,41 @@
1414
content="Access your terminal from your phone, tablet, or any browser. No SSH, no config — one command."
1515
/>
1616
<meta property="og:type" content="website" />
17+
<meta property="og:url" content="https://termbeam.pages.dev" />
18+
<meta property="og:image" content="https://termbeam.pages.dev/mobile-terminal.jpeg" />
1719
<meta name="twitter:card" content="summary_large_image" />
20+
<meta name="twitter:image" content="https://termbeam.pages.dev/mobile-terminal.jpeg" />
21+
<meta name="theme-color" content="#0f0f23" />
22+
<link rel="canonical" href="https://termbeam.pages.dev" />
1823
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
24+
<link rel="apple-touch-icon" href="/favicon.svg" />
1925
<link rel="preconnect" href="https://fonts.googleapis.com" />
2026
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
2127
<link
2228
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap"
2329
rel="stylesheet"
2430
/>
2531
<link rel="stylesheet" href="/src/style.css" />
32+
<script type="application/ld+json">
33+
{
34+
"@context": "https://schema.org",
35+
"@type": "SoftwareApplication",
36+
"name": "TermBeam",
37+
"description": "Beam your terminal to any device — mobile-optimized web terminal with multi-session support",
38+
"url": "https://termbeam.pages.dev",
39+
"applicationCategory": "DeveloperApplication",
40+
"operatingSystem": "Windows, macOS, Linux",
41+
"offers": {
42+
"@type": "Offer",
43+
"price": "0",
44+
"priceCurrency": "USD"
45+
},
46+
"license": "https://opensource.org/licenses/MIT",
47+
"codeRepository": "https://github.com/dorlugasigal/termbeam"
48+
}
49+
</script>
50+
<!-- Analytics: Uncomment and update data-domain to enable Plausible Analytics -->
51+
<!-- <script defer data-domain="termbeam.pages.dev" src="https://plausible.io/js/script.js"></script> -->
2652
</head>
2753
<body>
2854
<!-- Nav -->
@@ -121,6 +147,11 @@ <h1 data-reveal data-reveal-delay="1">
121147
</div>
122148

123149
<div class="hero-badges" data-reveal data-reveal-delay="5">
150+
<a href="https://github.com/dorlugasigal/TermBeam"
151+
><img
152+
src="https://img.shields.io/github/stars/dorlugasigal/termbeam?style=flat-square&color=c084fc&label=stars"
153+
alt="GitHub stars"
154+
/></a>
124155
<a href="https://www.npmjs.com/package/termbeam"
125156
><img
126157
src="https://img.shields.io/npm/v/termbeam.svg?style=flat-square&color=0078d4"
@@ -374,6 +405,43 @@ <h3>Use your terminal</h3>
374405
</div>
375406
</section>
376407

408+
<!-- Comparison -->
409+
<section class="comparison">
410+
<div class="section-container">
411+
<div class="section-header" data-reveal>
412+
<span class="section-label">The old way vs TermBeam</span>
413+
<h2>Terminal on your phone<br />shouldn't be this hard</h2>
414+
</div>
415+
416+
<div class="comparison-cards" data-reveal>
417+
<div class="comparison-card comparison-card--old">
418+
<h3>Without TermBeam</h3>
419+
<ol class="comparison-steps">
420+
<li>Install an SSH client on your phone</li>
421+
<li>Generate and copy SSH keys</li>
422+
<li>Configure port forwarding or VPN</li>
423+
<li>Type your server IP on a tiny keyboard</li>
424+
<li>Fight with a UI built for desktops</li>
425+
<li>No special keys — good luck with Ctrl+C</li>
426+
<li>One session, no tabs, no split view</li>
427+
</ol>
428+
</div>
429+
<div class="comparison-card comparison-card--new">
430+
<h3>With TermBeam</h3>
431+
<ol class="comparison-steps">
432+
<li>Run <code>npx termbeam</code></li>
433+
<li>Scan the QR code</li>
434+
<li>Done</li>
435+
</ol>
436+
<p class="comparison-bonus">
437+
Plus: touch keyboard bar, multi-session tabs, split view, file upload, 12 themes — all
438+
built for mobile.
439+
</p>
440+
</div>
441+
</div>
442+
</div>
443+
</section>
444+
377445
<!-- CTA -->
378446
<section class="cta">
379447
<div class="cta-glow"></div>

‎landing/public/google25aa5fbb7693526f.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
google-site-verification: google25aa5fbb7693526f.html

‎landing/public/robots.txt‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
User-agent: *
2+
Allow: /
3+
4+
Sitemap: https://termbeam.pages.dev/sitemap.xml

‎landing/public/sitemap.xml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
3+
<url>
4+
<loc>https://termbeam.pages.dev</loc>
5+
<changefreq>weekly</changefreq>
6+
<priority>1.0</priority>
7+
</url>
8+
</urlset>

‎landing/src/style.css‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -827,6 +827,114 @@ code {
827827
letter-spacing: 0.05em;
828828
}
829829

830+
/* ─── Comparison Cards ────────────────────────────────────── */
831+
.comparison {
832+
padding: 4rem 0;
833+
border-top: 1px solid var(--border);
834+
}
835+
836+
.comparison-cards {
837+
display: grid;
838+
grid-template-columns: 1fr 1fr;
839+
gap: 1.5rem;
840+
max-width: 900px;
841+
margin: 0 auto;
842+
}
843+
844+
.comparison-card {
845+
padding: 2rem;
846+
border-radius: var(--radius-lg);
847+
border: 1px solid var(--border);
848+
}
849+
850+
.comparison-card h3 {
851+
font-size: 1.1rem;
852+
font-weight: 700;
853+
margin-bottom: 1.25rem;
854+
letter-spacing: -0.01em;
855+
}
856+
857+
.comparison-card--old {
858+
background: var(--surface);
859+
}
860+
861+
.comparison-card--old h3 {
862+
color: var(--text-muted);
863+
}
864+
865+
.comparison-card--new {
866+
background: rgba(99, 102, 241, 0.06);
867+
border-color: rgba(99, 102, 241, 0.2);
868+
}
869+
870+
.comparison-card--new h3 {
871+
color: var(--accent-light);
872+
}
873+
874+
.comparison-steps {
875+
list-style: none;
876+
padding: 0;
877+
margin: 0;
878+
counter-reset: step;
879+
}
880+
881+
.comparison-steps li {
882+
counter-increment: step;
883+
position: relative;
884+
padding: 0.5rem 0 0.5rem 2rem;
885+
font-size: 0.92rem;
886+
line-height: 1.5;
887+
color: var(--text-secondary);
888+
}
889+
890+
.comparison-steps li::before {
891+
content: counter(step);
892+
position: absolute;
893+
left: 0;
894+
width: 1.4rem;
895+
height: 1.4rem;
896+
display: flex;
897+
align-items: center;
898+
justify-content: center;
899+
border-radius: 50%;
900+
font-size: 0.72rem;
901+
font-weight: 700;
902+
top: 0.55rem;
903+
}
904+
905+
.comparison-card--old .comparison-steps li::before {
906+
background: rgba(255, 255, 255, 0.05);
907+
color: var(--text-muted);
908+
}
909+
910+
.comparison-card--new .comparison-steps li::before {
911+
background: rgba(99, 102, 241, 0.15);
912+
color: var(--accent-light);
913+
}
914+
915+
.comparison-card--new .comparison-steps li {
916+
color: var(--text);
917+
}
918+
919+
.comparison-card--new .comparison-steps li:last-child {
920+
font-weight: 700;
921+
color: var(--accent-light);
922+
}
923+
924+
.comparison-bonus {
925+
margin-top: 1.25rem;
926+
padding-top: 1rem;
927+
border-top: 1px solid rgba(99, 102, 241, 0.15);
928+
font-size: 0.85rem;
929+
color: var(--text-secondary);
930+
line-height: 1.6;
931+
}
932+
933+
.comparison-bonus code {
934+
background: none;
935+
color: var(--text-muted);
936+
}
937+
830938
/* ─── CTA ─────────────────────────────────────────────────── */
831939
.cta {
832940
padding: 4rem 0;
@@ -1056,6 +1164,10 @@ code {
10561164
padding: 4rem 0;
10571165
}
10581166

1167+
.comparison-cards {
1168+
grid-template-columns: 1fr;
1169+
}
1170+
10591171
.cta {
10601172
padding: 5rem 0;
10611173
}

0 commit comments

Comments
 (0)