Feat/faq

package.json

@@ -15,7 +15,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~9.1.1",
-    "@angular/cdk": "^9.2.1",
+    "@angular/cdk": "^9.1.1",
     "@angular/common": "~9.1.1",
     "@angular/compiler": "~9.1.1",
     "@angular/core": "~9.1.1",

src/app/app-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./pages/main/main.module').then(m => m.MainModule)
+  },
+  {
+    path: 'faq',
+    loadChildren: () => import('./pages/faq/faq.module').then(m => m.FaqModule)
+  },
+  {
+    path: '**',
+    redirectTo: '',
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

src/app/app.component.html

@@ -11,11 +11,6 @@
   gdColumns.xs="100% 100% "
 >
   <ngcommunity-header gdArea="header"></ngcommunity-header>
-  <ngcommunity-main
-    *ngIf="(communitie$ | async) as communities"
-    gdArea="main"
-    [communities]="communities"
-  >
-  </ngcommunity-main>
+  <router-outlet></router-outlet>
 </div>
 <ngcommunity-footer></ngcommunity-footer>

src/app/app.component.ts

@@ -5,8 +5,4 @@ import { CommunityService } from '@shared/services';
   selector: 'ngcommunity-root',
   templateUrl: './app.component.html',
 })
-export class AppComponent {
-  communitie$ = this.communityService.communities;
-
-  constructor(private communityService: CommunityService) {}
-}
+export class AppComponent {}

src/app/app.module.ts

@@ -1,22 +1,21 @@
 import { AppComponent } from './app.component';
-import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import { PagesModule } from './pages/pages.module';
 import { SharedModule } from './shared/shared.module';
-import { RouterModule } from '@angular/router';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
+import { AppRoutingModule } from './app-routing.module';
+import { CommonModule } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
+const CORE_MODULE = [CommonModule, BrowserAnimationsModule, HttpClientModule];
 @NgModule({
   declarations: [AppComponent],
   imports: [
-    BrowserModule,
+    CORE_MODULE,
     SharedModule,
-    PagesModule,
-    HttpClientModule,
-    RouterModule.forRoot([]),
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+    AppRoutingModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/pages/faq/faq-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { FaqComponent } from './faq.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FaqComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FaqRoutingModule {}

src/app/pages/faq/faq.component.css

@@ -0,0 +1,24 @@
+h6 {
+  color: #c10707;
+  font-size: 20px;
+}
+
+a {
+  color: #c10707;
+}
+
+.text-container {
+  margin-left: 15%;
+  margin-right: 15%;
+  color: #333;
+}
+
+.text-content {
+  font-weight: 400;
+  line-height: 1.5;
+  font-size: 16px;
+}
+
+.question {
+  margin: 20px;
+}

src/app/pages/faq/faq.component.html

@@ -0,0 +1,60 @@
+<div class="text-container">
+  <div class="text-content">
+    <div class="question">
+      <h6>What is Angular-Communities?</h6>
+      <p>
+        Angular-communities in an initiative born in Málaga, Spain. It started as a small
+        open-source project built by four Angular devs from Málaga (see about us for more info) who
+        aimed to create a space where every single Angular community out there could be found and
+        located on the world map. This way, the visibility of all the Angular communities around the
+        world is increased, which is always a good thing! As more and more community members started
+        to show interest in Angular-Communities, our small project began to grow. Our goal now is to
+        create a space where all information regarding Angular can be found: communities,
+        conferences, events...
+      </p>
+    </div>
+    <div class="question">
+      <h6>I host an Angular community, can I add it to Angular-Communities?</h6>
+      <p>Of course! We're looking forwards to adding your community.</p>
+    </div>
+    <div class="question">
+      <h6>Can Angular conferences/events like ngSpain, ngConf etc. be added too?</h6>
+      <p>
+        We're working on also adding all the Angular events! Would you like to help us out? You can
+        find more information
+        <a target="_blank" href="https://github.com/voidcosmos/angular-communities/issues/42"
+          >here</a
+        >.
+      </p>
+    </div>
+    <div class="question">
+      <h6>How do I add my community to Angular-Communities?</h6>
+      <p>
+        All you need to do is open a PR, filling in the required fields with the information about
+        your community. We'll review it, and if all is well, your community will be added! For more
+        info, see
+        <a target="_blank" href="https://github.com/voidcosmos/angular-communities"
+          >the Angular-Communities README.</a
+        >
+      </p>
+    </div>
+    <div class="question">
+      <h6>Can I participate in the Angular-Communities project?</h6>
+      <p>
+        Of course you can! Any help at all is very welcome. See the following question for
+        information on how to contribute.
+      </p>
+    </div>
+    <div class="question">
+      <h6>How can I contribute to the Angular-Communities project?</h6>
+      <p>
+        You can find all the information related to contributing
+        <a
+          target="_blank"
+          href="https://github.com/voidcosmos/angular-communities/blob/master/.github/CONTRIBUTING.md"
+          >here</a
+        >.
+      </p>
+    </div>
+  </div>
+</div>

src/app/pages/faq/faq.component.ts

@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-faq",
+  templateUrl: "./faq.component.html",
+  styleUrls: ["./faq.component.css"]
+})
+export class FaqComponent {}

src/app/pages/faq/faq.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FaqComponent } from './faq.component';
+import { FaqRoutingModule } from './faq-routing.module';
+
+const COMPONENTS = [FaqComponent];
+
+@NgModule({
+  declarations: [COMPONENTS],
+  imports: [FaqRoutingModule, FlexLayoutModule],
+  exports: [COMPONENTS],
+})
+export class FaqModule {}

