liquidbook 0.1.0

data/lib/liquidbook/param_parser.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Liquidbook
+  # Extracts @param comments from snippet files to build editable parameter forms
+  #
+  # Supported format:
+  #   @param {Type} name - description
+  #   @param {Type} name [default_value] - description
+  class ParamParser
+    PARAM_REGEX = /@param\s+\{(\w+)\}\s+(\w+)(?:\s+\[([^\]]*)\])?\s*(?:-\s*(.*))?/
+
+    def initialize(source)
+      @source = source
+    end
+
+    def parse
+      @source.scan(PARAM_REGEX).map do |type, name, default, description|
+        {
+          "name" => name,
+          "type" => normalize_type(type),
+          "default" => coerce_default(type, default),
+          "description" => description&.strip
+        }
+      end
+    end
+
+    # Build assigns hash from params with their defaults
+    def default_assigns
+      parse.each_with_object({}) do |param, hash|
+        hash[param["name"]] = param["default"]
+      end
+    end
+
+    private
+
+    def normalize_type(type)
+      case type.downcase
+      when "string" then "text"
+      when "number", "integer", "int", "float" then "number"
+      when "boolean", "bool" then "checkbox"
+      when "object", "hash" then "json"
+      when "array" then "json"
+      else "text"
+      end
+    end
+
+    def coerce_default(type, value)
+      return sample_value(type) if value.nil? || value.strip.empty?
+
+      case type.downcase
+      when "string" then value.strip
+      when "number", "integer", "int" then value.strip.to_i
+      when "float" then value.strip.to_f
+      when "boolean", "bool" then %w[true 1 yes].include?(value.strip.downcase)
+      else value.strip
+      end
+    end
+
+    # Provide sensible sample values when no default is given
+    def sample_value(type)
+      case type.downcase
+      when "string" then "Sample Text"
+      when "number", "integer", "int" then 1
+      when "float" then 1.0
+      when "boolean", "bool" then false
+      else "sample"
+      end
+    end
+  end
+end

data/lib/liquidbook/pid_manager.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Liquidbook
+  class PidManager
+    PID_FILE_NAME = "server.pid"
+
+    def initialize(theme_root:)
+      @theme_root = theme_root
+    end
+
+    def pid_file_path
+      File.join(@theme_root, ".liquid-preview", PID_FILE_NAME)
+    end
+
+    # Write the current process PID to the PID file
+    def write_pid
+      dir = File.dirname(pid_file_path)
+      FileUtils.mkdir_p(dir) unless File.directory?(dir)
+      File.write(pid_file_path, Process.pid.to_s)
+    end
+
+    # Read the PID from the PID file, returns nil if not found
+    def read_pid
+      return nil unless File.exist?(pid_file_path)
+
+      pid = File.read(pid_file_path).strip.to_i
+      pid.positive? ? pid : nil
+    end
+
+    # Remove the PID file
+    def remove_pid
+      File.delete(pid_file_path) if File.exist?(pid_file_path)
+    end
+
+    # Check if a process with the given PID is alive
+    def process_alive?(pid)
+      Process.kill(0, pid)
+      true
+    rescue Errno::ESRCH
+      false
+    rescue Errno::EPERM
+      # Process exists but we don't have permission to signal it
+      true
+    end
+
+    # Check the current state and ensure it's safe to start
+    # Returns :ok, :stale_pid_cleaned, or raises an error
+    def ensure_can_start!
+      pid = read_pid
+      return :ok if pid.nil?
+
+      if process_alive?(pid)
+        raise Error, "Server is already running (PID: #{pid}). Run `liquidbook stop` to stop it."
+      end
+
+      remove_pid
+      :stale_pid_cleaned
+    end
+
+    # Stop the running server process
+    # Returns :stopped, :not_running, or :stale_pid_cleaned
+    def stop!
+      pid = read_pid
+
+      if pid.nil?
+        return :not_running
+      end
+
+      unless process_alive?(pid)
+        remove_pid
+        return :stale_pid_cleaned
+      end
+
+      Process.kill("TERM", pid)
+      remove_pid
+      :stopped
+    rescue Errno::EPERM
+      raise Error, "Permission denied: cannot stop process (PID: #{pid})."
+    end
+  end
+end

