{"version":3,"sources":["webpack:///./src/components/BlogSkeleton.vue","webpack:///./src/components/BlogSkeleton.vue?c9f5","webpack:///./src/views/Blogs.vue","webpack:///./src/views/Blogs.vue?8d26"],"names":["class","_createElementVNode","_hoisted_5","_hoisted_6","_hoisted_7","_createElementBlock","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_Fragment","_renderList","n","key","script","__exports__","render","blogPosts","ref","isLoading","sortedPosts","computed","value","sort","a","b","aIsFeatured","featured","featuredImage","bIsFeatured","dateComparison","Date","publishDate","featuredPost","find","post","isFeatured","recentPosts","_featuredPost$value","featuredPostId","id","filter","slice","remainingPosts","_featuredPost$value2","shownPostIds","Set","map","has","formatDate","dateString","toLocaleDateString","month","day","year","fetchBlogPosts","async","posts","getBlogPosts","error","console","onMounted"],"mappings":"qJACOA,MAAM,iB,GACJA,MAAM,a,8QAUJA,MAAM,yC,EAEPC,eAAuD,OAAlDD,MAAM,uCAAqC,S,EAChDC,eAAiD,OAA5CD,MAAM,iCAA+B,S,EAC1CC,eAAiD,OAA5CD,MAAM,iCAA+B,S,GAF1CE,EACAC,EACAC,G,wCAfRC,eAmBM,MAnBNC,EAmBM,CAlBJL,eAiBM,MAjBNM,EAiBM,CAfJC,EAQAP,eAMM,MANNQ,EAMM,E,iBALJJ,eAIMK,OAAA,KAAAC,eAJW,EAALC,GAAZX,eAIM,OAJeY,IAAKD,EAAGZ,MAAM,a,wCCZ3C,MAAMc,EAAS,GAGTC,EAA2B,IAAgBD,EAAQ,CAAC,CAAC,SAASE,KAErD,Q,y3CCkFf,MAAMC,EAAYC,eAAI,IAChBC,EAAYD,gBAAI,GAGhBE,EAAcC,eAAS,IACpB,IAAIJ,EAAUK,OAAOC,KAAK,CAACC,EAAGC,KAEnC,MAAMC,EAAcF,EAAEG,UAAYH,EAAEI,cAC9BC,EAAcJ,EAAEE,UAAYF,EAAEG,cAEpC,GAAIF,IAAgBG,EAAa,OAAQ,EACzC,IAAKH,GAAeG,EAAa,OAAO,EAGxC,MAAMC,EAAiB,IAAIC,KAAKN,EAAEO,aAAe,IAAID,KAAKP,EAAEQ,aAC5D,OAAuB,IAAnBF,EAA6BA,EAG7BN,EAAEI,gBAAkBH,EAAEG,eAAuB,GAC5CJ,EAAEI,eAAiBH,EAAEG,cAAsB,EACzC,KAKLK,EAAeZ,eAAS,IACrBD,EAAYE,MAAMY,KAAKC,GAAQA,EAAKC,YAAcD,EAAKP,gBAAkBR,EAAYE,MAAM,IAI9Fe,EAAchB,eAAS,KAAM,IAAAiB,EACjC,MAAMC,EAAmC,QAArBD,EAAGL,EAAaX,aAAK,IAAAgB,OAAA,EAAlBA,EAAoBE,GAC3C,OAAOpB,EAAYE,MAChBmB,OAAON,GAAQA,EAAKK,KAAOD,GAC3BG,MAAM,EAAG,KAIRC,EAAiBtB,eAAS,KAAM,IAAAuB,EACpC,MAAMC,EAAe,IAAIC,IAAI,CAAmB,QAAnBF,EAACX,EAAaX,aAAK,IAAAsB,OAAA,EAAlBA,EAAoBJ,MAAOH,EAAYf,MAAMyB,IAAKZ,GAASA,EAAKK,MAC9F,OAAOpB,EAAYE,MAAMmB,OAAQN,IAAUU,EAAaG,IAAIb,EAAKK,OAI7DS,EAAcC,GACX,IAAInB,KAAKmB,GAAYC,mBAAmB,QAAS,CACtDC,MAAO,QACPC,IAAK,UACLC,KAAM,YAIJC,EAAiBC,UACrB,IACE,MAAMC,QAAcC,iBACpBzC,EAAUK,MAAQmC,EAClB,MAAOE,GACPC,QAAQD,MAAM,4BAA6BA,GAC3C,QACAxC,EAAUG,OAAQ,I,OAItBuC,eAAUN,G,uxFCpJV,MAAM,EAAc,EAEL","file":"js/blogs.1a650dca.js","sourcesContent":["<template>\n  <div class=\"animate-pulse\">\n    <div class=\"space-y-8\">\n      <!-- Featured Article Skeleton -->\n      <div class=\"w-full\">\n        <div class=\"bg-gray-200 aspect-[16/9] rounded-xl mb-4\"></div>\n        <div class=\"h-8 bg-gray-200 rounded w-3/4 mb-4\"></div>\n        <div class=\"h-4 bg-gray-200 rounded w-1/2 mb-4\"></div>\n        <div class=\"h-4 bg-gray-200 rounded w-1/4\"></div>\n      </div>\n\n      <!-- Grid Articles Skeleton -->\n      <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n        <div v-for=\"n in 3\" :key=\"n\" class=\"space-y-4\">\n          <div class=\"bg-gray-200 aspect-[4/3] rounded-xl\"></div>\n          <div class=\"h-6 bg-gray-200 rounded w-3/4\"></div>\n          <div class=\"h-4 bg-gray-200 rounded w-1/2\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup></script>\n","import { render } from \"./BlogSkeleton.vue?vue&type=template&id=40b43491\"\nconst script = {}\n\nimport exportComponent from \"/home/runner/work/careerbuddy-frontend/careerbuddy-frontend/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","<template>\n  <div class=\"min-h-screen bg-white\">\n    <div class=\"max-w-7xl mx-auto px-4 py-8\">\n      <template v-if=\"!isLoading\">\n        <!-- Featured and Recent Posts Section -->\n        <section class=\"mb-24\">\n          <!-- Featured Post -->\n          <div v-if=\"featuredPost\" class=\"mb-16\">\n            <router-link :to=\"`/blog/${featuredPost.slug}`\" class=\"cursor-pointer block group\">\n              <div v-if=\"featuredPost.featuredImage\" class=\"w-full aspect-[16/9] rounded-xl overflow-hidden mb-4\">\n                <img\n                  :src=\"featuredPost.featuredImage\"\n                  :alt=\"featuredPost.title\"\n                  class=\"object-cover w-full h-full transform group-hover:scale-105 transition-transform duration-500\"\n                />\n              </div>\n              <h2 class=\"text-3xl font-bold text-brand-black group-hover:text-brand-spot transition-colors mb-3\">\n                {{ featuredPost.title }}\n              </h2>\n              <div class=\"flex items-center text-sm text-light-grey\">\n                <span v-if=\"featuredPost.author\">by {{ featuredPost.author.name }}</span>\n                <span class=\"mx-2\" v-if=\"featuredPost.author\">·</span>\n                <span>{{ formatDate(featuredPost.publishDate) }}</span>\n              </div>\n            </router-link>\n          </div>\n\n          <!-- Recent Posts Grid -->\n          <div class=\"mt-24\">\n            <h2 class=\"text-xl font-medium mb-8\">RECENT POSTS</h2>\n            <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-12\">\n              <router-link v-for=\"post in recentPosts\" :key=\"post.id\" :to=\"`/blog/${post.slug}`\" class=\"cursor-pointer flex flex-col group\">\n                <div v-if=\"post.featuredImage\" class=\"aspect-[4/3] rounded-xl overflow-hidden mb-3\">\n                  <img\n                    :src=\"post.featuredImage\"\n                    :alt=\"post.title\"\n                    class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500\"\n                  />\n                </div>\n                <h3 class=\"text-base sm:text-lg font-medium mb-2 leading-tight line-clamp-2 group-hover:text-brand-spot transition-colors flex-grow\">\n                  {{ post.title }}\n                </h3>\n                <div class=\"flex items-center text-sm text-light-grey\">\n                  <span v-if=\"post.author\" class=\"line-clamp-1\">by {{ post.author.name }}</span>\n                  <span class=\"mx-2\" v-if=\"post.author\">·</span>\n                  <span>{{ formatDate(post.publishDate) }}</span>\n                </div>\n              </router-link>\n            </div>\n          </div>\n        </section>\n\n        <!-- All Other Posts -->\n        <section>\n          <h2 class=\"text-xl font-medium mb-8\">ALL POSTS</h2>\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-12\">\n            <router-link v-for=\"post in remainingPosts\" :key=\"post.id\" :to=\"`/blog/${post.slug}`\" class=\"cursor-pointer flex flex-col group\">\n              <div v-if=\"post.featuredImage\" class=\"aspect-[4/3] rounded-xl overflow-hidden mb-3\">\n                <img\n                  :src=\"post.featuredImage\"\n                  :alt=\"post.title\"\n                  class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500\"\n                />\n              </div>\n              <h3 class=\"text-base sm:text-lg font-medium mb-2 leading-tight line-clamp-2 group-hover:text-brand-spot transition-colors flex-grow\">\n                {{ post.title }}\n              </h3>\n              <div class=\"flex items-center text-sm text-light-grey\">\n                <span v-if=\"post.author\" class=\"line-clamp-1\">by {{ post.author.name }}</span>\n                <span class=\"mx-2\" v-if=\"post.author\">·</span>\n                <span>{{ formatDate(post.publishDate) }}</span>\n              </div>\n            </router-link>\n          </div>\n        </section>\n      </template>\n\n      <!-- Skeleton Loader -->\n      <BlogSkeleton v-else />\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, computed } from 'vue';\nimport { getBlogPosts } from '@/services/contentful';\nimport BlogSkeleton from '@/components/BlogSkeleton.vue';\n\nconst blogPosts = ref([]);\nconst isLoading = ref(true);\n\n// Sort posts by featured status, date and featured image\nconst sortedPosts = computed(() => {\n  return [...blogPosts.value].sort((a, b) => {\n    // First prioritize featured posts with featured images\n    const aIsFeatured = a.featured && a.featuredImage;\n    const bIsFeatured = b.featured && b.featuredImage;\n    \n    if (aIsFeatured && !bIsFeatured) return -1;\n    if (!aIsFeatured && bIsFeatured) return 1;\n    \n    // Then sort by date\n    const dateComparison = new Date(b.publishDate) - new Date(a.publishDate);\n    if (dateComparison !== 0) return dateComparison;\n\n    // If dates are equal, prioritize posts with featured images\n    if (a.featuredImage && !b.featuredImage) return -1;\n    if (!a.featuredImage && b.featuredImage) return 1;\n    return 0;\n  });\n});\n\n// Get the first featured post with a featured image\nconst featuredPost = computed(() => {\n  return sortedPosts.value.find(post => post.isFeatured && post.featuredImage) || sortedPosts.value[0];\n});\n\n// Get the next 3 most recent posts (excluding featured)\nconst recentPosts = computed(() => {\n  const featuredPostId = featuredPost.value?.id;\n  return sortedPosts.value\n    .filter(post => post.id !== featuredPostId)\n    .slice(0, 3);\n});\n\n// Get all remaining posts (excluding featured and recent)\nconst remainingPosts = computed(() => {\n  const shownPostIds = new Set([featuredPost.value?.id, ...recentPosts.value.map((post) => post.id)]);\n  return sortedPosts.value.filter((post) => !shownPostIds.has(post.id));\n});\n\n// Format date helper\nconst formatDate = (dateString) => {\n  return new Date(dateString).toLocaleDateString('en-US', {\n    month: 'short',\n    day: 'numeric',\n    year: 'numeric',\n  });\n};\n\nconst fetchBlogPosts = async () => {\n  try {\n    const posts = await getBlogPosts();\n    blogPosts.value = posts;\n  } catch (error) {\n    console.error('Error loading blog posts:', error);\n  } finally {\n    isLoading.value = false;\n  }\n};\n\nonMounted(fetchBlogPosts);\n</script>\n","import script from \"./Blogs.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./Blogs.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__"],"sourceRoot":""}