checkpoint

textcortex · osolmaz · Jun 5, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
commit d3c9fcc4db756002baefe44c42e11def10e0516d
diff --git a/examples/html/test-doc.html b/examples/html/test-doc.html
@@ -4,6 +4,49 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Comprehensive HTML QA Page</title>
+  <style>
+    /* CSS for multi-column layout */
+    .multi-column-section {
+      margin: 20px 0;
+    }
+    .column-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
+      margin-bottom: 20px;
+    }
+    .column {
+      flex: 1;
+      min-width: 250px;
+      padding: 15px;
+      background-color: #f5f5f5;
+      border-radius: 5px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+
+    /* CSS for newspaper-style columns */
+    .newspaper-columns {
+      column-count: 3;
+      column-gap: 20px;
+      column-rule: 1px solid #ddd;
+      margin: 20px 0;
+      padding: 15px;
+      background-color: #fff8e1;
+      border-radius: 5px;
+    }
+
+    @media (max-width: 768px) {
+      .newspaper-columns {
+        column-count: 2;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .newspaper-columns {
+        column-count: 1;
+      }
+    }
+  </style>
 </head>
 <body>
   <header>
@@ -13,6 +56,7 @@ <h1>HTML QA Test Page</h1>
         <li><a href="#text">Text</a></li>
         <li><a href="#lists-tables">Lists & Tables</a></li>
         <li><a href="#media">Media</a></li>
+        <li><a href="#multi-column">Multi-Column</a></li>
         <li><a href="#code">Code</a></li>
         <li><a href="#form">Forms</a></li>
       </ul>
@@ -22,7 +66,7 @@ <h1>HTML QA Test Page</h1>
   <section id="text">
     <h2>Text Elements</h2>
     <p>This is a <strong>paragraph</strong> with <em>emphasis</em>, <u>underline</u>, and <code>inline code</code>.</p>
-    <blockquote>“This is a blockquote for testing.”</blockquote>
+    <blockquote>"This is a blockquote for testing."</blockquote>
     <hr/>
   </section>
 
@@ -56,33 +100,77 @@ <h3>Table</h3>
     <hr/>
   </section>
 
-
-
   <section id="media">
     <h2>Images</h2>
-
-    <img 
-      src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=400" 
-      alt="Person coding on laptop" 
-      width="300" 
-    />
-    <br/><br/>
-
-    <img 
-      src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400" 
-      alt="Office desk with computer" 
-      width="300" 
-    />
-    <br/><br/>
-
-    <img 
-      src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400" 
-      alt="Coffee and notebook" 
-      width="300" 
-    />
+
+    <div class="column-container">
+      <div class="column">
+        <img
+          src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=400"
+          alt="Person coding on laptop"
+          style="width: 100%; height: auto; border-radius: 5px;"
+        />
+        <p style="margin-top: 10px; font-size: 14px; color: #666;">Person coding on laptop</p>
+      </div>
+
+      <div class="column">
+        <img
+          src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400"
+          alt="Office desk with computer"
+          style="width: 100%; height: auto; border-radius: 5px;"
+        />
+        <p style="margin-top: 10px; font-size: 14px; color: #666;">Office desk with computer</p>
+      </div>
+
+      <div class="column">
+        <img
+          src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400"
+          alt="Coffee and notebook"
+          style="width: 100%; height: auto; border-radius: 5px;"
+        />
+        <p style="margin-top: 10px; font-size: 14px; color: #666;">Coffee and notebook</p>
+      </div>
+    </div>
+    <hr/>
+  </section>
+
+  <!-- New Multi-Column Section -->
+  <section id="multi-column">
+    <h2>Multi-Column Content</h2>
+
+    <h3>Flexbox Columns</h3>
+    <div class="multi-column-section">
+      <div class="column-container">
+        <div class="column">
+          <h4>Column 1: Web Development</h4>
+          <p>Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services.</p>
+        </div>
+        <div class="column">
+          <h4>Column 2: UI Design</h4>
+          <p>User interface design is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience.</p>
+        </div>
+        <div class="column">
+          <h4>Column 3: UX Research</h4>
+          <p>User experience research is the systematic investigation of users and their requirements, in order to add context and insight into the process of designing the user experience. UX researchers adopt various methods to uncover problems and design opportunities.</p>
+        </div>
+      </div>
+    </div>
+
+    <h3>CSS Multi-Column Layout</h3>
+    <div class="newspaper-columns">
+      <h4>The Evolution of Web Technologies</h4>
+      <p>The World Wide Web has evolved significantly since its inception in the early 1990s. What began as a simple system for sharing text documents has transformed into a complex ecosystem supporting rich media, real-time communication, and sophisticated applications.</p>
+
+      <p>HTML5 introduced native support for video and audio elements, eliminating the need for plugins like Flash. CSS3 brought responsive design capabilities, allowing websites to adapt to different screen sizes. JavaScript frameworks like React, Angular, and Vue have revolutionized front-end development.</p>
+
+      <p>WebAssembly is enabling high-performance applications to run in browsers. Progressive Web Apps combine the best of web and mobile apps. Meanwhile, technologies like WebRTC facilitate peer-to-peer communication directly in browsers without plugins.</p>
+
+      <p>The adoption of HTTP/2 and HTTP/3 has improved performance through multiplexing and reduced latency. Content delivery networks distribute resources globally for faster access. Serverless architectures abstract infrastructure management, allowing developers to focus on code.</p>
+
+      <p>As web technologies continue to evolve, we're seeing increased emphasis on accessibility, privacy, and security. The future web promises even greater capabilities with technologies like augmented reality, machine learning integration, and improved offline functionality.</p>
+    </div>
     <hr/>
   </section>
-
 
   <section id="code">
     <h2>Code Blocks</h2>
@@ -148,4 +236,4 @@ <h2>Form Elements</h2>
     <p>© 2025 HTML QA Page</p>
   </footer>
 </body>
-</html>
+</html>
diff --git a/typescript/src/dev/index.tsx b/typescript/src/dev/index.tsx
@@ -1,9 +1,28 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom/client";
 import { JsonDocRenderer } from "../renderer/JsonDocRenderer";
-import testPage from "./testJsonDocs/test_document.json";
+// import testPage from "./testJsonDocs/test_document.json";
+import testPage from "./testJsonDocs/test_document_2.json";
+
+import { loadSchema, validateAgainstSchema } from "../validation/validator";
 
 const App = () => {
+  async function main() {
+    const schema = await loadSchema("./testJsonDocs/test_document_2.json");
+
+    try {
+      const isValid = validateAgainstSchema(testPage, schema);
+      console.log("isvlaid: ", isValid);
+      console.log("schema:  ", schema);
+    } catch (error) {
+      console.log("error validating schema: ", error);
+    }
+  }
+
+  useEffect(() => {
+    main();
+  }, []);
+
   return (
     <div style={{ padding: "20px", maxWidth: "800px", margin: "0 auto" }}>
       <h1>JSON-DOC Renderer Development</h1>