Initial Commit

Author: sid-devspot

angular.json

@@ -33,8 +33,9 @@
                 "input": "public"
               }
             ],
-            "styles": [
-              "src/styles.scss"
+            "styles": ["src/styles.scss"],
+            "scripts": [
+              "node_modules/@dev.spot/css-fusion-g/dist/cssfusion-g/js/cssfusion-g.umd.js"
             ]
           },
           "configurations": {
@@ -87,9 +88,7 @@
                 "input": "public"
               }
             ],
-            "styles": [
-              "src/styles.scss"
-            ]
+            "styles": ["src/styles.scss"]
           }
         }
       }

package-lock.json

@@ -22,12 +22,15 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/cdk": "^20.2.14",
     "@angular/common": "^20.3.0",
     "@angular/compiler": "^20.3.0",
     "@angular/core": "^20.3.0",
     "@angular/forms": "^20.3.0",
+    "@angular/material": "^20.2.14",
     "@angular/platform-browser": "^20.3.0",
     "@angular/router": "^20.3.0",
+    "@dev.spot/css-fusion-g": "^1.1.1-beta",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },
@@ -44,4 +47,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.9.2"
   }
-}
+}

package.json

@@ -0,0 +1,65 @@
+// ===== Common reusable styles for notes =====
+
+@mixin pageContainer() {
+  padding: 16px;
+}
+
+.note-header {
+  margin-bottom: 16px;
+}
+
+.note-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.note-subtitle {
+  margin-top: 6px;
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.note-card {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 14px;
+}
+
+.note-heading {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 10px;
+}
+
+.note-text {
+  margin: 0;
+  line-height: 1.6;
+}
+
+.note-list {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 16px;
+
+  li {
+    margin-bottom: 8px;
+  }
+}
+
+.note-code {
+  margin-top: 12px;
+  padding: 12px;
+  border-radius: 10px;
+  background: #0f172a;
+  color: #e2e8f0;
+  overflow-x: auto;
+
+  code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+    font-size: 14px;
+  }
+}

public/logo.svg

@@ -1,21 +1,20 @@
-import { NgModule, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
+import {
+  NgModule,
+  provideBrowserGlobalErrorListeners,
+  provideZonelessChangeDetection,
+} from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing-module';
 import { App } from './app';
 
+// Modules
+import { MatIconModule } from '@angular/material/icon';
+
 @NgModule({
-  declarations: [
-    App
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule
-  ],
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-    provideZonelessChangeDetection()
-  ],
-  bootstrap: [App]
+  declarations: [App],
+  imports: [BrowserModule, AppRoutingModule, MatIconModule],
+  providers: [provideBrowserGlobalErrorListeners(), provideZonelessChangeDetection()],
+  bootstrap: [App],
 })
-export class AppModule { }
+export class AppModule {}

public/styles/common.scss

@@ -1,10 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', pathMatch: 'full', redirectTo: 'javascript' },
+  {
+    path: 'javascript',
+    loadChildren: () => import('./javascript/javascript-module').then((m) => m.JavascriptModule),
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}