shellfie 0.1.1 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2aa4926f71fb587dd2ec442e5257a849e8af9b7fbbb7fb62e0ef1a840cd8dac6
-  data.tar.gz: 6dbfb90a504e732089a68548970c1ac17879338793612c50872b2cc762572b7f
+  metadata.gz: 7ab2ae504b1bc34a212d0354f51bc4d39cd9515d2d06703b342615a93dec0e3e
+  data.tar.gz: b442f32768d3a903c955a9830e6d69038ded4d232df459ee9ce93bc3445c9f47
 SHA512:
-  metadata.gz: 278e0eabca9c70c2284ca9ccbcba74933fe14e24e6c1050c0a2b635a058fb01d22d353f854083bc8edd4531c7565dbb4e47f84eebc286a33721c238bc025e568
-  data.tar.gz: 2712539d09a9d2fe1e2149d6786f230ba68b230ea2f3fa3f885c081f52985d4437d0020a702fa9af2c2eed4fdb781dd0d4fa68d251fb1d11338ae090014eea1a
+  metadata.gz: bf425a5d9791d0d4856d3a241fca4ce732d2a0730d77677a3e9de739e7df6b3a63eeae5dfa826f01361c2b763d69c9f674f86b926e470203d5d11ba9712d9cd6
+  data.tar.gz: 47c58a2d9ddc8ec9ce700c4c5220513a7ded9271952aed2d518c5fb50c567de4227ff73fabede8effa54df70ae8d1ddad6908265a3616ec225126f90f973e17b

data/README.md

@@ -1,113 +1,47 @@
+# shellfie
+
+Generate terminal screenshot-style images and animations from YAML.
+
 <p align="center">
-  <img src="assets/logo-header.svg" alt="shellfie header logo">
-  <p align="center">
-    <strong>Generate beautiful terminal screenshots from YAML</strong>
-  </p>
-  <p align="center">
-    <a href="https://rubygems.org/gems/shellfie"><img src="https://img.shields.io/gem/v/shellfie.svg?colorB=319e8c" alt="Gem Version"></a>
-    <a href="https://rubygems.org/gems/shellfie"><img src="https://img.shields.io/gem/dt/shellfie.svg" alt="Downloads"></a>
-    <img src="https://img.shields.io/badge/ruby-%3E%3D%203.0-ruby.svg" alt="Ruby Version">
-    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License">
-  </p>
+  <img src="assets/logo-header.svg" alt="shellfie">
 </p>
 
 <p align="center">
-  <a href="#features">Features</a> •
-  <a href="#installation">Installation</a> •
-  <a href="#usage">Usage</a> •
-  <a href="#configuration">Configuration</a> •
-  <a href="#themes">Themes</a>
+  <a href="https://rubygems.org/gems/shellfie"><img src="https://img.shields.io/gem/v/shellfie.svg?colorB=319e8c" alt="Gem Version"></a>
+  <a href="https://rubygems.org/gems/shellfie"><img src="https://img.shields.io/gem/dt/shellfie.svg" alt="Downloads"></a>
+  <img src="https://img.shields.io/badge/ruby-%3E%3D%203.0-ruby.svg" alt="Ruby Version">
+  <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License">
 </p>
 
----
-
-**Shellfie** (Shell + Selfie) creates stunning terminal screenshot-style images from simple YAML configuration files. Perfect for documentation, README files, tutorials, and presentations — without actually taking screenshots.
-
 <p align="center">
-  <img src="examples/demo.gif" alt="Shellfie Demo" width="550">
+  <img src="examples/demo.gif" alt="shellfie demo" width="560">
 </p>
 