src/app/pages/main/main-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { MainComponent } from './main.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MainComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MainRoutingModule {}

src/app/pages/main/main.component.html

@@ -14,6 +14,7 @@
   gdColumns.xs="100% auto"
   gdRows.xs="35% 65%"
   fxFlexFill
+  *ngIf="communitie$ | async as communities"
 >
   <ngcommunity-map
     gdArea="map"

src/app/pages/main/main.component.ts

@@ -1,7 +1,8 @@
 import { ActivatedRoute, Router } from '@angular/router';
-import { Community, Communities } from '@shared/interfaces';
+import { Community } from '@shared/interfaces';
 import { Component, Input } from '@angular/core';
-import { map } from 'rxjs/operators';
+import { map, withLatestFrom } from 'rxjs/operators';
+import { CommunityService } from '@shared/services';
 
 @Component({
   selector: 'ngcommunity-main',
@@ -10,11 +11,17 @@ import { map } from 'rxjs/operators';
 })
 export class MainComponent {
   @Input()
-  communities: Communities;
+  communitie$ = this.communityService.communitie$;
+  community$ = this.route.fragment.pipe(
+    withLatestFrom(this.communitie$),
+    map(([community, communities]) => communities[community]),
+  );
 
-  community$ = this.route.fragment.pipe(map(community => this.communities[community]));
-
-  constructor(private router: Router, private route: ActivatedRoute) {}
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private communityService: CommunityService,
+  ) {}
 
   changeCommunity(community?: Community) {
     this.router.navigate([], {

src/app/pages/main/main.module.ts

@@ -5,12 +5,13 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '@shared/shared.module';
 import { SidenavComponent } from './components/sidenav/sidenav.component';
 import { CommunityPreviewComponent } from './components/community-preview/community-preview.component';
+import { MainRoutingModule } from './main-routing.module';
 
 const COMPONENTS = [MainComponent, MapComponent, SidenavComponent, CommunityPreviewComponent];
 
 @NgModule({
   declarations: COMPONENTS,
-  imports: [SharedModule, GoogleMapsModule],
+  imports: [MainRoutingModule, SharedModule, GoogleMapsModule],
   providers: [],
   exports: COMPONENTS,
 })

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

@@ -6,9 +6,10 @@
         alt="Angular communities logo"
         src="assets/images/angular-communities-logo_md.png"
       />
-      <span>ANGULAR COMMUNITIES</span>
+      <a routerLink="">ANGULAR COMMUNITIES</a>
     </div>
     <div>
+      <a class="menu" routerLink="/faq">FAQ</a>
       <a
         href="https://www.github.com/voidcosmos/angular-communities"
         target="_blank"

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

@@ -2,6 +2,11 @@ img {
   width: 40px;
   height: 40px;
 }
+
+a {
+  padding: 12px 10px;
+}
+
 .social-button--github {
   margin: 0px;
   width: 40px;

src/app/shared/services/community.service.ts

@@ -2,7 +2,7 @@ import { Communities } from '@shared/interfaces';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, shareReplay } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -12,11 +12,12 @@ export class CommunityService {
 
   constructor(private httpClient: HttpClient) {}
 
-  get communities(): Observable<Communities> {
-    return this.httpClient
-      .get<Communities>(this.JSON_COMMUNITIES)
-      .pipe(map(communities => this.normalizeCommunities(communities)));
-  }
+  communitie$: Observable<Communities> = this.httpClient
+    .get<Communities>(this.JSON_COMMUNITIES)
+    .pipe(
+      map(communities => this.normalizeCommunities(communities)),
+      shareReplay(1),
+    );
 
   private normalizeCommunities(communities: Communities): Communities {
     const communitiesNormalized = Object.entries(communities)

src/app/shared/shared.module.ts

@@ -1,6 +1,5 @@
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CommonModule } from '@angular/common';
 import { CommunityItemComponent } from './components/community-item/community-item.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -23,9 +22,9 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { NgModule } from '@angular/core';
 import { ScrollingModule } from '@angular/cdk/scrolling';
+import { RouterModule } from '@angular/router';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 
-const CORE_MODULES = [BrowserAnimationsModule, CommonModule, FormsModule, ReactiveFormsModule];
 
 const COMPONENTS = [FooterComponent, HeaderComponent, CommunityItemComponent];
 
@@ -51,7 +50,7 @@ const MATERIAL_MODULES = [
 
 @NgModule({
   declarations: COMPONENTS,
-  imports: [MATERIAL_MODULES, CORE_MODULES, FlexLayoutModule],
-  exports: [COMPONENTS, MATERIAL_MODULES, CORE_MODULES, FlexLayoutModule],
+  imports: [MATERIAL_MODULES, CommonModule, ReactiveFormsModule, FlexLayoutModule, RouterModule],
+  exports: [COMPONENTS, MATERIAL_MODULES, CommonModule, ReactiveFormsModule, FlexLayoutModule],
 })
 export class SharedModule {}