Search code examples
node.jsgoogle-cloud-functionsembed

Google (Firebase) function response as static.js

Sorry beginner here, trying to learn firebase cloud functions and do some "embedding":

I have created this gist: https://gist.github.com/cmer4/840d729dd07b247db84dcc33ae3c219d.js

I can embed it into my medium.com blog:

simple embed case Now I want to write my own cloud function (firebase cloud function) to respond with similar to what github.com does with that gist (840d729dd07b247db84dcc33ae3c219d.js):

    document.write('<link rel="stylesheet" href="https://github.githubassets.com/assets/gist-embed-123720f37c57ce9a8f29de081c38ed61.css">')
    document.write('<div id=\"gist100127887\" class=\"gist\">\n    <div class=\"gist-file\">\n      <div class=\"gist-data\">\n        <div class=\"js-gist-file-update-container js-task-list-container file-box\">\n  <div id=\"file-some-html\" class=\"file\">\n    \n\n  <div itemprop=\"text\" class=\"Box-body p-0 blob-wrapper data type-html \">\n      \n<table class=\"highlight tab-size js-file-line-container\" data-tab-size=\"8\">\n      <tr>\n        <td id=\"file-some-html-L1\" class=\"blob-num js-line-number\" data-line-number=\"1\"><\/td>\n        <td id=\"file-some-html-LC1\" class=\"blob-code blob-code-inner js-file-line\">&lt;<span class=\"pl-ent\">ion-header<\/span> <span class=\"pl-e\">class<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">&quot;<\/span>ion-padding-top<span class=\"pl-pds\">&quot;<\/span><\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L2\" class=\"blob-num js-line-number\" data-line-number=\"2\"><\/td>\n        <td id=\"file-some-html-LC2\" class=\"blob-code blob-code-inner js-file-line\">  &lt;<span class=\"pl-ent\">ion-toolbar<\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L3\" class=\"blob-num js-line-number\" data-line-number=\"3\"><\/td>\n        <td id=\"file-some-html-LC3\" class=\"blob-code blob-code-inner js-file-line\">    &lt;<span class=\"pl-ent\">ion-buttons<\/span> <span class=\"pl-e\">slot<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">&quot;<\/span>start<span class=\"pl-pds\">&quot;<\/span><\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L4\" class=\"blob-num js-line-number\" data-line-number=\"4\"><\/td>\n        <td id=\"file-some-html-LC4\" class=\"blob-code blob-code-inner js-file-line\">      &lt;<span class=\"pl-ent\">ion-back-button<\/span> <span class=\"pl-e\">defaultHref<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">&quot;<\/span>/canvas<span class=\"pl-pds\">&quot;<\/span><\/span>&gt;&lt;/<span class=\"pl-ent\">ion-back-button<\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L5\" class=\"blob-num js-line-number\" data-line-number=\"5\"><\/td>\n        <td id=\"file-some-html-LC5\" class=\"blob-code blob-code-inner js-file-line\">    &lt;/<span class=\"pl-ent\">ion-buttons<\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L6\" class=\"blob-num js-line-number\" data-line-number=\"6\"><\/td>\n        <td id=\"file-some-html-LC6\" class=\"blob-code blob-code-inner js-file-line\">    &lt;<span class=\"pl-ent\">ion-title<\/span>&gt;About&lt;/<span class=\"pl-ent\">ion-title<\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L7\" class=\"blob-num js-line-number\" data-line-number=\"7\"><\/td>\n        <td id=\"file-some-html-LC7\" class=\"blob-code blob-code-inner js-file-line\">  &lt;/<span class=\"pl-ent\">ion-toolbar<\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L8\" class=\"blob-num js-line-number\" data-line-number=\"8\"><\/td>\n        <td id=\"file-some-html-LC8\" class=\"blob-code blob-code-inner js-file-line\">&lt;/<span class=\"pl-ent\">ion-header<\/span>&gt;<\/td>\n      <\/tr>\n<\/table>\n\n\n  <\/div>\n\n  <\/div>\n<\/div>\n\n      <\/div>\n      <div class=\"gist-meta\">\n        <a href=\"https://gist.github.com/cmer4/840d729dd07b247db84dcc33ae3c219d/raw/625f0782ea96af8abe84ee1410e0a8219d0fd1ea/some.html\" style=\"float:right\">view raw<\/a>\n        <a href=\"https://gist.github.com/cmer4/840d729dd07b247db84dcc33ae3c219d#file-some-html\">some.html<\/a>\n        hosted with &#10084; by <a href=\"https://github.com\">GitHub<\/a>\n      <\/div>\n    <\/div>\n<\/div>\n')

For that naively I tried to do:

