shellfie 1.0.0 → 1.1.0

data/docs/scripts.js

@@ -1,85 +0,0 @@
-const observer = new IntersectionObserver(
-  (entries) => {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting) {
-        entry.target.classList.add("is-visible");
-        observer.unobserve(entry.target);
-      }
-    });
-  },
-  { threshold: 0.2 }
-);
-
-document.querySelectorAll(".section, .card, .code-block, .terminal-card").forEach((el) => {
-  el.classList.add("fade-in");
-  observer.observe(el);
-});
-
-const typewriter = document.querySelector(".typewriter");
-if (typewriter) {
-  const rawLines = typewriter.dataset.lines || "";
-  const lines = rawLines.split("||");
-  const typingDelay = 45;
-  const lineDelay = 650;
-  const loopDelay = 5000;
-  let lineIndex = 0;
-  let charIndex = 0;
-
-  const cursor = document.createElement("span");
-  cursor.className = "typewriter__cursor";
-
-  const renderFrame = () => {
-    typewriter.innerHTML = "";
-    lines.forEach((line, index) => {
-      if (index > lineIndex) return;
-      const lineEl = document.createElement("div");
-      const isPrompt = line.trim().startsWith("$");
-      lineEl.className = `typewriter__line ${
-        isPrompt ? "typewriter__line--prompt" : "typewriter__line--output"
-      }`;
-      const text = index === lineIndex ? line.slice(0, charIndex) : line;
-      lineEl.textContent = text;
-      if (index === lineIndex) {
-        lineEl.appendChild(cursor);
-      }
-      typewriter.appendChild(lineEl);
-    });
-  };
-
-  const isInstantLine = (line) =>
-    line.startsWith("Generated:") || line.startsWith("Let the glow begin");
-
-  const typeNext = () => {
-    if (lineIndex >= lines.length) {
-      setTimeout(() => {
-        lineIndex = 0;
-        charIndex = 0;
-        typewriter.innerHTML = "";
-        typeNext();
-      }, loopDelay);
-      return;
-    }
-
-    if (isInstantLine(lines[lineIndex])) {
-      charIndex = lines[lineIndex].length;
-      renderFrame();
-      charIndex = 0;
-      lineIndex += 1;
-      setTimeout(typeNext, lineDelay);
-      return;
-    }
-
-    if (charIndex <= lines[lineIndex].length) {
-      renderFrame();
-      charIndex += 1;
-      setTimeout(typeNext, typingDelay);
-      return;
-    }
-
-    charIndex = 0;
-    lineIndex += 1;
-    setTimeout(typeNext, lineDelay);
-  };
-
-  typeNext();
-}

data/docs/styles.css

