45:["$","title",null,{"children":"HTML Rendering - Gfetch Module | Danilo Fiumi | Observable"}] 4d:T4a4,

Gfetch.js (stands for Google fetch) it's a JavaScript module created to read and transform text and images in Google documents into structured data that is then rendered as HTML into a web page linked to it, maintaining both style and appearance.

I created this module with the desire to have a tool as simple as possible to be able to create an online site quickly and visually with all the advantages of dynamic content management and the immediacy of a app like Google Docs, which we are all used to working with.

In essence the entire process can be summarized in 3 diffrent steps:

1) automatically fetch the HTML from the google document
2) clean it of unwanted elements and characters
3) place it on our actual web page, positioning it through the use of identifying keys. These allow us to uniquely link through keys parts of the document to specific parts of the document that we have set up to be on our final web page.

You can follow along the breakdown of this notebook in the article at https://medium.com/@danilo_fiumi/gfetch-your-next-cms-for-static-websites-59dcaabde377

${icons}

4e:[] 49:{"id":"1088d518d647ff49","slug":"html-rendering-gfetch-module","title":"HTML Rendering - Gfetch Module \n","thumbnail":"91c5f19e522af7f39ccbdff8f1ec804655632dd6c5ed0c59de4c5b187260e525","access_level":"public","create_time":"$D2022-05-27T11:25:11.450Z","update_time":"$D2022-12-03T17:13:55.133Z","view_time":null,"first_public_time":"$D2022-09-03T15:12:04.194Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c2083b0498b4e358","login":"danilofiumi","name":"Danilo Fiumi","avatar_url":"https://avatars-next.observableusercontent.com/e40b61175a24abac7dee2a7c2d85472b8ddbb6d8625837100d41647386f568ef","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":602,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4b2ae24ac320dda4","login":"danilofiumi","name":"Danilo Fiumi","avatar_url":"https://avatars-next.observableusercontent.com/e40b61175a24abac7dee2a7c2d85472b8ddbb6d8625837100d41647386f568ef","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"4b2ae24ac320dda4","login":"danilofiumi","name":"Danilo Fiumi","avatar_url":"https://avatars-next.observableusercontent.com/e40b61175a24abac7dee2a7c2d85472b8ddbb6d8625837100d41647386f568ef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HTML Rendering - Gfetch Module \n","cells":[{"id":0,"value":"

HTML Rendering - Gfetch Module \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"# 2. Starting point","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"

${data.slice(1,500)} [.........]

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"# 3. HTML parsing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"link = \"https://docs.google.com/document/d/1r17w8tD5-ZB2Zf3_BB68wv11gq5OCfSxEozNhwXpaGI/edit?usp=sharing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"link.substr(0, link.indexOf(\"/edit\")) + \"/export?format=html\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"async function getResponse(link) {\n const response = await fetch(\n link.substr(0, link.indexOf(\"/edit\")) + \"/export?format=html\",\n {\n method: \"GET\"\n }\n );\n const data = await response.text(); // Extracting data as a JSON Object from the response\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"data = getResponse(link)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"style = find_all(/\")[0]\n .replace('`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"to_resolve = {\n var render = {\n tag: [],\n html: []\n };\n for (let elm = 0; elm < ids_.length; ++elm) {\n render.html.push(\n the_cleaner_sc(data)\n .substring(\n get_span_pos(the_cleaner_sc(data), elm),\n get_span_pos(the_cleaner_sc(data), elm + 1)\n )\n .replace(ids_[elm], \"\")\n .replace(new RegExp(\"\", \"g\"), \"\")\n .replace(new RegExp(\">>\", \"g\"), \">\")\n );\n render.tag.push(ids_[elm]);\n }\n return render;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"{\n var iter_src = 0;\n for (let index = 0; index < to_resolve.tag.length; ++index) {\n if (ids.includes(to_resolve.tag[index])) {\n var div = document.getElementById(\n to_resolve.tag[index].replace(\"[\", \"\").replace(\"]\", \"\")\n );\n\n try {\n div.innerHTML = to_resolve.html[index];\n } catch (error) {\n console.log(error);\n }\n } else if (ids_src.includes(to_resolve.tag[index])) {\n var img = document.getElementById(\n to_resolve.tag[index].replace(\"[\", \"\").replace(\"]\", \"\")\n );\n\n try {\n img.src = src[iter_src];\n iter_src++;\n } catch (error) {\n console.log(error);\n }\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"# 6. Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"
\n\n\n\n## 6.1 Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"function find_all(regexp, start, end, string = data) {\n var prl = [];\n var array = [...string.matchAll(regexp)];\n for (let cc = 0; cc < array.length; ++cc) {\n prl.push(\n extractword(\n string.slice(array[cc][\"index\"], string.length),\n start,\n end\n )[0]\n );\n }\n return prl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"\n function extractword(str, start, end) {\n var startindex = str.indexOf(start);\n var endindex = str.indexOf(end, startindex);\n const fruits = [];\n if (startindex != -1 && endindex != -1 && endindex > startindex)\n fruits.push(str.substring(startindex, endindex));\n return fruits;\n }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"\n function get_span_pos(data, params) {\n var h5 = find_all(/

\"),\n quotes,\n '\"'\n ),\n h5,\n \"\"\n );\n return tmp1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"## 6.2 Logging","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"consoleHook = {\n if (!console.stdlog) {\n console.stdlog = console.log.bind(console);\n console.logs = [];\n }\n\n console.log = function () {\n console.logs.push(Array.from(arguments));\n console.stdlog.apply(console, arguments);\n mutable logHistoryUpdated = true;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"log = {\n consoleHook;\n logHistoryUpdated;\n return console.logs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"mutable logHistoryUpdated = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"import { icons } from \"@danilofiumi/social-sharing-links\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null