Allow using environment Google key

Necesary for prerendering. In that context, there is no referer available, which is required for our public google key.

dwhdelft.nl/components/pages/contact/Map.vue

@@ -1,11 +1,8 @@
+<script setup>
+const googleKey = useRuntimeConfig().public.googleKey
+const mapUrl = `https://www.google.com/maps/embed/v1/place?key=${googleKey}&q=DWH, Delft`
+</script>
+
 <template>
-  <iframe
-    width="100%"
-    height="550"
-    style="border: 0"
-    loading="lazy"
-    allowfullscreen
-    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDwi_l2R3qDWkh2HN8_AmIpy7mk8Ij7nk8
-        &q=DWH, Delft"
-  />
+  <iframe width="100%" height="550" style="border: 0" loading="lazy" allowfullscreen :src="mapUrl" />
 </template>

shared/composables/useGoogleDrive.js

@@ -1,11 +1,13 @@
 async function fetchFiles(folderId) {
+  const key = useRuntimeConfig().public.googleKey
+
   try {
     const url =
       `https://www.googleapis.com/drive/v3/files` +
       `?orderBy=name desc` +
       `&q='${folderId}'%20in%20parents` +
       `&fields=files(id, name, webContentLink, webViewLink, iconLink, thumbnailLink)` +
-      `&key=AIzaSyDwi_l2R3qDWkh2HN8_AmIpy7mk8Ij7nk8`
+      `&key=${key}`
 
     const response = await fetch(url)
 

shared/nuxt.config.ts

@@ -1,4 +1,3 @@
-
 import { fileURLToPath } from 'url'
 import { dirname, join } from 'path'
 
@@ -31,7 +30,7 @@ export default defineNuxtConfig({
     },
   },
   svgo: {
-    defaultImport: 'component'
+    defaultImport: 'component',
   },
   css: [relativePath('assets/css/main.css')],
   postcss: {
@@ -57,4 +56,9 @@ export default defineNuxtConfig({
       ],
     },
   },
+  runtimeConfig: {
+    public: {
+      googleKey: process.env.GOOGLE_KEY || 'AIzaSyDwi_l2R3qDWkh2HN8_AmIpy7mk8Ij7nk8',
+    },
+  },
 })