From 9b7f8f3822b4e541d7a87792d3b415a87e53824d Mon Sep 17 00:00:00 2001 From: Sudaraka Jayathilaka Date: Sun, 14 Apr 2024 01:04:11 +0800 Subject: [PATCH 1/3] feat(link-unfurl): add support for rich link preview on MDX --- .gitignore | 5 +- gatsby-config.js | 9 +++- package.json | 1 + src/styles/global.ts | 116 +++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 129 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index aa29491..1d382c7 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 \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js index 20e017f..e47e776 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -214,8 +214,9 @@ module.exports = ({ { resolve: `@raae/gatsby-remark-oembed`, options: { + usePrefix: ["oembed", "video"], providers: { - include: ["Instagram"] + include: ["Twitter", "Instagram"] } } }, @@ -245,6 +246,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..5c03ada 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,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; +} `; From d11e101ac8231bac7518e83da09c7a939e9f7bd3 Mon Sep 17 00:00:00 2001 From: Sudaraka Jayathilaka Date: Sun, 14 Apr 2024 01:13:29 +0800 Subject: [PATCH 2/3] fix(react-helmet): remove react helmet plugin --- .gitignore | 2 +- gatsby-config.js | 1 - package.json | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 1d382c7..0c563fc 100644 --- a/.gitignore +++ b/.gitignore @@ -73,4 +73,4 @@ yarn-error.log contentful.json # gatsby-plugin-link-unfurl files -link-cache \ No newline at end of file +link-cache diff --git a/gatsby-config.js b/gatsby-config.js index e47e776..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`, diff --git a/package.json b/package.json index 5c03ada..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", From 70d37c813397d9315ca07a371145d24d3f480a5e Mon Sep 17 00:00:00 2001 From: Sudaraka Jayathilaka Date: Sun, 14 Apr 2024 01:29:21 +0800 Subject: [PATCH 3/3] feat(link unfurl): update readme with features --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index b7afdf0..7a7b5f1 100644 --- a/README.md +++ b/README.md @@ -13,3 +13,6 @@ This repo is a fork of [@narative/gatsby-novela-theme](https://www.npmjs.com/pac latest versions of react, react-dom and gatsby. You can find the original readme and the changelog in the [docs-archive](https://github.com/sudaraka94/gatsby-theme-novela/tree/main/docs-archive) directory. +## Features +1. MDX Support +2. Link Previews