Skip to content

Commit b870e65

Browse files
Rich-HarrisRich-Harris
committed
add thumbnails to examples page
1 parent 161a69d commit b870e65

File tree

95 files changed

+712
-29
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

95 files changed

+712
-29
lines changed

‎site/package-lock.json

+598
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"chokidar": "^2.1.2",
4343
"degit": "^2.1.3",
4444
"eslint-plugin-svelte3": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
45+
"jimp": "^0.6.0",
4546
"now": "^14.0.0",
4647
"npm-run-all": "^4.1.5",
4748
"rollup": "^1.2.2",

‎site/scripts/get-example-thumbnails/index.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
const fs = require('fs');
2+
const puppeteer = require('puppeteer');
3+
const Jimp = require('jimp');
4+
const c = require('kleur');
5+
6+
const slugs = [];
7+
8+
fs.readdirSync(`content/examples`).forEach(group_dir => {
9+
fs.readdirSync(`content/examples/${group_dir}`).filter(file => file !== 'meta.json').map(example_dir => {
10+
const slug = example_dir.replace(/^\d+-/, '');
11+
slugs.push(slug);
12+
});
13+
});
14+
15+
async function main() {
16+
const browser = await puppeteer.launch({
17+
defaultViewport: {
18+
width: 1280,
19+
height: 960,
20+
deviceScaleFactor: 2
21+
}
22+
});
23+
24+
const page = await browser.newPage();
25+
26+
for (const slug of slugs) {
27+
try {
28+
const output_file = `static/examples/thumbnails/${slug}.png`;
29+
if (fs.existsSync(output_file)) {
30+
console.log(c.gray(`skipping ${slug}`));
31+
continue;
32+
}
33+
34+
console.log(slug);
35+
await page.goto(`http://localhost:3000/repl?example=${slug}`);
36+
37+
await page.waitForSelector('iframe.inited[title=Result]');
38+
await page.waitFor(1500);
39+
const iframe = await page.$('iframe.inited[title=Result]');
40+
const buffer = await iframe.screenshot();
41+
42+
const image = await Jimp.read(buffer);
43+
image.crop(3, 3, image.bitmap.width - 6, image.bitmap.height - 6);
44+
image.autocrop();
45+
46+
if (image.bitmap.width > 300 || image.bitmap.width > 200) {
47+
const scale = Math.min(
48+
300 / image.bitmap.width,
49+
200 / image.bitmap.height
50+
);
51+
52+
image.scale(scale);
53+
}
54+
55+
await image.write(output_file);
56+
} catch (err) {
57+
console.log(c.bold().red(`failed to screenshot ${slug}`));
58+
}
59+
}
60+
61+
await browser.close();
62+
}
63+
64+
main();

‎site/scripts/get-example-thumbnails/output/adding-data.png

8.32 KB

‎site/scripts/get-example-thumbnails/output/declaring-props.png

10.9 KB

‎site/scripts/get-example-thumbnails/output/default-values.png

15.7 KB

‎site/scripts/get-example-thumbnails/output/dynamic-attributes.png

69.1 KB

‎site/scripts/get-example-thumbnails/output/each-blocks.png

12.6 KB

‎site/scripts/get-example-thumbnails/output/else-blocks.png

2.14 KB

‎site/scripts/get-example-thumbnails/output/else-if-blocks.png

9.96 KB

‎site/scripts/get-example-thumbnails/output/html-tags.png

7.46 KB

‎site/scripts/get-example-thumbnails/output/if-blocks.png

2.14 KB

‎site/scripts/get-example-thumbnails/output/keyed-each-blocks.png

7.44 KB

‎site/scripts/get-example-thumbnails/output/nested-components.png

14.6 KB

‎site/scripts/get-example-thumbnails/output/reactive-assignments.png

11.5 KB

‎site/scripts/get-example-thumbnails/output/reactive-declarations.png

20.9 KB

‎site/scripts/get-example-thumbnails/output/reactive-statements.png

11.5 KB

‎site/scripts/get-example-thumbnails/output/spread-props.png

7.01 KB

‎site/scripts/get-example-thumbnails/output/styling.png

9.42 KB

‎site/scripts/get-example-thumbnails/package.json

-1
This file was deleted.

‎site/scripts/get-examples-from-tutorials/index.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,4 @@ tutorial_sections.forEach((section, i) => {
7171
sander.writeFileSync(`content/examples/${section_dir}/${chapter_dir}/${file.name}`, file.source);
7272
});
7373
});
74-
});
75-
76-
console.log(tutorial_sections);
74+
});

‎site/src/components/Repl/Output/Viewer.svelte

