1. Top
  2. ef.js
  3. Files
  4. website
  5. html.tsx
ef.js

Declarative DOM helper experiment

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73 
/** @jsxImportSource ./jsx */
/// <reference types="bun-types" />
/// <reference lib="dom" />
import "./happy-dom.js";

import { derived, fragment } from "./ef.js";

import { app, route, title } from "./app.js";
import { type RouteContext } from "./route.js";

import globalStyles from "./styles.css";
import componentStyles from "./components/styles.js";
import appStyles from "./app.module.css";

const DOCTYPE = "<!doctype html>";

export async function page(path: string, ctx: RouteContext): Promise<string> {
  const { title: routTitle, content, outline, head = [] } = await route(path);

  const $html = derived(
    () =>
      (
        <html lang="en-US">
          <head>
            <meta charset="utf-8" />
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1"
            />
            <title>{title(routTitle)}</title>
            <meta
              name="description"
              content="Documentation for ef.js, a JavaScript library for declarative DOM manipulation."
            />
            <link rel="stylesheet" href="/styles.css" />
            <script type="module" defer src="/client.js" />
            {/* ESBuild quirk (implicit CSS generation) */}
            <link rel="stylesheet" href="/client.css" />
            <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
            <link
              rel="icon"
              type="image/png"
              sizes="100x100"
              href="/favicon.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="32x32"
              href="/favicon-32x32.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="16x16"
              href="/favicon-16x16.png"
            />
            <script type="application/json" data-ef-head-mk />
            {fragment(head)}
          </head>
          <body>{app(content(ctx), outline?.(ctx))}</body>
        </html>
      ) as HTMLHtmlElement,
  );

  const html = DOCTYPE + $html.get().outerHTML;

  $html.dispose();

  return html;
}

export const styles = globalStyles + appStyles + componentStyles;