@@ -1,507 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Share+Tech+Mono&display=swap");
-
-:root {
-  color-scheme: dark;
-  --bg: #0b0617;
-  --bg-alt: #140826;
-  --neon-pink: #ff5fd2;
-  --neon-blue: #52f2ff;
-  --neon-purple: #a07bff;
-  --neon-green: #34f5b4;
-  --neon-orange: #ff9f5f;
-  --neon-sun: #ff4fd8;
-  --text: #f3eaff;
-  --muted: #c2b0d8;
-  --card: rgba(18, 10, 34, 0.85);
-  --border: rgba(255, 255, 255, 0.08);
-  --glow: 0 0 24px rgba(255, 95, 210, 0.35);
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-  font-family: "Space Grotesk", "Segoe UI", sans-serif;
-  color: var(--text);
-  background:
-    radial-gradient(circle at 10% 20%, rgba(255, 95, 210, 0.15), transparent 40%),
-    radial-gradient(circle at 90% 10%, rgba(82, 242, 255, 0.2), transparent 45%),
-    linear-gradient(180deg, #1a0a2f 0%, #0b0617 55%, #05020c 100%);
-  overflow-x: hidden;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.ambient-glow {
-  position: fixed;
-  inset: -30% auto auto -10%;
-  width: 60vw;
-  height: 60vw;
-  background: radial-gradient(circle, rgba(255, 95, 210, 0.25), rgba(10, 4, 16, 0));
-  filter: blur(14px);
-  z-index: 0;
-  pointer-events: none;
-}
-
-.sun-core {
-  position: fixed;
-  top: 8vh;
-  left: 70%;
-  width: 280px;
-  height: 280px;
-  background: radial-gradient(circle at 50% 35%, var(--neon-sun), #ff8ad2 40%, rgba(255, 79, 216, 0.2) 60%, transparent 70%);
-  border-radius: 50%;
-  opacity: 0.55;
-  filter: blur(1px) saturate(120%);
-  z-index: 0;
-  pointer-events: none;
-  box-shadow: 0 0 28px rgba(255, 79, 216, 0.45);
-  animation: sunfloat 6s ease-in-out infinite;
-}
-
-.scanlines {
-  position: fixed;
-  inset: 0;
-  background: repeating-linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0.03),
-    rgba(255, 255, 255, 0.03) 1px,
-    transparent 1px,
-    transparent 3px
-  );
-  mix-blend-mode: soft-light;
-  opacity: 0.18;
-  pointer-events: none;
-  z-index: 2;
-}
-
-.stars {
-  position: fixed;
-  inset: 0;
-  background-image:
-    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px),
-    radial-gradient(circle at 38% 12%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px),
-    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
-    radial-gradient(circle at 86% 32%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
-    radial-gradient(circle at 18% 78%, rgba(255, 255, 255, 0.3) 0 1px, transparent 2px),
-    radial-gradient(circle at 64% 62%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px);
-  opacity: 0.2;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.grid-floor {
-  position: fixed;
-  inset: auto 0 0 0;
-  height: 45vh;
-  background-image:
-    linear-gradient(transparent 60%, rgba(82, 242, 255, 0.12)),
-    repeating-linear-gradient(90deg, rgba(82, 242, 255, 0.1) 0 1px, transparent 1px 60px),
-    repeating-linear-gradient(0deg, rgba(82, 242, 255, 0.1) 0 1px, transparent 1px 60px);
-  transform: perspective(600px) rotateX(65deg);
-  transform-origin: bottom;
-  opacity: 0.2;
-  z-index: 0;
-  pointer-events: none;
-}
-
-.topbar {
-  position: sticky;
-  top: 0;
-  z-index: 3;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 24px 6vw;
-  backdrop-filter: blur(12px);
-  background: rgba(7, 4, 15, 0.65);
-  border-bottom: 1px solid var(--border);
-}
-
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.brand__glyph {
-  font-size: 22px;
-  color: var(--neon-blue);
-  text-shadow: 0 0 12px rgba(82, 242, 255, 0.8);
-}
-
-.brand__title {
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.brand__subtitle {
-  display: block;
-  font-size: 12px;
-  color: var(--muted);
-}
-
-.topnav {
-  display: flex;
-  gap: 18px;
-  font-size: 14px;
-  color: var(--muted);
-}
-
-.topnav a {
-  position: relative;
-  padding-bottom: 4px;
-}
-
-.topnav a::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 0;
-  height: 2px;
-  background: var(--neon-pink);
-  transition: width 0.3s ease;
-}
-
-.topnav a:hover::after {
-  width: 100%;
-}
-
-.cta {
-  padding: 10px 18px;
-  border-radius: 999px;
-  border: 1px solid var(--border);
-  font-weight: 600;
-  background: linear-gradient(120deg, rgba(160, 123, 255, 0.2), rgba(255, 95, 210, 0.2));
-  box-shadow: var(--glow);
-  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
-}
-
-.cta--primary {
-  background: linear-gradient(120deg, var(--neon-pink), var(--neon-purple));
-  color: #0b0617;
-}
-
-.cta--ghost {
-  background: transparent;
-  border: 1px solid rgba(255, 95, 210, 0.6);
-}
-
-.cta:hover {
-  transform: translateY(-2px) scale(1.02);
-  box-shadow: 0 0 28px rgba(255, 95, 210, 0.45);
-  filter: brightness(1.08);
-}
-
-.cta:active {
-  transform: translateY(0) scale(0.99);
-  box-shadow: 0 0 18px rgba(255, 95, 210, 0.35);
-}
-
-main {
-  position: relative;
-  z-index: 1;
-  padding: 0 6vw 80px;
-}
-
-.hero {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 48px;
-  padding: 80px 0 40px;
-  align-items: center;
-}
-
-.hero h1 {
-  font-size: clamp(32px, 5vw, 56px);
-  line-height: 1.05;
-  margin: 0 0 20px;
-  background: linear-gradient(90deg, #ffffff, #ffb6f5 35%, #7cf6ff 65%, #ffffff);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-
-.hero__lead {
-  color: var(--muted);
-  font-size: 18px;
-  line-height: 1.6;
-}
-
-.hero__actions {
-  display: flex;
-  gap: 16px;
-  margin: 24px 0;
-}
-
-.hero__meta {
-  display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-  font-size: 13px;
-  color: var(--muted);
-}
-
-.eyebrow {
-  font-family: "Share Tech Mono", "Courier New", monospace;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  font-size: 12px;
-  color: var(--neon-green);
-  margin-bottom: 12px;
-}
-
-.hero__preview {
-  position: relative;
-  display: grid;
-  place-items: center;
-}
-
-.terminal-card {
-  background: var(--card);
-  border-radius: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
-  width: min(100%, 420px);
-  overflow: hidden;
-}
-
-.terminal-card__bar {
-  display: flex;
-  gap: 8px;
-  padding: 12px 16px;
-  background: rgba(9, 5, 19, 0.8);
-}
-
-.terminal-card__bar span {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: rgba(255, 95, 210, 0.6);
-  box-shadow: 0 0 8px rgba(255, 95, 210, 0.6);
-}
-
-.terminal-card__bar span:nth-child(2) {
-  background: rgba(82, 242, 255, 0.7);
-}
-
-.terminal-card__bar span:nth-child(3) {
-  background: rgba(52, 245, 180, 0.7);
-}
-
-.terminal-card__body {
-  font-family: "Share Tech Mono", "Courier New", monospace;
-  padding: 20px;
-  font-size: 14px;
-  color: #e9d7ff;
-  background: linear-gradient(180deg, rgba(17, 9, 29, 0.9), rgba(9, 5, 19, 0.95));
-}
-
-.typewriter {
-  min-height: 110px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-}
-
-.typewriter__line {
-  color: #e9d7ff;
-}
-
-.typewriter__line--prompt {
-  color: var(--neon-blue);
-}
-
-.typewriter__line--output {
-  color: #f7b6ff;
-}
-
-.typewriter__cursor {
-  display: inline-block;
-  width: 10px;
-  height: 16px;
-  margin-left: 4px;
-  background: var(--neon-green);
-  animation: caret 0.9s steps(1) infinite;
-  vertical-align: text-bottom;
-}
-
-@keyframes caret {
-  0%,
-  49% {
-    opacity: 1;
-  }
-  50%,
-  100% {
-    opacity: 0;
-  }
-}
-
-.prompt {
-  color: var(--neon-blue);
-}
-
-.output {
-  color: #f7b6ff;
-}
-
-.section {
-  padding: 80px 0;
-}
-
-.section--alt {
-  background: rgba(20, 8, 38, 0.6);
-  border: 1px solid var(--border);
-  border-radius: 24px;
-  padding: 80px 6vw;
-  margin: 0 -6vw;
-}
-
-.section__header h2 {
-  margin: 0 0 12px;
-  font-size: clamp(26px, 4vw, 40px);
-}
-
-.section__lead {
-  color: var(--muted);
-  font-size: 16px;
-  max-width: 640px;
-}
-
-.grid {
-  display: grid;
-  gap: 24px;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  margin-top: 36px;
-}
-
-.card {
-  padding: 24px;
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(4px);
-}
-
-.split {
-  display: grid;
-  gap: 28px;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  margin-top: 36px;
-}
-
-.code-block {
-  background: #0a0618;
-  border-radius: 16px;
-  border: 1px solid rgba(82, 242, 255, 0.2);
-  padding: 18px 20px;
-  box-shadow: inset 0 0 24px rgba(82, 242, 255, 0.08);
-}
-
-.code-block h3 {
-  margin-top: 0;
-}
-
-.code-block pre {
-  margin: 12px 0 0;
-  font-family: "Share Tech Mono", "Courier New", monospace;
-  color: #bfefff;
-  white-space: pre-wrap;
-}
-
-.code-block--wide {
-  max-width: 860px;
-}
-
-.theme-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin: 24px 0;
-}
-
-.theme-pill {
-  padding: 8px 16px;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 95, 210, 0.4);
-  font-size: 14px;
-  background: rgba(255, 95, 210, 0.08);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.footer {
-  padding: 40px 6vw 60px;
-  text-align: center;
-  color: var(--muted);
-  border-top: 1px solid var(--border);
-}
-
-.fade-in {
-  opacity: 0;
-  transform: translateY(24px);
-  transition: opacity 0.8s ease, transform 0.8s ease;
-}
-
-.fade-in.is-visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-@keyframes sunfloat {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 900px) {
-  .topbar {
-    flex-wrap: wrap;
-    gap: 12px;
-  }
-
-  .topnav {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  .hero {
-    padding-top: 50px;
-  }
-
-  .section--alt {
-    padding: 60px 6vw;
-  }
-}
-
-@media (max-width: 600px) {
-  .hero__actions {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .topbar {
-    padding: 18px 6vw;
-  }
-
-  .topnav {
-    gap: 12px;
-    font-size: 13px;
-  }
-}

data/examples/animation.yml

@@ -1,33 +0,0 @@
-# animation.yml - Animated GIF example
-theme: macos
-title: "Terminal — zsh"
-
-window:
-  width: 600
-  padding: 20
-
-animation:
-  typing_speed: 50
-  command_delay: 500
-  cursor_blink: true
-  loop: true
-
-frames:
-  - prompt: "$ "
-    type: "echo Hello, World!"
-    delay: 500
-
-  - output: "Hello, World!"
-    delay: 1000
-
-  - prompt: "$ "
-    type: "ls -la"
-    delay: 500
-
-  - output: |
-      total 24
-      drwxr-xr-x  5 user  staff   160 Jan 10 10:00 .
-      drwxr-xr-x  3 user  staff    96 Jan 10 09:00 ..
-      -rw-r--r--  1 user  staff  1024 Jan 10 10:00 README.md
-      -rw-r--r--  1 user  staff   512 Jan 10 10:00 Gemfile
-    delay: 2000

data/examples/colored.yml

@@ -1,20 +0,0 @@
-# colored.yml - Example with ANSI color codes
-theme: ubuntu
-title: "user@ubuntu: ~/project"
-
-window:
-  width: 700
-  padding: 20
-
-lines:
-  - prompt: "\e[32muser@ubuntu\e[0m:\e[34m~/project\e[0m$ "
-    command: "bundle exec rspec"
-
-  - output: |
-      \e[32m.\e[0m\e[32m.\e[0m\e[32m.\e[0m\e[32m.\e[0m\e[32m.\e[0m\e[32m.\e[0m\e[32m.\e[0m\e[32m.\e[0m\e[32m.\e[0m\e[32m.\e[0m
-
-  - output: "Finished in 0.12 seconds (files took 0.5 seconds to load)"
-  - output: "\e[32m10 examples, 0 failures\e[0m"
-
-  - prompt: "\e[32muser@ubuntu\e[0m:\e[34m~/project\e[0m$ "
-    command: ""

data/examples/demo_animation.yml

@@ -1,31 +0,0 @@
-theme: macos
-title: "Terminal — zsh"
-
-window:
-  width: 550
-  padding: 18
-  visible_lines: 7
-
-animation:
-  typing_speed: 35
-  command_delay: 400
-  loop: true
-
-frames:
-  - prompt: "$ "
-    type: "shellfie generate config.yml -o demo.png"
-    delay: 600
-
-  - output: "Generated: demo.png"
-    delay: 1200
-
-  - prompt: "$ "
-    type: "shellfie themes"
-    delay: 500
-
-  - output: |
-      Available themes:
-        macos   - macOS Terminal style
-        ubuntu  - Ubuntu Terminal style
-        windows - Windows Terminal style
-    delay: 2000

data/examples/headless.yml

@@ -1,16 +0,0 @@
-# headless.yml - Terminal output without window decoration
-theme: macos
-headless: true
-
-window:
-  width: 500
-  padding: 15
-
-lines:
-  - prompt: "$ "
-    command: "ruby -v"
-
-  - output: "ruby 3.3.0 (2024-12-25 revision 5124f9ac75) [arm64-darwin24]"
-
-  - prompt: "$ "
-    command: ""