chore: linting, rem unused npm scripts

.markdownlint.json

@@ -0,0 +1,6 @@
+{
+  "MD010": false,
+  "MD007": false,
+  "MD013": false,
+  "MD004": false
+}

.prettierrc.json

@@ -1,12 +1,12 @@
 {
-  "tabWidth": 2,
-  "useTabs": true,
-  "singleQuote": true,
-  "semi": true,
-  "bracketSpacing": true,
-  "arrowParens": "avoid",
-  "trailingComma": "es5",
-  "bracketSameLine": true,
-  "printWidth": 80,
-  "endOfLine": "auto"
+	"tabWidth": 2,
+	"useTabs": true,
+	"singleQuote": true,
+	"semi": true,
+	"bracketSpacing": true,
+	"arrowParens": "avoid",
+	"trailingComma": "es5",
+	"bracketSameLine": true,
+	"printWidth": 80,
+	"endOfLine": "auto"
 }

.vscode/extensions.json

@@ -3,11 +3,7 @@
 	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
 
 	// List of extensions which should be recommended for users of this workspace.
-	"recommendations": [
-
-	],
+	"recommendations": [],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
-	"unwantedRecommendations": [
-
-	]
-}
+	"unwantedRecommendations": []
+}

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "typescript.tsdk": "node_modules\\typescript\\lib"
+	"typescript.tsdk": "node_modules\\typescript\\lib"
 }

README.md

