feat(formatters): add SCSS formatter with routing and metadata updates

Author: timothydodd

src/app/_services/route.service.ts

@@ -61,6 +61,7 @@ export class RouteService {
           name: 'CSS',
           title: 'CSS Formatter',
           url: '/format/css',
+          description: 'Organize and beautify your CSS stylesheets with proper spacing and structure',
           loadComponent: () => import('../formatters/f-css/f-css.component').then((mod) => mod.FCssComponent),
         },
         {
@@ -71,6 +72,13 @@ export class RouteService {
           loadComponent: () =>
             import('../formatters/f-javascript/f-javascript.component').then((mod) => mod.FJavascriptComponent),
         },
+        {
+          name: 'SCSS',
+          title: 'SCSS Formatter',
+          url: '/format/scss',
+          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),
+        },
       ],
     },
     {

src/app/app.component.html

@@ -12,4 +12,3 @@
     </div>
   </div>
 </div>
-<div class="right-gutter"></div>

src/app/app.component.scss

@@ -36,16 +36,10 @@ app-side-bar {
   //   rgba(15, 15, 26, 0.95) 0%, 
   //   rgba(26, 26, 46, 0.9) 50%,
   //   rgba(22, 33, 62, 0.95) 100%);
-  min-width: 0;
+  width: 280px;
+  flex-shrink: 0;
 }
 
-.right-gutter {
-  // background: linear-gradient(180deg, 
-  //   rgba(15, 15, 26, 0.95) 0%, 
-  //   rgba(26, 26, 46, 0.9) 50%,
-  //   rgba(22, 33, 62, 0.95) 100%);
-  min-width: 0;
-}
 
 .middle-section {
   display: flex;
@@ -55,13 +49,10 @@ app-side-bar {
   width: 100%;
   position: relative;
   z-index: 1;
-  margin-left: 280px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.left-gutter,
-.right-gutter {
-  flex-grow: 1;
-}
 
 .back {
   height: 100vh;
@@ -168,11 +159,9 @@ app-side-bar {
 @media (max-width: 1200px) {
   .middle-section {
     max-width: 100%;
-    margin-left: 260px;
   }
 
-  .left-gutter,
-  .right-gutter {
+  .left-gutter {
     display: none;
   }
 }
@@ -186,7 +175,6 @@ app-side-bar {
     flex-direction: column;
     height: auto;
     min-height: 100vh;
-    margin-left: 0;
     margin-top: 120px;
   }
 

src/app/formatters/_services/scss-format.service.ts

@@ -0,0 +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';
+
+@Injectable()
+export class ScssFormatService extends FormatViewService {
+  override title = 'SCSS Formatter';
+  override language = 'scss';
+  override routeName = 'SCSS';
+  override format(input: string): Observable<string> {
+    return from(prettier.format(input, { parser: 'scss', plugins: [postcss] }));
+  }
+}

src/app/formatters/f-scss/f-scss.component.css

@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1; }

src/app/formatters/f-scss/f-scss.component.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ScssFormatService } from '../_services/scss-format.service';
+import { FormatViewService } from '../_services/sql-format.service';
+import { FormatViewComponent } from '../format-view/format-view.component';
+
+@Component({
+  selector: 'app-f-scss',
+  providers: [{ provide: FormatViewService, useClass: ScssFormatService }],
+  imports: [CommonModule, FormsModule, FormatViewComponent],
+  template: `<app-format-view></app-format-view>`,
+  styleUrl: './f-scss.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FScssComponent {}

src/app/formatters/format-view/format-view.component.ts

@@ -90,6 +90,7 @@ export class FormatViewComponent {
       json: 'json',
       sql: 'sql',
       css: 'css',
+      scss: 'scss',
       javascript: 'js',
       yaml: 'yaml',
     };
@@ -101,6 +102,7 @@ export class FormatViewComponent {
       JSON: 'Beautify and validate your JSON data with proper indentation and formatting',
       SQL: 'Format SQL queries for better readability and consistency across your database code',
       CSS: 'Organize and beautify your CSS stylesheets with proper spacing and structure',
+      SCSS: 'Format and beautify your SCSS/Sass code with proper indentation and structure',
       JavaScript: 'Clean up and format your JavaScript code with consistent indentation and style',
       YAML: 'Format YAML files with proper alignment and structure for configuration files',
     };

src/app/pages/welcome/welcome.component.ts

@@ -94,6 +94,7 @@ export class WelcomeComponent {
       'SQL': '🗃️',
       'JSON': '📋',
       'CSS': '🎨',
+      'SCSS': '🎨',
       'JavaScript': '📜',
       'Json To Yaml': '🔄',
       'Base64': '🔐',

src/index.html

@@ -6,7 +6,7 @@
     <base href="/" />
     <meta
       name="keywords"
-      content="online tools, json formatter, sql formatter, base64 encoder, yaml converter, time zones, css formatter, javascript formatter"
+      content="online tools, json formatter, sql formatter, scss formatter, sass formatter, base64 encoder, yaml converter, time zones, css formatter, javascript formatter, code beautifier, developer tools"
     />
     <meta name="robots" content="index, follow" />
     <meta name="author" content="Tim Dodd" />
@@ -16,6 +16,18 @@
       content="UtilPlex offers fast, no-fuss online tools for formatting JSON, SQL, CSS, JavaScript, converting JSON to YAML, and more."
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    
+    <!-- Open Graph Meta Tags -->
+    <meta property="og:title" content="UtilPlex | Free Online JSON Formatter, SQL Beautifier, YAML Converter" />
+    <meta property="og:description" content="UtilPlex offers fast, no-fuss online tools for formatting JSON, SQL, CSS, JavaScript, converting JSON to YAML, and more." />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://utilplex.com" />
+    <meta property="og:site_name" content="UtilPlex" />
+    
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="UtilPlex | Free Online JSON Formatter, SQL Beautifier, YAML Converter" />
+    <meta name="twitter:description" content="UtilPlex offers fast, no-fuss online tools for formatting JSON, SQL, CSS, JavaScript, converting JSON to YAML, and more." />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link
       rel="stylesheet"

src/sitemap.xml

@@ -24,6 +24,10 @@
         <loc>https://utilplex.com/format/json</loc>
         <lastmod>2025-06-17</lastmod>
     </url>
+    <url>
+        <loc>https://utilplex.com/format/scss</loc>
+        <lastmod>2025-06-18</lastmod>
+    </url>
     <url>
         <loc>https://utilplex.com/format/sql</loc>
         <lastmod>2025-06-17</lastmod>