blog-blueprint 0.0.2

package/BlueprintTemplate/src/app/app.config.ts

@@ -0,0 +1,16 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideMarkdown } from 'ngx-markdown';
+import { routes } from './app.routes';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import { provideHttpClient } from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes), provideClientHydration(withEventReplay()),
+    provideMarkdown(),
+    provideHttpClient()
+  ]
+};

package/BlueprintTemplate/src/app/app.html

@@ -0,0 +1,36 @@
+<app-menu
+  [menuItems]="menuItems"
+  [logoUrl]="logoUrl"
+  [logoRouter]="logoRouter"
+  [direction]="menuDirection">
+</app-menu>
+
+<div class="main-container">
+
+  <!-- Loading -->
+  <div *ngIf="(pageStatus$ | async) === 'loading'" class="loading-wrapper main-page">
+    <app-loading></app-loading>
+  </div>
+
+  <!-- Ready -->
+  <div *ngIf="(pageStatus$ | async) === 'ready'" class="content main-page">
+      <router-outlet></router-outlet>
+  </div>
+
+  <!-- Error -->
+  <div *ngIf="(pageStatus$ | async) === 'error'" class="error-page  main-page">
+    <div class="page-content">
+      Error: {{ (errorDetails$ | async)?.message }}
+    </div>
+  </div>
+
+  <app-footer
+    productName="AWS Edu"
+    tagline="Build practical cloud & software knowledge."
+    companyName="TruongAn"
+    [quickLinks]="footerLinks"
+    [contact]="footerContact">
+  </app-footer>
+
+  <app-scroll-to-top></app-scroll-to-top>
+</div>

package/BlueprintTemplate/src/app/app.routes.server.ts

@@ -0,0 +1,8 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '**',
+    renderMode: RenderMode.Prerender
+  }
+];

package/BlueprintTemplate/src/app/app.routes.ts

@@ -0,0 +1,11 @@
+import { Routes } from '@angular/router';
+import { About } from './features/about/about';
+import { LessonDetail } from './features/lesson-detail/lesson-detail';
+import { LessonList } from './features/lesson-list/lesson-list';
+
+export const routes: Routes = [
+  { path: '', component: LessonList },
+  { path: 'about', component: About },
+  { path: 'lessons/:id', component: LessonDetail },
+  { path: '**', redirectTo: '' }
+];

package/BlueprintTemplate/src/app/app.scss

@@ -0,0 +1,71 @@
+:host {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  margin: 0;
+  height: 100vh; /* Full viewport height */
+}
+
+app-menu {
+  position: sticky; /* Make the menu stick to the top without overlaying content */
+  top: 0;
+  left: 0;
+  width: 100%; /* Full width */
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: shadow for separation */
+  z-index: 2; /* Ensure the menu stays above other content */
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow-y: auto; /* Allow scrolling for the main content */
+}
+
+.content,
+.loading-wrapper,
+.error-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+app-footer {
+  flex-shrink: 0; /* Prevent footer from shrinking */
+}
+
+.loading-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-y: auto; /* Scroll vertically when content overflows */
+  overflow-x: hidden; /* Hide horizontal scrollbar */
+
+  /* Custom Scrollbar for WebKit-based Browsers (Chrome, Safari) */
+  &::-webkit-scrollbar {
+    width: 6px; /* Thinner scrollbar */
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1; /* Light gray background for the track */
+    border-radius: 10px; /* Rounded corners for the track */
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for a polished look */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #888; /* Neutral gray color for the thumb */
+    border-radius: 10px; /* Rounded corners for the thumb */
+    border: 2px solid #f1f1f1; /* Creates a gap between the thumb and track */
+    transition: background 0.3s; /* Smooth transition for hover effect */
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #555; /* Darker gray for the thumb on hover */
+  }
+
+  /* For Firefox (thinner scrollbar) */
+  scrollbar-width: thin; /* Makes the scrollbar thin in Firefox */
+  scrollbar-color: #888 #f1f1f1; /* Sets thumb and track colors in Firefox */
+}

package/BlueprintTemplate/src/app/app.ts