@@ -31,23 +31,21 @@
 * [RxJS take(1) operater](https://advancedweb.hu/rxjs-the-differences-between-first-take-1-and-single/) used to take first element from the Unsplash & Github observable streams then close them, so unsubscribing is not necessary.
 * The Github basic user info API does not require an API key. The Unsplash API does.
 * [Angular HttpClient](https://angular.io/api/common/http/HttpClient) GET request response overloads 1 to 15 carefully considered, especially http header 'observe' and 'responseType', to ensure correct response type from photo service which returns type `Observable<ArrayBuffer>` when the Home page function `onChangePhoto()` is expecting interface type `Observable<IUnsplashResponse>`
-* [Angular Hydration](https://angular.io/guide/hydration) added. "Hydration is the process that restores the server side rendered application on the client. This includes things like reusing the server rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes."
 
 ## :camera: Screenshots
 
 | ![Angular page](./img/home.png) | ![Angular page](./img/about.png) | ![Angular page](./img/contact.png) |
-|:---:|:---:|:---:|
-| Home | About | Contact |
+| :-----------------------------: | :------------------------------: | :--------------------------------: |
+|              Home               |              About               |              Contact               |
 
 ![Angular page](./img/lighthouse-home.jpg)
 ![Angular page](./img/lighthouse-about.jpg)
 ![Angular page](./img/lighthouse-contact.jpg)
 
 ## :signal_strength: Technologies
 
-* [Angular framework v16](https://angular.io/)
-* [Angular PWA v16](https://angular.io/guide/service-worker-getting-started) - app uses service workers so app will stay up if there is a loss of network - all necessary files are cached, including index.html, icons etc.
-* [Server-side rendering (SSR) with Angular Universal v16](https://angular.io/guide/universal) to render app on an express.js server
+* [Angular framework v17](https://angular.io/)
+* [Angular PWA v17](https://angular.io/guide/service-worker-getting-started) - app uses service workers so app will stay up if there is a loss of network - all necessary files are cached, including index.html, icons etc.
 * [Angular async pipes](https://angular.io/api/common/AsyncPipe) used with Unsplash asynchronous Observable objects
 * [Reactive Extensions Library for Javascript RxJS v7](https://rxjs.dev/)
 * [TailwindCSS v3](https://tailwindcss.com/) CSS framework
@@ -60,11 +58,8 @@
 * Get yourself an [Unsplash Login & API Key](https://unsplash.com/developers).
 * Add API key to the `environments.ts` file
 * Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-* `npm run dev:ssr` to render app on local express server (SSR)
-* `npm run build:ssr` to create build file with SSR
-* `npm run serve:ssr` to run SSR build file
-* `npm run prerender` to create prerendered build file
 * Run `npm run build` for a production build with CSS purging.
+* Run `npm run lint` to lint all files and fix where possible
 * Run `http-server` to view build on an apple/android phone or simulator (pick 2nd http address supplied)
 * The build artifacts will be stored in the `dist/angular-tailwind-unsplash` directory.
 
@@ -100,22 +95,22 @@ photoQuery(): Observable<any> {
 ## :cool: Features
 
 * Lazy-loading of About and Contact pages
-* All 3 pages have >90% Lighthouse test scores
+* All 3 pages have good Lighthouse test scores
 * Tailwind build for production CSS purge results in a very small styles bundle (about 7kB)
 
 ## :clipboard: Status & To-Do List
 
-* Status: Working Server-Side-Rendered PWA. All files pass linting. Minor error with Unsplash samesite attributes to fix. Unsplash API key not being passed through to SSR during build so auth error in SSR version.
-* To-Do: Fis SSR auth error. Add CSP. Deploy (env. variable add to Netlify), add eslint, splash screens, tests, replace robots file info etc. and redo lighthouse.
+* Status: Working PWA. All files pass linting. Minor error with Unsplash samesite attributes to fix.
+* To-Do: Add CSP. Add text compression (Brotli, GZip...). Deploy (env. variable add to Netlify), splash screens, tests, replace robots file info etc. and redo lighthouse.
 
 ## :clap: Inspiration
 
 * [Angular Architects: article: Extending the Angular CLI’s build process without ejecting](https://www.angulararchitects.io/aktuelles/extending-the-angular-clis-build-process/)
 * [StackOverflow: How to solve semi-colon expected css(css-semicolonexpected)](https://stackoverflow.com/questions/61443484/how-to-solve-semi-colon-expected-csscss-semicolonexpected)
 * [dev.to: Setup TailwindCSS in Angular the easy way](https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l)
-* [LogRocket: Types vs. interfaces in TypeScript](https://blog.logrocket.com/types-vs-interfaces-in-typescript/)
 * [Free svg site](https://freesvg.org/) for butterfly svg on about page
 * [Stackoverflow: How to add rel=“preconnect” to tags other than link?](https://stackoverflow.com/questions/54900054/how-to-add-rel-preconnect-to-tags-other-than-link)
+* [Angular Architects: What’s new in Angular 17?](https://www.angulararchitects.io/en/blog/whats-new-in-angular-17/)
 
 ## :file_folder: License
 

karma.conf.js

@@ -2,43 +2,43 @@
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/angular-tailwind-unsplash'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
+	config.set({
+		basePath: '',
+		frameworks: ['jasmine', '@angular-devkit/build-angular'],
+		plugins: [
+			require('karma-jasmine'),
+			require('karma-chrome-launcher'),
+			require('karma-jasmine-html-reporter'),
+			require('karma-coverage'),
+			require('@angular-devkit/build-angular/plugins/karma'),
+		],
+		client: {
+			jasmine: {
+				// you can add configuration options for Jasmine here
+				// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+				// for example, you can disable the random execution with `random: false`
+				// or set a specific seed with `seed: 4321`
+			},
+			clearContext: false, // leave Jasmine Spec Runner output visible in browser
+		},
+		jasmineHtmlReporter: {
+			suppressAll: true, // removes the duplicated traces
+		},
+		coverageReporter: {
+			dir: require('path').join(
+				__dirname,
+				'./coverage/angular-tailwind-unsplash'
+			),
+			subdir: '.',
+			reporters: [{ type: 'html' }, { type: 'text-summary' }],
+		},
+		reporters: ['progress', 'kjhtml'],
+		port: 9876,
+		colors: true,
+		logLevel: config.LOG_INFO,
+		autoWatch: true,
+		browsers: ['Chrome'],
+		singleRun: false,
+		restartOnFileChange: true,
+	});
 };

ngsw-config.json

@@ -1,30 +1,30 @@
 {
-  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
-  "index": "/index.html",
-  "assetGroups": [
-    {
-      "name": "app",
-      "installMode": "prefetch",
-      "resources": {
-        "files": [
-          "/favicon.ico",
-          "/index.html",
-          "/manifest.webmanifest",
-          "/*.css",
-          "/*.js"
-        ]
-      }
-    },
-    {
-      "name": "assets",
-      "installMode": "lazy",
-      "updateMode": "prefetch",
-      "resources": {
-        "files": [
-          "/assets/**",
-          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
-        ]
-      }
-    }
-  ]
+	"$schema": "./node_modules/@angular/service-worker/config/schema.json",
+	"index": "/index.html",
+	"assetGroups": [
+		{
+			"name": "app",
+			"installMode": "prefetch",
+			"resources": {
+				"files": [
+					"/favicon.ico",
+					"/index.html",
+					"/manifest.webmanifest",
+					"/*.css",
+					"/*.js"
+				]
+			}
+		},
+		{
+			"name": "assets",
+			"installMode": "lazy",
+			"updateMode": "prefetch",
+			"resources": {
+				"files": [
+					"/assets/**",
+					"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+				]
+			}
+		}
+	]
 }