docs: update website remote mobile story
This commit is contained in:
Ogulcan Celik
parent
887d358de8
commit
d7d31df062
|
|
@ -0,0 +1,93 @@
|
|||
Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
|
|
@ -1,3 +1,14 @@
|
|||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
font-style: normal;
|
||||
font-weight: 400 700;
|
||||
font-display: block;
|
||||
src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
|
||||
U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
|
||||
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
|
|
@ -63,6 +74,13 @@ body {
|
|||
overflow-x: clip;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
|
|
@ -386,6 +404,10 @@ a:hover {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.prose-block p + p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* ── Detach flow ── */
|
||||
.detach-flow {
|
||||
background: var(--mantle);
|
||||
|
|
@ -416,6 +438,113 @@ a:hover {
|
|||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
/* ── Access modes ── */
|
||||
.access-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.access-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
background: var(--mantle);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.access-kicker {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.access-card h3 {
|
||||
margin-bottom: 0.65rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.access-card p {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.7;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.mini-flow {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 0.35rem;
|
||||
min-height: 3.6rem;
|
||||
margin-top: auto;
|
||||
padding-top: 0.85rem;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 0.74rem;
|
||||
line-height: 1.6;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.mini-flow .prompt {
|
||||
color: var(--green);
|
||||
}
|
||||
.mini-flow .cmd {
|
||||
color: var(--white);
|
||||
}
|
||||
.mini-flow .key {
|
||||
color: var(--blue);
|
||||
}
|
||||
.mini-flow .comment,
|
||||
.mini-flow .dim {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
/* ── Mobile proof ── */
|
||||
.mobile-proof {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 260px));
|
||||
justify-content: center;
|
||||
gap: 1.25rem;
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.phone-shot {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.phone-shot-frame {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 28px;
|
||||
background:
|
||||
radial-gradient(circle at 50% 0%, rgba(137, 180, 250, 0.08), transparent 38%),
|
||||
var(--mantle);
|
||||
box-shadow: inset 0 0 0 1px rgba(205, 214, 244, 0.025);
|
||||
}
|
||||
|
||||
.phone-shot img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid var(--border-bright);
|
||||
border-radius: 20px;
|
||||
background: var(--base);
|
||||
}
|
||||
|
||||
.phone-shot figcaption {
|
||||
margin-top: 0.65rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-faint);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Awareness ── */
|
||||
.awareness-split {
|
||||
display: grid;
|
||||
|
|
@ -688,6 +817,21 @@ a:hover {
|
|||
.awareness-panel-img {
|
||||
width: min(100%, 220px);
|
||||
}
|
||||
.access-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.mobile-proof {
|
||||
grid-template-columns: minmax(0, 260px);
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.phone-shot-frame {
|
||||
padding: 0.45rem;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.phone-shot img {
|
||||
border-radius: 15px;
|
||||
}
|
||||
.api-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,11 +39,12 @@
|
|||
|
||||
<link rel="icon" type="image/png" href="/assets/logo.png" />
|
||||
<link rel="apple-touch-icon" href="/assets/logo.png" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
rel="preload"
|
||||
href="/assets/fonts/jetbrains-mono-latin.woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossorigin
|
||||
/>
|
||||
<link rel="stylesheet" href="/css/style.css" />
|
||||
</head>
|
||||
|
|
@ -73,9 +74,10 @@
|
|||
<span class="text-blocked">blocked</span>,
|
||||
<span class="text-working">working</span>,
|
||||
<span class="text-done">done</span>. detach and reattach,
|
||||
agents keep running. no gui app, no electron, no mac-only
|
||||
native wrapper. you see the agent's own terminal, not
|
||||
someone's interpretation of it.
|
||||
agents keep running. attach locally, over ssh, or as a thin
|
||||
client to a remote server. no gui app, no electron, no
|
||||
mac-only native wrapper. you see the agent's own terminal,
|
||||
not someone's interpretation of it.
|
||||
</p>
|
||||
</div>
|
||||
<div class="install-row">
|
||||
|
|
@ -230,13 +232,34 @@
|
|||
</div>
|
||||
<div class="prose-block">
|
||||
<p>
|
||||
start herdr on your desktop or server. run your agents,
|
||||
split panes, do your work. press
|
||||
<strong>ctrl+b q</strong> to detach. close your terminal,
|
||||
close your laptop; your agents keep running. open a new
|
||||
terminal, run <strong>herdr</strong>, you're back. same
|
||||
session, same panes, same agents.
|
||||
herdr runs as a background session server by default. run
|
||||
your agents, split panes, do your work, then press
|
||||
<strong>ctrl+b q</strong> to detach the client. close your
|
||||
terminal or laptop; the panes keep running. open herdr again
|
||||
and you reattach to the same session.
|
||||
</p>
|
||||
<p>
|
||||
named sessions give each project or context its own panes,
|
||||
tabs, workspaces, sockets, and runtime state while sharing
|
||||
the same global config.
|
||||
</p>
|
||||
</div>
|
||||
<div class="detach-flow" style="margin-top: 1.5rem">
|
||||
<div class="detach-line">
|
||||
<span class="prompt">$</span> <span class="cmd">herdr</span>
|
||||
<span class="key">--session</span>
|
||||
<span class="comment">work</span>
|
||||
</div>
|
||||
<div class="detach-line">
|
||||
<span class="prompt">$</span> <span class="cmd">herdr</span>
|
||||
<span class="key">session attach</span>
|
||||
<span class="comment">side-project</span>
|
||||
</div>
|
||||
<div class="detach-line">
|
||||
<span class="dim">
|
||||
separate sessions, same config, persistent agents.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -252,25 +275,92 @@
|
|||
</div>
|
||||
<div class="prose-block">
|
||||
<p>
|
||||
need to check on your agents from your phone? just ssh in
|
||||
and run herdr. any ssh client works. no app to download, no
|
||||
account to create.
|
||||
once the session is running, attach to it three ways. keep
|
||||
the work on the machine that has the code, the keys, and the
|
||||
agents. connect from wherever you are.
|
||||
</p>
|
||||
</div>
|
||||
<div class="detach-flow" style="margin-top: 1.5rem">
|
||||
<div class="detach-line">
|
||||
<span class="prompt">$</span> <span class="cmd">ssh</span>
|
||||
<span class="comment">you@yourserver</span>
|
||||
<div class="access-grid">
|
||||
<div class="access-card">
|
||||
<div class="access-kicker">server</div>
|
||||
<h3>ssh in, run herdr</h3>
|
||||
<p>
|
||||
use it like tmux on a remote box. herdr starts the
|
||||
session there, and your panes keep running after you
|
||||
detach.
|
||||
</p>
|
||||
<div class="mini-flow">
|
||||
<div>
|
||||
<span class="prompt">$</span>
|
||||
<span class="cmd">ssh</span>
|
||||
<span class="comment">you@server</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="prompt">$</span>
|
||||
<span class="cmd">herdr</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detach-line">
|
||||
<span class="prompt">$</span> <span class="cmd">herdr</span>
|
||||
<div class="access-card">
|
||||
<div class="access-kicker">phone</div>
|
||||
<h3>ssh from mobile</h3>
|
||||
<p>
|
||||
narrow terminals get a responsive tui instead of a
|
||||
squeezed desktop layout. spaces, tabs, and agents stay
|
||||
reachable from a phone ssh client.
|
||||
</p>
|
||||
<div class="mini-flow">
|
||||
<div>
|
||||
<span class="prompt">$</span>
|
||||
<span class="cmd">ssh</span>
|
||||
<span class="comment">you@server</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="prompt">$</span>
|
||||
<span class="cmd">herdr</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detach-line">
|
||||
<span class="dim">
|
||||
same session, same agents, same state.</span
|
||||
>
|
||||
<div class="access-card">
|
||||
<div class="access-kicker">thin client</div>
|
||||
<h3>herdr --remote host</h3>
|
||||
<p>
|
||||
run herdr on your laptop and target any ssh config host.
|
||||
herdr connects over ssh, bootstraps the remote server,
|
||||
and streams the tui back to your local terminal.
|
||||
</p>
|
||||
<div class="mini-flow">
|
||||
<div>
|
||||
<span class="prompt">$</span>
|
||||
<span class="cmd">herdr</span>
|
||||
<span class="key">--remote</span>
|
||||
<span class="comment">workbox</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-proof">
|
||||
<figure class="phone-shot">
|
||||
<div class="phone-shot-frame">
|
||||
<img
|
||||
src="/assets/mobile-terminal.jpeg"
|
||||
alt="herdr responsive terminal view over ssh on a phone"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<figcaption>terminal view over ssh</figcaption>
|
||||
</figure>
|
||||
<figure class="phone-shot">
|
||||
<div class="phone-shot-frame">
|
||||
<img
|
||||
src="/assets/mobile-switcher.jpeg"
|
||||
alt="herdr mobile switcher showing spaces tabs and agents on a phone"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<figcaption>responsive switcher</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="gap"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue