Add direction keyword for advanced background

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Direction keyword for advanced background ([#138](https://github.com/marp-team/marpit/pull/138))
+
 ### Changed
 
 - Upgrade Node and dependent packages to the latest version ([#140](https://github.com/marp-team/marpit/pull/140))

docs/image-syntax.md

@@ -129,13 +129,41 @@ The advanced backgrounds support [multiple backgrounds][multiple], [split backgr
 
 ### Multiple backgrounds
 
+<div class="example">
+
 ```markdown
-![bg](https://example.com/backgroundA.jpg)
-![bg](https://example.com/backgroundB.jpg)
-![bg](https://example.com/backgroundC.jpg)
+![bg](https://fakeimg.pl/800x600/0288d1/fff/?text=A)
+![bg](https://fakeimg.pl/800x600/02669d/fff/?text=B)
+![bg](https://fakeimg.pl/800x600/67b8e3/fff/?text=C)
+```
+
+<span class="image">
+
+[<img src="/assets/image-syntax/multiple-bg.png" alt="Multiple backgrounds" />](/assets/image-syntax/multiple-bg.png ':ignore')
+
+</span>
+</div>
+
+These images will arrange in a horizontal row.
+
+#### Direction keyword
+
+You may change alignment direction from horizontal to vertical, by using `vertical` direction keyword.
+
+<div class="example">
+
+```markdown
+![bg vertical](https://fakeimg.pl/800x600/0288d1/fff/?text=A)
+![bg](https://fakeimg.pl/800x600/02669d/fff/?text=B)
+![bg](https://fakeimg.pl/800x600/67b8e3/fff/?text=C)
 ```
 
-These images will arrange in a row.
+<span class="image">
+
+[<img src="/assets/image-syntax/multiple-bg-vertical.png" alt="Multiple backgrounds with vertical direction" />](/assets/image-syntax/multiple-bg-vertical.png ':ignore')
+
+</span>
+</div>
 
 ### Split backgrounds
 

docs/index.html

@@ -35,7 +35,7 @@
     </script>
     <script
       defer
-      src="https://cdn.jsdelivr.net/combine/npm/docsify@4.7/lib/docsify.min.js,npm/docsify-copy-code,npm/docsify-themeable@0.5,npm/[email protected]/components/prism-bash.min.js,npm/[email protected]/components/prism-markdown.min.js,npm/[email protected]/components/prism-scss.min.js,npm/[email protected]/components/prism-json.min.js"
+      src="https://cdn.jsdelivr.net/combine/npm/docsify@4.9/lib/docsify.min.js,npm/docsify-copy-code,npm/docsify-themeable@0.7,npm/[email protected]/components/prism-bash.min.js,npm/[email protected]/components/prism-markdown.min.js,npm/[email protected]/components/prism-scss.min.js,npm/[email protected]/components/prism-json.min.js"
     ></script>
   </body>
 </html>

docs/introduction.md

@@ -1,12 +1,16 @@
 [marp]: https://github.com/marp-team/marp/
 [marp-core]: https://github.com/marp-team/marp-core
 
-<p style="text-align:center;">
-  [![Marpit](./marpit.png ':size=500')](/)
-</p>
-<p style="text-align:center;">
-  **Marpit**: Markdown slide deck framework
-</p>
+<div style="text-align:center;">
+
+[![Marpit](./marpit.png ':size=500')](/)
+
+</div>
+<div style="text-align:center;">
+
+**Marpit**: Markdown slide deck framework
+
+</div>
 
 ---
 

docsify/_layout.scss

@@ -97,6 +97,39 @@ $important-color: complement($brand-primary);
     }
   }
 
+  // Slide example
+  .example {
+    display: flex;
+    align-items: center;
+
+    > * {
+      flex: 1;
+    }
+
+    > .image {
+      flex: 0 0 calc(25% + 20px);
+      padding: 0 0 0 20px;
+
+      img {
+        display: block;
+        width: 100%;
+        max-width: 240px;
+        margin: 0 auto;
+      }
+    }
+
+    @media (max-width: 47.99em) {
+      flex-direction: column;
+      align-items: stretch;
+
+      > .image {
+        flex: 0;
+        padding: 0;
+        align-self: center;
+      }
+    }
+  }
+
   @media (max-width: 30em) {
     .table-wrapper {
       overflow-x: auto;
@@ -115,12 +148,13 @@ $important-color: complement($brand-primary);
   box-shadow: 0 0 40px var(--mono-tint2);
 
   &::-webkit-scrollbar {
-    width: 3px;
+    width: 3px !important;
   }
   &::-webkit-scrollbar-thumb {
     background-color: var(--mono-tint2);
   }
 
+  /* stylelint-disable-next-line no-descending-specificity */
   > h1 img {
     max-height: 100px;
   }

src/markdown/background_image/advanced.js

@@ -31,6 +31,9 @@ function advancedBackground(md) {
           const { height, images, open, width } = t.meta.marpitBackground
           open.attrSet('data-marpit-advanced-background', 'content')
 
+          // Aligned direction
+          const direction = t.meta.marpitBackground.direction || 'horizontal'
+
           // Split backgrounds
           const splitSide = t.meta.marpitBackground.split
           if (splitSide) {
@@ -61,6 +64,7 @@ function advancedBackground(md) {
                   {
                     tag: 'div',
                     'data-marpit-advanced-background-container': true,
+                    'data-marpit-advanced-background-direction': direction,
                   },
                   (() => {
                     const imageTokens = []

src/markdown/background_image/apply.js

@@ -32,6 +32,7 @@ function backgroundImageApply(md) {
               current.svgContent.meta = {
                 ...(current.svgContent.meta || {}),
                 marpitBackground: {
+                  direction: current.direction,
                   height: current.svgContent.attrGet('height'),
                   images: current.images,
                   open: current.open,
@@ -61,6 +62,7 @@ function backgroundImageApply(md) {
             if (t.type === 'image') {
               const {
                 background,
+                backgroundDirection,
                 backgroundColor,
                 backgroundSize,
                 backgroundSplit,
@@ -100,6 +102,7 @@ function backgroundImageApply(md) {
                 }
               }
 
+              if (backgroundDirection) current.direction = backgroundDirection
               if (backgroundSplit) current.split = backgroundSplit
             }
           }

src/markdown/background_image/parse.js

@@ -47,6 +47,10 @@ function backgroundImageParse(md) {
               // Split background keyword
               if (opt === 'left' || opt === 'right')
                 marpitImage.backgroundSplit = opt
+
+              // Background aligned direction
+              if (opt === 'vertical' || opt === 'horizontal')
+                marpitImage.backgroundDirection = opt
             }
           }
         }

src/postcss/advanced_background.js

@@ -33,6 +33,10 @@ section[data-marpit-advanced-background="background"] > div[data-marpit-advanced
   width: 100%;
 }
 
+section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction="vertical"] {
+  flex-direction: column;
+}
+
 section[data-marpit-advanced-background="background"][data-marpit-advanced-background-split] > div[data-marpit-advanced-background-container] {
   width: 50%;
 }

test/markdown/background_image.js

@@ -243,6 +243,7 @@ describe('Marpit background image plugin', () => {
 
       expect(foreignObject.attr('x')).toBe('50%')
     })
+
     context(
       'when multiple keyword for split background defined in a same slide',
       () => {
@@ -259,6 +260,39 @@ describe('Marpit background image plugin', () => {
       }
     )
 
+    describe('Direction keyword', () => {
+      it('assigns data attribute of the keyword for direction as horizontal by default', () => {
+        const $ = $load(mdSVG().render('![bg](img1) ![bg](img2)'))
+        const container = $('div[data-marpit-advanced-background-container]')
+
+        expect(
+          container.attr('data-marpit-advanced-background-direction')
+        ).toBe('horizontal')
+      })
+
+      context('with vertical keyword', () => {
+        it('assigns data attribute of the keyword for direction as vertical', () => {
+          const $ = $load(mdSVG().render('![bg vertical](img1) ![bg](img2)'))
+          const container = $('div[data-marpit-advanced-background-container]')
+
+          expect(
+            container.attr('data-marpit-advanced-background-direction')
+          ).toBe('vertical')
+        })
+      })
+
+      it('uses the last defined direction when defined multiple directions', () => {
+        const $ = $load(
+          mdSVG().render('![bg vertical](img1) ![bg horizontal](img2)')
+        )
+        const container = $('div[data-marpit-advanced-background-container]')
+
+        expect(
+          container.attr('data-marpit-advanced-background-direction')
+        ).toBe('horizontal')
+      })
+    })
+
     context('when filters option of parse image plugin is enabled', () => {
       it('assigns filter style with the function of filter', () => {
         const filters = {