feat: open meshstack url also considers to remove anything after '#', and query correctly

* refactor template gallery view
* fix eslint rules, remove deprecated ones and pin typescript eslint to version 7

Author: uleMeshcloud

website/.eslintrc.json

@@ -40,7 +40,6 @@
           }
         ],
         "@angular-eslint/no-output-native": "warn",
-        "@angular-eslint/no-host-metadata-property": "warn",
         // @typescript-eslint
         "@typescript-eslint/explicit-member-accessibility": [
           "error",

website/package.json

@@ -28,6 +28,8 @@
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@ng-bootstrap/ng-bootstrap": "^18.0.0",
     "@popperjs/core": "^2.11.8",
+    "@typescript-eslint/eslint-plugin": "7",
+    "@typescript-eslint/parser": "7",
     "bootstrap": "^5.3.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsdoc": "^50.6.8",
@@ -49,16 +51,12 @@
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "20",
-    "@typescript-eslint/eslint-plugin": "^8.28.0",
-    "@typescript-eslint/parser": "^8.28.0",
     "@typescript-eslint/types": "^8.0.0",
     "@typescript-eslint/utils": "^8.0.0",
     "angular-eslint": "19.2.1",
     "eslint": "^8.57.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "2.25.2",
     "eslint-plugin-jasmine": "^4.2.2",
-    "eslint-plugin-jsdoc": "^43.0.5",
     "eslint-plugin-local-rules": "^3.0.2",
     "eslint-plugin-prefer-arrow": "1.2.2",
     "jasmine-core": "~5.6.0",

website/src/app/app.component.ts

@@ -8,7 +8,7 @@ import { HeaderComponent } from 'app/shared/header/header.component';
 import { FooterComponent } from './shared/footer';
 
 @Component({
-  selector: 'app-root',
+  selector: 'mst-root',
   imports: [CommonModule, RouterOutlet, HeaderComponent, FooterComponent, NgbModule],
   templateUrl: './app.component.html',
   standalone: true

website/src/app/app.config.ts

@@ -6,5 +6,10 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient(withFetch()), provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay())]
+  providers: [
+    provideHttpClient(withFetch()),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideClientHydration(withEventReplay())
+  ]
 };

website/src/app/core/template.ts

@@ -8,7 +8,7 @@ export interface Template {
 	githubUrls: {
 		ssh: string;
 		https: string;
-	},
+	};
 	supportedPlatforms: PlatformType[];
 }
 

website/src/app/features/template-details/import-dialog/import-dialog.component.ts

@@ -29,7 +29,7 @@ export class ImportDialogComponent implements OnInit {
     private fb: FormBuilder
   ) { }
 
