Skip to content

Commit 9a689c2

Browse files
MartinKavikMartinKavik
committed
examples: html + js format
1 parent 44a84a5 commit 9a689c2

File tree

23 files changed

+352
-343
lines changed

23 files changed

+352
-343
lines changed

‎examples/animation/index.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8-
/>
9-
<title>Animation example</title>
10-
</head>
11-
<body>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<title>Animation example</title>
8+
</head>
9+
10+
<body>
1211
<section id="app"></section>
1312
<script type="module">
14-
import init from '/pkg/package.js';
15-
init('/pkg/package_bg.wasm');
16-
</script>
17-
</body>
18-
</html>
13+
import init from "/pkg/package.js";
14+
init("/pkg/package_bg.wasm");
15+
</script>
16+
</body>
17+
18+
</html>

‎examples/auth/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8-
/>
9-
<title>Auth example</title>
10-
</head>
11-
<body>
12-
<section id="app"></section>
13-
<script type="module">
14-
import init from '/pkg/package.js';
15-
init('/pkg/package_bg.wasm');
16-
</script>
17-
</body>
18-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<title>Auth example</title>
8+
</head>
9+
10+
<body>
11+
<section id="app"></section>
12+
<script type="module">
13+
import init from '/pkg/package.js';
14+
init('/pkg/package_bg.wasm');
15+
</script>
16+
</body>
17+
18+
</html>

‎examples/canvas/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8-
/>
9-
<title>Canvas example</title>
10-
</head>
11-
<body>
12-
<section id="app"></section>
13-
<script type="module">
14-
import init from '/pkg/package.js';
15-
init('/pkg/package_bg.wasm');
16-
</script>
17-
</body>
18-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<title>Canvas example</title>
8+
</head>
9+
10+
<body>
11+
<section id="app"></section>
12+
<script type="module">
13+
import init from '/pkg/package.js';
14+
init('/pkg/package_bg.wasm');
15+
</script>
16+
</body>
17+
18+
</html>

‎examples/counter/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8-
/>
9-
<title>Counter example</title>
10-
</head>
11-
<body>
12-
<section id="app"></section>
13-
<script type="module">
14-
import init from '/pkg/package.js';
15-
init('/pkg/package_bg.wasm');
16-
</script>
17-
</body>
18-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<title>Counter example</title>
8+
</head>
9+
10+
<body>
11+
<section id="app"></section>
12+
<script type="module">
13+
import init from '/pkg/package.js';
14+
init('/pkg/package_bg.wasm');
15+
</script>
16+
</body>
17+
18+
</html>

‎examples/custom_elements/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,5 @@
2727
init('/pkg/package_bg.wasm');
2828
</script>
2929
</body>
30-
</html>
30+
31+
</html>

‎examples/custom_elements/public/code-block.js

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import { LitElement, html, css } from 'https://unpkg.com/lit-element/lit-element
22
import { unsafeHTML } from 'https://unpkg.com/lit-html/directives/unsafe-html.js?module';
33

44
class CodeBlockElement extends LitElement {
5-
static get properties() { return {
6-
lang: "",
7-
code: "",
8-
};}
5+
static get properties() {
6+
return {
7+
lang: "",
8+
code: "",
9+
};
10+
}
911

1012
render() {
1113
const highlightedCode = highlightCode(this.code, this.lang);
@@ -19,11 +21,11 @@ class CodeBlockElement extends LitElement {
1921
customElements.define('code-block', CodeBlockElement);
2022

2123
function highlightCode(code, lang) {
22-
// https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto-value-languagesubset
23-
const highlightedCode =
24-
window
25-
.hljs
26-
.highlightAuto(code, lang ? [lang] : undefined)
27-
.value;
28-
return highlightedCode
24+
// https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto-value-languagesubset
25+
const highlightedCode =
26+
window
27+
.hljs
28+
.highlightAuto(code, lang ? [lang] : undefined)
29+
.value;
30+
return highlightedCode
2931
}

‎examples/custom_elements/public/feather-icon.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,19 @@ import { LitElement, html, css } from 'https://unpkg.com/lit-element/lit-element
22
import { unsafeHTML } from 'https://unpkg.com/lit-html/directives/unsafe-html.js?module';
33

44
class FeatherIconElement extends LitElement {
5-
static get properties() { return {
6-
icon: { type: String },
7-
width: { type: Number },
8-
height: { type: Number },
9-
};}
5+
static get properties() {
6+
return {
7+
icon: { type: String },
8+
width: { type: Number },
9+
height: { type: Number },
10+
};
11+
}
1012

1113
constructor() {
1214
super();
1315
this.width = 24;
1416
this.height = 24;
15-
}
17+
}
1618

1719
render() {
1820
const svg = feather.icons[this.icon].toSvg({

‎examples/drop_zone/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8-
/>
9-
<title>Drop-zone example</title>
10-
</head>
11-
<body>
12-
<section id="app"></section>
13-
<script type="module">
14-
import init from '/pkg/package.js';
15-
init('/pkg/package_bg.wasm');
16-
</script>
17-
</body>
18-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<title>Drop-zone example</title>
8+
</head>
9+
10+
<body>
11+
<section id="app"></section>
12+
<script type="module">
13+
import init from '/pkg/package.js';
14+
init('/pkg/package_bg.wasm');
15+
</script>
16+
</body>
17+
18+
</html>

‎examples/el_key/index.html

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8-
/>
9-
<link rel="stylesheet" type="text/css" href="/public/el_key.css" />
10-
<title>Element key demo</title>
11-
</head>
12-
<body>
13-
<section id="app"></section>
14-
<script type="module">
15-
import init from "/pkg/package.js";
16-
init("/pkg/package_bg.wasm");
17-
</script>
18-
</body>
19-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<link rel="stylesheet" type="text/css" href="/public/el_key.css" />
8+
<title>Element key demo</title>
9+
</head>
10+
11+
<body>
12+
<section id="app"></section>
13+
<script type="module">
14+
import init from "/pkg/package.js";
15+
init("/pkg/package_bg.wasm");
16+
</script>
17+
</body>
18+
19+
</html>

‎examples/fetch/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8-
/>
9-
<title>Fetch example</title>
10-
</head>
11-
<body>
12-
<section id="app"></section>
13-
<script type="module">
14-
import init from '/pkg/package.js';
15-
init('/pkg/package_bg.wasm');
16-
</script>
17-
</body>
18-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<title>Fetch example</title>
8+
</head>
9+
10+
<body>
11+
<section id="app"></section>
12+
<script type="module">
13+
import init from '/pkg/package.js';
14+
init('/pkg/package_bg.wasm');
15+
</script>
16+
</body>
17+
18+
</html>

‎examples/graphql/index.html

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8-
/>
9-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
10-
<title>GraphQL example</title>
11-
</head>
12-
<body>
13-
<section id="app" class="section" style="max-height: 100vh;"></section>
14-
<script type="module">
15-
import init from '/pkg/package.js';
16-
init('/pkg/package_bg.wasm');
17-
</script>
18-
</body>
19-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
8+
<title>GraphQL example</title>
9+
</head>
10+
11+
<body>
12+
<section id="app" class="section" style="max-height: 100vh;"></section>
13+
<script type="module">
14+
import init from '/pkg/package.js';
15+
init('/pkg/package_bg.wasm');
16+
</script>
17+
</body>
18+
19+
</html>

0 commit comments

Comments
 (0)