From 3f9649b76d076816443ca44bd94ae641a6c292ef Mon Sep 17 00:00:00 2001
From: seanseannery <seansemail@example.com>
Date: Sat, 7 Mar 2026 01:17:19 -0800
Subject: [PATCH 1/3] fix: left-align terminal demo, 20s looping animation,
 reorder install tabs

---
 site/index.html | 20 ++++++++++----------
 site/style.css  | 42 +++++++++++++++++++++++++++++++-----------
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/site/index.html b/site/index.html
index 6bbc61c..c7825d0 100644
--- a/site/index.html
+++ b/site/index.html
@@ -40,19 +40,19 @@ <h1>ops</h1>
           <span class="terminal-dot" style="background:#28c840;"></span>
         </div>
         <div class="terminal-body">
-          <div class="line" style="animation-delay:0.5s;">
+          <div class="line">
             <span class="prompt">$</span><span class="cmd"> ops prod tail-logs</span>
           </div>
-          <div class="line" style="animation-delay:1.5s;">
+          <div class="line">
             <span class="out">Fetching logs from /aws/ecs/my-service-prod ...</span>
           </div>
-          <div class="line" style="animation-delay:2.5s;">
+          <div class="line">
             <span class="prompt">$</span><span class="cmd"> ops prod check-alarms</span>
           </div>
-          <div class="line" style="animation-delay:3.5s;">
+          <div class="line">
             <span class="out">No alarms in ALARM state. All clear.</span>
           </div>
-          <span class="cursor" style="animation-delay:3.5s;"></span>
+          <span class="cursor"></span>
         </div>
       </div>
     </div>
@@ -63,9 +63,13 @@ <h1>ops</h1>
     <div class="container">
       <h2>Installation</h2>
       <div class="install-tabs">
+        <button class="tab-btn" data-tab="tab-curl">curl</button>
         <button class="tab-btn" data-tab="tab-brew">Homebrew</button>
         <button class="tab-btn" data-tab="tab-npm">npm</button>
-        <button class="tab-btn" data-tab="tab-curl">curl</button>
+      </div>
+
+      <div id="tab-curl" class="tab-content code-block">
+        <pre><code>curl -fsSL https://raw.githubusercontent.com/seanseannery/opsfile/main/install/install.sh | bash</code></pre>
       </div>
 
       <div id="tab-brew" class="tab-content code-block">
@@ -76,10 +80,6 @@ <h2>Installation</h2>
       <div id="tab-npm" class="tab-content code-block">
         <pre><code>npm install -g github:seanseannery/opsfile</code></pre>
       </div>
-
-      <div id="tab-curl" class="tab-content code-block">
-        <pre><code>curl -fsSL https://raw.githubusercontent.com/seanseannery/opsfile/main/install/install.sh | bash</code></pre>
-      </div>
     </div>
   </section>
 
diff --git a/site/style.css b/site/style.css
index 9b999e5..d1f0aca 100644
--- a/site/style.css
+++ b/site/style.css
@@ -194,17 +194,18 @@ a:hover {
   font-family: monospace;
   font-size: 0.9rem;
   line-height: 1.8;
+  text-align: left;
 }
 
-.line {
-  opacity: 0;
-  animation: appear 0.3s ease forwards;
-}
+/* Each line encodes its delay as a % of the 20s cycle so infinite loops work.
+   Line 1: appears at 0.5s (2%), Line 2: 1.5s (7%), Line 3: 2.5s (12%), Line 4: 3.5s (17%).
+   All lines fade out at 88–96% then reset to 0 for the next loop. */
+.line { opacity: 0; }
 
-.line:nth-child(1) { animation-delay: 0.5s; }
-.line:nth-child(2) { animation-delay: 1.5s; }
-.line:nth-child(3) { animation-delay: 2.5s; }
-.line:nth-child(4) { animation-delay: 3.5s; }
+.line:nth-child(1) { animation: appear-1 20s ease infinite; }
+.line:nth-child(2) { animation: appear-2 20s ease infinite; }
+.line:nth-child(3) { animation: appear-3 20s ease infinite; }
+.line:nth-child(4) { animation: appear-4 20s ease infinite; }
 
 .prompt { color: var(--green); }
 .cmd    { color: var(--bright); }
