Add "more download"

Interface the release api from Github

src/common/consts.ts

@@ -4,6 +4,8 @@ const urls = {
     "https://github.com/Rem0o/FanControl.Releases/blob/master/FanControl.zip?raw=true",
   versionJsonUrl:
     "https://raw.githubusercontent.com/Rem0o/FanControl.Releases/master/version.json",
+  latestVersionGithubApiUrl:
+    "https://api.github.com/repos/rem0o/fancontrol.releases/releases/latest",
   lhmGithubPageUrl:
     "https://github.com/LibreHardwareMonitor/LibreHardwareMonitor",
   pluginWikiUrl: "https://github.com/Rem0o/FanControl.Releases/wiki/Plugins",

src/reactComponents/Spacer.tsx

@@ -0,0 +1,3 @@
+export function Spacer() {
+    return <div className="mb-5 mt-5"></div>;
+}

src/reactComponents/donationModal.tsx

@@ -1,44 +1,35 @@
+import type { JsxElement } from "typescript";
 import consts from "../common/consts";
 import icons from "../common/icons";
 import { FooterButton } from "./footerButton";
 import { BigIcon, Icon } from "./icon";
 import { SpinningLogo } from "./spinningLogo";
+import { Modal } from "./modal";
 
-export const DonationModal = (exitModal: Function) => (
-  <>
-    <div className="fixed left-1/2 top-1/2 z-50 m-auto -translate-x-1/2 -translate-y-1/2 rounded bg-slate-50 p-5 shadow-xl">
-      <div className="flex flex-col items-center self-center">
-        <div className="flex w-full flex-row">
-          <SpinningLogo className="m-auto h-8 w-8" spinInitially={true} />
-          <button
-            className="absolute right-2 top-2 rounded-full border border-body-700 px-2 text-body-700 hover:border-primary-600 hover:text-primary-600"
-            onClick={() => exitModal()}
-          >
-            X
-          </button>
-        </div>
+export const DonationModal = (exitModal: Function) => <Modal exitModal={exitModal}>{Donation(exitModal)}</Modal>;
 
-        <div className="m-2">Thanks for downloading FanControl !</div>
-
-        <div className="m-2 flex flex-row space-x-4">
-          <FooterButton
-            iconSvgPath={icons.svgPaths.heart}
-            href={consts.urls.sponsor}
-            text="Sponsor"
-          />
-          <FooterButton
-            iconSvgPath={icons.svgPaths.paypal}
-            href={consts.urls.donationUrl}
-            viewBox="0 0 16 16"
-            text="PayPal"
-          />
-        </div>
+function Donation(exitModal: Function) {
+  return (
+    <>
+      <div className="flex w-full flex-row">
+        <SpinningLogo className="m-auto h-8 w-8" spinInitially={true} />
       </div>
-    </div>
 
-    <div
-      onClick={() => exitModal()}
-      className="fixed left-0 top-0 z-40 block h-full w-full bg-black opacity-50 "
-    ></div>
-  </>
-);
+      <div className="m-2">Thanks for downloading FanControl !</div>
+
+      <div className="m-2 flex flex-row space-x-4">
+        <FooterButton
+          iconSvgPath={icons.svgPaths.heart}
+          href={consts.urls.sponsor}
+          text="Sponsor"
+        />
+        <FooterButton
+          iconSvgPath={icons.svgPaths.paypal}
+          href={consts.urls.donationUrl}
+          viewBox="0 0 16 16"
+          text="PayPal"
+        />
+      </div>
+    </>
+  );
+}

src/reactComponents/downloadModal.tsx

@@ -0,0 +1,41 @@
+import consts from "../common/consts";
+import { Spacer } from "./Spacer";
+import { TrackedAnchor, TrackedExternalLink } from "./links";
+import { Modal } from "./modal";
+import { getDownloadUrl } from "./services/versionService";
+
+type downloadProps = {
+  version: number;
+  exitModal: Function;
+  onDownload: Function;
+};
+
+function Download(props: downloadProps) {
+  const fanControlStr: string = `Fan Control V${props.version}`;
+
+  const portableDownloadNet8 = getDownloadUrl("net_8_0");
+
+  return (
+    <div className="text-left">
+      <div className="text-xl font-medium">Portable</div>
+      <TrackedExternalLink
+        href={consts.urls.directDownloadUrl}
+        onClick={() => props.onDownload()}
+      >
+        {fanControlStr} .NET Framework 4.8
+      </TrackedExternalLink>
+      <br />
+      <TrackedExternalLink
+        href={portableDownloadNet8}
+        onClick={() => props.onDownload()}
+      >
+        {fanControlStr} .NET 8
+      </TrackedExternalLink>
+      <br />
+    </div>
+  );
+}
+
+export const DownloadModal = (props: downloadProps) => (
+  <Modal exitModal={props.exitModal}>{Download(props)}</Modal>
+);

src/reactComponents/modal.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+export const Modal = ({
+  children: children,
+  exitModal
+}: {
+  children: ReactNode;
+  exitModal: Function;
+}) => (
+  <>
+    <div className="fixed left-1/2 top-1/2 z-50 m-auto -translate-x-1/2 -translate-y-1/2 rounded bg-slate-50 p-5 shadow-xl">
+      {XButton(exitModal)}
+      <div className="flex flex-col items-center self-center">{children}</div>
+    </div>
+
+    <div
+      onClick={() => exitModal()}
+      className="fixed left-0 top-0 z-40 block h-full w-full bg-black opacity-50 "
+    ></div>
+  </>
+);
+function XButton(exitModal: Function) {
+  return <button
+    className="absolute right-2 top-2 rounded-full border border-body-700 px-2 text-body-700 hover:border-primary-600 hover:text-primary-600"
+    onClick={() => exitModal()}
+  >
+    X
+  </button>;
+}
+

src/reactComponents/pageHeader.tsx

@@ -1,3 +1,3 @@
-export function PageHeader({ text }: { text: string }): JSX.Element {
+export function PageHeader({ children: text }: { children: string }): JSX.Element {
   return <h1 className="mt-5 text-5xl font-light">{text}</h1>;
 }

src/reactComponents/services/versionService.tsx

@@ -0,0 +1,55 @@
+import consts from "../../common/consts";
+
+type VersionInfoJson = {
+  Number: number;
+  Message: string;
+};
+
+type VersionInfo = {
+  Number: number;
+  Message: string[];
+};
+
+async function getVersion() {
+  var req = await fetch(consts.urls.versionJsonUrl);
+  var json = (await req.json()) as VersionInfoJson;
+  var versionInfo: VersionInfo = {
+    Number: json.Number,
+    Message: (json.Message as String).split("\r\n").map((x) => x.trim())
+  };
+
+  return versionInfo;
+}
+
+type Asset = {
+  name: string;
+  download_count: number;
+  browser_download_url: string;
+};
+
+type LatestRelease = {
+  assets: Asset[];
+  name: string;
+  tag_name: string;
+};
+
+async function getLatestRelease() {
+  const req = await fetch(consts.urls.latestVersionGithubApiUrl);
+  const json = (await req.json()) as LatestRelease;
+  return json;
+}
+
+const latestRelease = await getLatestRelease();
+
+export function getDownloadUrl(searchStr: string) {
+  const asset = latestRelease.assets.find((a) =>
+    a.name.toLowerCase().includes(searchStr.toLowerCase())
+  );
+  if (asset) {
+    return asset.browser_download_url;
+  }
+
+  return "";
+}
+
+export const versionInfo = await getVersion();

src/reactPages/about.tsx

@@ -9,7 +9,7 @@ export const AboutPage = () => {
   return (
     <>
       <div className="ml-5">
-        <PageHeader text="About" />
+        <PageHeader children="About" />
       </div>
 
       <div className="flex flex-wrap gap-4 p-5">

src/reactPages/docs.tsx

@@ -202,7 +202,7 @@ export const DocsPage = () => {
       {/* Main section with actual documentation */}
       <div className="docs ml-5">
         <div className="max-w-3xl space-y-16">
-          <PageHeader text="Documentation" />
+          <PageHeader children="Documentation" />
           <DocHeader text="Fan Curves" refs={refs} />
           {fanCurveSections.map((s) => DocSectionComponent(s, refs))}
 

src/reactPages/index.tsx

@@ -26,6 +26,9 @@ import { SpinningLogo } from "../reactComponents/spinningLogo";
 import { ArticleReference } from "../reactComponents/articles/articlesReference";
 import { articles } from "../reactComponents/articles/articles";
 import { DonationModal } from "../reactComponents/donationModal";
+import { DownloadModal } from "../reactComponents/downloadModal";
+
+import {versionInfo} from "../reactComponents/services/versionService"
 
 type VersionInfo = {
   Number: number;
@@ -53,18 +56,7 @@ const IconButton = ({
   </button>
 );
 
-const DownloadButton = ({ onClick }: { onClick?: Function }) => {
-  const [version, setVersion] = useState<number>(0);
-  const [messages, setMessages] = useState<string[]>();
-
-  useEffect(() => {
-    fetch(consts.urls.versionJsonUrl)
-      .then((r) => r.json() as Promise<VersionInfo>)
-      .then((v) => {
-        setVersion(v.Number);
-        setMessages(v.Message.split("\r\n").map((x) => x.trim()));
-      });
-  }, []);
+const DownloadButton = ({ version, onClick }: { version: number, onClick?: Function }) => {
 
   let text = "Download";
   if (version > 0) {
@@ -157,8 +149,9 @@ const DemoMixFanCurveCard = ({ refreshId: refresh }: { refreshId: number }) => {
 export const IndexPage = () => {
   const [animationRefreshId, animateDemoCard] = useRefreshState();
   const demoRef = useRef<HTMLDivElement | null>(null);
-  const [showModal, setShowModal] = useState(false);
-
+  const [showDonationModal, setShowDonationModal] = useState(false);
+  const [showDownloadModal, setShowDownloadModal] = useState(false);
+
   const tryItOut = (click: boolean) => {
     if (click && demoRef.current) {
       demoRef.current.scrollIntoView({
@@ -183,9 +176,12 @@ export const IndexPage = () => {
         <p>Low on resources, high on power.</p>
       </div>
 
-      <div className="flex flex-wrap gap-6 justify-center">
-        <GithubButton />
-        <DownloadButton onClick={() => setShowModal(true)} />
+      <div>
+        <div className="flex flex-wrap justify-center gap-6">
+          <GithubButton />
+          <DownloadButton version={versionInfo.Number} onClick={() => setShowDonationModal(true)} />
+        </div>
+        <button onClick={() => setShowDownloadModal(true)} className="hover:underline mt-6">More download options</button>
       </div>
 
       <Card className="m-5 p-0 shadow-xl shadow-body-600">
@@ -339,7 +335,11 @@ export const IndexPage = () => {
         </div>
       </section>
 
-      {showModal ? DonationModal(() => setShowModal(false)) : <></>}
+      {showDonationModal ? DonationModal(() => setShowDonationModal(false)) : <></>}
+      {showDownloadModal ? DownloadModal({version: versionInfo.Number, exitModal: () => setShowDownloadModal(false), onDownload: () => {
+        setShowDownloadModal(false);
+        setShowDonationModal(true);
+      }}) : <></>}
     </div>
   );
 };