{"version":3,"file":"HINpL08U.js","sources":["../../../../components/content/Article/ArticleTile.vue"],"sourcesContent":["<template>\n    <nuxt-link :to=\"article?._path\" :class=\"{\n        'card--redirect': article?.redirection, 'card--redirect-github': article?.redirection && String(article.redirection)\n            ?.includes('github.com'), 'card--enterprise': article?.article?.enterprise, 'card--popular': article?.popular\n    }\"\n        class=\"flex flex-col  w-full rounded-lg shadow-lg overflow-hidden hover:shadow hover:scale-95 transition cursor-pointer\">\n        <div class=\"relative\">\n            <div class=\"flex items-center gap-2 absolute top-0 right-4 bg-white p-1 px-2 font-bold rounded-b-lg shadow-md shadow-gray-500/10\"\n                v-if=\"article?.article?.lang\">\n                <template v-if=\"article.article.lang === 'french'\">\n                    <Icon name=\"cif:fr\" /> in French\n                </template>\n            </div>\n            <template v-if=\"keywords\" v-for=\"key in keywords\">\n                <div class=\"absolute text-sm w-full flex justify-end gap-2 right-2\">\n                    <span v-if=\"(key === 'docker') || key === 'notebook'\"\n                        class=\"p-1 bg-primary-300 rounded-b-lg px-2 text-primary-700 flex items-center justify-center gap-1\"\n                        :title=\"key\">\n                        <Icon name=\"cib:jupyter\" v-if=\"key === 'notebook'\" class=\"text-lg\" />\n                        <Icon name=\"mdi:docker\" v-if=\"key === 'docker'\" class=\"text-lg\" />\n                    </span>\n                </div>\n            </template>\n            <div class=\"badge--read flex gap-2 rounded-lg p-1 text-sm\" v-if=\"article?.article?.readingTime\">\n                {{ article?.article?.readingTime }} read\n            </div>\n            <NuxtImg v-if=\"article?.article?.thumbnailFit\"\n                :src=\"article?.article?.thumbnail || '/assets/pathway-card.png'\" alt=\"\" class=\"w-full h-48\"\n                :class=\"thumbnailFit[article?.article?.thumbnailFit]\"\n                :style=\"article?.article?.thumbnailPosition ? `object-position: ${article?.article?.thumbnailPosition}` : ''\" />\n\n            <NuxtImg v-else-if=\"article?.article?.thumbnailContain\"\n                :src=\"article?.article?.thumbnail || '/assets/pathway-card.png'\" alt=\"\"\n                class=\"h-48 w-full object-contain\" :class=\"{ 'p-2': article?.article?.thumbnailPadding }\" />\n\n            <NuxtImg v-else :src=\"article?.article?.thumbnail || '/assets/pathway-card.png'\" alt=\"\"\n                class=\"w-full h-48 object-cover\" width=\"400\" height=\"240\">\n            </NuxtImg>\n\n            <div\n                class=\"flex justify-center items-center absolute -bottom-6 left-4 rounded-full p-[1px] bg-white border-2 z-10 border-primary-500\">\n                <NuxtImg :src=\"article?.author.img\" alt=\"\" class=\"w-11 h-11 object-cover rounded-full\" width=\"100\"\n                    height=\"100\" />\n            </div>\n            <span\n                class=\"absolute -bottom-3 left-8 py-[2px] pr-4 pl-11 whitespace-nowrap bg-primary-500 text-white z-[5] rounded-full text-sm\">{{\n        article?.author.name\n    }}</span>\n        </div>\n        <div class=\"p-4 pt-8 pb-4 break-words\">\n            <div class=\"flex text-xs justify-between gap-2 font-bold uppercase text-gray-400\">\n                <span>{{ article?.article?.tags.join(' · ') }}</span>\n                <span class=\"text-right\">{{\n        new Date(article?.article?.date).toLocaleString('en-EN', {\n            month: 'short', day: 'numeric', year:\n                'numeric'\n                    })\n                    }}</span>\n            </div>\n            <span class=\"text-lg font-bold article-title\">{{ article?.title }}</span>\n        </div>\n    </nuxt-link>\n</template>\n\n<script setup>\nconst props = defineProps({\n    article: Object,\n    // href: String,\n    // readingTime: String,\n    // author: Object,\n    // thumbnail: String,\n    // thumbnailContain: Boolean,\n    // thumbnailPadding: {\n    //     type: Boolean,\n    //     default: true\n    // },\n    // title: String,\n    // date: String,\n    // tags: Array,\n})\nconst thumbnailFit = {\n    \"none\": \"object-none\",\n    \"fill\": \"object-fill\",\n    \"contain\": \"object-contain\",\n    \"cover\": \"object-cover\"\n}\nconst keywords = props.article?.keywords ? props.article.keywords.map((key) => key.toLowerCase()) : []\n</script>\n\n<style lang=\"scss\" scoped>\n.badge--read {\n    position: absolute;\n    right: 1rem;\n    top: 1rem;\n    background: rgba(28, 28, 240, 0.8);\n    color: #fff;\n    padding-left: 2em;\n\n    &::after {\n        content: \"\";\n        position: absolute;\n        left: 0.5rem;\n        top: 50%;\n        width: 1em;\n        height: 1em;\n        background: url('/assets/content/blog/clock.svg');\n        transform: translateY(-50%);\n    }\n}\n\n.card--redirect {\n    position: relative;\n\n    &::after {\n        content: \"\";\n        position: absolute;\n        width: 1.5rem;\n        height: 1.5rem;\n        bottom: 1rem;\n        right: 1rem;\n        background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' class='w-6 h-6'%3E%3Cpath fill-rule='evenodd' d='M15.75 2.25H21a.75.75 0 01.75.75v5.25a.75.75 0 01-1.5 0V4.81L8.03 17.03a.75.75 0 01-1.06-1.06L19.19 3.75h-3.44a.75.75 0 010-1.5zm-10.5 4.5a1.5 1.5 0 00-1.5 1.5v10.5a1.5 1.5 0 001.5 1.5h10.5a1.5 1.5 0 001.5-1.5V10.5a.75.75 0 011.5 0v8.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V8.25a3 3 0 013-3h8.25a.75.75 0 010 1.5H5.25z' clip-rule='evenodd' /%3E%3C/svg%3E%0A\");\n    }\n\n    .article-title {\n        padding-right: 0.5rem;\n    }\n}\n\n.card--redirect.card--redirect-github {\n    &::after {\n        content: \"\";\n        position: absolute;\n        width: 1.5rem;\n        height: 1.5rem;\n        bottom: 1rem;\n        right: 1rem;\n        background-image: url(\"data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0099 0C5.36875 0 0 5.49998 0 12.3042C0 17.7432 3.43994 22.3472 8.21205 23.9767C8.80869 24.0992 9.02724 23.7119 9.02724 23.3862C9.02724 23.1009 9.00757 22.1232 9.00757 21.1044C5.6667 21.8379 4.97099 19.6377 4.97099 19.6377C4.43409 18.2117 3.63858 17.8452 3.63858 17.8452C2.54511 17.0914 3.71823 17.0914 3.71823 17.0914C4.93117 17.1729 5.56763 18.3544 5.56763 18.3544C6.64118 20.2284 8.37111 19.6989 9.06706 19.3729C9.16638 18.5784 9.48473 18.0284 9.82275 17.7229C7.15817 17.4377 4.35469 16.3784 4.35469 11.6522C4.35469 10.3077 4.8316 9.20771 5.58729 8.35222C5.46807 8.04672 5.0504 6.78347 5.70677 5.09273C5.70677 5.09273 6.72083 4.76673 9.00732 6.35572C9.98625 6.08639 10.9958 5.94938 12.0099 5.94823C13.024 5.94823 14.0577 6.09098 15.0123 6.35572C17.299 4.76673 18.3131 5.09273 18.3131 5.09273C18.9695 6.78347 18.5515 8.04672 18.4323 8.35222C19.2079 9.20771 19.6652 10.3077 19.6652 11.6522C19.6652 16.3784 16.8617 17.4172 14.1772 17.7229C14.6148 18.1099 14.9924 18.8432 14.9924 20.0044C14.9924 21.6544 14.9727 22.9787 14.9727 23.3859C14.9727 23.7119 15.1915 24.0992 15.7879 23.9769C20.56 22.3469 23.9999 17.7432 23.9999 12.3042C24.0196 5.49998 18.6312 0 12.0099 0Z' fill='%2324292F'/%3E%3C/svg%3E%0A\");\n    }\n}\n\n.card--enterprise {\n    position: relative;\n\n    &::before {\n        content: \"Enterprise\";\n        position: absolute;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\n        height: 2rem;\n        background-color: #1C1CF0;\n        font-weight: bold;\n        text-align: center;\n        right: 0;\n        top: 0;\n        color: #fff;\n        transform: rotate(38deg) translate(32%, -160%);\n        z-index: 1;\n    }\n}\n\n.card--popular {\n    box-shadow: rgba(61, 42, 231, 0.09) 0px 2px 1px, rgba(74, 24, 255, 0.09) 0px 4px 2px, rgba(58, 23, 255, 0.09) 0px 8px 4px, rgba(6, 20, 219, 0.09) 0px 16px 8px, rgba(50, 4, 255, 0.09) 0px 32px 16px;\n}\n\n.card--popular:hover {\n    box-shadow: rgba(61, 42, 231, 0.09) 0px 2px 1px, rgba(74, 24, 255, 0.09) 0px 4px 2px, rgba(58, 23, 255, 0.09) 0px 8px 4px, rgba(6, 20, 219, 0.09) 0px 16px 8px, rgba(50, 4, 255, 0.09) 0px 5px 5px;\n}\n</style>\n"],"names":["props","__props","thumbnailFit","keywords","_a","key"],"mappings":"s/BAiEA,MAAMA,EAAQC,EAeRC,GAAe,CACjB,KAAQ,cACR,KAAQ,cACR,QAAW,iBACX,MAAS,cACb,EACMC,GAAWC,EAAAJ,EAAM,UAAN,MAAAI,EAAe,SAAWJ,EAAM,QAAQ,SAAS,IAAKK,GAAQA,EAAI,YAAa,CAAA,EAAI,CAAA"}