exports.respondWithJavascript = functions.https.onRequest((req, res) => {
  res.set('Content-Type', 'text/javascript');
  let jsFile = "document.write('<link rel=\"stylesheet\" href=\"https://github.githubassets.com/assets/gist-embed-123720f37c57ce9a8f29de081c38ed61.css\">') document.write('<div id=\"gist100127887\" class=\"gist\">\n    <div class=\"gist-file\">\n      <div class=\"gist-data\">\n        <div class=\"js-gist-file-update-container js-task-list-container file-box\">\n  <div id=\"file-some-html\" class=\"file\">\n    \n\n  <div itemprop=\"text\" class=\"Box-body p-0 blob-wrapper data type-html \">\n      \n<table class=\"highlight tab-size js-file-line-container\" data-tab-size=\"8\">\n      <tr>\n        <td id=\"file-some-html-L1\" class=\"blob-num js-line-number\" data-line-number=\"1\"><\/td>\n        <td id=\"file-some-html-LC1\" class=\"blob-code blob-code-inner js-file-line\">&lt;<span class=\"pl-ent\">ion-header<\/span> <span class=\"pl-e\">class<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">&quot;<\/span>ion-padding-top<span class=\"pl-pds\">&quot;<\/span><\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L2\" class=\"blob-num js-line-number\" data-line-number=\"2\"><\/td>\n        <td id=\"file-some-html-LC2\" class=\"blob-code blob-code-inner js-file-line\">  &lt;<span class=\"pl-ent\">ion-toolbar<\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L3\" class=\"blob-num js-line-number\" data-line-number=\"3\"><\/td>\n        <td id=\"file-some-html-LC3\" class=\"blob-code blob-code-inner js-file-line\">    &lt;<span class=\"pl-ent\">ion-buttons<\/span> <span class=\"pl-e\">slot<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">&quot;<\/span>start<span class=\"pl-pds\">&quot;<\/span><\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L4\" class=\"blob-num js-line-number\" data-line-number=\"4\"><\/td>\n        <td id=\"file-some-html-LC4\" class=\"blob-code blob-code-inner js-file-line\">      &lt;<span class=\"pl-ent\">ion-back-button<\/span> <span class=\"pl-e\">defaultHref<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">&quot;<\/span>/canvas<span class=\"pl-pds\">&quot;<\/span><\/span>&gt;&lt;/<span class=\"pl-ent\">ion-back-button<\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L5\" class=\"blob-num js-line-number\" data-line-number=\"5\"><\/td>\n        <td id=\"file-some-html-LC5\" class=\"blob-code blob-code-inner js-file-line\">    &lt;/<span class=\"pl-ent\">ion-buttons<\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L6\" class=\"blob-num js-line-number\" data-line-number=\"6\"><\/td>\n        <td id=\"file-some-html-LC6\" class=\"blob-code blob-code-inner js-file-line\">    &lt;<span class=\"pl-ent\">ion-title<\/span>&gt;About&lt;/<span class=\"pl-ent\">ion-title<\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L7\" class=\"blob-num js-line-number\" data-line-number=\"7\"><\/td>\n        <td id=\"file-some-html-LC7\" class=\"blob-code blob-code-inner js-file-line\">  &lt;/<span class=\"pl-ent\">ion-toolbar<\/span>&gt;<\/td>\n      <\/tr>\n      <tr>\n        <td id=\"file-some-html-L8\" class=\"blob-num js-line-number\" data-line-number=\"8\"><\/td>\n        <td id=\"file-some-html-LC8\" class=\"blob-code blob-code-inner js-file-line\">&lt;/<span class=\"pl-ent\">ion-header<\/span>&gt;<\/td>\n      <\/tr>\n<\/table>\n\n\n  <\/div>\n\n  <\/div>\n<\/div>\n\n      <\/div>\n      <div class=\"gist-meta\">\n        <a href=\"https://gist.github.com/cmer4/840d729dd07b247db84dcc33ae3c219d/raw/625f0782ea96af8abe84ee1410e0a8219d0fd1ea/some.html\" style=\"float:right\">view raw<\/a>\n        <a href=\"https://gist.github.com/cmer4/840d729dd07b247db84dcc33ae3c219d#file-some-html\">some.html<\/a>\n        hosted with &#10084; by <a href=\"https://github.com\">GitHub<\/a>\n      <\/div>\n    <\/div>\n<\/div>\n')";
  res.send(jsFile)
})

Now I have the endpoint here: https://us-central1-morphistic-base.cloudfunctions.net/respondWithJavascript

But it does not allow me to embed the code? is my issue with the function or this won't work because of medium.com potentially?

Here is what the issue is: enter image description here

Solution

  • The reason why you're able to embed a gist in a blogging platform such as Medium (I assume that's what you're showing here) is become Medium has performed a specific integration with GitHub. It recognizes that the URL is a gist, and creates rich content from that. This sort of embed only works with products that Medium has integrated with. You can't create your own integration simply by pasting any URL into it.