2e:null 2f:["$","title",null,{"children":"Version Control System (VCS) Infrastructure via ObservableHQ and Firebase | Adamo Carolli | Observable"}] 34:T406,viewof commitForm = { async function setCommit(evt) { let pid; if (commits.length > 0) { pid = commits[0].id } else { pid = 'root' } const payload = { pid, uid: user.uid, displayName: user.displayName || 'Anonymous', time: firebase.firebase_.firestore.FieldValue.serverTimestamp(), message: evt.message, payload: evt.payload } console.log(payload); const digest = await digestDocument(JSON.stringify({time: new Date(), payload})) payload.id = digest; await db.collection("apps").doc("saas").collection("commits").doc(digest).set(payload) } return formWithSumbit(html``, setCommit) }35:T77c,links = [ {source: 'King George VI', target: 'Queen Elizabeth', type: 'Spouse'}, {source: 'Queen Elizabeth', target: 'King George VI', type: 'Spouse'}, {source: 'Prince Philip', target: 'Queen Elizabeth II', type: 'Spouse'}, {source: 'Diana', target: 'Prince Charles', type: 'Spouse'}, {source: 'Prince Charles', target: 'Diana', type: 'Spouse'}, {source: 'Prince Charles', target: 'Duchess Camila', type: 'Spouse'}, {source: 'Duchess Camila', target: 'Prince Charles', type: 'Spouse'}, {source: 'Prince William', target: 'Duchess Catherine', type: 'Spouse'}, {source: 'Duchess Catherine', target: 'Prince William', type: 'Spouse'}, {source: 'Prince Harry', target: 'Duchess Meghan', type: 'Spouse'}, {source: 'Duchess Meghan', target: 'Prince Harry', type: 'Spouse'}, {source: 'Queen Elizabeth II', target: 'Queen Elizabeth', type: 'Parent'}, {source: 'Queen Elizabeth II', target: 'King George VI', type: 'Parent'}, {source: 'Prince Charles', target: 'Queen Elizabeth II', type: 'Parent'}, {source: 'Prince Charles', target: 'Prince Philip', type: 'Parent'}, {source: 'Prince William', target: 'Prince Charles', type: 'Parent'}, {source: 'Prince William', target: 'Diana', type: 'Parent'}, {source: 'Prince Harry', target: 'Prince Charles', type: 'Parent'}, {source: 'Prince Harry', target: 'Diana', type: 'Parent'}, {source: 'Queen Elizabeth', target: 'Queen Elizabeth II', type: 'Child'}, {source: 'King George VI', target: 'Queen Elizabeth II', type: 'Child'}, {source: 'Queen Elizabeth II', target: 'Prince Charles', type: 'Child'}, {source: 'Prince Philip', target: 'Prince Charles', type: 'Child'}, {source: 'Prince Charles', target: 'Prince William', type: 'Child'}, {source: 'Diana', target: 'Prince William', type: 'Child'}, {source: 'Prince Charles', target: 'Prince Harry', type: 'Child'}, {source: 'Diana', target: 'Prince Harry', type: 'Child'}, ]36:[] 32:{"id":"aedc1e4af57083c6","slug":"version-control-system-vcs-infrastructure-via-observable","title":"Version Control System (VCS) Infrastructure via ObservableHQ and Firebase","thumbnail":"41ee29c9a12b4fb5a32ff6e48a43412e583adb01f30dc90ba935d1b768ebb920","access_level":"public","create_time":"$D2021-05-07T13:43:47.519Z","update_time":"$D2021-05-11T21:46:28.352Z","view_time":null,"first_public_time":"$D2021-05-11T21:12:28.088Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6ccc22a948683983","login":"adamocarolli","name":"Adamo Carolli","avatar_url":"https://avatars-next.observableusercontent.com/3e368d216ef37dccbc066b52eabcab46abe7c90f6c38c8819381ff5d28863f0d","tier":"starter_2024"},"version":693,"publish_version":693,"role":null,"authored":false,"authors":[{"type":"individual","id":"0dd1f27f21c2bdc6","login":"adamocarolli","name":"Adamo Carolli","avatar_url":"https://avatars-next.observableusercontent.com/3e368d216ef37dccbc066b52eabcab46abe7c90f6c38c8819381ff5d28863f0d","tier":null}],"members":[{"type":"individual","id":"0dd1f27f21c2bdc6","login":"adamocarolli","name":"Adamo Carolli","avatar_url":"https://avatars-next.observableusercontent.com/3e368d216ef37dccbc066b52eabcab46abe7c90f6c38c8819381ff5d28863f0d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Version Control System (VCS) Infrastructure via ObservableHQ and Firebase","cells":[{"id":0,"value":"md`# Version Control System (VCS) Infrastructure via ObservableHQ and Firebase\n\nPopular code version control systems include the likes of git, svn, etc. However VCS systems are used much more widely, ObservableHQ likely uses a custom VCS for viewing history, forking notebooks and ensuring published content remains unchanged until republished.\n\nIn this notebook we explore building a skeleton VCS with the help of Firebase. ***NOTE: This notebook is a skeleton example, it doesn't deal with deletion of history, private/public commits etc. etc.***\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md `### Configure Firebase`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"firebaseConfig = ({\n apiKey: \"AIzaSyA5CkO1OjsN8FfAntsHyeUuwPTZBSxaPgU\",\n authDomain: \"observable-notebooks.firebaseapp.com\",\n projectId: \"observable-notebooks\",\n storageBucket: \"observable-notebooks.appspot.com\",\n messagingSenderId: \"946033751780\",\n appId: \"1:946033751780:web:a9e08308ba052cb2499ef1\",\n measurementId: \"G-JHGPJ1ZL78\",\n uiConfig: { // https://github.com/firebase/firebaseui-web#configuration\n signInOptions: [\"anonymous\"],\n },\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md `### User Login\nHere we've simply provided a means of logging in as a user. The VCS we've built does not yet take authentication into account, however, it can be extended.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof user","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"`Your uid is ${user.uid}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md `### Register Database`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"db = firebase.firestore()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md `### Commits`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md `\nCommits are similar to that found on git, however, there is an important difference: *git stores the changes from the previous commit to the current whereas this system includes the **full state** in every commit.*\n\nThe following contains the commit table schema:\n~~~js\n const commit = {\n id: \"kajshdk23497hkasdjh\",\n pid: \"iweuypwqi234719aksdfyaiu\",\n time: \"Jan 27, 2021\",\n uid: \"dakshakfsh239487sdhfs\",\n displayName: \"Adamo\",\n payload: \"G.v().run()\"\n }\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"commits = listen(\n db.collection(\"apps\").doc(\"saas\").collection(\"commits\").limit(10).orderBy(\"time\", \"desc\")\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md `### Checkout a Commit`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"viewof selectedCommitId = autoSelect({\n options: commits.map(v => v.id),\n value: commits[0]?.id,\n placeholder: \"Search for a commit . . .\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"{\n const selectedCommit = commits.find(commit => commit.id === selectedCommitId)\n const result = eval(selectedCommit?.payload) || []\n yield Table(result, {columns: [\"_id\", \"title\"]})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"md `### Branches`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"md `\nBranches are similar to those used in git.\n\nThe following contains the branch table schema:\n~~~js\n const branch = {\n id: \"main\",\n commitId: \"iweuypwqi234719aksdfyaiu\",\n }\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"branches = listen(\n db.collection(\"apps\").doc(\"saas\").collection(\"branches\").limit(10)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"viewof createBranchForm = {\n async function createBranch(evt) {\n const branchesCollection = db.collection(\"apps\").doc(\"saas\").collection(\"branches\").doc(evt.id) \n await branchesCollection.set({\n id: evt.id,\n commitId: evt.commitId\n })\n }\n return reconcile(this, formWithSumbit(html``, createBranch))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"viewof selectedBranchId = autoSelect({\n options: branches.map(v => v.id),\n value: branches[0]?.id,\n placeholder: \"Select a branch . . .\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"{\n const selectedBranch = branches.find(commit => commit.id === selectedBranchId)\n const selectedCommit = commits.find(commit => commit.id === selectedBranch?.commitId)\n const result = eval(selectedCommit?.payload) || []\n yield Table(result, {columns: [\"_id\", \"title\"]})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"md `### Initialize BGraph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"window.G = bgraph.graph(bgNodes, bgEdges)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"md `## Acknowledgements\n- [@tomlarkworthy](https://observablehq.com/@tomlarkworthy) - Tom's guide on connecting Google's Firebase to ObservableHQ was immensely valuable here \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md `## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"async function digestDocument(doc) {\n const msgUint8 = new TextEncoder().encode(doc); // encode as (utf-8) Uint8Array\n const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8); // hash the message\n const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array\n const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string\n console.log(hashHex)\n return hashHex;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"convertD3NodesDataToBGraphNodesData = (d3Nodes) => {\n return d3Nodes.map(d => {\n // Shallow copy data\n d = {...d};\n d._id = d.id;\n delete d.id;\n return d;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"convertD3LinksDataToBGraphEdgesData = (d3Links) => {\n return d3Links.map(d => {\n // Shallow copy data\n d = {...d};\n d._in = d.source;\n d._out = d.target;\n delete d.source;\n delete d.target;\n return d;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"function formWithSumbit(form, cb) {\n const container = html`

${form}`;\n form.addEventListener(\"submit\", event => {\n event.preventDefault();\n container.value = formValue(form);\n // Call passed in function\n cb(container.value);\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n form.addEventListener(\"input\", event => {\n event.preventDefault();\n // Need this, because otherwise the viewof Generator catches bubbling input events\n event.stopPropagation();\n });\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"nodes = [\n {id: 'King George VI', title: 'King'},\n {id: 'Queen Elizabeth', title: 'Queen'},\n {id: 'Queen Elizabeth II', title: 'Queen'},\n {id: 'Prince Philip', title: 'Prince'},\n {id: 'Prince Charles', title: 'Prince'},\n {id: 'Diana', title: 'Citizen'},\n {id: 'Duchess Camila', title: 'Duchess'},\n {id: 'Prince William', title: 'Prince'},\n {id: 'Duchess Catherine', title: 'Duchess'},\n {id: 'Prince Harry', title: 'Prince'},\n {id: 'Duchess Meghan', title: 'Duchess'},\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"data = ({nodes, links})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"bgNodes = convertD3NodesDataToBGraphNodesData(nodes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"bgEdges = convertD3LinksDataToBGraphEdgesData(links)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md `## Import`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"import {Table} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"import { formValue } from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"import {autoSelect} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"import {html} from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"import {viewof user}\nwith {firebaseConfig as firebaseConfig}\nfrom \"@tomlarkworthy/firebaseui\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"import {firebase, DocView, DocsView, listen}\n with {firebaseConfig as firebaseConfig}\n from \"@tomlarkworthy/firebaseui\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"import {reconcile} from '@tomlarkworthy/reconcile-nanomorph'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"bgraphImport = import('https://cdn.skypack.dev/@uncharted.software/bgraph')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"bgraph = bgraphImport.bgraph","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"