mp 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 34fc0a2942d59611b53629311f2696063e7c780f5d5a23f295961806f13898da
-  data.tar.gz: bbf907d4146120f4438f9e260a402dc7fca7fd7a8e3e366ef987cd6655fea2d0
+  metadata.gz: 5129f3b2c3b3d69f8dfd2ccbf055ff7beeb95befb40fc92bbaede6f0e6aa90ed
+  data.tar.gz: bf6f1b7fc5b27dbf4c3358d71c5e7f78b9fd8dfb5356c42afe50746034b80227
 SHA512:
-  metadata.gz: 999b1907304af0e73c5520565a1e4cc20d68beb94f54ca4509589b9978c1e6ad75839ed5b21100bbee4ffbb8504fdd7137550bfce94ba3779472518004bae851
-  data.tar.gz: 9b86c3d9a52300db5b225fde23b43e94e4d5e108b02c07c6ca3ecf3bc0e83fc885e1527331fb936fb135a2425b0511e68ef9c0667429cbe9355a8a215fe408f3
+  metadata.gz: 68d1748098ff537a0a9a0c868831f625c525b5a19b7bd1cef064716c25a12912fe3538c866281ac72fe0e006945e95a0bcdbaac11c67c3c04fc03c26492a0459
+  data.tar.gz: a54861155242c7e478cca020fabe42047cdef83087067b48b2af71e2599f38212894dd5ad42ab3aa27c341ce72bddffab399e25ca3feb0295664467b59ca70bd

data/README.md

@@ -68,7 +68,22 @@ https://example.com
 
 クリックするとページを操作でき、マウスが外に出るとスライドのキー操作に戻ります。
 
-ターミナルとページを横に並べるには `<!-- _class: columns -->` を使います。
+画面を左右に分けるには `<!-- _class: columns -->` を使います。本文の最後の要素が右の列に、それ以外が左の列に入ります。
+
+````markdown
+## タイトル
+
+<!-- _class: columns -->
+
+説明の文章
+
+- 箇条書き
+
+```terminal
+```
+````
+
+ターミナルと Web を 1 つずつ書けば左右に並びます。上下に分けるには `height=50%` を指定します。
 
 ## Marp 互換の記法
 
@@ -90,12 +105,13 @@ style: |
 <!-- _backgroundColor: black --> このスライドだけに適用(先頭に _)
 ```
 
-使えるディレクティブは `paginate` `header` `footer` `class` `color` `backgroundColor` `backgroundImage` `backgroundPosition` `backgroundRepeat` `backgroundSize` です。クラスには `lead`(中央寄せ)、`left`(左寄せ)、`invert`(配色反転)、`columns`(2 列)があります。
+使えるディレクティブは `paginate` `header` `footer` `class` `color` `backgroundColor` `backgroundImage` `backgroundPosition` `backgroundRepeat` `backgroundSize` です。クラスには `lead`(中央寄せ)、`left`(左寄せ)、`right`(本文だけ右寄せ)、`invert`(配色反転)、`columns`(2 列)があります。
 
 **画像**
 
 ```markdown
 ![w:300 h:200](a.png)            サイズ指定
+![fit](a.png)                    本文の残りの領域に画像全体を収める
 ![blur:5px grayscale](a.png)     フィルタ
 ![bg](a.png)                     背景(複数並べると分割)
 ![bg contain](a.png)             cover / contain / fit / auto / 50%

data/lib/mp/deck.rb

@@ -188,8 +188,11 @@ module Mp
       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(";")
+        "#{key}:#{value}#{"px" if value.match?(/\A[\d.]+\z/)}" if value&.match?(CSS_LENGTH)
+      }
+      # 高さを固定するときだけ伸縮を止める。幅だけなら高さは残りの領域を使う
+      style << "flex:none" if style.any? { _1.start_with?("height") }
+      style = style.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

data/lib/mp/slide_renderer.rb

@@ -44,6 +44,7 @@ module Mp
       @source_lines = source.split("\n", -1)
       transform(document.root)
       @title_only = title_only?(document.root)
+      arrange_columns(document.root) if directive_classes.include?("columns")
       html = scope_styles(restore_tokens(document.to_html))
       html = html.sub(/<h([12])>/, '<h\1 class="fit">') if @chunk.fit
 
@@ -57,17 +58,33 @@ module Mp
       element.children.each { transform(_1) }
       element.children.reject! { |child| background_only?(child) }
       mark_fragments(element) if element.type == :ul
-      element.children.each { convert_image(_1) if _1.type == :img }
+      element.children.each { convert_image(_1, element) if _1.type == :img }
     end
 
     # 背景画像はここまでに取り除かれ、ノートは kramdown に渡していない
     def title_only?(root)
       return false if @chunk.kind == :continuation
 
