From 052cfcec69733329e088ab4a80939e9d6a10319a Mon Sep 17 00:00:00 2001
From: Sudaraka Jayathilaka <sudaraka94@users.noreply.github.com>
Date: Sun, 14 Apr 2024 01:22:00 +0800
Subject: [PATCH] Rich link previews (#14)

* feat(link-unfurl): add support for rich link preview on MDX

* fix(react-helmet): remove react helmet plugin
---
 .gitignore           |   5 +-
 gatsby-config.js     |  10 +++-
 package.json         |   2 +-
 src/styles/global.ts | 116 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 129 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index aa29491..0c563fc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -70,4 +70,7 @@ yarn-error.log
 
 .netlify/
 
-contentful.json
\ No newline at end of file
+contentful.json
+
+# gatsby-plugin-link-unfurl files
+link-cache
diff --git a/gatsby-config.js b/gatsby-config.js
index 20e017f..94df0f6 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -10,7 +10,6 @@ module.exports = ({
   plugins: [
     `gatsby-plugin-typescript`,
     `gatsby-image`,
-    `gatsby-plugin-react-helmet`,
     `gatsby-plugin-sharp`,
     `gatsby-transformer-sharp`,
     `gatsby-transformer-remark`,
@@ -214,8 +213,9 @@ module.exports = ({
           {
             resolve: `@raae/gatsby-remark-oembed`,
             options: {
+              usePrefix: ["oembed", "video"],
               providers: {
-                include: ["Instagram"]
+                include: ["Twitter", "Instagram"]
               }
             }
           },
@@ -245,6 +245,12 @@ module.exports = ({
               rel: 'noreferrer', // eslint-disable-line unicorn/prevent-abbreviations
             },
           },
+          {
+           resolve: `@sudaraka94/gatsby-remark-link-unfurl`,
+            options: {
+              processedUrlsFile: `${__dirname}/link-cache/cache.json`,
+            },
+          },
         ],
         mdxOptions: {
           rehypePlugins: [
diff --git a/package.json b/package.json
index 2c4886f..e96e013 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,6 @@
     "gatsby-plugin-feed": "5.13.1",
     "gatsby-plugin-mailchimp": "^5.2.2",
     "gatsby-plugin-mdx": "^5.13.1",
-    "gatsby-plugin-react-helmet": "^6.13.1",
     "gatsby-plugin-sharp": "^5.13.1",
     "gatsby-plugin-theme-ui": "^0.16.2",
     "gatsby-plugin-typescript": "^5.13.1",
@@ -62,6 +61,7 @@
     "gatsby-remark-embed-video": "^3.2.1",
     "gatsby-remark-external-links": "0.0.4",
     "gatsby-remark-images": "^7.13.1",
+    "@sudaraka94/gatsby-remark-link-unfurl": "^1.0.0",
     "gatsby-remark-numbered-footnotes": "^1.0.1",
     "gatsby-remark-prismjs": "^7.13.1",
     "gatsby-remark-smartypants": "^6.13.1",
diff --git a/src/styles/global.ts b/src/styles/global.ts
index 9f0cc4a..1304bd7 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -142,4 +142,120 @@ export const globalStyles = css`
   img.Image__Zoom ~ div {
     background: transparent !important;
   }
+
+  /**
+   * Unfurl styles
+   */
+
+  a.gatsby-remark-link-unfurl__container {
+    margin: 0 auto;
+    font-size: 21px;
+    line-height: 24px;
+    font-weight: lighter;
+    background-color: #fff;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #e1e8ed;
+    overflow: hidden;
+    color: #181919;
+    font-family: InterUI, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
+    display: flex;
+    text-decoration: none;
+    opacity: 1;
+    position: relative;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+    transition-property: background, border-color;
+    will-change: background, border-color;
+    flex-direction: row;
+    height: 8vw;
+
+    @media (max-width: 1024px) {
+      height: 16vw;
+    }
+
+    @media (max-width: 480px) {
+      height: 28vw;
+    }
+}
+
+a.gatsby-remark-link-unfurl__container:hover {
+    background: #f5f8fa;
+    border-color: rgba(136, 153, 166, 0.5);
+    outline: 0;
+}
+
+.gatsby-remark-link-unfurl__media {
+    flex-shrink: 1;
+    flex-grow: 1;
+    flex-basis: 0%;
+    background: transparent no-repeat center center / cover;
+    display: block;
+    overflow: hidden;
+    height: auto;
+}
+
+.gatsby-remark-link-unfurl__content {
+    display: flex;
+    padding: 14px 12px;
+    min-width: 0;
+    box-sizing: border-box;
+    flex: 0 0 75%;
+    justify-content: space-around;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.gatsby-remark-link-unfurl__title {
+    text-align: left;
+    font-weight: bold;
+    margin: 0;
+    width: 100%;
+    flex-grow: 1.2;
+    font-size: 16px;
+}
+
+.gatsby-remark-link-unfurl__title p {
+    margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.gatsby-remark-link-unfurl__description {
+    text-align: left;
+    font-size: 14px;
+    flex-grow: 2;
+    margin: auto 0;
+    line-height: 18px;
+}
+
+.gatsby-remark-link-unfurl__description p {
+    margin: 0;
+}
+
+.gatsby-remark-link-unfurl__container footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: left;
+    margin: 0;
+    flex-grow: 0;
+    font-size: 12px;
+    width: 100%;
+}
+
+.gatsby-remark-link-unfurl__container footer p {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-top: 0;
+}
+
+.gatsby-remark-link-unfurl__container footer span {
+    min-width: 16px;
+    width: 25px;
+    height: 25px;
+    background-size: contain;
+}
 `;