feat: update version to 2.3.0 and enhance dependencies

- Updated package version to 2.3.0 in package.json.
- Upgraded Angular dependencies to version 20.3.9 and other related packages.
- Added HTML/XML formatter service and component for formatting HTML and XML markup.
- Updated route service to include new HTML formatter route.
- Modified animated background component to increase particle count and adjust particle sizes.
- Cleaned up CSS for animated background by removing geometric shapes styles.
- Updated format view component to include HTML formatting description.
- Updated sidebar component to reflect new version number.
- Added new sitemap entries for HTML and TypeScript formats.

Author: timothydodd

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "utilplex",
-  "version": "0.0.0",
+  "version": "2.3.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -14,17 +14,17 @@
   "private": true,
   "dependencies": {
     "@acrodata/code-editor": "^0.5.1",
-    "@angular/animations": "^20.3.5",
-    "@angular/common": "^20.3.5",
-    "@angular/compiler": "^20.3.5",
-    "@angular/core": "^20.3.5",
-    "@angular/forms": "^20.3.5",
-    "@angular/platform-browser": "^20.3.5",
-    "@angular/platform-browser-dynamic": "^20.3.5",
-    "@angular/platform-server": "^20.3.5",
-    "@angular/router": "^20.3.5",
-    "@angular/ssr": "^20.3.6",
-    "@codemirror/commands": "^6.9.0",
+    "@angular/animations": "^20.3.9",
+    "@angular/common": "^20.3.9",
+    "@angular/compiler": "^20.3.9",
+    "@angular/core": "^20.3.9",
+    "@angular/forms": "^20.3.9",
+    "@angular/platform-browser": "^20.3.9",
+    "@angular/platform-browser-dynamic": "^20.3.9",
+    "@angular/platform-server": "^20.3.9",
+    "@angular/router": "^20.3.9",
+    "@angular/ssr": "^20.3.8",
+    "@codemirror/commands": "^6.10.0",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.2",
@@ -34,11 +34,11 @@
     "@codemirror/language": "^6.11.3",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.6",
-    "@lezer/highlight": "^1.2.1",
-    "@ng-select/ng-select": "^20.3.1",
+    "@lezer/highlight": "^1.2.3",
+    "@ng-select/ng-select": "^20.6.1",
     "@stedi/prettier-plugin-jsonata": "^2.1.6",
     "codemirror": "^6.0.2",
-    "express": "~4.21.2",
+    "express": "~5.1.0",
     "js-yaml": "^4.1.0",
     "prettier": "^3.6.2",
     "rxjs": "~7.8.2",
@@ -47,21 +47,21 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-eslint/builder": "20.4.0",
-    "@angular-eslint/schematics": "20.4.0",
-    "@angular-eslint/template-parser": "20.4.0",
-    "@angular/build": "^20.3.6",
-    "@angular/cli": "~20.3.6",
-    "@angular/compiler-cli": "^20.3.5",
-    "@types/express": "~4.17.21",
-    "@types/jasmine": "~5.1.11",
+    "@angular-eslint/builder": "20.5.0",
+    "@angular-eslint/schematics": "20.5.0",
+    "@angular-eslint/template-parser": "20.5.0",
+    "@angular/build": "^20.3.8",
+    "@angular/cli": "~20.3.8",
+    "@angular/compiler-cli": "^20.3.9",
+    "@types/express": "~5.0.5",
+    "@types/jasmine": "~5.1.12",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^24.7.2",
-    "angular-eslint": "^20.4.0",
-    "eslint": "^9.37.0",
+    "@types/node": "^24.9.2",
+    "angular-eslint": "^20.5.0",
+    "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
-    "jasmine-core": "~5.12.0",
+    "jasmine-core": "~5.12.1",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
@@ -71,6 +71,6 @@
     "prettier-eslint": "^16.4.2",
     "style-loader": "^4.0.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.1"
+    "typescript-eslint": "^8.46.2"
   }
 }

package.json

@@ -87,6 +87,13 @@ export class RouteService {
           description: 'Format and beautify your SCSS/Sass code with proper indentation and structure.',
           loadComponent: () => import('../formatters/f-scss/f-scss.component').then((mod) => mod.FScssComponent),
         },
