Skip to content

Commit e8517bc

Browse files
FawzyMokhtarFawzyMokhtar
committed
Reconstruct layout-structure
Apply styling to angular host-tags too to fix flex-layout issue Use in memory documentation-versions data instead of json data
1 parent 113d9da commit e8517bc

31 files changed

Lines changed: 327 additions & 77 deletions

‎src/app/shared/components/post-article/post-article.component.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
<!-- Header -->
2+
<app-post-header [title]="title"></app-post-header>
3+
<!-- End Header -->
4+
15
<article id="post-article">
26
<ng-content select=".article"></ng-content>
37
</article>

‎src/app/shared/components/post-article/post-article.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { Component, OnInit } from "@angular/core";
1+
import {Component, OnInit, Input} from "@angular/core";
22

33
@Component({
44
selector: "app-post-article",
55
templateUrl: "./post-article.component.html",
66
styleUrls: ["./post-article.component.sass"]
77
})
88
export class PostArticleComponent {
9+
@Input() title: string;
910
}

‎src/app/shared/components/post-navigator/post-navigator.component.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1-
<p>post-navigator works!</p>
1+
<div class="doc-prev-next">
2+
<a *ngIf="previous" [routerLink]="previous.route" class="doc-prev button">
3+
<span>← </span>
4+
<span>{{previous.title}}</span>
5+
</a>
6+
<a *ngIf="next" [routerLink]="next.route" class="doc-next button">
7+
<span>{{next.title}}</span>
8+
<span> →</span>
9+
</a>
10+
</div>

‎src/app/shared/components/post-navigator/post-navigator.component.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
import {Component, OnInit} from "@angular/core";
1+
import {Component, Input} from "@angular/core";
2+
import {IPost} from "../../models";
23

34
@Component({
45
selector: "app-post-navigator",
56
templateUrl: "./post-navigator.component.html",
67
styleUrls: ["./post-navigator.component.sass"]
78
})
8-
export class PostNavigatorComponent {}
9+
export class PostNavigatorComponent {
10+
@Input() previous: IPost;
11+
@Input() next: IPost;
12+
}

‎src/app/shared/components/post-section-navigator/post-section-navigator.component.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
<div class="section-nav">
2-
<nav class="navbar">
3-
<div class="nav-item">
4-
<ng-content select=".sections"></ng-content>
5-
</div>
6-
</nav>
7-
</div>
1+
<nav class="navbar">
2+
<div class="nav-item">
3+
<a *ngFor="let section of sections" [routerLink]="route" [fragment]="section.id"
4+
class="nav-link">{{section.title}}</a>
5+
</div>
6+
</nav>

‎src/app/shared/components/post-section-navigator/post-section-navigator.component.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
import {Component, OnInit} from "@angular/core";
1+
import {Component, Input} from "@angular/core";
2+
import {IPostSectionItem} from "../../models";
23

34
@Component({
45
selector: "app-post-section-navigator",
56
templateUrl: "./post-section-navigator.component.html",
67
styleUrls: ["./post-section-navigator.component.sass"]
78
})
8-
export class PostSectionNavigatorComponent {}
9+
export class PostSectionNavigatorComponent {
10+
@Input() route: string;
11+
@Input() sections: IPostSectionItem[];
12+
}

‎src/app/shared/containers/post/post.component.html‎

Lines changed: 21 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,31 @@
1-
<!-- Content Wrapper -->
2-
<div class="content-wrapper">
1+
<!-- Post Wrapper -->
2+
<div class="post-wrapper">
33

4+
<div class="post">
5+
<!-- Article -->
6+
<app-post-article [title]="post.title">
47

5-
<!-- Header -->
6-
<app-post-header [title]="title"></app-post-header>
7-
<!-- End Header -->
8+
<!-- Get article from post container -->
9+
<ng-container class="article">
810

9-
<!-- Article -->
10-
<app-post-article>
11+
<!-- Pass article to article component -->
12+
<ng-content select=".article"></ng-content>
1113

12-
<!-- Get article from post container -->
13-
<ng-container class="article">
14+
</ng-container>
1415

15-
<!-- Pass article to article component -->
16-
<ng-content select=".article"></ng-content>
16+
</app-post-article>
17+
<!-- End Article -->
1718

18-
</ng-container>
1919

20-
</app-post-article>
21-
<!-- End Article -->
20+
<!-- Section Navigator -->
21+
<app-post-section-navigator *ngIf="post.sections && post.sections.length" [route]="post.route"
22+
[sections]="post.sections"></app-post-section-navigator>
23+
<!-- End Section Navigator -->
24+
</div>
2225

23-
<!-- Section Nav -->
24-
<app-post-section-navigator>
25-
26-
<!-- Get sections from post container -->
27-
<ng-container class="sections">
28-
29-
<!-- Pass sections to post section navigator component -->
30-
<ng-content select=".sections"></ng-content>
31-
32-
</ng-container>
33-
34-
</app-post-section-navigator>
35-
<!-- End Section Nav -->
26+
<!-- Post Navigator -->
27+
<app-post-navigator [previous]="previous" [next]="next"></app-post-navigator>
28+
<!-- End Post Navigator -->
3629

3730
</div>
38-
<!-- Content Wrapper -->
39-
40-
<!-- Post Nav -->
41-
<app-post-navigator></app-post-navigator>
42-
<!-- End Post Nav -->
31+
<!-- Post Wrapper -->

‎src/app/shared/containers/post/post.component.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import {Component, OnInit, Input} from "@angular/core";
1+
import {Component, Input} from "@angular/core";
2+
import {IPost} from "../../models";
23

34
@Component({
45
selector: "app-post",
56
templateUrl: "./post.component.html",
67
styleUrls: ["./post.component.sass"]
78
})
89
export class PostComponent {
9-
@Input() title: string;
1010
@Input() route: string;
11+
@Input() post: IPost;
12+
@Input() previous: IPost;
13+
@Input() next: IPost;
1114
}

‎src/app/shared/data/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./versions.data";

‎src/app/shared/data/versions.data.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {IVersion} from "../models";
2+
3+
/**
4+
* An enum that contains all documentation versions.
5+
*/
6+
enum VERSIONS {
7+
"1.0.0" = "v1.0.0"
8+
}
9+
10+
/**
11+
* The base route for the documentation version modules.
12+
*/
13+
const baseDocsRoute = "/docs";
14+
15+
/**
16+
* Resolves the given post route to a full route relative to its version.
17+
* @param version The documentation version for which the post belongs.
18+
* @param postRoute The post route to be resolved to a full route relative to its version.
19+
*/
20+
function resolveRoute(version: VERSIONS, postRoute: string): string {
21+
return `${baseDocsRoute}/${version}/${postRoute}`;
22+
}
23+
24+
/**
25+
* An array of all documentation versions.
26+
*/
27+
export const Versions: IVersion[] = [
28+
{
29+
id: "1.0.0",
30+
version: "v1.0.0",
31+
groups: [
32+
{
33+
title: "Introduction",
34+
posts: [
35+
{
36+
id: "getting-started",
37+
title: "Getting Started",
38+
route: resolveRoute(VERSIONS["1.0.0"], "getting-started"),
39+
sections: [
40+
{
41+
id: "section1",
42+
title: "Section 1"
43+
}
44+
]
45+
}
46+
]
47+
}
48+
]
49+
}
50+
];

0 commit comments

Comments
 (0)