2b:null 2c:["$","title",null,{"children":"Story Visualizer | Bruce Crock | Observable"}] 31:T700,story= [ { "index":"1", "pageText":"blah blah at the beginning" }, { "index":"3", "pageText":" Sophia sat in her garage workshop, surrounded by piles of scraps and spare parts. She was a brilliant inventor and dreamer, but no one seemed to appreciate or understand her. At school, she was always getting into trouble for daydreaming and ignoring her lessons. And at home, her parents were always nagging her to help with chores and take care of her younger siblings. But Sophia didn't care. She was too busy tinkering and coming up with new ideas. She had a special talent for seeing possibilities where others saw only problems. And she knew that one day, she would invent something that would change the world. Today was that day. Sophia had been working on a secret project for months, and she was finally ready to unveil it. She had taken an old computer and wired it to a jumble of circuits, sensors, and motors. And she had programmed it to do something that no one had ever done before: generate ideas on demand. She was so excited that she could hardly contain herself. She had tested the machine over and over, and it had never failed to come up with something new and creative. She was convinced that it was the most amazing invention ever, and she was eager to show it to the world. But she was also a little scared. She had always been a loner, and she wasn't used to sharing her ideas with others. What if they didn't understand or appreciate her work? What if they laughed or made fun of her? Sophia hesitated for a moment, then made up her mind. She grabbed her laptop and plugged it into the machine. She opened a blank document and typed a single word: 'Ideas.' Then she hit the Enter key and waited." }, { "index":"3", "pageText":"blah blah at the end" } ]32:T82a,storyMapData= [ { Type: "Chapter", Title: "Introduction", Description: "Meet the protagonist, a young girl named Emily who is curious about the world and always looking for new ideas." }, { Type: "Chapter", Title: "The Idea", Description: "Emily discovers a way to create a machine that generates ideas. She excitedly begins experimenting with it and soon realizes that some of the ideas are good, but others are bad." }, { Type: "Chapter", Title: "The Experiment", Description: "Emily decides to test her machine by using it to solve a real-world problem. She chooses the issue of plastic pollution and sets the machine to work." }, { Type: "Chapter", Title: "The Breakthrough", Description: "The machine generates an idea for a website that allows people from all over the world to collaborate on solutions for environmental problems. Emily is thrilled and immediately sets to work building the website." }, { Type: "Chapter", Title: "The Learning Experience", Description: "As Emily works on the website, she begins to realize that collaboration is the key to solving the world's problems. She also learns that the act of giving her ideas away is what brings her the most fulfillment." }, { Type: "Chapter", Title: "The Realizations", Description: "Emily has a series of realizations including the one that such collaboration is the one and only way to solve these problems and is the key to her own fulfillment." }, { Type: "Chapter", Title: "The Launch", Description: "Emily launches the website and it becomes an instant success. People from all over the world begin collaborating on solutions and making a real difference in the world." }, { Type: "Chapter", Title: "The Conclusion", Description: "Emily reflects on her journey and the impact that her machine and website have had on the world. She realizes that the true power of her invention was not the ideas it generated, but the people it brought together to make a difference." } ] 33:T5f13,// this code is copypasted from Rexs story map. I am testing some changes to make this a story reader without any editing function. will work //with rex to merge or fork his workbook later. function storyReader(data, windowHeight, colorScheme) { windowHeight = windowHeight || 850; // let cardWidth = 150; let width = 1200 let cardWidth = 1200; let cardHeight = cardWidth * 0.8 // let margin = Math.ceil(cardWidth / 15); let margin = 0; // const editorHeight = 150; const editorHeight = 0; colorScheme = colorScheme || d3.schemePastel1 let color = d3.scaleOrdinal(colorScheme); let selection = []; const container = document.createElement("div"); container.style.display = "flex"; container.style["flex-direction"] = "row"; container.style["flex-wrap"] = "wrap"; container.style.width = width + "px"; container.style.height = windowHeight + "px"; container.style.background = "#eeeeee" const editor = document.createElement("div"); container.appendChild(editor); const UI = document.createElement("div"); container.appendChild(UI); const storyReader = document.createElement("div"); container.appendChild(storyReader); //========================================== SET UP AND STYLE CARDS ====================================== d3.select(storyReader) .attr("id", "storyReader") .style("display", "flex") // STYLE WORKSPACE .style("width", "100%") .style("height", windowHeight - editorHeight - margin + "px") .style("flex-wrap", "nowrap") .style("position", "relative") .style("top", "auto") .style("overflow", "auto") .style("background", "white") // .style("font-size", (13/150 * cardWidth) + "px") .style("font-size", (6/150 * cardWidth) + "px") .call(select()) .selectAll("div") // CREATE CARDS .data(data) .join("div") .each(function(d, i) { // SET INITIAL VALUES d.ID = i; d.Title = d.Title || "Title"; d.Type = d.Type || "Type"; d.Description = d.Description || ""; if (d.Row == undefined || d.Row < 0 || d.Column == undefined || d.Column < 0 || overlap(d)) { const types = Array.from(d3.group(data, entry => entry.Type)) d.Row = types.findIndex(entry => entry[0] == d.Type); // d.Column = types[d.Row][1].findIndex(entry => entry.ID == d.ID); d.Column = 0; } d.Column = 0; }) .attr("id", d => "_" + d.ID) .call(drag()) .each(function(d) {styleCard(this, d)}) function styleCard(card, d) { d3.select(card) .style("position", "absolute") .style("left", d => (d.x_pos = d.Column * (cardWidth + margin) + margin) + "px") .style("top", d => (d.y_pos = d.Row * (cardHeight + margin) + margin) + "px") .style("width", cardWidth + "px") // STYLE CARDS .style("height", cardHeight + "px") .style("display", "flex") .style("flex-direction", "column") .style("justify-content", "space-around") // .style("background", color(d.Type)) // .style("border", "1px solid black") .style("z-index", 1) .each(function(_, i) { if(!this.children[0]) { this.appendChild(document.createElement("h5")) } d3.select(this.children[0]) // STYLE TITLE // .text(d.Title.length <= 35 ? d.Title : (d.Title.slice(0, 35) + "...")) // .text(d.Title) .style("text-align", "center") .style("font-size", "1.1em") .style("margin", "5px") .style("margin-bottom", "2px") // .style("max-height", "30%") .style("max-height", "0%") .style("overflow", "hidden"); if(!this.children[1]) { this.appendChild(document.createElement("p")) } d3.select(this.children[1]) // STYLE DESCRIPTION // .text(d.Description.length <= 80 ? d.Description : (d.Description.slice(0, 80) + "...")) .text(d.Description) // .style("height", "60%") .style("height", "100%") .style("margin", "5px") .style("margin-top", "0px") .style("font-size", "1em") .style("line-height", "130%") .style("overflow", "hidden") }) .on("click", function(d, e){showEditor(this, d, e); endSelection();}) } //============================================ DRAGGING ============================================== function drag() { const offset = {x: 0, y: 0}; function dragStart(event, d) { // PICK UP CARD if(!selection.includes(d)) { endSelection(); d3.select(this).style("background", darkerColor(color(d.Type))).style("z-index", 2); offset.x = d.x_pos - event.x; offset.y = d.y_pos - event.y; } else { offset.x = []; offset.y = []; for(let card of selection) { d3.select(storyMap).select("#_" + card.ID).style("background", darkerColor(color(card.Type))).style("z-index", 2); offset.x[card.ID] = card.x_pos - event.x; offset.y[card.ID] = card.y_pos - event.y; } } const preview = document.createElement("div"); // CREATE PREVIEW RECTANGLE preview.setAttribute("id", "preview"); storyMap.appendChild(preview); d3.select("#preview") .style("height", cardHeight + (2 * margin) + "px") .style("width", 2* margin + "px") .style("position", "absolute") .style("border-radius", "6px") .style("z-index", 0) } function dragging(event, d) { // DRAG CARD if(!selection.includes(d)) { d3.select(this) .style("left", (d.x_pos = event.x + offset.x) + "px") .style("top", (d.y_pos = event.y + offset.y) + "px"); } else { for(let card of selection) { d3.select(storyMap).select("#_" + card.ID) .style("left", (card.x_pos = event.x + offset.x[card.ID]) + "px") .style("top", (card.y_pos = event.y + offset.y[card.ID]) + "px"); } } d = selection[0] || d; d3.select(storyMap).select("#preview") // MOVE PREVIEW RECTANGLE .style("background", "#CCCCCC") .style("top", (Math.floor((d.y_pos + cardHeight/2) / (cardHeight + margin)) * (cardHeight + margin)) + "px") .style("left", (Math.floor((d.x_pos + cardWidth/2) / (cardWidth + margin)) * (cardWidth + margin)) + "px") } function dragEnd(event, d) { // PUT DOWN CARD if(!selection.includes(d)) { d3.select(this).style("background", color(d.Type)).style("z-index", 1); d.Row = Math.floor((d.y_pos + cardHeight/2) / (cardHeight + margin)); if (d.Row < 0) {d.Row = 0;} d.Column = Math.floor((d.x_pos + cardWidth/2) / (cardWidth + margin)); if (d.Column < 0) {d.Column = 0;} bump(this, d); // MOVE OVER ANY CARDS IN THE WAY } else { for(let card of selection) { d3.select(storyMap).select("#_" + card.ID).style("background", color(card.Type)).style("z-index", 1); card.Row = Math.floor((card.y_pos + cardHeight/2) / (cardHeight + margin)); if (card.Row < 0) {card.Row = 0;} card.Column = Math.floor((card.x_pos + cardWidth/2) / (cardWidth + margin)); if (card.Column < 0) {card.Column = 0;} bump(storyMap.querySelector("#_" + card.ID), card); // MOVE OVER ANY CARDS IN THE WAY } } document.getElementById("preview").remove(); } return d3.drag() .on("start", dragStart) .on("drag", dragging) .on("end", dragEnd); } function overlap(d) { return d3.group(data, entry => entry.Row) .get(d.Row).filter(entry => (entry.Column == d.Column) && (entry.ID != d.ID))[0]; } function bump(card, d) { // MOVE OVER ANY CARDS IN THE WAY const cardInWay = overlap(d); if(cardInWay) { cardInWay.Column ++; bump(storyMap.querySelector("#_" + cardInWay.ID), cardInWay); } d3.select(card) .style("left", (d.x_pos = d.Column * (cardWidth + margin) + margin) + "px") .style("top", (d.y_pos = d.Row * (cardHeight + margin) + margin) + "px"); } function darkerColor(color) { let newColor = "#"; for (let i = 1; i < 7; i += 2) { newColor += (parseInt(color.slice(i, i + 2), 16) - 30).toString(16); } return newColor; } // ============================================== EDITTOR ================================================== // HERE IS WHERE I AM EDITING TO REMOVE THE EDITOR let activeData = data[0]; // makeEditor(); function makeEditor() { d3.select(editor) // SET UP AND STYLE EDITOR .style("width", "75%") // .style("height", editorHeight + "px") .style("height", 0) .style("position", "relative") .style("overflow", "hidden") .style("word-break", "break-word") .style("border", "1px solid black") .style("border-radius", "5px") .style("margin", "10px 0px"); let type = document.createElement("select"); d3.select(type) .attr("id", "type") .style("position", "absolute") .style("top", "0px") .style("left", "0px") .style("width", "fit-content") .style("height", "1.2em") .style("font-family", "serif") .style("font-size", "1.2em") .style("font-style", "italic") .style("background", "none") .style("padding", "0px") .style("border", "none") .style("resize", "none") .style("margin", "0.1em 0.2em 0em 0.2em") .style("visibility", "hidden") .on("change", function() { if(this.value == "new") { makeNewType(); } else { edited("Type"); } }) editor.appendChild(type); fillTypeSelector(); const title = document.createElement("textarea"); d3.select(title) .attr("id", "title") .style("position", "relative") .style("top", "1em") .style("width", "90%") .style("height", "1.2em") .style("font-family", "serif") .style("font-size", "1.5em") .style("font-weight", "bold") .style("text-align", "center") .style("background", "none") .style("padding", "0px") .style("border", "none") .style("resize", "none") .style("margin", "0.2em 5% 1em 5%") .style("visibility", "hidden") .on("change", function() {edited("Title")}) editor.appendChild(title); const description = document.createElement("textarea"); d3.select(description) .attr("id", "description") .text("Click a card to edit it") .style("width", "95%") .style("height", "33%") .style("font-family", "serif") .style("font-size", "1em") .style("text-align", "center") .style("background", "none") .style("padding", "0px") .style("border", "none") .style("resize", "none") .style("margin-left", "2.5%") .on("change", function() {edited("Description")}) editor.appendChild(description); const deleteCard = document.createElement("button"); d3.select(deleteCard) .text("Delete Card") .attr("id", "deleteButton") .style("position", "relative") .style("bottom", "0.5em") .style("width", "40%") .style("margin", "0px 30%") .style("cursor", "pointer") .style("font-family", "sans-serif") .style("background", "none") .style("border", "1px solid black") .style("border-radius", "0.5em") .style("visibility", "hidden") editor.appendChild(deleteCard); const closeButton = document.createElement("button"); d3.select(closeButton) .text("X") .style("position", "absolute") .style("right", "0.1em") .style("top", "0.2em") .style("cursor", "pointer") .style("font-family", "sans-serif") .style("font-size", "1.1em") .style("border", "none") .style("border-radius", "2px") .style("visibility", "hidden") .on("click", function() {closeEditor()}); editor.appendChild(closeButton); } function fillTypeSelector() { color = d3.scaleOrdinal(colorScheme); data.forEach(function(d) { storyMap.querySelector("#_" + d.ID).style.background = color(d.Type); }) const type = editor.querySelector("#type"); d3.select(type).selectAll("option").remove(); for(let typeName of Array.from(d3.group(data, entry => entry.Type).keys())) { const option = document.createElement("option"); option.setAttribute("value", typeName); option.textContent = typeName; option.style.background = color(typeName); type.appendChild(option); } const newType = document.createElement("option"); newType.innerHTML = "

