feat: Header and Footer

.eslintrc.json

@@ -24,6 +24,13 @@
             "style": "camelCase"
           }
         ],
+        "@angular-eslint/component-max-inline-declarations": [
+          "warn",
+          {
+            "template": 6,
+            "styles": 6
+          }
+        ],
         "@angular-eslint/component-selector": [
           "error",
           {

scripts/set-env.js

@@ -6,7 +6,8 @@ dotenv.config({ path: path.resolve(__dirname, '../.env') });
 
 const envFilePath = path.resolve(__dirname, '../src/environment.ts');
 const output = `export const env = {
-  api_url: "https://api-opis.unictdev.org/api/v2"
+  api_url: "https://api-opis.unictdev.org/api/v2",
+  github_api_url: "https://api.github.com/repos/UNICT-DMI"
 };`;
 fs.writeFileSync(envFilePath, output);
 

src/app/app.config.ts

@@ -1,12 +1,18 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withInMemoryScrolling } from '@angular/router';
 import { routes } from './app.routes';
 import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideRouter(routes),
+    provideRouter(
+      routes,
+      withInMemoryScrolling({
+        scrollPositionRestoration: 'top',
+        anchorScrolling: 'enabled',
+      }),
+    ),
     provideCharts(withDefaultRegisterables()),
   ],
 };

src/app/app.routes.ts

@@ -2,13 +2,14 @@ import { Routes } from '@angular/router';
 import { DepartmentPageComponent } from './pages/department/department';
 import { InfoPageComponent } from './pages/info/info';
 import { HomePageComponent } from './pages/home/home';
+import { FormulaComponent } from './pages/formula/formula';
 
 export const routes: Routes = [
-  { path: 'home', component: HomePageComponent },
-  { path: ':depsName', component: DepartmentPageComponent },
+  { path: '', component: HomePageComponent },
+  { path: 'formula', component: FormulaComponent },
   { path: 'info', component: InfoPageComponent },
-  { path: '**', redirectTo: '/home' },
-  // { path: 'formula', },
-  // { path: 'signup', },
   // { path: 'login', }
+  // { path: 'signup', },
+  { path: 'department/:depsName', component: DepartmentPageComponent },
+  { path: '**', redirectTo: '', pathMatch: 'full' },
 ];

src/app/app.scss

@@ -0,0 +1,9 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.opis-app {
+  flex: 1 0 auto;
+}

src/app/app.spec.ts

@@ -1,11 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 import { describe, it, expect } from 'vitest';
 import { App } from './app';
+import { provideRouter } from '@angular/router';
 
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App],
+      providers: [provideRouter([])],
     }).compileComponents();
   });
 

src/app/app.ts

