transformer tests.

src/transformers/codesandbox/codesandbox.test.ts

@@ -0,0 +1,33 @@
+import {codesandboxTransformer} from "transformers/codesandbox"
+
+test("detects codesandbox links", () => {
+    expect(
+        codesandboxTransformer.shouldTransform(
+            "https://codesandbox.io/s/exciting-pascal-j5hwu",
+        ),
+    ).toBeTruthy()
+})
+
+test("ignores non-codesandbox links", () => {
+    expect(
+        codesandboxTransformer.shouldTransform("https://example.com"),
+    ).toBeFalsy()
+})
+
+test("transforms codesandbox links", () => {
+    const html = codesandboxTransformer.getHTML(
+        "https://codesandbox.io/s/exciting-pascal-j5hwu",
+    )
+
+    expect(html).toEqual(`
+        <div class="codesandbox">
+            <iframe
+                src="https://codesandbox.io/embed/exciting-pascal-j5hwu"
+                frameBorder="0"
+                allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+                sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+            >
+            </iframe>
+        </div>
+    `)
+})

src/transformers/codesandbox.ts → src/transformers/codesandbox/codesandbox.ts

@@ -6,7 +6,7 @@ const getHTML = (string: string): string => {
     const src = string.replace("/s/", "/embed/")
 
     const html = `
-        <div className="codesandbox">
+        <div class="codesandbox">
             <iframe
                 src="${src}"
                 frameBorder="0"

src/transformers/codesandbox/index.ts

@@ -0,0 +1 @@
+export * from "./codesandbox"

src/transformers/twitch/index.ts

@@ -0,0 +1 @@
+export * from "./twitch"

src/transformers/twitch/twitch.test.ts

@@ -0,0 +1,84 @@
+import {twitchTransformer} from "transformers/twitch"
+
+test("detects twitch links", () => {
+    expect(
+        twitchTransformer.shouldTransform("https://twitch.tv/bradgarropy"),
+    ).toBeTruthy()
+})
+
+test("ignores non-twitch links", () => {
+    expect(twitchTransformer.shouldTransform("https://example.com")).toBeFalsy()
+})
+
+test("transforms twitch channels", () => {
+    const html = twitchTransformer.getHTML("https://twitch.tv/bradgarropy")
+
+    expect(html).toEqual(`
+        <div class="twitch">
+            <iframe
+                src="https://player.twitch.tv?channel=bradgarropy&parent=bradgarropy.com"
+                frameborder="0"
+                scrolling="no"
+                allowfullscreen=""
+            >
+            </iframe>
+        </div>
+    `)
+})
+
+test("transforms twitch videos", () => {
+    const html = twitchTransformer.getHTML(
+        "https://twitch.tv/videos/1272889918",
+    )
+
+    expect(html).toEqual(`
+        <div class="twitch">
+            <iframe
+                src="https://player.twitch.tv?video=1272889918&parent=bradgarropy.com"
+                frameborder="0"
+                scrolling="no"
+                allowfullscreen=""
+            >
+            </iframe>
+        </div>
+    `)
+})
+
+test("transforms twitch clips", () => {
+    const domainHtml = twitchTransformer.getHTML(
+        "https://twitch.tv/bradgarropy/clip/ZealousSpeedyStingrayUnSane",
+    )
+
+    expect(domainHtml).toEqual(`
+        <div class="twitch">
+            <iframe
+                src="https://clips.twitch.tv/embed?clip=ZealousSpeedyStingrayUnSane&parent=bradgarropy.com"
+                frameborder="0"
+                scrolling="no"
+                allowfullscreen=""
+            >
+            </iframe>
+        </div>
+    `)
+
+    const subdomainHtml = twitchTransformer.getHTML(
+        "https://clips.twitch.tv/ZealousSpeedyStingrayUnSane",
+    )
+
+    expect(subdomainHtml).toEqual(`
+        <div class="twitch">
+            <iframe
+                src="https://clips.twitch.tv/embed?clip=ZealousSpeedyStingrayUnSane&parent=bradgarropy.com"
+                frameborder="0"
+                scrolling="no"
+                allowfullscreen=""
+            >
+            </iframe>
+        </div>
+    `)
+
+    const emptyHtml = twitchTransformer.getHTML("https://twitch.tv")
+
+    // eslint-disable-next-line quotes
+    expect(emptyHtml).toEqual('<div class="twitch"></div>')
+})

src/transformers/twitch/twitch.ts

@@ -0,0 +1,75 @@
+const shouldTransform = (url: string): boolean => {
+    return url.includes("twitch.tv")
+}
+
+const getHTML = (string: string): string => {
+    const {pathname} = new URL(string)
+    const paths = pathname.split("/").filter(e => e)
+    const length = paths.length
+    const id = paths[length - 1]
+
+    let src
+
+    if (isChannel(string)) {
+        src = `https://player.twitch.tv?channel=${id}`
+    } else if (isVideo(string)) {
+        src = `https://player.twitch.tv?video=${id}`
+    } else if (isClip(string)) {
+        src = `https://clips.twitch.tv/embed?clip=${id}`
+    } else {
+        // eslint-disable-next-line quotes
+        const html = '<div class="twitch"></div>'
+        return html
+    }
+
+    const html = `
+        <div class="twitch">
+            <iframe
+                src="${src}&parent=bradgarropy.com"
+                frameborder="0"
+                scrolling="no"
+                allowfullscreen=""
+            >
+            </iframe>
+        </div>
+    `
+
+    return html
+}
+
+// example: https://twitch.tv/bradgarropy
+const isChannel = (url: string): boolean => {
+    const regex = new RegExp(/^https?:\/\/(www.)?twitch.tv\/\w*$/)
+    const isChannel = regex.test(url)
+    return isChannel
+}
+
+// example: https://twitch.tv/videos/1272889918
+const isVideo = (url: string): boolean => {
+    const regex = new RegExp(/^https?:\/\/(www.)?twitch.tv\/videos\/\w*$/)
+    const isVideo = regex.test(url)
+    return isVideo
+}
+
+// example: https://clips.twitch.tv/ZealousSpeedyStingrayUnSane
+// example: https://twitch.tv/bradgarropy/clip/ZealousSpeedyStingrayUnSane
+const isClip = (url: string): boolean => {
+    const domainRegex = new RegExp(
+        /^https?:\/\/(www.)?twitch.tv\/\w*\/clip\/\w*$/,
+    )
+
+    const subdomainRegex = new RegExp(
+        /^https?:\/\/(www.)?clips.twitch.tv\/\w*$/,
+    )
+
+    const isClip = domainRegex.test(url) || subdomainRegex.test(url)
+    return isClip
+}
+
+const twitchTransformer = {
+    name: "twitchTransformer",
+    shouldTransform,
+    getHTML,
+}
+
+export {twitchTransformer}

