= new Subject();
+
+ project: Project = {
+ slug: '',
+ title: '',
+ date: '',
+ category: '',
+ content: '',
+ };
+
+ constructor(
+ private route: ActivatedRoute,
+ private projectsService: ProjectsService
+ ) { }
+
+ ngOnInit(): void {
+ let id: string;
+ this.route.paramMap.subscribe((params) => {
+ id = params.get('id');
+ });
+
+ this.projectsService.getProject(id);
+
+ this.projectsService.currentProject$
+ .pipe(takeUntil(this._unsubscribe$))
+ .subscribe((result: Project) => {
+ if (!!result) {
+ this.project = result;
+ }
+ });
+
+ }
+
+ ngOnDestroy(): void {
+ this._unsubscribe$.next(false);
+ this._unsubscribe$.complete();
+ }
+
+}
diff --git a/src/app/projects/projects-routing.module.ts b/src/app/projects/projects-routing.module.ts
new file mode 100644
index 0000000..74cf277
--- /dev/null
+++ b/src/app/projects/projects-routing.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ProjectComponent } from './project/project.component';
+import { ProjectsComponent } from './projects.component';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: ProjectsComponent
+ },
+ {
+ path: ':id',
+ component: ProjectComponent
+ }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class ProjectsRoutingModule {}
diff --git a/src/app/projects/projects.component.html b/src/app/projects/projects.component.html
index 885859a..4a04f43 100644
--- a/src/app/projects/projects.component.html
+++ b/src/app/projects/projects.component.html
@@ -1 +1,8 @@
-projects works!
+Projects on git
+These are my projects as can be found on my gitlab. Mainly my programming projects that are quality enough for me to be happy for the world to see them. There are more in the works but they are currently private.
+
+Projects of a personal nature
+This is (will be) a summary of my personal projects be they my homelab, general electronics projects, or anything else.
+
+
+
\ No newline at end of file
diff --git a/src/app/projects/projects.component.ts b/src/app/projects/projects.component.ts
index 1172d9c..6da1e8b 100644
--- a/src/app/projects/projects.component.ts
+++ b/src/app/projects/projects.component.ts
@@ -1,18 +1,37 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs/internal/Subject';
+import { takeUntil } from 'rxjs/operators';
import { NavService } from '../nav/nav.service';
import { Pages } from '../shared/models/pages.model';
+import { Project } from '../shared/models/project.model';
+import { ProjectsService } from './projects.service';
@Component({
selector: 'app-projects',
templateUrl: './projects.component.html',
styleUrls: ['./projects.component.scss']
})
-export class ProjectsComponent implements OnInit {
+export class ProjectsComponent implements OnInit, OnDestroy {
+ _unsubscribe$: Subject = new Subject();
- constructor(private navService:NavService) { }
+ uncategorizedProjects: Array;
+
+ constructor(private navService: NavService, private projectsService: ProjectsService) { }
ngOnInit(): void {
this.navService.setPageTitle(Pages.PROJECTS);
+
+ this.projectsService.allProjects$
+ .pipe(takeUntil(this._unsubscribe$))
+ .subscribe((result: Project[]) => {
+ this.uncategorizedProjects = result;
+ });
+ this.projectsService.getProjects();
+ }
+
+ ngOnDestroy(): void {
+ this._unsubscribe$.next(false);
+ this._unsubscribe$.complete();
}
}
diff --git a/src/app/projects/projects.module.ts b/src/app/projects/projects.module.ts
new file mode 100644
index 0000000..bd6f109
--- /dev/null
+++ b/src/app/projects/projects.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ProjectCardComponent } from './project-card/project-card.component';
+import { ProjectComponent } from './project/project.component';
+import { ProjectsComponent } from './projects.component';
+import { ProjectsRoutingModule } from './projects-routing.module';
+
+@NgModule({
+ declarations: [ProjectsComponent, ProjectCardComponent, ProjectComponent],
+ imports: [
+ CommonModule,
+ ProjectsRoutingModule
+ ],
+ providers: []
+})
+export class ProjectsModule { }
diff --git a/src/app/projects/projects.service.spec.ts b/src/app/projects/projects.service.spec.ts
new file mode 100644
index 0000000..96c6dcc
--- /dev/null
+++ b/src/app/projects/projects.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProjectsService } from './projects.service';
+
+describe('ProjectsService', () => {
+ let service: ProjectsService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(ProjectsService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/projects/projects.service.ts b/src/app/projects/projects.service.ts
new file mode 100644
index 0000000..fc374fb
--- /dev/null
+++ b/src/app/projects/projects.service.ts
@@ -0,0 +1,110 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { Project } from '../shared/models/project.model';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ProjectsService {
+
+ private _allProjects = new BehaviorSubject>([]);
+ readonly allProjects$ = this._allProjects.asObservable();
+
+ private set allProjects(projects: Array) {
+ this._allProjects.next(projects);
+ }
+ private get allProjects(): Array {
+ return this._allProjects.getValue();
+ }
+
+ private _currentProject = new BehaviorSubject(null);
+ readonly currentProject$ = this._currentProject.asObservable();
+
+ private set currentProject(project: Project) {
+ this._currentProject.next(project);
+ }
+ private get currentProject(): Project {
+ return this._currentProject.getValue();
+ }
+
+ private _apiErrored = new BehaviorSubject(false);
+ readonly apiErrored$ = this._apiErrored.asObservable();
+
+ private set apiErrored(errored: boolean) {
+ this._apiErrored.next(errored);
+ }
+ private get apiErrored(): boolean {
+ return this._apiErrored.getValue();
+ }
+
+ /**
+ * I am actively avoiding any kind of environment management, this is a very basic site and currently this is the only api call.
+ */
+
+ private PROJECT_API_URL = "https://cms.inkletblot.com"
+
+ constructor(private http: HttpClient, private router: Router) { }
+
+ httpOptions = {
+ headers: new HttpHeaders({
+ 'Content-Type': 'text/plain'
+ })
+ };
+
+ getProjects(): void {
+ this.http
+ .get(`${this.PROJECT_API_URL}/posts`, this.httpOptions)
+ .subscribe(
+ (response: Project[]) => {
+ if (response) {
+ // using text/plain so as to not get the preflight options request
+ // as such : Project[] does not work as expected and objects must be parsed.
+ this.allProjects = response;
+ // filter out different categories here currently only one
+ }
+ },
+ (error) => {
+ this.apiErrored = true;
+ }
+ );
+ }
+
+ getSingleProject(id: string): void {
+ this.http
+ .get(`${this.PROJECT_API_URL}/post/${id}`, this.httpOptions)
+ .subscribe(
+ (response: Project) => {
+ if (response) {
+ // using text/plain so as to not get the preflight options request
+ // as such : Project[] does not work as expected and objects must be parsed.
+ this.currentProject = response;
+ // filter out different categories here currently only one
+ }
+ },
+ (error) => {
+ this.apiErrored = true;
+ this.router.navigate(['not-found'])
+ }
+ );
+ }
+
+ /**
+ * This is not very efficient code but I'm not planning on having that many projects and (if this turns into a blog) blog posts
+ * If this does become a general blog, then I will make this a bit more efficient.
+ * @param id slug of project to get
+ */
+ getProject(id: string): void {
+ let found = false;
+ this.allProjects.forEach((project) => {
+ if (project.slug === id) {
+ found = true;
+ this.currentProject = project;
+ }
+ })
+ if (!found) {
+ this.getSingleProject(id)
+ }
+ }
+}
diff --git a/src/app/shared/models/pages.model.ts b/src/app/shared/models/pages.model.ts
index da77482..0619761 100644
--- a/src/app/shared/models/pages.model.ts
+++ b/src/app/shared/models/pages.model.ts
@@ -6,5 +6,6 @@ export enum Pages {
PROJECTS = 'projects',
GALLERY = 'gallery',
LINKS = 'links',
- PET = 'pet'
+ PET = 'pet',
+ PAGE_404 = 'not-found'
}
\ No newline at end of file
diff --git a/src/app/shared/models/project.model.ts b/src/app/shared/models/project.model.ts
new file mode 100644
index 0000000..522b454
--- /dev/null
+++ b/src/app/shared/models/project.model.ts
@@ -0,0 +1,7 @@
+export interface Project {
+ slug: string,
+ title: string,
+ date: string,
+ category: string,
+ content: string
+}
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 9e71b2c..e5950b8 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -10,4 +10,94 @@ body {
font-family: Roboto, 'Helvetica Neue', sans-serif;
background-color: colors.$inklets-color-black;
color: colors.$inklets-color-white;
+}
+
+/*
+
+ Codehilite styles for api content
+
+*/
+pre { line-height: 125%; }
+td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.codehilite .hll { background-color: #ffffcc }
+.codehilite { background: #000000; padding: 5px; }
+.codehilite .c { color: #408080; font-style: italic } /* Comment */
+.codehilite .err { border: 1px solid #FF0000 } /* Error */
+.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
+.codehilite .o { color: #666666 } /* Operator */
+.codehilite .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
+.codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */
+.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */
+.codehilite .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
+.codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */
+.codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */
+.codehilite .gd { color: #A00000 } /* Generic.Deleted */
+.codehilite .ge { font-style: italic } /* Generic.Emph */
+.codehilite .gr { color: #FF0000 } /* Generic.Error */
+.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.codehilite .gi { color: #00A000 } /* Generic.Inserted */
+.codehilite .go { color: #888888 } /* Generic.Output */
+.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.codehilite .gs { font-weight: bold } /* Generic.Strong */
+.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.codehilite .gt { color: #0044DD } /* Generic.Traceback */
+.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
+.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.codehilite .kt { color: #B00040 } /* Keyword.Type */
+.codehilite .m { color: #666666 } /* Literal.Number */
+.codehilite .s { color: #BA2121 } /* Literal.String */
+.codehilite .na { color: #7D9029 } /* Name.Attribute */
+.codehilite .nb { color: #008000 } /* Name.Builtin */
+.codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */
+.codehilite .no { color: #880000 } /* Name.Constant */
+.codehilite .nd { color: #AA22FF } /* Name.Decorator */
+.codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */
+.codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
+.codehilite .nf { color: #0000FF } /* Name.Function */
+.codehilite .nl { color: #A0A000 } /* Name.Label */
+.codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
+.codehilite .nv { color: #19177C } /* Name.Variable */
+.codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
+.codehilite .mb { color: #666666 } /* Literal.Number.Bin */
+.codehilite .mf { color: #666666 } /* Literal.Number.Float */
+.codehilite .mh { color: #666666 } /* Literal.Number.Hex */
+.codehilite .mi { color: #666666 } /* Literal.Number.Integer */
+.codehilite .mo { color: #666666 } /* Literal.Number.Oct */
+.codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
+.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
+.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
+.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
+.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
+.codehilite .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
+.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
+.codehilite .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
+.codehilite .sx { color: #008000 } /* Literal.String.Other */
+.codehilite .sr { color: #BB6688 } /* Literal.String.Regex */
+.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
+.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
+.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
+.codehilite .fm { color: #0000FF } /* Name.Function.Magic */
+.codehilite .vc { color: #19177C } /* Name.Variable.Class */
+.codehilite .vg { color: #19177C } /* Name.Variable.Global */
+.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
+.codehilite .vm { color: #19177C } /* Name.Variable.Magic */
+.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */
+
+
+* a {
+ text-decoration: none;
+ color: colors.$inklets-color-fg;
+}
+
+* a:hover {
+ color: colors.$inklets-color-highlight-fg;
}
\ No newline at end of file