@@ -4,6 +4,7 @@ import { marked } from "marked";
44import { z } from " astro:schema"
55import prettyBytes from " pretty-bytes"
66import { warpReleasesSchema } from " ~/schemas"
7+ import platforms from " ~/util/warp-platforms.json"
78
89type Props = z .infer <typeof props >;
910
@@ -16,124 +17,106 @@ const props = z.object({
1617const = props .parse (Astro .props );
1718
1819const = (platform : string ) => {
19- switch (platform ) {
20- case " noble-intel"
21- return " Ubuntu Noble (Intel)"
22- case " noble-arm"
23- return " Ubuntu Noble (Arm)"
24- case " jammy-intel"
25- return " Ubuntu Jammy (Intel)"
26- case " jammy-arm"
27- return " Ubuntu Jammy (Arm)"
28- case " focal-intel"
29- return " Ubuntu Focal (Intel)"
30- case " focal-arm"
31- return " Ubuntu Focal (Arm)"
32- case " buster-intel"
33- return " Debian Buster (Intel)"
34- case " buster-arm"
35- return " Ubuntu Buster (Arm)"
36- case " bullseye-intel"
37- return " Debian Bullseye (Intel)"
38- case " bullseye-arm"
39- return " Debian Bullseye (Arm)"
40- case " bookworm-intel"
41- return " Debian Bookworm (Intel)"
42- case " bookworm-arm"
43- return " Debian Bookworm (Arm)"
44- case " centos8-intel"
45- return " Centos 8 (Intel)"
46- case " centos8-arm"
47- return " Centos 8 (Arm)"
48- case " fedora34-intel"
49- return " Fedora 34 (Intel)"
50- case " fedora34-arm"
51- return " Fedora 34 (Arm)"
52- case " fedora35-intel"
53- return " Fedora 35 (Intel)"
54- case " fedora35-arm"
55- return " Fedora 35 (Arm)"
56- default :
57- return platform ;
20+ const = platforms .find (p => p .platform === platform );
21+
22+ if (platformInfo ) {
23+ return platformInfo .display_name ;
5824 }
25+
26+ return platform ;
5927};
6028
61- release .linuxPlatforms ?.sort ((a , b ) => {
62- return getPrettyLinuxName (a ).localeCompare (getPrettyLinuxName (b ));
63- });
29+ const = Object .entries (release .linuxPlatforms ?? {}).sort (
30+ (a , b ) => {
31+ return getPrettyLinuxName (a [0 ]).localeCompare (getPrettyLinuxName (b [0 ]));
32+ },
33+ );
6434---
6535
6636<Details header ={ header } open ={ open } >
67- <p >
68- <div class =" flex gap-2"
37+ <warp-download data-version ={ release .version } data-platforms ={ JSON .stringify (sortedPlatforms )} >
38+ <p >
39+ <div class =" flex gap-2"
40+ <span >
41+ <strong >Version: </strong >
42+ { release .platformName }
43+ { release .version }
44+ </span >
45+ <span >
46+ <strong >Date: </strong >
47+ { release .releaseDate .toISOString ().split (" T" 0 ]}
48+ </span >
49+ {
50+ release .packageSize && (
51+ <span >
52+ <strong >Size: </strong >
53+ <span data-size >{ prettyBytes (release .packageSize )} </span >
54+ </span >
55+ )
56+ }
57+ </div >
58+ </p >
59+ <p >
6960 <span >
70- <strong >Version: </strong >
71- { release .platformName }
72- { release .version }
61+ {
62+ release .linuxPlatforms ? (
63+ <select >
64+ { sortedPlatforms .map (([platform ]) => (
65+ <option value = { platform } >
66+ { getPrettyLinuxName (platform )}
67+ </option >
68+ ))}
69+ </select >
70+ <a
71+ class = " inline-block"
72+ data-linux-download
73+ href = { ` https://downloads.cloudflareclient.com/v1/download/${release .linuxPlatforms [0 ]}/version/${release .version } ` }
74+ >
75+ Download
76+ </a >
77+ ) : (
78+ <a href = { release .packageURL } >Download</a >
79+ )
80+ }
7381 </span >
82+ </p >
83+ <p >
7484 <span >
75- <strong >Date: </strong >
76- { release .releaseDate .toISOString ().split (" T" 0 ]}
85+ <h4 >Release notes</h4 >
7786 </span >
78- {
79- release .packageSize && (
80- <span >
81- <strong >Size: </strong >
82- { prettyBytes (release .packageSize )}
83- </span >
84- )
85- }
86- </div >
87- </p >
88- <p >
89- <span >
90- {
91- release .linuxPlatforms ? (
92- <warp-linux-downloads data-version = { release .version } >
93- <select >
94- { release .linuxPlatforms .map ((platform ) => (
95- <option value = { platform } >{ getPrettyLinuxName (platform )} </option >
96- ))}
97- </select >
98- <a
99- class = " inline-block"
100- href = { ` https://downloads.cloudflareclient.com/v1/download/${release .linuxPlatforms [0 ]}/version/${release .version } ` }
101- >
102- Download
103- </a >
104- </warp-linux-downloads
105- ) : (
106- <a href = { release .packageURL } >Download</a >
107- )
108- }
109- </span >
110- </p >
111- <p >
112- <span >
113- <h4 >Release notes</h4 >
114- </span >
115- <Fragment set:html ={ marked .parse (release .releaseNotes )} />
116- </p >
87+ <Fragment set:html ={ marked .parse (release .releaseNotes )} />
88+ </p >
89+ </warp-download>
11790</Details >
11891
11992<script >
120- class WarpLinuxDownloads extends HTMLElement {
93+ import prettyBytes from "pretty-bytes";
94+
95+ class WarpDownload extends HTMLElement {
12196 connectedCallback() {
97+ const platforms = JSON.parse(this.dataset.platforms as string);
98+
12299 const dropdown = this.querySelector<HTMLSelectElement>("select");
123100
124101 dropdown?.addEventListener("change", () => {
125- console.log("change");
126102 const platform = dropdown?.value;
127- const download = this.querySelector<HTMLAnchorElement>("a");
128103
129- console.log(download);
104+ const download = this.querySelector<HTMLAnchorElement>("a[data-linux-download]");
105+ const size = this.querySelector<HTMLSpanElement>("span[data-size]");
106+
130107 download?.setAttribute(
131108 "href",
132109 `https://downloads.cloudflareclient.com/v1/download/${platform}/version/${this.dataset.version}`,
133110 );
111+
112+ if (size) {
113+ const platformInfo = platforms.find(([p]: [string, number]) => p === platform);
114+
115+ size.textContent = prettyBytes(Number(platformInfo?.[1] ?? 0));
116+ }
134117 });
135118 }
136119 }
137120
138- customElements.define("warp-linux-downloads ", WarpLinuxDownloads );
121+ customElements.define("warp-download ", WarpDownload );
139122</script >
0 commit comments