-      content = root.children.reject { _1.type == :blank || (_1.type == :html_element && _1.value == "style") }
+      content = root.children.reject { _1.type == :blank || style_element?(_1) }
       content.length == 1 && content.first.type == :header
     end
 
+    def style_element?(element)
+      element.type == :html_element && element.value == "style"
+    end
+
+    # 最後の要素を右の列、それ以外を左の列に積む
+    def arrange_columns(root)
+      children = root.children.reject { _1.type == :blank }
+      heading = children.first&.type == :header && children.first.options[:level] <= 2 ? [children.shift] : []
+      styles, blocks = children.partition { style_element?(_1) }
+      columns = blocks.length > 1 ? [blocks[0...-1], blocks.last(1)] : [blocks]
+      wrapped = columns.flat_map { |column| [column_tag(%(<div class="column">)), *column, column_tag("</div>")] }
+      root.children.replace(heading + styles + wrapped)
+    end
+
+    def column_tag(html) = Kramdown::Element.new(:raw, html, nil, category: :block)
+
     def background_only?(element)
       return false unless element.type == :p
 
@@ -106,7 +123,7 @@ module Mp
       end
     end
 
-    def convert_image(image)
+    def convert_image(image, parent)
       return if keywords(image).include?("bg") # 親の段落を処理するときに背景へ移す
 
       styles = []
@@ -115,6 +132,7 @@ module Mp
         case name
         when "w", "width" then styles << "width:#{css_length(value)}"
         when "h", "height" then styles << "height:#{css_length(value)}"
+        when "fit" then parent.attr["class"] = "image-fit" # 段落ごと本文の残りの領域を使う
         when *FILTERS then (@image_filters ||= []) << "#{name}(#{value || FILTER_DEFAULTS[name]})"
         else next false
         end
@@ -145,7 +163,11 @@ module Mp
     def classes
       kind = { cover: "cover", continuation: "continuation" }[@chunk.kind]
       title_only = "title-only" if @title_only
-      ["slide", kind, *Array(@directives["class"]).flat_map { _1.to_s.split }, title_only].compact.join(" ")
+      ["slide", kind, *directive_classes, title_only].compact.join(" ")
+    end
+
+    def directive_classes
+      Array(@directives["class"]).flat_map { _1.to_s.split }
     end
 
     def style

data/lib/mp/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Mp
-  VERSION = "0.1.1"
+  VERSION = "0.1.2"
 end

data/public/style.css

@@ -27,6 +27,14 @@ section.slide.title-only > :is(h1, h2) { margin: 0; padding: 0; border: 0; }
 /* 左寄せ: <!-- _class: left --> */
 section.slide.left { align-items: stretch; text-align: left; }
 
+/* 本文の右寄せ: <!-- _class: right -->。見出し、コード、埋め込みは動かさない */
+:is(section.slide.right, section.slide.right > .column) > :not(h1, h2, .bg-layer, header, footer, .page-number, style, pre, .embed, .highlighter-rouge, .column) {
+  align-self: stretch;
+  text-align: right;
+}
+:is(section.slide.right, section.slide.right > .column) > :is(ul, ol) { padding-left: 0; list-style-position: inside; }
+:is(section.slide.right, section.slide.right > .column) > blockquote { padding: 0 .7em 0 0; border-left: 0; border-right: 6px solid var(--accent, currentColor); }
+
 /* 中央寄せでも横幅いっぱいを基準に拡大する */
 section.slide > .fit { align-self: stretch; }
 
@@ -38,6 +46,22 @@ section.slide.columns {
   gap: 0 24px;
 }
 section.slide.columns > h2 { grid-column: 1 / -1; }
+section.slide.columns > .column { grid-row: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+
+/* ![fit](a.png): 本文の残りの領域に画像全体を収める */
+:is(section.slide, .column) > p.image-fit {
+  display: flex;
+  flex: 1;
+  align-self: stretch;
+  justify-content: center;
+  gap: 16px;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+}
+:is(section.slide, .column) > p.image-fit > img { flex: 1; min-width: 0; width: 100%; height: 100%; object-fit: contain; }
+:is(section.slide, .column) > p.image-fit > br { display: none; }
+:is(section.slide, .column) > p.image-fit:has(+ :not(footer, .page-number)) { margin-bottom: .4em; }
 
 .fragment { visibility: hidden; }
 .fragment.shown { visibility: inherit; }
@@ -62,6 +86,7 @@ section.slide > .page-number { bottom: 20px; left: auto; right: 32px; }
 .embed {
   position: relative;
   flex: 1;
+  align-self: stretch;
   min-height: 0;
   min-width: 0;
   margin: 12px 0 24px;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mp
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - takkanm
@@ -224,7 +224,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.24
+rubygems_version: 4.0.20
 specification_version: 4
 summary: Markdown を全画面プレゼンテーションにするツール(ターミナル / Web 埋め込み対応)
 test_files: []