feat: enhance routing and SEO optimization across components; add route data retrieval

timothydodd · timothydodd · commit b8a2a95fd970 · 2025-05-14T09:46:38.000-04:00
diff --git a/src/app/_services/route.service.ts b/src/app/_services/route.service.ts
@@ -4,17 +4,7 @@ import { Observable } from 'rxjs';
 
 export class RouteService {
   public static getRoutes() {
-    const routes: Routes = [
-      {
-        path: '',
-        pathMatch: 'full',
-        loadComponent: () => import('../pages/welcome/welcome.component').then((mod) => mod.WelcomeComponent),
-        data: {
-          title: 'UtilPlex | Free Online JSON Formatter, SQL Beautifier, YAML Converter',
-          description: 'Welcome to Util Plex, your go-to online developer tools for various utilities.',
-        },
-      },
-    ];
+    const routes: Routes = [];
 
     for (const c of RouteService.routeCategories) {
       for (const route of c.routes) {
@@ -23,21 +13,32 @@ export class RouteService {
             path: route.url.substring(1),
             pathMatch: 'full',
             loadComponent: route.loadComponent,
-            data: { title: route.title, description: route.description },
           });
         } else {
           routes.push({
             path: route.url.substring(1),
             pathMatch: 'full',
             component: route.component,
-            data: { title: route.title, description: route.description },
           });
         }
       }
     }
     return routes;
   }
   public static routeCategories: RouteCategory[] = [
+    {
+      name: 'Home',
+      routes: [
+        {
+          name: 'Welcome',
+          title: 'Free Online JSON Formatter, SQL Beautifier, YAML Converter',
+          url: '/',
+          description:
+            'Util Plex is a web-based platform designed to assist developers and coders by providing tools for formatting programming code and converting data formats.',
+          loadComponent: () => import('../pages/welcome/welcome.component').then((mod) => mod.WelcomeComponent),
+        },
+      ],
+    },
     {
       name: 'Formatters',
       routes: [
@@ -126,3 +127,14 @@ export interface UpRoute {
     | Observable<Type<unknown> | DefaultExport<Type<unknown>>>
     | Promise<Type<unknown> | DefaultExport<Type<unknown>>>;
 }
+
+export function getRouteData(name: string): UpRoute | null {
+  for (const c of RouteService.routeCategories) {
+    for (const route of c.routes) {
+      if (route.name === name) {
+        return route;
+      }
+    }
+  }
+  return null;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,6 +1,5 @@
 import { Component, inject, signal } from '@angular/core';
-import { Meta, Title } from '@angular/platform-browser';
-import { ActivationStart, Router, RouterOutlet } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
 import { SideBarComponent } from './nav/side-bar/side-bar.component';
 @Component({
   selector: 'app-root',
@@ -11,24 +10,4 @@ import { SideBarComponent } from './nav/side-bar/side-bar.component';
 export class AppComponent {
   router = inject(Router);
   title = signal(null);
-  private metaService = inject(Meta);
-  private titleService = inject(Title);
-  constructor() {
-    this.router.events.subscribe((event) => {
-      if (event instanceof ActivationStart) {
-        const data = event.snapshot.data;
-
-        if (data['title']) {
-          this.titleService.setTitle(data['title']);
-          this.title.set(data['title']);
-        }
-        if (data['description']) {
-          this.metaService.updateTag({
-            name: 'description',
-            content: data['description'],
-          });
-        }
-      }
-    });
-  }
 }
diff --git a/src/app/converters/_services/converter.service.ts b/src/app/converters/_services/converter.service.ts
@@ -1,8 +1,9 @@
-import { Observable } from "rxjs";
+import { Observable } from 'rxjs';
 
 export abstract class ConverterServiceBase {
-    abstract title: string;
-    abstract languageFrom: string;
-    abstract languageTo: string;
-    abstract convert(input: string): Observable<string>;
-}
+  abstract title: string;
+  abstract languageFrom: string;
+  abstract languageTo: string;
+  abstract routeName: string;
+  abstract convert(input: string): Observable<string>;
+}
diff --git a/src/app/converters/_services/json-to-yaml.service.ts b/src/app/converters/_services/json-to-yaml.service.ts
@@ -9,6 +9,7 @@ export class JsonToYamlConverter extends ConverterServiceBase {
   override title = 'Json to Yaml';
   override languageFrom = 'json';
   override languageTo = 'yaml';
+  override routeName = 'Json To Yaml';
   override convert(input: string): Observable<string> {
     if (!input) return of('');
     const json = JSON.parse(input);
diff --git a/src/app/converters/c-json-yaml/c-json-yaml.component.ts b/src/app/converters/c-json-yaml/c-json-yaml.component.ts
@@ -6,12 +6,10 @@ import { JsonToYamlConverter } from '../_services/json-to-yaml.service';
 import { ConvertViewComponent } from '../convert-view/convert-view.component';
 
 @Component({
-    selector: 'app-c-json-yaml',
-    templateUrl: './c-json-yaml.component.html',
-    styleUrls: ['./c-json-yaml.component.scss'],
-    providers: [{ provide: ConverterServiceBase, useClass: JsonToYamlConverter }],
-    imports: [CommonModule, FormsModule, ConvertViewComponent]
+  selector: 'app-c-json-yaml',
+  templateUrl: './c-json-yaml.component.html',
+  styleUrls: ['./c-json-yaml.component.scss'],
+  providers: [{ provide: ConverterServiceBase, useClass: JsonToYamlConverter }],
+  imports: [CommonModule, FormsModule, ConvertViewComponent],
 })
-export class CJsonYamlComponent {
-
-}
+export class CJsonYamlComponent {}
diff --git a/src/app/converters/convert-view/convert-view.component.ts b/src/app/converters/convert-view/convert-view.component.ts
@@ -1,8 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { Component, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { Meta, Title } from '@angular/platform-browser';
 import { MonacoEditorModule, NGX_MONACO_EDITOR_CONFIG } from 'ngx-monaco-editor-v2';
 import { from } from 'rxjs';
+import { getRouteData } from 'src/app/_services/route.service';
 import { MonacoEditorConfig } from 'src/app/monaco/monaco-global-config';
 import { MonacoConfig } from 'src/app/monaco/ng-monaco-config';
 import { ConverterServiceBase } from '../_services/converter.service';
@@ -15,6 +17,7 @@ import { ConverterServiceBase } from '../_services/converter.service';
   providers: [{ provide: NGX_MONACO_EDITOR_CONFIG, useClass: MonacoEditorConfig }],
 })
 export class ConvertViewComponent {
+  private convertService = inject(ConverterServiceBase);
   inputOptions: MonacoConfig;
   outputOptions: MonacoConfig;
 
@@ -24,15 +27,23 @@ export class ConvertViewComponent {
 
   title = '';
 
-  constructor(private convertService: ConverterServiceBase) {
-    this.title = convertService.title;
+  private meta = inject(Meta);
+  private titleService = inject(Title);
+  constructor() {
+    var data = getRouteData(this.convertService.routeName);
+    if (!data) {
+      throw new Error('Route data not found for welcome');
+    }
+    this.titleService.setTitle('UtilPlex |' + data.title);
+    if (data.description) this.meta.updateTag({ name: 'description', content: data.description });
+    this.title = this.convertService.title;
     this.inputOptions = {
       theme: 'dracula',
-      language: convertService.languageFrom,
+      language: this.convertService.languageFrom,
     } as MonacoConfig;
     this.outputOptions = {
       theme: 'dracula',
-      language: convertService.languageTo,
+      language: this.convertService.languageTo,
       readOnly: false,
     };
   }
diff --git a/src/app/encoders/_services/encoder.service.ts b/src/app/encoders/_services/encoder.service.ts
@@ -3,6 +3,7 @@ import { Observable } from 'rxjs';
 
 export abstract class EncoderServiceBase {
   abstract title: string;
+  abstract routeName: string;
   abstract options: any;
   abstract optionsChanged: EventEmitter<any>;
   abstract convert(input: string, encode: boolean): Observable<string>;
diff --git a/src/app/encoders/base-64-encoder/base-64-encoder.ts b/src/app/encoders/base-64-encoder/base-64-encoder.ts
@@ -5,6 +5,7 @@ import { EncoderServiceBase } from '../_services/encoder.service';
 @Injectable()
 export class Base64Encoder extends EncoderServiceBase {
   override title = 'Base64 Encoder';
+  override routeName = 'Base64';
   override options: Base64EncodingOptions = new Base64EncodingOptions();
   override optionsChanged = new EventEmitter<Base64EncodingOptions>();
   constructor() {
diff --git a/src/app/encoders/encoder-view/encoder-view.component.ts b/src/app/encoders/encoder-view/encoder-view.component.ts
@@ -1,10 +1,12 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MonacoEditorModule, NGX_MONACO_EDITOR_CONFIG } from 'ngx-monaco-editor-v2';
 import { from } from 'rxjs';
 
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { Meta, Title } from '@angular/platform-browser';
+import { getRouteData } from 'src/app/_services/route.service';
 import { MonacoEditorConfig } from 'src/app/monaco/monaco-global-config';
 import { MonacoConfig } from 'src/app/monaco/ng-monaco-config';
 import { SwitchComponent } from '../../components/switch/switch.component';
@@ -59,6 +61,7 @@ import { EncoderServiceBase } from '../_services/encoder.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EncoderViewComponent {
+  private convertService = inject(EncoderServiceBase);
   inputOptions: MonacoConfig;
   outputOptions: MonacoConfig;
 
@@ -69,9 +72,16 @@ export class EncoderViewComponent {
   isEncode = signal<boolean>(true);
   modeLabel = computed(() => (this.isEncode() ? 'Encode' : 'Decode'));
   title = '';
-
-  constructor(private convertService: EncoderServiceBase) {
-    this.title = convertService.title;
+  private meta = inject(Meta);
+  private titleService = inject(Title);
+  constructor() {
+    var data = getRouteData(this.convertService.routeName);
+    if (!data) {
+      throw new Error('Route data not found for welcome');
+    }
+    this.titleService.setTitle('UtilPlex |' + data.title);
+    if (data.description) this.meta.updateTag({ name: 'description', content: data.description });
+    this.title = this.convertService.title;
     toObservable(this.isEncode)
       .pipe(takeUntilDestroyed())
       .subscribe(() => {
@@ -87,7 +97,7 @@ export class EncoderViewComponent {
       language: '',
       readOnly: true,
     };
-    convertService.optionsChanged.subscribe(() => {
+    this.convertService.optionsChanged.subscribe(() => {
       this.inputChanged(this.inputCode());
     });
   }
diff --git a/src/app/formatters/_services/css-format.service.ts b/src/app/formatters/_services/css-format.service.ts
@@ -1,14 +1,15 @@
-import { Injectable } from "@angular/core";
-import * as prettier from "prettier";
-import * as postcss from "prettier/plugins/postcss";
-import { Observable, from } from "rxjs";
-import { FormatViewService } from "./sql-format.service";
+import { Injectable } from '@angular/core';
+import * as prettier from 'prettier';
+import * as postcss from 'prettier/plugins/postcss';
+import { Observable, from } from 'rxjs';
+import { FormatViewService } from './sql-format.service';
 
 @Injectable()
 export class CssFormatService extends FormatViewService {
-    override title = 'Css Formatter';
-    override language = 'css';
-    override format(input: string): Observable<string> {
-      return from(prettier.format(input, { parser: "css", plugins: [postcss] }));
-    }
+  override title = 'Css Formatter';
+  override language = 'css';
+  override routeName = 'CSS';
+  override format(input: string): Observable<string> {
+    return from(prettier.format(input, { parser: 'css', plugins: [postcss] }));
+  }
 }
diff --git a/src/app/formatters/_services/javascript-format.service.ts b/src/app/formatters/_services/javascript-format.service.ts
@@ -9,6 +9,7 @@ import { FormatViewService } from './sql-format.service';
 export class JavascriptFormatProvider extends FormatViewService {
   override title = 'JavaScript Formatter';
   override language = 'javascript';
+  override routeName = 'JavaScript';
   override format(input: string): Observable<string> {
     return from(
       prettier.format(input, { parser: 'babel', plugins: [babel, estree as unknown as prettier.Plugin<any>] })
diff --git a/src/app/formatters/_services/json-format.service.ts b/src/app/formatters/_services/json-format.service.ts
@@ -1,13 +1,14 @@
-import { Injectable } from "@angular/core";
-import { formatJsonata } from "@stedi/prettier-plugin-jsonata/dist/lib";
-import { Observable, from } from "rxjs";
-import { FormatViewService } from "./sql-format.service";
+import { Injectable } from '@angular/core';
+import { formatJsonata } from '@stedi/prettier-plugin-jsonata/dist/lib';
+import { Observable, from } from 'rxjs';
+import { FormatViewService } from './sql-format.service';
 
 @Injectable()
 export class JsonFormatProvider extends FormatViewService {
-    override title = 'Json Formatter';
-    override language = 'json';
-    override format(input: string): Observable<string> {
-      return  from(formatJsonata(input));
-    }
+  override title = 'Json Formatter';
+  override language = 'json';
+  override routeName = 'JSON';
+  override format(input: string): Observable<string> {
+    return from(formatJsonata(input));
+  }
 }
diff --git a/src/app/formatters/_services/sql-format.service.ts b/src/app/formatters/_services/sql-format.service.ts
@@ -3,6 +3,7 @@ import { Observable, of } from 'rxjs';
 import { format as formatsql } from 'sql-formatter';
 export abstract class FormatViewService {
   abstract title: string;
+  abstract routeName: string;
   abstract language: string;
   abstract format(input: string): Observable<string>;
 }
@@ -11,6 +12,7 @@ export abstract class FormatViewService {
 export class SqlFormatProvider extends FormatViewService {
   override title = 'SQL Formatter';
   override language = 'sql';
+  override routeName = 'SQL';
   override format(input: string): Observable<string> {
     return of(formatsql(input, { language: 'transactsql' }));
   }
diff --git a/src/app/formatters/format-view/format-view.component.ts b/src/app/formatters/format-view/format-view.component.ts
@@ -1,8 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { Component, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { Meta, Title } from '@angular/platform-browser';
 import { MonacoEditorModule, NGX_MONACO_EDITOR_CONFIG } from 'ngx-monaco-editor-v2';
 import { from } from 'rxjs';
+import { getRouteData } from 'src/app/_services/route.service';
 import { MonacoEditorConfig } from 'src/app/monaco/monaco-global-config';
 import { MonacoConfig } from '../../monaco/ng-monaco-config';
 import { FormatViewService } from '../_services/sql-format.service';
@@ -14,21 +16,28 @@ import { FormatViewService } from '../_services/sql-format.service';
   providers: [{ provide: NGX_MONACO_EDITOR_CONFIG, useClass: MonacoEditorConfig }],
 })
 export class FormatViewComponent {
+  private formatService = inject(FormatViewService);
   inputOptions: MonacoConfig;
   outputOptions: MonacoConfig;
 
   inputCode = signal<string>('');
   outputCode = signal<string>('');
   error = signal<string>('');
-
   title = '';
-
-  constructor(private formatService: FormatViewService) {
-    this.title = formatService.title;
+  private meta = inject(Meta);
+  private titleService = inject(Title);
+  constructor() {
+    var data = getRouteData(this.formatService.routeName);
+    if (!data) {
+      throw new Error('Route data not found for welcome');
+    }
+    this.titleService.setTitle('UtilPlex |' + data.title);
+    if (data.description) this.meta.updateTag({ name: 'description', content: data.description });
+    this.title = this.formatService.title;
 
     this.inputOptions = {
       theme: 'dracula',
-      language: formatService.language,
+      language: this.formatService.language,
     } as MonacoConfig;
     this.outputOptions = { ...this.inputOptions, readOnly: true };
   }
diff --git a/src/app/nav/side-bar/side-bar.component.ts b/src/app/nav/side-bar/side-bar.component.ts
@@ -14,7 +14,7 @@ export class SideBarComponent {
   categories: RouterCategory[] = [];
   router = inject(Router);
   constructor() {
-    this.categories = RouteService.routeCategories;
+    this.categories = RouteService.routeCategories.filter((x) => x.name !== 'Home');
   }
   isRouteActive(url: string) {
     return this.router.isActive(url, {
diff --git a/src/app/pages/welcome/welcome.component.ts b/src/app/pages/welcome/welcome.component.ts
diff --git a/src/app/time/time-zones/time-zones.component.ts b/src/app/time/time-zones/time-zones.component.ts
