add WorkflowCard, PopularWorkflows components, more stuff to hero

website/components/PopularWorkflows.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useWorkflowStore } from "~/stores/workflows";
+
+// TODO: Could use any other identifier instead of trsId that seems fit
+
+const props = defineProps<{
+    /** List of Trs Ids for most popular workflows */
+    workflowTrsIds: string[];
+}>();
+
+const workflowStore = useWorkflowStore();
+
+const workflows = computed(() => {
+    return props.workflowTrsIds?.map((trsID) => workflowStore.getWorkflowByTrsId(trsID));
+});
+</script>
+
+<template>
+    <div>
+        <h2 class="text-2xl mx-8 my-4 text-white text-center" :style="{ 'font-weight': 600 }">
+            Get started with some of the most popular or recently updated pipelines
+        </h2>
+        <div class="grid grid-cols-3 gap-8 mx-8">
+            <WorkflowCard
+                v-for="workflow in workflows"
+                :key="workflow.definition.uuid"
+                :workflow="workflow" />
+        </div>
+    </div>
+</template>

website/components/WorkflowCard.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { Workflow } from '~/models/workflow';
+import { formatDate } from "~/utils/";
+
+defineProps<{
+    workflow: Workflow;
+}>();
+</script>
+<template>
+    <UCard
+        :id="`workflow-${workflow.definition.uuid}`"
+        :ui="{
+            strategy: 'override',
+            base: 'flex flex-col',
+            header: {
+                padding: 'px-6 py-4',
+            },
+            body: {
+                base: 'flex-1',
+                padding: 'px-6 py-4',
+            },
+            footer: {
+                padding: 'px-6 py-2',
+            },
+        }"
+        class="mb-6">
+        <template #header>
+            <h2 class="text-xl font-bold mb-2">{{ workflow.definition.name }}</h2>
+        </template>
+        <p class="mb-4">{{ workflow.definition.annotation }}</p>
+
+        <div v-if="workflow.definition.tags && workflow.definition.tags.length > 0" class="mb-4">
+            <UBadge v-for="tag in workflow.definition.tags" :key="tag" class="mr-2 mb-2" variant="soft">
+                {{ tag }}
+            </UBadge>
+        </div>
+        <template #footer>
+            <div class="flex space-x-4">
+                <p class="text-xs text-gray-500">Release {{ workflow.definition.release }}</p>
+                <p class="text-xs text-gray-500">{{ formatDate(workflow.updated) }}</p>
+            </div>
+        </template>
+
+        <UButton :to="`/workflow/${encodeURIComponent(workflow.trsID)}/`">Details</UButton>
+    </UCard>
+</template>

website/layouts/default.vue

@@ -3,6 +3,10 @@ import { computed, useSlots } from "vue";
 
 const slots = useSlots();
 
+const hasHero = computed(() => {
+    return !!slots.hero;
+});
+
 const hasLeftSidebar = computed(() => {
     return !!slots.leftSidebar;
 });
@@ -11,7 +15,8 @@ const hasRightSidebar = computed(() => {
 });
 </script>
 <template>
-    <div class="overflow-y-auto">
+    <div :class="hasHero ? 'overflow-y-auto' : 'overflow-hidden'">
+        <!-- Hero -->
         <slot name="hero"></slot>
         <div class="flex w-full h-full">
             <!-- Left sidebar -->

website/pages/index.vue

@@ -2,10 +2,20 @@
 import { ref, computed } from "vue";
 import { type Workflow, type WorkflowCollection } from "~/models/workflow";
 import { useWorkflowStore } from "~/stores/workflows";
-import { formatDate } from "~/utils/";
+import waveSvg from "~/public/waveNounProject.svg";
+
+// TODO: As an initial implementation, we are explicitly defining trsIds here,
+//       but this should ideally be fetched from somewhere, or provided in a yml etc.
+//       Could use any other identifier instead of trsId that seems fit
+const POPULAR_WORKFLOW_TRS_IDS = [
+    "#workflow/github.com/iwc-workflows/atacseq/main",
+    "#workflow/github.com/iwc-workflows/chipseq-sr/main",
+    "#workflow/github.com/iwc-workflows/sars-cov-2-variation-reporting/COVID-19-VARIATION-REPORTING",
+];
 
 const searchQuery = ref("");
 const selectedWorkflow = ref<Workflow | null>(null);
+const gridDiv = ref<HTMLDivElement | null>(null);
 
 const workflowStore = useWorkflowStore();
 
@@ -23,6 +33,10 @@ const filteredWorkflows = computed(() =>
     ),
 );
 
