Update showcase folder structure

apps/showcase/angular.json

@@ -11,29 +11,29 @@
                 }
             },
             "root": "",
-            "sourceRoot": "src",
+            "sourceRoot": "",
             "prefix": "app",
             "architect": {
                 "build": {
                     "builder": "@angular-devkit/build-angular:application",
                     "options": {
                         "outputPath": "dist/showcase",
-                        "index": "src/index.html",
-                        "browser": "src/main.ts",
+                        "index": "index.html",
+                        "browser": "app/main.ts",
                         "polyfills": ["zone.js"],
-                        "tsConfig": "tsconfig.app.json",
+                        "tsConfig": "./tsconfig.json",
                         "inlineStyleLanguage": "scss",
-                        "assets": ["src/favicon.ico", "src/assets"],
-                        "styles": ["src/styles.scss"],
+                        "assets": ["assets"],
+                        "styles": ["assets/styles/global.scss"],
                         "scripts": ["./node_modules/prismjs/prism.js", "./node_modules/prismjs/components/prism-typescript.js", "./node_modules/prismjs/components/prism-scss.js", "./node_modules/prismjs/components/prism-bash.js"],
                         "allowedCommonJsDependencies": ["chart.js", "xlsx", "jspdf-autotable", "file-saver", "jspdf", "quill", "core-js", "raf", "rgbcolor"],
-                        "server": "src/main.server.ts",
+                        "server": "server/main.server.ts",
                         "prerender": {
                             "discoverRoutes": false,
-                            "routesFile": "routes.txt"
+                            "routesFile": "router/routes.txt"
                         },
                         "ssr": {
-                            "entry": "server.ts"
+                            "entry": "server/server.ts"
                         }
                     },
                     "configurations": {
@@ -65,17 +65,6 @@
                     "options": {
                         "buildTarget": "showcase:build"
                     }
-                },
-                "test": {
-                    "builder": "@angular-devkit/build-angular:karma",
-                    "options": {
-                        "polyfills": ["zone.js", "zone.js/testing"],
-                        "tsConfig": "tsconfig.spec.json",
-                        "inlineStyleLanguage": "scss",
-                        "assets": ["src/favicon.ico", "src/assets"],
-                        "styles": ["src/styles.scss"],
-                        "scripts": []
-                    }
                 }
             }
         }

apps/showcase/src/app/showcase/layout/app.config.ts → apps/showcase/app/app.config.ts

@@ -1,11 +1,10 @@
-import { ApplicationConfig } from '@angular/core';
-import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';
-
+import { routes } from '@/router/app.routes';
+import Noir from '@/themes/app-theme';
 import { provideHttpClient, withFetch } from '@angular/common/http';
+import { ApplicationConfig } from '@angular/core';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { routes } from './app.routes';
+import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';
 import { providePrimeNgConfig } from 'primeng/api';
