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
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92

/** @jsxImportSource ../jsx */
import { NavItem, NavGroup } from "../components/nav.js";
import { type Route } from "../route.js";

import css, { cx } from "./downloads.module.css";

function toKB(bytes: number): string {
  return `${(bytes / 1_000).toFixed(2)}kB`;
}

export const downloads: Route = {
  title: "Downloads",
  content({ version, bundle }) {
    return (
      <div>
        <h1 id="downloads">Downloads</h1>
        <p>
          <a href="/ef.zip" download={`ef-${version}.zip`}>
            Download ef-{version}.zip
          </a>
        </p>
        <p>
          The JS files are ECMAScript Modules and are written in ES2019 syntax.
          The calls to DOM API is adheres to the WHATWG DOM standard at the time
          of 2023-10-01.
        </p>
        <ul class={cx.links}>
          {bundle.map((b) => {
            const modifier = [b.minified ? "m" : "", b.header ? "h" : ""].join(
              "",
            );

            const name = `ef-${version}${modifier}.js`;

            return (
              <li>
                <span class={cx.info}>
                  <span>{name}</span>
                  <span class={cx.sizes}>
                    <span class={cx.size}>
                      <span class={cx.sizeLabel}>raw</span>
                      <span>{toKB(b.size.raw)}</span>
                    </span>
                    <span class={cx.size}>
                      <span class={cx.sizeLabel}>gzip</span>
                      <span>{toKB(b.size.gzip)}</span>
                    </span>
                    <span class={cx.size}>
                      <span class={cx.sizeLabel}>brotli</span>
                      <span>{toKB(b.size.brotli)}</span>
                    </span>
                  </span>
                </span>
              </li>
            );
          })}
        </ul>
        <h2 id="filename_schema">Filename schema</h2>
        <p>The filename schema is:</p>
        <pre>
          <code>{"ef-<version><modifier>.js"}</code>
        </pre>
        <p>
          where <code>{"<version>"}</code> is a{" "}
          <code>{"major.minor.patch"}</code> semver string. A modifier{" "}
          <code>m</code> indicates the code is minified. A modifier{" "}
          <code>h</code> indicates the code has license header.
        </p>
        <h2 id="notes">Notes</h2>
        <p>
          If you use only a tiny subset of API and would like to reduce filesize
          as much as possible, consider bundling your file with a tool that
          supports Tree Shaking.
        </p>
        <p>
          The LICENSE file is unmodified text of Apache License, Version 2.0. If
          your distribution already includes the full license text for another
          Apache 2.0 licensed software, no additional work is needed.
        </p>
      </div>
    );
  },
  outline() {
    return (
      <NavGroup label="Downloads" href="#downloads">
        <NavItem href="#filename_schema">Filename schema</NavItem>
        <NavItem href="#notes">Notes</NavItem>
      </NavGroup>
    );
  },
  head: [(<style>{css}</style>) as HTMLStyleElement],
};