+4-1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
let proxy = null;
2323
2424
let ready = false;
25+
let inited = false;
2526
2627
onMount(() => {
2728
proxy = new ReplProxy(iframe, {
@@ -90,6 +91,8 @@
9091
9192
error = e;
9293
}
94+
95+
inited = true;
9396
}
9497
9598
$: if (ready) apply_bundle($bundle);
@@ -125,7 +128,7 @@
125128
</style>
126129

127130
<div class="iframe-container">
128-
<iframe title="Result" bind:this={iframe} sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals" class="{error || pending || pending_imports ? 'greyed-out' : ''}" srcdoc='
131+
<iframe title="Result" class:inited bind:this={iframe} sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals" class="{error || pending || pending_imports ? 'greyed-out' : ''}" srcdoc='
129132
<!doctype html>
130133
<html>
131134
<head>

‎site/src/routes/examples/index.svelte

+44-24
Original file line numberDiff line numberDiff line change
@@ -18,46 +18,70 @@
1818
margin: 0 auto;
1919
}
2020
21-
.grid {
22-
grid-template-columns: repeat(1, 1fr);
21+
h1 {
22+
margin: 4rem 0 4rem -0.05em;
23+
font-size: 5.4rem;
2324
}
2425
25-
@media (min-width: 480px) {
26-
.grid {
27-
grid-template-columns: repeat(2, 1fr);
28-
}
26+
h2 {
27+
margin: 0 0 1em 0;
28+
font-size: 18px;
29+
border-bottom: 1px solid #eee;
30+
text-transform: uppercase;
31+
padding: 0 0 0.5em 0;
2932
}
3033
31-
@media (min-width: 720px) {
32-
.grid {
33-
grid-template-columns: repeat(3, 1fr);
34-
}
34+
section {
35+
margin: 0 0 2em 0;
36+
}
37+
38+
.example {
39+
position: relative;
40+
display: flex;
41+
align-items: center;
42+
padding: 0 0 0 85px;
43+
min-height: 50px;
44+
font-weight: 300;
45+
}
46+
47+
.grid {
48+
grid-template-columns: repeat(1, 1fr);
49+
grid-gap: 0.5em;
3550
}
3651
37-
@media (min-width: 1080px) {
52+
@media (min-width: 720px) {
3853
.grid {
39-
grid-template-columns: repeat(4, 1fr);
54+
grid-template-columns: repeat(2, 1fr);
4055
}
4156
}
4257
4358
.thumbnail {
44-
background: #eee;
59+
position: absolute;
60+
background: white 50% 50% no-repeat;
61+
background-size: contain;
62+
width: 75px;
63+
height: 50px;
64+
left: 0;
65+
top: 0;
66+
border: 1px solid #ccc;
67+
border-radius: 2px;
68+
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
4569
}
4670
47-
.thumbnail::before {
71+
/* .thumbnail::before {
4872
content: "";
4973
width: 1px;
5074
margin-left: -1px;
5175
float: left;
5276
height: 0;
53-
padding-top: 66.666%;
77+
padding-top: 100%;
5478
}
5579
56-
.thumbnail::after { /* to clear float */
80+
.thumbnail::after {
5781
content: "";
5882
display: table;
5983
clear: both;
60-
}
84+
} */
6185
6286
img {
6387
background-color: #eee;
@@ -73,16 +97,12 @@
7397

7498
<div class="grid">
7599
{#each group.examples as example}
76-
<a href="repl?example={example.slug}">
77-
<figure>
78-
<div class="thumbnail"></div>
79-
<!-- <img alt="'{example.title}' screenshot" width="150" height="100" src=""> -->
80-
<figcaption>{example.title}</figcaption>
81-
</figure>
100+
<a class="example" href="repl?example={example.slug}">
101+
<div class="thumbnail" style="background-image: url(examples/thumbnails/{example.slug}.png)"></div>
102+
<span>{example.title}</span>
82103
</a>
83104
{/each}
84105
</div>
85-
86106
</section>
87107
{/each}
88108
</div>

‎site/static/examples/thumbnails/actions.png

883 Bytes

‎site/static/examples/thumbnails/adding-data.png

8.32 KB

‎site/static/examples/thumbnails/adding-parameters-to-actions.png

2.97 KB

‎site/static/examples/thumbnails/adding-parameters-to-transitions.png

18.4 KB

‎site/static/examples/thumbnails/animate.png

14.2 KB

‎site/static/examples/thumbnails/auto-subscriptions.png

11.1 KB

‎site/static/examples/thumbnails/await-blocks.png

13.8 KB

‎site/static/examples/thumbnails/bind-this.png

11.8 KB

‎site/static/examples/thumbnails/checkbox-inputs.png

9.71 KB

‎site/static/examples/thumbnails/class-shorthand.png

16.5 KB

‎site/static/examples/thumbnails/classes.png

4.81 KB

‎site/static/examples/thumbnails/component-bindings.png

8.12 KB

‎site/static/examples/thumbnails/component-events.png

10.4 KB

‎site/static/examples/thumbnails/context-api.png

27.2 KB

‎site/static/examples/thumbnails/custom-css-transitions.png

5.33 KB

‎site/static/examples/thumbnails/custom-js-transitions.png

2.96 KB

‎site/static/examples/thumbnails/custom-stores.png

11.1 KB

‎site/static/examples/thumbnails/debug.png

5.49 KB

‎site/static/examples/thumbnails/declaring-props.png

10.9 KB

‎site/static/examples/thumbnails/default-values.png

15.7 KB

‎site/static/examples/thumbnails/deferred-transitions.png

14.2 KB

‎site/static/examples/thumbnails/derived-stores.png

12.9 KB

‎site/static/examples/thumbnails/dimensions.png

15.7 KB

‎site/static/examples/thumbnails/dom-event-forwarding.png

15.1 KB

‎site/static/examples/thumbnails/dom-events.png

9.04 KB

‎site/static/examples/thumbnails/dynamic-attributes.png

69.1 KB

‎site/static/examples/thumbnails/each-block-bindings.png

17.9 KB

‎site/static/examples/thumbnails/each-blocks.png

12.6 KB

‎site/static/examples/thumbnails/else-blocks.png

2.14 KB

‎site/static/examples/thumbnails/else-if-blocks.png

9.96 KB

‎site/static/examples/thumbnails/event-forwarding.png

10.4 KB

‎site/static/examples/thumbnails/event-modifiers.png

3.15 KB

‎site/static/examples/thumbnails/group-inputs.png

17.6 KB

‎site/static/examples/thumbnails/html-tags.png

7.46 KB

‎site/static/examples/thumbnails/if-blocks.png

2.14 KB

‎site/static/examples/thumbnails/in-and-out.png

17.2 KB

‎site/static/examples/thumbnails/inline-handlers.png

9.04 KB

‎site/static/examples/thumbnails/keyed-each-blocks.png

7.44 KB

‎site/static/examples/thumbnails/media-elements.png

64.5 KB

‎site/static/examples/thumbnails/module-exports.png

17.2 KB

‎site/static/examples/thumbnails/multiple-select-bindings.png

15.2 KB

‎site/static/examples/thumbnails/named-slots.png

10.9 KB

‎site/static/examples/thumbnails/nested-components.png

14.6 KB

‎site/static/examples/thumbnails/numeric-inputs.png

6.47 KB

‎site/static/examples/thumbnails/ondestroy.png

8.35 KB

‎site/static/examples/thumbnails/onmount.png

18.2 KB

‎site/static/examples/thumbnails/reactive-assignments.png

11.5 KB

‎site/static/examples/thumbnails/reactive-declarations.png

20.9 KB

‎site/static/examples/thumbnails/reactive-statements.png

11.5 KB

‎site/static/examples/thumbnails/readable-stores.png

6.92 KB

‎site/static/examples/thumbnails/select-bindings.png

2.84 KB

‎site/static/examples/thumbnails/sharing-code.png

17.3 KB

‎site/static/examples/thumbnails/slot-fallbacks.png

12.6 KB

‎site/static/examples/thumbnails/slot-props.png

4.48 KB

‎site/static/examples/thumbnails/slots.png

7.8 KB

‎site/static/examples/thumbnails/spread-props.png

7.01 KB

‎site/static/examples/thumbnails/spring.png

6.15 KB

‎site/static/examples/thumbnails/styling.png

9.42 KB

‎site/static/examples/thumbnails/svelte-body.png

481 Bytes

‎site/static/examples/thumbnails/svelte-component.png

7.55 KB

‎site/static/examples/thumbnails/svelte-head.png

7.63 KB

‎site/static/examples/thumbnails/svelte-options.png

574 Bytes

‎site/static/examples/thumbnails/svelte-self.png

1.12 KB

‎site/static/examples/thumbnails/svelte-window.png

8.59 KB

‎site/static/examples/thumbnails/text-inputs.png

11 KB

‎site/static/examples/thumbnails/textarea-inputs.png

7.89 KB

‎site/static/examples/thumbnails/tick.png

5.91 KB

‎site/static/examples/thumbnails/transition-events.png

24 KB

‎site/static/examples/thumbnails/transition.png

17.4 KB

‎site/static/examples/thumbnails/tweened.png

3.1 KB

‎site/static/examples/thumbnails/update.png

2.04 KB

‎site/static/examples/thumbnails/writable-stores.png

11.1 KB

0 commit comments

Comments
 (0)