@@ -0,0 +1,50 @@
+import { CommonModule } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { FooterComponent, FooterLink, LoadingComponent, MenuComponent, MenuDirection, ScrollToTopComponent } from 'angular-dumb-lib';
+import { Observable } from 'rxjs';
+import { PageError, PagesFacade, PageStatus } from './shared/facades/pages.facade';
+
+@Component({
+  selector: 'app-root',
+  imports: [
+    RouterOutlet, 
+    MenuComponent,
+    ScrollToTopComponent,
+    FooterComponent,
+    CommonModule,
+    LoadingComponent
+  ],
+  templateUrl: './app.html',
+  styleUrl: './app.scss'
+})
+export class App {
+  pageStatus$: Observable<PageStatus>;
+  errorDetails$: Observable<PageError | null>;
+
+  public menuDirection: MenuDirection = MenuDirection.horizontal;
+  public logoUrl: string = 'favicon.ico';
+  public logoRouter: string = '/';
+  public menuItems = [
+    { label: 'Lessons', value: 'lessons', route: '/' },
+    { label: 'About', value: 'about', route: '/about' }
+  ];
+  
+  constructor(public pagesFacade: PagesFacade) {
+    this.pageStatus$ = pagesFacade.pageStatus;
+    this.errorDetails$ = pagesFacade.errorDetails;
+  }
+
+  protected readonly title = signal('aws-learning');
+    footerLinks: FooterLink[] = [
+    { label: 'Lessons', url: '/lessons' },
+    { label: 'About', url: '/about' },
+  ];
+
+  footerContact = {
+    email: 'contact@truongan.vn',
+    phone: '+84901234567',
+    facebook: 'https://facebook.com/truongan',
+    website: 'https://truongan.vn',
+  };
+}

package/BlueprintTemplate/src/app/core/models/lesson.model.ts

@@ -0,0 +1,8 @@
+export interface Lesson {
+  id: string;
+  title: string;
+  category: string;
+  service: string;
+  level: string;
+  file: string;
+}

package/BlueprintTemplate/src/app/core/services/lesson.service.ts

@@ -0,0 +1,46 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Lesson } from '../models/lesson.model';
+import { Observable, map } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class LessonService {
+  private basePath = 'assets/lessons';
+
+  constructor(private http: HttpClient) {}
+
+  getLessons(): Observable<Lesson[]> {
+    return this.http.get<Lesson[]>(`${this.basePath}/index.json`);
+  }
+
+  getLessonById(id: string): Observable<Lesson | undefined> {
+    return this.getLessons().pipe(
+      map(list => list.find(x => x.id === id))
+    );
+  }
+
+  getLessonContent(path: string): Observable<string> {
+    return this.http.get(`${this.basePath}/${path}`, { responseType: 'text' });
+  }
+
+  loadMarkdown(lesson: any) {
+    const path = `assets/lessons/${lesson.category}/${lesson.file}`;
+    return this.http.get(path, { responseType: 'text' });
+  }
+
+  // Lấy lessons và nhóm theo category
+  getLessonsGroupedByCategory(): Observable<{ [category: string]: Lesson[] }> {
+    return this.getLessons().pipe(
+      map(lessons => 
+        lessons.reduce((groups, lesson) => {
+          const category = lesson.category || 'Uncategorized';
+          if (!groups[category]) {
+            groups[category] = [];
+          }
+          groups[category].push(lesson);
+          return groups;
+        }, {} as { [category: string]: Lesson[] })
+      )
+    );
+  }
+}

package/BlueprintTemplate/src/app/core/services/seo.service.ts

