48 |
`,
48 | };
49 |
50 | const wrappedHTML = wrapHTML(response, {});
51 |
52 | return {
53 | version: 0.1,
54 | type: "rich",
55 | title: "Twitch",
56 | html: wrappedHTML,
57 | };
58 | } catch (error) {
59 | return null;
60 | }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # Snowpack dependency directory (https://snowpack.dev/)
45 | web_modules/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env*
73 | !.env.example
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 | .parcel-cache
78 |
79 | # Next.js build output
80 | .next
81 | out
82 |
83 | # Nuxt.js build / generate output
84 | .nuxt
85 | dist
86 |
87 | # Gatsby files
88 | .cache/
89 | # Comment in the public line in if your project uses Gatsby and not Next.js
90 | # https://nextjs.org/blog/next-9-1#public-directory-support
91 | # public
92 |
93 | # vuepress build output
94 | .vuepress/dist
95 |
96 | # Serverless directories
97 | .serverless/
98 |
99 | # FuseBox cache
100 | .fusebox/
101 |
102 | # DynamoDB Local files
103 | .dynamodb/
104 |
105 | # TernJS port file
106 | .tern-port
107 |
108 | # Stores VSCode versions used for testing VSCode extensions
109 | .vscode-test
110 |
111 | # yarn v2
112 | .yarn/cache
113 | .yarn/unplugged
114 | .yarn/build-state.yml
115 | .yarn/install-state.gz
116 | .pnp.*
117 |
118 | .DS_Store
119 |
--------------------------------------------------------------------------------
/packages/webembeds-website/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": [
3 | "./**/*"
4 | ],
5 | "compilerOptions": {
6 | "jsx": "preserve",
7 | /* Visit https://aka.ms/tsconfig.json to read more about this file */
8 | /* Basic Options */
9 | // "incremental": true, /* Enable incremental compilation */
10 | "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
11 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */// "lib": [], /* Specify library files to be included in the compilation. */
12 | "allowJs": true, /* Allow javascript files to be compiled. */// "checkJs": true, /* Report errors in .js files. */
13 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
14 | // "declaration": true, /* Generates corresponding '.d.ts' file. */
15 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
16 | "sourceMap": true, /* Generates corresponding '.map' file. */// "outFile": "./", /* Concatenate and emit output to single file. */
17 | "outDir": "./build", /* Redirect output structure to the directory. */// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
18 | // "composite": true, /* Enable project compilation */
19 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
20 | // "removeComments": true, /* Do not emit comments to output. */
21 | // "noEmit": true, /* Do not emit outputs. */
22 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
23 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
24 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
25 | /* Strict Type-Checking Options */
26 | "strict": true, /* Enable all strict type-checking options. */// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
27 | // "strictNullChecks": true, /* Enable strict null checks. */
28 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */
29 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
30 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
31 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
32 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
33 | /* Additional Checks */
34 | // "noUnusedLocals": true, /* Report errors on unused locals. */
35 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
36 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
37 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
38 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
39 | /* Module Resolution Options */
40 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
41 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
42 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
43 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
44 | // "typeRoots": [], /* List of folders to include type definitions from. */
45 | // "types": [], /* Type declaration files to be included in compilation. */
46 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
47 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
48 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
49 | /* Source Map Options */
50 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
51 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
52 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
53 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
54 | /* Experimental Options */
55 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
56 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
57 | /* Advanced Options */
58 | "skipLibCheck": true, /* Skip type checking of declaration files. */
59 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
60 | "lib": [
61 | "dom",
62 | "dom.iterable",
63 | "esnext"
64 | ],
65 | "noEmit": true,
66 | "moduleResolution": "node",
67 | "resolveJsonModule": true,
68 | "isolatedModules": true
69 | },
70 | "exclude": [
71 | "node_modules"
72 | ]
73 | }
74 |
--------------------------------------------------------------------------------
/packages/webembeds-core/src/modules/WebembedHandler.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable camelcase */
2 | import oembed from "oembed";
3 | import tryEach from "async/tryEach";
4 | import Platform from "./Platform";
5 | import oEmbedProviders from "../utils/providers/oembed.providers";
6 | import { getMetaData } from "../utils/requestHandler";
7 | import { wrapFallbackHTML, wrapHTML } from "../utils/html.utils";
8 |
9 | import type {
10 | OEmbedResponseType,
11 | ProviderDetails,
12 | } from "../types";
13 |
14 | export default class WebembedHandler {
15 | // The main embed URL
16 | embedURL: string;
17 |
18 | finalResponse: {} = {};
19 |
20 | queryParams: {
21 | forceFallback: boolean,
22 | } = {
23 | forceFallback: false,
24 | };
25 |
26 | platform: any = {};
27 |
28 | matchedPlatform: {} | null = null;
29 |
30 | providerDetails: ProviderDetails;
31 |
32 | options: any;
33 |
34 | constructor(incomingURL: string, options: any) {
35 | const { queryParams = {} } = options;
36 | // Replace x.com with twitter.com before doing anything as Provider is setup for twitter.com
37 | const twitterXRegex = new RegExp(/https?:\/\/([a-zA-Z0-9-]+\.)*x\.com/);
38 | this.embedURL = incomingURL.match(twitterXRegex) ? incomingURL.replace(twitterXRegex, "https://twitter.com") : incomingURL;
39 | this.options = options;
40 | this.queryParams = queryParams;
41 | this.providerDetails = this.detectProvider();
42 | }
43 |
44 | /**
45 | * @desc Goes through providers list and tries to find respective provider for incoming embedURL
46 | * @returns {object} providerDetails.provider the respective provider object from list
47 | * @returns {targetURL} providerDetails.targetURL the final url where the request
48 | * must be made with embedURL, if no targetURL found, it will be the embedURL itself.
49 | */
50 | detectProvider = () => {
51 | let destinationProvider: { endpoints: any, provider_name: string } | null = null;
52 | let targetURL = null; // The endpoint that the embedURL should be queried upon
53 |
54 | let found = false;
55 | oEmbedProviders.some((provider: { endpoints: any[], provider_name: string }) => {
56 | provider.endpoints.some((endpoint) => {
57 | if (!endpoint.schemes || endpoint.schemes.length === 0) {
58 | // If there are no schemes Ex. https://www.beautiful.ai/
59 | // Consider the url to be the targetURL
60 |
61 | if (this.embedURL.match(endpoint.url.replace(/\*/g, ".*").replace(/\//g, "\/").replace(/\//g, "\\/"))) {
62 | targetURL = endpoint.url;
63 | destinationProvider = provider;
64 | return true;
65 | }
66 | return false;
67 | }
68 |
69 | found = endpoint.schemes.some((scheme: string) => {
70 | // eslint-disable-next-line no-useless-escape
71 | if (this.embedURL.match(scheme.replace(/\*/g, ".*").replace(/\//g, "\/").replace(/\//g, "\\/"))) {
72 | targetURL = endpoint.url;
73 | destinationProvider = provider;
74 | return true;
75 | }
76 | return false;
77 | });
78 | return found;
79 | });
80 | return found;
81 | });
82 | return {
83 | provider: destinationProvider,
84 | targetURL: targetURL || this.embedURL,
85 | };
86 | }
87 |
88 | generateOEmbed = (callback: any) => {
89 | const { embedURL, queryParams } = this;
90 | const { provider } = this.providerDetails;
91 |
92 | if (!provider || (provider && provider.custom)) {
93 | callback(true);
94 | return;
95 | }
96 |
97 | const { noCustomWrap = false } = provider;
98 |
99 | oembed.fetch(embedURL, { format: "json", ...queryParams }, (error: any, result: OEmbedResponseType): any => {
100 | if (error) {
101 | callback(true);
102 | return;
103 | }
104 | const final = result;
105 |
106 | if (final && final.html && !noCustomWrap) {
107 | final.html = wrapHTML(final);
108 | }
109 |
110 | callback(null, final);
111 | });
112 | }
113 |
114 | // eslint-disable-next-line no-async-promise-executor
115 | generateManually = async () => {
116 | const { provider, targetURL } = this.providerDetails;
117 | const { embedURL, queryParams } = this;
118 |
119 | if (!provider || !targetURL) {
120 | throw new Error();
121 | }
122 |
123 | // This should fetch an oembed response
124 | if (provider && provider.custom && provider.customClass) {
125 | const CustomClass = provider.customClass;
126 | this.platform = new CustomClass({
127 | provider, targetURL, embedURL, queryParams, options: this.options,
128 | });
129 | } else {
130 | this.platform = new Platform({
131 | provider, targetURL, embedURL, queryParams, options: this.options,
132 | });
133 | }
134 |
135 | const finalResponse = await this.platform.run();
136 | return finalResponse;
137 | }
138 |
139 | // Generate a common fallback here by scraping for the common metadata from the platform
140 | // Use this.platform to generate fallback as it already has a response object
141 | generateFallback = async () => {
142 | try {
143 | const data = await getMetaData(this.embedURL);
144 | const html = await wrapFallbackHTML(data);
145 | return { ...data, html };
146 | } catch (error) {
147 | return null;
148 | }
149 | };
150 |
151 | /**
152 | * First try with oembed()
153 | If error is thrown
154 | - Try with our providers list
155 | 1. detect platform
156 | 2. make a request
157 | 3. generate response if successful request is made
158 | If request breaks or some error is returned
159 | - Try with fallback response
160 | - Try generating fallback cover with the response details
161 | If this fails too, return a fatal error
162 | */
163 | // eslint-disable-next-line max-len
164 | generateOutput = async (): Promise
=> new Promise((resolve, reject) => {
165 | if (this.queryParams.forceFallback) {
166 | tryEach([this.generateFallback],
167 | (error: any, results: any): void => {
168 | if (error) {
169 | return reject(error);
170 | }
171 | return resolve(results);
172 | });
173 | }
174 |
175 | const { provider } = this.providerDetails;
176 |
177 | let actions: any = [];
178 |
179 | if (provider && provider.provider_name === "Twitter") {
180 | actions = [this.generateManually, this.generateFallback];
181 | } else {
182 | actions = [this.generateOEmbed, this.generateManually, this.generateFallback];
183 | }
184 |
185 | tryEach(actions,
186 | (error: any, results: any): void => {
187 | if (error) {
188 | reject(error);
189 | }
190 | resolve(results);
191 | });
192 | })
193 |
194 | generateResponse = async (): Promise<{ output?: OEmbedResponseType | null, error?: boolean }> => {
195 | const output = await this.generateOutput();
196 |
197 | if (output) {
198 | return {
199 | output,
200 | error: false,
201 | };
202 | }
203 |
204 | return { output: null, error: true };
205 | }
206 | }
207 |
--------------------------------------------------------------------------------
/packages/webembeds-website/pages/index.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | import React, { useState, useEffect, useRef } from "react";
3 | import Loader from "../components/Loader";
4 |
5 | const links: any = {
6 | spotify: "https://open.spotify.com/track/3G8o2zm7LaF6eeVuvLlrkJ?si=Sx1sCnhDT6GXqSLIwSLOeQ",
7 | gist: "https://gist.github.com/theevilhead/908d9f761a82809a33fcede797d06334",
8 | // canva1: "https://www.canva.com/design/DAEWSa9kfIs/view",
9 | // canva2: "https://www.canva.com/design/DAEWRhUKdvg/view",
10 | twitter: "https://twitter.com/hashnode/status/1352525138659430400",
11 | expo: "https://snack.expo.io/@girishhashnode/unnamed-snack",
12 | runkit: "https://runkit.com/runkit/welcome",
13 | canva: "https://www.canva.com/design/DAET1m0_11c/jFBlYrKc8CQCb2boU9KC-A/view",
14 | codepen: "https://codepen.io/bsehovac/pen/EMyWVv",
15 | youtube: "https://www.youtube.com/watch?v=32I0Qso4sDg",
16 | glitch: "https://glitch.com/edit/#!/remote-hands",
17 | twitch: "https://www.twitch.tv/fresh",
18 | giphy: "https://giphy.com/gifs/cbsnews-inauguration-2021-XEMbxm9vl9JIIMcE7M",
19 | metascraper: "https://metascraper.js.org/",
20 | repl: "https://repl.it/@GirishPatil4/AdvancedRespectfulGigahertz",
21 | soundcloud: "https://soundcloud.com/hit-jatt/jatt-disde-arjan-dhillon",
22 | anchor: "https://anchor.fm/startapodcast/episodes/Whats-your-podcast-about-e17krq/a-a2q3ft",
23 | loom: "https://www.loom.com/share/0281766fa2d04bb788eaf19e65135184",
24 | vimeo: "https://vimeo.com/485593347",
25 | snappify: "https://snappify.com/view/bcc54061-6e8f-44c5-a4f4-1abcad520108",
26 | fallback: "https://github.com",
27 | };
28 |
29 | function Demo() {
30 | const urlRef = useRef(null);
31 | const [result, setResult] = useState<{ output?: { html?: string }; error: boolean } | null>();
32 | const [isLoading, setLoading] = useState(false);
33 | let parentNode: HTMLElement | null = null;
34 |
35 | useEffect(() => {
36 | parentNode = document.getElementById("embed-platform");
37 |
38 | if (!window) {
39 | return;
40 | }
41 |
42 | (window as any).adjustIframeSize = function(id: string, newHeight: string) {
43 | const ele = document.getElementById(id);
44 | if (!ele) return;
45 | ele.style.height = parseInt(newHeight) + "px";
46 | }
47 |
48 | // Can be ported to others too
49 | window.addEventListener("message", function(e) {
50 | if (e.origin !== "https://runkit.com") return;
51 |
52 | try {
53 | var data = JSON.parse(e.data);
54 | } catch (e) {
55 | return false;
56 | }
57 |
58 | if (data.context !== "iframe.resize") {
59 | return false;
60 | }
61 |
62 | const iframe: HTMLIFrameElement | null = document.querySelector("iframe[src=\"" + data.src + "\"]");
63 |
64 | if (!iframe) {
65 | return false;
66 | }
67 |
68 | iframe.setAttribute("width", "100%");
69 |
70 | if (data.height) {
71 | iframe.setAttribute("height", data.height);
72 | }
73 | });
74 |
75 | handleURL(links.vimeo);
76 | }, []);
77 |
78 | const handleURL = async (incomingURL?: string) => {
79 | if (null === urlRef) {
80 | return;
81 | }
82 |
83 | if (null === urlRef.current) {
84 | return;
85 | }
86 |
87 | parentNode = document.getElementById("embed-platform");
88 | if (!parentNode) {
89 | return;
90 | }
91 |
92 | const url = incomingURL || (urlRef !== null ? urlRef.current.value : null);
93 |
94 | if (!url) {
95 | return;
96 | }
97 |
98 | setLoading(true);
99 | setResult(null);
100 | parentNode.innerHTML = "";
101 |
102 | const requestURL = `/api/embed?url=${encodeURIComponent(url)}&customHost=${encodeURIComponent(window.location.hostname)}`;
103 | const response = await fetch(requestURL, {
104 | method: "GET",
105 | headers: {
106 | Accept: "application/json",
107 | "Content-Type": "application/json",
108 | },
109 | });
110 | const json = await response.json();
111 |
112 | setLoading(false);
113 |
114 | if(parentNode && !url.includes("gist.github.com")) {
115 | parentNode.innerHTML = json.data.output.html;
116 | Array.from(parentNode.querySelectorAll("script")).forEach( async oldScript => {
117 | const newScript = document.createElement("script");
118 | Array.from(oldScript.attributes).forEach( attr => newScript.setAttribute(attr.name, attr.value) );
119 |
120 | if (oldScript.innerHTML) {
121 | newScript.appendChild(document.createTextNode(oldScript.innerHTML));
122 | }
123 |
124 | if (oldScript && oldScript.parentNode) {
125 | oldScript.parentNode.replaceChild(newScript, oldScript);
126 | }
127 | });
128 | } else {
129 |
130 | const gistFrame = document.createElement("iframe");
131 | gistFrame.setAttribute("width", "100%");
132 | gistFrame.setAttribute("frameBorder", "0");
133 | gistFrame.setAttribute("scrolling", "no");
134 | gistFrame.id = `gist-${new Date().getTime()}`;
135 |
136 | parentNode.innerHTML = "";
137 | parentNode.appendChild(gistFrame);
138 |
139 | // Create the iframe's document
140 | const gistFrameHTML = `${json.data.output.html}`;
141 |
142 | // Set iframe's document with a trigger for this document to adjust the height
143 | let gistFrameDoc = gistFrame.contentWindow?.document;
144 |
145 | if (gistFrame.contentDocument) {
146 | gistFrameDoc = gistFrame.contentDocument;
147 | } else if (gistFrame.contentWindow) {
148 | gistFrameDoc = gistFrame.contentWindow.document;
149 | }
150 |
151 | if (!gistFrameDoc) {
152 | return;
153 | }
154 | gistFrameDoc.open();
155 | gistFrameDoc.writeln(gistFrameHTML);
156 | gistFrameDoc.close();
157 | }
158 |
159 | // setResult(json ? json.data : null);
160 | setLoading(false);
161 | };
162 |
163 | return (
164 |
165 |
173 |
174 |
175 | {/*
176 | {result ?
{JSON.stringify(result)}
: "No result"}
177 |
*/}
178 | {isLoading ?
: null}
179 | {/* {result && !result.error && !isLoading ? ( */}
180 |
185 | {/* ) : null} */}
186 | {result && result.error ? "Something went wrong" : ""}
187 |
188 |
189 |
190 |
191 |
192 |
193 |
199 |
208 |
209 |
210 |
Or select from below
211 |
212 |
213 | {Object.keys(links).map((key, index) => {
214 | return (
215 |
222 | );
223 | })}
224 |
225 |
226 |
232 |