New Type

"; newType.value = "new"; type.appendChild(newType); type.value = activeData.Type; makeSwatches(); recolorEditor(); } function makeNewType() { editor.querySelector("#type").style.display = "none"; const newTypeBox = document.createElement("textArea"); editor.appendChild(newTypeBox); d3.select(newTypeBox) .style("position", "absolute") .style("top", "0px") .style("left", "0px") .style("width", "fit-content") .style("height", "1.2em") .style("font-family", "serif") .style("font-size", "1.2em") .style("font-style", "italic") .style("background", "none") .style("padding", "3px") .style("resize", "none") .style("margin", "0.1em 0.2em 0em 0.2em") .on("change", function() { activeData.Type = this.value; data.splice(data.indexOf(activeData), 1); // move to end of array (helps swatches) data.push(activeData); this.remove(); editor.querySelector("#type").style.display = "block"; fillTypeSelector(); edited("Type"); }) newTypeBox.focus(); } function showEditor(card, event, d) { for(let key of ["Type", "Title", "Description"]) { const element = editor.querySelector("#" + key.toLowerCase()); element.value = d[key]; if(key != "Type") { element.textContent = d[key]; } } d3.select(editor).selectAll("*") .style("visibility", "visible") d3.select(editor) .style("background", color(d.Type)) .selectAll("button") .style("background", color(d.Type)) .on("mouseover", function() {this.style.background = darkerColor(color(d.Type))}) .on("mouseout", function() {this.style.background = color(d.Type)}) d3.select(editor).select("#deleteButton") .text("Delete Card") .on("click", function() { // DELETE CARD if(this.textContent == "Delete Card") { this.textContent = "Are You Sure?"; } else if(this.textContent == "Are You Sure?") { closeEditor(); card.remove(); data.splice(d.ID, 1); data.forEach(function(entry, index) { const element = storyMap.querySelector("#_" + entry.ID); entry.ID = index; element.setAttribute("id", "_" + entry.ID); }) this.textContent = "Delete Card"; } }) d3.select(UI).select("button") // newcard button .style("background", color(d.Type)) .on("mouseover", function() {this.style.background = darkerColor(color(d.Type))}) .on("mouseout", function() {this.style.background = color(d.Type)}) activeData = d; } function edited(input) { activeData[input] = editor.querySelector("#" + input.toLowerCase()).value; let card = storyMap.querySelector("#_" + activeData.ID); card.firstChild.textContent = activeData.Title.length <= 35 ? activeData.Title : (activeData.Title.slice(0, 35) + "..."); card.lastChild.textContent = activeData.Description.length <= 80 ? activeData.Description : (activeData.Description.slice(0, 80) + "..."); card.style.background = color(activeData.Type); if(input == "Type") { recolorEditor(); fillTypeSelector(); } } function closeEditor() { d3.select(editor) .style("background", "none") .selectAll("*") .each(function() { if(this.id == "description") { this.value = "Click a card to edit it"; } else { this.style.visibility = "hidden"; } }) } function recolorEditor() { d3.select(editor) .style("background", color(activeData.Type)) .selectAll("button") .style("background", color(activeData.Type)) .on("mouseover", function() {this.style.background = darkerColor(color(activeData.Type))}) .on("mouseout", function() {this.style.background = color(activeData.Type)}) d3.select(UI).select("button") // newcard button .style("background", color(activeData.Type)) .on("mouseover", function() {this.style.background = darkerColor(color(activeData.Type))}) .on("mouseout", function() {this.style.background = color(activeData.Type)}) } //============================================ USER INTERFACE ==================================================== // makeUI(); function makeUI() { d3.select(UI) .style("display", "flex") .style("flex-direction", "column") .style("justify-content", "space-around") .style("width", "13%") .style("height", editorHeight + "px") .style("margin", "auto") const newCardButton = document.createElement("button"); UI.appendChild(newCardButton) d3.select(newCardButton) .text("Add New Card") .style("height", "55%") .style("font-size", "1.5em") .style("font-family", "sans-serif") .style("text-align", "center") .style("line-height", "1em") .style("padding", "auto") .style("margin", "10%") .style("background-color", color(data[0].Type)) .style("border", "1px solid black") .style("border-radius", "5px") .style("cursor", "pointer") .on("mouseover", function() {this.style.background = darkerColor(color(data[0].Type))}) .on("mouseout", function() {this.style.background = color(data[0].Type)}) .on("click", function() {newCard()}) const zoomDiv = document.createElement("div"); UI.appendChild(zoomDiv); d3.select(zoomDiv) .style("width", "100%") .style("height", "30%") .style("text-align", "center") .style("font-family", "sans-serif") const zoomOut = document.createElement("Button"); zoomOut.setAttribute("class", "zoom"); zoomOut.textContent = "-"; zoomOut.addEventListener("click", function() {zoom("out")}); zoomDiv.appendChild(zoomOut); const zoomText = document.createElement("span"); zoomDiv.appendChild(zoomText); zoomText.textContent = "Zoom"; zoomText.style.height = "1em"; zoomText.style["font-size"] = "1.2em"; const zoomIn = document.createElement("Button"); zoomIn.setAttribute("class", "zoom"); zoomIn.textContent = "+"; zoomIn.addEventListener("click", function() {zoom("in")}); zoomDiv.appendChild(zoomIn); d3.select(zoomDiv).selectAll(".zoom") .style("background", "none") .style("border", "none") .style("border-radius", "2px") .style("padding", "0.1em 0.5em") .style("font-size", "1.2em") .on("mouseover", function() {this.style.background = "#cccccc"}) .on("mouseleave", function() {this.style.background = "none"}) } // makeSwatches(); function makeSwatches() { if (container.firstChild != editor) { container.firstChild.remove(); } container.insertBefore(Swatches(d3.scaleOrdinal(Array.from(d3.group(data, entry => entry.Type).keys()), colorScheme)), editor); container.firstChild.appendChild(document.createElement("p")); d3.select(container.firstChild).select("p") // .text("Types") .style("text-align", "center") .style("margin", "10px 0px 5px 0px") .style("font-size", "2em") .style("font-weight", "bold") d3.select(container.firstChild) .style("flex-direction", "column-reverse") .style("justify-content", "start") .style("width", "10%") .style("margin", "0px 0px 0px 10px") .select("div") .style("width", "100%") .style("height", "100%") .style("display", "flex") .style("flex-direction", "column") .style("justify-content", "center") .style("font-size", "1.5em") .selectAll("span") .style("margin", "0px") .style("min-width", "100%") } function newCard() { data.push({Type: activeData.Type, Title: "Title", Description: "Description"}); d3.select(storyMap) .selectAll("div") .data(data) .join(function(enter) { enter.append("div") .attr("id", (d, i) => "_" + i) .each(function(d, i) { showEditor(this,"", d); d.ID = i; d.Row = Math.floor((storyMap.scrollTop + (storyMap.offsetHeight / 2)) / (cardWidth + margin)); d.Column = Math.floor((storyMap.scrollLeft + (storyMap.offsetWidth / 2)) / (cardHeight + margin)); styleCard(this, d); bump(this, d); }) .call(drag()); }) } function zoom(dir) { let amt = (dir == "in") ? 10 : -10; cardWidth = cardWidth + amt; cardHeight = cardWidth * 0.8; margin = Math.ceil(cardWidth / 15) storyMap.style["font-size"] = (13/150 * cardWidth) + "px"; d3.select(storyMap).selectAll("div") .each(function(d) {styleCard(this, d)}) } // =============================================== SELECTIONS ================================================= function select() { const selBox = {}; const offset = {}; function selectStart(event, d) { endSelection(); offset.x = storyMap.scrollLeft + 2; // yucky hardcoded numbers, not sure where they come from offset.y = storyMap.scrollTop - 157; selBox.element = document.createElement("span"); storyMap.appendChild(selBox.element); d3.select(selBox.element) .style("position", "absolute") .style("left", (selBox.x = event.x + offset.x) + "px") .style("top", (selBox.y = event.y + offset.y) + "px") .style("background", "rgba(0, 0, 255, 0.2)") .style("border", "1px solid blue") .style("z-index", "4"); selBox.origin = {x: selBox.x, y: selBox.y}; } function selecting(event, d) { selBox.width = (event.x - selBox.origin.x + offset.x); selBox.height = (event.y - selBox.origin.y + offset.y); if(selBox.width < 0) { selBox.width = -selBox.width; selBox.element.style.left = (selBox.x = (selBox.origin.x - selBox.width)) + "px"; selBox.element.style.width = selBox.width + "px"; } else { selBox.element.style.width = selBox.width + "px"; } if(selBox.height < 0) { selBox.height = -selBox.height; selBox.element.style.top = (selBox.y = (selBox.origin.y - selBox.height)) + "px"; selBox.element.style.height = selBox.height + "px"; } else { selBox.element.style.height = selBox.height + "px"; } selection = data.filter(entry => ((entry.x_pos + cardWidth) > selBox.x) && (entry.x_pos < (selBox.x + selBox.width)) && ((entry.y_pos + cardHeight) > selBox.y) && (entry.y_pos < (selBox.y + selBox.height))); storyMap.querySelectorAll("div").forEach(function(card) { if (selection.some(entry => ("_" + entry.ID) == card.id)) { card.style.border = "2px solid blue"; } else { card.style.border = "1px solid black"; } }); } function selectEnd(event, d) { selBox.element.remove(); selection.sort((a, b) => (a.Row < b.Row) ? -1 : ((a.Row == b.Row && a.Column < b.Column) ? -1 : 1)); closeEditor(); } return d3.drag() .on("start", selectStart) .on("drag", selecting) .on("end", selectEnd); } function endSelection() { for(let card of selection) { storyMap.querySelector("#_" + card.ID).style.border = "1px solid black"; } selection = []; } return container; }34:[{"id":"eded24dccb8c288db21db5c471c6597228f4fd7d562ea8a19b9e438f5a66354fddbc9b91c32c157ec173d1bd1a50dc38dd025c47f4de65dc42e862b9dc73fa4d","href":"https://static.observableusercontent.com/files/eded24dccb8c288db21db5c471c6597228f4fd7d562ea8a19b9e438f5a66354fddbc9b91c32c157ec173d1bd1a50dc38dd025c47f4de65dc42e862b9dc73fa4d","name":"2.html","type":"text/html","lastModified":1675837128871.479,"size":1750},{"id":"73efe8d7c52fd02f64bd2aef5db1c6f238f2075335588b81cb9cc630cdd4e8d150419e3a0c9846f19f44a76815c77c98bde895089967e8e08799d0fea34ad2c5","href":"https://static.observableusercontent.com/files/73efe8d7c52fd02f64bd2aef5db1c6f238f2075335588b81cb9cc630cdd4e8d150419e3a0c9846f19f44a76815c77c98bde895089967e8e08799d0fea34ad2c5","name":"1.html.txt","type":"text/plain","lastModified":1675836526002.697,"size":2160},{"id":"b8f4ab04e53c4c9e0abd6e683afecc07f90a99612f284ca31b967022a75348290b4bd83754d21c5e460433ed53fce19ad9a081c96b14a9e60a59250ed57fe43f","href":"https://static.observableusercontent.com/files/b8f4ab04e53c4c9e0abd6e683afecc07f90a99612f284ca31b967022a75348290b4bd83754d21c5e460433ed53fce19ad9a081c96b14a9e60a59250ed57fe43f","name":"373758135_a_machine_unleashing_the_power_of_collaboration__blog_post_featured_image_in_high_contrast_comic_boo.png","type":"image/png","lastModified":1676153550667.492,"size":371949},{"id":"aba4e761407fe206c0a9aee25e2f45d6ae31cfc77c4c5ac22f7dadee889e33909197593dae0defcff9a92a59703a6c3bf40708574900899e392fc7f9bf59c49d","href":"https://static.observableusercontent.com/files/aba4e761407fe206c0a9aee25e2f45d6ae31cfc77c4c5ac22f7dadee889e33909197593dae0defcff9a92a59703a6c3bf40708574900899e392fc7f9bf59c49d","name":"Picture3.png","type":"image/png","lastModified":1675020060443.505,"size":113654},{"id":"a6669aa2365b34061b128d621ad43d4385f8a54426a3b51c7b911663c20c205f24e05c158b503c06bd7a311ee05554d25448c707c7cd246f3144ef01cf669669","href":"https://static.observableusercontent.com/files/a6669aa2365b34061b128d621ad43d4385f8a54426a3b51c7b911663c20c205f24e05c158b503c06bd7a311ee05554d25448c707c7cd246f3144ef01cf669669","name":"Picture2.png","type":"image/png","lastModified":1675020060483.581,"size":111102},{"id":"9fa50710e5f3a8be8cff785ff0772bc2b3d089877621eefc202da3f59c2cddb14c3df175c961e5cc03dcdd69edb79768a394d3f269e6abca44cac3b093fa7340","href":"https://static.observableusercontent.com/files/9fa50710e5f3a8be8cff785ff0772bc2b3d089877621eefc202da3f59c2cddb14c3df175c961e5cc03dcdd69edb79768a394d3f269e6abca44cac3b093fa7340","name":"Picture1.png","type":"image/png","lastModified":1675020060485.67,"size":104822},{"id":"2592b1b45bd8822c7409082c21bc1e4d4d36aa752d2cdb8e1d3bd4ad73c1b394738330f2c545ef02de805156d47dc55906d2dab9f5950915faaea68e16521733","href":"https://static.observableusercontent.com/files/2592b1b45bd8822c7409082c21bc1e4d4d36aa752d2cdb8e1d3bd4ad73c1b394738330f2c545ef02de805156d47dc55906d2dab9f5950915faaea68e16521733","name":"2.png","type":"image/png","lastModified":1675317762079.84,"size":421558},{"id":"c5d81ad8ffa06dd85db90978172a80bdf16f1a038d3f23453eec4ea97171c41932af85167f72ba07cc349b9eb84da0cc1bd527115bde581cdcbea59960449889","href":"https://static.observableusercontent.com/files/c5d81ad8ffa06dd85db90978172a80bdf16f1a038d3f23453eec4ea97171c41932af85167f72ba07cc349b9eb84da0cc1bd527115bde581cdcbea59960449889","name":"1.jpeg","type":"image/jpeg","lastModified":1675317762690.942,"size":871156},{"id":"c5d81ad8ffa06dd85db90978172a80bdf16f1a038d3f23453eec4ea97171c41932af85167f72ba07cc349b9eb84da0cc1bd527115bde581cdcbea59960449889","href":"https://static.observableusercontent.com/files/c5d81ad8ffa06dd85db90978172a80bdf16f1a038d3f23453eec4ea97171c41932af85167f72ba07cc349b9eb84da0cc1bd527115bde581cdcbea59960449889","name":"1@1.jpeg","type":"image/jpeg","lastModified":1675318892135.132,"size":871156},{"id":"deed80cd2b29e59cb5d326c879f90e9e497e5d26f593e6c0b9a82d01cdcc2eeb03799e210369fd26481903af469fb0fbd32d8e687879b1419f1d601ddcf1812d","href":"https://static.observableusercontent.com/files/deed80cd2b29e59cb5d326c879f90e9e497e5d26f593e6c0b9a82d01cdcc2eeb03799e210369fd26481903af469fb0fbd32d8e687879b1419f1d601ddcf1812d","name":"13@1.png","type":"image/png","lastModified":1675318893600.593,"size":1177233},{"id":"0b5f05db3908163edfe0992a3d4640d107036b9e3fd86d3def43d827122b6c003e7977f677d7ad32e15318314ae9dbb5766c3043d0b0bd7b69ef2383fb2b9555","href":"https://static.observableusercontent.com/files/0b5f05db3908163edfe0992a3d4640d107036b9e3fd86d3def43d827122b6c003e7977f677d7ad32e15318314ae9dbb5766c3043d0b0bd7b69ef2383fb2b9555","name":"3@1.png","type":"image/png","lastModified":1675318894665.171,"size":1275319},{"id":"1303c2b1167edd89265f2e8f04f0436725913d4ad539f87596a8f36e6ce00e75834d9c1ef7f447c0779ef320538358f1b1cf5acac00d0aa49a1a064e59a9a491","href":"https://static.observableusercontent.com/files/1303c2b1167edd89265f2e8f04f0436725913d4ad539f87596a8f36e6ce00e75834d9c1ef7f447c0779ef320538358f1b1cf5acac00d0aa49a1a064e59a9a491","name":"8@1.png","type":"image/png","lastModified":1675318895179.653,"size":1497880},{"id":"8f0f6c27a0ac119c0b708d54f0b2f0f635ece1a7f0a92ee5a8b82f1a39559a348f117520ac516007b60fdbf86d08e12512c053a906c704a7b1a4be4001f7e2fd","href":"https://static.observableusercontent.com/files/8f0f6c27a0ac119c0b708d54f0b2f0f635ece1a7f0a92ee5a8b82f1a39559a348f117520ac516007b60fdbf86d08e12512c053a906c704a7b1a4be4001f7e2fd","name":"4@1.png","type":"image/png","lastModified":1675318895566.737,"size":1565649},{"id":"4a315f877835b490c9b30bcd632f7feadaf9b0b67c20f5f21a84d5e83fdc8e12628530945cabd9434ea19d1f9b46f43abf7010d6caabaebf295a1fa80951f880","href":"https://static.observableusercontent.com/files/4a315f877835b490c9b30bcd632f7feadaf9b0b67c20f5f21a84d5e83fdc8e12628530945cabd9434ea19d1f9b46f43abf7010d6caabaebf295a1fa80951f880","name":"5@1.png","type":"image/png","lastModified":1675318894357.609,"size":1225747},{"id":"0e3196b52cd51afd088cb338954453d097f31762d09a375ed5fa08dbdf70fdba3830cfc9249c72007d5bbeacbc519fdce80f29b3bb1ea81521787c8d4d1a73f9","href":"https://static.observableusercontent.com/files/0e3196b52cd51afd088cb338954453d097f31762d09a375ed5fa08dbdf70fdba3830cfc9249c72007d5bbeacbc519fdce80f29b3bb1ea81521787c8d4d1a73f9","name":"14@1.png","type":"image/png","lastModified":1675318894798.006,"size":1299029},{"id":"57d140fb6ef25b40f6a9e100c2b72e3c7ba5f09bd79b335f493103c4888781916634d1a6f6da737bff0e4b82becd03f249725b7f504a8c9343b0bc15dda68828","href":"https://static.observableusercontent.com/files/57d140fb6ef25b40f6a9e100c2b72e3c7ba5f09bd79b335f493103c4888781916634d1a6f6da737bff0e4b82becd03f249725b7f504a8c9343b0bc15dda68828","name":"10@1.png","type":"image/png","lastModified":1675318894808.102,"size":1293447},{"id":"e0799ec7d76dc85ddba0c78dd986bbdf6860759cc09df0f31d75170c76f9692047ddeb6087b8732478d03ef8b12f4030b4947afeba079c2dcb4ad1a42c54f8f6","href":"https://static.observableusercontent.com/files/e0799ec7d76dc85ddba0c78dd986bbdf6860759cc09df0f31d75170c76f9692047ddeb6087b8732478d03ef8b12f4030b4947afeba079c2dcb4ad1a42c54f8f6","name":"18@1.png","type":"image/png","lastModified":1675318894387.736,"size":1224548},{"id":"c72f28a338f51d46bd30e19d9f360edfbaf658887cb83ae4709fce9c0601c9ced359afb5550669c76a1729efb71ce85c72fd851ae61ad6a09bed980af25093d6","href":"https://static.observableusercontent.com/files/c72f28a338f51d46bd30e19d9f360edfbaf658887cb83ae4709fce9c0601c9ced359afb5550669c76a1729efb71ce85c72fd851ae61ad6a09bed980af25093d6","name":"6@1.png","type":"image/png","lastModified":1675318894471.746,"size":1230373},{"id":"0c057f2fe9ae623a61ac5189c333cd2a5d6db357567b265d7e2e86c527e0eda6c995280ca12ad4de5bf47ab557c4267e808c44819ca40a8493fb7fdc01b0825b","href":"https://static.observableusercontent.com/files/0c057f2fe9ae623a61ac5189c333cd2a5d6db357567b265d7e2e86c527e0eda6c995280ca12ad4de5bf47ab557c4267e808c44819ca40a8493fb7fdc01b0825b","name":"20@1.png","type":"image/png","lastModified":1675318895724.438,"size":1522424},{"id":"ce6c023bbeb0ee92c130320679156f52527dfda00f0dffa31387093b97ae0bc357e70d070662b48403668f3f4b946d6d5dbd7598888b9b57807811cbe85b0cf6","href":"https://static.observableusercontent.com/files/ce6c023bbeb0ee92c130320679156f52527dfda00f0dffa31387093b97ae0bc357e70d070662b48403668f3f4b946d6d5dbd7598888b9b57807811cbe85b0cf6","name":"17@1.png","type":"image/png","lastModified":1675318895992.538,"size":1643857},{"id":"d112dae58112f495de4e298d743db0b8e722b48e165e84dd7f823a2c1fa0d3c3fadd5ec2ba54cd9692f6069aeb59a238d31b412d132d0c5afed9fc160c47ca76","href":"https://static.observableusercontent.com/files/d112dae58112f495de4e298d743db0b8e722b48e165e84dd7f823a2c1fa0d3c3fadd5ec2ba54cd9692f6069aeb59a238d31b412d132d0c5afed9fc160c47ca76","name":"12@1.png","type":"image/png","lastModified":1675318896116.077,"size":1675811},{"id":"84ab091e17538a792fe800bf0da70fb9be374a02b324e993de8398aae78d18362aa3afef029fc045f04b344aad8e76c0959a87feb52878ffa9da732c83bace62","href":"https://static.observableusercontent.com/files/84ab091e17538a792fe800bf0da70fb9be374a02b324e993de8398aae78d18362aa3afef029fc045f04b344aad8e76c0959a87feb52878ffa9da732c83bace62","name":"7@1.png","type":"image/png","lastModified":1675318896381.192,"size":1937371},{"id":"21a59b0dede8cf6375dac99db4c1e514cf1958afa24fd1737a7ed039da28e39c648545419654549301e70c94037fa18b3f04c33e68da12014ff24331d8b73085","href":"https://static.observableusercontent.com/files/21a59b0dede8cf6375dac99db4c1e514cf1958afa24fd1737a7ed039da28e39c648545419654549301e70c94037fa18b3f04c33e68da12014ff24331d8b73085","name":"15@1.png","type":"image/png","lastModified":1675318896396.385,"size":1900935},{"id":"4a107674146fb288179a87314295564c1b91417e780980fc952e4f02fc1d6933a5fbd18bc879d6ebee25698aa027eef3db15f836dda1e15c7ebec055f3ddeadc","href":"https://static.observableusercontent.com/files/4a107674146fb288179a87314295564c1b91417e780980fc952e4f02fc1d6933a5fbd18bc879d6ebee25698aa027eef3db15f836dda1e15c7ebec055f3ddeadc","name":"16@1.png","type":"image/png","lastModified":1675318895776.57,"size":1541422},{"id":"2549bc048d383931d682541d951165827adc37bbed9f941132e567f9359260d429a071ca56a0b66c1cfc84e9dcfd84246d097b7f96c52ea1ad6ef1d2354a7499","href":"https://static.observableusercontent.com/files/2549bc048d383931d682541d951165827adc37bbed9f941132e567f9359260d429a071ca56a0b66c1cfc84e9dcfd84246d097b7f96c52ea1ad6ef1d2354a7499","name":"2@1.png","type":"image/png","lastModified":1675318896067.283,"size":1667729},{"id":"5d6419a645c51621dc052dc1329a4165b8faf5b262fa7506c834eff7e8d4a276ae4e456d2af42f47e755387065e9249b27fbea4fd5f0846fbfd1f018ab5fcf15","href":"https://static.observableusercontent.com/files/5d6419a645c51621dc052dc1329a4165b8faf5b262fa7506c834eff7e8d4a276ae4e456d2af42f47e755387065e9249b27fbea4fd5f0846fbfd1f018ab5fcf15","name":"9@1.png","type":"image/png","lastModified":1675318895929.183,"size":1622368},{"id":"d278fb3ace376a4c0a4ef7c684e664eeb8b725c8a06b0744b2be2fcc6069ef010d49f0cfc11a72512ed11bf07ee72603d17b07202587c65c342d60a63bff37d8","href":"https://static.observableusercontent.com/files/d278fb3ace376a4c0a4ef7c684e664eeb8b725c8a06b0744b2be2fcc6069ef010d49f0cfc11a72512ed11bf07ee72603d17b07202587c65c342d60a63bff37d8","name":"19@1.png","type":"image/png","lastModified":1675318896119.527,"size":1643654},{"id":"3653009c7174fe617ac1d196d4b765bda855d0a0046b8749f9ec84199fc28254f42d348f00d968d997b4614b7f8a45cd144a1b507fc4abbfacce3a8d7e43a421","href":"https://static.observableusercontent.com/files/3653009c7174fe617ac1d196d4b765bda855d0a0046b8749f9ec84199fc28254f42d348f00d968d997b4614b7f8a45cd144a1b507fc4abbfacce3a8d7e43a421","name":"11@1.png","type":"image/png","lastModified":1675318896305.306,"size":1786202}] 2f:{"id":"b5644d2750d76de4","slug":null,"title":"Story Visualizer","thumbnail":"4c30615a51d295f454458fb745096a8fde1feb5f5ab5debdcb7a04605b86a34f","access_level":"public","create_time":"$D2023-01-24T04:00:20.683Z","update_time":"$D2023-02-11T22:13:13.828Z","view_time":null,"first_public_time":"$D2023-01-29T01:33:54.920Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6a5eec9facc12168","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":"starter_2024","bio":""},"version":992,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4269ac640375fa3","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":null,"bio":""}],"members":[{"type":"individual","id":"d4269ac640375fa3","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Story Visualizer","cells":[{"id":0,"value":"# Story Visualizer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"This notebook is a work in progress \n\nThe concept is to load in a story which was created in some other tool and encoded into json or excel\n\nI have applied the V0 Basic HTML example to a draft story here: \nhttps://observablehq.com/d/2e92305f303bfe6c\n\nNext step is to refactor that example to make it easier to load in from external files.\n\nUltimately this visualizer will have a multiple options for reading a story, and visualizing data insights about the story. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":426,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":696,"value":"# V0: Basic HTML \none cell for Image, one cell for HTML, etc.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":700,"value":"# Sample Story Title","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":990,"value":"_a_machine_unleashing_the_power_of_collab = FileAttachment(\"373758135_a_machine_unleashing_the_power_of_collaboration__blog_post_featured_image_in_high_contrast_comic_boo.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"# V1: \na simple text display with some information about a story, which expects a set of images, and pages of text. There is a page selector to browse from page to page","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":691,"value":"# SAMPLE STORY TITLE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"viewof pageNum = createPager([0, story.length-1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"storyImages[pageNum].img","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"