@@ -219,9 +220,28 @@ a:hover {
   animation: blink 1s step-end infinite;
 }
 
-@keyframes appear {
-  from { opacity: 0; transform: translateY(4px); }
-  to   { opacity: 1; transform: none; }
+@keyframes appear-1 {
+  0%,   2%  { opacity: 0; transform: translateY(4px); }
+  4%,  88%  { opacity: 1; transform: none; }
+  96%, 100% { opacity: 0; transform: none; }
+}
+
+@keyframes appear-2 {
+  0%,   7%  { opacity: 0; transform: translateY(4px); }
+  9%,  88%  { opacity: 1; transform: none; }
+  96%, 100% { opacity: 0; transform: none; }
+}
+
+@keyframes appear-3 {
+  0%,  12%  { opacity: 0; transform: translateY(4px); }
+  14%, 88%  { opacity: 1; transform: none; }
+  96%, 100% { opacity: 0; transform: none; }
+}
+
+@keyframes appear-4 {
+  0%,  17%  { opacity: 0; transform: translateY(4px); }
+  19%, 88%  { opacity: 1; transform: none; }
+  96%, 100% { opacity: 0; transform: none; }
 }
 
 @keyframes blink {

From 8cb96c06f4ce01c7164f5d38f2e6d98d5d201545 Mon Sep 17 00:00:00 2001
From: seanseannery <seansemail@example.com>
Date: Sat, 7 Mar 2026 01:25:48 -0800
Subject: [PATCH 2/3] feat: Opsfile branding, syntax highlighting, copy button,
 terminal examples

---
 site/index.html | 73 +++++++++++++++++++++++++++++--------------------
 site/style.css  | 59 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 103 insertions(+), 29 deletions(-)

diff --git a/site/index.html b/site/index.html
index c7825d0..532f483 100644
--- a/site/index.html
+++ b/site/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="ops — like make, but for live operations commands">
-  <title>ops — live operations CLI</title>
+  <title>Opsfile — live operations CLI</title>
   <link rel="stylesheet" href="./style.css">
 </head>
 <body>
@@ -12,7 +12,7 @@
   <!-- HEADER -->
   <header class="site-header">
     <div class="container">
-      <span class="logo">ops</span>
+      <span class="logo">Opsfile</span>
       <nav class="site-nav">
         <a href="#install">Install</a>
         <a href="#usage">Usage</a>
@@ -24,8 +24,8 @@
   <!-- HERO -->
   <section class="hero">
     <div class="container">
-      <h1>ops</h1>
-      <p class="tagline">like make, but for live operations</p>
+      <h1>Opsfile</h1>
+      <p class="tagline">Like <code>make</code>, but for common live ops commands</p>
       <p class="subtitle">Create an Opsfile. Run ops [env] [command]. Done.</p>
       <div class="cta-buttons">
         <a href="#install" class="btn-primary">Install</a>
@@ -91,35 +91,34 @@ <h2>Getting Started</h2>
       <h3>Step 1: Create an Opsfile</h3>
       <p>Create an <code>Opsfile</code> in your repo root. It uses Makefile-style syntax:</p>
       <div class="opsfile-example code-block">
-        <pre><code># Variables — prefix with environment name to scope them
-prod_AWS_ACCOUNT=1234567
-preprod_AWS_ACCOUNT=8765431
-
-# Commands — define per-environment shell lines
-# Use "default" as a fallback when env-specific block is absent
-tail-logs:
-    default:
-        aws cloudwatch logs --tail $(AWS_ACCOUNT)
-    local:
+        <pre><code><span class="sh-comment"># Variables — prefix with environment name to scope them</span>
+<span class="sh-varname">prod_AWS_ACCOUNT</span>=<span class="sh-val">1234567</span>
+<span class="sh-varname">preprod_AWS_ACCOUNT</span>=<span class="sh-val">8765431</span>
+
+<span class="sh-comment"># Commands — define per-environment shell lines</span>
+<span class="sh-comment"># Use "default" as a fallback when env-specific block is absent</span>
+<span class="sh-cmd">tail-logs</span>:
+    <span class="sh-env">default</span>:
+        aws cloudwatch logs --tail <span class="sh-subst">$(AWS_ACCOUNT)</span>
+    <span class="sh-env">local</span>:
         docker logs myapp --follow
 
-list-instance-ips:
-    prod:
+<span class="sh-cmd">list-instance-ips</span>:
+    <span class="sh-env">prod</span>:
         aws ec2 --list-instances
-    preprod:
+    <span class="sh-env">preprod</span>:
         aws ecs cluster --list-instances
 
-# Shell environment variables are injected automatically using the same $(VAR) syntax.
-# No declaration needed — if ops can't find it in the Opsfile, it falls back to env variables
-show-profile:
-    default:
-        echo "Using AWS profile: $(AWS_PROFILE)"</code></pre>
+<span class="sh-comment"># Shell env vars are injected automatically — ops falls back to env if not in Opsfile</span>
+<span class="sh-cmd">show-profile</span>:
+    <span class="sh-env">default</span>:
+        echo "Using AWS profile: <span class="sh-subst">$(AWS_PROFILE)</span>"</code></pre>
       </div>
 
       <h3>Step 2: Run ops commands</h3>
       <p>Run commands with the following syntax:</p>
-      <div class="code-block">
-        <pre><code>ops [flags] &lt;your_environment&gt; &lt;your_command&gt; [any-command-args]</code></pre>
+      <div class="bash-example">
+        <span class="prompt">$</span> ops [flags] &lt;environment&gt; &lt;command&gt; [args]
       </div>
 
       <table>
@@ -140,11 +139,11 @@ <h3>Step 2: Run ops commands</h3>
       </table>
 
       <h4>Examples:</h4>
-      <div class="code-block">
-        <pre><code>ops preprod instance-count
-ops prod open-dashboard
-ops local logs
-ops prod k8s -namespace myspace</code></pre>
+      <div class="bash-example">
+        <div><span class="prompt">$</span> ops preprod instance-count</div>
+        <div><span class="prompt">$</span> ops prod open-dashboard</div>
+        <div><span class="prompt">$</span> ops local logs</div>
+        <div><span class="prompt">$</span> ops prod k8s -namespace myspace</div>
       </div>
     </div>
   </section>
@@ -207,6 +206,7 @@ <h2>Links</h2>
   </footer>
 
   <script>
+    // Tab switcher
     document.querySelectorAll('.tab-btn').forEach(btn => {
       btn.addEventListener('click', () => {
         document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
@@ -216,6 +216,21 @@ <h2>Links</h2>
       });
     });
     document.querySelector('.tab-btn').click();
+
+    // Copy buttons on install code blocks
+    document.querySelectorAll('.install-section .code-block').forEach(block => {
+      const btn = document.createElement('button');
+      btn.className = 'copy-btn';
+      btn.textContent = 'Copy';
+      btn.addEventListener('click', () => {
+        const code = block.querySelector('code');
+        navigator.clipboard.writeText(code.textContent.trim()).then(() => {
+          btn.textContent = 'Copied!';
+          setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
+        });
+      });
+      block.appendChild(btn);
+    });
   </script>
 
 </body>
diff --git a/site/style.css b/site/style.css
index d1f0aca..01e0712 100644
--- a/site/style.css
+++ b/site/style.css
@@ -111,6 +111,14 @@ a:hover {
   margin-bottom: 8px;
 }
 
+.tagline code {
+  font-family: monospace;
+  color: var(--cyan);
+  background: var(--bg-hl);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+
 .subtitle {
   color: var(--muted);
   font-size: 1rem;
@@ -314,6 +322,57 @@ pre > code {
   word-break: break-all;
 }
 
+/* ─── Copy Button ────────────────────────────────────────────── */
+.code-block {
+  position: relative;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: var(--subtle);
+  color: var(--bright);
+  border: none;
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-family: monospace;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+
+.copy-btn:hover {
+  background: var(--cyan);
+  color: var(--bg);
+}
+
+/* ─── Opsfile Syntax Highlighting ────────────────────────────── */
+.sh-comment { color: var(--subtle); font-style: italic; }
+.sh-varname  { color: var(--blue); }
+.sh-val      { color: var(--yellow); }
+.sh-cmd      { color: var(--cyan); font-weight: bold; }
+.sh-env      { color: var(--green); }
+.sh-subst    { color: var(--orange); }
+
+/* ─── Bash Example Block ─────────────────────────────────────── */
+.bash-example {
+  background: var(--bg-hl);
+  border-radius: 4px;
+  padding: 16px 20px;
+  font-family: monospace;
+  font-size: 0.9rem;
+  line-height: 1.8;
+  margin: 16px 0;
+  border-left: 3px solid var(--green);
+  color: var(--bright);
+}
+
+.bash-example .prompt {
+  color: var(--green);
+  user-select: none;
+}
+
 /* ─── Usage Section ──────────────────────────────────────────── */
 #usage,
 .usage-section {

From 81e164e6e3ec5bae4bd41e97538012ce76b9a0d1 Mon Sep 17 00:00:00 2001
From: seanseannery <seansemail@example.com>
Date: Sat, 7 Mar 2026 01:29:42 -0800
Subject: [PATCH 3/3] refactor: move site/ to docs/site/ and update pages.yml
 path

---
 .github/workflows/pages.yml    | 4 ++--
 AGENTS.md                      | 2 +-
 {site => docs/site}/index.html | 0
 {site => docs/site}/style.css  | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename {site => docs/site}/index.html (100%)
 rename {site => docs/site}/style.css (100%)

diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index 1657139..c5b20d2 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -3,7 +3,7 @@ name: Deploy GitHub Pages
 on:
   push:
     branches: [main]
-    paths: ['site/**']
+    paths: ['docs/site/**']
   workflow_dispatch:
 
 permissions:
@@ -27,7 +27,7 @@ jobs:
       - uses: actions/configure-pages@v5
       - uses: actions/upload-pages-artifact@v3
         with:
-          path: site/
+          path: docs/site/
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
diff --git a/AGENTS.md b/AGENTS.md
index d3d6e79..b2fa179 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -26,12 +26,12 @@
     ├── bin/                  Compiled binary output (gitignored)
     ├── docs/                 Feature requirements and implementation/architecture documentation
     ├────── testplans/        Test plans for each feature (manual and automated)
+    ├────── site/             GitHub Pages static landing page (HTML + CSS) — deployed by pages.yml
     ├── .github/              Github Actions and PR/Issue templates
     ├────── workflows/        GitHub Actions workflows definitions (release, PR checks) and cliff.toml changelog config
     ├── .githooks/            Local git hooks: pre-push (lint+test), commit-msg (conventional commit format)
     │
     ├── Formula/              Homebrew tap formula — auto-updated by release.yml on each release
-    ├── site/                 GitHub Pages static landing page (HTML + CSS) — deployed by pages.yml
     ├── go.mod                Module declaration (sean_seannery/opsfile, Go 1.25+, no external deps)
     ├── AGENTS.md             This file — source of truth for agentic context
     ├── CLAUDE.md             Links to AGENTS.md (Claude does not natively support AGENTS.md)
diff --git a/site/index.html b/docs/site/index.html
similarity index 100%
rename from site/index.html
rename to docs/site/index.html
diff --git a/site/style.css b/docs/site/style.css
similarity index 100%
rename from site/style.css
rename to docs/site/style.css