this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor(runtime): remove components from templates

+131 -6
+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
··· 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
··· 1 + import { Presentation } from "./components/presentation.ts"; 2 + import { Slide } from "./components/slide.ts"; 3 + 4 + customElements.define("morkdeck-presentation", Presentation); 5 + customElements.define("morkdeck-slide", Slide);
+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
··· 5 5 6 6 <%~ include("./partials/slide-styles") %> 7 7 8 - <%~ include("./partials/importmap") %> 9 - <%~ include("./components/presentation") %> 10 - <%~ include("./components/slide") %> 8 + <script src="/static/morkdeck.js"></script> 11 9 </head> 12 10 <body> 13 11 <%~ it.body %>