Chore/101 setup primeng design system

angular.json

@@ -26,14 +26,14 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
+              "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/assets/styles/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src"]
+            },
             "scripts": []
           },
           "configurations": {
@@ -67,7 +67,8 @@
               "buildTarget": "osf:build:production"
             },
             "development": {
-              "buildTarget": "osf:build:development"
+              "buildTarget": "osf:build:development",
+              "hmr": false
             }
           },
           "defaultConfiguration": "development"
@@ -85,14 +86,14 @@
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
+              "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/assets/styles/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src"]
+            },
             "scripts": []
           }
         },

src/app/app.component.html

@@ -1,22 +1 @@
-@if (!isPortrait()) {
-  <div class="layout-desktop">
-    <osf-sidenav></osf-sidenav>
-    <main class="content">
-      <div class="content-wrapper">
-        <osf-header></osf-header>
-        <osf-main-content></osf-main-content>
-        <osf-footer></osf-footer>
-      </div>
-    </main>
-  </div>
-} @else {
-  <div class="layout-tablet">
-    <main class="content">
-      <div class="content-wrapper">
-        <osf-topnav></osf-topnav>
-        <osf-main-content></osf-main-content>
-        <osf-footer></osf-footer>
-      </div>
-    </main>
-  </div>
-}
+<router-outlet />

src/app/app.component.scss

@@ -1,42 +0,0 @@
-.layout-desktop {
-  display: flex;
-  height: 100vh;
-
-  .content {
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    border: 6px solid #24384a;
-    border-radius: 12px;
-    box-sizing: content-box;
-
-    .content-wrapper {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
-  }
-}
-
-.layout-tablet {
-  display: flex;
-  height: 100vh;
-
-  .content {
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    .content-wrapper {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
-  }
-}

src/app/app.component.ts

@@ -1,29 +1,14 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { SidenavComponent } from '@core/components/sidenav/sidenav.component';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { HeaderComponent } from '@core/components/header/header.component';
-import { MainContentComponent } from '@core/components/main-content/main-content.component';
-import { FooterComponent } from '@core/components/footer/footer.component';
-import { TopnavComponent } from '@core/components/topnav/topnav.component';
-import { IS_PORTRAIT } from '@shared/utils/breakpoints.tokens';
-import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'osf-root',
-  imports: [
-    SidenavComponent,
-    RouterOutlet,
-    HeaderComponent,
-    MainContentComponent,
-    FooterComponent,
-    TopnavComponent,
-  ],
+  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  private isPortrait$ = inject(IS_PORTRAIT);
-  isPortrait = toSignal(this.isPortrait$);
+  title = 'osf';
 }

src/app/app.config.ts

@@ -5,6 +5,7 @@ import { provideStore } from '@ngxs/store';
 import { withNgxsReduxDevtoolsPlugin } from '@ngxs/devtools-plugin';
 import { providePrimeNG } from 'primeng/config';
 import Aura from '@primeng/themes/aura';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
@@ -15,8 +16,15 @@ export const appConfig: ApplicationConfig = {
     providePrimeNG({
       theme: {
         preset: Aura,
+        options: {
+          cssLayer: {
+            name: 'primeng',
+            order: 'base, primeng, reset',
+          },
+        },
       },
     }),
+    provideNoopAnimations(),
     provideHttpClient(),
   ],
 };

src/app/app.routes.ts

@@ -1,3 +1,34 @@
 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    loadComponent: () =>
+      import('./core/components/root/root.component').then(
+        (mod) => mod.RootComponent,
+      ),
+    children: [
+      {
+        path: 'sign-up',
+        loadComponent: () =>
+          import('./features/auth/sign-up/sign-up.component').then(
+            (mod) => mod.SignUpComponent,
+          ),
+      },
+      {
+        path: 'home',
+        loadComponent: () =>
+          import('./features/home/home.component').then(
+            (mod) => mod.HomeComponent,
+          ),
+      },
+      {
+        path: 'support',
+        loadComponent: () =>
+          import('./features/support/support.component').then(
+            (mod) => mod.SupportComponent,
+          ),
+      },
+    ],
+  },
+];

src/app/core/components/footer/footer.component.html

