refactor: use body tags, comments, rem unused code/test spec & use of…

… any
AndrewJBateman · Jan 12, 2024 · a5e7e15 · a5e7e15
1 parent cbd7aef
commit a5e7e15
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 99 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
 		"watch": "ng build --watch --configuration development",
 		"lint": "ng lint",
 		"lint:fix": "ng lint --fix",
-		"prettier": "npx prettier --write ."
+		"prettier": "prettier --write .",
+    "test": "ng test"
 	},
 	"private": true,
 	"dependencies": {
@@ -23,8 +24,8 @@
 		"@angular/platform-server": "^17.0.8",
 		"@angular/router": "^17.0.8",
 		"@angular/service-worker": "^17.0.8",
-		"rxjs": "~7.8.1",
-		"zone.js": "~0.14.3"
+		"rxjs": "7.8.1",
+		"zone.js": "0.14.3"
 	},
 	"devDependencies": {
 		"@angular-devkit/build-angular": "^17.0.9",

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -2,26 +2,47 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { HomeComponent } from './components/home/home.component';
-import { NotFoundComponent } from './components/not-found/not-found.component';
 
 const routes: Routes = [
 	{
 		path: '',
 		component: HomeComponent,
+		data: {
+			title: 'Home',
+			description: 'Welcome to the home page',
+		},
 	},
 	{
 		path: 'about',
 		loadComponent: () =>
 			import('./components/about/about.component').then(m => m.AboutComponent),
+		data: {
+			title: 'About',
+			description: 'Learn more about us',
+		},
 	},
 	{
 		path: 'contact',
 		loadComponent: () =>
 			import('./components/contact/contact.component').then(
 				m => m.ContactComponent
 			),
+		data: {
+			title: 'Contact',
+			description: 'Get in touch with us',
+		},
+	},
+	{
+		path: '**',
+		loadComponent: () =>
+			import('./components/not-found/not-found.component').then(
+				m => m.NotFoundComponent
+			),
+		data: {
+			title: 'Not Found',
+			description: 'Page not found',
+		},
 	},
-	{ path: '**', component: NotFoundComponent },
 ];
 
 @NgModule({

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,8 +1,11 @@
-<div class="app">
-	<app-nav></app-nav>
+<!--This code snippet represents a HTML structure for an application.
+  It includes a main container with a navigation component and a router
+  outlet for rendering different components based on the current route.-->
+<div class="app" role="application">
+	<app-nav role="navigation" />
 	<main>
 		<div class="container-fluid">
-			<router-outlet></router-outlet>
+			<router-outlet />
 		</div>
 	</main>
 </div>
diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html
@@ -1,8 +1,12 @@
+<!--
+This code snippet represents a HTML page for a 404 error (page not found). It includes a header with a meta description, a body with a centered container, and a message indicating that the requested page does not exist. It also includes a link to the home page. The HTML classes and styles used are for layout and styling purposes.
+-->
+
 <head>
 	<meta name="description" content="page not found error" />
 </head>
 
-<div class="flex justify-center w-full h-screen py-32 bg-gray-100">
+<body class="flex justify-center w-full h-screen py-32 bg-gray-100">
 	<div class="p-12 text-center border rounded-lg shadow-xl max-w-6/12">
 		<div class="pt-10 text-3xl font-bold md:text-3xl">404: Page not found</div>
 		<div class="mt-4 text-xl font-normal">
@@ -15,4 +19,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</body>
diff --git a/src/app/components/not-found/not-found.component.ts b/src/app/components/not-found/not-found.component.ts
@@ -1,3 +1,10 @@
+/**
+ * Represents a TypeScript class named NotFoundComponent.
+ * This class is an Angular component that is used to handle the "not found" page.
+ * It is decorated with the @Component decorator, which provides metadata for the component.
+ * The component has a selector of 'app-not-found' and a template URL of './not-found.component.html'.
+ * The standalone property is set to true, indicating that this component can be used independently.
+ */
 import { Component } from '@angular/core';
 
 @Component({

diff --git a/src/app/models/unsplash.ts b/src/app/models/unsplash.ts
@@ -9,6 +9,7 @@ export interface IUnsplashResponse {
 		height: number;
 		color: string;
 		blur_hash: string;
+		breadcrumbs: [];
 		description: string;
 		alt_description: string;
 		urls: {
@@ -24,50 +25,16 @@ export interface IUnsplashResponse {
 			download: string;
 			download_location: string;
 		};
-		categories: any[];
+		location: ILocation;
+		position: {
+			latitude: null;
+			longitude: null;
+		};
 		likes: number;
 		liked_by_user: boolean;
-		current_user_collections: {
-			id: number;
-			title: string;
-			published_at: string;
-			last_collected_at: string;
-			updated_at: string;
-			cover_photo: any;
-			user: any;
-		}[];
-		sponsorship: any;
-		user: {
-			id: string;
-			updated_at: string;
-			username: string;
-			name: string;
-			first_name: string;
-			last_name: string;
-			twitter_username: string | null;
-			portfolio_url: string;
-			bio: string;
-			location: string;
-			links: {
-				self: string;
-				html: string;
-				photos: string;
-				likes: string;
-				portfolio: string;
-				following: string;
-				followers: string;
-			};
-			profile_image: {
-				small: string;
-				medium: string;
-				large: string;
-			};
-			instagram_username: string;
-			total_collections: number;
-			total_likes: number;
-			total_photos: number;
-			accepted_tos: boolean;
-		};
+		current_user_collections: [];
+		sponsorship: null;
+		user: IUser;
 		exif: {
 			make: string;
 			model: string;
@@ -76,23 +43,55 @@ export interface IUnsplashResponse {
 			focal_length: string;
 			iso: number;
 		};
-		location: {
-			title: string;
-			name: string;
-			city: string | null;
-			country: string;
-			position: {
-				latitude: number;
-				longitude: number;
-			};
-		};
 		views: number;
 		downloads: number;
 	};
-	headers: NonNullable<unknown>;
+	headers: IUnsplashResponseHeaders;
 	ok: boolean;
 	status: number;
 	statusText: string;
 	type: number;
 	url: string;
 }
+
+interface IUser {
+	id: string;
+	updated_at: string;
+	username: string;
+	name: string;
+	first_name: string;
+	last_name: string;
+	twitter_username: string | null;
+	portfolio_url: string;
+	bio: string;
+	location: null;
+	links: IUnsplashLinks;
+
+	profile_image: {
+		small: string;
+		medium: string;
+		large: string;
+	};
+	instagram_username: string;
+	total_collections: number;
+	total_likes: number;
+	total_photos: number;
+	accepted_tos: boolean;
+}
+
+interface IUnsplashLinks {
+	self: string;
+	html: string;
+	download: string;
+	download_location: string;
+}
+
+interface ILocation {
+	city: null;
+	country: null;
+	name: null;
+}
+
+interface IUnsplashResponseHeaders {
+	// Define the properties of the headers object here
+}
diff --git a/src/app/services/github.service.spec.ts b/src/app/services/github.service.spec.ts
diff --git a/src/index.html b/src/index.html
@@ -14,5 +14,6 @@
 		<noscript
 			>Please enable JavaScript to continue using this application.</noscript
 		>
+		<img src="example.jpg" alt="Example image" />
 	</body>
 </html>
diff --git a/src/manifest.webmanifest b/src/manifest.webmanifest
@@ -1,7 +1,8 @@
 {
-	"name": "angular-tailwind-unsplash",
-	"short_name": "angular-tailwind-unsplash",
-	"theme_color": "#1976d2",
+	"name": "Angular Tailwind Unsplash",
+	"short_name": "ATU",
+	"description": "An Angular application using Tailwind CSS and Unsplash API to display and search for images.",
+	"theme_color": "#808080",
 	"background_color": "#fafafa",
 	"display": "standalone",
 	"scope": "./",

diff --git a/tsconfig.json b/tsconfig.json
@@ -9,20 +9,20 @@
 		"noImplicitReturns": true,
 		"noFallthroughCasesInSwitch": true,
 		"sourceMap": true,
-		"declaration": false,
+		"declaration": true,
 		"downlevelIteration": true,
 		"experimentalDecorators": true,
 		"moduleResolution": "node",
 		"importHelpers": true,
-		"target": "ES2022",
+		"target": "ESNext",
 		"module": "es2020",
 		"lib": ["es2018", "dom"],
-		"useDefineForClassFields": false
+		"useDefineForClassFields": true
 	},
 	"angularCompilerOptions": {
-		"enableI18nLegacyMessageIdFormat": false,
 		"strictInjectionParameters": true,
 		"strictInputAccessModifiers": true,
-		"strictTemplates": true
+		"strictTemplates": true,
+    "strictOutputEventTypes": true
 	}
 }