+        {
+          name: 'HTML',
+          title: 'HTML/XML Formatter',
+          url: '/format/html',
+          description: 'Format and beautify your HTML and XML markup with proper indentation and structure.',
+          loadComponent: () => import('../formatters/f-html/f-html.component').then((mod) => mod.FHtmlComponent),
+        },
       ],
     },
     {

src/app/_services/route.service.ts

@@ -60,37 +60,13 @@ app-side-bar {
 
 
 .back {
-  height: 100vh;
+  min-height: 100vh;
   width: 100%;
   display: flex;
   flex-direction: column;
   margin: 0;
   position: relative;
   background: transparent;
-  overflow: auto;
-  
-  /* Custom Scrollbar */
-  scrollbar-width: thin;
-  scrollbar-color: rgba(139, 233, 253, 0.3) rgba(255, 255, 255, 0.05);
-}
-
-.back::-webkit-scrollbar {
-  width: 8px;
-}
-
-.back::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 4px;
-}
-
-.back::-webkit-scrollbar-thumb {
-  background: rgba(139, 233, 253, 0.3);
-  border-radius: 4px;
-  transition: background 0.3s ease;
-}
-
-.back::-webkit-scrollbar-thumb:hover {
-  background: rgba(139, 233, 253, 0.5);
 }
 
 /* Route Container */

src/app/app.component.scss

@@ -18,163 +18,8 @@
   height: 100%;
 }
 
-.geometric-shapes {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.shape {
-  position: absolute;
-  border-radius: 50%;
-  background: linear-gradient(45deg, 
-    rgba(80, 250, 123, 0.12) 0%, 
-    rgba(139, 233, 253, 0.12) 50%, 
-    rgba(255, 121, 198, 0.12) 100%);
-  filter: blur(2px);
-  animation: float 20s infinite ease-in-out;
-  backdrop-filter: blur(1px);
-}
-
-.shape-1 {
-  width: 300px;
-  height: 300px;
-  top: 10%;
-  left: 10%;
-  animation-delay: 0s;
-  animation-duration: 25s;
-}
-
-.shape-2 {
-  width: 200px;
-  height: 200px;
-  top: 20%;
-  right: 15%;
-  animation-delay: -5s;
-  animation-duration: 30s;
-  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
-  background: linear-gradient(135deg, 
-    rgba(139, 233, 253, 0.1) 0%, 
-    rgba(80, 250, 123, 0.1) 100%);
-}
-
-.shape-3 {
-  width: 150px;
-  height: 150px;
-  bottom: 20%;
-  left: 20%;
-  animation-delay: -10s;
-  animation-duration: 35s;
-  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
-}
-
-.shape-4 {
-  width: 250px;
-  height: 250px;
-  bottom: 30%;
-  right: 20%;
-  animation-delay: -15s;
-  animation-duration: 28s;
-  border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
-  background: linear-gradient(225deg, 
-    rgba(255, 121, 198, 0.08) 0%, 
-    rgba(139, 233, 253, 0.08) 100%);
-}
-
-.shape-5 {
-  width: 180px;
-  height: 180px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation-delay: -20s;
-  animation-duration: 40s;
-  border-radius: 80% 20% 55% 45% / 25% 75% 25% 75%;
-}
-
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0px) rotate(0deg);
-    opacity: 0.3;
-  }
-  25% {
-    transform: translateY(-20px) rotate(90deg);
-    opacity: 0.5;
-  }
-  50% {
-    transform: translateY(-10px) rotate(180deg);
-    opacity: 0.4;
-  }
-  75% {
-    transform: translateY(-30px) rotate(270deg);
-    opacity: 0.6;
-  }
-}
-
-// Additional floating elements for more dynamic feel
-.shape::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 60%;
-  height: 60%;
-  background: radial-gradient(circle, 
-    rgba(80, 250, 123, 0.08) 0%, 
-    transparent 70%);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  animation: pulse 4s infinite ease-in-out;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 0.3;
-  }
-  50% {
-    transform: translate(-50%, -50%) scale(1.2);
-    opacity: 0.6;
-  }
-}
-
-// Remove the overlay since we now have a nice body gradient
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .shape {
-    transform: scale(0.7);
-  }
-  
-  .shape-1 { width: 200px; height: 200px; }
-  .shape-2 { width: 150px; height: 150px; }
-  .shape-3 { width: 100px; height: 100px; }
-  .shape-4 { width: 180px; height: 180px; }
-  .shape-5 { width: 120px; height: 120px; }
-}
-
-@media (max-width: 480px) {
-  .shape {
-    transform: scale(0.5);
-  }
-  
-  .geometric-shapes {
-    opacity: 0.7;
-  }
-}
-
 // Reduce motion for accessibility
 @media (prefers-reduced-motion: reduce) {
-  .shape {
-    animation: none;
-  }
-  
-  .shape::before {
-    animation: none;
-  }
-  
   .background-canvas {
     display: none;
   }

src/app/components/animated-background/animated-background.component.scss

@@ -18,13 +18,6 @@ interface Particle {
   template: `
     <div class="background-container">
       <canvas #canvas class="background-canvas"></canvas>
-      <div class="geometric-shapes">
-        <div class="shape shape-1"></div>
-        <div class="shape shape-2"></div>
-        <div class="shape shape-3"></div>
-        <div class="shape shape-4"></div>
-        <div class="shape shape-5"></div>
-      </div>
     </div>
   `,
   styleUrls: ['./animated-background.component.scss'],
@@ -37,8 +30,7 @@ export class AnimatedBackgroundComponent implements OnInit, AfterViewInit, OnDes
   private animationId = signal<number | null>(null);
   private isBrowser: boolean;
 
-  private readonly PARTICLE_COUNT = 50;
-  private readonly CONNECTION_DISTANCE = 150;
+  private readonly PARTICLE_COUNT = 100;
 
   constructor(@Inject(PLATFORM_ID) private platformId: object) {
     this.isBrowser = isPlatformBrowser(this.platformId);
@@ -95,8 +87,8 @@ export class AnimatedBackgroundComponent implements OnInit, AfterViewInit, OnDes
         y: Math.random() * height,
         vx: (Math.random() - 0.5) * 0.5,
         vy: (Math.random() - 0.5) * 0.5,
-        size: Math.random() * 2 + 1, // Back to original small size
-        opacity: Math.random() * 0.5 + 0.2,
+        size: Math.random() * 1.5 + 0.5, // Small star-like particles
+        opacity: Math.random() * 0.8 + 0.2,
         hue: Math.random() * 60 + 180, // Blue to cyan range
       });
     }
