@hypersocial/decks-cli 0.4.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/skills/hyperdecks/SKILL.md +35 -4
- package/skills/hyperdecks/chat.md +55 -11
- package/src/brand.mjs +171 -0
- package/src/brandCli.mjs +127 -0
- package/src/checkRules.mjs +35 -3
- package/src/commands.mjs +52 -6
- package/src/files.mjs +3 -0
- package/src/firstDeck.mjs +107 -0
- package/src/guide.mjs +3 -1
- package/src/hosted.mjs +15 -6
- package/src/icons.mjs +66 -0
- package/src/init.mjs +4 -101
- package/src/narrate.mjs +8 -1
- package/src/ops.mjs +115 -0
- package/src/presenter.mjs +9 -0
- package/src/release.mjs +3 -1
- package/src/runtime.mjs +17 -2
- package/src/scaffold.mjs +15 -7
- package/templates/icons/LICENSE +43 -0
- package/templates/icons/lucide.json +1 -0
- package/templates/layouts/_deck.html +1 -1
- package/templates/layouts/chart.html +1 -1
- package/templates/layouts/features.html +8 -8
- package/templates/layouts/hero.html +6 -8
- package/templates/layouts/product.html +1 -1
- package/templates/narrated-deck.html +1 -1
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
.slide.on-accent { background: var(--accent); --hd-speech: var(--card); }
|
|
64
64
|
.slide.on-ink { background: var(--ink); color: var(--paper); --hd-speech: #d9ccff; }
|
|
65
65
|
.kicker { font: var(--t-label) var(--mono); letter-spacing: .16em; text-transform: uppercase; }
|
|
66
|
-
.tt { font-weight: 700; font-size: var(--t-title); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
|
|
66
|
+
.tt { font-family: var(--display, var(--font)); font-weight: 700; font-size: var(--t-title); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
|
|
67
67
|
.lead { font-size: var(--t-lead); line-height: 1.3; max-width: 28em; text-wrap: pretty; }
|
|
68
68
|
.muted { opacity: .65; }
|
|
69
69
|
/* The presenter glides to each slide's slot: bottom-right by default,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
layout: chart
|
|
3
3
|
summary: A chart of real numbers with its takeaway in one line; the presenter beside it.
|
|
4
|
-
use: a trend or a comparison in numbers.
|
|
4
|
+
use: a trend or a comparison in numbers. Its svg is a placeholder of made-up numbers check fails on: draw the real data with `hyperdecks chart` (render_chart; never a generated picture of a chart) as <img class="chart"> and name the data's source.
|
|
5
5
|
slot: bottom-right
|
|
6
6
|
presenter: stage
|
|
7
7
|
cues: [look: #__ID__-chart] when the narration turns to it; [reveal: #__ID__-takeaway] at the point.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
layout: features
|
|
3
3
|
summary: Three features side by side, an icon, a name and one line each; the presenter flies under each card.
|
|
4
|
-
use: what it does, the three reasons, the three parts.
|
|
4
|
+
use: what it does, the three reasons, the three parts. Swap each icon for a real one: `hyperdecks icons search <word>` (search_icons) gives inline SVG in currentColor.
|
|
5
5
|
slot: bottom-right
|
|
6
6
|
presenter: stage
|
|
7
7
|
cues: [go: #__ID__-f1], [go: #__ID__-f2], [go: #__ID__-f3] at the word that starts each, then [go: slot].
|
|
@@ -10,15 +10,15 @@ script: It does three things. First, [go: #__ID__-f1] it writes. Then [go: #__ID
|
|
|
10
10
|
<style>
|
|
11
11
|
.l-features .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
|
|
12
12
|
.l-features .card { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 28px 30px; border-radius: 28px; background: var(--card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
|
|
13
|
-
/*
|
|
14
|
-
|
|
15
|
-
.l-features .icon
|
|
13
|
+
/* Lucide icons (hyperdecks icons search <word>, search_icons), stroked in
|
|
14
|
+
currentColor on an accent tile; an <img class="icon"> of a generated icon works too. */
|
|
15
|
+
.l-features .icon { box-sizing: border-box; width: 64px; height: 64px; padding: 14px; border-radius: 18px; background: var(--accent); color: var(--ink); object-fit: contain; }
|
|
16
16
|
.l-features b { font-size: 32px; letter-spacing: -.02em; line-height: 1.05; }
|
|
17
17
|
.l-features p { font-size: 20px; line-height: 1.3; opacity: .7; }
|
|
18
18
|
@media (max-width: 650px) {
|
|
19
19
|
.l-features .cards { grid-template-columns: 1fr; gap: 8px; margin-top: 4px; }
|
|
20
20
|
.l-features .card { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 2px; padding: 12px 14px; border-radius: 16px; }
|
|
21
|
-
.l-features .icon { width: 40px; height: 40px; grid-row: span 2; }
|
|
21
|
+
.l-features .icon { width: 40px; height: 40px; padding: 8px; border-radius: 12px; grid-row: span 2; }
|
|
22
22
|
.l-features b { font-size: 18px; }
|
|
23
23
|
.l-features p { font-size: 13px; }
|
|
24
24
|
}
|
|
@@ -27,9 +27,9 @@ script: It does three things. First, [go: #__ID__-f1] it writes. Then [go: #__ID
|
|
|
27
27
|
<div class="kicker">What it does</div>
|
|
28
28
|
<h2 class="tt" data-title-mobile="Three things.">It does three things.</h2>
|
|
29
29
|
<ul class="cards">
|
|
30
|
-
<li class="card" id="__ID__-f1"><svg class="icon" viewBox="0 0
|
|
31
|
-
<li class="card" id="__ID__-f2"><svg class="icon" viewBox="0 0
|
|
32
|
-
<li class="card" id="__ID__-f3"><svg class="icon" viewBox="0 0
|
|
30
|
+
<li class="card" id="__ID__-f1"><svg class="icon lucide-pen-line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 21h8"/><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg><b>It writes</b><p>One line on the first feature.</p></li>
|
|
31
|
+
<li class="card" id="__ID__-f2"><svg class="icon lucide-mic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19v3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><rect x="9" y="2" width="6" height="13" rx="3"/></svg><b>It speaks</b><p>One line on the second feature.</p></li>
|
|
32
|
+
<li class="card" id="__ID__-f3"><svg class="icon lucide-send" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg><b>It sends</b><p>One line on the third feature.</p></li>
|
|
33
33
|
</ul>
|
|
34
34
|
<div class="narration-slot"></div>
|
|
35
35
|
</section>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
layout: hero
|
|
3
3
|
summary: The opening. One display-size line, a visual on the right, the presenter's hello.
|
|
4
|
-
use: the first slide; a section opener.
|
|
4
|
+
use: the first slide; a section opener. Its .art is a placeholder check fails on: put in a picture of the real subject (gen-image / generate_image) as <img class="art">, or delete the div and let the presenter be the visual.
|
|
5
5
|
slot: bottom-right
|
|
6
6
|
presenter: stage
|
|
7
7
|
cues: [wave] at the hello, [look: h1] when the narration says the title.
|
|
@@ -11,17 +11,15 @@ script: Hi, [wave] this is __TITLE__. [look: h1] One idea, in a few minutes.
|
|
|
11
11
|
.l-hero { overflow: hidden; }
|
|
12
12
|
.l-hero .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: 980px; position: relative; z-index: 1; }
|
|
13
13
|
.l-hero .tt { font-size: var(--t-display); line-height: .9; }
|
|
14
|
-
/* Swap the div for an <img class="art"> of your file (gen-image, wide). */
|
|
14
|
+
/* Swap the div for an <img class="art"> of your file (gen-image, wide), or delete it for no art. */
|
|
15
15
|
.l-hero .art { position: absolute; top: 0; right: 0; width: 820px; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent, #000 32%); mask-image: linear-gradient(to right, transparent, #000 32%); }
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
radial-gradient(circle at 34% 78%, var(--accent-2) 0 92px, transparent 93px),
|
|
20
|
-
repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 2px, transparent 2px 22px); }
|
|
16
|
+
/* Until then a labelled, hatched stand-in, so it reads as a slot to fill; check fails while it is here. */
|
|
17
|
+
.l-hero div.art { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 2px, transparent 2px 22px); }
|
|
18
|
+
.l-hero div.art::after { content: "Art goes here"; position: absolute; left: 64%; top: 40%; transform: translate(-50%, -50%); padding: 14px 26px; border: 3px dashed var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); font: 700 24px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
|
|
21
19
|
@media (max-width: 650px) {
|
|
22
20
|
.l-hero .content { justify-content: flex-start; gap: 16px; padding-top: 200px; }
|
|
23
21
|
.l-hero .art { width: 100%; height: 230px; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
|
|
24
|
-
.l-hero div.art {
|
|
22
|
+
.l-hero div.art::after { left: 50%; top: 45%; padding: 8px 14px; border-width: 2px; font-size: 13px; }
|
|
25
23
|
}
|
|
26
24
|
</style>
|
|
27
25
|
<section class="slide on-accent l-hero" id="__ID__" data-chapter="Hello" data-note="Title slide: no facts.">
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
layout: product
|
|
3
3
|
summary: A product screenshot in a browser frame (or .frame.phone for a phone shot), the point in the column beside it.
|
|
4
|
-
use: a demo moment.
|
|
4
|
+
use: a demo moment. Its .shot is a placeholder check fails on: put in `hyperdecks screenshot <url>` (capture_url) output as <img class="shot">; a callout chip names what to look at.
|
|
5
5
|
slot: bottom-right
|
|
6
6
|
presenter: stage
|
|
7
7
|
cues: [look: #__ID__-frame] when the narration turns to the product; [reveal: #__ID__-callout] for the detail.
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
.slide { display: flex; flex-direction: column; gap: 28px; padding: 64px 72px 56px; background: var(--paper); }
|
|
55
55
|
.slide.accent { background: var(--accent); }
|
|
56
56
|
.kicker { font: 18px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
|
|
57
|
-
.tt { font-size: 104px; line-height: .95; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
|
|
57
|
+
.tt { font-family: var(--display, var(--font)); font-size: 104px; line-height: .95; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
|
|
58
58
|
.lead { font-size: 32px; line-height: 1.3; max-width: 30em; margin: 0; }
|
|
59
59
|
.content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-right: 500px; }
|
|
60
60
|
/* The presenter glides to each slide's slot; slots alternate sides so the
|