Merge pull request #811 from dannon/social-previews

Social previews, followup of meta.

Author: mvdbeek

website/nuxt.config.ts

@@ -23,5 +23,13 @@ export default defineNuxtConfig({
         },
     },
 
+    // Add runtime configuration for the application URL
+    runtimeConfig: {
+        public: {
+            // Default base URL for production
+            appUrl: process.env.APP_URL || "https://iwc.galaxyproject.org",
+        },
+    },
+
     compatibilityDate: "2025-03-03",
 });

website/pages/about.vue

@@ -129,6 +129,30 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
+import { useSeoMeta, useRuntimeConfig } from "#imports";
+
+// Get the public runtime config to access the app URL
+const config = useRuntimeConfig().public;
+const baseUrl = config.appUrl || (process.client ? window.location.origin : "https://workflows.galaxyproject.org");
+
+// Add SEO meta tags using the useSeoMeta composable
+useSeoMeta({
+    title: "About the Galaxy Workflows Library",
+    description:
+        "Learn about the IWC curated collection of peer-reviewed, ready-to-use Galaxy workflows for scientific analysis",
+    ogTitle: "About the Galaxy Workflows Library",
+    ogDescription:
+        "Discover a curated collection of ready-to-use, peer-reviewed Galaxy workflows for scientific analysis",
+    ogImage: `${baseUrl}/iwc_logo.png`,
+    ogType: "website",
+    twitterCard: "summary",
+    twitterTitle: "About the Galaxy Workflows Library",
+    twitterDescription:
+        "Discover a curated collection of ready-to-use, peer-reviewed Galaxy workflows for scientific analysis",
+    twitterImage: `${baseUrl}/iwc_logo.png`,
+});
+
 const features = [
     {
         icon: "uil:check-circle",

website/pages/index.vue

@@ -2,11 +2,31 @@
 import { ref, computed, onMounted, watch } from "vue";
 import { type Workflow } from "~/models/workflow";
 import { useWorkflowStore } from "~/stores/workflows";
+import { useSeoMeta, useRuntimeConfig } from "#imports";
 
 import MarkdownRenderer from "~/components/MarkdownRenderer.vue";
 
 import Fuse from "fuse.js";
 
+// Get the public runtime config to access the app URL
+const config = useRuntimeConfig().public;
+const baseUrl = config.appUrl || (process.client ? window.location.origin : "https://iwc.galaxyproject.org");
+
+// Add SEO meta tags using the specialized useSeoMeta composable
+useSeoMeta({
+    title: "Intergalactic Workflow Commission",
+    description:
+        "Ready-to-use, open-source pipelines with sample data and training materials to make progress quickly and reliably",
+    ogTitle: "Intergalactic Workflow Commission",
+    ogDescription: "Discover and run vetted analysis pipelines on Galaxy",
+    ogImage: `${baseUrl}/iwc_logo.png`,
+    ogType: "website",
+    twitterCard: "summary",
+    twitterTitle: "Intergalactic Workflow Commission",
+    twitterDescription: "Discover and run vetted analysis pipelines on Galaxy",
+    twitterImage: `${baseUrl}/iwc_logo.png`,
+});
+
 const categoryDescription = ref<string | null>(null);
 const selectedCategory = ref<string | null>(null);
 const isLoading = ref(false);

website/pages/workflow/[id].vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onBeforeMount, onMounted, onUnmounted, nextTick, watch } from "vue";
 import { useRoute } from "vue-router";
+import { useSeoMeta, useRuntimeConfig } from "#imports";
 import MarkdownRenderer from "~/components/MarkdownRenderer.vue";
 import Author from "~/components/Author.vue";
 import { useWorkflowStore } from "~/stores/workflows";
@@ -12,6 +13,39 @@ const appConfig = useAppConfig();
 const workflowStore = useWorkflowStore();
 const workflow = computed(() => workflowStore.workflow);
 
+// Get the public runtime config to access the app URL
+const config = useRuntimeConfig().public;
+const baseUrl = config.appUrl || (process.client ? window.location.origin : "https://iwc.galaxyproject.org");
+
+const authors = computed(() => {
+    let authorLine = "";
+    if (workflow.value?.authors) {
+        authorLine = workflow.value.authors.map((author) => author.name).join(", ");
+    }
+    return authorLine;
+});
+
+const workflowName = computed(() => {
+    return workflow.value?.definition?.name || "Workflow Details";
+});
+
+// Generate SEO meta tags for the workflow detail page
+// Using computed properties for reactive SEO meta
+useSeoMeta({
+    title: computed(() =>
+        workflow.value ? `${workflowName.value} | ${appConfig.site.name}` : "Workflow Details | " + appConfig.site.name,
+    ),
+    description: computed(() => workflow.value?.definition.annotation || "Galaxy workflow"),
+    ogTitle: computed(() => workflow.value?.definition?.name || "Workflow Details"),
+    ogDescription: computed(() => workflow.value?.definition.annotation || "Galaxy workflow"),
+    ogImage: `${baseUrl}/iwc_logo.png`,
+    ogType: "website",
+    twitterCard: "summary",
+    twitterTitle: computed(() => workflow.value?.definition?.name || "Workflow Details"),
+    twitterDescription: computed(() => workflow.value?.definition.annotation || "Galaxy workflow"),
+    twitterImage: `${baseUrl}/iwc_logo.png`,
+});
+
 const selectedInstance = ref("");
 
 const launchUrl = computed(() => {
@@ -68,10 +102,6 @@ const tools = computed(() => {
     return Array.from(new Set(toolIds));
 });
 
-const workflowName = computed(() => {
-    return workflow.value?.definition?.name || "Workflow Details";
-});
-
 // Define interface for tab items
 interface TabItem {
     label: string;
@@ -151,16 +181,6 @@ onBeforeMount(async () => {
         setActiveTabFromHash();
     });
 });
-
-useHead({
-    title: computed(() => `${workflowName.value} | ${appConfig.site.name}`),
-    meta: [
-        {
-            name: "description",
-            content: `Workflow ${workflowName.value}`,
-        },
-    ],
-});
 </script>
 
 <template>