src/transformers/twitter/index.ts

@@ -0,0 +1 @@
+export * from "./twitter"

src/transformers/twitter/twitter.test.ts

@@ -0,0 +1,38 @@
+import {twitterTransformer} from "transformers/twitter"
+
+test("detects twitter links", () => {
+    expect(
+        twitterTransformer.shouldTransform(
+            "https://twitter.com/bradgarropy/status/1458449938157801490",
+        ),
+    ).toBeTruthy()
+})
+
+test("ignores non-twitter links", () => {
+    expect(
+        twitterTransformer.shouldTransform("https://example.com"),
+    ).toBeFalsy()
+})
+
+test("transforms twitter links", async () => {
+    const html = await twitterTransformer.getHTML(
+        "https://twitter.com/bradgarropy/status/1458449938157801490",
+    )
+
+    console.log(html)
+
+    // eslint-disable-next-line quotes
+    expect(html).toEqual(expect.stringContaining('<div class="twitter">'))
+
+    expect(html).toEqual(
+        // eslint-disable-next-line quotes
+        expect.stringContaining('<blockquote class="twitter-tweet">'),
+    )
+
+    expect(html).toEqual(
+        expect.stringContaining(
+            // eslint-disable-next-line quotes
+            '<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">',
+        ),
+    )
+})

src/transformers/youtube/index.ts

@@ -0,0 +1 @@
+export * from "./youtube"

src/transformers/youtube/youtube.test.ts

@@ -0,0 +1,47 @@
+import {youtubeTransformer} from "transformers/youtube"
+
+test("detects youtube links", () => {
+    expect(
+        youtubeTransformer.shouldTransform("https://youtu.be/9zcU6oUOHVc"),
+    ).toBeTruthy()
+})
+
+test("ignores non-youtube links", () => {
+    expect(
+        youtubeTransformer.shouldTransform("https://example.com"),
+    ).toBeFalsy()
+})
+
+test("transforms youtube links", () => {
+    const html = youtubeTransformer.getHTML("https://youtu.be/9zcU6oUOHVc")
+
+    expect(html).toEqual(`
+        <div class="youtube">
+            <iframe
+                title="9zcU6oUOHVc"
+                src="https://www.youtube-nocookie.com/embed/9zcU6oUOHVc"
+                frameBorder="0"
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+            >
+            </iframe>
+        </div>
+    `)
+})
+
+test("transforms youtube links with start", () => {
+    const html = youtubeTransformer.getHTML("https://youtu.be/9zcU6oUOHVc?t=3")
+
+    expect(html).toEqual(`
+        <div class="youtube">
+            <iframe
+                title="9zcU6oUOHVc"
+                src="https://www.youtube-nocookie.com/embed/9zcU6oUOHVc?start=3"
+                frameBorder="0"
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+            >
+            </iframe>
+        </div>
+    `)
+})