@@ -1 +1,42 @@
-<p>footer works!</p>
+<footer>
+  <div class="footer-content">
+    <div class="footer-nav">
+      <div class="footer-links">
+        <a href="#">Center for Open Science</a>
+        <span class="separator">|</span>
+        <a href="#">Reproducibility Project: Psychology</a>
+        <span class="separator">|</span>
+        <a href="#">Reproducibility Project: Cancer Biology</a>
+      </div>
+
+      <div class="footer-socials">
+        @for (icon of socialIcons; track icon.name) {
+          <a [href]="icon.url" [attr.aria-label]="icon.ariaLabel">
+            <img
+              [ngSrc]="icon.icon"
+              [alt]="icon.ariaLabel"
+              width="36"
+              height="36"
+            />
+          </a>
+        }
+      </div>
+    </div>
+
+    <div class="footer-secondary-nav">
+      <div class="footer-links">
+        <a href="#">Terms of Use</a>
+        <span class="separator">|</span>
+        <a href="#">Privacy Policy</a>
+        <span class="separator">|</span>
+        <a href="#">Status</a>
+        <span class="separator">|</span>
+        <a href="#">API</a>
+        <span class="separator">|</span>
+        <a href="#">TOP Guidelines</a>
+      </div>
+
+      <div class="footer-copyright">Copyright © 2011-2025</div>
+    </div>
+  </div>
+</footer>

src/app/core/components/footer/footer.component.scss

@@ -1,4 +1,50 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
 :host {
-  height: 50px;
-  background: aqua;
+  height: auto;
+  display: block;
+
+  .footer-nav,
+  .footer-secondary-nav {
+    @include mix.flex-center-between;
+    color: var.$dark-blue-1;
+    padding: 0 1.5rem;
+
+    .footer-links,
+    .footer-socials {
+      @include mix.flex-center;
+    }
+
+    .separator {
+      margin: 0 0.5rem;
+    }
+
+    a {
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .footer-nav {
+    height: 4.2rem;
+    background-color: var.$bg-blue-3;
+
+    .footer-socials {
+      @include mix.flex-center;
+      gap: 0.5rem;
+    }
+  }
+
+  .footer-secondary-nav {
+    height: 2.6rem;
+    background-color: var.$bg-blue-2;
+
+    .footer-copyright {
+      @include mix.flex-center;
+    }
+  }
 }

src/app/core/components/footer/footer.component.ts

@@ -1,10 +1,40 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
+import { SocialIcon } from '@osf/shared/entities/social-icon.interface';
 
 @Component({
   standalone: true,
   selector: 'osf-footer',
-  imports: [],
+  imports: [NgOptimizedImage],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FooterComponent {}
+export class FooterComponent {
+  protected readonly socialIcons: SocialIcon[] = [
+    {
+      name: 'x',
+      icon: 'assets/icons/socials/x.svg',
+      url: '#',
+      ariaLabel: 'X (formerly Twitter)',
+    },
+    {
+      name: 'facebook',
+      icon: 'assets/icons/socials/facebook.svg',
+      url: '#',
+      ariaLabel: 'Facebook',
+    },
+    {
+      name: 'group',
+      icon: 'assets/icons/socials/group.svg',
+      url: '#',
+      ariaLabel: 'Group',
+    },
+    {
+      name: 'github',
+      icon: 'assets/icons/socials/github.svg',
+      url: '#',
+      ariaLabel: 'GitHub',
+    },
+  ];
+}

src/app/core/components/header/header.component.html

@@ -1,2 +1,3 @@
-<button class="button">Sign In</button>
-<button class="button">Donate</button>
+<a routerLink="/sign-up" class="p-button"> Sign Up </a>
+
+<p-button label="Donate" severity="contrast" />

src/app/core/components/header/header.component.scss

@@ -1,7 +1,9 @@
+@use "assets/styles/mixins" as mix;
+
 :host {
-  position: absolute;
-  height: 50px;
-  top: 0;
-  right: 0;
-  background: transparent;
+  height: 4.5rem;
+  padding-right: 1rem;
+  width: 100%;
+  @include mix.flex-center-right;
+  gap: 1rem;
 }

src/app/core/components/header/header.component.ts

@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { RouterLink } from '@angular/router';
 
 @Component({
   standalone: true,
   selector: 'osf-header',
-  imports: [],
+  imports: [Button, RouterLink],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderComponent {}

src/app/core/components/main-content/main-content.component.html

@@ -1,3 +1 @@
-<main class="content-body">
-  <p>main-content works!</p>
-</main>
+<router-outlet />