seo, clients list, accessibility improvements

package.json

@@ -14,9 +14,11 @@
     "@fontsource-variable/noto-sans-hk": "^5.0.4",
     "astro": "^4.4.3",
     "astro-icon": "^1.1.0",
+    "astro-seo": "^0.8.3",
     "bulma": "^0.9.4",
     "mapbox-gl": "^3.1.2",
     "markdown-it": "^14.0.0",
+    "mime": "^4.0.1",
     "node-sass": "^9.0.0",
     "sass": "^1.71.1",
     "typescript": "^5.3.3"

src/components/Background.astro

@@ -1,8 +1,10 @@
 ---
-import { baseColor } from '@ts/helpers'
+const { light } = Astro.props;
+
+let groundColor = light ? 'has-background-success' : 'has-background-danger';
 ---
 
-<div class={baseColor}></div>
+<div class={groundColor}></div>
 
 <style>
     div {

src/components/Footer.astro

@@ -23,6 +23,7 @@ const { navItems, parent } = Astro.props;
       <div class="block">
         <p class="has-text-danger has-text-weight-bold">{data.name}{data.corp_form && ", ".concat(data.corp_form)}</p>
         <p class="has-text-danger">{data.subtitle}</p>     
+        <p class="has-text-danger"><a href={data.url}>{data.url}</a></p>
         {parent && 
           <p class="has-text-danger"><a href={parent.url}>{parent.name}</a></p>
         }   
@@ -33,7 +34,7 @@ const { navItems, parent } = Astro.props;
 
           <div class="tag is-medium is-success has-text-danger">
             <span class="icon mr-2">
-              <Icon name={"mdi:".concat(platform.name.toLowerCase())} size={iconSize} />
+              <Icon name={"mdi:".concat(platform.name.toLowerCase())} title={platform.name.toLowerCase().concat(" icon")} size={iconSize} />
             </span>
             <a href={platform.url} class="has-text-danger">{platform.url.split("/").pop()}</a>
           </div>

src/components/Globe.astro

@@ -7,8 +7,9 @@ interface Props extends GlobeModel {
     accesstoken: string;
 }
 
-const { lng, lat, zoom, style, bearing, pitch = 0, accesstoken, color = "#ffffff", linewidth = 0.1, linework = false, interactive = false, sec = 8000} = Astro.props;
+const { lng, lat, zoom, style, bearing, pitch = 0, accesstoken, light = true, linewidth = 0.1, linework = false, interactive = false, sec = 8000} = Astro.props;
 
+let figureColor = light ? 'danger' : 'success';
 
 ---
 
@@ -22,7 +23,7 @@ const { lng, lat, zoom, style, bearing, pitch = 0, accesstoken, color = "#ffffff
     data-bearing={bearing}
     data-pitch={pitch}
     data-accesstoken={accesstoken}
-    data-color={color}
+    data-figureColor={figureColor}
     data-linewidth={linewidth}
     data-linework={Number(linework)}
     data-interactive={Number(interactive)}
@@ -52,7 +53,7 @@ const { lng, lat, zoom, style, bearing, pitch = 0, accesstoken, color = "#ffffff
 
             map.setStyle(this.dataset.style);
 
-            map.on('load', () => {
+            map.on('renderstart', () => {
                 this.removeMB(map);
             })
 
@@ -79,7 +80,7 @@ const { lng, lat, zoom, style, bearing, pitch = 0, accesstoken, color = "#ffffff
             const layers = map.getStyle().layers;
             Object.entries(layers).forEach((s:MapBoxLayerModel) => {
                 if (s[1].type == "line") {
-                        map.setPaintProperty(s[1].id, 'line-color', styles.danger);
+                        map.setPaintProperty(s[1].id, 'line-color', styles[this.dataset.figureColor]);
                         map.setPaintProperty(s[1].id, 'line-width', Number(this.dataset.linewidth));
                 }
                 if (s[1].type == "fill") {
@@ -92,7 +93,7 @@ const { lng, lat, zoom, style, bearing, pitch = 0, accesstoken, color = "#ffffff
                             "source-layer": s[1]['source-layer'],
                             type: "line"
                         })
-                        map.setPaintProperty(id, 'line-color', styles.danger);
+                        map.setPaintProperty(id, 'line-color', styles[this.dataset.figureColor]);
                         map.setPaintProperty(id, 'line-width', Number(this.dataset.linewidth));
                     }
                 }
@@ -114,6 +115,7 @@ const { lng, lat, zoom, style, bearing, pitch = 0, accesstoken, color = "#ffffff
 <style>
     #map {
         mix-blend-mode: screen;
+        filter: grayscale(100%);
         height: 100%;
         width: 100vw;
         position: fixed;

src/components/ImageBox.astro

@@ -10,14 +10,12 @@ import { baseColor } from '@ts/helpers'
 let photopath = src && '/src/assets/'.concat(src);
 import type { ImageMetadata } from 'astro';
 import { Image } from 'astro:assets';
-const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
+const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif,svg}')
 ---
 
-<figure class="image tile-image">
-    <div class={baseColor}>
-        <Image src={images[photopath]()} alt={alt} />
-    </div>
-</figure>
+<div class={baseColor.concat(" image tile-image")}>
+    <Image src={images[photopath]()} alt={alt} />
+</div>
 
 <style type="scss">
     img {