implementation nucleus-angular

package.json

@@ -35,6 +35,7 @@
     "@angular/platform-browser": "^18.2.2",
     "@angular/platform-browser-dynamic": "^18.2.2",
     "@angular/router": "^18.2.2",
+    "nucleus-angular": "^0.0.6",
     "rxjs": "~7.8.1",
     "tslib": "^2.7.0",
     "zone.js": "~0.14.10"

src/app/app.component.html

@@ -1,13 +1,5 @@
-<header>
-  <img
-    width="200"
-    alt="Angular Logo"
-    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
-  />
-</header>
-<main>
-  <darkmode-angular />
-</main>
-<footer>
-  <a href="https://github.com/livresaber/darkmode-angular" target="_blank">Version {{appVersion}} &#64;LivreSaber</a>
-</footer>
+<nucleus-angular-app [config]="configNucleus">
+  <div class="content">
+    <darkmode-angular />
+  </div>
+</nucleus-angular-app>

src/app/app.component.scss

@@ -1,9 +1,8 @@
-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  a {
-    text-decoration: none;
-    color: var(--color-text);
-  }
+::ng-deep .content .btn-mode {
+  position: relative !important;
+  z-index: 1;
+}
+
+::ng-deep .btn-mode.hiddenLabel {
+  display: none;
 }

src/app/app.component.ts

@@ -1,12 +1,46 @@
 import { Component } from '@angular/core';
 
 import pkg from '../../package.json';
+import { ExampleComponent } from './app.example';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  appVersion = pkg.version;
+  public appVersion;
+  public angularVersion;
+  public configNucleus: {
+    name: string;
+    github: string;
+    npm: string;
+    appVersion: string;
+    angularVersion: string;
+    stepsInstall: Array<{ name: string; language: string; content: string }>;
+  };
+
+  constructor() {
+    this.appVersion = pkg.version;
+    this.angularVersion = pkg.dependencies?.['@angular/core'].replace('^', '');
+    this.configNucleus = {
+      name: 'darkmode-angular',
+      github: 'https://github.com/livresaber/darkmode-angular',
+      npm: 'https://www.npmjs.com/package/darkmode-angular',
+      appVersion: this.appVersion,
+      angularVersion: this.angularVersion,
+      stepsInstall: [
+        {
+          name: 'Install',
+          language: 'bash',
+          content: 'npm install darkmode-angular',
+        },
+        {
+          name: 'Usage',
+          language: 'tsx',
+          content: ExampleComponent,
+        },
+      ],
+    };
+  }
 }

src/app/app.example.ts

@@ -0,0 +1,10 @@
+export const ExampleComponent = `// Example Component
+import { Component } from '@angular/core';
+import { DarkmodeComponent } from 'darkmode-angular';
+
+@Component({
+  selector: 'app-example',
+  imports: [DarkmodeComponent],
+  template: \`<darkmode-angular />\`,
+})
+export class AppExample {}`

src/app/app.module.ts

@@ -3,10 +3,11 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 import { DarkmodeComponent } from 'projects/darkmode-angular/src/public-api';
+import { NucleusAngularApp } from 'nucleus-angular';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, DarkmodeComponent],
+  imports: [BrowserModule, DarkmodeComponent, NucleusAngularApp],
   providers: [],
   bootstrap: [AppComponent],
 })

src/styles.scss

@@ -1,11 +1,4 @@
 body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  padding: 0;
-  margin: 0;
-  font-family: Arial;
   color: var(--color-text);
   background: var(--color-background);
 }