Skip to content

Commit d3c9fcc

Browse files
abrehamgezahegnabrehamgezahegn
committed
checkpoint
1 parent b9478d0 commit d3c9fcc

5 files changed

Lines changed: 4313 additions & 136 deletions

File tree

‎examples/html/test-doc.html‎

Lines changed: 113 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,49 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
66
<title>Comprehensive HTML QA Page</title>
7+
<style>
8+
/* CSS for multi-column layout */
9+
.multi-column-section {
10+
margin: 20px 0;
11+
}
12+
.column-container {
13+
display: flex;
14+
flex-wrap: wrap;
15+
gap: 20px;
16+
margin-bottom: 20px;
17+
}
18+
.column {
19+
flex: 1;
20+
min-width: 250px;
21+
padding: 15px;
22+
background-color: #f5f5f5;
23+
border-radius: 5px;
24+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
25+
}
26+
27+
/* CSS for newspaper-style columns */
28+
.newspaper-columns {
29+
column-count: 3;
30+
column-gap: 20px;
31+
column-rule: 1px solid #ddd;
32+
margin: 20px 0;
33+
padding: 15px;
34+
background-color: #fff8e1;
35+
border-radius: 5px;
36+
}
37+
38+
@media (max-width: 768px) {
39+
.newspaper-columns {
40+
column-count: 2;
41+
}
42+
}
43+
44+
@media (max-width: 480px) {
45+
.newspaper-columns {
46+
column-count: 1;
47+
}
48+
}
49+
</style>
750
</head>
851
<body>
952
<header>
@@ -13,6 +56,7 @@ <h1>HTML QA Test Page</h1>
1356
<li><a href="#text">Text</a></li>
1457
<li><a href="#lists-tables">Lists & Tables</a></li>
1558
<li><a href="#media">Media</a></li>
59+
<li><a href="#multi-column">Multi-Column</a></li>
1660
<li><a href="#code">Code</a></li>
1761
<li><a href="#form">Forms</a></li>
1862
</ul>
@@ -22,7 +66,7 @@ <h1>HTML QA Test Page</h1>
2266
<section id="text">
2367
<h2>Text Elements</h2>
2468
<p>This is a <strong>paragraph</strong> with <em>emphasis</em>, <u>underline</u>, and <code>inline code</code>.</p>
25-
<blockquote>“This is a blockquote for testing.”</blockquote>
69+
<blockquote>"This is a blockquote for testing."</blockquote>
2670
<hr/>
2771
</section>
2872

@@ -56,33 +100,77 @@ <h3>Table</h3>
56100
<hr/>
57101
</section>
58102

59-
60-
61103
<section id="media">
62104
<h2>Images</h2>
63-
64-
<img
65-
src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=400"
66-
alt="Person coding on laptop"
67-
width="300"
68-
/>
69-
<br/><br/>
70-
71-
<img
72-
src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400"
73-
alt="Office desk with computer"
74-
width="300"
75-
/>
76-
<br/><br/>
77-
78-
<img
79-
src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400"
80-
alt="Coffee and notebook"
81-
width="300"
82-
/>
105+
106+
<div class="column-container">
107+
<div class="column">
108+
<img
109+
src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=400"
110+
alt="Person coding on laptop"
111+
style="width: 100%; height: auto; border-radius: 5px;"
112+
/>
113+
<p style="margin-top: 10px; font-size: 14px; color: #666;">Person coding on laptop</p>
114+
</div>
115+
116+
<div class="column">
117+
<img
118+
src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400"
119+
alt="Office desk with computer"
120+
style="width: 100%; height: auto; border-radius: 5px;"
121+
/>
122+
<p style="margin-top: 10px; font-size: 14px; color: #666;">Office desk with computer</p>
123+
</div>
124+
125+
<div class="column">
126+
<img
127+
src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400"
128+
alt="Coffee and notebook"
129+
style="width: 100%; height: auto; border-radius: 5px;"
130+
/>
131+
<p style="margin-top: 10px; font-size: 14px; color: #666;">Coffee and notebook</p>
132+
</div>
133+
</div>
134+
<hr/>
135+
</section>
136+
137+
<!-- New Multi-Column Section -->
138+
<section id="multi-column">
139+
<h2>Multi-Column Content</h2>
140+
141+
<h3>Flexbox Columns</h3>
142+
<div class="multi-column-section">
143+
<div class="column-container">
144+
<div class="column">
145+
<h4>Column 1: Web Development</h4>
146+
<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>
147+
</div>
148+
<div class="column">
149+
<h4>Column 2: UI Design</h4>
150+
<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>
151+
</div>
152+
<div class="column">
153+
<h4>Column 3: UX Research</h4>
154+
<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>
155+
</div>
156+
</div>
157+
</div>
158+
159+
<h3>CSS Multi-Column Layout</h3>
160+
<div class="newspaper-columns">
161+
<h4>The Evolution of Web Technologies</h4>
162+
<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>
163+
164+
<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>
165+
166+
<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>
167+
168+
<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>
169+
170+
<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>
171+
</div>
83172
<hr/>
84173
</section>
85-
86174

87175
<section id="code">
88176
<h2>Code Blocks</h2>
@@ -148,4 +236,4 @@ <h2>Form Elements</h2>
148236
<p>© 2025 HTML QA Page</p>
149237
</footer>
150238
</body>
151-
</html>
239+
</html>

‎typescript/src/dev/index.tsx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,28 @@
1-
import React from "react";
1+
import React, { useEffect, useState } from "react";
22
import ReactDOM from "react-dom/client";
33
import { JsonDocRenderer } from "../renderer/JsonDocRenderer";
4-
import testPage from "./testJsonDocs/test_document.json";
4+
// import testPage from "./testJsonDocs/test_document.json";
5+
import testPage from "./testJsonDocs/test_document_2.json";
6+
7+
import { loadSchema, validateAgainstSchema } from "../validation/validator";
58

69
const App = () => {
10+
async function main() {
11+
const schema = await loadSchema("./testJsonDocs/test_document_2.json");
12+
13+
try {
14+
const isValid = validateAgainstSchema(testPage, schema);
15+
console.log("isvlaid: ", isValid);
16+
console.log("schema: ", schema);
17+
} catch (error) {
18+
console.log("error validating schema: ", error);
19+
}
20+
}
21+
22+
useEffect(() => {
23+
main();
24+
}, []);
25+
726
return (
827
<div style={{ padding: "20px", maxWidth: "800px", margin: "0 auto" }}>
928
<h1>JSON-DOC Renderer Development</h1>

0 commit comments

Comments
 (0)