refactor(site): simplify customer stories

kestra-io · Dec 29, 2023 · a19a931 · a19a931
1 parent b17af32
commit a19a931
Show file tree

Hide file tree

Showing 10 changed files with 265 additions and 260 deletions.
diff --git a/components/common/TaskIcon.vue b/components/common/TaskIcon.vue
@@ -1,92 +1,58 @@
 <template>
-    <div
-        :class="classes"
-        class="wrapper"
-    >
-            <div class="icon" :style="styles" />
+    <div ref="root" class="icon-wrapper" data-bs-toggle="tooltip" data-bs-placement="top" :title="cls">
+        <div class="icon" :style="styles" />
     </div>
 </template>
-<script>
-    import {Buffer} from "buffer";
-    export default {
-        name: "TaskIcon",
-        // components: {Tooltip},
-        props: {
-            customIcon: {
-                type: Object,
-                default: undefined
-            },
-            cls: {
-                type: Object,
-                default: undefined
-            },
-            theme: {
-                type: String,
-                default: undefined,
-                validator(value) {
-                    return ["dark", "light"].includes(value)
-                }
-            }
+
+<script setup>
+    const {$bootstrap} = useNuxtApp()
+
+    const props = defineProps({
+        cls: {
+            type: String,
+            default: undefined
         },
-        computed: {
-            backgroundImage() {
-                return `data:image/svg+xml;base64,${this.imageBase64}`
-            },
-            classes() {
-                return {
-                    "flowable": this.icon ? this.icon.flowable : false,
-                }
-            },
-            styles() {
-                return {
-                    backgroundImage: `url(data:image/svg+xml;base64,${this.imageBase64})`
-                }
-            },
-            imageBase64() {
-                let icon = this.icon && this.icon.icon ? Buffer.from(this.icon.icon, "base64").toString("utf8") : undefined;
+    });
+
+
+    const styles = computed(() => {
+        return {
+            background: `url("/icons/${props.cls}.svg")`
+        }
+    })
+
+    const root = ref(null)
 
-                if (!icon) {
-                    icon = "<svg xmlns=\"http://www.w3.org/2000/svg\" " +
-                        "xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" " +
-                        "focusable=\"false\" width=\"0.75em\" height=\"1em\" style=\"-ms-transform: " +
-                        "rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\" " +
-                        "preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 384 512\">" +
-                        "<path d=\"M288 32H0v448h384V128l-96-96zm64 416H32V64h224l96 96v288z\" fill=\"currentColor\"/>" +
-                        "</svg>";
-                }
+    onMounted(() => {
+        if (process.client) {
+            new $bootstrap.Tooltip(root.value);
+        }
+    });
 
-                return Buffer.from(icon, "utf8").toString("base64");
-            },
-            icon() {
-                return this.cls;
+    onBeforeUnmount(() => {
+        if (process.client) {
+            const tooltip = $bootstrap.Tooltip.getInstance(root.value);
+            if (tooltip) {
+                tooltip.dispose();
             }
         }
-    }
+    });
 </script>
 
 <style lang="scss" scoped>
-    .wrapper {
+    .icon-wrapper {
         display: inline-block;
         width: 100%;
         height: 100%;
         position: relative;
 
-        :deep(span) {
-            position: absolute;
-            padding: 1px;
-            left: 0;
-            display: block;
-            width: 100%;
-            height: 100%;
-        }
-
-        :deep(.icon) {
+        .icon {
             width: 100%;
             height: 100%;
             display: block;
-            background-size: contain;
-            background-repeat: no-repeat;
-            background-position: center center;
+            background-size: contain !important;
+            background-repeat: no-repeat !important;
+            background-position: center center !important;
         }
     }
 </style>
diff --git a/components/stories/Card.vue b/components/stories/Card.vue
@@ -1,71 +1,83 @@
 <template>
-    <NuxtLink :href="`/use-cases/stories/${story.title.split(' ').join('-').toLowerCase()}`">
-          <div class="card" data-aos="fade-right">
-              <div class="card-body d-flex flex-column justify-content-between ">
-                  <div>
-                      <NuxtImg loading="lazy" format="webp" quality="80" densities="x1 x2" :src="story.featuredImage" :alt="`${story.title} image`" class="card-img-top rounded-3" />
-                      <p class="card-title mt-3 mb-2 text-pink">{{ story.title }}</p>
-                      <p class="card-meta-description">{{ story.description }}</p>
-                      <div class="d-flex flex-wrap gap-3 my-3" v-if="icons">
-                          <div class="icon" v-for="task in story.tasks" :key="task">
-                              <CommonTaskIcon :cls="icons[task]"/>
-                          </div>
-                      </div>
-                  </div>
-                  <span class="author text-primary">
+    <NuxtLink :href="`/use-cases/stories/${story.id}-${slugify(story.title)}`">
+        <div class="card" data-aos="fade-right">
+            <div class="card-body d-flex flex-column justify-content-between ">
+                <div>
+                    <NuxtImg
+                        loading="lazy"
+                        format="webp"
+                        quality="80"
+                        densities="x1 x2"
+                        :src="story.featuredImage"
+                        :alt="`${story.title} image`"
+                        class="card-img-top rounded-3"
+                    />
+                    <p class="card-title mt-3 mb-2 text-pink">{{ story.title }}</p>
+                    <p class="card-meta-description">{{ story.description }}</p>
+                    <div class="d-flex flex-wrap gap-3 my-3">
+                        <div class="icon" v-for="task in story.tasks" :key="task">
+                            <CommonTaskIcon :cls="task" />
+                        </div>
+                    </div>
+                </div>
+                <span class="author text-primary">
                       Read the Story <img src="/stories/icons/arrow_right_alt.svg" alt="right icons" />
                   </span>
-              </div>
-          </div>
+            </div>
+        </div>
     </NuxtLink>
 </template>
+
 <script setup>
-defineProps({
-  story: {
-    type: Object,
-    required: true,
-  },
-  icons: {
-    type: Object,
-    required: true,
-},
-});
+    import {slugify} from "~/utils/url.js";
+
+    defineProps({
+        story: {
+            type: Object,
+            required: true,
+        }
+    });
 </script>
+
 <style lang="scss" scoped>
-@import "../../assets/styles/variable";
-.card {
-  height: 100%;
+    @import "../../assets/styles/variable";
 
-  .card-body {
-    .type {
-      font-size: $font-size-sm;
-      color: $primary;
-    }
+    .card {
+        height: 100%;
 
-    .author {
-      font-size: $font-size-sm;
-      color: $gray-500;
-      margin-bottom: 0;
-    }
+        .card-body {
+            .type {
+                font-size: $font-size-sm;
+                color: $primary;
+            }
+
+            .author {
+                font-size: $font-size-sm;
+                color: $gray-500;
+                margin-bottom: 0;
+            }
+
+            .icon {
+                border: 1px solid $white-2;
+                padding: 0.313rem 0.625rem;
+                width: 44px;
+            }
+        }
+
+        &-title {
+            font-size: $font-size-xs;
+            line-height: 1.625rem;
+        }
+
+        &-name {
+            font-size: $font-size-xs !important;
+            line-height: 1.75rem !important;
+            text-transform: uppercase !important;
+        }
 
-    .icon {
-        border: 1px solid $white-2;
-        padding: 0.313rem 0.625rem;
-        width: 44px;
+        &-meta-description {
+            font-weight: 700;
+            font-size: $h6-font-size;
+        }
     }
-  }
-  &-title {
-    font-size: $font-size-xs;
-    line-height: 1.625rem;
-  }
-  &-name {
-    font-size: $font-size-xs !important;
-    line-height: 1.75rem !important;
-    text-transform: uppercase !important;
-  }
-  &-meta-description{
-    font-weight: 700;
-    font-size: $h6-font-size;
-  }
-}
 </style>
diff --git a/components/stories/StoriesList.vue b/components/stories/StoriesList.vue
@@ -9,7 +9,7 @@
         </div>
         <div class="row my-4">
             <div class="col-12 col-md-4 mb-4" v-for="(story, index) in stories" :key="index">
-                <StoriesCard :story="story" :icons="icons"/>
+                <StoriesCard :story="story" />
             </div>
         </div>
         <div class="d-flex justify-content-between my-5">
@@ -31,10 +31,6 @@ const props = defineProps({
         type: Array,
         required: true
     },
-    icons: {
-        type: Object,
-        required: true
-    },
     totalStories: {
         type: Number,
         default: 1
@@ -44,7 +40,7 @@ const emits = defineEmits(['fetchPageData'])
 const itemsPerPage = ref(25);
 const currentPage = ref(1);
 const totalPages = computed(()=>{
-    return Math.ceil(props.totalStories / itemsPerPage.value)  
+    return Math.ceil(props.totalStories / itemsPerPage.value)
 })
 const changePage = (pageNo) => {
     currentPage.value = pageNo

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "dayjs": "^1.11.9",
     "medium-zoom": "^1.0.8",
     "rapidoc": "^9.3.4",
+    "slugify": "^1.6.6",
     "vanilla-cookieconsent": "^2.9.1",
     "vue-material-design-icons": "^5.2.0",
     "vue3-count-to": "^1.1.2"