Skip to content

Commit 42660ba

Browse files
estruyfestruyf
authored
Merge pull request #73 from estruyf/poc/pdf
v0.0.86
2 parents 207ed1b + 3ed5dac commit 42660ba

30 files changed

+2433
-104
lines changed

‎.vscodeignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@ postcss.config.js
1616
tailwind.config.js
1717
webview.config.js
1818
.demo
19-
.github
19+
.github
20+
scripts

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# Change Log
22

3+
## [0.0.86] - 2025-03-20
4+
5+
- Optimized package size
6+
- [#63](https://github.com/estruyf/vscode-demo-time/issues/63): Added completion and hover panel support for the frontmatter of the markdown slides
7+
- [#69](https://github.com/estruyf/vscode-demo-time/issues/69): Added the functionality to export the slides to a PDF file
8+
- [#72](https://github.com/estruyf/vscode-demo-time/issues/72): Moved the custom theme property from the demo JSON to the slide's frontmatter
9+
310
## [0.0.85] - 2025-03-18
411

512
- [#58](https://github.com/estruyf/vscode-demo-time/issues/58): Support theme changes in Shiki codeblocks on slides

‎assets/styles/export.css‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
@media print {
2+
@page {
3+
size: 960px 540px landscape;
4+
margin: 0;
5+
}
6+
body {
7+
margin: 0;
8+
padding: 0;
9+
}
10+
.slide {
11+
page-break-after: always;
12+
page-break-inside: avoid;
13+
overflow: hidden;
14+
}
15+
}
16+
17+
body {
18+
margin: 0;
19+
padding: 0;
20+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
21+
}
22+
23+
.slide {
24+
background-color: var(--vscode-editor-background, #fff);
25+
border: 1px solid var(--vscode-panel-border, #e0e0e0);
26+
color: var(--vscode-editor-foreground, #333);
27+
height: 540px;
28+
min-height: 540px;
29+
width: 960px;
30+
display: flex;
31+
flex-direction: column;
32+
padding: 2rem;
33+
box-sizing: border-box;
34+
overflow: hidden;
35+
font-size: var(--vscode-editor-font-size, 1.1em);
36+
line-height: 1.5;
37+
font-weight: normal;
38+
39+
& > :not([hidden]) ~ :not([hidden]) {
40+
--tw-space-y-reverse: 0;
41+
margin-top: calc(1rem /* 16px */ * calc(1 - var(--tw-space-y-reverse)));
42+
margin-bottom: calc(1rem /* 16px */ * var(--tw-space-y-reverse));
43+
}
44+
}
45+
46+
.slide * {
47+
color: var(--vscode-editor-foreground, #333);
48+
}
49+
50+
h1 {
51+
font-size: 2.25rem /* 36px */;
52+
line-height: 2.5rem /* 40px */;
53+
background-color: var(--vscode-editor-background, #fff);
54+
color: var(--vscode-editor-foreground, #333);
55+
}
56+
57+
h2 {
58+
font-size: 1.875rem /* 30px */;
59+
line-height: 2.25rem /* 36px */;
60+
background-color: var(--vscode-editor-background, #fff);
61+
color: var(--vscode-editor-foreground, #333);
62+
}
63+
64+
h3 {
65+
font-size: 1.5rem /* 24px */;
66+
line-height: 2rem /* 32px */;
67+
background-color: var(--vscode-editor-background, #fff);
68+
color: var(--vscode-editor-foreground, #333);
69+
}
70+
71+
h4 {
72+
font-size: 1.25rem /* 20px */;
73+
line-height: 1.75rem /* 28px */;
74+
background-color: var(--vscode-editor-background, #fff);
75+
color: var(--vscode-editor-foreground, #333);
76+
}
77+
78+
h5 {
79+
font-size: 1.125rem /* 18px */;
80+
line-height: 1.75rem /* 28px */;
81+
background-color: var(--vscode-editor-background, #fff);
82+
color: var(--vscode-editor-foreground, #333);
83+
}
84+
85+
p {
86+
line-height: 1.625;
87+
opacity: 0.8;
88+
89+
&:has(> img),
90+
&:has(> a) {
91+
opacity: 1;
92+
}
93+
}
94+
95+
a {
96+
color: var(--vscode-textLink-foreground, #007acc);
97+
text-decoration: underline;
98+
99+
&:hover {
100+
color: var(--vscode-textLink-activeForeground, #005a9e);
101+
}
102+
}
103+
104+
ul,
105+
ol {
106+
margin-left: 1.5rem /* 24px */;
107+
108+
li {
109+
margin-bottom: 0.5rem /* 8px */;
110+
}
111+
112+
ul,
113+
ol {
114+
margin-top: 0.5rem /* 8px */;
115+
}
116+
}
117+
118+
ul {
119+
list-style-type: disc;
120+
}
121+
122+
ol {
123+
list-style-type: decimal;
124+
}
125+
126+
blockquote {
127+
background-color: var(--vscode-textBlockQuote-background, #f0f0f0);
128+
border-color: var(--vscode-textBlockQuote-border, #ddd);
129+
border-left-width: 4px;
130+
padding: 0.5rem /* 8px */;
131+
}
132+
133+
pre {
134+
background: var(--vscode-editor-background);
135+
border-radius: 4px;
136+
overflow: auto;
137+
max-width: 100%;
138+
margin: 1.5rem 0;
139+
140+
code {
141+
padding: 0 !important;
142+
white-space: pre-wrap;
143+
background: var(--vscode-editor-background);
144+
}
145+
}
146+
147+
code {
148+
font-family: var(--vscode-editor-font-size, ui-sans-serif), ui-sans-serif, system-ui, -apple-system,
149+
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
150+
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
151+
}
152+
153+
img {
154+
}
155+
156+
table {
157+
border-collapse: collapse;
158+
width: 100%;
159+
margin: 1rem 0;
160+
color: inherit;
161+
}
162+
163+
th,
164+
td {
165+
border: 1px solid #ddd;
166+
padding: 0.5rem;
167+
text-align: left;
168+
color: inherit;
169+
}
170+
171+
/* Layouts */
172+
.slide__container,
173+
.slide__layout {
174+
@apply h-full w-full;
175+
}
176+
177+
div.intro {
178+
@apply flex flex-col items-center justify-center text-center;
179+
180+
h1 {
181+
@apply text-6xl;
182+
}
183+
184+
p {
185+
@apply text-base opacity-70;
186+
}
187+
}
188+
189+
div.quote {
190+
@apply flex flex-col items-start justify-center text-center;
191+
192+
h1 {
193+
@apply text-5xl;
194+
}
195+
196+
p {
197+
@apply text-base opacity-50;
198+
}
199+
}
200+
201+
div.section {
202+
@apply flex flex-col items-center justify-center text-center;
203+
204+
h1 {
205+
@apply text-6xl;
206+
}
207+
208+
h2 {
209+
@apply text-3xl opacity-80;
210+
}
211+
212+
p {
213+
@apply text-base opacity-75;
214+
}
215+
}
216+
217+
div.image {
218+
@apply w-full h-full bg-cover bg-center bg-no-repeat;
219+
}
220+
221+
div.image-left {
222+
@apply grid grid-cols-2 auto-rows-fr gap-4;
223+
224+
.slide__image_left {
225+
@apply w-full h-full bg-cover bg-center;
226+
}
227+
}
228+
229+
div.image-right {
230+
@apply grid grid-cols-2 auto-rows-fr gap-4;
231+
232+
.slide__image_right {
233+
@apply w-full h-full bg-cover bg-center;
234+
}
235+
}
236+
237+
div.two-columns {
238+
.slide__content {
239+
@apply grid grid-cols-2 gap-4;
240+
}
241+
242+
.slide__left,
243+
.slide__right {
244+
@apply w-full space-y-4 !mt-0;
245+
}
246+
}

‎assets/styles/print.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
@media print {
2+
@page {
3+
size: 960px 540px landscape;
4+
margin: 0;
5+
}
6+
7+
.slide {
8+
page-break-after: always;
9+
page-break-inside: avoid;
10+
overflow: hidden;
11+
}
12+
}
13+
14+
html,
15+
body {
16+
margin: 0;
17+
padding: 0;
18+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
19+
}
20+
21+
.slide {
22+
background-color: var(--vscode-editor-background, #fff);
23+
border: 1px solid var(--vscode-panel-border, #e0e0e0);
24+
color: var(--vscode-editor-foreground, #333);
25+
height: 540px;
26+
min-height: 540px;
27+
width: 960px;
28+
display: flex;
29+
flex-direction: column;
30+
padding: 2rem;
31+
box-sizing: border-box;
32+
overflow: hidden;
33+
font-size: var(--vscode-editor-font-size, 1.1em);
34+
line-height: 1.5;
35+
font-weight: normal;
36+
}
37+
38+
code {
39+
font-family: var(--vscode-editor-font-size, ui-sans-serif), ui-sans-serif, system-ui, -apple-system,
40+
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
41+
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
42+
}
43+
44+
blockquote {
45+
p {
46+
margin-bottom: 0 !important;
47+
}
48+
}
49+
50+
code {
51+
color: var(--vscode-textPreformat-foreground);
52+
background-color: var(--vscode-textPreformat-background);
53+
padding: 1px 3px;
54+
border-radius: 4px;
55+
}
56+
57+
pre code {
58+
padding: 0 !important;
59+
white-space: pre-wrap;
60+
background: var(--vscode-editor-background);
61+
}
62+
63+
.slide__container,
64+
.slide__layout {
65+
@apply h-full w-full;
66+
}
67+
68+
.slide__content {
69+
@apply h-full w-full text-base;
70+
71+
.slide__content__inner {
72+
@apply h-full w-full;
73+
}
74+
}
75+
76+
table {
77+
border-collapse: collapse;
78+
width: 100%;
79+
margin: 1rem 0;
80+
color: inherit;
81+
}
82+
83+
th,
84+
td {
85+
border: 1px solid #ddd;
86+
padding: 0.5rem;
87+
text-align: left;
88+
color: inherit;
89+
}
90+
91+
/* Layouts */
92+
div.image {
93+
@apply w-full h-full bg-cover bg-center bg-no-repeat;
94+
}
95+
96+
.image-left,
97+
.image-right {
98+
@apply grid grid-cols-2 w-full h-full auto-rows-fr;
99+
}
100+
101+
.slide__image_left,
102+
.slide__image_right {
103+
@apply w-full h-full bg-cover bg-center;
104+
}

0 commit comments

Comments
 (0)