fix build

.env

@@ -1 +1,2 @@
-VITE_STRAPI_TOKEN=c1f8dac9ec1b803aa0902dced56958c91115acbbc216832757f95457d25bde1682863bb6144d574297560f3139f0e8610d05509a4d37ec19b96d0366f4b3ccdd246c97cdff0d877eb12ec3272b58d3203fd050267c5d089b68b9e8198534d74ded49564a6a5bd64e3825b617b0f0a6fe07fdada4ae941f15b6b144abdc89d804
+VITE_STRAPI_TOKEN=c1f8dac9ec1b803aa0902dced56958c91115acbbc216832757f95457d25bde1682863bb6144d574297560f3139f0e8610d05509a4d37ec19b96d0366f4b3ccdd246c97cdff0d877eb12ec3272b58d3203fd050267c5d089b68b9e8198534d74ded49564a6a5bd64e3825b617b0f0a6fe07fdada4ae941f15b6b144abdc89d804
+VITE_GOOGLE_MAPS_API_KEY=AIzaSyBZkPFVq8-Zm5xxMSRZWpB7D7n-O6exlKs

src/assets/css/main.css

@@ -68,3 +68,7 @@ div.component-bg-bottom{
   height: 260px;
   min-height: 260px;
 }
+
+.component-padding{
+  padding:25px;
+}

src/components/Components.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-for="component in this.componentStore.components">
+  <div v-for="component in componentStore.components">
     <div v-if="component.bg === true" class="component component-bg-top"> </div>
     <div :class="`component ${component.type}`">
         <h3>{{component.label}}</h3>

src/components/Map.vue

@@ -0,0 +1,24 @@
+<template>
+    <iframe
+    style="border:0"
+    loading="lazy"
+    allowfullscreen
+    referrerpolicy="no-referrer-when-downgrade"
+    width="100%"
+    height="500px"
+    :src="`https://www.google.com/maps/embed/v1/place?q=${q}&key=${mapsApiKey}&maptype=satellite&language=${$i18n.locale}`">
+  </iframe>
+</template>
+
+<script lang="ts">
+
+export default {
+      props:['q'],
+      setup(){
+        const mapsApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY
+        return{
+          mapsApiKey
+        }
+      }
+  }
+</script>

src/components/Navigation.vue

@@ -105,10 +105,10 @@ nav a:first-of-type {
             await useTimelineStore().setLocale(locale)
             await useComponentStore().setLocale(locale)
             loadDynamicPages(pageStore.pages)
-            const oldLink = this.footerLinksStroe.getLinkByLabel(this.route.name)
+            const oldLink = this.footerLinksStroe.getLinkByLabel(this.route.name as string) as any
             this.links = await this.footerLinksStroe.getLinks(locale)
             if(oldLink){
-              const newLink = this.footerLinksStroe.getLinkByLabel(oldLink.localizations[0].Label)
+              const newLink = this.footerLinksStroe.getLinkByLabel(oldLink.localizations[0].Label) as any
               setTimeout(() => {this.$router.push(newLink.page.path)}, 100)
             }
           }

src/components/Timeline.vue

@@ -1,10 +1,11 @@
 <template>
     <div class="timeline">
-        <div v-for="timeline in this.timelineStore.timelines" :class="`container ${timeline.posittion}`">
+        <div v-for="timeline in timelineStore.timelines" :class="`container ${timeline.posittion}`">
             <div class="content">
               <p :class="`text-${timeline.posittion}`">{{moment(timeline.date).format("DD.MMM.YYYY HH:mm")}}</p>
               <h2>{{timeline.label}}</h2>
               <p>{{timeline.discription}}</p>
+              <Map v-if="timeline.mapQuery" :q="timeline.mapQuery"/>
             </div>
         </div>
     </div>
@@ -14,10 +15,12 @@
    import { useTimelineStore } from '@/stores/timeline'
    import { useI18n } from 'vue-i18n'
    import moment from 'moment'
+   import Map from './Map.vue'
 
     export default {
-        setup(){
-          const timelineStore = useTimelineStore()
+      components:{Map},
+      setup(){
+        const timelineStore = useTimelineStore()
           const { t } = useI18n({
             inheritLocale: true
           })
@@ -26,8 +29,8 @@
             timelineStore,
             moment
           }
-        },
-    }
+      }
+  }
 </script>
 
 <style scoped>

src/views/HomeView.vue

@@ -3,6 +3,7 @@
   import Countdown from '@/components/Countdown.vue';
   import Timeline from '@/components/Timeline.vue';
   import Components from '@/components/Components.vue';
+  import Map from '@/components/Map.vue';
   import { useI18n } from 'vue-i18n'
   const { t } = useI18n({
             inheritLocale: true
@@ -27,7 +28,10 @@
       </div>
       <!--<div class="component component-bg-top"> </div>
       <div class="component"><Timeline/></div>
-      <div class="component component-bg-bottom"> </div>-->
+      <div class="component component-bg-bottom"> </div>
+      <div class="component component-dark component-padding">
+        <Map q="Abendkamp%2017,%2029646%20Bispingen"/>
+      </div>-->
     </div>
   </main>
 </template>
@@ -39,5 +43,8 @@ h3{
 .logo{
   padding-top: 40px;
 }
+.component-padding{
+  padding: 25px;
+}
 
 </style>