Rich link previews (#14)

* feat(link-unfurl): add support for rich link preview on MDX * fix(react-helmet): remove react helmet plugin
sudaraka94 · Apr 13, 2024 · 052cfce · 052cfce
1 parent c3e8e97
commit 052cfce
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -70,4 +70,7 @@ yarn-error.log
 
 .netlify/
 
-contentful.json
+contentful.json
+
+# gatsby-plugin-link-unfurl files
+link-cache
diff --git 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
@@ -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
@@ -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;
+}
 `;