-## Features
-
-### Multiple Themes
-
-Generate images with different terminal styles:
-
-<table>
-  <tr>
-    <th>macOS</th>
-    <th>Ubuntu</th>
-    <th>Windows</th>
-  </tr>
-  <tr>
-    <td><img src="examples/theme_macos.png" width="280" alt="macOS theme"></td>
-    <td><img src="examples/theme_ubuntu.png" width="280" alt="Ubuntu theme"></td>
-    <td><img src="examples/theme_windows.png" width="280" alt="Windows theme"></td>
-  </tr>
-</table>
-
-### Animated GIFs
-
-Create typing animations with realistic effects:
-
-```yaml
-animation:
-  typing_speed: 50    # Milliseconds per character
-  command_delay: 500  # Pause after command
-  loop: true          # Loop animation
-```
-
-### Full ANSI Color Support
-
-- Standard 8 colors + bright variants
-- 256-color palette
-- True color (24-bit RGB)
-- Bold, italic, underline styles
-
-### Flexible Output Options
-
-- **High DPI support** — Generate 2x or 3x scaled images for Retina displays
-- **Headless mode** — Output without window decorations
-- **Shadow effects** — Beautiful drop shadows
-- **Transparent backgrounds** — Perfect for overlays
-- **Fixed height with scrolling** — Consistent GIF dimensions
+## Install
 
-## Installation
-
-### Requirements
+Requirements:
 
 - Ruby 3.0+
-- ImageMagick 7.0+
-
-```bash
-# Install ImageMagick first
-brew install imagemagick      # macOS
-sudo apt install imagemagick  # Ubuntu/Debian
-choco install imagemagick     # Windows
-```
-
-### Install the gem
+- ImageMagick 7+
 
 ```bash
+brew install imagemagick
 gem install shellfie
 ```
 
-Or add to your Gemfile:
+For Bundler:
 
 ```ruby
-gem 'shellfie'
+gem "shellfie"
 ```
 
-## Usage
+## Quick Start
 
-### Quick Start
-
-1. Create a configuration file:
+Create `terminal.yml`:
 
 ```yaml
-# terminal.yml
 theme: macos
-title: "Terminal — zsh"
+title: "Terminal - zsh"
 
 window:
   width: 600
@@ -115,220 +49,145 @@ window:
 
 lines:
   - prompt: "$ "
-    command: "echo 'Hello, World!'"
-  - output: "Hello, World!"
+    command: "echo hello"
+  - output: "hello"
 ```
 
-2. Generate an image:
+Generate an image:
 
 ```bash
-shellfie generate terminal.yml -o output.png
+shellfie generate terminal.yml -o terminal.png
 ```
 
-### Commands
+Use `shf` as a short alias for `shellfie`.
 
-| Command | Description |
-|---------|-------------|
-| `shellfie generate <file> -o <output>` | Generate image from config |
-| `shellfie init` | Output sample configuration |
-| `shellfie themes` | List available themes |
-| `shellfie validate <file>` | Validate configuration |
-| `shellfie version` | Show version |
-| `shellfie help` | Show help |
-
-> [!TIP]
-> Use `shf` as a shorter alias for `shellfie`
-
-### Generate Options
+## CLI
 
 ```bash
-shellfie generate config.yml -o output.png [options]
+shellfie generate config.yml -o output.png
+shellfie generate config.yml -o demo.gif --animate
+shellfie generate config.yml -o output.svg --format svg
+shellfie generate config.yml -o output.png --scale 2 --no-shadow
+shellfie generate config.yml -o output.png --no-header
+shellfie validate config.yml
+shellfie themes
+shellfie init
 ```
 
+Common `generate` options:
+
 | Option | Description |
-|--------|-------------|
-| `-o, --output PATH` | Output file path (required) |
-| `-t, --theme NAME` | Override theme (`macos`, `ubuntu`, `windows`) |
-| `-a, --animate` | Generate animated GIF |
-| `-s, --scale FACTOR` | Output scale (1, 2, 3) for HiDPI |
-| `-w, --width PIXELS` | Override width |
-| `--no-shadow` | Disable shadow effect |
-| `--no-header` | Disable window header (headless mode) |
+| --- | --- |
+| `-o, --output PATH` | Output path |
+| `-t, --theme NAME` | Override theme |
+| `-a, --animate` | Render animation |
+| `-s, --scale FACTOR` | Output scale: `1`, `2`, or `3` |
+| `-w, --width PIXELS` | Override window width |
+| `--format FORMAT` | `png`, `gif`, `svg`, `webp`, or `apng` |
+| `--fps FPS` | Override animation typing FPS |
+| `--overflow MODE` | `clip`, `wrap`, or `scroll` |
+| `--no-shadow` | Disable shadow |
 | `--transparent` | Transparent background |