data/lib/liquidbook/schema_parser.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+require "json"
+
+module Liquidbook
+  # Extracts and parses {% schema %} blocks from section files
+  class SchemaParser
+    SCHEMA_REGEX = /\{%-?\s*schema\s*-?%\}(.*?)\{%-?\s*endschema\s*-?%\}/m
+
+    def initialize(template_source)
+      @source = template_source
+    end
+
+    def parse
+      match = @source.match(SCHEMA_REGEX)
+      return {} unless match
+
+      JSON.parse(match[1].strip)
+    rescue JSON::ParserError => e
+      warn "Warning: Failed to parse schema JSON: #{e.message}"
+      {}
+    end
+
+    # Returns the template source with the schema block removed
+    def template_without_schema
+      @source.gsub(SCHEMA_REGEX, "").strip
+    end
+
+    # Builds default settings values from schema
+    def default_settings
+      schema = parse
+      settings = schema.fetch("settings", [])
+
+      settings.each_with_object({}) do |setting, hash|
+        hash[setting["id"]] = setting["default"] if setting["id"]
+      end
+    end
+
+    # Builds default block data from schema
+    def default_blocks
+      schema = parse
+      blocks = schema.fetch("blocks", [])
+
+      blocks.filter_map do |block|
+        next unless block["type"]
+
+        settings = (block["settings"] || []).each_with_object({}) do |s, h|
+          h[s["id"]] = s["default"] if s["id"]
+        end
+
+        {
+          "type" => block["type"],
+          "settings" => settings
+        }
+      end
+    end
+  end
+end

data/lib/liquidbook/server/app.rb

@@ -0,0 +1,158 @@
+# frozen_string_literal: true
+
+require "sinatra/base"
+require "json"
+
+module Liquidbook
+  module Server
+    class App < Sinatra::Base
+      set :views, File.expand_path("views", __dir__)
+      set :public_folder, -> { File.join(Liquidbook.root, "assets") }
+
+      helpers do
+        def renderer
+          @renderer ||= ThemeRenderer.new(theme_root: Liquidbook.root)
+        end
+
+        def config
+          Liquidbook.config
+        end
+
+        def h(text)
+          Rack::Utils.escape_html(text.to_s)
+        end
+
+        def head_tags
+          config.head_tags_html.join("\n")
+        end
+      end
+
+      # Index page - list all sections and snippets
+      get "/" do
+        @sections = renderer.sections
+        @snippets = renderer.snippets
+        erb :index
+      end
+
+      # Preview a section
+      get "/sections/:name" do
+        name = params[:name]
+        begin
+          overrides = parse_overrides(params)
+          @rendered = renderer.render_section(name, overrides: overrides)
+          @name = name
+          @type = "section"
+          @schema = load_schema("sections", name)
+          @params = []
+          erb :preview
+        rescue Liquidbook::Error => e
+          status 404
+          "Section not found: #{h(name)}"
+        end
+      end
+
+      # Preview a snippet
+      get "/snippets/:name" do
+        name = params[:name]
+        begin
+          overrides = parse_overrides(params)
+          @rendered = renderer.render_snippet(name, overrides: overrides)
+          @name = name
+          @type = "snippet"
+          @schema = {}
+          @params = renderer.snippet_params(name)
+          erb :preview
+        rescue Liquidbook::Error => e
+          status 404
+          "Snippet not found: #{h(name)}"
+        end
+      end
+
+      # Serve imported files from config (CSS/JS from arbitrary paths)
+      get "/__imports__/*" do
+        serve_path = "/__imports__/#{params["splat"].first}"
+        file_path = config.import_files[serve_path]
+
+        if file_path && File.exist?(file_path)
+          content_type mime_type(File.extname(file_path)) || "application/octet-stream"
+          File.read(file_path)
+        else
+          status 404
+          "Import not found: #{h(serve_path)}"
+        end
+      end
+
+      # Serve theme assets
+      get "/assets/*" do
+        file_path = File.join(Liquidbook.root, "assets", params["splat"].first)
+        if File.exist?(file_path)
+          content_type mime_type(File.extname(file_path)) || "application/octet-stream"
+          File.read(file_path)
+        else
+          status 404
+          "Asset not found"
+        end
+      end
+
+      # API: re-render with params (for live reload + param editing)
+      post "/api/render/:type/:name" do
+        content_type :json
+        type = params[:type]
+        name = params[:name]
+
+        begin
+          body = JSON.parse(request.body.read) rescue {}
+          overrides = body["overrides"] || {}
+
+          html = case type
+                 when "sections" then renderer.render_section(name, overrides: overrides)
+                 when "snippets" then renderer.render_snippet(name, overrides: overrides)
+                 else raise Error, "Unknown type: #{type}"
+                 end
+          { html: html }.to_json
+        rescue Liquidbook::Error => e
+          status 404
+          { error: e.message }.to_json
+        end
+      end
+
+      # API: re-render (GET for live reload)
+      get "/api/render/:type/:name" do
+        content_type :json
+        type = params[:type]
+        name = params[:name]
+
+        begin
+          html = case type
+                 when "sections" then renderer.render_section(name)
+                 when "snippets" then renderer.render_snippet(name)
+                 else raise Error, "Unknown type: #{type}"
+                 end
+          { html: html }.to_json
+        rescue Liquidbook::Error => e
+          status 404
+          { error: e.message }.to_json
+        end
+      end
+
+      private
+
+      def load_schema(dir, name)
+        path = File.join(Liquidbook.root, dir, "#{name}.liquid")
+        return {} unless File.exist?(path)
+
+        SchemaParser.new(File.read(path)).parse
+      end
+
+      def parse_overrides(params)
+        overrides = {}
+        params.each do |key, value|
+          next if %w[name splat captures].include?(key)
+
+          overrides[key] = value
+        end
+        overrides
+      end
+    end
+  end
+end

