Merge pull request #2705 from galaxyproject/esg-project-improvments

ESG Project Improvements

content/projects/esg/funding_notice.md

@@ -1,4 +1,3 @@
-
-<img src="https://galaxyproject.org/assets/static/EN-Funded%20by%20the%20EU-POS.dc52710.63dd8385fa1992706d3c9f79d7285627.png" class="float-left" />
+<img src="/projects/esg/images/EN-Funded by the EU-POS.png" class="img-sizer-small" />
 
 **EuroScienceGateway** was funded by the European Union programme Horizon Europe (**HORIZON-INFRA-2021-EOSC-01-04**) under grant agreement number [101057388](https://cordis.europa.eu/project/id/101057388) and by UK Research and Innovation (UKRI) under the UK government’s Horizon Europe funding guarantee grant number [10038963](https://gtr.ukri.org/projects?ref=10038963).

src/assets/styles.scss

@@ -916,6 +916,9 @@ pre {
 .img-sizer {
     margin-bottom: 1rem;
 }
+.img-sizer-small img {
+    width: clamp(10rem, 100%, 20rem);
+}
 .img-sizer p {
     height: 100%;
     margin-bottom: 0;

src/components/Mastodon.vue

@@ -0,0 +1,23 @@
+<template>
+    <iframe
+        allowfullscreen
+        sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox"
+        height="100%"
+        :src="`https://mastofeed.com/apiv2/feed?userurl=https%3A%2F%2F${instanceUrl}%2Fusers%2F${username}&theme=auto&size=100&header=true&replies=true&boosts=true`"
+    />
+</template>
+
+<script>
+export default {
+    props: {
+        instanceUrl: {
+            type: String,
+            default: "mstdn.science",
+        },
+        username: {
+            type: String,
+            default: "galaxyproject",
+        },
+    },
+};
+</script>

src/components/esg/Partners.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="card h-100 shadow-sm">
+    <div class="card h-100 shadow-sm w-100">
         <h2 class="card-header mt-0">
             {{ title }}
         </h2>

src/main.js

@@ -8,6 +8,7 @@ import LinkBox from "~/components/LinkBox.vue";
 import VegaEmbed from "~/components/VegaEmbed.vue";
 import MarkdownEmbed from "~/components/MarkdownEmbed.vue";
 import Twitter from "~/components/Twitter.vue";
+import Mastodon from "~/components/Mastodon.vue";
 import VideoPlayer from "~/components/VideoPlayer.vue";
 import Carousel from "~/components/Carousel.vue";
 import CalendarEmbed from "~/components/CalendarEmbed.vue";
@@ -22,6 +23,7 @@ export default function (Vue, { router, head, isClient }) {
     Vue.component("VegaEmbed", VegaEmbed);
     Vue.component("MarkdownEmbed", MarkdownEmbed);
     Vue.component("Twitter", Twitter);
+    Vue.component("Mastodon", Mastodon);
     Vue.component("VideoPlayer", VideoPlayer);
     Vue.component("Carousel", Carousel);
     Vue.component("CalendarEmbed", CalendarEmbed);

src/pages/projects/esg/Index.vue

@@ -103,11 +103,11 @@
 
             <div class="card blue-card shadow-sm">
                 <h2 class="card-header mt-0">
-                    <span class="icon fab fa-twitter mr-2"></span>
-                    <a href="https://twitter.com/galaxyproject">Twitter</a>
+                    <span class="icon fab fa-mastodon mr-2"></span>
+                    <a href="https://mstdn.science/@galaxyproject" target="_blank">Mastodon</a>
                 </h2>
                 <div class="card-body p-2">
-                    <Twitter user="galaxyproject" :height="410" />
+                    <Mastodon />
                 </div>
             </div>
         </div>
@@ -124,7 +124,7 @@
 <script>
 import EsgLayout from "~/layouts/ESG.vue";
 import Partners from "~/components/esg/Partners.vue";
-import Twitter from "~/components/Twitter.vue";
+import Mastodon from "~/components/Mastodon.vue";
 import ItemListBrief from "~/components/ItemListBrief.vue";
 import EsgInteractivePosterVue from "~/components/esg/EsgInteractivePoster.vue";
 import slugify from "@sindresorhus/slugify";
@@ -133,7 +133,7 @@ export default {
     components: {
         EsgLayout,
         Partners,
-        Twitter,
+        Mastodon,
         ItemListBrief,
         EsgInteractivePosterVue,
     },