@@ -153,35 +145,11 @@ export class AnimatedBackgroundComponent implements OnInit, AfterViewInit, OnDes
     });
   }
 
-  private drawConnections() {
-    if (!this.isBrowser || !this.ctx) return;
-    this.ctx.strokeStyle = '#50fa7b';
-    this.ctx.lineWidth = 1.5;
-
-    for (let i = 0; i < this.particles.length; i++) {
-      for (let j = i + 1; j < this.particles.length; j++) {
-        const dx = this.particles[i].x - this.particles[j].x;
-        const dy = this.particles[i].y - this.particles[j].y;
-        const distance = Math.sqrt(dx * dx + dy * dy);
-
-        if (distance < this.CONNECTION_DISTANCE) {
-          const opacity = (this.CONNECTION_DISTANCE - distance) / this.CONNECTION_DISTANCE;
-          this.ctx.globalAlpha = opacity * 0.6; // Increased from 0.2 to 0.6
-          this.ctx.beginPath();
-          this.ctx.moveTo(this.particles[i].x, this.particles[i].y);
-          this.ctx.lineTo(this.particles[j].x, this.particles[j].y);
-          this.ctx.stroke();
-        }
-      }
-    }
-  }
-
   private animate = () => {
     if (!this.isBrowser || !this.ctx) return;
     this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
 
     this.updateParticles();
-    this.drawConnections();
     this.drawParticles();
 
     this.animationId.set(requestAnimationFrame(this.animate));

src/app/components/animated-background/animated-background.component.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import * as prettier from 'prettier';
+import * as html from 'prettier/plugins/html';
+import { Observable, from } from 'rxjs';
+import { FormatViewService } from './sql-format.service';
+
+@Injectable()
+export class HtmlFormatService extends FormatViewService {
+  override title = 'HTML/XML Formatter';
+  override language = 'html';
+  override routeName = 'HTML';
+  override format(input: string): Observable<string> {
+    return from(prettier.format(input, { parser: 'html', plugins: [html] }));
+  }
+}