\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":679,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"storyImages = [\n{\n \"index\":\"1\",\n \"img\":FileAttachment(\"Picture1.png\").image()\n},\n{\n \"index\":\"2\",\n \"img\":FileAttachment(\"Picture2.png\").image()\n},\n {\n \"index\":\"3\",\n \"img\":FileAttachment(\"Picture3.png\").image()\n}\n \n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"summaryInfo()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function summaryInfo() {\n return `This story has ${story.length} pages and the current page is ${pageNum}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"// this code was provided by mootari in the user forums. thanks!\nfunction createPager([min, max], {value = min} = {}) {\n const prev = htl.html`\n \n \n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":201,"value":" //startStory()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"function startStory() {\n start;\n// mutable currentPage=2;\n currentPage.value=0;\n return currentPage;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"function nextPage() {\n next;\n// ++mutable iWasHere;\n iWasHere.value = 56;\n ++mutable currentPage;\n/*\n if (currentPage < story.length - 1) {\n ++mutable currentPage;\n updatePage();\n }\n */\n return currentPage;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"function prevPage() {\n if (currentPage > 0) {\n --mutable currentPage;\n updatePage();\n }\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"function updatePage() {\n previous;\n document.getElementById(\"pageText\").innerHTML = story[currentPage].pageText;\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"iWasHere","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"\"I was here = \" + iWasHere","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"// ++mutable iWasHere;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":" mutable iWasHere=0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"\n function beHere() {\n ++mutable iWasHere;\nreturn iWasHere;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":" mutable currentPage = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"function displayPage(pageNumber) {\n var page = story[pageNumber - 1]; // -1 to adjust for zero-based indexing\n document.getElementById(\"pageText\").innerHTML = story[pageNumber].pageText;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"{\n start;\n let currentPage =1;\n displayPage(0);\n return 0;\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"\nFuture steps: \nHow to allow for HTML rendering? \nbrainstorming options:\nEach page can be a single string\nEAch page can be a set of sentences\neach page can be a set of sentences and can include some line breaks\neach page can be html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"