mp 0.1.0

data/lib/mp/deck.rb

@@ -0,0 +1,268 @@
+# frozen_string_literal: true
+
+require "cgi"
+require "shellwords"
+require "yaml"
+require_relative "slide_renderer"
+
+module Mp
+  # Markdown をスライドへ分割する。
+  #
+  #   # H1  → 表紙スライド
+  #   ## H2 → 通常スライド(H2 がページタイトル)
+  #   ---   → タイトルなしの続きスライド
+  #
+  # kramdown に渡す前に行単位で走査する。kramdown は info 文字列に属性を持つ
+  # フェンスを認識せず、`$x$` も扱えないため、独自記法はここでトークンに置換する。
+  class Deck
+    GLOBAL_DIRECTIVES = %w[theme size style title].freeze
+    LOCAL_DIRECTIVES = %w[
+      paginate header footer class color
+      backgroundColor backgroundImage backgroundPosition backgroundRepeat backgroundSize
+    ].freeze
+    SIZES = { "16:9" => [1280, 720], "4:3" => [960, 720] }.freeze
+    FENCE = /\A {0,3}(`{3,}|~{3,})\s*(.*?)\s*\z/
+    INLINE = /(?<code>(?<ticks>`+).+?\k<ticks>)|<!--(?<comment>.*?)-->|\$\$(?<display>.+?)\$\$|(?<![\\\w$])\$(?=\S)(?<math>[^$\n]+?)(?<=\S)\$(?![\d$])/
+    CSS_LENGTH = /\A\d+(\.\d+)?(%|px)?\z/
+
+    Chunk = Struct.new(:kind, :title, :lines, :comments, :fit, keyword_init: true)
+
+    attr_reader :slides, :globals, :embeds, :base_dir
+
+    def self.load(path)
+      new(File.read(path, encoding: "UTF-8"), base_dir: File.dirname(File.expand_path(path)))
+    end
+
+    def initialize(source, base_dir: Dir.pwd)
+      @base_dir = base_dir
+      @globals = {}
+      @embeds = {}
+      @tokens = {}
+      body, front = split_front_matter(source.gsub("\r\n", "\n"))
+      @state = {}
+      apply_directives(front, {})
+      @slides = build_slides(scan(body))
+    end
+
+    def size
+      SIZES.fetch(@globals["size"].to_s, SIZES["16:9"])
+    end
+
+    def title
+      @globals["title"] || @slides.find { _1[:kind] == :cover }&.fetch(:title) || "mp"
+    end
+
+    # ブラウザへ渡す情報。cwd はサーバ側だけで使うので含めない
+    def to_h
+      {
+        title: title,
+        size: size,
+        style: @globals["style"].to_s,
+        slides: @slides.map { _1.slice(:html, :notes) },
+        embeds: @embeds.transform_values { _1.except(:cwd) }
+      }
+    end
+
+    private
+
+    def split_front_matter(source)
+      match = source.match(/\A---[ \t]*\n(.*?)^---[ \t]*(\n|\z)/m)
+      return [source, {}] unless match
+
+      front = load_yaml(match[1]) || {}
+      [match.post_match, front.is_a?(Hash) ? front : {}]
+    end
+
+    # YAML 1.1 では `4:3` が 60 進数の 243 になるので、文字列のまま読ませる
+    def load_yaml(text)
+      YAML.safe_load(text.gsub(/^(\s*_?size:\s*)(\d+:\d+)\s*$/, '\1"\2"'))
+    end
+
+    def scan(body)
+      chunks = [Chunk.new(kind: :preamble, lines: [], comments: [])]
+      lines = body.split("\n", -1)
+      index = 0
+      while index < lines.length
+        line = lines[index]
+        if (fence = line.match(FENCE))
+          index = read_fence(lines, index, fence, chunks.last)
+        elsif line.match?(/\A\s*\$\$\s*\z/)
+          index = read_math_block(lines, index, chunks.last)
+        else
+          index = read_line(lines, index, chunks)
+        end
+      end
+      chunks
+    end
+
+    def read_fence(lines, index, fence, chunk)
+      marker = fence[1]
+      close = /\A {0,3}#{Regexp.escape(marker[0])}{#{marker.length},}\s*\z/
+      stop = (index + 1...lines.length).find { lines[_1].match?(close) } || lines.length
+      inner = lines[index + 1...stop]
+      name, *attrs = Shellwords.split(fence[2]) rescue [fence[2].split.first]
+      if %w[terminal web].include?(name)
+        chunk.lines.push("", embed_token(name, parse_attrs(attrs), inner), "")
+      else
+        # kramdown は言語名だけを受け付ける
+        chunk.lines.push("#{marker}#{name}", *inner, marker)
+      end
+      stop + 1
+    end
+
+    def read_math_block(lines, index, chunk)
+      stop = (index + 1...lines.length).find { lines[_1].match?(/\A\s*\$\$\s*\z/) } || lines.length
+      chunk.lines.push("", math_token(lines[index + 1...stop].join("\n"), true), "")
+      stop + 1
+    end
+
+    def read_line(lines, index, chunks)
+      line, index = strip_inline(lines, index, chunks.last)
+      following = lines[index]
+      if (heading = line.match(/\A {0,3}(#{"#"}{1,2})\s+(.*?)\s*#*\s*\z/))
+        start_chunk(chunks, heading[1].length, heading[2], line)
+      elsif following&.match?(/\A {0,3}(=+|-+)\s*\z/) && !line.strip.empty? && !line.match?(/\A\s*[-*+>|#]/)
+        start_chunk(chunks, following.lstrip.start_with?("=") ? 1 : 2, line.strip, "#{line}\n#{following}")
+        return index + 1
+      elsif line.match?(/\A {0,3}(-{3,}|\*{3,}|_{3,})\s*\z/)
+        chunks << Chunk.new(kind: :continuation, lines: [], comments: [])
+      else
+        chunks.last.lines << line
+      end
+      index
+    end
+
+    def start_chunk(chunks, level, title, source)
+      fit = @pending_fit
+      @pending_fit = false
+      chunks << Chunk.new(kind: level == 1 ? :cover : :slide, title: title, lines: [source], comments: [], fit: fit)
+      # 見出し行より前に読んだコメントは前のチャンクに残るので、見出し行の分だけ移す
+      chunks.last.comments.concat(@heading_comments)
+    end
+
+    # コメントと数式を行から抜き出す。次に読むべき行番号も返す
+    def strip_inline(lines, index, chunk)
+      @heading_comments = []
+      heading = lines[index].match?(/\A {0,3}\#{1,2}\s/)
+      line = lines[index].gsub(INLINE) do
+        match = Regexp.last_match
+        if match[:code] then match[:code]
+        elsif match[:comment]
+          text = match[:comment].strip
+          if heading && text == "fit" then @pending_fit = true
+          elsif heading then @heading_comments << text
+          else chunk.comments << text
+          end
+          ""
+        elsif match[:display] then math_token(match[:display], true)
+        else math_token(match[:math], false)
+        end
+      end
+      index += 1
+
+      # 複数行コメント
+      start = line.gsub(/(`+).+?\1/, "").index("<!--") && line.index("<!--")
+      return [line, index] unless start
+
+      text = [line[(start + 4)..]]
+      line = line[0...start]
+      until index >= lines.length || lines[index].include?("-->")
+        text << lines[index]
+        index += 1
+      end
+      if index < lines.length
+        head, tail = lines[index].split("-->", 2)
+        text << head
+        line += tail.to_s
+        index += 1
+      end
+      chunk.comments << text.join("\n").strip
+      [line, index]
+    end
+
+    def parse_attrs(attrs)
+      attrs.to_h { |attr| attr.include?("=") ? attr.split("=", 2) : [attr, "true"] }
+    end
+
+    def embed_token(type, attrs, inner)
+      id = "e#{@embeds.length + 1}"
+      style = %w[width height].filter_map { |key|
+        value = attrs[key]
+        "#{key}:#{value}#{"px" if value.match?(/\A[\d.]+\z/)};flex:none" if value&.match?(CSS_LENGTH)
+      }.join(";")
+      @embeds[id] = type == "web" ? web_embed(attrs, inner) : terminal_embed(attrs, inner)
+      token(%(<div class="embed embed-#{type}" data-embed="#{id}" style="#{CGI.escapeHTML(style)}"></div>))
+    end
+
+    def terminal_embed(attrs, inner)
+      {
+        type: "terminal",
+        cwd: resolve_cwd(attrs["cwd"]),
+        commands: inner.map(&:strip).reject(&:empty?),
+        font: attrs["font"].to_i.positive? ? attrs["font"].to_i : 18
+      }
+    end
+
+    def web_embed(attrs, inner)
+      src = inner.map(&:strip).reject(&:empty?).first.to_s
+      src = "" if src.match?(/\A[a-z][a-z0-9+.-]*:/i) && !src.match?(%r{\Ahttps?://}i)
+      { type: "web", src: src, zoom: attrs["zoom"].to_f.positive? ? attrs["zoom"].to_f : 1.0 }
+    end
+
+    def resolve_cwd(cwd)
+      path = File.expand_path(cwd.to_s, @base_dir)
+      File.directory?(path) ? path : @base_dir
+    end
+
+    def math_token(tex, display)
+      token(%(<span class="math" data-tex="#{CGI.escapeHTML(tex)}" data-display="#{display}"></span>))
+    end
+
+    def token(html)
+      key = "MPTOKEN#{@tokens.length}X"
+      @tokens[key] = html
+      key
+    end
+
+    def parse_directive(comment)
+      data = load_yaml(comment)
+      return unless data.is_a?(Hash) && !data.empty?
+
+      known = GLOBAL_DIRECTIVES + LOCAL_DIRECTIVES
+      data if data.keys.all? { known.include?(_1.to_s.delete_prefix("_")) }
+    rescue Psych::Exception
+      nil
+    end
+
+    def apply_directives(data, spot)
+      data.each do |key, value|
+        key = key.to_s
+        if GLOBAL_DIRECTIVES.include?(key) then @globals[key] = value
+        elsif key.start_with?("_") then spot[key.delete_prefix("_")] = value
+        else @state[key] = value
+        end
+      end
+    end
+
+    def build_slides(chunks)
+      chunks = chunks.reject { |chunk|
+        # `---` の直後に見出しが来る書き方でも空のスライドを作らない
+        next false unless %i[preamble continuation].include?(chunk.kind) && chunk.lines.all? { _1.strip.empty? }
+
+        chunk.comments.each { |comment| parse_directive(comment)&.then { apply_directives(_1, {}) } }
+        true
+      }
+      total = chunks.length
+      chunks.each_with_index.map do |chunk, index|
+        spot = {}
+        notes = chunk.comments.reject do |comment|
+          directive = parse_directive(comment)
+          apply_directives(directive, spot) if directive
+          directive
+        end
+        SlideRenderer.new(chunk, index:, total:, directives: @state.merge(spot), tokens: @tokens)
+                     .render.merge(kind: chunk.kind, title: chunk.title, notes: notes.join("\n\n"))
+      end
+    end
+  end
+end

data/lib/mp/frame_unblocker.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Mp
+  # 埋め込みを拒否するレスポンスヘッダだけを取り除く。
+  # 本文には触れないので、プロキシと違いページ自体は壊れない。
+  class FrameUnblocker
+    REQUEST_PATTERNS = [{ urlPattern: "*", resourceType: "Document", requestStage: "Response" }].freeze
+
+    def self.strip_headers(headers)
+      changed = false
+      result = headers.filter_map do |header|
+        case header["name"].downcase
+        when "x-frame-options"
+          changed = true
+          nil
+        when "content-security-policy"
+          policy = strip_frame_ancestors(header["value"])
+          changed ||= policy != header["value"]
+          policy.empty? ? nil : header.merge("value" => policy)
+        else
+          header
+        end
+      end
+      changed ? result : nil
+    end
+
+    def self.strip_frame_ancestors(policy)
+      # 複数ポリシーがカンマで連結されている場合があるので、ポリシーごとに処理する
+      policy.split(",").map { |one|
+        one.split(";").reject { |d| d.strip.downcase.start_with?("frame-ancestors") }.join(";").strip
+      }.reject(&:empty?).join(", ")
+    end
+
+    def initialize(cdp)
+      @cdp = cdp
+    end
+
+    # ページを開く前に呼ぶこと。遷移後だと最初の iframe のレスポンスに間に合わない
+    def attach(page_session)
+      @cdp.on("Target.attachedToTarget") { |params, _| prepare_child(params) }
+      @cdp.on("Fetch.requestPaused") { |params, session| rewrite(params, session) }
+      watch(page_session)
+    end
+
+    private
+
+    # サイトをまたぐ iframe は別プロセスの子ターゲットになるので、そちらにも同じ設定をする
+    def prepare_child(params)
+      session = params["sessionId"]
+      watch(session)
+      @cdp.call("Runtime.runIfWaitingForDebugger", {}, session_id: session)
+    end
+
+    def watch(session)
+      @cdp.call("Fetch.enable", { patterns: REQUEST_PATTERNS }, session_id: session)
+      @cdp.call("Target.setAutoAttach", { autoAttach: true, waitForDebuggerOnStart: true, flatten: true },
+                session_id: session)
+    end
+
+    def rewrite(params, session)
+      id = params["requestId"]
+      headers = params["responseHeaders"] && self.class.strip_headers(params["responseHeaders"])
+      unless headers
+        @cdp.call("Fetch.continueResponse", { requestId: id }, session_id: session)
+        return
+      end
+
+      # continueResponse で渡したヘッダは表示上は変わるが、Chrome はパース済みの
+      # ポリシーで判定を続ける。fulfillRequest ならレスポンスごと作り直される。
+      reply = @cdp.call("Fetch.getResponseBody", { requestId: id }, session_id: session)
+      body = reply["base64Encoded"] ? reply["body"] : [reply["body"]].pack("m0")
+      @cdp.call("Fetch.fulfillRequest",
+                { requestId: id, responseCode: params["responseStatusCode"], responseHeaders: headers, body: body },
+                session_id: session)
+    end
+  end
+end

data/lib/mp/server.rb

@@ -0,0 +1,224 @@
+# frozen_string_literal: true
+
+require "json"
+require "puma"
+require "puma/server"
+require "rack"
+require "rouge"
+require "securerandom"
+require "websocket/driver"
+require_relative "deck"
+require_relative "terminal"
+require_relative "web_socket"
+
+module Mp
+  # デッキと埋め込みターミナルを配信するローカルサーバ。
+  #
+  # ターミナルは任意コマンドを実行できるので、127.0.0.1 のみで待ち受け、全パスに
+  # ランダムトークンを要求し、WebSocket は Origin も検証する。
+  class Server
+    HOST = "127.0.0.1"
+    PUBLIC_DIR = File.expand_path("../../public", __dir__)
+    VENDOR_DIR = File.expand_path("../../vendor/assets", __dir__)
+    THEME_DIR = File.expand_path("../../themes", __dir__)
+    SANDBOXED_TYPES = %w[text/html image/svg+xml application/xhtml+xml].freeze
+
+    attr_reader :token, :port, :deck
+    attr_accessor :on_open_presenter, :on_frame_request
+
+    def initialize(path, port: 0, on_quit: nil)
+      @path = File.expand_path(path)
+      @requested_port = port
+      @on_quit = on_quit
+      @token = SecureRandom.hex(16)
+      @clients = {} # socket => :audience / :presenter
+      @terminals = []
+      @lock = Mutex.new
+      reload
+    end
+
+    def start
+      log_writer = ENV["MP_DEBUG"] ? Puma::LogWriter.stdio : Puma::LogWriter.null
+      @puma = Puma::Server.new(self, nil, min_threads: 0, max_threads: 16, log_writer: log_writer)
+      @port = @puma.add_tcp_listener(HOST, @requested_port).addr[1]
+      @puma.run
+      self
+    end
+
+    def stop
+      @lock.synchronize { @terminals.dup }.each(&:close)
+      @puma&.stop(true)
+    end
+
+    def origin = "http://#{HOST}:#{@port}"
+    def boot_url = "#{origin}/#{@token}/_mp/boot"
+    def app_url = "#{origin}/#{@token}/"
+    def presenter_url = "#{origin}/#{@token}/presenter"
+
+    def presenter_connected?
+      @lock.synchronize { @clients.value?(:presenter) }
+    end
+
+    def send_frame(data)
+      broadcast(JSON.generate(type: "frame", data: data), role: :presenter)
+    end
+
+    # デッキを読み直して表示中のページへ通知する。失敗したら前の内容のまま続ける
+    def reload
+      @deck = Deck.load(@path)
+      broadcast(JSON.generate(type: "reload"))
+    rescue Psych::Exception, SystemCallError => e
+      raise unless @deck
+
+      warn "[mp] 読み込みに失敗しました: #{e.message}"
+    end
+
+    def call(env)
+      path = env["PATH_INFO"]
+      prefix = "/#{@token}/"
+      return not_found unless path.start_with?(prefix)
+
+      route(path.delete_prefix(prefix), env)
+    end
+
+    private
+
+    def route(path, env)
+      case path
+      when "" then file(File.join(PUBLIC_DIR, "index.html"), app_headers)
+      when "presenter" then file(File.join(PUBLIC_DIR, "presenter.html"), app_headers)
+      when "_mp/boot" then [200, { "content-type" => "text/plain" }, [""]]
+      when "_mp/deck.json" then [200, { "content-type" => "application/json" }, [JSON.generate(deck_json)]]
+      when "_mp/events" then websocket(env) { |socket| serve_events(socket, env) }
+      when "_mp/pty" then websocket(env) { |socket| serve_terminal(socket, env) }
+      when %r{\A_mp/vendor/(.+)\z} then static(VENDOR_DIR, Regexp.last_match(1))
+      when %r{\A_mp/(.+)\z} then static(PUBLIC_DIR, Regexp.last_match(1))
+      else deck_file(path)
+      end
+    end
+
+    def app_headers
+      {
+        "content-security-policy" => [
+          "default-src 'self'", "script-src 'self'", "style-src 'self' 'unsafe-inline' https:",
+          "img-src * data: blob:", "media-src *", "font-src 'self' data: https:", "frame-src *",
+          "connect-src 'self' ws://#{HOST}:#{@port}", "object-src 'none'", "base-uri 'none'"
+        ].join("; ")
+      }
+    end
+
+    def deck_json
+      @deck.to_h.merge(themeCss: theme_css)
+    end
+
+    def theme_css
+      theme = @deck.globals["theme"].to_s
+      theme = "default" if theme.empty?
+      custom = File.expand_path(theme, @deck.base_dir)
+      css = if theme.end_with?(".css") && inside?(@deck.base_dir, custom) && File.file?(custom)
+              File.read(custom)
+            else
+              builtin = File.join(THEME_DIR, "#{File.basename(theme, ".css")}.css")
+              File.read(File.file?(builtin) ? builtin : File.join(THEME_DIR, "default.css"))
+            end
+      mode = css.include?("mp-dark") ? :dark : :light
+      "#{Rouge::Themes::Github.mode(mode).render(scope: ".highlight")}\n#{css}"
+    end
+
+    def inside?(dir, path)
+      path.start_with?("#{File.expand_path(dir)}/")
+    end
+
+    def static(dir, relative)
+      full = File.expand_path(relative, dir)
+      inside?(dir, full) ? file(full) : not_found
+    end
+
+    # デッキのあるディレクトリのファイル(画像など)
+    def deck_file(relative)
+      relative = Rack::Utils.unescape_path(relative)
+      return not_found if relative.split("/").any? { _1.start_with?(".") }
+
+      base = File.realpath(@deck.base_dir)
+      full = File.expand_path(relative, base)
+      return not_found unless File.file?(full)
+      return not_found unless inside?(base, File.realpath(full))
+
+      file(full, sandbox_headers(full))
+    end
+
+    # デッキ配下の HTML はアプリと同一オリジンにせず、PTY の WebSocket へ触れないようにする
+    def sandbox_headers(path)
+      return {} unless SANDBOXED_TYPES.include?(mime(path))
+
+      { "content-security-policy" => "sandbox allow-scripts allow-forms allow-popups" }
+    end
+
+    def mime(path) = Rack::Mime.mime_type(File.extname(path), "application/octet-stream")
+
+    def file(path, headers = {})
+      return not_found unless File.file?(path)
+
+      [200, { "content-type" => mime(path), "x-content-type-options" => "nosniff", "cache-control" => "no-store" }
+        .merge(headers), [File.binread(path)]]
+    end
+
+    def not_found = [404, { "content-type" => "text/plain" }, ["not found"]]
+
+    def websocket(env)
+      return [403, {}, ["forbidden"]] unless env["HTTP_ORIGIN"] == origin
+      return [400, {}, ["websocket only"]] unless WebSocket::Driver.websocket?(env)
+
+      socket = WebSocketConnection.new(env)
+      yield socket
+      socket.run
+      [-1, {}, []] # hijack 済み
+    end
+
+    def serve_events(socket, env)
+      presenter = Rack::Utils.parse_query(env["QUERY_STRING"])["role"] == "presenter"
+      @lock.synchronize { @clients[socket] = presenter ? :presenter : :audience }
+      socket.on_message { |message| handle_event(socket, message) }
+      socket.on_close { @lock.synchronize { @clients.delete(socket) } }
+    end
+
+    # スライドの状態は聴衆画面だけが持つ。発表者のコマンドと聴衆の状態はここで中継する
+    def handle_event(socket, message)
+      case JSON.parse(message)["type"]
+      when "quit" then @on_quit&.call
+      when "open-presenter" then @on_open_presenter&.call
+      when "frame" then @on_frame_request&.call
+      else broadcast(message, except: socket)
+      end
+    rescue JSON::ParserError
+      nil
+    end
+
+    def broadcast(message, role: nil, except: nil)
+      targets = @lock.synchronize { @clients.select { |socket, r| socket != except && (role.nil? || r == role) }.keys }
+      targets.each { _1.send_text(message) }
+    end
+
+    def serve_terminal(socket, env)
+      params = Rack::Utils.parse_query(env["QUERY_STRING"])
+      embed = @deck.embeds[params["id"]]
+      return socket.close unless embed && embed[:type] == "terminal"
+
+      terminal = Terminal.new(cwd: embed[:cwd], cols: params["cols"].to_i, rows: params["rows"].to_i)
+      @lock.synchronize { @terminals << terminal }
+      reader = Thread.new do
+        terminal.read_loop { |data| socket.send_binary(data) }
+        socket.close
+      end
+      socket.on_message do |message|
+        data = JSON.parse(message)
+        data["resize"] ? terminal.resize(*data["resize"].map(&:to_i)) : terminal.write(data["input"].to_s)
+      end
+      socket.on_close do
+        @lock.synchronize { @terminals.delete(terminal) }
+        terminal.close
+        reader.kill
+      end
+    end
+  end
+end