download latest interpreter release

Author: marcelnoehre

src/app/app.component.html

@@ -19,11 +19,11 @@
           <h3>Getting Started</h3>
         </mat-card-title>
         <mat-card-content class="download">
-          <button mat-raised-button class="detected-os">Download <sup>{{ os }}</sup></button>
+          <button mat-raised-button class="detected-os" (click)="download(os)">Download <sup>{{ os }}</sup></button>
           <div class="other-os">
             @for(item of oss; track item) {
               @if (item !== os) {
-                <button mat-stroked-button>{{ item }}</button>
+                <button mat-stroked-button (click)="download(item)">{{ item }}</button>
               }
             }
           </div>

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { MediaMatcher } from '@angular/cdk/layout';
 import { isPlatformBrowser } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
 import { ChangeDetectorRef, Component, Inject, inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -23,7 +24,10 @@ export class AppComponent implements OnInit, OnDestroy {
 
   private _mobileQueryListener: () => void;
 
-  constructor(@Inject(PLATFORM_ID) private platformId: any) {
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: any,
+    private http: HttpClient
+  ) {
     const changeDetectorRef = inject(ChangeDetectorRef);
     const media = inject(MediaMatcher);
 
@@ -47,6 +51,17 @@ export class AppComponent implements OnInit, OnDestroy {
     this.setTheme();
   }
 
+  download(os: string): void {
+    const url = "https://api.github.com/repos/sQeeZ-scripting-language/interpreter/releases/latest";
+    this.http.get(url).subscribe((data: any) => {
+      data.assets.find((asset: any) => {
+        if (asset.browser_download_url.includes(os.toLowerCase())) {
+          window.location.href = asset.browser_download_url;
+        }
+      });
+    });
+  }
+
   private getSystemTheme(): string {
     return (typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
   }

src/app/app.config.ts

@@ -3,7 +3,8 @@ import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync()]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync(), provideHttpClient()]
 };