show first entry
This commit is contained in:
11
frontend/src/app/routes/home/home.component.html
Normal file
11
frontend/src/app/routes/home/home.component.html
Normal file
@ -0,0 +1,11 @@
|
||||
<p>Welcome to by little blog:</p>
|
||||
<section class="grid gap-5 sm:grid-cols-2 2xl:grid-cols-3">
|
||||
<button
|
||||
*ngFor="let post of posts()"
|
||||
class="p-5 flex flex-col items-start rounded-s bg-white drop-shadow-md hover:drop-shadow-xl"
|
||||
[routerLink]="`/post/${post.id}`"
|
||||
>
|
||||
<h2 class="text-xl">{{ post.title }}</h2>
|
||||
<p><strong>TL;DR; </strong>{{ post.tldr }}</p>
|
||||
</button>
|
||||
</section>
|
23
frontend/src/app/routes/home/home.component.spec.ts
Normal file
23
frontend/src/app/routes/home/home.component.spec.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HomeComponent } from './home.component';
|
||||
|
||||
describe('HomeComponent', () => {
|
||||
let component: HomeComponent;
|
||||
let fixture: ComponentFixture<HomeComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [HomeComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(HomeComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
19
frontend/src/app/routes/home/home.component.ts
Normal file
19
frontend/src/app/routes/home/home.component.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { Component, inject, OnInit, Signal } from '@angular/core';
|
||||
import { PostsService } from '../../shared/services/posts.service';
|
||||
import { NgForOf } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { Post } from '../../shared/services/interfaces/post';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
imports: [NgForOf, RouterLink],
|
||||
standalone: true,
|
||||
templateUrl: './home.component.html',
|
||||
})
|
||||
export class HomeComponent {
|
||||
private postsService = inject(PostsService);
|
||||
|
||||
get posts() {
|
||||
return this.postsService.getPosts();
|
||||
}
|
||||
}
|
7
frontend/src/app/routes/post/post.component.html
Normal file
7
frontend/src/app/routes/post/post.component.html
Normal file
@ -0,0 +1,7 @@
|
||||
<h2 class="text-3xl">{{ post()?.title }}</h2>
|
||||
<p class="mb-5 italic text-sm">TL;DR; {{ post()?.tldr }}</p>
|
||||
|
||||
<app-markdown
|
||||
class="todo"
|
||||
[markdown]="post()?.content || 'this post is empty'"
|
||||
/>
|
23
frontend/src/app/routes/post/post.component.spec.ts
Normal file
23
frontend/src/app/routes/post/post.component.spec.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PostComponent } from './post.component';
|
||||
|
||||
describe('PostComponent', () => {
|
||||
let component: PostComponent;
|
||||
let fixture: ComponentFixture<PostComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [PostComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(PostComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
19
frontend/src/app/routes/post/post.component.ts
Normal file
19
frontend/src/app/routes/post/post.component.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { Component, inject, Input } from '@angular/core';
|
||||
import { PostsService } from '../../shared/services/posts.service';
|
||||
import { JsonPipe, NgIf } from '@angular/common';
|
||||
import { MarkdownComponent } from '../../components/markdown/markdown.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-post',
|
||||
imports: [MarkdownComponent],
|
||||
standalone: true,
|
||||
templateUrl: './post.component.html',
|
||||
})
|
||||
export class PostComponent {
|
||||
private posts = inject(PostsService);
|
||||
@Input() id!: string;
|
||||
|
||||
get post() {
|
||||
return this.posts.getPost(parseInt(this.id));
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user