@@ -1,10 +1,16 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { Footer } from '@sections/footer/footer';
+import { HeaderNav } from '@sections/header-nav/header-nav';
 
 @Component({
   selector: 'opis-root',
-  imports: [RouterOutlet],
-  template: '<router-outlet />',
+  imports: [HeaderNav, RouterOutlet, Footer],
+  template: ` <opis-header-nav />
+    <main class="opis-app">
+      <router-outlet />
+    </main>
+    <opis-footer />`,
   styleUrl: './app.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/custom_types/icon-dimension.type.ts

@@ -0,0 +1,9 @@
+export type IconDimension =
+  | '1-5rem'
+  | '2rem'
+  | '2-5rem'
+  | '3rem'
+  | '3-5rem'
+  | '4rem'
+  | '4-5rem'
+  | '5rem';

src/app/interfaces/github.interface.ts

@@ -0,0 +1,37 @@
+export interface CacheEntry<T> {
+  timestamp: number;
+  data: T;
+}
+
+export interface GithubUser {
+  login: string;
+  id: number;
+  node_id: string;
+  avatar_url: string;
+  gravatar_id: string;
+  url: string;
+  html_url: string;
+  followers_url: string;
+  following_url: string;
+  gists_url: string;
+  starred_url: string;
+  subscriptions_url: string;
+  organizations_url: string;
+  repos_url: string;
+  events_url: string;
+  received_events_url: string;
+  type: string;
+  user_view_type: string;
+  site_admin: boolean;
+  contributions: number;
+}
+
+export interface GitUserView {
+  nick: string;
+  contributions: number;
+  email?: string;
+  linkedin?: string;
+  telegram?: string;
+  name?: string;
+  github_profile?: string;
+}

src/app/interfaces/header-nav-interface.ts

@@ -0,0 +1,10 @@
+import { IconDimension } from '@c_types/icon-dimension.type';
+
+export interface NavItem {
+  label: string;
+  route: string;
+  icon?: {
+    name: string;
+    dimension: IconDimension;
+  };
+}

src/app/pages/department/department.ts

@@ -15,15 +15,15 @@ import { RouterLink } from '@angular/router';
 import { CdsService } from '@services/cds/cds.service';
 import { CDS } from '@interfaces/cds.interface';
 import { NO_CHOICE_CDS } from '@values/no-choice-cds';
-import { Loader } from '@components/loader/loader';
-import { Icon } from '@components/icon/icon';
 import { CdsSelectedSection } from '@sections/cds-selected-section/cds-selected-section';
 import { QuestionService } from '@services/questions/questions.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IconComponent } from '@shared-ui/icon/icon';
+import { Loader } from '@shared-ui/loader/loader';
 
 @Component({
   selector: 'opis-department',
-  imports: [RouterLink, Loader, Icon, CdsSelectedSection],
+  imports: [RouterLink, Loader, IconComponent, CdsSelectedSection],
   templateUrl: './department.html',
   styleUrl: './department.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/pages/formula/formula.html

@@ -0,0 +1 @@
+<p>formula works!</p>

src/app/pages/formula/formula.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormulaComponent } from './formula';
+
+describe('Formula', () => {
+  let component: FormulaComponent;
+  let fixture: ComponentFixture<FormulaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormulaComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FormulaComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/formula/formula.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'opis-formula',
+  imports: [],
+  templateUrl: './formula.html',
+  styleUrl: './formula.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormulaComponent {}

src/app/pages/home/home.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component, computed, inject, OnDestroy } from '@angular/core';
 import { DepCard } from '@cards/dep-card/dep-card';
-import { LogoAnimated } from '@components/logo-animated/logo-animated';
 import { DepartmentsService } from '@services/departments/departments.service';
-import { Loader } from '@components/loader/loader';
 import { YearSection } from '@sections/year-section/year-section';
+import { Loader } from '@shared-ui/loader/loader';
+import { LogoAnimated } from '@shared-ui/logo-animated/logo-animated';
 
 @Component({
   selector: 'opis-home',

src/app/services/github/github.service.ts

@@ -0,0 +1,53 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable, signal } from '@angular/core';
+import { env } from '@env';
+import { CacheEntry, GithubUser, GitUserView } from '@interfaces/github.interface';
+import { REAL_NAME } from '@values/real-name-contributors.value';
+import { lastValueFrom } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class GitHubService {
+  private readonly REPO_NAME = 'OPIS-Manager';
+  private readonly BASE_URL = env.github_api_url + '/' + this.REPO_NAME;
+  private readonly _http = inject(HttpClient);
+
+  private cacheTTL = 0.5 * 60 * 60 * 1000; // 30 min
+
+  readonly contributors = signal<GitUserView[]>([]);
+
+  async getRepoContributors(): Promise<GitUserView[]> {
+    const cacheKey = `contributors_${this.REPO_NAME}`;
+    const cachedRaw = localStorage.getItem(cacheKey);
+    const now = Date.now();
+
+    if (cachedRaw) {
+      try {
+        const cached = JSON.parse(cachedRaw) as CacheEntry<GitUserView[]>;
+        if (now - cached.timestamp < this.cacheTTL) {
+          return cached.data;
+        }
+      } catch {
+        console.warn('No cache founded or expired, calling api');
+      }
+    }
+
+    const url = `${this.BASE_URL}/contributors`;
+    try {
+      const contributors = await lastValueFrom(this._http.get<GithubUser[]>(url));
+      const noBots = contributors.filter((user) => !user.login.includes('bot'));
+      const mapped = noBots.map((user) => ({
+        nick: user.login ?? 'Unknown',
+        name: REAL_NAME.get(user.login.toLowerCase()) ?? '',
+        contributions: user.contributions ?? 0,
+        github_profile: user.html_url,
+      }));
+
+      const sorted = mapped.sort((userA, userB) => userB.contributions - userA.contributions);
+      localStorage.setItem(cacheKey, JSON.stringify({ timestamp: now, data: sorted }));
+      return sorted;
+    } catch (err) {
+      console.error(`Errore nel recuperare i contributors di ${this.REPO_NAME}`, err);
+      return [];
+    }
+  }
+}

src/app/services/icon-registry/icon-registry.service.ts

@@ -0,0 +1,22 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, shareReplay, map } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class IconRegistryService {
+  private readonly _http = inject(HttpClient);
+  private readonly cache = new Map<'github' | 'linkedin', Observable<string>>();
+
+  load(name: 'github' | 'linkedin'): Observable<string> {
+    if (!this.cache.has(name)) {
+      const request$ = this._http.get(`/icons/${name}-icon.svg`, { responseType: 'text' }).pipe(
+        map((svg) => svg.trim()),
+        shareReplay(1),
+      );
+
+      this.cache.set(name, request$);
+    }
+
+    return this.cache.get(name)!;
+  }
+}

src/app/ui/cards/dep-card/dep-card.html

@@ -1,5 +1,5 @@
 <article class="cards department" [id]="department().unict_id">
-  <a (click)="saveInfo()" [routerLink]="detailUrl">
+  <a (click)="saveInfo()" [routerLink]="'department/' + detailUrl">
     <div class="wrappers-icon">
       <opis-icon [iconName]="department().icon ?? ''" />
     </div>

src/app/ui/cards/dep-card/dep-card.ts

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, input, OnInit } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { Icon } from '@components/icon/icon';
 import { Department } from '@interfaces/department.interface';
+import { IconComponent } from '@shared-ui/icon/icon';
 
 @Component({
   selector: 'opis-dep-card',
-  imports: [RouterLink, Icon],
+  imports: [RouterLink, IconComponent],
   templateUrl: './dep-card.html',
   styleUrl: './dep-card.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/ui/sections/cds-selected-section/cds-selected-section.html

@@ -8,7 +8,7 @@
 
     @if (infoCds.status() === ERR_STATUS) {
       <div class="error">
-        <opis-icon iconName="report_off" [isBig]="true" />
+        <opis-icon iconName="report_off" dimension="5rem" />
         <h2>Qualcosa è andato storto :/</h2>
       </div>
     }

src/app/ui/sections/cds-selected-section/cds-selected-section.ts

@@ -5,14 +5,14 @@ import {
   inject,
   ResourceStatus,
 } from '@angular/core';
-import { Graph } from '@components/graph/graph';
-import { Icon } from '@components/icon/icon';
-import { Loader } from '@components/loader/loader';
 import { CdsService } from '@services/cds/cds.service';
+import { Graph } from '@shared-ui/graph/graph';
+import { IconComponent } from '@shared-ui/icon/icon';
+import { Loader } from '@shared-ui/loader/loader';
 
 @Component({
   selector: 'opis-cds-selected-section',
-  imports: [Icon, Loader, Graph],
+  imports: [IconComponent, Loader, Graph],
   templateUrl: './cds-selected-section.html',
   styleUrl: './cds-selected-section.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,