hooked up social links. Removed log.

crydestaahl · Jun 27, 2024 · b5960e0 · b5960e0
1 parent e56ce46
commit b5960e0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -2,32 +2,57 @@
 import BtnSecondary from './BtnSecondary.astro'
 const currentYear = new Date().getFullYear()
 const heightAndWidth = 63
+
+const response = await fetch('https://graphql.datocms.com/', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+    Authorization: `Bearer ${import.meta.env.DATOCMS_API_KEY}`,
+  },
+  body: JSON.stringify({
+    query: `query SocialLinks {
+            social {
+              linkedin
+              instagram
+              facebook
+              email
+            }
+          }
+        `,
+    }),
+})
+
+const json = await response.json()
+const data = json.data.social
+
+
 ---
 
 <footer class="py-12">
   <BtnSecondary text="Bli medlem" link="/bli-medlem"/>
   <div class="container mx-auto flex justify-center items-center">
     <div class="flex items-center space-x-4 m-8">
-      <a href="#" class="text-gray-300 hover:text-white">
+      <a href={data.facebook} class="text-gray-300 hover:text-white">
         <!-- Replace the placeholder with your Facebook SVG icon -->
         <svg xmlns="http://www.w3.org/2000/svg" width={heightAndWidth} height={heightAndWidth} viewBox="0 0 126.865 126.865">
           <path id="Icon_-_Facebook" data-name="Icon - Facebook" d="M63.19,126.865h0Zm.447,0h0Zm-.641,0h0Zm.846,0h0Zm-1.033,0h0Zm1.238,0h0Zm.2,0h0Zm-1.68,0h0Zm1.884,0h0Zm-2.082,0h0Zm2.287,0h0Zm-2.474,0h0Zm-.232,0h0Zm2.91,0h0Zm-3.114-.006.077,0h-.077Zm3.318,0h-.031l.077,0Zm.2-.005h-.05l.078,0h-.028Zm-3.709,0,.078,0h-.078Zm-.178-.005.056,0-.053,0h0Zm4.091,0-.053,0,.056,0h0Zm.2-.007h-.028l.085,0Zm-4.552,0,.085,0h-.028Zm-.186-.007.09,0-.05,0Zm4.941,0-.05,0,.09,0Zm-5.123-.009.088,0-.069,0H60.76Zm5.326,0-.069,0,.088,0h-.019ZM60.5,126.8l.094,0h-.023Zm5.785,0h-.023l.094,0-.071,0Zm-5.968-.012.1,0-.046,0Zm6.17,0-.046,0,.1,0Zm-6.351-.012.1,0-.069,0Zm6.553,0-.069,0,.1,0Zm.2-.011-.09,0,.08,0,.094-.005-.084,0Zm-6.919,0,.08,0-.09,0-.083,0,.094.005Zm7.122-.012-.04,0,.1-.006Zm-7.395,0,.1.006-.04,0Zm-.179-.011.1.006-.063,0-.038,0Zm7.776,0-.063,0,.1-.006-.038,0Zm-7.947-.013.09.006-.084-.005-.085-.005Zm8.149,0-.084.005.09-.006.079,0-.085.005Zm.2-.013-.03,0,.1-.006-.066,0Zm-8.612,0,.1.006-.03,0Zm-.179-.012.094.007-.052,0-.043,0Zm8.992,0-.052,0,.094-.007Zm-9.17-.016.086.006-.067,0h-.019Zm9.372,0-.067,0,.086-.006Zm-9.611-.02.076.006h-.018Zm9.813,0h-.018l.076-.006Zm.2-.016-.036,0,.077-.006Zm-10.2,0,.077.006-.036,0-.041,0Zm-.18-.015.065.005-.046,0Zm10.579,0-.046,0,.065-.005Zm-10.777-.018.02,0h-.02Zm10.977,0h0l.02,0h-.016Zm.2-.018H69.1l.045,0-.027,0Zm-11.389,0,.045,0h-.018l-.027,0Zm-.186-.017.033,0-.021,0Zm11.775,0-.021,0,.033,0Zm-15.793-.5a63.433,63.433,0,1,1,19.823,0V81.769h14.78l2.812-18.336H73.344v-11.9c0-5.016,2.458-9.906,10.337-9.906h8V26.017a97.544,97.544,0,0,0-14.2-1.239c-14.489,0-23.959,8.781-23.959,24.679V63.433H37.415V81.769H53.521Z" fill="#fff" fill-rule="evenodd"/>
         </svg>
       </a>
