Merge pull request #19 from charlotte-hues/feature/codepen-integration

Feat/Codepen Compatibility
nicolashmln · Dec 9, 2023 · e151e56 · e151e56
2 parents 641d2a9 + 12a2de8
commit e151e56
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Strapi plugin oEmbed
 
-Embed content from third party sites (Youtube, Vimeo, Tiktok, Soundcloud, Spotify...) for https://strapi.io v4 (For strapi v3 use v0.4.0)
+Embed content from third party sites (Youtube, Vimeo, Tiktok, Soundcloud, Spotify, CodePen...) for https://strapi.io v4 (For strapi v3 use v0.4.0)
 
 ![](demo.gif)
 
@@ -87,6 +87,7 @@ If you paste the url `https://www.youtube.com/watch?v=tkiOqSTVGds` in the modal,
 - Tiktok
 - Soundcloud
 - Spotify
+- CodePen
 - Twitter
 
 Feel free to submit a PR with the provider you want, you just have to edit this file: `server/services/oembed.js`.

diff --git a/admin/src/translations/en.json b/admin/src/translations/en.json
@@ -4,6 +4,6 @@
   "form.button.delete": "Delete",
   "modal.import.title": "Import oEmbed content",
   "modal.import.input.label": "URL",
-  "modal.import.input.description": "Youtube, Vimeo, Tiktok, Twitter, Soundcloud or Spotify",
+  "modal.import.input.description": "Youtube, Vimeo, Tiktok, Twitter, Soundcloud, Spotify or CodePen",
   "modal.import.button.import": "Import"
 }
diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "strapi-plugin-oembed",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Embed content from third party sites (YouTube, Vimeo, SoundCloud, Spotify...) in Strapi",
   "strapi": {
     "name": "oembed",
     "displayName": "oEmbed",
     "icon": "globe-asia",
-    "description": "Embed content from third party sites (YouTube, Vimeo, SoundCloud, Spotify...) in Strapi",
+    "description": "Embed content from third party sites (YouTube, Vimeo, SoundCloud, Spotify, CodePen...) in Strapi",
     "kind": "plugin"
   },
   "dependencies": {},
@@ -29,7 +29,9 @@
     "vimeo",
     "tiktok",
     "soundcloud",
-    "spotify"
+    "spotify",
+    "codepen",
+    "twitter"
   ],
   "peerDependencies": {
     "@strapi/strapi": "^4.4.0"

diff --git a/server/services/oembed.js b/server/services/oembed.js
@@ -16,8 +16,7 @@ module.exports = (
     async fetch(url) {
       let data;
 
-
-      const matches = url.match(/^(https?:\/\/)?(www\.)?(youtu\.be|youtube\.com|soundcloud\.com|vimeo\.com|tiktok\.com|open\.spotify\.com|twitter\.com)/i);
+      const matches = url.match(/^(https?:\/\/)?(www\.)?(youtu\.be|youtube\.com|soundcloud\.com|vimeo\.com|tiktok\.com|open\.spotify\.com|twitter\.com|codepen\.io)/i);
 
       if (matches) {
         try {
@@ -69,6 +68,13 @@ module.exports = (
               mime = 'audio/spotify';
               thumbnail = fetchedData.thumbnail_url;
               break;
+
+            case 'codepen.io':
+              fetchedData = await axios.get(`https://codepen.io/api/oembed?format=json&url=${encodeURIComponent(url)}`).then((res) => res.data);
+              title = fetchedData.title;
+              mime = 'application/codepen';
+              thumbnail = fetchedData.thumbnail_url;
+              break;
 
             default:
               break;
@@ -104,4 +110,4 @@ module.exports = (
       return data;
     }
   };
-};
+};