mirror of
https://github.com/backnotprop/plannotator.git
synced 2026-09-14 14:17:26 +08:00
feat: announce Herdr Annotate on the README and landing page
README gains a Herdr Annotate section after Annotate HTML Artifacts: the banner SVG and a TUI screenshot side by side, install one-liner, standalone Plannotator TUI pointer, and a header link row entry anchoring to it. Landing page: slim announce bar under the nav linking to the plugin repo, a "watch the demo" strip above the capabilities section linking to the X demo post, and the Workspaces waitlist pill redrawn as a blueprint chip (plan-grid fill, corner registration marks) replacing the rounded dot pill. Also fixes the hero shimmer under Firefox forced colors: Firefox drops the author gradient but leaves color: transparent standing, so the shimmer word and the command list rendered invisible when "Override the colors specified by the page: Always" (or OS high contrast) was active. The gradient is now declared once for both call sites behind @supports, forced-colors mode gets CanvasText with the animation stopped, and prefers-reduced-motion freezes the shimmer at a legible mid-palette slice.
This commit is contained in:
Michael Ramos
@@ -0,0 +1,23 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 140" role="img" aria-label="Herdr Annotate plugin banner">
|
||||
<defs>
|
||||
<linearGradient id="ha-gold" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0" stop-color="#f7ca5e"/>
|
||||
<stop offset="1" stop-color="#ec9d3f"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1.5" y="1.5" width="637" height="137" rx="18" fill="#171429" stroke="#312b52" stroke-width="3"/>
|
||||
<g font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif" font-weight="800" font-style="italic">
|
||||
<text x="70" y="84" font-size="58" fill="#c9c6f1">Herdr</text>
|
||||
<text x="238" y="84" font-size="58" fill="url(#ha-gold)">Annotate</text>
|
||||
</g>
|
||||
<path d="M74 104 C 180 114, 300 96, 390 102 S 520 108, 530 101" fill="none" stroke="#e0403a" stroke-width="8" stroke-linecap="round"/>
|
||||
<g transform="translate(58 104) rotate(28)">
|
||||
<rect x="-34" y="-6" width="28" height="12" rx="3" fill="#e0403a"/>
|
||||
<polygon points="-6,-6 10,0 -6,6" fill="#f2cda4"/>
|
||||
<polygon points="6,-1.6 10,0 6,1.6" fill="#4a2c17"/>
|
||||
</g>
|
||||
<g fill="#c9c6f1">
|
||||
<path d="M584 34 l4.5 11 11 4.5 -11 4.5 -4.5 11 -4.5 -11 -11 -4.5 11 -4.5 z"/>
|
||||
<path d="M612 66 l2.5 6 6 2.5 -6 2.5 -2.5 6 -2.5 -6 -6 -2.5 6 -2.5 z" opacity="0.7"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 773 KiB |
@@ -32,7 +32,7 @@
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.youtube.com/watch?v=a_AT7cEN_9I">Watch the og demo</a> · <a href="https://docs.plannotator.ai/open-source/start/installation">Installation guide</a> · <a href="https://plannotator.ai/">Official site</a> · <a href="https://github.com/plannotator/effective-html">Visual HTML Skills</a>
|
||||
<a href="https://www.youtube.com/watch?v=a_AT7cEN_9I">Watch the og demo</a> · <a href="https://docs.plannotator.ai/open-source/start/installation">Installation guide</a> · <a href="https://plannotator.ai/">Official site</a> · <a href="https://github.com/plannotator/effective-html">Visual HTML Skills</a> · <a href="#herdr-annotate-plannotator-in-the-terminal">Herdr Annotate</a>
|
||||
</p>
|
||||
|
||||
# Plannotator
|
||||
@@ -84,6 +84,24 @@ Review local changes or remote PRs. Comment on diffs, suggest code. Your comment
|
||||
<img src=".github/assets/html.webp" alt="Annotating a rendered HTML artifact" width="720" />
|
||||
</p>
|
||||
|
||||
## Herdr Annotate: Plannotator in the Terminal
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/plannotator/herdr-annotate">
|
||||
<img src=".github/assets/herdr-annotate-banner.svg" alt="Herdr Annotate" width="300" align="middle" />
|
||||
</a>
|
||||
|
||||
<img src=".github/assets/herdr-annotate.png" alt="Plannotator TUI annotating a markdown folder in the terminal" width="480" align="middle" />
|
||||
</p>
|
||||
|
||||
[Herdr Annotate](https://github.com/plannotator/herdr-annotate) brings Plannotator-style review to the terminal: annotate terminal text, review whole Markdown documents and your coding agent's replies inside [Herdr](https://herdr.dev), and send the feedback straight back to the agent as its next message. Works with Claude Code, Codex, Pi, Copilot CLI, and Droid replies. Annotations are saved in the Plannotator data directory, so terminal reviews and app reviews compound.
|
||||
|
||||
```
|
||||
herdr plugin install plannotator/herdr-annotate
|
||||
```
|
||||
|
||||
Prefer it standalone? [Plannotator TUI](https://github.com/plannotator/plannotator-tui) powers the document review and runs without Herdr: `brew install plannotator/tap/plannotator-tui`.
|
||||
|
||||
---
|
||||
|
||||
## Commands
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
// Slim announcement bar under the nav. One announcement at a time; swap the
|
||||
// copy and href together when the next announcement lands.
|
||||
---
|
||||
<a href="https://github.com/plannotator/herdr-annotate" class="announce-bar" data-announce="herdr-annotate">
|
||||
<span class="announce-tag">New</span>
|
||||
<span class="announce-copy">Herdr Annotate: Plannotator-style review in the terminal</span>
|
||||
<span class="announce-arrow" aria-hidden="true">→</span>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.announce-bar {
|
||||
/* The site nav is fixed (h-12); offset so the bar sits below it, not under it. */
|
||||
margin-top: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.45rem 1rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.3;
|
||||
text-decoration: none;
|
||||
color: var(--foreground);
|
||||
background: oklch(from var(--primary) l c h / 0.14);
|
||||
border-bottom: 1px solid oklch(from var(--primary) l c h / 0.35);
|
||||
transition: background 150ms ease;
|
||||
}
|
||||
.announce-bar:hover {
|
||||
background: oklch(from var(--primary) l c h / 0.22);
|
||||
}
|
||||
.announce-tag {
|
||||
font-weight: 600;
|
||||
font-size: 0.68rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--primary);
|
||||
border: 1px solid oklch(from var(--primary) l c h / 0.4);
|
||||
border-radius: 999px;
|
||||
padding: 0.05rem 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.announce-copy {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.announce-arrow {
|
||||
color: var(--primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -3,6 +3,7 @@ import Base from '../layouts/Base.astro';
|
||||
import Nav from '../components/Nav.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import HeroSection from '../components/landing/HeroSection.astro';
|
||||
import AnnounceBar from '../components/landing/AnnounceBar.astro';
|
||||
import SocialProofBar from '../components/landing/SocialProofBar.astro';
|
||||
import AnnoReplace from '../components/landing/AnnoReplace.astro';
|
||||
---
|
||||
@@ -13,6 +14,8 @@ import AnnoReplace from '../components/landing/AnnoReplace.astro';
|
||||
<div class="min-h-screen bg-background text-foreground">
|
||||
<Nav />
|
||||
|
||||
<AnnounceBar />
|
||||
|
||||
<!-- Contained column — editorial feel -->
|
||||
<div class="max-w-4xl mx-auto border-x border-border/30">
|
||||
|
||||
@@ -22,6 +25,14 @@ import AnnoReplace from '../components/landing/AnnoReplace.astro';
|
||||
<!-- Social Proof -->
|
||||
<SocialProofBar />
|
||||
|
||||
<!-- Herdr Annotate demo strip -->
|
||||
<a href="https://x.com/plannotator/status/2093419561077154287?s=20" class="herdr-demo-strip landing-reveal">
|
||||
<svg class="herdr-demo-play" viewBox="0 0 12 12" aria-hidden="true"><path d="M3 1.5 L10 6 L3 10.5 Z" fill="currentColor"/></svg>
|
||||
<span class="herdr-demo-name">Herdr Annotate</span>
|
||||
<span class="herdr-demo-copy">watch the demo</span>
|
||||
<span aria-hidden="true">→</span>
|
||||
</a>
|
||||
|
||||
<!-- Capabilities -->
|
||||
<section class="py-16 px-8 border-t border-border/30 landing-reveal">
|
||||
<h2 class="font-display text-xl font-semibold tracking-tight mb-8 text-center">
|
||||
@@ -408,7 +419,7 @@ import AnnoReplace from '../components/landing/AnnoReplace.astro';
|
||||
<section class="workspaces-cta-band py-14 px-8 border-t border-border/30 landing-reveal">
|
||||
<div class="relative z-10 max-w-2xl mx-auto text-center">
|
||||
<span class="workspaces-cta-pill mb-4">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
|
||||
<span class="workspaces-cta-corners" aria-hidden="true"></span>
|
||||
Plannotator Workspaces · waitlist
|
||||
</span>
|
||||
<h2 class="font-display text-xl sm:text-2xl font-semibold tracking-tight mb-3">
|
||||
|
||||
@@ -495,8 +495,12 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Plasma shimmer — smooth cycle through brand palette */
|
||||
.anno-shimmer {
|
||||
/* Plasma shimmer — smooth cycle through brand palette.
|
||||
Shared with .cap-cmd (capability list commands), which is the other shimmer
|
||||
call site; keep both selectors on every rule below so the two stay in step. */
|
||||
.anno-shimmer,
|
||||
.cap-cmd {
|
||||
color: var(--primary);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--muted-foreground) 0%,
|
||||
@@ -508,10 +512,45 @@
|
||||
var(--muted-foreground) 100%
|
||||
);
|
||||
background-size: 300% 100%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
animation: anno-shimmer 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* `color: transparent` is only safe where the gradient is really clipped to the
|
||||
glyphs, so it stays behind the support guard with the clip itself. The plain
|
||||
`color` above is what any UA that skips this block paints instead. */
|
||||
@supports (background-clip: text) or (-webkit-background-clip: text) {
|
||||
.anno-shimmer,
|
||||
.cap-cmd {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
animation: anno-shimmer 6s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.anno-shimmer,
|
||||
.cap-cmd {
|
||||
animation: none;
|
||||
background-position: 50% center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors — Firefox's "Override the colors specified by the page with my
|
||||
selections above", Windows High Contrast, GTK high-contrast themes. The UA
|
||||
drops the gradient to `background-image: none`, but Firefox keeps the author's
|
||||
`color: transparent`, so the text vanishes into the forced background (it
|
||||
reads as a blank gap on a light color set, a black one on a dark set).
|
||||
Chromium forces the color to CanvasText and stays legible. Hand the glyphs a
|
||||
real color back so both browsers behave the same. */
|
||||
@media (forced-colors: active) {
|
||||
.anno-shimmer,
|
||||
.cap-cmd {
|
||||
background: none;
|
||||
-webkit-background-clip: border-box;
|
||||
background-clip: border-box;
|
||||
color: CanvasText;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anno-shimmer {
|
||||
@@ -911,25 +950,12 @@
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
/* The shimmer gradient, its support guard and its forced-colors and
|
||||
reduced-motion fallbacks are declared once beside .anno-shimmer above. */
|
||||
.cap-cmd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--muted-foreground) 0%,
|
||||
var(--primary) 15%,
|
||||
oklch(0.70 0.22 320) 30%,
|
||||
var(--accent) 45%,
|
||||
var(--primary) 60%,
|
||||
oklch(0.70 0.22 320) 75%,
|
||||
var(--muted-foreground) 100%
|
||||
);
|
||||
background-size: 300% 100%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
animation: anno-shimmer 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.cap-desc {
|
||||
@@ -1303,17 +1329,77 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Blueprint chip: square, faint plan-grid fill, registration marks on all
|
||||
four corners (::before/::after take TL and BR; the inner corners span
|
||||
takes TR and BL). */
|
||||
.workspaces-cta-pill {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--primary);
|
||||
border: 1px solid oklch(from var(--primary) l c h / 0.45);
|
||||
background: oklch(from var(--primary) l c h / 0.08);
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid oklch(from var(--primary) l c h / 0.3);
|
||||
background-color: oklch(from var(--primary) l c h / 0.05);
|
||||
background-image:
|
||||
linear-gradient(oklch(from var(--primary) l c h / 0.14) 1px, transparent 1px),
|
||||
linear-gradient(90deg, oklch(from var(--primary) l c h / 0.14) 1px, transparent 1px);
|
||||
background-size: 8px 8px;
|
||||
padding: 0.375rem 0.875rem;
|
||||
}
|
||||
|
||||
.workspaces-cta-pill::before,
|
||||
.workspaces-cta-pill::after,
|
||||
.workspaces-cta-corners::before,
|
||||
.workspaces-cta-corners::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 0 solid var(--primary);
|
||||
}
|
||||
|
||||
.workspaces-cta-pill::before { top: -3px; left: -3px; border-top-width: 1.5px; border-left-width: 1.5px; }
|
||||
.workspaces-cta-pill::after { bottom: -3px; right: -3px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
|
||||
|
||||
.workspaces-cta-corners {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.workspaces-cta-corners::before { top: -3px; right: -3px; border-top-width: 1.5px; border-right-width: 1.5px; }
|
||||
.workspaces-cta-corners::after { bottom: -3px; left: -3px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
|
||||
|
||||
/* Slim Herdr Annotate demo strip above the capabilities section */
|
||||
.herdr-demo-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
text-decoration: none;
|
||||
color: var(--muted-foreground);
|
||||
border-top: 1px solid oklch(from var(--border) l c h / 0.3);
|
||||
transition: color 150ms ease, background 150ms ease;
|
||||
}
|
||||
|
||||
.herdr-demo-strip:hover {
|
||||
color: var(--foreground);
|
||||
background: oklch(from var(--primary) l c h / 0.06);
|
||||
}
|
||||
|
||||
.herdr-demo-play {
|
||||
width: 0.65rem;
|
||||
height: 0.65rem;
|
||||
color: var(--primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.herdr-demo-name {
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user