Fix image and metaimage loading

.parcelrc

@@ -1,4 +1,5 @@
 {
   "extends": ["@parcel/config-default"],
-  "reporters": ["...", "@parcel/reporter-bundle-analyzer"]
+  "reporters": ["...", "@parcel/reporter-bundle-analyzer"],
+  "resolvers": ["parcel-resolver-ignore", "..."]
 }

app/components/home/index.tsx

@@ -10,9 +10,11 @@ import {
   Text
 } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
+
 import SmartLink from '$components/common/smart-link';
 import { getJsonFn, SpeciesListed } from '$utils/api';
 import { PanelHeader } from '$components/common/panel-header';
+import { buildImgUrl } from '$utils/utils';
 
 /**
  * Main Page component.
@@ -60,7 +62,7 @@ export default function Component() {
                   borderRadius='md'
                 >
                   <Image
-                    src={`${process.env.DATA_API}${species.image}`}
+                    src={buildImgUrl(species.image)}
                     alt='Species'
                     borderRadius='md'
                     width={16}

app/components/home/map-data.tsx

@@ -6,6 +6,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { getJsonFn, SpeciesListed } from '$utils/api';
 import SmartLink from '$components/common/smart-link';
+import { buildImgUrl } from '$utils/utils';
 
 export function HomeMakers() {
   const { data, isSuccess } = useQuery<SpeciesListed[]>({
@@ -35,7 +36,7 @@ export function HomeMakers() {
             boxShadow='md'
           >
             <Image
-              src={species.image}
+              src={buildImgUrl(species.image)}
               alt='Species'
               borderRadius='md'
               width={16}

app/index.html

@@ -32,7 +32,7 @@
       left: 0;
       right: 0;
       bottom: 0;
-      z-index: 100;
+      z-index: 9999;
       background: #fff;
       margin: 0;
       padding: 1rem;
@@ -43,7 +43,15 @@
     }
 
     #welcome-banner h1 {
-      height: 3rem;
+      display: flex;
+      justify-content: center;
+      height: 5rem;
+      margin-bottom: 1rem;
+    }
+
+    #welcome-banner img {
+      width: auto;
+      height: auto;
     }
 
     #welcome-banner.dismissed {

app/main.tsx

@@ -26,8 +26,10 @@ function Root() {
     // Hide the welcome banner.
     const banner = document.querySelector('#welcome-banner');
     if (!banner) return;
-    banner.classList.add('dismissed');
-    setTimeout(() => banner.remove(), 500);
+    setTimeout(() => {
+      banner.classList.add('dismissed');
+      setTimeout(() => banner.remove(), 500);
+    }, 500);
   }, []);
 
   return (

app/utils/utils.ts

@@ -0,0 +1,14 @@
+/**
+ * Builds a complete image URL based on the provided URL.
+ * If the URL starts with 'http', it returns the URL as is.
+ * Otherwise, it prefixes the URL with the DATA_API environment variable.
+ *
+ * @param url - The URL to be processed.
+ * @returns The complete image URL.
+ */
+export function buildImgUrl(url: string): string {
+  if (url.startsWith('http')) {
+    return url;
+  }
+  return `${process.env.DATA_API}${url}`;
+}

package.json

@@ -52,6 +52,7 @@
     "jest-css-modules-transform": "^4.4.2",
     "jest-environment-jsdom": "^29.7.0",
     "parcel": "^2.11.0",
+    "parcel-resolver-ignore": "^2.2.0",
     "portscanner": "^2.2.0",
     "posthtml-expressions": "^1.11.3",
     "prettier": "^3.2.4",

tasks/server.mjs

