Skip to content

Commit

Permalink
cta
Browse files Browse the repository at this point in the history
  • Loading branch information
ksky521 committed Jan 25, 2019
1 parent aa98750 commit fbc629a
Show file tree
Hide file tree
Showing 8 changed files with 447 additions and 99 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
}

.metrics li span,
.metrics li i,
.metrics li svg {
display: block;
font-size: 6.4rem;
Expand Down
2 changes: 2 additions & 0 deletions packages/nodeppt-js/assets/scss/modules/_flexblock-specs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
}

span,
i,
svg {
display: block;
font-size: 6.4rem;
Expand All @@ -41,6 +42,7 @@
@media (min-width: 1024px) {
span,
svg,
i,
img {
float: left;
margin-right: 2.4rem;
Expand Down
2 changes: 2 additions & 0 deletions packages/nodeppt-js/assets/scss/modules/_flexblock.scss
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ Blocks Links li>a = .flexblock.blink (.blink required)
}

li h2 svg,
li h2 i,
li h3 i,
li h3 svg {
margin-top: 0;
}
Expand Down
188 changes: 165 additions & 23 deletions packages/nodeppt-parser/__tests__/demo.md
Original file line number Diff line number Diff line change
Expand Up @@ -230,13 +230,168 @@ The Daenerys has facilities such as a 24-hour front desk, an elevator with acces

:::

<slide>

::: {.content-center}
### ul.flexblock.specs

:::specs

## :fa-long-arrow-right: SIMPLE NAVIGATION
with arrow keys and swipe.

----

## :fa-link: Permalinks
Go to a specific slide. URL: #slide=number

---

## :fa-text-height: SVG ICONS
Font Awesome Kit.

:::
:::

<slide class="bg-red" image="https://source.unsplash.com/R1J6Z1cnJZc/ .dark">

:::cta

!![](https://webslides.tv/static/images/logos/netflix.svg .whitelogo)

---

## Watch TV shows anytime, anywhere

.frame.bg-red

:::

<slide class="bg-red frame">

:::cta

::^$^40::

---

## Watch TV shows anytime, anywhere

.frame.bg-red

:::

<slide class="bg-dark">

## Flexbox

:::flexbox

Founded

----


24M Subscribers


---

Founded

----


Revenue: $16M

---


Covers, cards, quotes...

----


Use multiples of 8.

---


Font Awesome Kit.

---


Bank: $32M

:::

<slide>

<slide class="bg-green">

## Metrics

:::flexbox {.border.metrics}

Founded
::1972::

----

::fa-users::

24M Subscribers


---

Founded
::64%::

----

:~fa-line-chart~:

Revenue: $16M

---

:~fa-building-o~:

Covers, cards, quotes...

----

:~fa-smile-o~:

Use multiples of 8.

---

:~fa-usd~:

Font Awesome Kit.

---

:~fa-university~:

Bank: $32M

:::

<slide>

## Features

:::features

## ::→:: SIMPLE NAVIGATION
with arrow keys and swipe.

----

## :fa-link: Permalinks

Go to a specific slide.
Expand All @@ -249,6 +404,16 @@ Go to a specific slide.

----

## ::40+:: BEAUTIFUL COMPONENTS
Covers, cards, quotes...

----

## :fa-text-height: VERTICAL RHYTHM
Use multiples of 8.

---

## ::500+:: SVG ICONS
Font Awesome Kit.

Expand Down Expand Up @@ -635,27 +800,4 @@ dfdasfs

## h2.fadeIn.slow {.fadeIn.slow}

<slide>

## flexblock

<flexblock>
# dfdafafa

dfadsfasfasf

---

# dfdafafa

dfadsfasfasf

---

# dfdafafa

dfadsfasfasf
dfdasf

</flexblock>
```
2 changes: 2 additions & 0 deletions packages/nodeppt-parser/lib/get-markdown-parser.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ mdIt.use(require('./markdown/container'), 'card', require('./markdown/containers
mdIt.use(require('./markdown/container'), 'flexbox', require('./markdown/containers/flexbox')('flexbox'));
mdIt.use(require('./markdown/container'), 'blink', require('./markdown/containers/blink'));
mdIt.use(require('./markdown/container'), 'features', require('./markdown/containers/features'));
mdIt.use(require('./markdown/container'), 'specs', require('./markdown/containers/specs'));
mdIt.use(require('./markdown/container'), 'cta', require('./markdown/containers/cta'));

mdIt.use(require('./markdown/container'), 'gallery', require('./markdown/containers/gallery'));
mdIt.use(require('./markdown/container'), 'div', require('./markdown/containers/div'));
Expand Down
106 changes: 106 additions & 0 deletions packages/nodeppt-parser/lib/markdown/containers/cta.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
const name = 'cta';
module.exports = {
validate(params) {
return params.trim().match(new RegExp('^' + name + '\\s*(.*)$'));
},
handler(state, opts) {
function getOpenToken(tag, level) {
const token = new state.Token('container_' + name + '_' + tag + '_open', tag, 1);
token.block = true;
token.level = 1 + level;
return token;
}
function getCloseToken(tag, level) {
const token = new state.Token('container_' + name + '_' + tag + '_close', tag, -1);
token.block = true;
token.level = 1 + level;
return token;
}
// tokens
const tokens = state.tokens;

let open = false;
let done = 0;
let count = 1;
let level = 1;
let imgStart = 0,
imgEnd = 0;
let ctxStart = 0,
ctxEnd = 0;

let img = [],
context = [];
for (let i = 0; i < tokens.length; i++) {
let token = tokens[i];
if (token.type === 'container_' + name + '_open') {
// 在 open 后面插入
open = true;
level = token.level + 1;
} else if (token.type === 'container_' + name + '_close') {
// 在 close 之前插入
open = false;
} else if (open && 'hr' === token.type && done === 0) {
tokens.splice(i, 1);
i--;
count++;
} else if (open) {
// 加深一层,因为外面多套了一层div
// token.level = token.level + 2;
// 保证hr 是最贴近 container 的一层
if (/_open$/.test(token.type)) {
done++;
} else if (/_close$/.test(token.type)) {
done--;
}
if (count === 1) {
if (!imgStart) {
imgStart = i;
} else {
imgEnd = i;
}
img.push(token);
} else {
if (!ctxStart) {
ctxStart = i;
} else {
ctxEnd = i;
}
token.level = token.level + 1;
context.push(token);
}
}
}
// 分组完成
const divNumber = getOpenToken('div', level - 1);
divNumber.attrPush(['class', 'number']);
tokens.splice(imgStart, imgEnd - imgStart + 1, divNumber, ...img, getCloseToken('div', level - 1));

const divToken = getOpenToken('div', level - 1);
divToken.attrPush(['class', 'benefit']);
tokens.splice(ctxStart + 2, ctxEnd - ctxStart + 3, divToken, ...context, getCloseToken('div', level - 1));
return state;
},
render(tokens, idx) {
const token = tokens[idx];
if (token.nesting === 1) {
const cmIndex = token.attrIndex('css-module');
let clsIndex = token.attrIndex('class');
let attrs = token.attrs || [];

if (clsIndex >= 0) {
attrs[clsIndex][1] += cmIndex >= 0 ? ` cta ${attrs[cmIndex][1]}` : ` cta`;
} else {
attrs.push(['class', cmIndex >= 0 ? ` cta ${attrs[cmIndex][1]}` : ` cta`]);
}

attrs = attrs.map(([key, value]) => {
return `${key}="${value}"`;
});
// opening tag
return `<div ${attrs.join(' ')}>\n`;
} else {
// closing tag
return '</div>\n';
}
}
};
Loading

0 comments on commit fbc629a

Please sign in to comment.