+| `--no-header` | Headless output |
+| `--force` | Overwrite existing files |
 
-### Examples
-
-```bash
-# Basic PNG
-shellfie generate config.yml -o terminal.png
-
-# Animated GIF
-shellfie generate config.yml -o demo.gif --animate
-
-# Retina-ready (2x scale)
-shellfie generate config.yml -o terminal@2x.png --scale 2
-
-# Headless (no window decorations)
-shellfie generate config.yml -o code.png --no-header
-
-# Ubuntu theme with custom width
-shellfie generate config.yml -o ubuntu.png -t ubuntu -w 800
-```
+Static output supports `png`, `svg`, and `webp`.
+Animated output supports `gif`, `webp`, and `apng`.
 
 ## Configuration
 
-### Basic Structure
+Static content uses `lines`:
 
 ```yaml
-theme: macos              # Theme: macos, ubuntu, windows
-title: "Terminal — zsh"   # Window title
-headless: false           # Hide window decorations
+theme: macos
+title: "Terminal"
 
 window:
-  width: 600              # Window width in pixels
-  padding: 20             # Content padding
-  visible_lines: 10       # Fixed line count (for scrolling GIFs)
+  width: 600
+  padding: 20
+  visible_lines: 8
+  overflow: clip
 
 font:
-  family: "Monaco"        # Font family
-  size: 14                # Font size
-  line_height: 1.4        # Line height multiplier
-
-lines:                    # Static content
-  - prompt: "$ "
-    command: "echo hello"
-  - output: "hello"
-```
-
-### Static Images
-
-```yaml
-theme: macos
-title: "Terminal"
+  family: Monaco
+  size: 14
+  line_height: 1.4
 
 lines:
   - prompt: "$ "
     command: "gem install shellfie"
-
   - output: |
-      Fetching shellfie-0.1.0.gem
-      Successfully installed shellfie-0.1.0
+      Successfully installed shellfie
       1 gem installed
-
-  - prompt: "$ "
-    command: ""
 ```
 
-### Animated GIFs
+Animations use `frames`:
 
 ```yaml
 theme: macos
 title: "Demo"
 
 animation:
-  typing_speed: 50      # ms per character
-  command_delay: 500    # ms after command execution
-  cursor_blink: true    # Show blinking cursor
-  loop: true            # Loop the animation
+  typing_speed: 50
+  command_delay: 500
+  cursor_blink: true
+  loop: true
+  palette: global
+  dither: true
+  scroll_easing: ease_out
 
 frames:
   - prompt: "$ "
-    type: "echo 'Hello!'"   # Text to type (animated)
-    delay: 500              # Pause after this frame
-
-  - output: "Hello!"
+    type: "echo hello"
+    delay: 500
+  - output: "hello"
     delay: 1000
 ```
 
-### ANSI Colors
+Useful top-level keys:
 
-```yaml
-lines:
-  - prompt: "\e[32muser@host\e[0m:\e[34m~/project\e[0m$ "
-    command: "ls"
+| Key | Purpose |
+| --- | --- |
+| `theme` | `macos`, `ubuntu`, `windows`, or `custom` |
+| `color_scheme` | Built-in color scheme such as `dracula` |
+| `colors` | Theme color overrides |
+| `window` | Size, padding, wrapping, clipping, scrolling |
+| `font` | Font family, size, line height |
+| `animation` | Typing speed, delays, loop, palette, easing |
+| `cursor` | Cursor style and color |
+| `headless` | Hide window chrome |
+| `lines` | Static terminal content |
+| `frames` | Animated terminal content |
 
-  - output: "\e[34mdir1\e[0m  \e[32mfile.txt\e[0m  \e[31merror.log\e[0m"
-```
+ANSI colors and styles are supported in `prompt`, `command`, and `output`, including 8-color, bright, 256-color, and RGB escape sequences.
 
-**Supported escape codes:**
+## Themes
 