data/lib/liquidbook/server/views/index.erb

@@ -0,0 +1,35 @@
+<h2 style="margin-bottom: 16px; font-size: 20px;">Sections</h2>
+<% if @sections.empty? %>
+  <p style="color: var(--text-sub);">No sections found in <code>sections/</code></p>
+<% else %>
+  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 32px;">
+    <% @sections.each do |name| %>
+      <a href="/sections/<%= h(name) %>" style="
+        display: block; padding: 16px; background: var(--surface);
+        border: 1px solid var(--border); border-radius: var(--radius);
+        text-decoration: none; color: var(--text); transition: border-color 0.2s;
+      " onmouseover="this.style.borderColor='var(--accent)'" onmouseout="this.style.borderColor='var(--border)'">
+        <div style="font-weight: 500;"><%= h(name) %></div>
+        <div style="font-size: 12px; color: var(--text-sub); margin-top: 4px;">section</div>
+      </a>
+    <% end %>
+  </div>
+<% end %>
+
+<h2 style="margin-bottom: 16px; font-size: 20px;">Snippets</h2>
+<% if @snippets.empty? %>
+  <p style="color: var(--text-sub);">No snippets found in <code>snippets/</code></p>
+<% else %>
+  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;">
+    <% @snippets.each do |name| %>
+      <a href="/snippets/<%= h(name) %>" style="
+        display: block; padding: 16px; background: var(--surface);
+        border: 1px solid var(--border); border-radius: var(--radius);
+        text-decoration: none; color: var(--text); transition: border-color 0.2s;
+      " onmouseover="this.style.borderColor='var(--accent)'" onmouseout="this.style.borderColor='var(--border)'">
+        <div style="font-weight: 500;"><%= h(name) %></div>
+        <div style="font-size: 12px; color: var(--text-sub); margin-top: 4px;">snippet</div>
+      </a>
+    <% end %>
+  </div>
+<% end %>

data/lib/liquidbook/server/views/layout.erb

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Liquidbook</title>
+  <%= head_tags %>
+  <style>
+    :root {
+      --lp-bg: #f5f5f5;
+      --lp-surface: #fff;
+      --lp-text: #1a1a1a;
+      --lp-text-sub: #666;
+      --lp-accent: #5c6ac4;
+      --lp-border: #e0e0e0;
+      --lp-radius: 8px;
+    }
+    .lp-topbar {
+      background: var(--lp-surface);
+      border-bottom: 1px solid var(--lp-border);
+      padding: 12px 24px;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      position: sticky;
+      top: 0;
+      z-index: 10000;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    }
+    .lp-topbar h1 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--lp-accent);
+      margin: 0;
+    }
+    .lp-topbar nav a {
+      color: var(--lp-text-sub);
+      text-decoration: none;
+      font-size: 14px;
+    }
+    .lp-topbar nav a:hover { color: var(--lp-accent); }
+    .lp-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    }
+  </style>
+</head>
+<body>
+  <div class="lp-topbar">
+    <h1>Liquidbook</h1>
+    <nav><a href="/">Home</a></nav>
+  </div>
+  <div class="lp-container">
+    <%= yield %>
+  </div>
+</body>
+</html>