-import Noir from '../themes/app-theme';
 
 export const appConfig: ApplicationConfig = {
     providers: [

apps/showcase/app/main.ts

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

apps/showcase/assets/styles/global.scss

@@ -0,0 +1,6 @@
+@import './tailwind/main.css';
+@import './layout/layout.scss';
+@import 'primeicons/primeicons.css';
+@import 'quill/dist/quill.snow.css';
+@import './flags.css';
+@import '@docsearch/css/dist/style.css';

apps/showcase/src/assets/showcase/styles/layout/_docsearch.scss → apps/showcase/assets/styles/layout/_docsearch.scss

@@ -1,147 +1,147 @@
-.DocSearch-Button {
-    border-radius: 6px;
-    border: 1px solid var(--border-color);
-    height: 2rem;
-    background-color: var(--card-background);
-    margin: 0;
-    transition: outline-color .2s, border-color .2s;
-    outline-color: transparent;
-    padding: 0 .5rem;
-    @include focus-visible();
-
-    &:hover {
-        border-color: var(--primary-color);
-        box-shadow: none;
-    }
-
-    .DocSearch-Search-Icon {
-        width: 1rem;
-        height: 1rem;
-    }
-
-    .DocSearch-Button-Keys {
-        overflow: hidden;
-        min-width: auto;
-        height: auto;
-        background: transparent;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: auto;
-        padding: 0;
-        gap: 2px;
-
-        .DocSearch-Button-Key {
-            background: transparent;
-            display: flex;
-            padding: 0;
-            margin: 0;
-            top: 0;
-            border-radius: 0;
-            height: auto;
-            width: auto;
-            font-family: inherit;
-
-            &:first-child {
-                font-size: 0.75rem;
-                line-height: normal;
-            }
-
-            &:last-child {
-                justify-content: start;
-                align-items: center;
-                font-size: 0.75rem;
-                position: relative;
-
-                &::before {
-                    content: "\e90d";
-                    display: flex;
-                    color: var(--text-color);
-                    font-family: "primeicons";
-                    font-size: .4rem;
-                    opacity: .7;
-                    margin-right: 2px;
-                    height: 13.5px;
-                    align-items: center;
-                    font-weight: 700;
-
-                }
-            }
-        }        
-    }
-}
-
-.DocSearch-Container {
-    z-index: 1101;
-}
-
-.DocSearch-Modal {
-    border: 1px solid var(--border-color);
-    box-shadow: none;
-}
-
-.DocSearch-Footer {
-    box-shadow: none;
-    border-top: 1px solid var(--border-color);
-    background-color: var(--overlay-background);
-}
-
-.DocSearch-Form {
-    background: var(--card-background);
-    box-shadow: none;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    transition: border-color .3s;
-
-    &:hover {
-        border-color: var(--primary-color);
-    }
-
-    .DocSearch-MagnifierLabel, .DocSearch-Reset {
-        color: var(--text-color);
-    }
-}
-
-.DocSearch-Hit {
-    border-bottom: 1px solid var(--border-color);
-    padding-bottom: 0;
-    margin-bottom: .25rem;
-}
-
-.DocSearch-Hit-source {
-    color: var(--primary-text-color);
-}
-
-.DocSearch-Logo .cls-1, .DocSearch-Logo .cls-2 {
-    fill: var(--primary-text-color);
-}
-
-.DocSearch-Prefill {
-    color: var(--primary-text-color);
-}
-
-.DocSearch-Button-Placeholder {
-    text-align: center;
-    display: inline-block;
-    font-size: .875rem;
-}
-
-:root {
-    --docsearch-searchbox-focus-background: var(--card-background);
-    --docsearch-text-color: var(--text-color);
-    --docsearch-muted-color: var(--text-color);
-    --docsearch-searchbox-background: var(--card-background);
-    --docsearch-text-color: var(--text-color);
-    --docsearch-modal-background: var(--overlay-background);
-    --docsearch-key-gradient: var(--ground-background);
-    --docsearch-key-shadow: none;
-    --docsearch-container-background: var(--docsearch-mask-background);
-    --docsearch-hit-background: var(--overlay-background);
-    --docsearch-hit-shadow: none;
-    --docsearch-spacing: 1rem;
-    --docsearch-hit-color: var(--text-color);
-    --docsearch-highlight-color: var(--primary-color);
-    --docsearch-hit-active-color: var(--primary-contrast-color);
-    --docsearch-searchbox-shadow: none;
-}
-
+.DocSearch-Button {
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    height: 2rem;
+    background-color: var(--card-background);
+    margin: 0;
+    transition: outline-color .2s, border-color .2s;
+    outline-color: transparent;
+    padding: 0 .5rem;
+    @include focus-visible();
+
+    &:hover {
+        border-color: var(--primary-color);
+        box-shadow: none;
+    }
+
+    .DocSearch-Search-Icon {
+        width: 1rem;
+        height: 1rem;
+    }
+
+    .DocSearch-Button-Keys {
+        overflow: hidden;
+        min-width: auto;
+        height: auto;
+        background: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        padding: 0;
+        gap: 2px;
+
+        .DocSearch-Button-Key {
+            background: transparent;
+            display: flex;
+            padding: 0;
+            margin: 0;
+            top: 0;
+            border-radius: 0;
+            height: auto;
+            width: auto;
+            font-family: inherit;
+
+            &:first-child {
+                font-size: 0.75rem;
+                line-height: normal;
+            }
+
+            &:last-child {
+                justify-content: start;
+                align-items: center;
+                font-size: 0.75rem;
+                position: relative;
+
+                &::before {
+                    content: "\e90d";
+                    display: flex;
+                    color: var(--text-color);
+                    font-family: "primeicons";
+                    font-size: .4rem;
+                    opacity: .7;
+                    margin-right: 2px;
+                    height: 13.5px;
+                    align-items: center;
+                    font-weight: 700;
+
+                }
+            }
+        }        
+    }
+}
+
+.DocSearch-Container {
+    z-index: 1101;
+}
+
+.DocSearch-Modal {
+    border: 1px solid var(--border-color);
+    box-shadow: none;
+}
+
+.DocSearch-Footer {
+    box-shadow: none;
+    border-top: 1px solid var(--border-color);
+    background-color: var(--overlay-background);
+}
+
+.DocSearch-Form {
+    background: var(--card-background);
+    box-shadow: none;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    transition: border-color .3s;
+
+    &:hover {
+        border-color: var(--primary-color);
+    }
+
+    .DocSearch-MagnifierLabel, .DocSearch-Reset {
+        color: var(--text-color);
+    }
+}
+
+.DocSearch-Hit {
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 0;
+    margin-bottom: .25rem;
+}
+
+.DocSearch-Hit-source {
+    color: var(--primary-text-color);
+}
+
+.DocSearch-Logo .cls-1, .DocSearch-Logo .cls-2 {
+    fill: var(--primary-text-color);
+}
+
+.DocSearch-Prefill {
+    color: var(--primary-text-color);
+}
+
+.DocSearch-Button-Placeholder {
+    text-align: center;
+    display: inline-block;
+    font-size: .875rem;
+}
+
+:root {
+    --docsearch-searchbox-focus-background: var(--card-background);
+    --docsearch-text-color: var(--text-color);
+    --docsearch-muted-color: var(--text-color);
+    --docsearch-searchbox-background: var(--card-background);
+    --docsearch-text-color: var(--text-color);
+    --docsearch-modal-background: var(--overlay-background);
+    --docsearch-key-gradient: var(--ground-background);
+    --docsearch-key-shadow: none;
+    --docsearch-container-background: var(--docsearch-mask-background);
+    --docsearch-hit-background: var(--overlay-background);
+    --docsearch-hit-shadow: none;
+    --docsearch-spacing: 1rem;
+    --docsearch-hit-color: var(--text-color);
+    --docsearch-highlight-color: var(--primary-color);
+    --docsearch-hit-active-color: var(--primary-contrast-color);
+    --docsearch-searchbox-shadow: none;
+}
+

apps/showcase/assets/styles/tailwind/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/showcase/src/app/showcase/layout/doc/app.code.component.ts → apps/showcase/components/doc/app.code.component.ts

@@ -1,6 +1,6 @@
+import { Code, ExtFile, RouteFile } from '@/domain/code';
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { Component, ElementRef, Inject, Input, NgModule, PLATFORM_ID, ViewChild, booleanAttribute } from '@angular/core';
-import { Code, ExtFile, RouteFile } from '@domain/code';
 import { ButtonModule } from 'primeng/button';
 import { TooltipModule } from 'primeng/tooltip';
 import { useCodeSandbox, useStackBlitz } from './codeeditor';