Add fullscreen button to embedded JS demos.

libs/filamentjs/docs/build.py

@@ -154,12 +154,12 @@ def weave(name):
     with open(f'tutorial_{name}.md', 'r') as fin:
         markdown = fin.read()
         if ENABLE_EMBEDDED_DEMO:
-            style = 'style="width:100%;height:200px;border:none"'
             if name == 'triangle':
                 markdown = PREAMBLE + markdown
-            iframe = f"<iframe {style} src='demo_{name}.html'>" \
-                    "</iframe>\n\n"
-            markdown = iframe + markdown
+            markdown = '<div class="demo_frame">' + \
+                f'<iframe src="demo_{name}.html"></iframe>' + \
+                f'<a href="demo_{name}.html">&#x1F517;</a>' + \
+                '</div>\n' + markdown
         rendered = mistletoe.markdown(markdown, PygmentsRenderer)
     template = open('tutorial_template.html').read()
     rendered = template.replace('$BODY', rendered)

libs/filamentjs/docs/main.css

@@ -23,12 +23,6 @@ code, div.highlight pre {
   color: rgb(0, 137, 235);
 }
 
-iframe {
-  border: none;
-  width: 100%;
-  height: 100%;
-}
-
 a {
   text-decoration: none;
   color: black;
@@ -105,4 +99,23 @@ nav li {
   nav {
     text-align: right;
   }
-}
+}
+
+div.demo_frame {
+  width: 100%;
+  height: 200px;
+  border: none;
+}
+
+iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+div.demo_frame > a {
+  position: relative;
+  float: right;
+  right: 10px;
+  bottom: 35px;
+}

libs/filamentjs/docs/tutorial_redball.md

@@ -1,3 +1,4 @@
+
 This tutorial will describe how to create the redball demo, introducing you to materials and
 textures.