@@ -0,0 +1,68 @@
+// src/app/core/seo/seo.service.ts
+import { Injectable } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+
+export interface SeoConfig {
+  title?: string;
+  description?: string;
+  keywords?: string;
+  canonical?: string;
+  image?: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class SeoService {
+
+  constructor(
+    private titleService: Title,
+    private metaService: Meta
+  ) {}
+
+  update(config: SeoConfig) {
+    if (config.title) {
+      this.titleService.setTitle(config.title);
+      this.metaService.updateTag({ property: 'og:title', content: config.title });
+    }
+
+    if (config.description) {
+      this.metaService.updateTag({
+        name: 'description',
+        content: config.description
+      });
+      this.metaService.updateTag({
+        property: 'og:description',
+        content: config.description
+      });
+    }
+
+    if (config.keywords) {
+      this.metaService.updateTag({
+        name: 'keywords',
+        content: config.keywords
+      });
+    }
+
+    if (config.image) {
+      this.metaService.updateTag({
+        property: 'og:image',
+        content: config.image
+      });
+    }
+
+    if (config.canonical) {
+      this.setCanonical(config.canonical);
+    }
+  }
+
+  private setCanonical(url: string) {
+    let link: HTMLLinkElement =
+      document.querySelector("link[rel='canonical']") || document.createElement('link');
+
+    link.setAttribute('rel', 'canonical');
+    link.setAttribute('href', url);
+
+    if (!link.parentNode) {
+      document.head.appendChild(link);
+    }
+  }
+}

package/BlueprintTemplate/src/app/features/about/about.html

@@ -0,0 +1,14 @@
+<div class="page-content">
+  <h1>About This Site</h1>
+  
+  <p>
+    Chào mừng bạn đến với trang web của tôi!  
+    Đây là nơi tôi chia sẻ kiến thức, dự án và các nội dung hữu ích.  
+    Nếu bạn thấy trang này hữu ích, bạn có thể ủng hộ tôi một ly cà phê ☕.
+  </p>
+
+  <div class="buy-coffee">
+    <p>Scan QR để ủng hộ:</p>
+    <img src="https://truongdx8-private-info.s3.ap-southeast-1.amazonaws.com/QR.jpg" alt="Buy me a coffee QR code" />
+  </div>
+</div>

package/BlueprintTemplate/src/app/features/about/about.scss

@@ -0,0 +1,4 @@
+  .buy-coffee img {
+    width: 300px;    /* hoặc % như 50% */
+    object-fit: contain; /* giữ ảnh không bị méo */
+  }

package/BlueprintTemplate/src/app/features/about/about.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { SeoService } from '../../core/services/seo.service';
+
+@Component({
+  selector: 'app-about',
+  imports: [],
+  templateUrl: './about.html',
+  styleUrl: './about.scss',
+})
+export class About {
+  constructor(
+    private seo: SeoService
+  ) {}
+
+  ngOnInit() {
+  this.seo.update({
+    title: 'Giới thiệu | AWS Edu',
+    description: 'AWS Edu là website chia sẻ kiến thức AWS, Cloud, DevOps và kinh nghiệm thực tế cho developer.',
+    canonical: 'https://awsedu.io.vn/about',
+    image: 'https://awsedu.io.vn/assets/og/about.png'
+  });
+}
+}

package/BlueprintTemplate/src/app/features/lesson-detail/lesson-detail.html

@@ -0,0 +1,4 @@
+<div class="page-content">
+    <app-button [config]="backHomeConfig" (clickEvent)="backHome()"></app-button>
+    <markdown [data]="content"></markdown>
+</div>

package/BlueprintTemplate/src/app/features/lesson-detail/lesson-detail.ts

@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { LessonService } from '../../core/services/lesson.service';
+import { switchMap, catchError, of } from 'rxjs';
+import { MarkdownModule } from 'ngx-markdown';
+import { ButtonComponent, IButtonConfig } from 'angular-dumb-lib';
+import { PageError, PagesFacade } from '../../shared/facades/pages.facade';
+
+@Component({
+  selector: 'app-lesson-detail',
+  imports: [CommonModule, MarkdownModule, ButtonComponent],
+  templateUrl: './lesson-detail.html',
+  styleUrl: './lesson-detail.scss',
+})
+export class LessonDetail {
+  content = '';
+  backHomeConfig: IButtonConfig = {
+    iconValue: 'arrow_left',
+  }
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private lessonService: LessonService,
+    public pagesFacade: PagesFacade
+  ) {}
+
+  ngOnInit(): void {
+    // mark page as loading
+    // this.pagesFacade.markAsLoading();
+    const id = this.route.snapshot.paramMap.get('id')!;
+
+    this.lessonService.getLessonById(id).pipe(
+      switchMap(lesson => this.lessonService.loadMarkdown(lesson)),
+      catchError(err => {
+        const error: PageError = {
+          message: 'Failed to load lesson content',
+          details: err
+        };
+        this.pagesFacade.markAsError(error);
+        return of(null); // stop the stream
+      })
+    ).subscribe(md => {
+      if (md !== null) {
+        this.content = md;
+        this.pagesFacade.markAsReady();
+      }
+    });
+  }
+
+  backHome() {
+    this.router.navigate(['/']);
+  }
+}

package/BlueprintTemplate/src/app/features/lesson-list/lesson-list.html

@@ -0,0 +1,13 @@
+<div class="page-content">
+  <h1>Lessons</h1>
+  <div *ngFor="let category of lessonsByCategory | keyvalue">
+    <h3>{{ category.key | titlecase }}</h3>
+    <ul>
+      <li *ngFor="let lesson of category.value">
+        <a (click)="goToLesson(lesson.id)">
+          {{ lesson.title }}
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>

package/BlueprintTemplate/src/app/features/lesson-list/lesson-list.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { Lesson } from '../../core/models/lesson.model';
+import { LessonService } from '../../core/services/lesson.service';
+import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { PagesFacade } from '../../shared/facades/pages.facade';
+import { catchError, of } from 'rxjs';
+import { SeoService } from '../../core/services/seo.service';
+
+@Component({
+  selector: 'app-lesson-list',
+  imports: [CommonModule],
+  templateUrl: './lesson-list.html',
+  styleUrl: './lesson-list.scss',
+})
+export class LessonList {
+  lessonsByCategory: { [category: string]: Lesson[] } = {};
+
+  constructor(
+    private lessonService: LessonService,
+    private router: Router,
+    public pagesFacade: PagesFacade,
+    private seo: SeoService
+  ) {}
+
+  ngOnInit(): void {
+    this.seo.update({
+      title: 'AWS Edu – Học AWS & Cloud cho Developer',
+      description: 'Nền tảng học AWS, Cloud, DevOps từ cơ bản đến thực chiến dành cho developer.',
+      canonical: 'https://awsedu.io.vn/',
+    });
+
+    // mark page as loading
+    this.pagesFacade.markAsLoading();
+    this.lessonService.getLessonsGroupedByCategory()
+      .pipe(
+        catchError(err => {
+          // mark page as error with message
+          this.pagesFacade.markAsError({
+            message: 'Failed to load lessons',
+            details: err
+          });
+          return of(null); // return empty observable to stop the stream
+        })
+      )
+      .subscribe(data => {
+        if (data) {
+          this.lessonsByCategory = data;
+          // mark page as ready
+          this.pagesFacade.markAsReady();
+        }
+      }
+    );
+  }
+
+  goToLesson(id: string): void {
+    this.router.navigate(['/lessons', id]);
+  }
+}

