Merge pull request #130 from Linaro/webdev-1756-socials-images

WEBDEV-1756 - socials images
Linaro · Oct 15, 2024 · 36f73f8 · 36f73f8
2 parents 6dbabf1 + 006fcd9
commit 36f73f8
Show file tree

Hide file tree

Showing 10 changed files with 650 additions and 22 deletions.
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
@@ -2,7 +2,7 @@ name: PullRequestAction
 
 on:
   pull_request_target:
-    branches: [ main ]
+    branches: [main]
 
 # Cancel in-progress jobs or runs for the current pull request
 concurrency:

diff --git a/.github/workflows/push_main.yml b/.github/workflows/push_main.yml
@@ -59,6 +59,7 @@ jobs:
           export CLOUDINARY_API_KEY=${{ secrets.CLOUDINARY_API_KEY }}
           export CLOUDINARY_API_SECRET=${{ secrets.CLOUDINARY_API_SECRET }}
           export CLOUDINARY_URL=${{ secrets.CLOUDINARY_URL }}
+          export PUBLIC_CLOUDINARY_CLOUD_NAME=${{ secrets.PUBLIC_CLOUDINARY_CLOUD_NAME }}
           export CUSTOM_DOMAIN=${{ vars.MAIN_CUSTOM_DOMAIN }}
           export GA_ID=${{ vars.MAIN_GA_ID }}
           # Set up yarn

diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "@solid-primitives/scheduled": "^1.4.3",
     "@tailwindcss/typography": "^0.5.12",
     "astro": "^4.5.16",
+    "astro-cloudinary": "^1.1.0",
     "astro-icon": "^1.1.0",
     "astro-navbar": "^2.3.1",
     "astro-pagefind": "^1.4.0",

diff --git a/src/components/head/BaseHead.astro b/src/components/head/BaseHead.astro
@@ -4,12 +4,97 @@ import GoogleAnalytics from "./GoogleAnalytics.astro";
 import { SEO } from "astro-seo";
 import "@fontsource/lato";
 import "../../styles/global.scss";
+import { getCldOgImageUrl } from 'astro-cloudinary/helpers';
 
 const GA_ID = import.meta.env.GA_ID;
 
-const { title = "", description = "", type = "website" } = Astro.props;
+const { title = "", description = "", type = "website", image = "" } = Astro.props;
+
+const logoPublicId = 'linaro-website/graphics/infinito-cropped.svg';
+
+const social_image = getCldOgImageUrl({
+  src: image,
+  effects: [
+    {
+      background: 'rgb:010A44'
+    },
+    {
+      color: 'rgb:6715E8',
+      colorize: '100'
+    },
+    {
+      gradientFade: 'symmetric'
+    }
+  ],
+  overlays: [
+    {
+      publicId: image,
+      width: 1200,
+      height: 630,
+      crop: 'fill',
+      effects: [
+        { opacity: 20 }
+      ]
+    },
+    {
+      width: 1000,
+      crop: 'fit',
+      text: {
+        color: 'white',
+        fontFamily: 'Lato',
+        fontSize: 36,
+        fontWeight: 'normal',
+        lineSpacing: 10,
+        lineSpacing: 10,
+        text: title
+      },
+      position: {
+        x: 100,
+        y: 100,
+        gravity: 'north_west'
+      },
+    },
+    {
+      publicId: image,
+      width: 1000,
+      height: 2,
+      effects: [{
+        colorize: '100,co_white',
+        opacity: 70
+      }],
+      position: {
+        x: 100,
+        y: 175,
+        gravity: 'south_west'
+      },
+    },
+    {
+      width: 60,
+      crop: 'fit',
+      publicId: logoPublicId,
+      position: {
+        x: 100,
+        y: 102,
+        gravity: 'south_west'
+      },
+    },
+    {
+      text: {
+        color: 'white',
+        fontFamily: 'Lato',
+        fontSize: 37,
+        fontWeight: 'bold',
+        text: "Linaro.org"
+      },
+      position: {
+        x: 180,
+        y: 100,
+        gravity: 'south_west'
+      },
+    },
+  ]
+})
 
-const social_image = "";
 ---
 
 <head>
@@ -78,7 +163,7 @@ const social_image = "";
       ],
       meta: [
         {
-          property: "twitter:image",
+          name: "twitter:image",
           content: social_image,
         },
         {
@@ -93,4 +178,4 @@ const social_image = "";
     }}
   />
   <link rel="stylesheet" href="https://use.typekit.net/job6bfm.css" />
-</head>
+</head>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -6,14 +6,20 @@ import Footer from "@/components/footer/Footer.astro";
 interface Props {
   title: string;
   description: string;
+  image?: string;
   type?: string;
 }
 
-const { title, description, type = "website" } = Astro.props;
+const { title, description, type = "website", image } = Astro.props;
 ---
 
 <html lang="en">
