From 1843b633ce5411ca60b8f0aecfed0185abd400ca Mon Sep 17 00:00:00 2001
From: Petr Pucil <petr.pucil@seznam.cz>
Date: Wed, 1 Jul 2020 11:31:10 +0200
Subject: [PATCH 1/4] Add KSY syntax diagram generated by Docson

See https://github.com/kaitai-io/kaitai_struct/issues/655
---
 .travis.yml                     |  1 +
 Makefile                        |  4 ++++
 index.adoc                      |  1 +
 ksy_diagram-docinfo-footer.html | 14 ++++++++++++++
 ksy_diagram-docinfo.html        |  1 +
 ksy_diagram.adoc                |  7 +++++++
 6 files changed, 28 insertions(+)
 create mode 100644 ksy_diagram-docinfo-footer.html
 create mode 100644 ksy_diagram-docinfo.html
 create mode 100644 ksy_diagram.adoc

diff --git a/.travis.yml b/.travis.yml
index 65cccf0..49235bf 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -18,6 +18,7 @@ cache:
 before_install:
   - gem install asciidoctor pygments.rb
   - git clone -b 2.5.2 https://github.com/pygments/pygments.git
+  - git clone -b v2.1.0 --depth 1 https://github.com/lbovet/docson.git
 
 script:
   - make
diff --git a/Makefile b/Makefile
index 89ee67f..89a03e9 100644
--- a/Makefile
+++ b/Makefile
@@ -8,6 +8,7 @@ TARGETS=\
 	out/developers_intro.html \
 	out/faq.html \
 	out/ksy_reference.html \
+	out/ksy_diagram.html \
 	out/lang_cpp_stl.html \
 	out/lang_java.html \
 	out/lang_javascript.html \
@@ -24,6 +25,9 @@ all: $(TARGETS)
 	rm -rf out/img
 	cp -r img styles js out
 	cp raw/pygments-default.css out/styles
+	cp -r docson/public/docson.js docson/public/lib/ out/js
+	cp -r docson/public/templates out
+	cp docson/public/css/docson.css out/styles
 
 out/%.html: raw/%.html tmpl/navbar.html postprocess-html
 	./postprocess-html $< $@
diff --git a/index.adoc b/index.adoc
index 7145d40..f1170e0 100644
--- a/index.adoc
+++ b/index.adoc
@@ -5,6 +5,7 @@
 * <<user_guide.adoc#,User guide>>
 * <<ksy_style_guide.adoc#,KSY style guide>> — best practices in creation of robust KSY specs
 * <<ksy_reference.adoc#,KSY language reference>>
+* <<ksy_diagram.adoc#,KSY syntax diagram>>
 * <<faq.adoc#,FAQ>> — frequently asked questions
 * https://github.com/kaitai-io/awesome-kaitai[awesome-kaitai] — A list of Kaitai Struct tools and resources
 
diff --git a/ksy_diagram-docinfo-footer.html b/ksy_diagram-docinfo-footer.html
new file mode 100644
index 0000000..6af53f3
--- /dev/null
+++ b/ksy_diagram-docinfo-footer.html
@@ -0,0 +1,14 @@
+<link rel="stylesheet" href="styles/docson.css">
+<script src="js/lib/require.js"></script>
+<script>
+    require.config({ baseUrl: "js"});
+    require(["docson", "lib/jquery"], function(docson) {
+        $(function() {
+            var schemaUrl = "https://raw.githubusercontent.com/kaitai-io/ksy_schema/master/ksy_schema.json";
+            $.get(schemaUrl).done(function(schema) {
+                docson.templateBaseUrl="templates";
+                docson.doc("doc", schema);
+            });
+        });
+    });
+</script>
diff --git a/ksy_diagram-docinfo.html b/ksy_diagram-docinfo.html
new file mode 100644
index 0000000..63107cf
--- /dev/null
+++ b/ksy_diagram-docinfo.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="styles/docson.css">
diff --git a/ksy_diagram.adoc b/ksy_diagram.adoc
new file mode 100644
index 0000000..d1c8c86
--- /dev/null
+++ b/ksy_diagram.adoc
@@ -0,0 +1,7 @@
+= Kaitai Struct: KSY syntax diagram
+
+Here you can examine the KSY syntax diagram describing all YAML keys that can be used in the Kaitai Struct YAML spec (KSY).
+
+++++
+<div id="doc"></div>
+++++

