40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
|
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&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);
|
||
|
|
};
|