-  <BaseHead title={title + " | Linaro"} description={description} type={type} />
+  <BaseHead
+    title={title + " | Linaro"}
+    description={description}
+    image={image}
+    type={type}
+  />
   <body class="min-h-screen flex flex-col text-white">
     <NavBar />
     <slot />

diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
@@ -37,7 +37,7 @@ const {
 } = Astro.props;
 
 const { data: author } = (await getEntry(
-  authorRef
+  authorRef,
 )) as CollectionEntry<"authors">;
 
 const tags = await getEntries(tagList);
@@ -62,7 +62,7 @@ const summary =
       .use(stripMarkdown, {
         remove: ["heading"],
       })
-      .process(body)
+      .process(body),
   )
     .split(" ")
     .slice(0, 30)
@@ -88,15 +88,17 @@ if (related.length > 0) {
 }
 ---
 
-<BaseLayout title={title + " | Blog"} description={description}>
+<BaseLayout title={title + " | Blog"} description={description} image={image}>
   <main
     data-pagefind-body
     data-pagefind-filter={`type:${collection}`}
-    class="z-0">
+    class="z-0"
+  >
     <section
       class:list={[
         "relative hero-background-image pt-32 pb-16  container mx-auto max-w-5xl px-8 xl:px-0 z-[-1]",
-      ]}>
+      ]}
+    >
       <h1 class="text-5xl font-bold mb-16 max-w-4xl">
         {title}
       </h1>
@@ -153,7 +155,8 @@ if (related.length > 0) {
   </main>
   <aside
     class="container mx-auto max-w-5xl px-8 xl:px-0 mb-24"
-    data-pagefind-ignore>
+    data-pagefind-ignore
+  >
     <h2 class="text-5xl text-linaro-yellow font-bold mb-16">Related Posts</h2>
     <ul class="flex flex-wrap gap-8 justify-center">
       {relatedPosts?.map((post) => <BlogListing {...post} />)}

diff --git a/src/layouts/EventLayout.astro b/src/layouts/EventLayout.astro
@@ -57,7 +57,7 @@ const summary =
       .use(stripMarkdown, {
         remove: ["heading"],
       })
-      .process(body)
+      .process(body),
   )
     .split(" ")
     .slice(0, 30)
@@ -79,14 +79,14 @@ const upcomingEvents = (
     ({ data }) =>
       (String(import.meta.env.IS_PREVIEW) === "true" ||
         Date.now() > new Date(data.date_published).getTime()) &&
-      new Date(data.event_start).getTime() > Date.now()
+      new Date(data.event_start).getTime() > Date.now(),
   )
 )
   .sort((a, b) => dayjs(b.data.event_start).diff(a.data.event_start))
   .slice(0, 3);
 ---
 
-<BaseLayout title={title + " | Events"} description={description}>
+<BaseLayout title={title + " | Events"} description={description} image={image}>
   <main data-pagefind-body data-pagefind-filter="type:events" class="z-0">
     <section
       class:list={[

diff --git a/src/layouts/NewsLayout.astro b/src/layouts/NewsLayout.astro
@@ -36,7 +36,7 @@ const {
 } = Astro.props;
 
 const { data: author } = (await getEntry(
-  authorRef
+  authorRef,
 )) as CollectionEntry<"authors">;
 
 const tags = await getEntries(tagList);
@@ -61,7 +61,7 @@ const summary =
       .use(stripMarkdown, {
         remove: ["heading"],
       })
-      .process(body)
+      .process(body),
   )
     .split(" ")
     .slice(0, 30)
@@ -87,7 +87,11 @@ if (related.length > 0) {
 }
 ---
 
-<BaseLayout title={title + " | Newsroom"} description={description}>
+<BaseLayout
+  title={title + " | Newsroom"}
+  description={description}
+  image={image}
+>
   <main
     data-pagefind-body
     data-pagefind-filter={`type:${collection}`}

diff --git a/sst.config.ts b/sst.config.ts
@@ -22,6 +22,7 @@ export default {
             CLOUDINARY_API_KEY: process.env.CLOUDINARY_API_KEY!,
             CLOUDINARY_API_SECRET: process.env.CLOUDINARY_API_SECRET!,
             CLOUDINARY_URL: process.env.CLOUDINARY_URL!,
+            PUBLIC_CLOUDINARY_CLOUD_NAME: process.env.PUBLIC_CLOUDINARY_CLOUD_NAME!,
           },
         });
         stack.addOutputs({
@@ -50,6 +51,7 @@ export default {
             CLOUDINARY_API_KEY: process.env.CLOUDINARY_API_KEY!,
             CLOUDINARY_API_SECRET: process.env.CLOUDINARY_API_SECRET!,
             CLOUDINARY_URL: process.env.CLOUDINARY_URL!,
+            PUBLIC_CLOUDINARY_CLOUD_NAME: process.env.PUBLIC_CLOUDINARY_CLOUD_NAME!,
             IS_PREVIEW: process.env.IS_PREVIEW!,
           },
         });