Examples: Create index.html for Emscripten examples

brackeen · brackeen · commit 9aee2d64e79d · 2024-03-05T17:41:49.000-08:00
diff --git a/README.md b/README.md
@@ -176,7 +176,7 @@ See [glfm.h](include/glfm.h)
 Use `cmake` to generate an Xcode project:
 
 ```Shell
-cmake -D GLFM_BUILD_EXAMPLES=ON -B build/apple -G Xcode 
+cmake -D GLFM_BUILD_EXAMPLES=ON -B build/apple -G Xcode
 open build/apple/GLFM.xcodeproj
 ```
 
@@ -187,12 +187,16 @@ In Xcode, switch to the `glfm_touch` target and run on a simulator or a device.
 Use `emcmake` to set environmental variables for `cmake`, then build:
 
 ```Shell
-emcmake cmake -D GLFM_BUILD_EXAMPLES=ON -B build/emscripten
-cmake --build build/emscripten
+emcmake cmake -D GLFM_BUILD_EXAMPLES=ON -B build/emscripten && cmake --build build/emscripten
 ```
 
 Then run locally:
 ```Shell
+emrun build/emscripten/examples
+```
+
+Or run a specific example:
+```Shell
 emrun build/emscripten/examples/glfm_touch.html
 ```
 
diff --git a/examples/CMakeLists.txt b/examples/CMakeLists.txt
@@ -7,10 +7,10 @@ list(APPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_LIST_DIR}/cmake")
 set(GLFM_APP_ORGANIZATION_IDENTIFIER "com.brackeen")
 set(GLFM_APP_VERSION "1.0")
 set(GLFM_APP_VERSION_ITERATION 1)
-set(GLFM_APP_LIST "")
+set(GLFM_APP_TARGET_NAME_LIST "")
 
 macro(add_target TARGET SRC_FILES)
-    list(APPEND GLFM_APP_LIST ${TARGET})
+    list(APPEND GLFM_APP_TARGET_NAME_LIST ${TARGET})
     set(GLFM_APP_TARGET_NAME ${TARGET})
     set(GLFM_APP_SRC ${SRC_FILES})
     include(GLFMAppTarget)
@@ -34,3 +34,22 @@ if (CMAKE_SYSTEM_NAME STREQUAL "Darwin")
 else()
     add_target(glfm_test_pattern "test_pattern.c;test_pattern_renderer.h;test_pattern_renderer_gles2.c")
 endif()
+
+# Write index.html for Emscripten examples
+if (CMAKE_SYSTEM_NAME STREQUAL "Emscripten")
+    file(COPY icons DESTINATION ${CMAKE_CURRENT_BINARY_DIR})
+    file(READ index.html.in INDEX_HTML)
+
+    foreach(GLFM_APP_TARGET_NAME ${GLFM_APP_TARGET_NAME_LIST})
+        set(GLFM_APP_HTML "
+    <figure>
+        <a href=\"${GLFM_APP_TARGET_NAME}.html\">
+            <img src=\"icons/${GLFM_APP_TARGET_NAME}.png\">
+            <figcaption>${GLFM_APP_TARGET_NAME}</figcaption>
+        </a>
+    </figure>")
+
+        string(REPLACE "<!-- #figure -->" "${GLFM_APP_HTML}\n<!-- #figure -->" INDEX_HTML "${INDEX_HTML}")
+    endforeach()
+    file(WRITE ${CMAKE_CURRENT_BINARY_DIR}/index.html "${INDEX_HTML}")
+endif()
diff --git a/examples/index.html.in b/examples/index.html.in
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- Template for Emscripten examples -->
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>GLFM Examples</title>
+    <style type="text/css">
+        body {
+            background-color: #000; color: #fff; margin: 40px auto; padding: 0 10px; max-width: 800px;
+            font-size: 14pt; line-height: 1.4; font-family: -apple-system, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+        }
+        h1, h2, h3 { line-height: 1.2; text-align: center; }
+
+        a:link { color: #fff; text-decoration: none; }
+        a:hover { color: #66f; }
+        a:visited { color: #fff; }
+        a:visited:hover { color: #66f; }
+
+        figure { position: relative; float: left; width: 200px; margin: 0 0 80px 0; text-align: center; }
+        figure img { width: 128px; height: 128px; }
+    </style>
+</head>
+<body>
+    <h1>GLFM Examples</h1>
+
+<!-- #figure -->
+
+</body>
+</html>
