fix(open graph images): added full url, file extension, and switch from query params to paths (#1191)

* fix: add full url to open graph images

* fix double slash

* add file extension

* add .png to url

* update baseUrl

* fix branch name

* fix

* fix env variable name

* fix env name

* fix .env

* more space for X

* add content type header

* remove headers

* encode

* switch to paths instead of params

* cleanup

* remove center

Author: jderochervlk

.github/workflows/deploy.yml

@@ -31,15 +31,32 @@ jobs:
         run: yarn install
       - name: Sync playground bundles
         run: yarn build:sync-bundles
+      - name: Set VITE_DEPLOYMENT_URL
+        shell: bash
+        run: |
+          RAW_BRANCH="${{ github.head_ref || github.ref_name }}"
+
+          if [[ "$RAW_BRANCH" == "master" ]]; then
+             echo "VITE_DEPLOYMENT_URL=" >> "$GITHUB_ENV"
+          else
+             SAFE_BRANCH="${RAW_BRANCH//\//-}"
+             
+             SAFE_BRANCH=$(echo "$SAFE_BRANCH" | tr '[:upper:]' '[:lower:]')
+             
+             echo "SAFE_BRANCH=$SAFE_BRANCH" >> "$GITHUB_ENV"
+             echo "VITE_DEPLOYMENT_URL=https://${SAFE_BRANCH}.rescript-lang.pages.dev" >> "$GITHUB_ENV"
+          fi
       - name: Build
         run: yarn build
+        env:
+          VITE_DEPLOYMENT_URL: ${{ env.VITE_DEPLOYMENT_URL }}
       - name: Deploy
         id: deploy
         uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          command: pages deploy out --project-name=rescript-lang-org
+          command: pages deploy out --project-name=rescript-lang-org --branch=${{ env.SAFE_BRANCH }}
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
           wranglerVersion: 4.63.0
         env:

.gitignore

@@ -66,4 +66,4 @@ functions/**/*.jsx
 _scripts
 
 # Local env files
-.env
+.env.local

functions/ogimage.res functions/ogimage/[[path]]/index.png.resfunctions/ogimage.res renamed to functions/ogimage/[[path]]/index.png.res

@@ -13,12 +13,15 @@ let loadGoogleFont = async (family: string) => {
   await response->Response.arrayBuffer
 }
 
-type context = {request: FetchAPI.request}
+type context = {request: FetchAPI.request, params: {path: array<string>}}
 
-let onRequest = async ({request}: context) => {
-  let url = WebAPI.URL.make(~url=request.url)
-  let title = url.searchParams->URLSearchParams.get("title")
-  let descripton = url.searchParams->URLSearchParams.get("description")
+let onRequest = async ({params}: context) => {
+  Console.log(params.path)
+
+  let title = params.path[0]->Option.getOr("ReScript")->decodeURIComponent
+  //   let url = WebAPI.URL.make(~url=request.url)
+  //   let title = url.searchParams->URLSearchParams.get("title")
+  let descripton = params.path[1]->Option.getOr("ReScript")->decodeURIComponent
 
   // we want to split the title if it contains a |
   let (title, subTitle) = {
@@ -36,11 +39,10 @@ let onRequest = async ({request}: context) => {
         color: "#efefef",
         display: "flex",
         flexDirection: "column",
-        justifyContent: "center",
         alignItems: "flex-start",
         textAlign: "left",
         position: "relative",
-        padding: "60px",
+        padding: "0 60px",
         boxSizing: "border-box",
       }}
     >
@@ -93,6 +95,7 @@ let onRequest = async ({request}: context) => {
           opacity: "0.9",
           maxWidth: "900px",
           textWrap: "balance",
+          // extra space since X wants to overlay the text
         }}
       >
         {React.string(descripton)}

src/bindings/Env.res

@@ -2,7 +2,7 @@
 external dev: bool = "import.meta.env.DEV"
 
 // Cloudflare deployment URL
-external deployment_url: option<string> = "import.meta.env.DEPLOYMENT_URL"
+external deployment_url: option<string> = "import.meta.env.VITE_DEPLOYMENT_URL"
 
 // the root url of the site, e.g. "https://rescript-lang.org/" or "http://localhost:5173/"
 let root_url = switch deployment_url {

src/common/Util.res

@@ -60,8 +60,13 @@ module Url = {
     }
   }
 
-  let makeOpenGraphImageUrl = (title, description) =>
-    `/ogimage?title=${title}&description=${description}`
+  let makeOpenGraphImageUrl = (title, description) => {
+    let baseUrl = Env.deployment_url->Option.getOr(Env.root_url)
+    Console.log(baseUrl)
+    `${baseUrl}${baseUrl->Stdlib.String.endsWith("/") ? "" : "/"}ogimage/${encodeURIComponent(
+        title,
+      )}/${encodeURIComponent(description)}/index.png`
+  }
 }
 
 module Date = {