package/BlueprintTemplate/src/app/shared/facades/event-abstract.facade.ts

@@ -0,0 +1,18 @@
+import { Injectable } from "@angular/core";
+import { isDefined } from "../utils/common.utils";
+
+@Injectable()
+export abstract class EventAbstractFacade<T> {
+    private readonly _eventsDictionary = new Map<string, (...args: T[] | unknown[]) => void>();
+
+  addEventListener(name: string, handler: (...argument: T[] | unknown[]) => void): void {
+    this._eventsDictionary.set(name, handler);
+  }
+
+  dispatch(name: string, ...args: T[] | unknown[]): void {
+    const handler = this._eventsDictionary.get(name);
+    if(isDefined(handler)) {
+      handler(...args);
+    }
+  }
+}

package/BlueprintTemplate/src/app/shared/facades/pages.facade.ts

@@ -0,0 +1,55 @@
+import { Injectable } from "@angular/core";
+import { EventAbstractFacade } from "./event-abstract.facade";
+import { IModalEvent } from "angular-dumb-lib";
+import { BehaviorSubject, Observable } from "rxjs";
+
+export interface ILoadingEvent {
+  text: string;
+  position?: 'top' | 'bottom';
+}
+
+export interface PageError {
+  message: string;       // user-friendly message
+  code?: number;         // optional error code
+  details?: any;         // optional raw error or debug info
+}
+
+export type PageEventDetails = IModalEvent | ILoadingEvent | unknown;
+
+export type PageStatus = 'loading' | 'ready' | 'error';
+
+export interface IPageEvent {
+  type?: 'start' | 'end';
+  details?: PageEventDetails;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PagesFacade extends EventAbstractFacade<IPageEvent> {
+    private readonly _pageStatus = new BehaviorSubject<PageStatus>('ready');
+    private readonly _errorDetails = new BehaviorSubject<PageError | null>(null);
+
+    get pageStatus(): Observable<PageStatus> {
+        return this._pageStatus.asObservable();
+    }
+
+    get errorDetails(): Observable<PageError | null> {
+        return this._errorDetails.asObservable();
+    }
+
+    markAsReady(): void {
+        this._pageStatus.next('ready');
+        this._errorDetails.next(null); // clear previous error
+    }
+
+    markAsLoading(): void {
+        this._pageStatus.next('loading');
+        this._errorDetails.next(null); // clear previous error
+    }
+
+    markAsError(details: PageError): void {
+        this._pageStatus.next('error');
+        this._errorDetails.next(details);
+    }
+}

package/BlueprintTemplate/src/app/shared/utils/common.utils.ts

@@ -0,0 +1,3 @@
+export function isDefined<T>(obj: T | null | undefined): obj is T {
+  return obj !== undefined && obj !== null;
+}

package/BlueprintTemplate/src/index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>AWS Edu</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- SEO cơ bản -->
+  <meta name="description" content="AWS Edu – Cổng học tập và thực hành AWS cho người mới bắt đầu và nâng cao.">
+  <meta name="robots" content="index, follow">
+
+  <!-- Open Graph (chia sẻ lên mạng xã hội đẹp hơn) -->
+  <meta property="og:title" content="AWS Edu – Học tập và Thực hành AWS">
+  <meta property="og:description" content="Học AWS từ cơ bản đến nâng cao với AWS Edu. Tài liệu, hướng dẫn, bài tập thực hành.">
+  <meta property="og:type" content="website">
+  <!-- <meta property="og:url" content="https://yourdomain.com/">
+  <meta property="og:image" content="https://yourdomain.com/og-image.png"> -->
+
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-72HLJXKSY8"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'G-72HLJXKSY8');
+  </script>
+
+  <link rel="icon" href="/favicon.ico" />
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/BlueprintTemplate/src/main.server.ts.bak

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { App } from './app/app';
+import { config } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(App, config);
+
+export default bootstrap;

package/BlueprintTemplate/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));