fix: dummy links won't redirect to front page (#95)

.github/workflows/buildsize.yml

@@ -10,7 +10,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
       - uses: actions/cache@v3
         with:
           path: ~/.npm

.github/workflows/lighthouse.yml

@@ -7,7 +7,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
       - uses: actions/cache@v3
         with:
           path: ~/.npm

.github/workflows/tests.yml

@@ -7,7 +7,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18'
       - uses: actions/cache@v3
         with:
           path: ~/.npm

src/app/components/carousel/carousel1/carousel1.component.html

@@ -2,7 +2,8 @@
 	<button
 		aria-label="Slide back"
 		type="button"
-		class="absolute left-0 z-30 p-2 ml-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400"
+		[ngClass]="['bg' + contrast]"
+		class="absolute left-0 z-30 p-2 ml-10 bg-opacity-50 rounded-full focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400"
 	>
 		<svg
 			class="w-4 h-4"
@@ -28,13 +29,14 @@
 			<img
 				src="https://source.unsplash.com/random/240x360/?{{ i }}"
 				alt="Image {{ i }}"
-				class="object-cover object-center h-96 aspect-square bg-gray-500"
+				class="object-cover object-center bg-gray-500 h-96 aspect-square"
 			/>
 		</div>
 	</div>
 	<button
 		aria-label="Slide forward"
-		class="absolute right-0 z-30 p-2 mr-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400"
+		[ngClass]="['bg' + contrast]"
+		class="absolute right-0 z-30 p-2 mr-10 bg-opacity-50 rounded-full focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400"
 		id="next"
 	>
 		<svg

src/app/components/timeline/timeline3/timeline3.component.html

@@ -45,15 +45,15 @@ <h3 class="font-medium" [ngClass]="['text' + defaultInv]">
 						class="px-4 py-2 mb-2 text-sm border rounded sm:mb-0"
 						[ngClass]="['bg' + default, 'border' + plain, 'hover:border' + contrast]"
 						rel="noopener noreferrer"
-						href="/"
+						href="#"
 					>
 						Do something
 					</a>
 					<a
 						class="px-4 py-2 text-sm border rounded"
 						[ngClass]="['bg' + default, 'border' + plain, 'hover:border' + contrast]"
 						rel="noopener noreferrer"
-						href="/"
+						href="#"
 					>
 						Do something else
 					</a>
@@ -96,7 +96,7 @@ <h3 class="font-medium" [ngClass]="['text' + defaultInv]">
 						class="px-4 py-6 rounded-md shadow"
 						[ngClass]="['bg' + contrast]"
 						rel="noopener noreferrer"
-						href="/"
+						href="#"
 					>
 						<div class="flex flex-col space-y-4">
 							<div class="flex flex-col space-y-1">

src/app/shared/directives/dummylink.directive.ts

@@ -0,0 +1,22 @@
+import {Directive, Input} from '@angular/core';
+
+@Directive({
+	selector: '[href]',
+	host: {
+		'(click)': 'handleLinkClick($event)',
+	},
+})
+export class DummylinkDirective {
+	@Input() href;
+
+	/**
+	 * Prevents the default action of the link if the href is empty or '#'
+	 * So basically this prevents the <a> in the components from redirecting to the front page
+	 */
+	handleLinkClick(event) {
+		if (this.href === '' || this.href === '#') {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+	}
+}

src/app/shared/shared.module.ts

@@ -13,6 +13,7 @@ import {ShowcaseComponent} from '@shared/components/showcase/showcase.component'
 import {SearchComponent} from '@shared/components/search/search.component';
 import {EmptyChildRouteComponent} from '@shared/components/empty-child-route/empty-child-route.component';
 import {AdsComponent} from './components/ads/ads.component';
+import {DummylinkDirective} from './directives/dummylink.directive';
 
 const components = [
 	AdsComponent,
@@ -24,12 +25,15 @@ const components = [
 	ShowcaseComponent,
 	ShowCodeComponent,
 ];
+
 const pipes = [FilterPipe];
 
+const directives = [DummylinkDirective];
+
 @NgModule({
 	imports: [CommonModule, HttpClientModule, FormsModule, RouterModule],
-	declarations: [...components, ...pipes],
-	exports: [CommonModule, HttpClientModule, FormsModule, ...components, ...pipes],
+	declarations: [...components, ...pipes, ...directives],
+	exports: [CommonModule, HttpClientModule, FormsModule, ...components, ...pipes, ...directives],
 	providers: [],
 })
 export class SharedModule {}

src/app/templates/portfolio/portfolio2/portfolio2.component.html

@@ -3,15 +3,15 @@
 		<header
 			class="container flex items-center justify-between w-full max-w-3xl px-6 py-10 mx-auto xl:max-w-5xl"
 		>
-			<a rel="noopener noreferrer" href="/" class="block h-6 text-2xl font-semibold">
+			<a rel="noopener noreferrer" href="#" class="block h-6 text-2xl font-semibold">
 				Leroy Jenkins
 			</a>
 			<div class="flex items-center">
 				<div class="hidden space-x-2 font-medium sm:block">
-					<a class="p-1" rel="noopener noreferrer" href="/">Blog</a>
-					<a class="p-1" rel="noopener noreferrer" href="/">Tags</a>
-					<a class="p-1" rel="noopener noreferrer" href="/">Projects</a>
-					<a class="p-1" rel="noopener noreferrer" href="/">About</a>
+					<a class="p-1" rel="noopener noreferrer" href="#">Blog</a>
+					<a class="p-1" rel="noopener noreferrer" href="#">Tags</a>
+					<a class="p-1" rel="noopener noreferrer" href="#">Projects</a>
+					<a class="p-1" rel="noopener noreferrer" href="#">About</a>
 				</div>
 				<button
 					aria-label="Toggle Dark Mode"
@@ -64,7 +64,7 @@
 									class="text-2xl font-bold tracking-widest"
 									[ngClass]="['text' + contrast]"
 									rel="noopener noreferrer"
-									href="/"
+									href="#"
 								>
 									Blog
 								</a>
@@ -74,7 +74,7 @@
 									class="text-2xl font-bold tracking-widest"
 									[ngClass]="['text' + contrast]"
 									rel="noopener noreferrer"
-									href="/"
+									href="#"
 								>
 									Tags
 								</a>
@@ -84,7 +84,7 @@
 									class="text-2xl font-bold tracking-widest"
 									[ngClass]="['text' + contrast]"
 									rel="noopener noreferrer"
-									href="/"
+									href="#"
 								>
 									Projects
 								</a>
@@ -94,7 +94,7 @@
 									class="text-2xl font-bold tracking-widest"
 									[ngClass]="['text' + contrast]"
 									rel="noopener noreferrer"
-									href="/"
+									href="#"
 								>
 									About
 								</a>