From a19a9314faf029c57b8d67ee990f2c0bd32d02b7 Mon Sep 17 00:00:00 2001
From: Ludovic DEHON <tchiot.ludo@gmail.com>
Date: Fri, 29 Dec 2023 13:19:19 +0100
Subject: [PATCH] refactor(site): simplify customer stories

---
 components/common/TaskIcon.vue          | 106 +++++++-------------
 components/stories/Card.vue             | 128 +++++++++++++-----------
 components/stories/StoriesList.vue      |   8 +-
 package-lock.json                       |   2 +-
 package.json                            |   1 +
 pages/use-cases/stories/[...slug].vue   | 125 -----------------------
 pages/use-cases/stories/[id]-[slug].vue | 111 ++++++++++++++++++++
 pages/use-cases/stories/index.vue       |  27 +++++
 server/routes/icons/[cls].svg.js        |   9 ++
 utils/url.js                            |   8 ++
 10 files changed, 265 insertions(+), 260 deletions(-)
 delete mode 100644 pages/use-cases/stories/[...slug].vue
 create mode 100644 pages/use-cases/stories/[id]-[slug].vue
 create mode 100644 pages/use-cases/stories/index.vue
 create mode 100644 server/routes/icons/[cls].svg.js
 create mode 100644 utils/url.js

diff --git a/components/common/TaskIcon.vue b/components/common/TaskIcon.vue
index 1663e1d6f9..877de89541 100644
--- 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>
\ No newline at end of file
diff --git a/components/stories/Card.vue b/components/stories/Card.vue
index 787d67cfad..fce3f9191e 100644
--- 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>
\ No newline at end of file
diff --git a/components/stories/StoriesList.vue b/components/stories/StoriesList.vue
index e9ccb1db81..472de6237c 100644
--- 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
index c712147d18..cf73ec7fba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,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"
@@ -17271,7 +17272,6 @@
       "version": "1.6.6",
       "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
       "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
-      "dev": true,
       "engines": {
         "node": ">=8.0.0"
       }
