[doc] Add render shortcode
The 'render' shortcode takes a URL and, when the page loads, fetches it,
renders it as markdown, and inserts it into the page at the position of
the invocation of the shortcode.
Using it is fairly straightforward:
{{< render "https://some_url" >}}
This does require that javascript be enabled in the viewer's browser and
that the referenced URL have cross-origin resource sharing enabled.
Updates #1411, #1417
Signed-off-by: Garret Kelly <gdk@google.com>
diff --git a/site/docs/layouts/partials/footer.html b/site/docs/layouts/partials/footer.html
index bc6a284..308e25a 100644
--- a/site/docs/layouts/partials/footer.html
+++ b/site/docs/layouts/partials/footer.html
@@ -48,11 +48,11 @@
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/2.1.2/skins/default.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/2.1.2/wavedrom.js"></script>
-<script>
- // Wrap tables
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/10.0.0/markdown-it.min.js"></script>
+<script>
+ // Wrap tables
const tables = document.getElementsByTagName('table');
- console.log(tables);
for (let i = 0; i < tables.length; i++) {
const table = tables[i];
const wrapper = document.createElement('div');
diff --git a/site/docs/layouts/shortcodes/render.html b/site/docs/layouts/shortcodes/render.html
new file mode 100644
index 0000000..857ace6
--- /dev/null
+++ b/site/docs/layouts/shortcodes/render.html
@@ -0,0 +1,23 @@
+{{ $url := .Get 0 }}
+{{ $id := printf "__render_%v" .Ordinal }}
+<div id="{{ $id }}">
+ Loading {{ $url }}...
+</div>
+<script type="text/javascript">
+ (function() {
+ function renderContent(event) {
+ var md = window.markdownit();
+ var rendered = md.render(event.target.responseText);
+ document.getElementById('{{ $id }}').innerHTML = rendered;
+ }
+
+ function loadContent(event) {
+ var request = new XMLHttpRequest();
+ request.addEventListener('load', renderContent);
+ request.open('GET', '{{ $url }}');
+ request.send();
+ }
+
+ window.addEventListener('load', loadContent);
+ })();
+</script>
