Initial commit

2026-04-30 12:13:22 +00:00 · 2026-04-30 12:13:22 +00:00 · ca0c91c299
commit ca0c91c299
15 changed files with 1690 additions and 0 deletions
--- a/src/template.ts
+++ b/src/template.ts
@ -0,0 +1,39 @@
+import { devices, type DeviceModel } from './devices';
+
+const BASE = `
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;350;375;400;450;600;700&amp;display=swap" rel="stylesheet">
+  <link href="https://trmnl.com/css/3.0.3/plugins.css" rel="stylesheet">
+</head>
+<body class="environment trmnl">
+  <div class="screen screen--1bit {{classes}}" data-pixel-perfect="true">{{contents}}</div>
+  <script src="https://trmnl.com/js/3.0.3/plugins.js"></script>
+</body>
+</html>`;
+
+export type RenderMode =
+  | 'full'
+  | 'half_horizontal'
+  | 'half_vertical'
+  | 'quadrant';
+export interface Renderable {
+  render(mode: RenderMode, model: DeviceModel): Promise<string>;
+}
+
+export type PluginList = [Renderable, RenderMode][];
+
+export const render = async (plugins: PluginList, model: DeviceModel) => {
+  const classes = Object.values(model.css.classes).join(' ');
+
+  let contents = '';
+  for (let [plugin, mode] of plugins) {
+    contents += await plugin.render(mode, model);
+  }
+
+  return BASE.replace('{{classes}}', classes).replace('{{contents}}', contents);
+};