-  ngOnInit(): void {
+  public ngOnInit(): void {
     this.form = this.fb.group({
       meshStackUrl: this.fb.nonNullable.control('', [Validators.required, Validators.pattern(/^(https?:\/\/).*/)]),
     });
@@ -47,10 +47,16 @@ export class ImportDialogComponent implements OnInit {
 
   private getSanitizedMeshStackUrl(): string {
     let meshStackUrl = this.form.controls.meshStackUrl.value;
-      if (meshStackUrl.endsWith('/')) {
-        meshStackUrl = meshStackUrl.slice(0, -1);
-      }
+    const hashIndex = meshStackUrl.indexOf('#');
 
-      return meshStackUrl;
+    if (hashIndex !== -1) {
+      meshStackUrl = meshStackUrl.substring(0, hashIndex);
+    }
+
+    if (meshStackUrl.endsWith('/')) {
+      meshStackUrl = meshStackUrl.slice(0, -1);
+    }
+
+    return meshStackUrl;
   }
 }

website/src/app/features/template-details/template-details.component.html

@@ -39,7 +39,7 @@ <h2 class="fw-bold h4">
                   <a [href]="template.source" target="_blank" rel="noopener noreferrer" class="mr-3 flex-grow-1">
                     {{ template.source }}
                   </a>
-                  <button (click)="copyToClipboard(template.source)" class="btn btn-light btn-sm">
+                  <button type="button" (click)="copyToClipboard(template.source)" class="btn btn-light btn-sm">
                     <i *ngIf="copyLabel === 'Copy'" class="fas fa-copy"></i>
                     <i *ngIf="copyLabel === 'Copied'" class="fa-solid fa-check"></i>
                     {{ copyLabel }}
@@ -79,7 +79,7 @@ <h3 class="fw-bold h6">Option 2: Copy the Files into your own Repository</h3>
 
               <div class="pt-5 d-flex justify-content-end">
                 <a href="#" class="btn btn-outline-primary me-2">Go Back</a>
-                <button class="btn btn-primary" (click)="open(template)">Add to meshStack</button>
+                <button type="button" class="btn btn-primary" (click)="open(template)">Add to meshStack</button>
               </div>
             </div>
           </div>

website/src/app/features/template-details/template-details.component.ts

@@ -78,7 +78,7 @@ export class TemplateDetailsComponent implements OnInit, OnDestroy {
   }
 
   public open(template: TemplateDetailsVm) {
-    const regex = /modules\/[^\/]+\/[^\/]+/;
+    const regex = /modules\/[^/]+\/[^/]+/;
     const match = template.source.match(regex);
     const modulePath = match ? match[0] : '';
 

website/src/app/features/template-gallery/template-gallery.component.ts

@@ -19,7 +19,6 @@ import { TemplateService } from 'app/shared/template';
   standalone: true
 })
 export class TemplateGalleryComponent implements OnInit, OnDestroy {
-
   public templates$!: Observable<Card[]>;
 
   public searchForm!: FormGroup;
@@ -36,63 +35,62 @@ export class TemplateGalleryComponent implements OnInit, OnDestroy {
     private fb: FormBuilder,
     private templateService: TemplateService,
     private platformLogoService: PlatformLogoService
-  ) { }
+  ) {}
 
   public ngOnInit(): void {
+    this.initializeSearchForm();
+    this.subscribeToRouteParams();
+  }
+
+  public ngOnDestroy(): void {
+    this.paramSubscription.unsubscribe();
+  }
+
+  public onSearch(): void {
+    const searchTerm = this.searchForm.value.searchTerm;
+    this.templates$ = this.getTemplatesWithLogos(
+      this.templateService.search(searchTerm)
+    );
+
+    this.isSearch = !!searchTerm;
+    this.router.navigate(['/all']);
+  }
+
+  private initializeSearchForm(): void {
     this.searchForm = this.fb.group({
       searchTerm: ['']
     });
+  }
 
+  private subscribeToRouteParams(): void {
     this.paramSubscription = this.route.paramMap.subscribe(params => {
       const type = params.get('type') ?? 'all';
-
       const templateObs$ = this.templateService.filterTemplatesByPlatformType(type as PlatformType);
-      this.logos$ = this.platformLogoService.getLogoUrls();
-      this.templates$ = forkJoin({
-        templates: templateObs$,
-        logos: this.logos$
-      })
-        .pipe(
-          tap(() => this.isSearch = false),
-          map(({ templates, logos }) => templates.map(item => ({
-            cardLogo: item.logo,
-            title: item.name,
-            description: item.description,
-            detailsRoute: `/template/${item.id}`,
-            supportedPlatforms: item.supportedPlatforms.map(platform => ({ platformType: platform, imageUrl: logos[item.platformType] ?? null }))
-          }))
-          ),
 
-        );
+      this.logos$ = this.platformLogoService.getLogoUrls();
+      this.templates$ = this.getTemplatesWithLogos(templateObs$);
     });
   }
 
-  public ngOnDestroy(): void {
-    this.paramSubscription.unsubscribe();
-  }
-
-  public onSearch(): void {
-    const searchTerm = this.searchForm.value.searchTerm;
-    this.templates$ = forkJoin({
-      templates: this.templateService.search(searchTerm),
+  private getTemplatesWithLogos(templateObs$: Observable<any>): Observable<Card[]> {
+    return forkJoin({
+      templates: templateObs$,
       logos: this.logos$
     })
       .pipe(
-        tap(() => {
-          this.isSearch = !!searchTerm
-        }),
-        map(({ templates, logos }) => templates.map(item => ({
-          cardLogo: item.logo,
-          title: item.name,
-          description: item.description,
-          detailsRoute: `/template/${item.id}`,
-          supportedPlatforms: item.supportedPlatforms.map(platform => ({ platformType: platform, imageUrl: logos[item.platformType] ?? null }))
-        }))
+        tap(() => (this.isSearch = false)),
+        map(({ templates, logos }) =>
+          templates.map(item => ({
+            cardLogo: item.logo,
+            title: item.name,
+            description: item.description,
+            detailsRoute: `/template/${item.id}`,
+            supportedPlatforms: item.supportedPlatforms.map(platform => ({
+              platformType: platform,
+              imageUrl: logos[item.platformType] ?? null
+            }))
+          }))
         )
       );
-
-    this.router.navigate(
-      ['/all']
-    );
   }
 }

website/src/app/shared/card/card.component.ts

@@ -13,12 +13,11 @@ import { Card } from './card';
 })
 export class CardComponent {
   @Input()
-  public card!:Card;
+  public card!: Card;
 
   constructor(private router: Router) {}
 
   public goToDetails() {
-    console.log('Navigating to details route', this.card.detailsRoute);
     this.router.navigate([this.card.detailsRoute]);
   }
 }