diff --git a/package.json b/package.json
index 0e75f3df7b..f6bcda75bc 100644
--- 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"
diff --git a/pages/use-cases/stories/[...slug].vue b/pages/use-cases/stories/[...slug].vue
deleted file mode 100644
index 5a7433631b..0000000000
--- a/pages/use-cases/stories/[...slug].vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-    <div class="main">
-        <div v-if="slug === '/stories/'">
-            <Head>
-                <Title>Kestra's Customers Stories</Title>
-                <Meta name="description"
-                    content="Learn how we helped companies manage their critical operations."/>
-            </Head>
-            <StoriesList :stories="stories" :icons="icons" :total-stories="totalStories" @fetch-page-data="fetchStories" />
-        </div>
-        
-        <div v-else>
-
-            <Head>
-                <Title>{{ story.metaTitle }}</Title>
-                <Meta name="description"
-                    :content="story.metaDescription"/>
-            </Head>
-            
-            <StoriesHeader :slug="slug" :title="story.title" :meta-description="story.description" :hero-image="story.heroImage" />
-            <div class="container ">
-                <ContentRendererMarkdown class="bd-markdown" :value="content_1"/>
-                <div class="d-flex flex-wrap gap-2 my-5 justify-content-center" v-if="icons">
-                    <div class="card" v-for="task in story.tasks" :key="task">
-                        <div class="card-body">
-                            <div class="icon" data-bs-toggle="tooltip" data-bs-placement="top" :title="task">
-                                <CommonTaskIcon :cls="icons[task]"/>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <ContentRendererMarkdown class="bd-markdown" :value="content_2"/>
-                <LayoutSection title="Similar Kestra Stories">
-                    <div class="row">
-                        <div class="col-12 col-md-6 col-lg-4" v-for="(story, index) in stories.slice(0, 3)" :key="index">
-                            <StoriesCard :story="story" :icons="icons"/>
-                        </div>
-                    </div>
-                </LayoutSection>
-            </div>
-        </div>
-        <StoriesFooter/>
-    </div>
-</template>
-<script setup>
-import markdownParser from '@nuxt/content/transformers/markdown';
-const { $bootstrap } = useNuxtApp()
-const route = useRoute()
-const slug = "/stories/" + (route.params.slug instanceof Array ? route.params.slug.join('/') : route.params.slug);
-const stories = ref([])
-const totalStories = ref(0)
-const story = ref({})
-const content_1 = ref('')
-const content_2 = ref('')
-const icons = ref({})
-
-onMounted(() => {
-    if (process.client) {
-        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-        [...tooltipTriggerList].map(tooltipTriggerEl => new $bootstrap.Tooltip(tooltipTriggerEl))
-    }
-})
-
-const fetchStories = async ({ currentPage, itemsPerPage }) => {
-    const { data } = await useAsyncData('stories', () => {
-        return $fetch(`https://api.kestra.io/v1/customer-stories?page=${currentPage}&size=${itemsPerPage}`)
-    })
-    stories.value = data.value.results
-    totalStories.value = data.value.total
-}
-
-await fetchStories({ currentPage: 1, itemsPerPage: 25 })
-
-const { data } = await useAsyncData('icons', () => {
-    return $fetch('https://api.kestra.io/v1/plugins/icons')
-})
-
-icons.value = data.value
-
-const storyName = slug.replace('/stories/', '').split('-').join(' ')
-
-    if(slug != '/stories/') {
-    story.value = stories.value.find(story => story.title.toLowerCase() === storyName)
-
-    content_1.value = await markdownParser.parse("md",story.value.content_1,{})
-    content_2.value = await markdownParser.parse("md",story.value.content_2,{})
-    useHead({
-        meta: [
-            { name: 'twitter:card', content: 'summary_large_image' },
-            { name: 'twitter:site', content: '@kestra_io' },
-            { name: 'twitter:title', content: story.value.metaTitle },
-            {
-                name: 'twitter:description',
-                content: story.value.metaDescription
-            },
-            { name: 'twitter:image', content: story.value.heroImage },
-            {
-                name: 'twitter:image:alt',
-                content: story.value.title
-            }
-        ]
-    })
-}
-</script>
-<style scoped lang="scss">
-@import "../../../assets/styles/variable";
-p, ul > li {
-    line-height: 1.5rem;
-}
-:deep(h3 > a) {
-    color: $black !important;
-    font-size: $h2-font-size;
-}
-:deep(h3) {
-    margin-top: $h1-font-size !important;
-    padding: 0 !important;
-    font-weight: 800;
-}
-
-.icon {
-    width: 42px;
-    height: 42px;
-}
-</style>
\ No newline at end of file
diff --git a/pages/use-cases/stories/[id]-[slug].vue b/pages/use-cases/stories/[id]-[slug].vue
new file mode 100644
index 0000000000..18e3da007d
--- /dev/null
+++ b/pages/use-cases/stories/[id]-[slug].vue
@@ -0,0 +1,111 @@
+<template>
+    <div class="main">
+        <Head>
+            <Title>{{ story.metaTitle }}</Title>
+            <Meta
+                name="description"
+                :content="story.metaDescription"
+            />
+        </Head>
+
+        <StoriesHeader
+            :slug="slug"
+            :title="story.title"
+            :meta-description="story.description"
+            :hero-image="story.heroImage"
+        />
+
+        <div class="container ">
+            <ContentRendererMarkdown class="bd-markdown" :value="content1" />
+            <div class="d-flex flex-wrap gap-2 my-5 justify-content-center">
+                <div class="card" v-for="task in story.tasks" :key="task">
+                    <div class="card-body">
+                        <CommonTaskIcon :cls="task" />
+                    </div>
+                </div>
+            </div>
+
+            <ContentRendererMarkdown class="bd-markdown" :value="content2" />
+
+            <LayoutSection title="Similar Kestra Stories" v-if="related">
+                <div class="row">
+                    <div class="col-12 col-md-6 col-lg-4" v-for="(story, index) in related.results"
+                         :key="index">
+                        <StoriesCard :story="story" />
+                    </div>
+                </div>
+            </LayoutSection>
+        </div>
+        <StoriesFooter />
+    </div>
+</template>
+<script setup>
+    import markdownParser from '@nuxt/content/transformers/markdown';
+
+    const route = useRoute()
+    const slug = (route.params.slug instanceof Array ? route.params.slug.join('/') : route.params.slug);
+    const stories = ref([])
+    const story = ref({})
+    const content1 = ref('')
+    const content2 = ref('')
+
+    const id = slug.split("-")[0];
+
+    const {data} = await useAsyncData('stories', () => {
+        return $fetch(`https://api.kestra.io/v1/customer-stories/${route.params.id}`)
+    })
+
+    if (data.value === null) {
+        throw createError({statusCode: 404, message: `Unable to find id '${route.params.id}'`, fatal: true})
+    }
+
+    story.value = data.value;
+
+    content1.value = await markdownParser.parse("md", story.value.content_1, {});
+    content2.value = await markdownParser.parse("md", story.value.content_2, {});
+
+    useHead({
+        meta: [
+            {name: 'twitter:card', content: 'summary_large_image'},
+            {name: 'twitter:site', content: '@kestra_io'},
+            {name: 'twitter:title', content: story.value.metaTitle},
+            {
+                name: 'twitter:description',
+                content: story.value.metaDescription
+            },
+            {name: 'twitter:image', content: story.value.heroImage},
+            {
+                name: 'twitter:image:alt',
+                content: story.value.title
+            }
+        ]
+    })
+
+    const {data: related} = await useAsyncData('related-stories', () => {
+        return $fetch(`https://api.kestra.io/v1/customer-stories?size=3`)
+    })
+
+</script>
+<style scoped lang="scss">
+    @import "../../../assets/styles/variable";
+
+    p, ul > li {
+        line-height: 1.5rem;
+    }
+
+    :deep(h3 > a) {
+        color: $black !important;
+        font-size: $h2-font-size;
+    }
+
+    :deep(h3) {
+        margin-top: $h1-font-size !important;
+        padding: 0 !important;
+        font-weight: 800;
+    }
+
+    :deep(.icon-wrapper) {
+        width: 42px;
+        height: 42px;
+    }
+</style>
\ No newline at end of file
diff --git a/pages/use-cases/stories/index.vue b/pages/use-cases/stories/index.vue
new file mode 100644
index 0000000000..474b6ab967
--- /dev/null
+++ b/pages/use-cases/stories/index.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="main">
+        <Head>
+            <Title>Kestra's Customers Stories</Title>
+            <Meta name="description"
+                  content="Learn how we helped companies manage their critical operations." />
+        </Head>
+        <StoriesList :stories="stories" :total-stories="totalStories" @fetch-page-data="fetchStories" />
+
+        <StoriesFooter />
+    </div>
+</template>
+<script setup>
+    const route = useRoute()
+    const stories = ref([])
+    const totalStories = ref(0)
+
+    const fetchStories = async ({currentPage, itemsPerPage}) => {
+        const {data} = await useAsyncData('stories', () => {
+            return $fetch(`https://api.kestra.io/v1/customer-stories?page=${currentPage}&size=${itemsPerPage}`)
+        })
+        stories.value = data.value.results
+        totalStories.value = data.value.total
+    }
+
+    await fetchStories({currentPage: 1, itemsPerPage: 25})
+</script>
diff --git a/server/routes/icons/[cls].svg.js b/server/routes/icons/[cls].svg.js
new file mode 100644
index 0000000000..6f35f0c68e
--- /dev/null
+++ b/server/routes/icons/[cls].svg.js
@@ -0,0 +1,9 @@
+export default defineEventHandler(async (event) => {
+    const cls = getRouterParam(event, 'cls.svg').substring(0, getRouterParam(event, 'cls.svg').lastIndexOf("."));
+    const response = await $fetch(`https://api.kestra.io/v1/plugins/icons/${cls}`)
+
+    event.node.res.setHeader('content-type', response.type)
+    event.node.res.setHeader('cache-control', "max-age=86400;")
+
+    event.node.res.end(await response.text())
+})
\ No newline at end of file
diff --git a/utils/url.js b/utils/url.js
new file mode 100644
index 0000000000..fccd7bc63e
--- /dev/null
+++ b/utils/url.js
@@ -0,0 +1,8 @@
+import slugifyLib from "slugify";
+
+export function slugify(text) {
+    return slugifyLib(text, {
+        lower: true,
+        locale: 'en',
+    });
+}
\ No newline at end of file