diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c700ad2..4259e459 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/docs/assets/image-syntax/multiple-bg-vertical.png b/docs/assets/image-syntax/multiple-bg-vertical.png new file mode 100644 index 00000000..7b063f00 Binary files /dev/null and b/docs/assets/image-syntax/multiple-bg-vertical.png differ diff --git a/docs/assets/image-syntax/multiple-bg.png b/docs/assets/image-syntax/multiple-bg.png new file mode 100644 index 00000000..1786a030 Binary files /dev/null and b/docs/assets/image-syntax/multiple-bg.png differ diff --git a/docs/image-syntax.md b/docs/image-syntax.md index c46a6f32..48465bed 100644 --- a/docs/image-syntax.md +++ b/docs/image-syntax.md @@ -129,13 +129,41 @@ The advanced backgrounds support [multiple backgrounds][multiple], [split backgr ### Multiple backgrounds +
+ ```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) +``` + + + +[Multiple backgrounds](/assets/image-syntax/multiple-bg.png ':ignore') + + +
+ +These images will arrange in a horizontal row. + +#### Direction keyword + +You may change alignment direction from horizontal to vertical, by using `vertical` direction keyword. + +
+ +```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. + + +[Multiple backgrounds with vertical direction](/assets/image-syntax/multiple-bg-vertical.png ':ignore') + + +
### Split backgrounds diff --git a/docs/index.html b/docs/index.html index f8a0d86a..be6cd24d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -35,7 +35,7 @@ diff --git a/docs/introduction.md b/docs/introduction.md index ef165052..eb2f11dc 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -1,12 +1,16 @@ [marp]: https://github.com/marp-team/marp/ [marp-core]: https://github.com/marp-team/marp-core -

- [![Marpit](./marpit.png ':size=500')](/) -

-

- **Marpit**: Markdown slide deck framework -

+
+ +[![Marpit](./marpit.png ':size=500')](/) + +
+
+ +**Marpit**: Markdown slide deck framework + +
--- diff --git a/docsify/_layout.scss b/docsify/_layout.scss index 6c27aea5..c112ca9c 100644 --- a/docsify/_layout.scss +++ b/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; } diff --git a/src/markdown/background_image/advanced.js b/src/markdown/background_image/advanced.js index 2f7cbb1f..44bac83d 100644 --- a/src/markdown/background_image/advanced.js +++ b/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 = [] diff --git a/src/markdown/background_image/apply.js b/src/markdown/background_image/apply.js index 2ac70afb..a00c5799 100644 --- a/src/markdown/background_image/apply.js +++ b/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 } } diff --git a/src/markdown/background_image/parse.js b/src/markdown/background_image/parse.js index d0123a5c..2721afa2 100644 --- a/src/markdown/background_image/parse.js +++ b/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 } } } diff --git a/src/postcss/advanced_background.js b/src/postcss/advanced_background.js index 597113d0..3246d2d3 100644 --- a/src/postcss/advanced_background.js +++ b/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%; } diff --git a/test/markdown/background_image.js b/test/markdown/background_image.js index 9618dbe4..44091ba3 100644 --- a/test/markdown/background_image.js +++ b/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 = {