data/lib/liquidbook/server/views/preview.erb

@@ -0,0 +1,183 @@
+<div style="display: flex; gap: 24px; align-items: flex-start; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+  <!-- Preview pane -->
+  <div style="flex: 1; min-width: 0;">
+    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
+      <h2 style="font-size: 20px; margin: 0;"><%= h(@name) %></h2>
+      <span style="font-size: 12px; padding: 2px 8px; background: var(--lp-accent); color: #fff; border-radius: 12px;"><%= h(@type) %></span>
+    </div>
+
+    <!-- Viewport controls -->
+    <div style="margin-bottom: 12px; display: flex; gap: 8px;">
+      <button onclick="setWidth('100%')" class="lp-btn">Full</button>
+      <button onclick="setWidth('768px')" class="lp-btn">Tablet</button>
+      <button onclick="setWidth('375px')" class="lp-btn">Mobile</button>
+    </div>
+
+    <div id="preview-frame" style="
+      background: var(--lp-surface);
+      border: 1px solid var(--lp-border);
+      border-radius: var(--lp-radius);
+      padding: 24px;
+      overflow: auto;
+      transition: max-width 0.3s;
+    ">
+      <%= @rendered %>
+    </div>
+
+    <!-- Source toggle -->
+    <details style="margin-top: 16px;">
+      <summary style="cursor: pointer; color: var(--lp-text-sub); font-size: 14px;">Rendered HTML</summary>
+      <pre style="
+        margin-top: 8px; padding: 16px; background: #2d2d2d; color: #f8f8f2;
+        border-radius: var(--lp-radius); overflow-x: auto; font-size: 13px; line-height: 1.5;
+      "><%= h(@rendered) %></pre>
+    </details>
+  </div>
+
+  <!-- Sidebar: params + schema -->
+  <div style="width: 320px; flex-shrink: 0; position: sticky; top: 64px;">
+
+    <!-- Snippet @param editor -->
+    <% if @params && !@params.empty? %>
+      <div style="background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 16px; margin-bottom: 16px;">
+        <h3 style="font-size: 14px; margin: 0 0 12px; color: var(--lp-text-sub);">Parameters</h3>
+        <form id="param-form">
+          <% @params.each do |param| %>
+            <div style="margin-bottom: 12px;">
+              <label style="display: block; font-size: 12px; font-weight: 500; margin-bottom: 4px;">
+                <%= h(param["name"]) %>
+                <span style="font-weight: normal; color: var(--lp-text-sub);"><%= h(param["description"]) %></span>
+              </label>
+              <% if param["type"] == "checkbox" %>
+                <input type="checkbox" name="<%= h(param["name"]) %>" <%= "checked" if param["default"] %> data-param>
+              <% elsif param["type"] == "number" %>
+                <input type="number" name="<%= h(param["name"]) %>" value="<%= h(param["default"]) %>" style="width: 100%; padding: 6px 8px; border: 1px solid var(--lp-border); border-radius: 4px; font-size: 13px;" data-param>
+              <% else %>
+                <input type="text" name="<%= h(param["name"]) %>" value="<%= h(param["default"]) %>" style="width: 100%; padding: 6px 8px; border: 1px solid var(--lp-border); border-radius: 4px; font-size: 13px;" data-param>
+              <% end %>
+            </div>
+          <% end %>
+          <button type="submit" class="lp-btn" style="width: 100%; background: var(--lp-accent); color: #fff; border-color: var(--lp-accent);">Update Preview</button>
+        </form>
+      </div>
+    <% end %>
+
+    <!-- Schema sidebar -->
+    <% unless @schema.nil? || @schema.empty? %>
+      <div style="background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 16px;">
+        <h3 style="font-size: 14px; margin: 0 0 12px; color: var(--lp-text-sub);">Schema Settings</h3>
+        <% (@schema["settings"] || []).each do |setting| %>
+          <div style="margin-bottom: 12px;">
+            <label style="display: block; font-size: 12px; font-weight: 500; margin-bottom: 4px;">
+              <%= h(setting["label"] || setting["id"]) %>
+            </label>
+            <% st = setting["type"] %>
+            <% if %w[text url richtext].include?(st) %>
+              <input type="text" value="<%= h(setting["default"]) %>" style="width: 100%; padding: 6px 8px; border: 1px solid var(--lp-border); border-radius: 4px; font-size: 13px;" disabled>
+            <% elsif st == "textarea" %>
+              <textarea style="width: 100%; padding: 6px 8px; border: 1px solid var(--lp-border); border-radius: 4px; font-size: 13px; min-height: 60px;" disabled><%= h(setting["default"]) %></textarea>
+            <% elsif st == "checkbox" %>
+              <input type="checkbox" <%= "checked" if setting["default"] %> disabled>
+            <% elsif st == "range" %>
+              <input type="range" min="<%= setting["min"] %>" max="<%= setting["max"] %>" value="<%= setting["default"] %>" step="<%= setting["step"] || 1 %>" style="width: 100%;" disabled>
+              <span style="font-size: 12px; color: var(--lp-text-sub);"><%= setting["default"] %></span>
+            <% elsif st == "select" %>
+              <select style="width: 100%; padding: 6px 8px; border: 1px solid var(--lp-border); border-radius: 4px; font-size: 13px;" disabled>
+                <% (setting["options"] || []).each do |opt| %>
+                  <option value="<%= h(opt["value"]) %>" <%= "selected" if opt["value"] == setting["default"] %>>
+                    <%= h(opt["label"] || opt["value"]) %>
+                  </option>
+                <% end %>
+              </select>
+            <% elsif %w[color color_background].include?(st) %>
+              <input type="color" value="<%= h(setting["default"] || "#000000") %>" style="width: 48px; height: 32px; border: 1px solid var(--lp-border); border-radius: 4px;" disabled>
+            <% else %>
+              <div style="font-size: 12px; color: var(--lp-text-sub);"><%= h(st) %>: <%= h(setting["default"]) %></div>
+            <% end %>
+          </div>
+        <% end %>
+
+        <% if @schema["blocks"] && !@schema["blocks"].empty? %>
+          <h3 style="font-size: 14px; margin: 16px 0 8px; color: var(--lp-text-sub);">Blocks</h3>
+          <% @schema["blocks"].each do |block| %>
+            <div style="padding: 8px; border: 1px solid var(--lp-border); border-radius: 4px; margin-bottom: 8px;">
+              <div style="font-size: 13px; font-weight: 500;"><%= h(block["name"] || block["type"]) %></div>
+              <div style="font-size: 11px; color: var(--lp-text-sub);">type: <%= h(block["type"]) %></div>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<style>
+  .lp-btn {
+    padding: 4px 12px;
+    border: 1px solid var(--lp-border);
+    border-radius: 4px;
+    background: var(--lp-surface);
+    cursor: pointer;
+    font-size: 13px;
+    font-family: inherit;
+  }
+  .lp-btn:hover { border-color: var(--lp-accent); }
+</style>
+
+<script>
+  function setWidth(w) {
+    document.getElementById('preview-frame').style.maxWidth = w;
+  }
+
+  // Param form → re-render via POST
+  const form = document.getElementById('param-form');
+  if (form) {
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const overrides = {};
+      form.querySelectorAll('[data-param]').forEach(el => {
+        if (el.type === 'checkbox') {
+          overrides[el.name] = el.checked;
+        } else if (el.type === 'number') {
+          overrides[el.name] = Number(el.value);
+        } else {
+          overrides[el.name] = el.value;
+        }
+      });
+
+      const type = '<%= @type == "section" ? "sections" : "snippets" %>';
+      const name = '<%= @name %>';
+      try {
+        const res = await fetch(`/api/render/${type}/${name}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ overrides })
+        });
+        const data = await res.json();
+        if (data.html) {
+          document.getElementById('preview-frame').innerHTML = data.html;
+        }
+      } catch (err) {
+        console.error('Render error:', err);
+      }
+    });
+  }
+
+  // Live reload via polling (file changes)
+  (function() {
+    const type = '<%= @type == "section" ? "sections" : "snippets" %>';
+    const name = '<%= @name %>';
+    let lastHtml = null;
+
+    setInterval(async () => {
+      try {
+        const res = await fetch(`/api/render/${type}/${name}`);
+        const data = await res.json();
+        if (data.html && lastHtml !== null && data.html !== lastHtml) {
+          document.getElementById('preview-frame').innerHTML = data.html;
+        }
+        lastHtml = data.html;
+      } catch (e) {}
+    }, 1500);
+  })();
+</script>