this repo has no description
refactor(runtime): remove components from templates
+131
-6
+69
runtime/components/presentation.ts
+69
runtime/components/presentation.ts
···
1
+
import { css, html, LitElement } from "lit";
2
+
3
+
export class Presentation extends LitElement {
4
+
observer: IntersectionObserver;
5
+
6
+
static override properties = {
7
+
uuid: { type: String },
8
+
};
9
+
10
+
static override styles = css`
11
+
:host {
12
+
display: block;
13
+
width: 100vw;
14
+
height: 100vh;
15
+
overflow-y: scroll;
16
+
scroll-behavior: smooth;
17
+
scroll-snap-type: y mandatory;
18
+
}
19
+
`;
20
+
21
+
constructor() {
22
+
super();
23
+
24
+
this.observer = new IntersectionObserver(this.updateUrl, {
25
+
root: this,
26
+
threshold: 1,
27
+
});
28
+
}
29
+
30
+
override connectedCallback() {
31
+
super.connectedCallback();
32
+
document.addEventListener("readystatechange", () => {
33
+
if (document.readyState === "complete") {
34
+
const url = new URL(document.URL);
35
+
36
+
if (url.hash) {
37
+
document.querySelector(url.hash)?.scrollIntoView({
38
+
behavior: "instant",
39
+
});
40
+
}
41
+
42
+
document.querySelectorAll("morkdeck-slide").forEach((e) =>
43
+
this.observer.observe(e)
44
+
);
45
+
}
46
+
});
47
+
}
48
+
49
+
updateUrl(entries: IntersectionObserverEntry[]) {
50
+
for (const entry of entries) {
51
+
if (entry.isIntersecting) {
52
+
const url = new URL(document.URL);
53
+
const id = entry.target.getAttribute("id");
54
+
55
+
url.hash = `#${id}`;
56
+
57
+
location.replace(url.toString());
58
+
59
+
break;
60
+
}
61
+
}
62
+
}
63
+
64
+
override render() {
65
+
return html`
66
+
<slot></slot>
67
+
`;
68
+
}
69
+
}
+40
runtime/components/slide.ts
+40
runtime/components/slide.ts
···
1
+
import { css, html, LitElement } from "lit";
2
+
3
+
export class Slide extends LitElement {
4
+
static override styles = css`
5
+
:host {
6
+
display: block;
7
+
width: 100%;
8
+
height: 100%;
9
+
scroll-snap-align: center;
10
+
position: relative;
11
+
}
12
+
13
+
:host > section {
14
+
container: slide / inline-size;
15
+
box-sizing: border-box;
16
+
position: absolute;
17
+
inset: 0;
18
+
margin: auto;
19
+
aspect-ratio: 16 / 9;
20
+
max-width: 100%;
21
+
max-height: 100%;
22
+
23
+
display: flex;
24
+
flex-direction: column;
25
+
justify-content: center;
26
+
align-items: center;
27
+
28
+
padding: 6cqmin;
29
+
background: #1f1d2e;
30
+
}
31
+
`;
32
+
33
+
override render() {
34
+
return html`
35
+
<section>
36
+
<slot></slot>
37
+
</section>
38
+
`;
39
+
}
40
+
}
+5
runtime/morkdeck.ts
+5
runtime/morkdeck.ts
+16
-3
server/dev.ts
+16
-3
server/dev.ts
···
1
+
import { join } from "@std/path/join";
1
2
import { renderPresentationHtml } from "../core/renderer.ts";
3
+
import { serveDir } from "@std/http/file-server";
2
4
3
5
export async function startDevServer(source: string) {
4
6
await Promise.all([
···
20
22
return new BroadcastChannel("live-reload");
21
23
}
22
24
25
+
const LIVE_RELOAD_ROUTE = new URLPattern({ pathname: "/live-reload" });
26
+
const STATIC_ROUTE = new URLPattern({ pathname: "/static/*" });
27
+
23
28
function makeHandler(path: string) {
24
-
const LIVE_RELOAD_ROUTE = new URLPattern({ pathname: "/live-reload" });
25
29
const channel = openChannel();
26
30
27
31
return async (req: Request) => {
28
-
const match = LIVE_RELOAD_ROUTE.exec(req.url);
32
+
const liveReloadMatch = LIVE_RELOAD_ROUTE.exec(req.url);
33
+
const staticMatch = STATIC_ROUTE.exec(req.url);
29
34
30
-
if (match) {
35
+
if (liveReloadMatch) {
31
36
const upgrade = req.headers.get("upgrade") ?? "";
32
37
if (upgrade.toLowerCase() !== "websocket") {
33
38
return new Response("no upgrade specified");
···
40
45
};
41
46
42
47
return response;
48
+
} else if (staticMatch) {
49
+
console.log(join(Deno.cwd(), "dist"));
50
+
51
+
return serveDir(req, {
52
+
enableCors: true,
53
+
fsRoot: join(Deno.cwd(), "dist"),
54
+
urlRoot: "static",
55
+
});
43
56
}
44
57
45
58
const html = await renderPresentationHtml(path, { devMode: true });
+1
-3
templates/presentation.eta
+1
-3
templates/presentation.eta