set img for media github

src/app/components/repos/repos.component.html

@@ -1,11 +1,12 @@
 <section class="tabview">
-  <p-dataView #dv [value]="repos">
+  <p-dataView #dv [value]="repos" [rows]="5" [paginator]="true">
     <ng-template pTemplate="list" let-repo>
       <div class="grid grid-nogutter">
         <div class="col-12">
           @for (rep of repo; let first = $first; track $index;) {
           <section class="flex flex-column xl:flex-row xl:align-content-start p-4 gap-4"
             [ngClass]="{ 'border-top-1 surface-border': !first }">
+            <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="rep.img" loading="eager" />
             <div class="flex flex-column sm:flex-row justify-content-between 
               align-items-center xl:align-items-start flex-1 gap-4">
               <div class="flex flex-column align-items-center sm:align-items-start gap-3">

src/app/components/repos/repos.component.ts

@@ -1,8 +1,9 @@
+import { NgClass, NgIf } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { DataViewModule } from 'primeng/dataview';
 import { TagModule } from 'primeng/tag';
 import { GithubService } from '../../services/github.service';
-import { NgClass, NgIf } from '@angular/common';
+
 @Component({
   selector: 'app-repos',
   standalone: true,
@@ -11,17 +12,24 @@ import { NgClass, NgIf } from '@angular/common';
   styleUrl: './repos.component.scss',
   providers: [GithubService]
 })
+
 export class ReposComponent implements OnInit {
   private gitService = inject(GithubService);
-
+  skeleton = {
+    card: false,
+    card_img: false
+  };
   repos: any[] = [];
 
   ngOnInit(): void {
 
-    this.gitService.getAll('tauisilva').subscribe((p) => {
-      if (p) {
-        console.log(p[0])
-        this.repos = p;
+    this.gitService.getAll('tauisilva').subscribe((repos) => {
+      if (repos) {
+        this.repos = repos;
+        repos.forEach(async (r: any) => {
+          const img = await this.gitService.getImg(r?.html_url).toPromise();
+          r.img = img;
+        });
       }
     })
   }

src/app/services/github.service.ts

@@ -1,5 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
+import { Observable, map } from 'rxjs';
 import { environment } from '../../env/env';
 
 @Injectable({
@@ -15,4 +16,19 @@ export class GithubService {
     return this.http.get<any>(`${this.api}/users/${user}/repos`);
   }
 
+  getImg(url: string): Observable<string | null> {
+    return this.http.get(url, { responseType: 'text' })
+      .pipe(map((html: string) => this.extractImage(html)));
+  }
+
+  private extractImage(html: string): string | null {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+
+    const metaTags = doc.querySelectorAll('meta[property="og:image"], meta[property="twitter:image"]');
+    const firstTag = metaTags[0] as HTMLMetaElement | undefined;
+
+    return firstTag ? firstTag.content : null;
+  }
+
 }

src/app/services/theme.service.ts

@@ -9,7 +9,6 @@ export class ThemeService {
   getTheme() {
     const theme = sessionStorage.getItem('theme');
     if (theme) {
-      console.log(theme)
       this.setTheme(theme);
     }
   }
@@ -33,4 +32,4 @@ export class ThemeService {
     sessionStorage.setItem('theme', isDark ? 'dark' : 'light');
     this.setTheme(isDark ? 'dark' : 'light');
   }
-}
+}