[gtk/redo-doc-images: 4/4] wip: Generate screenshots on the fly

[Matthias Clasen <matthiasc src gnome org>]

commit fa1a4f1aa76d61056840cdacf5291efbffdfe9fc
Author: Matthias Clasen <mclasen redhat com>
Date:   Mon Apr 18 11:56:43 2022 -0400

    wip: Generate screenshots on the fly

 docs/reference/gtk/images/aboutdialog.ui   | 17 +++++++++++
 docs/reference/gtk/images/button.ui        | 30 ++++++++++++++++++++
 docs/reference/gtk/images/meson.build      | 20 +++++++++++++
 docs/reference/gtk/images/style.css        |  8 ++++++
 docs/reference/gtk/images/switch.ui        | 41 +++++++++++++++++++++++++++
 docs/reference/gtk/images/toggle-button.ui | 45 ++++++++++++++++++++++++++++++
 docs/reference/gtk/meson.build             | 15 +++++++++-
 meson_options.txt                          |  5 ++++
 8 files changed, 180 insertions(+), 1 deletion(-)
---
diff --git a/docs/reference/gtk/images/aboutdialog.ui b/docs/reference/gtk/images/aboutdialog.ui
new file mode 100644
index 0000000000..00815af070
--- /dev/null
+++ b/docs/reference/gtk/images/aboutdialog.ui
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkAboutDialog">
+    <property name="program-name">GTK Code Demos</property>
+    <property name="version">4.8.0</property>
+    <property name="copyright">© 1997-2022 The GTK Team</property>
+    <property name="website">http://www.gtk.org</property>
+    <property name="comments">Program to demonstrate GTK functions.</property>
+    <property name="logo">gtk-logo.png</property>
+    <property name="title">About GTK Code Demos</property>
+    <property name="authors">Peter Mattis
+Spencer Kimball
+Josh MacDonald
+and many more…
+</property>
+  </object>
+</interface>
diff --git a/docs/reference/gtk/images/button.ui b/docs/reference/gtk/images/button.ui
new file mode 100644
index 0000000000..9ed81e1860
--- /dev/null
+++ b/docs/reference/gtk/images/button.ui
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkButton">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="label">Button</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/docs/reference/gtk/images/meson.build b/docs/reference/gtk/images/meson.build
new file mode 100644
index 0000000000..5f77784bb8
--- /dev/null
+++ b/docs/reference/gtk/images/meson.build
@@ -0,0 +1,20 @@
+ui_files = [
+  'button.ui',
+  'aboutdialog.ui',
+  'switch.ui',
+  'toggle-button.ui'
+]
+
+gtk_builder_tool = find_program('gtk4-builder-tool')
+
+if get_option('update_screenshots')
+  foreach file: ui_files
+    gtk_images += custom_target('@0@ gallery image'.format(file),
+                                input: [file, 'style.css'],
+                                output: file.replace('.ui', '.png'),
+                                command: [ gtk_builder_tool, 'screenshot',
+                                           '--force',
+                                           '--css', '@INPUT1@',
+                                           '@INPUT0@', '@OUTPUT@' ])
+  endforeach
+endif
diff --git a/docs/reference/gtk/images/style.css b/docs/reference/gtk/images/style.css
new file mode 100644
index 0000000000..148a682240
--- /dev/null
+++ b/docs/reference/gtk/images/style.css
@@ -0,0 +1,8 @@
+.nobackground {
+  background: none;
+}
+
+.shadow {
+  box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5);
+  margin: 20px;
+}
diff --git a/docs/reference/gtk/images/switch.ui b/docs/reference/gtk/images/switch.ui
new file mode 100644
index 0000000000..bc7136de18
--- /dev/null
+++ b/docs/reference/gtk/images/switch.ui
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkSwitch">
+                <property name="active">1</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSwitch">
+                <property name="active">0</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/docs/reference/gtk/images/toggle-button.ui b/docs/reference/gtk/images/toggle-button.ui
new file mode 100644
index 0000000000..ff1a323aa8
--- /dev/null
+++ b/docs/reference/gtk/images/toggle-button.ui
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">horizontal</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <style>
+              <class name="linked"/>
+            </style>
+            <child>
+              <object class="GtkToggleButton">
+                <property name="active">1</property>
+                <property name="label">Toggle</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkToggleButton">
+                <property name="active">0</property>
+                <property name="label">Button</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/docs/reference/gtk/meson.build b/docs/reference/gtk/meson.build
index a7af607b91..222615302c 100644
--- a/docs/reference/gtk/meson.build
+++ b/docs/reference/gtk/meson.build
@@ -27,6 +27,19 @@ expand_content_md_files = [
   'visual_index.md'
 ]
 
+ui_files = [
+  'ui/button.ui',
+  'ui/aboutdialog.ui',
+  'ui/switch.ui',
+  'ui/toggle-button.ui'
+]
+
+gtk_images = []
+
+if get_option('update_screenshots')
+  subdir('images')
+endif
+
 if get_option('gtk_doc')
   gtk4_toml = configure_file(
     input: 'gtk4.toml.in',
@@ -49,7 +62,7 @@ if get_option('gtk_doc')
       '--content-dir=@0@'.format(meson.current_source_dir()),
       '@INPUT1@',
     ],
-    depends: [ gdk_gir[0], gsk_gir[0] ],
+    depends: [ gdk_gir[0], gsk_gir[0] ] + gtk_images,
     depend_files: [ expand_content_md_files ],
     build_by_default: true,
     install: true,
diff --git a/meson_options.txt b/meson_options.txt
index bb2530d00a..2084ab86e1 100644
--- a/meson_options.txt
+++ b/meson_options.txt
@@ -85,6 +85,11 @@ option('gtk_doc',
        value: false,
        description : 'Build API reference and tools documentation')
 
+option('update_screenshots',
+       type: 'boolean',
+       value: false,
+       description : 'Regenerate screenshots for the documentation')
+
 option('man-pages',
        type: 'boolean',
        value: false,