Merge pull request #36 from sourcefuse/GH-20-B

Documentation of Cloning Boilerplate

projects/arc-docs/src/app/docs/docs-routing.module.ts

@@ -14,6 +14,11 @@ const routes: Routes = [
             m => m.GettingStartedModule,
           ),
       },
+      {
+        path: 'guide',
+        loadChildren: () =>
+          import('./guide/guide.module').then(m => m.GuideModule),
+      },
     ],
   },
 ];

projects/arc-docs/src/app/docs/docs.component.html

@@ -1,4 +1,3 @@
-
 <nb-layout>
   <nb-layout-header fixed class="border-basic-bottom">
     <div class="header-wrapper">

projects/arc-docs/src/app/docs/guide/components/backend-integration-doc/backend-integration-doc.component.html

@@ -0,0 +1 @@
+<p>backend-integration-doc works!</p>

projects/arc-docs/src/app/docs/guide/components/backend-integration-doc/backend-integration-doc.component.spec.ts

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

projects/arc-docs/src/app/docs/guide/components/backend-integration-doc/backend-integration-doc.component.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-backend-integration-doc',
+  templateUrl: './backend-integration-doc.component.html',
+  styleUrls: ['./backend-integration-doc.component.scss'],
+})
+export class BackendIntegrationDocComponent {}

projects/arc-docs/src/app/docs/guide/components/clone-boilerplate-doc/clone-boilerplate-doc.component.scss

@@ -0,0 +1,51 @@
+.section {
+  margin-bottom: 20px;
+}
+
+.section-title {
+  margin-bottom: 10px;
+}
+
+.explore {
+  a {
+    color: #19a5ff;
+    text-decoration: none;
+  }
+}
+
+.cli-wrapper {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  .cli {
+    color: #fff;
+    font-family: monospace;
+    align-items: baseline;
+    border-radius: 2px;
+    white-space: pre-wrap;
+    .cli-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: #676767;
+      padding: 1px 10px;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+
+      h5 {
+        margin: 0;
+        font-size: 0.8rem;
+      }
+    }
+    .cli-content {
+      background: black;
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+      text-align: left;
+      padding: 15px 5px;
+      pre {
+        margin: 0;
+        display: inline-block !important;
+      }
+    }
+  }
+}

projects/arc-docs/src/app/docs/guide/components/clone-boilerplate-doc/clone-boilerplate-doc.component.spec.ts

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

projects/arc-docs/src/app/docs/guide/components/clone-boilerplate-doc/clone-boilerplate-doc.component.ts

@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-clone-boilerplate-doc',
+  templateUrl: './clone-boilerplate-doc.component.html',
+  styleUrls: ['./clone-boilerplate-doc.component.scss'],
+})
+export class CloneBoilerplateDocComponent {
+  yourDataList: object[] = [
+    {
+      lable: 'Navigate to Desired Directory:',
+      listData: 'cd path/to/your/directory',
+    },
+    {
+      lable: 'Clone the Repository:',
+      listData: 'git clone https://github.com/sourcefuse/angular-boilerplate',
+    },
+    {
+      lable: 'Navigate into the Cloned Directory',
+      listData: 'cd your-boilerplate-project-name',
+    },
+  ];
+  addItem(newItem: object) {
+    this.yourDataList.push(newItem);
+  }
+}

projects/arc-docs/src/app/docs/guide/guide-routing.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {BackendIntegrationDocComponent} from './components/backend-integration-doc/backend-integration-doc.component';
+import {CloneBoilerplateDocComponent} from './components/clone-boilerplate-doc/clone-boilerplate-doc.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'clone',
+    pathMatch: 'full',
+  },
+  {
+    path: 'clone',
+    component: CloneBoilerplateDocComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GuideRoutingModule {}

projects/arc-docs/src/app/docs/guide/guide.module.ts

@@ -0,0 +1,14 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {GuideRoutingModule} from './guide-routing.module';
+import {CloneBoilerplateDocComponent} from './components/clone-boilerplate-doc/clone-boilerplate-doc.component';
+import {BackendIntegrationDocComponent} from './components/backend-integration-doc/backend-integration-doc.component';
+import {ThemeModule} from '@project-lib/theme/theme.module';
+import {CliWrapperComponent} from '@project-lib/components/cli-wrapper/cli-wrapper.component';
+
+@NgModule({
+  declarations: [CloneBoilerplateDocComponent, BackendIntegrationDocComponent],
+  imports: [CommonModule, GuideRoutingModule, ThemeModule, CliWrapperComponent],
+})
+export class GuideModule {}

projects/arc-lib/src/lib/components/cli-wrapper/cli-wrapper.component.html

@@ -0,0 +1,13 @@
+
+<div class="cli-wrapper">
+  <div class="cli">
+    <div class="cli-header">
+      <h5>bash</h5>
+    </div>
+    <div class="cli-content">
+      <code>
+        <code>{{ command }}</code>
+      </code>
+    </div>
+  </div>
+</div>

projects/arc-lib/src/lib/components/cli-wrapper/cli-wrapper.component.scss

@@ -0,0 +1,36 @@
+.cli-wrapper {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  .cli {
+    color: #fff;
+    font-family: monospace;
+    align-items: baseline;
+    border-radius: 2px;
+    white-space: pre-wrap;
+    .cli-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: #676767;
+      padding: 1px 10px;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+
+      h5 {
+        margin: 0;
+        font-size: 0.8rem;
+      }
+    }
+    .cli-content {
+      background: black;
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+      text-align: left;
+      padding: 15px 5px;
+      pre {
+        margin: 0;
+        display: inline-block !important;
+      }
+    }
+  }
+}

