Feat/167 Preprints overview

src/app/app.routes.ts

@@ -159,6 +159,11 @@ export const routes: Routes = [
         path: 'settings',
         loadChildren: () => import('./features/settings/settings.routes').then((mod) => mod.settingsRoutes),
       },
+      {
+        path: 'preprints',
+        loadChildren: () =>
+          import('./features/preprints/constants/preprints.routes').then((mod) => mod.preprintsRoutes),
+      },
       {
         path: 'search',
         loadComponent: () => import('./features/search/search.component').then((mod) => mod.SearchComponent),

src/app/core/constants/nav-items.constant.ts

@@ -28,6 +28,12 @@ export const NAV_ITEMS: NavItem[] = [
     icon: 'my-projects',
     useExactMatch: true,
   },
+  {
+    path: '/preprints',
+    label: 'navigation.preprints',
+    icon: 'preprints',
+    useExactMatch: true,
+  },
   {
     path: '/my-profile',
     label: 'navigation.profile',

src/app/core/constants/ngxs-states.constant.ts

@@ -4,6 +4,7 @@ import { CollectionsState } from '@osf/features/collections/store';
 import { InstitutionsState } from '@osf/features/institutions/store';
 import { MeetingsState } from '@osf/features/meetings/store';
 import { MyProjectsState } from '@osf/features/my-projects/store';
+import { PreprintsState } from '@osf/features/preprints/store';
 import { AnalyticsState } from '@osf/features/project/analytics/store';
 import { ProjectOverviewState } from '@osf/features/project/overview/store';
 import { SettingsState } from '@osf/features/project/settings/store';
@@ -32,4 +33,5 @@ export const STATES = [
   CollectionsState,
   WikiState,
   MeetingsState,
+  PreprintsState,
 ];

src/app/features/auth/pages/forgot-password/forgot-password.component.scss

@@ -4,7 +4,7 @@
 :host {
   @include mix.flex-center;
   flex: 1;
-  background: url("/assets/images/auth-background.png") center no-repeat;
+  background: url("/assets/images/dark-blue-gradient.png") center no-repeat;
   background-size: cover;
 
   .forgot-password-container {

src/app/features/auth/pages/reset-password/reset-password.component.scss

@@ -4,7 +4,7 @@
 :host {
   @include mix.flex-center;
   flex: 1;
-  background: url("/assets/images/auth-background.png") center no-repeat;
+  background: url("/assets/images/dark-blue-gradient.png") center no-repeat;
   background-size: cover;
 
   .reset-password-container,

src/app/features/auth/pages/sign-up/sign-up.component.scss

@@ -4,7 +4,7 @@
 :host {
   @include mix.flex-column-center;
   flex: 1;
-  background: url("/assets/images/auth-background.png") center no-repeat;
+  background: url("/assets/images/dark-blue-gradient.png") center no-repeat;
   background-size: cover;
 
   .sign-up-container,

src/app/features/preprints/components/advisory-board/advisory-board.component.html

@@ -0,0 +1,7 @@
+@if (htmlContent()) {
+  <section
+    [ngClass]="{ 'osf-preprint-service': isLandingPage() }"
+    class="advisory-board-section py-5 px-3 flex flex-column md:py-6 md:px-4"
+    [innerHTML]="htmlContent()"
+  ></section>
+}

src/app/features/preprints/components/advisory-board/advisory-board.component.scss

@@ -0,0 +1,15 @@
+@use "assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
+
+.advisory-board-section {
+  background: var(--preprints-branding-hero-background-image-url);
+
+  &.osf-preprint-service {
+    background-image: none;
+    background-color: var(--preprints-branding-primary-color);
+  }
+}
+
+.m-b-lg {
+  margin-bottom: mix.rem(24px);
+}

src/app/features/preprints/components/advisory-board/advisory-board.component.spec.ts

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

src/app/features/preprints/components/advisory-board/advisory-board.component.ts

@@ -0,0 +1,18 @@
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { StringOrNullOrUndefined } from '@core/helpers';
+import { Brand } from '@osf/features/preprints/models';
+
+@Component({
+  selector: 'osf-advisory-board',
+  imports: [NgClass],
+  templateUrl: './advisory-board.component.html',
+  styleUrl: './advisory-board.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AdvisoryBoardComponent {
+  htmlContent = input<StringOrNullOrUndefined>(null);
+  brand = input<Brand>();
+  isLandingPage = input<boolean>(false);
+}

src/app/features/preprints/components/browse-by-subjects/browse-by-subjects.component.html

@@ -0,0 +1,26 @@
+<section class="py-5 px-3 flex flex-column bg-white gap-6 md:py-6 md:px-4">
+  <h2 class="text-2xl">{{ 'preprints.browseBySubjects.title' | translate }}</h2>
+  <section class="grid">
+    @if (isLoading()) {
+      @for (_ of skeletonArray; track $index) {
+        <p-card class="col-12 p-1 md:col-6 md:p-2">
+          <div class="flex justify-content-center">
+            <p-skeleton width="10rem" height="1.5rem"></p-skeleton>
+          </div>
+        </p-card>
+      }
+    } @else {
+      @for (subject of subjects(); track subject) {
+        <p-card class="col-12 p-1 md:col-6 md:p-2">
+          <div class="provider-subject">
+            <h3 class="text-center">
+              <a class="subject-link" routerLink="/search" [queryParams]="linksToSearchPageForSubject()[$index]">{{
+                subject.text
+              }}</a>
+            </h3>
+          </div>
+        </p-card>
+      }
+    }
+  </section>
+</section>

src/app/features/preprints/components/browse-by-subjects/browse-by-subjects.component.scss

@@ -0,0 +1,7 @@
+@use "assets/styles/variables" as var;
+
+.provider-subject {
+  .subject-link {
+    color: var.$dark-blue-1;
+  }
+}

src/app/features/preprints/components/browse-by-subjects/browse-by-subjects.component.spec.ts

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

src/app/features/preprints/components/browse-by-subjects/browse-by-subjects.component.ts

@@ -0,0 +1,37 @@
+import { TranslateModule } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+import { Skeleton } from 'primeng/skeleton';
+
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import { Subject } from '@osf/features/preprints/models';
+import { ResourceTab } from '@shared/enums';
+
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'osf-browse-by-subjects',
+  imports: [Card, RouterLink, Skeleton, TranslateModule],
+  templateUrl: './browse-by-subjects.component.html',
+  styleUrl: './browse-by-subjects.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BrowseBySubjectsComponent {
+  subjects = input.required<Subject[]>();
+  linksToSearchPageForSubject = computed(() => {
+    return this.subjects().map((subject) => ({
+      resourceTab: ResourceTab.Preprints,
+      activeFilters: JSON.stringify([
+        {
+          filterName: 'Subject',
+          label: subject.text,
+          value: `${environment.apiUrl}/subjects/` + subject.id,
+        },
+      ]),
+    }));
+  });
+  isLoading = input.required<boolean>();
+  skeletonArray = Array.from({ length: 10 }, (_, i) => i + 1);
+}

src/app/features/preprints/components/index.ts

@@ -0,0 +1,3 @@
+export { BrowseBySubjectsComponent } from './browse-by-subjects/browse-by-subjects.component';
+export { PreprintServicesComponent } from './preprint-services/preprint-services.component';
+export { AdvisoryBoardComponent } from '@osf/features/preprints/components/advisory-board/advisory-board.component';

src/app/features/preprints/components/preprint-services/preprint-services.component.html

@@ -0,0 +1,17 @@
+<section class="services-background-image py-5 px-3 text-white md:py-6 md:px-4">
+  <h2 class="text-2xl text-white">{{ 'preprints.services.title' | translate }}</h2>
+  <p class="mt-4">
+    {{ 'preprints.services.description' | translate }}
+  </p>
+
+  <section class="grid justify-content-center align-items-center gap-3 mt-6">
+    @for (preprintProvider of preprintProvidersToAdvertise(); track preprintProvider.id) {
+      <!-- [Rni] TODO: add link to preprint provider page -->
+      <a
+        class="preprint-provider-grid-item"
+        [style.background-image]="'url(' + preprintProvider.whiteWideImageUrl + ')'"
+        [title]="preprintProvider.name"
+      ></a>
+    }
+  </section>
+</section>

src/app/features/preprints/components/preprint-services/preprint-services.component.scss

@@ -0,0 +1,14 @@
+@use "assets/styles/mixins" as mix;
+
+.services-background-image {
+  background: url("/assets/images/preprints/preprints-services-background.png") center;
+}
+
+.preprint-provider-grid-item {
+  display: block;
+  width: mix.rem(140px);
+  height: mix.rem(70px);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}

src/app/features/preprints/components/preprint-services/preprint-services.component.spec.ts

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

src/app/features/preprints/components/preprint-services/preprint-services.component.ts

@@ -0,0 +1,16 @@
+import { TranslateModule } from '@ngx-translate/core';
+
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { PreprintProviderToAdvertise } from '@osf/features/preprints/models';
+
+@Component({
+  selector: 'osf-preprint-services',
+  imports: [TranslateModule],
+  templateUrl: './preprint-services.component.html',
+  styleUrl: './preprint-services.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PreprintServicesComponent {
+  preprintProvidersToAdvertise = input.required<PreprintProviderToAdvertise[]>();
+}

src/app/features/preprints/constants/preprints.routes.ts

@@ -0,0 +1,24 @@
+import { Routes } from '@angular/router';
+
+import { PreprintsComponent } from '@osf/features/preprints/preprints.component';
+
+export const preprintsRoutes: Routes = [
+  {
+    path: '',
+    component: PreprintsComponent,
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'overview',
+      },
+      {
+        path: 'overview',
+        loadComponent: () =>
+          import('@osf/features/preprints/pages/landing/preprints-landing.component').then(
+            (c) => c.PreprintsLandingComponent
+          ),
+      },
+    ],
+  },
+];

src/app/features/preprints/mappers/index.ts

@@ -0,0 +1 @@
+export * from './preprints.mapper';

src/app/features/preprints/mappers/preprints.mapper.ts

@@ -0,0 +1,52 @@
+import {
+  PreprintProviderDetails,
+  PreprintProviderDetailsGetResponse,
+  PreprintProviderToAdvertise,
+  Subject,
+  SubjectGetResponse,
+} from '@osf/features/preprints/models';
+
+export class PreprintsMapper {
+  static fromPreprintProviderDetailsGetResponse(response: PreprintProviderDetailsGetResponse): PreprintProviderDetails {
+    const brandRaw = response.embeds!.brand.data;
+    return {
+      id: response.id,
+      name: response.attributes.name,
+      descriptionHtml: response.attributes.description,
+      advisoryBoardHtml: response.attributes.advisory_board,
+      examplePreprintId: response.attributes.example,
+      domain: response.attributes.domain,
+      footerLinksHtml: response.attributes.footer_links,
+      preprintWord: response.attributes.preprint_word,
+      brand: {
+        id: brandRaw.id,
+        name: brandRaw.attributes.name,
+        heroLogoImageUrl: brandRaw.attributes.hero_logo_image,
+        heroBackgroundImageUrl: brandRaw.attributes.hero_background_image,
+        topNavLogoImageUrl: brandRaw.attributes.topnav_logo_image,
+        primaryColor: brandRaw.attributes.primary_color,
+        secondaryColor: brandRaw.attributes.secondary_color,
+      },
+    };
+  }
+
+  static fromPreprintProvidersToAdvertiseGetResponse(
+    response: PreprintProviderDetailsGetResponse[]
+  ): PreprintProviderToAdvertise[] {
+    return response
+      .filter((item) => !item.id.includes('osf'))
+      .map((item) => ({
+        id: item.id,
+        name: item.attributes.name,
+        whiteWideImageUrl: item.attributes.assets.wide_white,
+      }));
+  }
+
+  static fromSubjectsGetResponse(response: SubjectGetResponse[]): Subject[] {
+    return response.map((subject) => ({
+      id: subject.id,
+      text: subject.attributes.text,
+      taxonomy_name: subject.attributes.taxonomy_name,
+    }));
+  }
+}

src/app/features/preprints/models/index.ts

@@ -0,0 +1 @@
+export * from './preprints.models';