@@ -68,7 +68,8 @@ async function parcelServe() {
     defaultConfig: `${__appRoot}/.parcelrc`,
     cacheDir: `${__appRoot}/.parcel-cache`,
     defaultTargetOptions: {
-      distDir: `${__appRoot}/dist`
+      distDir: `${__appRoot}/dist`,
+      publicUrl: process.env.PUBLIC_URL || '/'
     },
     shouldAutoInstall: false,
     additionalReporters: [

yarn.lock

@@ -2757,6 +2757,13 @@
   dependencies:
     chalk "^4.1.2"
 
+"@parcel/[email protected]":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/codeframe/-/codeframe-2.13.3.tgz#1e3cc39f85948cc39e9f10584476ff13c0cd4f58"
+  integrity sha512-L/PQf+PT0xM8k9nc0B+PxxOYO2phQYnbuifu9o4pFRiqVmCtHztP+XMIvRJ2gOEXy3pgAImSPFVJ3xGxMFky4g==
+  dependencies:
+    chalk "^4.1.2"
+
 "@parcel/[email protected]":
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/@parcel/compressor-raw/-/compressor-raw-2.13.2.tgz#274582ce5a0a5f76e077a9f1b1ca7f47e6741687"
@@ -2840,16 +2847,34 @@
     "@mischnic/json-sourcemap" "^0.1.0"
     nullthrows "^1.1.1"
 
+"@parcel/[email protected]":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/diagnostic/-/diagnostic-2.13.3.tgz#4bc00a915984f8e649a58641d639767d029f72d8"
+  integrity sha512-C70KXLBaXLJvr7XCEVu8m6TqNdw1gQLxqg5BQ8roR62R4vWWDnOq8PEksxDi4Y8Z/FF4i3Sapv6tRx9iBNxDEg==
+  dependencies:
+    "@mischnic/json-sourcemap" "^0.1.0"
+    nullthrows "^1.1.1"
+
 "@parcel/[email protected]":
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/@parcel/events/-/events-2.13.2.tgz#5475f63b04e24a890ba33c1e288a5e72df940473"
   integrity sha512-BVB9hW1RGh/tMaDHfpa+uIgz5PMULorCnjmWr/KvrlhdUSUQoaPYfRcTDYrKhoKuNIKsWSnTGvXrxE53L5qo0w==
 
+"@parcel/[email protected]":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/events/-/events-2.13.3.tgz#068bdd9e1d40f88cb8110d06be2bd4d5fb23c2ad"
+  integrity sha512-ZkSHTTbD/E+53AjUzhAWTnMLnxLEU5yRw0H614CaruGh+GjgOIKyukGeToF5Gf/lvZ159VrJCGE0Z5EpgHVkuQ==
+
 "@parcel/[email protected]":
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/@parcel/feature-flags/-/feature-flags-2.13.2.tgz#09c800973eb463754ec3dd7123226db4ee02a2de"
   integrity sha512-cCwDAKD4Er24EkuQ+loVZXSURpM0gAGRsLJVoBtFiCSbB3nmIJJ6FLRwSBI/5OsOUExiUXDvSpfUCA5ldGTzbw==
 
+"@parcel/[email protected]":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/feature-flags/-/feature-flags-2.13.3.tgz#9664d46610a2744dd56677d26cf4fd45ab12928b"
+  integrity sha512-UZm14QpamDFoUut9YtCZSpG1HxPs07lUwUCpsAYL0PpxASD3oWJQxIJGfDZPa2272DarXDG9adTKrNXvkHZblw==
+
 "@parcel/[email protected]":
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/@parcel/fs/-/fs-2.13.2.tgz#75eaf5c5c29d7c2c5393422168c9e88f09d218a5"
@@ -2878,13 +2903,28 @@
     "@parcel/diagnostic" "2.13.2"
     "@parcel/events" "2.13.2"
 
+"@parcel/[email protected]":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/logger/-/logger-2.13.3.tgz#0c91bb7fefa37b5dccd5cdfcd30cf52f5c56a1d9"
+  integrity sha512-8YF/ZhsQgd7ohQ2vEqcMD1Ag9JlJULROWRPGgGYLGD+twuxAiSdiFBpN3f+j4gQN4PYaLaIS/SwUFx11J243fQ==
+  dependencies:
+    "@parcel/diagnostic" "2.13.3"
+    "@parcel/events" "2.13.3"
+
 "@parcel/[email protected]":
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/@parcel/markdown-ansi/-/markdown-ansi-2.13.2.tgz#ca54806e783f95261304de0ca96f4f69534a7a03"
   integrity sha512-MIEoetfT/snk1GqWzBI3AhifV257i2xke9dvyQl14PPiMl+TlVhwnbQyA09WJBvDor+MuxZypHL7xoFdW8ff3A==
   dependencies:
     chalk "^4.1.2"
 
+"@parcel/[email protected]":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/markdown-ansi/-/markdown-ansi-2.13.3.tgz#05eec8407643d2c36f3511a37c38f08f7b236e24"
+  integrity sha512-B4rUdlNUulJs2xOQuDbN7Hq5a9roq8IZUcJ1vQ8PAv+zMGb7KCfqIIr/BSCDYGhayfAGBVWW8x55Kvrl1zrDYw==
+  dependencies:
+    chalk "^4.1.2"
+
 "@parcel/[email protected]":
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/@parcel/namer-default/-/namer-default-2.13.2.tgz#12e2b21961b93197bc1ee3a5d48fae9ad4aef538"
@@ -3047,6 +3087,13 @@
   dependencies:
     "@parcel/types" "2.13.2"
 
+"@parcel/plugin@^2.10.3":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/plugin/-/plugin-2.13.3.tgz#7542a161672821a1cb104ad09eb58695c53268c8"
+  integrity sha512-cterKHHcwg6q11Gpif/aqvHo056TR+yDVJ3fSdiG2xr5KD1VZ2B3hmofWERNNwjMcnR1h9Xq40B7jCKUhOyNFA==
+  dependencies:
+    "@parcel/types" "2.13.3"
+
 "@parcel/[email protected]":
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/@parcel/profiler/-/profiler-2.13.2.tgz#dfbaf3fd28748f4a201554cfb6d8ab342d708fc9"
@@ -3057,6 +3104,16 @@
     "@parcel/types-internal" "2.13.2"
     chrome-trace-event "^1.0.2"
 
+"@parcel/[email protected]":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/profiler/-/profiler-2.13.3.tgz#4a375df8f8e1a0a0ab7e73e3562e4e28e9d7cdd7"
+  integrity sha512-ok6BwWSLvyHe5TuSXjSacYnDStFgP5Y30tA9mbtWSm0INDsYf+m5DqzpYPx8U54OaywWMK8w3MXUClosJX3aPA==
+  dependencies:
+    "@parcel/diagnostic" "2.13.3"
+    "@parcel/events" "2.13.3"
+    "@parcel/types-internal" "2.13.3"
+    chrome-trace-event "^1.0.2"
+
 "@parcel/reporter-bundle-analyzer@^2.11.0":
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/@parcel/reporter-bundle-analyzer/-/reporter-bundle-analyzer-2.13.2.tgz#af3bf460421c29e677c18386d091c3fd734f6aa4"
@@ -3152,6 +3209,11 @@
   resolved "https://registry.yarnpkg.com/@parcel/rust/-/rust-2.13.2.tgz#f04221e811faae4d4fcba99bc935390ca32599e2"
   integrity sha512-XFIewSwxkrDYOnnSP/XZ1LDLdXTs7L9CjQUWtl46Vir5Pq/rinemwLJeKGIwKLHy7fhUZQjYxquH6fBL+AY8DA==
 
+"@parcel/[email protected]":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/rust/-/rust-2.13.3.tgz#924ef166e0a16923d01c83df8a65a7a726f77e3a"
+  integrity sha512-dLq85xDAtzr3P5200cvxk+8WXSWauYbxuev9LCPdwfhlaWo/JEj6cu9seVdWlkagjGwkoV1kXC+GGntgUXOLAQ==
+
 "@parcel/source-map@^2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@parcel/source-map/-/source-map-2.1.1.tgz#fb193b82dba6dd62cc7a76b326f57bb35000a782"
@@ -3303,6 +3365,16 @@
     "@parcel/source-map" "^2.1.1"
     utility-types "^3.10.0"
 
+"@parcel/[email protected]":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/types-internal/-/types-internal-2.13.3.tgz#dbbfefeac3ce0e735dcf82bd171115e239d31692"
+  integrity sha512-Lhx0n+9RCp+Ipktf/I+CLm3zE9Iq9NtDd8b2Vr5lVWyoT8AbzBKIHIpTbhLS4kjZ80L3I6o93OYjqAaIjsqoZw==
+  dependencies:
+    "@parcel/diagnostic" "2.13.3"
+    "@parcel/feature-flags" "2.13.3"
+    "@parcel/source-map" "^2.1.1"
+    utility-types "^3.10.0"
+
 "@parcel/[email protected]":
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.13.2.tgz#bd7355560cc05f28bf112cd08d1f85fa59bb3762"
@@ -3311,6 +3383,14 @@
     "@parcel/types-internal" "2.13.2"
     "@parcel/workers" "2.13.2"
 
+"@parcel/[email protected]":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.13.3.tgz#cb59dd663a945f85eea3764364bb47066023d8a9"
+  integrity sha512-+RpFHxx8fy8/dpuehHUw/ja9PRExC3wJoIlIIF42E7SLu2SvlTHtKm6EfICZzxCXNEBzjoDbamCRcN0nmTPlhw==
+  dependencies:
+    "@parcel/types-internal" "2.13.3"
+    "@parcel/workers" "2.13.3"
+
 "@parcel/[email protected]":
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/@parcel/utils/-/utils-2.13.2.tgz#54989520bf28a0a876ab0c289afb027db29f9ba3"
@@ -3325,6 +3405,20 @@
     chalk "^4.1.2"
     nullthrows "^1.1.1"
 
+"@parcel/[email protected]":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/utils/-/utils-2.13.3.tgz#70199960d84a7c0c0bc813799dd6dab0571e2e59"
+  integrity sha512-yxY9xw2wOUlJaScOXYZmMGoZ4Ck4Kqj+p6Koe5kLkkWM1j98Q0Dj2tf/mNvZi4yrdnlm+dclCwNRnuE8Q9D+pw==
+  dependencies:
+    "@parcel/codeframe" "2.13.3"
+    "@parcel/diagnostic" "2.13.3"
+    "@parcel/logger" "2.13.3"
+    "@parcel/markdown-ansi" "2.13.3"
+    "@parcel/rust" "2.13.3"
+    "@parcel/source-map" "^2.1.1"
+    chalk "^4.1.2"
+    nullthrows "^1.1.1"
+
 "@parcel/[email protected]":
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz#e32d3dda6647791ee930556aee206fcd5ea0fb7a"
@@ -3426,6 +3520,18 @@
     "@parcel/utils" "2.13.2"
     nullthrows "^1.1.1"
 
+"@parcel/[email protected]":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@parcel/workers/-/workers-2.13.3.tgz#781bd062efe9346b7ac9f883b91e8fc6e8f6bda1"
+  integrity sha512-oAHmdniWTRwwwsKbcF4t3VjOtKN+/W17Wj5laiYB+HLkfsjGTfIQPj3sdXmrlBAGpI4omIcvR70PHHXnfdTfwA==
+  dependencies:
+    "@parcel/diagnostic" "2.13.3"
+    "@parcel/logger" "2.13.3"
+    "@parcel/profiler" "2.13.3"
+    "@parcel/types-internal" "2.13.3"
+    "@parcel/utils" "2.13.3"
+    nullthrows "^1.1.1"
+
 "@pkgr/core@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
@@ -8788,6 +8894,13 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+parcel-resolver-ignore@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/parcel-resolver-ignore/-/parcel-resolver-ignore-2.2.0.tgz#83e4155aca5d1957799952ee06cdff76d199cbb4"
+  integrity sha512-srQwekxRIiKVvAf9ljoFTw3WCrZVOhOcxOgHsWJ6FBK4yCD/w+7eNHvqWgtACVwVGkjyU6eVcy9eN9m2+Co6GA==
+  dependencies:
+    "@parcel/plugin" "^2.10.3"
+
 parcel@^2.11.0:
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/parcel/-/parcel-2.13.2.tgz#4b138a3c4bf0a5fc63f77345b14cd2f7f06d415f"