feat: add version compatibility documentation

UrazAkgultan · UrazAkgultan · commit 0a3f34906ff7 · 2025-04-02T14:54:12.000+02:00
diff --git a/docs/version-compatibility/version-compatibility.css b/docs/version-compatibility/version-compatibility.css
@@ -0,0 +1,57 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 20px;
+    background-color: #f5f5f5;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    color: #333;
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.version-table {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th, td {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+
+th {
+    background-color: #f8f9fa;
+    font-weight: 600;
+}
+
+tr:hover {
+    background-color: #f5f5f5;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 10px;
+    }
+    
+    th, td {
+        padding: 8px 10px;
+    }
+} 
diff --git a/docs/version-compatibility/version-compatibility.html b/docs/version-compatibility/version-compatibility.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mendix Native Template Version Compatibility</title>
+    <link rel="stylesheet" href="version-compatibility.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Mendix Native Template Version Compatibility</h1>
+        <div class="version-table">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Mendix Studio Pro Version</th>
+                        <th>Min Native Template Version</th>
+                        <th>Max Native Template Version</th>
+                    </tr>
+                </thead>
+                <tbody id="version-data">
+                    <!-- Data will be populated by JavaScript -->
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <script src="version-compatibility.js"></script>
+</body>
+</html> 
diff --git a/docs/version-compatibility/version-compatibility.js b/docs/version-compatibility/version-compatibility.js
@@ -0,0 +1,26 @@
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('../../mendix_version.json')
+        .then(response => response.json())
+        .then(data => {
+            const tbody = document.getElementById('version-data');
+            Object.entries(data).forEach(([mendixVersion, versions]) => {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td>${mendixVersion}</td>
+                    <td>${versions.min}</td>
+                    <td>${versions.max}</td>
+                `;
+                tbody.appendChild(row);
+            });
+        })
+        .catch(error => {
+            console.error('Error loading version data:', error);
+            document.getElementById('version-data').innerHTML = `
+                <tr>
+                    <td colspan="3" style="text-align: center; color: red;">
+                        Error loading version data. Please try again later.
+                    </td>
+                </tr>
+            `;
+        });
+}); 
