2023-10-12 09:05:03 -04:00
<!DOCTYPE html>
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en" > < head >
< meta charset = "utf-8" >
< meta name = "generator" content = "quarto-1.3.450" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=yes" >
< meta name = "author" content = "Kyle Belanger" >
< meta name = "dcterms.date" content = "2021-01-12" >
< title > Kyle Belanger - Converting From Blogdown to Distill< / title >
< style >
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */
vertical-align: middle;
}
/* CSS for syntax highlighting */
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
}
pre.numberSource { margin-left: 3em; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
< / style >
< script src = "../../site_libs/quarto-nav/quarto-nav.js" > < / script >
< script src = "../../site_libs/quarto-nav/headroom.min.js" > < / script >
< script src = "../../site_libs/clipboard/clipboard.min.js" > < / script >
< script src = "../../site_libs/quarto-search/autocomplete.umd.js" > < / script >
< script src = "../../site_libs/quarto-search/fuse.min.js" > < / script >
< script src = "../../site_libs/quarto-search/quarto-search.js" > < / script >
< meta name = "quarto:offset" content = "../../" >
< script src = "../../site_libs/quarto-html/quarto.js" > < / script >
< script src = "../../site_libs/quarto-html/popper.min.js" > < / script >
< script src = "../../site_libs/quarto-html/tippy.umd.min.js" > < / script >
< script src = "../../site_libs/quarto-html/anchor.min.js" > < / script >
< link href = "../../site_libs/quarto-html/tippy.css" rel = "stylesheet" >
< link href = "../../site_libs/quarto-html/quarto-syntax-highlighting.css" rel = "stylesheet" id = "quarto-text-highlighting-styles" >
< script src = "../../site_libs/bootstrap/bootstrap.min.js" > < / script >
< link href = "../../site_libs/bootstrap/bootstrap-icons.css" rel = "stylesheet" >
< link href = "../../site_libs/bootstrap/bootstrap.min.css" rel = "stylesheet" id = "quarto-bootstrap" data-mode = "light" >
< script id = "quarto-search-options" type = "application/json" > {
"location": "navbar",
"copy-button": false,
"collapse-after": 3,
"panel-placement": "end",
"type": "overlay",
"limit": 20,
"language": {
"search-no-results-text": "No results",
"search-matching-documents-text": "matching documents",
"search-copy-link-title": "Copy link to search",
"search-hide-matches-text": "Hide additional matches",
"search-more-match-text": "more match in this document",
"search-more-matches-text": "more matches in this document",
"search-clear-button-title": "Clear",
"search-detached-cancel-button-title": "Cancel",
"search-submit-button-title": "Submit",
"search-label": "Search"
}
}< / script >
< link rel = "stylesheet" href = "../../styles.css" >
< / head >
< body class = "floating nav-fixed" >
< div id = "quarto-search-results" > < / div >
< header id = "quarto-header" class = "headroom fixed-top" >
< nav class = "navbar navbar-expand-lg navbar-dark " >
< div class = "navbar-container container-fluid" >
< div class = "navbar-brand-container" >
< a class = "navbar-brand" href = "../../index.html" >
< span class = "navbar-title" > Kyle Belanger< / span >
< / a >
< / div >
< div id = "quarto-search" class = "" title = "Search" > < / div >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarCollapse" aria-controls = "navbarCollapse" aria-expanded = "false" aria-label = "Toggle navigation" onclick = "if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarCollapse" >
< ul class = "navbar-nav navbar-nav-scroll ms-auto" >
< li class = "nav-item" >
< a class = "nav-link" href = "../../blog.html" rel = "" target = "" >
< span class = "menu-text" > Posts< / span > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "../../kyle_resume.pdf" rel = "" target = "" >
< span class = "menu-text" > Resume< / span > < / a >
< / li >
< li class = "nav-item compact" >
< a class = "nav-link" href = "https://github.com/mmmmtoasty19" rel = "" target = "" > < i class = "bi bi-github" role = "img" >
< / i >
< span class = "menu-text" > < / span > < / a >
< / li >
< / ul >
< div class = "quarto-navbar-tools" >
< / div >
< / div > <!-- /navcollapse -->
< / div > <!-- /container - fluid -->
< / nav >
< / header >
<!-- content -->
< header id = "title-block-header" class = "quarto-title-block default toc-left page-columns page-full" >
< div class = "quarto-title-banner page-columns page-full" >
< div class = "quarto-title column-body" >
< h1 class = "title" > Converting From Blogdown to Distill< / h1 >
< p class = "subtitle lead" > < / p > < p > A meta post on transferring from a blogdown to distill blog site< / p > < p > < / p >
< div class = "quarto-categories" >
< div class = "quarto-category" > Distill< / div >
< / div >
< / div >
< / div >
< div class = "quarto-title-meta" >
< div >
< div class = "quarto-title-meta-heading" > Author< / div >
< div class = "quarto-title-meta-contents" >
< p > < a href = "https://kyleb.rbind.io/" > Kyle Belanger< / a > < / p >
< / div >
< / div >
< div >
< div class = "quarto-title-meta-heading" > Published< / div >
< div class = "quarto-title-meta-contents" >
< p class = "date" > January 12, 2021< / p >
< / div >
< / div >
2023-10-12 10:33:35 -04:00
< div >
< div class = "quarto-title-meta-heading" > Modified< / div >
< div class = "quarto-title-meta-contents" >
< p class = "date-modified" > October 12, 2023< / p >
< / div >
< / div >
2023-10-12 09:05:03 -04:00
< / div >
< / header > < div id = "quarto-content" class = "quarto-container page-columns page-rows-contents page-layout-article page-navbar" >
<!-- sidebar -->
< nav id = "quarto-sidebar" class = "sidebar collapse collapse-horizontal sidebar-navigation floating overflow-auto" >
< nav id = "TOC" role = "doc-toc" class = "toc-active" >
< h2 id = "toc-title" > Table of contents< / h2 >
< ul >
< li > < a href = "#authors-note" id = "toc-authors-note" class = "nav-link active" data-scroll-target = "#authors-note" > Authors Note< / a > < / li >
< li > < a href = "#introduction" id = "toc-introduction" class = "nav-link" data-scroll-target = "#introduction" > Introduction< / a > < / li >
< li > < a href = "#challenges" id = "toc-challenges" class = "nav-link" data-scroll-target = "#challenges" > Challenges< / a > < / li >
< li > < a href = "#going-outside-the-box" id = "toc-going-outside-the-box" class = "nav-link" data-scroll-target = "#going-outside-the-box" > Going Outside the Box< / a >
< ul class = "collapse" >
< li > < a href = "#code-folding" id = "toc-code-folding" class = "nav-link" data-scroll-target = "#code-folding" > Code Folding< / a > < / li >
< li > < a href = "#customizing-the-home-page" id = "toc-customizing-the-home-page" class = "nav-link" data-scroll-target = "#customizing-the-home-page" > Customizing the Home Page< / a > < / li >
< / ul > < / li >
< li > < a href = "#final-thoughts" id = "toc-final-thoughts" class = "nav-link" data-scroll-target = "#final-thoughts" > Final Thoughts< / a > < / li >
< / ul >
< / nav >
< / nav >
< div id = "quarto-sidebar-glass" data-bs-toggle = "collapse" data-bs-target = "#quarto-sidebar,#quarto-sidebar-glass" > < / div >
<!-- margin - sidebar -->
< div id = "quarto-margin-sidebar" class = "sidebar margin-sidebar" >
< / div >
<!-- main -->
< main class = "content quarto-banner-title-block" id = "quarto-document-content" >
< section id = "authors-note" class = "level1" >
< h1 > Authors Note< / h1 >
< p > I have since converted this blog to a quarto blog, but am leaving this post up in case anyone finds it useful< / p >
< / section >
< section id = "introduction" class = "level1" >
< h1 > Introduction< / h1 >
< p > This metapost describes changing my personal blog from a blogdown site to a distill blog site. I will not be going over starting a site from scratch as there are already several great resources for doing this. What I will be going over is some of the challenges and some of the changes and tips I have found. If you are looking to start a site from scratch, check out these great resources:< / p >
< ul >
< li > The Distill for Rmarkdown page on creating a < a href = "https://rstudio.github.io/distill/blog.html" > blog< / a > < / li >
< li > This excellent post from Shamindra Shrotriya on setting up a < a href = "https://www.shamindras.com/posts/2019-07-11-shrotriya2019distillpt1/" > blog< / a > < / li >
< li > This post from the Mockup < a href = "https://themockup.blog/posts/2020-08-01-building-a-blog-with-distill/" > blog< / a > < / li >
< / ul >
< p > This last post goes into some of the pros and cons of using distill instead of blogdown. If you want simplicity, go with distill without much customization. If you want the ability for a lot of customization and don’ < / p >
< / section >
< section id = "challenges" class = "level1" >
< h1 > Challenges< / h1 >
< p > The good thing about switching from blogdown to distill was I had very few challenges! The distill documentation, combined with the two posts I listed, helped me with most of my troubles. The only issue I ran into was distill contains a function called < code > import_post()< / code > , which according to the docs, only needs a published URL to work. I could never solve why, but I could not pull in the posts from my old blogdown site. This wasn’ ’ < / p >
< / section >
< section id = "going-outside-the-box" class = "level1" >
< h1 > Going Outside the Box< / h1 >
< section id = "code-folding" class = "level2" >
< h2 class = "anchored" data-anchor-id = "code-folding" > Code Folding< / h2 >
< p > When I converted my blog on 12/30/2020, code folding was not included as an option by default in distill. At that time, an excellent package called < a href = "https://github.com/ijlyttle/codefolder" > Codefolder< / a > added the functionality. Since going live with the blog, code folding has been added to distill.< a href = "#fn1" class = "footnote-ref" id = "fnref1" role = "doc-noteref" > < sup > 1< / sup > < / a > Code folding is available for either the whole document or individual code sections. The default caption is “Show Code”, but instead of typing < code > code_folding=TRUE< / code > , you can provide a string to change the caption.< / p >
< div class = "cell" data-code_folding = "Lets See It" >
< div class = "sourceCode cell-code" id = "cb1" > < pre class = "sourceCode r code-with-copy" > < code class = "sourceCode r" > < span id = "cb1-1" > < a href = "#cb1-1" aria-hidden = "true" tabindex = "-1" > < / a > < span class = "co" > # Some awesome code < / span > < / span >
< span id = "cb1-2" > < a href = "#cb1-2" aria-hidden = "true" tabindex = "-1" > < / a > < span class = "co" > # That does awesome things< / span > < / span > < / code > < button title = "Copy to Clipboard" class = "code-copy-button" > < i class = "bi" > < / i > < / button > < / pre > < / div >
< / div >
< / section >
< section id = "customizing-the-home-page" class = "level2" >
< h2 class = "anchored" data-anchor-id = "customizing-the-home-page" > Customizing the Home Page< / h2 >
< p > By default, a distill blog’ < / p >
< div class = "sourceCode" id = "cb2" > < pre class = "sourceCode yaml code-with-copy" > < code class = "sourceCode yaml" > < span id = "cb2-1" > < a href = "#cb2-1" aria-hidden = "true" tabindex = "-1" > < / a > < span class = "pp" > ---< / span > < / span >
< span id = "cb2-2" > < a href = "#cb2-2" aria-hidden = "true" tabindex = "-1" > < / a > < span class = "fu" > title< / span > < span class = "kw" > :< / span > < span class = "at" > < / span > < span class = "st" > "New Site"< / span > < / span >
< span id = "cb2-3" > < a href = "#cb2-3" aria-hidden = "true" tabindex = "-1" > < / a > < span class = "fu" > site< / span > < span class = "kw" > :< / span > < span class = "at" > distill::distill_website< / span > < / span >
< span id = "cb2-4" > < a href = "#cb2-4" aria-hidden = "true" tabindex = "-1" > < / a > < span class = "fu" > listing< / span > < span class = "kw" > :< / span > < span class = "at" > posts< / span > < / span >
< span id = "cb2-5" > < a href = "#cb2-5" aria-hidden = "true" tabindex = "-1" > < / a > < span class = "pp" > ---< / span > < / span > < / code > < button title = "Copy to Clipboard" class = "code-copy-button" > < i class = "bi" > < / i > < / button > < / pre > < / div >
< p > The critical piece here is the line < code > site: distill::distill_website< / code > . This line is what is needed to render the website. For my home page, I decided to use the package < a href = "https://github.com/seankross/postcards" > Postcard< / a > , which is used to generate simple landing pages. I won’ < a href = "https://alison.rbind.io/post/2020-12-22-postcards-distill/" > Alison Hill< / a > on how to do that. However, I will point out the most crucial part of the new index page the YAML header needs to contain these two lines.< / p >
< div class = "sourceCode" id = "cb3" > < pre class = "sourceCode yaml code-with-copy" > < code class = "sourceCode yaml" > < span id = "cb3-1" > < a href = "#cb3-1" aria-hidden = "true" tabindex = "-1" > < / a > < span class = "fu" > output< / span > < span class = "kw" > :< / span > < / span >
< span id = "cb3-2" > < a href = "#cb3-2" aria-hidden = "true" tabindex = "-1" > < / a > < span class = "at" > postcards::trestles< / span > < / span >
< span id = "cb3-3" > < a href = "#cb3-3" aria-hidden = "true" tabindex = "-1" > < / a > < span class = "fu" > site< / span > < span class = "kw" > :< / span > < span class = "at" > distill::distill_website< / span > < / span > < / code > < button title = "Copy to Clipboard" class = "code-copy-button" > < i class = "bi" > < / i > < / button > < / pre > < / div >
< / section >
< / section >
< section id = "final-thoughts" class = "level1" >
< h1 > Final Thoughts< / h1 >
< p > I have enjoyed the simplicity of Distill. While not nearly as customizable as blogdown, getting a blog site up and running in under an hour is pretty lovely. I hope to keep exploring what Distill has to offer and keep posting my updates!< / p >
< / section >
< div id = "quarto-appendix" class = "default" > < section id = "footnotes" class = "footnotes footnotes-end-of-document" role = "doc-endnotes" > < h2 class = "anchored quarto-appendix-heading" > Footnotes< / h2 >
< ol >
< li id = "fn1" > < p > Note that as of publishing, code folding is only available in the development version of distill< a href = "#fnref1" class = "footnote-back" role = "doc-backlink" > ↩︎< / a > < / p > < / li >
< / ol >
< / section > < section class = "quarto-appendix-contents" > < h2 class = "anchored quarto-appendix-heading" > Reuse< / h2 > < div id = "quarto-reuse" class = "quarto-appendix-contents" > < div > < a rel = "license" href = "https://creativecommons.org/licenses/by/4.0/" > https://creativecommons.org/licenses/by/4.0/< / a > < / div > < / div > < / section > < section class = "quarto-appendix-contents" > < h2 class = "anchored quarto-appendix-heading" > Citation< / h2 > < div > < div class = "quarto-appendix-secondary-label" > BibTeX citation:< / div > < pre class = "sourceCode code-with-copy quarto-appendix-bibtex" > < code class = "sourceCode bibtex" > @online{belanger2021,
author = {Belanger, Kyle},
title = {Converting {From} {Blogdown} to {Distill}},
date = {2021-01-12},
langid = {en}
}
< / code > < button title = "Copy to Clipboard" class = "code-copy-button" > < i class = "bi" > < / i > < / button > < / pre > < div class = "quarto-appendix-secondary-label" > For attribution, please cite this work as:< / div > < div id = "ref-belanger2021" class = "csl-entry quarto-appendix-citeas" role = "listitem" >
Belanger, Kyle. 2021. < span > “Converting From Blogdown to
Distill.”< / span > January 12, 2021.
< / div > < / div > < / section > < / div > < / main > <!-- /main -->
< script id = "quarto-html-after-body" type = "application/javascript" >
window.document.addEventListener("DOMContentLoaded", function (event) {
const toggleBodyColorMode = (bsSheetEl) => {
const mode = bsSheetEl.getAttribute("data-mode");
const bodyEl = window.document.querySelector("body");
if (mode === "dark") {
bodyEl.classList.add("quarto-dark");
bodyEl.classList.remove("quarto-light");
} else {
bodyEl.classList.add("quarto-light");
bodyEl.classList.remove("quarto-dark");
}
}
const toggleBodyColorPrimary = () => {
const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
if (bsSheetEl) {
toggleBodyColorMode(bsSheetEl);
}
}
toggleBodyColorPrimary();
const icon = "";
const anchorJS = new window.AnchorJS();
anchorJS.options = {
placement: 'right',
icon: icon
};
anchorJS.add('.anchored');
const isCodeAnnotation = (el) => {
for (const clz of el.classList) {
if (clz.startsWith('code-annotation-')) {
return true;
}
}
return false;
}
const clipboard = new window.ClipboardJS('.code-copy-button', {
text: function(trigger) {
const codeEl = trigger.previousElementSibling.cloneNode(true);
for (const childEl of codeEl.children) {
if (isCodeAnnotation(childEl)) {
childEl.remove();
}
}
return codeEl.innerText;
}
});
clipboard.on('success', function(e) {
// button target
const button = e.trigger;
// don't keep focus
button.blur();
// flash "checked"
button.classList.add('code-copy-button-checked');
var currentTitle = button.getAttribute("title");
button.setAttribute("title", "Copied!");
let tooltip;
if (window.bootstrap) {
button.setAttribute("data-bs-toggle", "tooltip");
button.setAttribute("data-bs-placement", "left");
button.setAttribute("data-bs-title", "Copied!");
tooltip = new bootstrap.Tooltip(button,
{ trigger: "manual",
customClass: "code-copy-button-tooltip",
offset: [0, -8]});
tooltip.show();
}
setTimeout(function() {
if (tooltip) {
tooltip.hide();
button.removeAttribute("data-bs-title");
button.removeAttribute("data-bs-toggle");
button.removeAttribute("data-bs-placement");
}
button.setAttribute("title", currentTitle);
button.classList.remove('code-copy-button-checked');
}, 1000);
// clear code selection
e.clearSelection();
});
function tippyHover(el, contentFn) {
const config = {
allowHTML: true,
content: contentFn,
maxWidth: 500,
delay: 100,
arrow: false,
appendTo: function(el) {
return el.parentElement;
},
interactive: true,
interactiveBorder: 10,
theme: 'quarto',
placement: 'bottom-start'
};
window.tippy(el, config);
}
const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
for (var i=0; i< noterefs.length ; i + + ) {
const ref = noterefs[i];
tippyHover(ref, function() {
// use id or data attribute instead here
let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
try { href = new URL(href).hash; } catch {}
const id = href.replace(/^#\/?/, "");
const note = window.document.getElementById(id);
return note.innerHTML;
});
}
let selectedAnnoteEl;
const selectorForAnnotation = ( cell, annotation) => {
let cellAttr = 'data-code-cell="' + cell + '"';
let lineAttr = 'data-code-annotation="' + annotation + '"';
const selector = 'span[' + cellAttr + '][' + lineAttr + ']';
return selector;
}
const selectCodeLines = (annoteEl) => {
const doc = window.document;
const targetCell = annoteEl.getAttribute("data-target-cell");
const targetAnnotation = annoteEl.getAttribute("data-target-annotation");
const annoteSpan = window.document.querySelector(selectorForAnnotation(targetCell, targetAnnotation));
const lines = annoteSpan.getAttribute("data-code-lines").split(",");
const lineIds = lines.map((line) => {
return targetCell + "-" + line;
})
let top = null;
let height = null;
let parent = null;
if (lineIds.length > 0) {
//compute the position of the single el (top and bottom and make a div)
const el = window.document.getElementById(lineIds[0]);
top = el.offsetTop;
height = el.offsetHeight;
parent = el.parentElement.parentElement;
if (lineIds.length > 1) {
const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
const bottom = lastEl.offsetTop + lastEl.offsetHeight;
height = bottom - top;
}
if (top !== null & & height !== null & & parent !== null) {
// cook up a div (if necessary) and position it
let div = window.document.getElementById("code-annotation-line-highlight");
if (div === null) {
div = window.document.createElement("div");
div.setAttribute("id", "code-annotation-line-highlight");
div.style.position = 'absolute';
parent.appendChild(div);
}
div.style.top = top - 2 + "px";
div.style.height = height + 4 + "px";
let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
if (gutterDiv === null) {
gutterDiv = window.document.createElement("div");
gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter");
gutterDiv.style.position = 'absolute';
const codeCell = window.document.getElementById(targetCell);
const gutter = codeCell.querySelector('.code-annotation-gutter');
gutter.appendChild(gutterDiv);
}
gutterDiv.style.top = top - 2 + "px";
gutterDiv.style.height = height + 4 + "px";
}
selectedAnnoteEl = annoteEl;
}
};
const unselectCodeLines = () => {
const elementsIds = ["code-annotation-line-highlight", "code-annotation-line-highlight-gutter"];
elementsIds.forEach((elId) => {
const div = window.document.getElementById(elId);
if (div) {
div.remove();
}
});
selectedAnnoteEl = undefined;
};
// Attach click handler to the DT
const annoteDls = window.document.querySelectorAll('dt[data-target-cell]');
for (const annoteDlNode of annoteDls) {
annoteDlNode.addEventListener('click', (event) => {
const clickedEl = event.target;
if (clickedEl !== selectedAnnoteEl) {
unselectCodeLines();
const activeEl = window.document.querySelector('dt[data-target-cell].code-annotation-active');
if (activeEl) {
activeEl.classList.remove('code-annotation-active');
}
selectCodeLines(clickedEl);
clickedEl.classList.add('code-annotation-active');
} else {
// Unselect the line
unselectCodeLines();
clickedEl.classList.remove('code-annotation-active');
}
});
}
const findCites = (el) => {
const parentEl = el.parentElement;
if (parentEl) {
const cites = parentEl.dataset.cites;
if (cites) {
return {
el,
cites: cites.split(' ')
};
} else {
return findCites(el.parentElement)
}
} else {
return undefined;
}
};
var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
for (var i=0; i< bibliorefs.length ; i + + ) {
const ref = bibliorefs[i];
const citeInfo = findCites(ref);
if (citeInfo) {
tippyHover(citeInfo.el, function() {
var popup = window.document.createElement('div');
citeInfo.cites.forEach(function(cite) {
var citeDiv = window.document.createElement('div');
citeDiv.classList.add('hanging-indent');
citeDiv.classList.add('csl-entry');
var biblioDiv = window.document.getElementById('ref-' + cite);
if (biblioDiv) {
citeDiv.innerHTML = biblioDiv.innerHTML;
}
popup.appendChild(citeDiv);
});
return popup.innerHTML;
});
}
}
});
< / script >
< / div > <!-- /content -->
< / body > < / html >