From 665d6b64a85241d56391b0a0bae7faaedcf98bd2 Mon Sep 17 00:00:00 2001
From: Petr Pucil <petr.pucil@seznam.cz>
Date: Wed, 1 Jul 2020 14:19:13 +0200
Subject: [PATCH 2/4] Add docson/ folder to .gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index d628c74..507bb7c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 out/
 raw/
 pygments/
+docson/

From 139bf571180b449d760b3d95b47db261d3cc0485 Mon Sep 17 00:00:00 2001
From: Petr Pucil <petr.pucil@seznam.cz>
Date: Wed, 1 Jul 2020 14:19:40 +0200
Subject: [PATCH 3/4] Show a loading spinner until the diagram is shown

---
 img/ajax-loader.gif             | Bin 0 -> 1754 bytes
 ksy_diagram-docinfo-footer.html |  10 ++++++----
 ksy_diagram-docinfo.html        |   5 +++++
 ksy_diagram.adoc                |   6 ++++++
 4 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 img/ajax-loader.gif

diff --git a/img/ajax-loader.gif b/img/ajax-loader.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b59ce4bb4f10d285d99971dff150bfe6cd98d820
GIT binary patch
literal 1754
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

literal 0
HcmV?d00001

diff --git a/ksy_diagram-docinfo-footer.html b/ksy_diagram-docinfo-footer.html
index 6af53f3..1845142 100644
--- a/ksy_diagram-docinfo-footer.html
+++ b/ksy_diagram-docinfo-footer.html
@@ -2,12 +2,14 @@
 <script src="js/lib/require.js"></script>
 <script>
     require.config({ baseUrl: "js"});
-    require(["docson", "lib/jquery"], function(docson) {
+    require(["docson"], function(docson) {
         $(function() {
             var schemaUrl = "https://raw.githubusercontent.com/kaitai-io/ksy_schema/master/ksy_schema.json";
-            $.get(schemaUrl).done(function(schema) {
-                docson.templateBaseUrl="templates";
-                docson.doc("doc", schema);
+            $.getJSON(schemaUrl).done(function(schema) {
+                docson.templateBaseUrl = "templates";
+                docson.doc("doc", schema).done(function() {
+                    $("#wait-for-diagram").hide(1000);
+                });
             });
         });
     });
diff --git a/ksy_diagram-docinfo.html b/ksy_diagram-docinfo.html
index 63107cf..86ff0b2 100644
--- a/ksy_diagram-docinfo.html
+++ b/ksy_diagram-docinfo.html
@@ -1 +1,6 @@
 <link rel="stylesheet" href="styles/docson.css">
+<style>
+.ajax-loader {
+    margin: 0 0.3em;
+}
+</style>
diff --git a/ksy_diagram.adoc b/ksy_diagram.adoc
index d1c8c86..5e6fbc6 100644
--- a/ksy_diagram.adoc
+++ b/ksy_diagram.adoc
@@ -2,6 +2,12 @@
 
 Here you can examine the KSY syntax diagram describing all YAML keys that can be used in the Kaitai Struct YAML spec (KSY).
 
+[#wait-for-diagram]
+[NOTE]
+====
+Please wait a few seconds for the diagram below to render... [.ajax-loader]#image:img/ajax-loader.gif[Loading\..., 24, 24]#
+====
+
 ++++
 <div id="doc"></div>
 ++++

From 7098cd92a9c2e1b834504c9048d1a7ca4809ea94 Mon Sep 17 00:00:00 2001
From: Petr Pucil <petr.pucil@seznam.cz>
Date: Wed, 1 Jul 2020 14:57:04 +0200
Subject: [PATCH 4/4] Remove docson.css link in footer left by mistake

---
 ksy_diagram-docinfo-footer.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ksy_diagram-docinfo-footer.html b/ksy_diagram-docinfo-footer.html
index 1845142..ef426c7 100644
--- a/ksy_diagram-docinfo-footer.html
+++ b/ksy_diagram-docinfo-footer.html
@@ -1,4 +1,3 @@
-<link rel="stylesheet" href="styles/docson.css">
 <script src="js/lib/require.js"></script>
 <script>
     require.config({ baseUrl: "js"});