-      <a href="#" class="text-gray-300 hover:text-white">
+      <a href={data.linkedin} class="text-gray-300 hover:text-white">
         <!-- Replace the placeholder with your LinkedIn SVG icon -->
         <svg xmlns="http://www.w3.org/2000/svg" width={heightAndWidth} height={heightAndWidth} viewBox="0 0 126.865 126.865">
           <path id="Icon_-_Linkedin" data-name="Icon - Linkedin" d="M63.432,0A63.432,63.432,0,1,1,0,63.432,63.463,63.463,0,0,1,63.432,0ZM43.6,99.081V49.544H27.132V99.081Zm59.374,0V70.674c0-15.216-8.124-22.295-18.958-22.295-8.736,0-12.649,4.8-14.839,8.179V49.544H52.713c.218,4.648,0,49.537,0,49.537H69.177V71.416A11.256,11.256,0,0,1,69.72,67.4a9.011,9.011,0,0,1,8.448-6.021c5.955,0,8.341,4.544,8.341,11.2v26.5h16.465Zm-67.5-73.423c-5.635,0-9.316,3.7-9.316,8.56,0,4.753,3.569,8.559,9.1,8.559h.106c5.742,0,9.317-3.806,9.317-8.559-.107-4.855-3.574-8.56-9.2-8.56Z" fill="#fff" fill-rule="evenodd"/>
         </svg>        
       </a>
-      <a href="mailto:[email protected]" class="text-gray-300 hover:text-white">
+      <a href={data.instagram} class="text-gray-300 hover:text-white">
         <!-- Replace the placeholder with your Email SVG icon -->
         <svg id="Instagram-Glyph-Black-Logo.wine" xmlns="http://www.w3.org/2000/svg" width={heightAndWidth} height={heightAndWidth} viewBox="0 0 126.865 126.865">
           <path id="Path_1" data-name="Path 1" d="M63.433,0C46.205,0,44.045.073,37.279.382a46.565,46.565,0,0,0-15.4,2.948,31.093,31.093,0,0,0-11.235,7.316A31.09,31.09,0,0,0,3.33,21.882a46.562,46.562,0,0,0-2.949,15.4C.073,44.045,0,46.205,0,63.433S.073,82.82.381,89.586a46.562,46.562,0,0,0,2.949,15.4,31.1,31.1,0,0,0,7.316,11.235,31.1,31.1,0,0,0,11.235,7.316,46.57,46.57,0,0,0,15.4,2.948c6.766.309,8.926.382,26.153.382s19.387-.073,26.153-.382a46.563,46.563,0,0,0,15.4-2.948,32.436,32.436,0,0,0,18.552-18.552,46.563,46.563,0,0,0,2.948-15.4c.309-6.766.382-8.926.382-26.153s-.073-19.388-.382-26.153a46.563,46.563,0,0,0-2.948-15.4,31.1,31.1,0,0,0-7.316-11.235A31.1,31.1,0,0,0,104.983,3.33,46.563,46.563,0,0,0,89.586.382C82.82.073,80.66,0,63.433,0Zm0,11.429c16.937,0,18.943.065,25.632.37a35.09,35.09,0,0,1,11.778,2.184,19.651,19.651,0,0,1,7.294,4.745,19.654,19.654,0,0,1,4.745,7.294A35.094,35.094,0,0,1,115.066,37.8c.305,6.689.37,8.7.37,25.632s-.065,18.943-.37,25.632a35.09,35.09,0,0,1-2.184,11.778,21.008,21.008,0,0,1-12.039,12.039,35.093,35.093,0,0,1-11.779,2.184c-6.688.305-8.694.37-25.632.37s-18.944-.065-25.632-.37a35.086,35.086,0,0,1-11.778-2.184,19.649,19.649,0,0,1-7.294-4.745,19.654,19.654,0,0,1-4.745-7.293A35.1,35.1,0,0,1,11.8,89.065c-.305-6.689-.37-8.7-.37-25.632s.065-18.943.37-25.632a35.094,35.094,0,0,1,2.184-11.778,19.654,19.654,0,0,1,4.745-7.294,19.654,19.654,0,0,1,7.294-4.745A35.093,35.093,0,0,1,37.8,11.8c6.689-.305,8.7-.37,25.632-.37" transform="translate(0)" fill="#fff"/>
           <path id="Path_2" data-name="Path 2" d="M195.982,178.9a21.144,21.144,0,1,1,21.144-21.144A21.144,21.144,0,0,1,195.982,178.9Zm0-53.718a32.573,32.573,0,1,0,32.573,32.574,32.573,32.573,0,0,0-32.573-32.574m41.472-1.287a7.612,7.612,0,1,1-7.612-7.612,7.612,7.612,0,0,1,7.612,7.612" transform="translate(-132.549 -94.325)" fill="#fff"/>
         </svg>
       </a>
-      <a>
+      <a href={data.email} class="text-gray-300 hover:text-white">
         <svg xmlns="http://www.w3.org/2000/svg" width={heightAndWidth} height={heightAndWidth} viewBox="0 0 126.872 126.865">
           <g id="layer1" transform="translate(-238.082 -382.37)">
             <ellipse id="path3794" cx="63.436" cy="63.432" rx="63.436" ry="63.432" transform="translate(238.082 382.37)" fill="#fff"/>

diff --git a/src/pages/event/[post].astro b/src/pages/event/[post].astro
@@ -27,7 +27,6 @@ export async function getStaticPaths() {
 
   const json = await response.json()
   const data = json.data.allBlogPosts
-  console.log(data)
 
   // Check if there is data before mapping
   if (!data || data.length === 0) {
@@ -74,7 +73,7 @@ const { post } = Astro.props
   </div>
 </div>
 </DefaultLayout>
-
+s
 <style lang="scss">
   .container {
     margin: 1rem auto;