-| Code | Effect |
-|------|--------|
-| `\e[0m` | Reset |
-| `\e[1m` | Bold |
-| `\e[3m` | Italic |
-| `\e[4m` | Underline |
-| `\e[30-37m` | Foreground colors |
-| `\e[40-47m` | Background colors |
-| `\e[90-97m` | Bright foreground |
-| `\e[38;5;Nm` | 256-color foreground |
-| `\e[38;2;R;G;Bm` | RGB foreground |
+Built-in window themes:
 
-### Fixed Height with Scrolling
+- `macos`
+- `ubuntu`
+- `windows`
 
-For GIFs with many lines, use `visible_lines` to maintain consistent dimensions:
+Headless output removes window chrome:
 
 ```yaml
-window:
-  width: 600
-  visible_lines: 8    # Show only last 8 lines
-
-frames:
-  - prompt: "$ "
-    type: "for i in {1..20}; do echo $i; done"
-  # Lines will scroll as content exceeds visible_lines
+headless: true
 ```
 
-## Themes
-
-### macOS (default)
-
-Classic macOS Terminal appearance with traffic light buttons (red, yellow, green) on the left side.
-
-### Ubuntu
-
-GNOME Terminal style with window controls on the right side and Ubuntu's signature purple background.
-
-### Windows Terminal
-
-Modern Windows Terminal design with flat styling and square corners.
-
-### Headless Mode
-
-No window decorations — just the terminal content. Perfect for embedding in documentation.
-
-<p align="center">
-  <img src="examples/headless.png" alt="Headless mode" width="500">
-</p>
+or:
 
 ```bash
 shellfie generate config.yml -o output.png --no-header
 ```
 
-Or in YAML:
-
-```yaml
-headless: true
-```
-
 ## Development
 
 ```bash
-git clone https://github.com/yourusername/shellfie.git
-cd shellfie
-
 bundle install
-bundle exec rspec      # Run tests
+bundle exec rspec
 ```
 
-## Contributing
-
-1. Fork it
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -am 'Add amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
-
 ## License
 
-Released under the [MIT License](LICENSE).
+[MIT](LICENSE)

data/docs/index.html