projects/arc-lib/src/lib/components/cli-wrapper/cli-wrapper.component.ts

@@ -0,0 +1,13 @@
+import {Component, Input} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+@Component({
+  selector: 'lib-cli-wrapper',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './cli-wrapper.component.html',
+  styleUrls: ['./cli-wrapper.component.scss'],
+})
+export class CliWrapperComponent {
+  @Input() command: string; // Define an input property to receive command data
+}

projects/arc-lib/src/lib/components/header /header.component.html

@@ -0,0 +1,18 @@
+<div class="nav-container">
+  <div class="header-container">
+    <div class="logo-container">
+      <nb-icon
+        icon="menu-outline"
+        class="cursor-pointer menu-icon"
+        (click)="toggle()"
+      ></nb-icon>
+      <a
+        class="logo"
+        href="javascript:void(0)"
+        (click)="navigateHome('/main/home')"
+      >
+        <img src="../../assets/images/home/ARC_logo.png" alt="logo" />
+      </a>
+    </div>
+  </div>
+</div>

projects/arc-lib/src/lib/components/header /header.component.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use '../../theme/styles/variables' as *;
+@use '../.././../../../arc/src/styles.scss' as *;
+@use '../../theme/styles/mixins' as *;
+
+.nav-container {
+  display: flex;
+  justify-content: space-between;
+  width: 100% !important;
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+  width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
+  user-select: none;
+}
+
+nb-action {
+  height: auto;
+  display: flex;
+  align-content: center;
+}
+
+nb-user {
+  cursor: pointer;
+}
+
+.hi {
+  text-align: center;
+}

projects/arc-lib/src/lib/components/header/header.component.ts

@@ -19,7 +19,7 @@ import {Location} from '@angular/common';
 export class HeaderComponent extends RouteComponentBaseDirective {
   toggleFooter = false;
   loggedInUserDM: LoggedInUserDM = new LoggedInUserDM();
-  userMenu: NbMenuItem[] = [{title: 'Log out', data: 'logout'}];
+
   constructor(
     override readonly route: ActivatedRoute,
     override readonly location: Location,
@@ -41,13 +41,4 @@ export class HeaderComponent extends RouteComponentBaseDirective {
     this.sidebarService.toggle(true, 'right');
     this.toggleFooter = !this.toggleFooter;
   }
-
-  ngOnInit(): void {
-    this.authService
-      .currentUser()
-      .pipe(takeUntil(this._destroy$))
-      .subscribe(usr => {
-        this.loggedInUserDM = usr;
-      });
-  }
 }

projects/arc/src/app/main/home/home.component.scss

@@ -38,7 +38,7 @@
         margin-bottom: 10px;
       }
     }
-  } 
+  }
   .row {
     width: 100%;
     display: flex;

projects/arc/src/styles.scss

@@ -289,30 +289,27 @@ nb-toast.status-success .icon-container {
   }
 }
 
-
 @media (max-width: 576px) {
   .card-row {
     padding: 30px 20px;
-     .sign-in-title {
-    h2 {
-      font-size: 36px;
-      margin: 50px 0 10px 0;
-    }
-    h3 {
-      font-size: 18px;
-      color: #525252;
-      margin: 0;
+    .sign-in-title {
+      h2 {
+        font-size: 36px;
+        margin: 50px 0 10px 0;
+      }
+      h3 {
+        font-size: 18px;
+        color: #525252;
+        margin: 0;
+      }
+      p {
+        font-size: 14px;
+        margin: 0 0 30px 0;
+      }
     }
-    p {
-      font-size: 14px;
-      margin: 0 0 30px 0;
-    }
-  }
   }
 
-.main-wrapper {
-  padding-top: 0px !important;
-}
-
+  .main-wrapper {
+    padding-top: 0px !important;
+  }
 }
-