+function scrollToGrid() {
+    gridDiv.value?.scrollIntoView({ behavior: "smooth" });
+}
+
 function scrollToWorkflow(workflow: Workflow) {
     const element = document.getElementById(`workflow-${workflow.definition.uuid}`);
     if (element) {
@@ -40,16 +54,24 @@ function selectWorkflow(workflow: Workflow) {
 </script>
 
 <template>
-    <NuxtLayout>
+    <NuxtLayout class="overflow-hidden">
         <template #hero>
-            <div class="container-fluid text-white text-center bg-ebony-clay p-8 space-y-6">
-                <h1 class="text-6xl mx-8" :style="{ 'font-weight': 700 }">
+            <div class="flex bg-ebony-clay p-8 space-y-6 items-center" :style="{ 'flex-direction' : 'column' }">
+                <h1 class="text-6xl mx-8 text-white text-center" :style="{ 'font-weight': 700 }">
                     Discover and run vetted analysis pipelines  on Galaxy
                 </h1>
-                <h3 class="text-xl mx-8" :style="{ 'font-weight': 600 }">
+                <h3 class="text-xl mx-8 text-white text-center" :style="{ 'font-weight': 600 }">
                     Ready-to-use, open-source pipelines with sample data and training materials
                     to make progress quickly and reliably.
                 </h3>
+                <PopularWorkflows :workflow-trs-ids="POPULAR_WORKFLOW_TRS_IDS" />
+                <div>
+                    <button
+                        class="bg-white text-ebony-clay text-xl px-4 py-2 rounded"
+                        @click="scrollToGrid">
+                        Browse all pipelines
+                    </button>
+                </div>
             </div>
             <div class="overflow-hidden p-0">
                 <svg
@@ -58,7 +80,7 @@ function selectWorkflow(workflow: Workflow) {
                     height="100"
                     class="fill-ebony-clay w-full"
                     :style="{ transform: 'rotate(180deg)' }">
-                    <use xlink:href="/waveNounProject.svg#path" />
+                    <use :xlink:href="`${waveSvg}#path`" />
                 </svg>
             </div>
         </template>
@@ -82,45 +104,11 @@ function selectWorkflow(workflow: Workflow) {
             </ul>
         </template>
         <template #content>
-            <div class="grid grid-cols-3 gap-4">
-                <UCard
+            <div ref="gridDiv" class="grid grid-cols-3 gap-4">
+                <WorkflowCard
                     v-for="workflow in filteredWorkflows"
                     :key="workflow.definition.uuid"
-                    :id="`workflow-${workflow.definition.uuid}`"
-                    :ui="{
-                        strategy: 'override',
-                        base: 'flex flex-col',
-                        header: {
-                            padding: 'px-6 py-4',
-                        },
-                        body: {
-                            base: 'flex-1',
-                            padding: 'px-6 py-4',
-                        },
-                        footer: {
-                            padding: 'px-6 py-2',
-                        },
-                    }"
-                    class="mb-6">
-                    <template #header>
-                        <h2 class="text-xl font-bold mb-2">{{ workflow.definition.name }}</h2>
-                    </template>
-                    <p class="mb-4">{{ workflow.definition.annotation }}</p>
-
-                    <div v-if="workflow.definition.tags && workflow.definition.tags.length > 0" class="mb-4">
-                        <UBadge v-for="tag in workflow.definition.tags" :key="tag" class="mr-2 mb-2" variant="soft">
-                            {{ tag }}
-                        </UBadge>
-                    </div>
-                    <template #footer>
-                        <div class="flex space-x-4">
-                            <p class="text-xs text-gray-500">Release {{ workflow.definition.release }}</p>
-                            <p class="text-xs text-gray-500">{{ formatDate(workflow.updated) }}</p>
-                        </div>
-                    </template>
-
-                    <UButton :to="`/workflow/${encodeURIComponent(workflow.trsID)}/`">Details</UButton>
-                </UCard>
+                    :workflow="workflow" />
             </div>
         </template>
     </NuxtLayout>

website/stores/workflows.ts

@@ -10,13 +10,18 @@ export const useWorkflowStore = defineStore("workflow", () => {
 
     const allWorkflows = computed(() => workflowCollections.flatMap((collection) => collection.workflows));
 
+    const getWorkflowByTrsId = (trsID: string) => {
+        return allWorkflows.value.find((w) => w.trsID === trsID) as Workflow;
+    }
+
     const setWorkflow = () => {
         workflow.value = allWorkflows.value.find((w) => w.trsID === route.params.id) as Workflow;
     };
 
     return {
         workflow,
         allWorkflows,
+        getWorkflowByTrsId,
         setWorkflow,
     };
 });