@@ -0,0 +1,205 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Shellfie Docs</title>
+    <meta
+      name="description"
+      content="Shellfie documentation. Generate beautiful terminal screenshots from YAML."
+    />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div class="ambient-glow" aria-hidden="true"></div>
+    <div class="sun-core" aria-hidden="true"></div>
+    <div class="scanlines" aria-hidden="true"></div>
+    <div class="stars" aria-hidden="true"></div>
+    <div class="grid-floor" aria-hidden="true"></div>
+
+    <header class="topbar">
+      <div class="brand">
+        <span class="brand__glyph">◎</span>
+        <div class="brand__stack">
+          <span class="brand__title">Shellfie</span>
+          <span class="brand__subtitle">Terminal Screenshot Generator</span>
+        </div>
+      </div>
+      <nav class="topnav">
+        <a href="#features">Features</a>
+        <a href="#install">Install</a>
+        <a href="#usage">Usage</a>
+        <a href="#config">Config</a>
+        <a href="#themes">Themes</a>
+      </nav>
+      <a class="cta" href="https://github.com/ydah/shellfie">GitHub</a>
+    </header>
+
+    <main>
+      <section class="hero">
+        <div class="hero__content">
+          <p class="eyebrow">YAML → Image → Imagination</p>
+          <h1>
+            Terminal visuals that elevate<br />
+            your documentation
+          </h1>
+          <p class="hero__lead">
+            Shellfie is a CLI that generates PNGs and animated GIFs from YAML.
+            Build documentation, tutorials, and presentations without taking screenshots.
+          </p>
+          <div class="hero__actions">
+            <a class="cta cta--primary" href="#usage">Quick Start</a>
+            <a class="cta cta--ghost" href="#config">View Config</a>
+          </div>
+          <div class="hero__meta">
+            <span>Ruby 3.0+</span>
+            <span>ImageMagick 7.0+</span>
+            <span>CLI: shellfie / shf</span>
+          </div>
+        </div>
+        <div class="hero__preview">
+          <div class="terminal-card">
+            <div class="terminal-card__bar">
+              <span></span><span></span><span></span>
+            </div>
+            <div class="terminal-card__body">
+              <div
+                class="typewriter"
+                data-lines="$ shellfie init &gt; demo.yml||$ shellfie generate demo.yml -o neon.png||Generated: neon.png||Let the glow begin..."
+              ></div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="features" class="section">
+        <div class="section__header">
+          <p class="eyebrow">Features</p>
+          <h2>Make visuals and storytelling effortless</h2>
+          <p class="section__lead">
+            Switch themes, animate typing, and support ANSI colors to level up your docs.
+          </p>
+        </div>
+        <div class="grid">
+          <article class="card">
+            <h3>Multi Theme</h3>
+            <p>Switch between macOS, Ubuntu, and Windows terminal styles.</p>
+          </article>
+          <article class="card">
+            <h3>Animated GIF</h3>
+            <p>Create typing animations that feel like a guided walkthrough.</p>
+          </article>
+          <article class="card">
+            <h3>Full ANSI</h3>
+            <p>Support 256-color palettes, TrueColor, and text styles.</p>
+          </article>
+          <article class="card">
+            <h3>HiDPI Output</h3>
+            <p>Render crisp assets with 2x or 3x scaling for HiDPI.</p>
+          </article>
+        </div>
+      </section>
+
+      <section id="install" class="section section--alt">
+        <div class="section__header">
+          <p class="eyebrow">Install</p>
+          <h2>Install in two steps</h2>
+        </div>
+        <div class="split">
+          <div class="code-block">
+            <h3>ImageMagick</h3>
+            <pre><code>brew install imagemagick
+# Ubuntu/Debian
+sudo apt install imagemagick</code></pre>
+          </div>
+          <div class="code-block">
+            <h3>Shellfie</h3>
+            <pre><code>gem install shellfie
+# or
+bundle add shellfie</code></pre>
+          </div>
+        </div>
+      </section>
+
+      <section id="usage" class="section">
+        <div class="section__header">
+          <p class="eyebrow">Usage</p>
+          <h2>Quick Start</h2>
+          <p class="section__lead">
+            Create a YAML file, then generate the output.
+          </p>
+        </div>
+        <div class="split">
+          <div class="code-block">
+            <h3>terminal.yml</h3>
+            <pre><code>theme: macos
+title: "Terminal — zsh"
+
+window:
+  width: 620
+  padding: 20
+
+lines:
+  - prompt: "$ "
+    command: "echo 'Hello, Vaporwave!'"
+  - output: "Hello, Vaporwave!"</code></pre>
+          </div>
+          <div class="code-block">
+            <h3>Generate</h3>
+            <pre><code>shellfie generate terminal.yml -o output.png
+shellfie generate terminal.yml -o demo.gif --animate</code></pre>
+          </div>
+        </div>
+      </section>
+
+      <section id="config" class="section section--alt">
+        <div class="section__header">
+          <p class="eyebrow">Config</p>
+          <h2>Animation controls</h2>
+          <p class="section__lead">
+            Tune typing speed, delays, and looping.
+          </p>
+        </div>
+        <div class="code-block code-block--wide">
+          <pre><code>animation:
+  typing_speed: 50
+  command_delay: 500
+  cursor_blink: true
+  loop: true
+
+frames:
+  - prompt: "$ "
+    type: "ls -la"
+    delay: 400
+  - output: "docs  lib  README.md"
+    delay: 800</code></pre>
+        </div>
+      </section>
+
+      <section id="themes" class="section">
+        <div class="section__header">
+          <p class="eyebrow">Themes</p>
+          <h2>Shape the vibe with themes</h2>
+        </div>
+        <div class="theme-list">
+          <div class="theme-pill">macos</div>
+          <div class="theme-pill">ubuntu</div>
+          <div class="theme-pill">windows</div>
+          <div class="theme-pill">headless</div>
+        </div>
+        <div class="code-block code-block--wide">
+          <pre><code>shellfie themes
+shellfie generate config.yml -o neon.png -t ubuntu
+shellfie generate config.yml -o ghost.png --no-header</code></pre>
+        </div>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <p>Shellfie Docs</p>
+      <p>Built for GitHub Pages + GitHub Actions</p>
+    </footer>
+
+    <script src="./scripts.js"></script>
+  </body>
+</html>