refactor: add footer component

edbzn · May 3, 2024 · fc55654 · fc55654
1 parent 9141f32
commit fc55654
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 45 deletions.
diff --git a/rspack.config.js b/rspack.config.js
@@ -88,7 +88,7 @@ module.exports = composePlugins(withNx(), withWeb(), (baseConfig, ctx) => {
         },
         // Component styles
         {
-          test: /\.?(scss)$/,
+          test: /\.(sa|sc|c)ss$/,
           resourceQuery: /\?ngResource/,
           use: [
             {
@@ -102,11 +102,6 @@ module.exports = composePlugins(withNx(), withWeb(), (baseConfig, ctx) => {
             },
           ],
         },
-        {
-          test: /\.?(css)$/,
-          resourceQuery: /\?ngResource/,
-          use: [],
-        },
         {
           // Mark files inside `rxjs/add` as containing side effects.
           // If this is fixed upstream and the fixed version becomes the minimum

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -12,6 +12,4 @@ <h1>{{ title }}</h1>
 
 </main>
 
-<footer>
-  🧪 Experiment by <a href="https://twitter.com/edbzn">Edouard Bozon</a>
-</footer>
+<app-footer />
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -22,14 +22,6 @@ img {
   margin: 0 8px;
 }
 
-footer {
-  margin-top: 2rem
-}
-
-a {
-  text-decoration: none;
-}
-
 section {
   display: flex;
   justify-content: center;

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { FooterComponent } from './footer.component';
 
 @Component({
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, FooterComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

diff --git a/src/app/footer.component.scss b/src/app/footer.component.scss
@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  margin-top: 2rem
+}
+
+a {
+  text-decoration: none;
+}
diff --git a/src/app/footer.component.ts b/src/app/footer.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  template: `
+    <footer>
+      🧪 Experiment by <a href="https://twitter.com/edbzn">Edouard Bozon</a>
+    </footer>
+  `,
+  styleUrl: './footer.component.scss',
+})
+export class FooterComponent {}