feat: added country map to the website

design/src/styles/layout/main.css

@@ -16,7 +16,7 @@ a {
 }
 
 .container {
-	width: calc(100%-16px);
+	width: calc(100% - 16px);
 	/* height: 100vh; */
 	margin-left: auto;
 	margin-right: auto;

personal/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "aaronczichon.de",
 	"type": "module",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"description": "Personal website of Aaron Czichon",
 	"scripts": {
 		"dev": "astro dev",
@@ -28,6 +28,7 @@
 		"typescript": "^5.3.3"
 	},
 	"devDependencies": {
+		"@types/mapbox-gl": "^3.1.0",
 		"prettier": "^3.2.5",
 		"prettier-plugin-astro": "^0.13.0"
 	}

personal/src/components/BlogEntryList.astro

@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import { Image } from "astro:assets";
 const allPosts = await getCollection("blog");
 
 const dateOptions: object = {

personal/src/components/CVList.astro

@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import SkillList from "./SkillList.astro";
 import SkillBand from "./SkillBand.astro";
 const allCvEntries = await getCollection("cv");
 

personal/src/components/Nav.astro

@@ -31,6 +31,11 @@ import { Image } from "astro:assets";
       class={currentPath.indexOf("cv") > -1 ? "active" : ""}>CV</a
     > -->
     <a href="/cv/" class={currentPath.indexOf("cv") > -1 ? "active" : ""}>CV</a>
+    <a
+      href="/visited-countries/"
+      class={currentPath.indexOf("visited-countries") > -1 ? "active" : ""}
+      >Visited Countries</a
+    >
     <!-- <a
       href="/pengiun"
       class={currentPath.indexOf("pengiun") > -1 ? "active" : ""}

personal/src/components/dynamic/CountryMap.jsx

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'preact/hooks';
+
+import BasicMap from './BasicMap';
+import { addMapLayer } from './map.func';
+
+export default function CountryDynamicMap({zoom, center}) {
+  const [map, setMap] = useState(null);
+  useEffect(() => {
+    // Add route to map
+    if (map) {
+      map.on('load', () => {
+        addMapLayer(map);
+      });
+    }
+  }, [map]);
+
+  useEffect(() => {
+    if (map) {
+      map.setCenter(center);
+    }
+  })
+
+  return (
+    <BasicMap zoom={zoom} setMap={setMap} />
+  );
+}

personal/src/components/dynamic/PathMap.jsx

@@ -14,7 +14,7 @@ function parseGPX(gpxData) {
 
 export default function PathDynamicMap({gpxUrl, zoom, tooltip}) {
   const [map, setMap] = useState(null);
-  const [popup, setPopup] = useState(null);
+  const [popup, _setPopup] = useState(null);
   const [routeCoordinates, setRouteCoordinates] = useState(null);
 
   useEffect(() => {

personal/src/components/dynamic/map.func.ts

@@ -0,0 +1,45 @@
+import * as mapboxgl from 'mapbox-gl';
+
+export const addMapLayer = (map: mapboxgl.Map) => {
+  map.addSource('countries', {
+    type: 'vector',
+    url: 'mapbox://mapbox.country-boundaries-v1'
+});
+
+  map.addLayer(
+    {
+      id: 'country-boundaries',
+      source: 'countries',
+      'source-layer': 'country_boundaries',
+      type: 'fill',
+      paint: {
+        'fill-color': '#19bf32',
+        'fill-opacity': 0.7,
+      },
+    },
+    'country-label'
+  );
+
+  // ISO List: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3
+  map.setFilter('country-boundaries', [
+    "in",
+    "iso_3166_1_alpha_3",
+    'ITA',
+    'CAN',
+    'DEU',
+    'ESP',
+    'SVK',
+    'SVN',
+    'CZE',
+    'HRV',
+    'BEL',
+    'NOR',
+    'AUT',
+    'LTU',
+    'FIN',
+    'EST',
+    'USA',
+    'CHE',
+    'FRA'
+  ]);
+}

personal/src/content/config.ts

@@ -21,7 +21,7 @@ const blogCollection = defineCollection({
 
 const cvCollection = defineCollection({
 	type: 'content', // v2.5.0 and later
-	schema: ({ image }) =>
+	schema: () =>
 		z.object({
 			title: z.string(),
 			position: z.string(),

personal/src/pages/cv.astro

@@ -1,8 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import CVList from "../components/CVList.astro";
-
-const { frontmatter } = Astro.props;
 ---
 
 <Layout title="Aaron Czichon - CV">

personal/src/pages/visited-countries.astro

@@ -0,0 +1,17 @@
+---
+import Layout from "../layouts/Layout.astro";
+import CountryMap from "../components/dynamic/CountryMap";
+---
+
+<Layout title="Aaron Czichon - Visited Countries">
+  <main class="container">
+    <h1>Visited Countries</h1>
+    <p>
+      I've already visited a bunch of countries in my life. I love to keep track
+      of such things.
+    </p>
+  </main>
+
+  <!-- Map Component here -->
+  <CountryMap client:visible zoom="3" center={[10.451526, 51.165691]} />
+</Layout>