Fix/lint warnings

.github/workflows/lint.yml

@@ -266,7 +266,7 @@ jobs:
   badges:
     name: Update Lint Badges
     needs: [setup, lint]
-    if: always()
+    if: ${{ always() && github.event_name != 'pull_request' }}
     runs-on: ubuntu-latest
     continue-on-error: true
     steps:

.github/workflows/test.yml

@@ -431,7 +431,7 @@ jobs:
   badges:
     name: Update Test Badges
     needs: [setup, test]
-    if: always()
+    if: ${{ always() && github.event_name != 'pull_request' }}
     runs-on: ubuntu-latest
     continue-on-error: true
     steps:

apps/alpine/README.md

@@ -110,7 +110,7 @@ For simple interactive websites, Alpine hits the sweet spot. You get modern reac
 ## Real-World App
 Since the weather app is very simple, it may be helpful to see a more practical implementation of a Alpine.js app. So, checkout:
 
-<a href="https://github.com/Lissy93/who-dat"><img align="left" src="https://storage.googleapis.com/as93-screenshots/project-logos/who-dat.png" width="96"></a>
+<a href="https://github.com/Lissy93/who-dat"><img align="left" src="https://pixelflare.cc/alicia/logo/who-dat/w256" width="96"></a>
 
 > **Who Dat** - _WHOIS lookup for domain registration info_<br>
 > 🐙 Get it on GitHub at [github.com/Lissy93/who-dat](https://github.com/Lissy93/who-dat)<br>

apps/angular/README.md

@@ -110,7 +110,7 @@ For a simple weather app, we really didn't need any of Angular's big or flagship
 ## Real-World App
 Since the weather app is very simple, it may be helpful to see a more practical implementation of a Angular app. So, checkout:
 
-<a href="https://github.com/Lissy93/domain-locker"><img align="left" src="https://storage.googleapis.com/as93-screenshots/project-logos/domain-locker.png" width="96"></a>
+<a href="https://github.com/Lissy93/domain-locker"><img align="left" src="https://pixelflare.cc/alicia/logo/domain-locker/w256" width="96"></a>
 
 > **Domain Locker** - _Domain name portfolio manager_<br>
 > 🐙 Get it on GitHub at [github.com/Lissy93/domain-locker](https://github.com/Lissy93/domain-locker)<br>

apps/lit/README.md

@@ -109,7 +109,7 @@ But Lit really does shine for design systems and component libraries where you n
 ## Real-World App
 Since the weather app is very simple, it may be helpful to see a more practical implementation of a Lit app. So, checkout:
 
-<a href="https://github.com/Lissy93/email-comparison"><img align="left" src="https://storage.googleapis.com/as93-screenshots/project-logos/email-comparison.png" width="96"></a>
+<a href="https://github.com/Lissy93/email-comparison"><img align="left" src="https://pixelflare.cc/alicia/logo/email-comparison/w256" width="96"></a>
 
 > **Email Comparison** - _An objective comparison of privacy-respecting email providers_<br>
 > 🐙 Get it on GitHub at [github.com/Lissy93/email-comparison](https://github.com/Lissy93/email-comparison)<br>

apps/lit/src/forecast-item.js

@@ -3,7 +3,6 @@ import { WeatherUtils } from './weather-utils.js';
 import { designSystemStyles, baseStyles, componentStyles } from './shared-styles.js';
 
 export class ForecastItem extends LitElement {
-  // eslint-disable-next-line
   static styles = [
     designSystemStyles,
     baseStyles,
@@ -15,7 +14,6 @@ export class ForecastItem extends LitElement {
     `
   ];
 
-  // eslint-disable-next-line
   static properties = {
     forecastData: { type: Object },
     index: { type: Number },
@@ -32,7 +30,7 @@ export class ForecastItem extends LitElement {
   }
 
   render() {
-    if (!this.forecastData) return html``;
+    if (!this.forecastData) {return html``;}
 
     const { daily, index } = this;
     const dayName = WeatherUtils.formatDate(daily.time[index]);
@@ -134,7 +132,7 @@ export class ForecastItem extends LitElement {
 
   updated(changedProperties) {
     super.updated(changedProperties);
-    
+
     if (changedProperties.has('active') && this.active) {
       // Smooth scroll to the expanded item
       setTimeout(() => {
@@ -144,4 +142,4 @@ export class ForecastItem extends LitElement {
   }
 }
 
-customElements.define('forecast-item', ForecastItem);
+customElements.define('forecast-item', ForecastItem);

apps/lit/src/shared-styles.js

@@ -519,4 +519,4 @@ export const componentStyles = css`
       grid-template-columns: 1fr;
     }
   }
-`;
+`;

apps/lit/src/weather-app.js

@@ -5,7 +5,6 @@ import './weather-search.js';
 import './weather-display.js';
 
 export class WeatherApp extends LitElement {
-  // eslint-disable-next-line
   static styles = [
     designSystemStyles,
     baseStyles,
@@ -23,7 +22,6 @@ export class WeatherApp extends LitElement {
     `
   ];
 
-  // eslint-disable-next-line
   static properties = {
     _searchQuery: { state: true },
     _isLoading: { state: true },
@@ -100,7 +98,7 @@ export class WeatherApp extends LitElement {
     try {
       this._setLoading(true);
       this._clearError();
-      
+
       this._weatherData = await this._weatherService.getWeatherByCity(city);
       this._saveLocation(city);
       this._showWeatherContent();
@@ -142,16 +140,16 @@ export class WeatherApp extends LitElement {
       }
 
       navigator.geolocation.getCurrentPosition(
-        async (position) => {
+        async(position) => {
           try {
             this._setLoading(true);
             this._clearError();
-            
+
             const { latitude, longitude } = position.coords;
             this._weatherData = await this._weatherService.getWeatherData(latitude, longitude);
             this._weatherData.locationName = 'Current Location';
             this._searchQuery = 'Current Location';
-            
+
             this._showWeatherContent();
             resolve();
           } catch (error) {
@@ -209,4 +207,4 @@ export class WeatherApp extends LitElement {
   }
 }
 
-customElements.define('weather-app', WeatherApp);
+customElements.define('weather-app', WeatherApp);

apps/lit/src/weather-display.js

@@ -4,7 +4,6 @@ import { designSystemStyles, baseStyles, componentStyles } from './shared-styles
 import './weather-forecast.js';
 
 export class WeatherDisplay extends LitElement {
-  // eslint-disable-next-line
   static styles = [
     designSystemStyles,
     baseStyles,
@@ -16,7 +15,6 @@ export class WeatherDisplay extends LitElement {
     `
   ];
 
-  // eslint-disable-next-line
   static properties = {
     weatherData: { type: Object },
     isLoading: { type: Boolean },
@@ -68,7 +66,7 @@ export class WeatherDisplay extends LitElement {
 
   _renderWeatherContent() {
     const { current, locationName, country } = this.weatherData;
-    
+
     return html`
       <div class="weather-content" data-testid="weather-content">
         <div class="weather-layout">
@@ -147,4 +145,4 @@ export class WeatherDisplay extends LitElement {
   }
 }
 
-customElements.define('weather-display', WeatherDisplay);
+customElements.define('weather-display', WeatherDisplay);

apps/lit/src/weather-forecast.js

@@ -4,7 +4,6 @@ import { designSystemStyles, baseStyles, componentStyles } from './shared-styles
 import './forecast-item.js';
 
 export class WeatherForecast extends LitElement {
-  // eslint-disable-next-line
   static styles = [
     designSystemStyles,
     baseStyles,
@@ -16,7 +15,6 @@ export class WeatherForecast extends LitElement {
     `
   ];
 
-  // eslint-disable-next-line
   static properties = {
     forecastData: { type: Object },
     _activeForecastIndex: { state: true }
@@ -41,17 +39,17 @@ export class WeatherForecast extends LitElement {
         <div class="forecast">
           <div class="forecast__list" data-testid="forecast-list">
             ${repeat(
-              daily.time,
-              (time, index) => index,
-              (time, index) => html`
+    daily.time,
+    (time, index) => index,
+    (time, index) => html`
                 <forecast-item
                   .forecastData=${daily}
                   .index=${index}
                   ?active=${this._activeForecastIndex === index}
                   @toggle-forecast=${this._handleToggleForecast}
                 ></forecast-item>
               `
-            )}
+  )}
           </div>
         </div>
       </section>
@@ -60,7 +58,7 @@ export class WeatherForecast extends LitElement {
 
   _handleToggleForecast(e) {
     const { index } = e.detail;
-    
+
     // If clicking the same item, collapse it
     if (this._activeForecastIndex === index) {
       this._activeForecastIndex = null;
@@ -72,4 +70,4 @@ export class WeatherForecast extends LitElement {
   }
 }
 
-customElements.define('weather-forecast', WeatherForecast);
+customElements.define('weather-forecast', WeatherForecast);

apps/lit/src/weather-search.js

@@ -2,10 +2,9 @@ import { LitElement, html, css } from 'lit';
 import { designSystemStyles, baseStyles, componentStyles } from './shared-styles.js';
 
 export class WeatherSearch extends LitElement {
-  // eslint-disable-next-line
   static styles = [
     designSystemStyles,
-    baseStyles, 
+    baseStyles,
     componentStyles,
     css`
       :host {
@@ -14,7 +13,6 @@ export class WeatherSearch extends LitElement {
     `
   ];
 
-  // eslint-disable-next-line
   static properties = {
     searchQuery: { type: String },
     isLoading: { type: Boolean }
@@ -73,7 +71,7 @@ export class WeatherSearch extends LitElement {
   _handleSubmit(e) {
     e.preventDefault();
     const city = this.searchQuery.trim();
-    
+
     if (!city) {
       this.dispatchEvent(new CustomEvent('search-error', {
         detail: { message: 'Please enter a city name' },
@@ -91,4 +89,4 @@ export class WeatherSearch extends LitElement {
   }
 }
 
-customElements.define('weather-search', WeatherSearch);
+customElements.define('weather-search', WeatherSearch);

apps/qwik/README.md

@@ -110,7 +110,7 @@ The trade-off is developer complexity - all those `$` symbols take getting used
 ## Real-World App
 Since the weather app is very simple, it may be helpful to see a more practical implementation of a Qwik app. So, checkout:
 
-<a href="https://github.com/Lissy93/personal-security-checklist"><img align="left" src="https://storage.googleapis.com/as93-screenshots/project-logos/digital-defense.png" width="96"></a>
+<a href="https://github.com/Lissy93/personal-security-checklist"><img align="left" src="https://pixelflare.cc/alicia/logo/digital-defense/w256" width="96"></a>
 
 > **Digital Defense** - _Interactive personal security checklist_<br>
 > 🐙 Get it on GitHub at [github.com/Lissy93/personal-security-checklist](https://github.com/Lissy93/personal-security-checklist)<br>

apps/qwik/src/entry.ssr.tsx

@@ -2,7 +2,7 @@ import { renderToStream, type RenderToStreamOptions } from '@builder.io/qwik/ser
 import Root from './root';
 import { getWeatherByCity } from './services/WeatherService';
 
-export default async function (opts: RenderToStreamOptions) {
+export default async function(opts: RenderToStreamOptions) {
   let initialWeatherData = null;
   try {
     initialWeatherData = await getWeatherByCity('London');
@@ -15,7 +15,7 @@ export default async function (opts: RenderToStreamOptions) {
     ...opts,
     containerAttributes: {
       lang: 'en-us',
-      ...opts.containerAttributes,
-    },
+      ...opts.containerAttributes
+    }
   });
 }

apps/qwik/src/root.tsx

@@ -37,4 +37,4 @@ export default component$(() => {
       </body>
     </>
   );
-});
+});

apps/react/README.md

@@ -111,7 +111,7 @@ React really shines for complex applications where the ecosystem matters. We did
 ## Real-World App
 Since the weather app is very simple, it may be helpful to see a more practical implementation of a React app. So, checkout:
 
-<a href="https://github.com/Lissy93/web-check"><img align="left" src="https://raw.githubusercontent.com/Lissy93/web-check/master/public/android-chrome-192x192.png" width="96"></a>
+<a href="https://github.com/Lissy93/web-check"><img align="left" src="https://pixelflare.cc/alicia/logo/web-check/w256" width="96"></a>
 
 > **Web Check** - _All-in-one OSINT tool for analyzing any site_<br>
 > 🐙 Get it on GitHub at [github.com/Lissy93/web-check](https://github.com/Lissy93/web-check)<br>

apps/solid/README.md

@@ -110,7 +110,7 @@ The JSX looks familiar, but `<Show>` and `<For>` components replace your typical
 ## Real-World App
 Since the weather app is very simple, it may be helpful to see a more practical implementation of a Solid.js app. So, checkout:
 
-<a href="https://github.com/Lissy93/cso"><img align="left" src="https://storage.googleapis.com/as93-screenshots/project-logos/cso.png" width="96"></a>
+<a href="https://github.com/Lissy93/cso"><img align="left" src="https://pixelflare.cc/alicia/logo/cso/w256" width="96"></a>
 
 > **Chief Snack Officer** - _Office snack management app_<br>
 > 🐙 Get it on GitHub at [github.com/Lissy93/cso](https://github.com/Lissy93/cso)<br>

apps/svelte/README.md

@@ -111,7 +111,7 @@ For our simple weather app, we didn't need Svelte's built-in animations or trans
 ## Real-World App
 Since the weather app is very simple, it may be helpful to see a more practical implementation of a Svelte app. So, checkout:
 
-<a href="https://github.com/Lissy93/networking-toolbox"><img align="left" src="https://github.com/Lissy93/networking-toolbox/blob/main/static/icon.png?raw=true" width="96"></a>
+<a href="https://github.com/Lissy93/networking-toolbox"><img align="left" src="https://pixelflare.cc/alicia/logo/networking-toolbox-2/w256" width="96"></a>
 
 > **Networking Toolbox** - _100+ offline-first networking tools for sysadmins_<br>
 > 🐙 Get it on GitHub at [github.com/Lissy93/networking-toolbox](https://github.com/Lissy93/networking-toolbox)<br>

apps/vanjs/README.md

@@ -110,7 +110,7 @@ VanJS works well for simple enhancements where you need just a touch of reactivi
 ## Real-World App
 Since the weather app is very simple, it may be helpful to see a more practical implementation of a VanJS app. So, checkout:
 
-<a href="https://github.com/Lissy93/raid-calculator"><img align="left" src="https://storage.googleapis.com/as93-screenshots/project-screenshots/raid-caclularor.png" width="96"></a>
+<a href="https://github.com/Lissy93/raid-calculator"><img align="left" src="https://pixelflare.cc/alicia/logo/raid-caclularor/w256" width="96"></a>
 
 > **RAID Calculator** - _RAID array capacity and fault tolerance_<br>
 > 🐙 Get it on GitHub at [github.com/Lissy93/raid-calculator](https://github.com/Lissy93/raid-calculator)<br>

apps/vue/README.md

@@ -112,7 +112,7 @@ I chose Vue for [Dashy](https://github.com/Lissy93/dashy/), because it both has
 ## Real-World App
 Since the weather app is very simple, it may be helpful to see a more practical implementation of a Vue 3 app. So, checkout:
 
-<a href="https://github.com/Lissy93/dashy"><img align="left" src="https://i.ibb.co/yhbt6CY/dashy.png" width="96"></a>
+<a href="https://github.com/Lissy93/dashy"><img align="left" src="https://pixelflare.cc/alicia/logo/dashy/w256" width="96"></a>
 
 > **Dashy** - _Highly configurable self-hostable server dashboard_<br>
 > 🐙 Get it on GitHub at [github.com/Lissy93/dashy](https://github.com/Lissy93/dashy)<br>

eslint.config.mjs

@@ -7,7 +7,7 @@ export default [
   {
     files: ['**/*.{js,jsx}'],
     languageOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: 2022,
       sourceType: 'module',
       parserOptions: {
         ecmaFeatures: {
@@ -55,6 +55,8 @@ export default [
         MutationObserver: 'readonly',
         ResizeObserver: 'readonly',
         IntersectionObserver: 'readonly',
+        CustomEvent: 'readonly',
+        customElements: 'readonly',
       },
     },
     rules: {