Skip to content

Commit f0409cd

Browse files
rijulshrestharijulshrestha
committed
Initial working commit for CommonMark Demo
1 parent 0490379 commit f0409cd

File tree

6 files changed

+1024
-0
lines changed

6 files changed

+1024
-0
lines changed

‎sites/labs/public/CommonMark-Demo/CommonMark/commonmark-0.27.1.jar‎

213 KB
Binary file not shown.

‎sites/labs/public/CommonMark-Demo/Template/preview.css‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
:root {
2+
color-scheme: light;
3+
4+
/* Layout */
5+
--pad: 18px;
6+
--max: 920px;
7+
8+
/* Typography */
9+
--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
10+
--mono:
11+
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
12+
"Courier New", monospace;
13+
14+
/* Colors */
15+
--fg: #0b1220;
16+
--muted: #475569;
17+
--bg: #ffffff;
18+
--link: #2563eb;
19+
20+
--surface: #f7f9fc;
21+
--border: #e6eaf2;
22+
23+
/* Radius */
24+
--r-sm: 8px;
25+
--r-md: 12px;
26+
}
27+
28+
*,
29+
*::before,
30+
*::after {
31+
box-sizing: border-box;
32+
}
33+
34+
html,
35+
body {
36+
height: 100%;
37+
}
38+
39+
body {
40+
margin: 0;
41+
background: var(--bg);
42+
color: var(--fg);
43+
font-family: var(--font);
44+
line-height: 1.6;
45+
-webkit-font-smoothing: antialiased;
46+
-moz-osx-font-smoothing: grayscale;
47+
}
48+
49+
/* Keep the preview readable on wide screens */
50+
body > * {
51+
max-width: var(--max);
52+
margin-left: auto;
53+
margin-right: auto;
54+
}
55+
56+
body {
57+
padding: var(--pad);
58+
}
59+
60+
/* Typography */
61+
h1,
62+
h2,
63+
h3,
64+
h4,
65+
h5,
66+
h6 {
67+
line-height: 1.2;
68+
margin: 1.05em 0 0.4em;
69+
letter-spacing: -0.01em;
70+
}
71+
72+
h1 {
73+
font-size: 1.65em;
74+
}
75+
h2 {
76+
font-size: 1.35em;
77+
}
78+
h3 {
79+
font-size: 1.15em;
80+
}
81+
82+
p {
83+
margin: 0.65em 0;
84+
}
85+
86+
small {
87+
color: var(--muted);
88+
}
89+
90+
a {
91+
color: var(--link);
92+
text-decoration: none;
93+
}
94+
95+
a:hover {
96+
text-decoration: underline;
97+
}
98+
99+
/* Lists */
100+
ul,
101+
ol {
102+
margin: 0.65em 0;
103+
padding-left: 1.25em;
104+
}
105+
106+
li {
107+
margin: 0.25em 0;
108+
}
109+
110+
li > p {
111+
margin: 0.35em 0;
112+
}
113+
114+
/* Code */
115+
code,
116+
pre,
117+
kbd {
118+
font-family: var(--mono);
119+
font-size: 0.95em;
120+
}
121+
122+
code {
123+
background: var(--surface);
124+
border: 1px solid var(--border);
125+
padding: 0.12em 0.38em;
126+
border-radius: var(--r-sm);
127+
}
128+
129+
pre {
130+
background: var(--surface);
131+
border: 1px solid var(--border);
132+
padding: 12px 14px;
133+
border-radius: var(--r-md);
134+
overflow: auto;
135+
line-height: 1.45;
136+
}
137+
138+
/* Ensure code blocks don't double-style */
139+
pre code {
140+
background: transparent;
141+
border: none;
142+
padding: 0;
143+
border-radius: 0;
144+
}
145+
146+
/* Quotes */
147+
blockquote {
148+
margin: 0.9em 0;
149+
padding: 0.35em 0 0.35em 14px;
150+
border-left: 3px solid #d3dcf3;
151+
color: var(--muted);
152+
}
153+
154+
/* Tables */
155+
table {
156+
border-collapse: collapse;
157+
margin: 0.9em 0;
158+
width: 100%;
159+
}
160+
161+
th,
162+
td {
163+
border: 1px solid var(--border);
164+
padding: 7px 10px;
165+
vertical-align: top;
166+
}
167+
168+
th {
169+
background: #f1f5ff;
170+
text-align: left;
171+
}
172+
173+
/* Images and rules */
174+
img {
175+
max-width: 100%;
176+
height: auto;
177+
border-radius: var(--r-md);
178+
}
179+
180+
hr {
181+
border: 0;
182+
border-top: 1px solid var(--border);
183+
margin: 18px 0;
184+
}
185+
186+
/* Subtle selection */
187+
::selection {
188+
background: rgba(37, 99, 235, 0.18);
189+
}

‎sites/labs/public/CommonMark-Demo/Template/preview.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="color-scheme" content="light" />
6+
<!--__CSS__-->
7+
</head>
8+
<body>
9+
<!--__BODY__-->
10+
</body>
11+
</html>

‎sites/labs/public/CommonMark-Demo/index.html‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, viewport-fit=cover"
8+
/>
9+
<title>CommonMark – Library Mode</title>
10+
<script src="https://cjrtnc.leaningtech.com/4.2/loader.js"></script>
11+
<link rel="stylesheet" href="./style.css" />
12+
</head>
13+
14+
<body>
15+
<div class="app">
16+
<header class="appbar">
17+
<div class="brand">
18+
<div class="brand-text">
19+
<div class="brand-title">CommonMark</div>
20+
<div class="brand-subtitle">Java-powered Markdown rendering</div>
21+
</div>
22+
</div>
23+
24+
<div class="appbar-spacer"></div>
25+
26+
<div class="toolbar" role="toolbar" aria-label="CommonMark actions">
27+
<label class="toggle">
28+
<input id="live-toggle" type="checkbox" checked />
29+
<span class="toggle-ui" aria-hidden="true"></span>
30+
<span class="toggle-label">Live</span>
31+
</label>
32+
33+
<button id="btn-render" class="btn btn-primary" type="button">
34+
Render
35+
</button>
36+
37+
<button id="btn-reset" class="btn" type="button">Reset</button>
38+
39+
<button id="btn-help" class="btn btn-ghost" type="button">
40+
About
41+
</button>
42+
</div>
43+
</header>
44+
45+
<div class="workspace" id="workspace">
46+
<section class="panel panel-editor" aria-label="Markdown editor">
47+
<header class="panel-header">
48+
<div class="panel-title">Editor</div>
49+
</header>
50+
51+
<div class="editor-wrap">
52+
<textarea
53+
id="md-input"
54+
spellcheck="false"
55+
autocomplete="off"
56+
autocapitalize="off"
57+
placeholder="Write Markdown here…"
58+
></textarea>
59+
</div>
60+
</section>
61+
62+
<section class="panel panel-preview" aria-label="HTML preview">
63+
<header class="panel-header">
64+
<div class="panel-title">Preview</div>
65+
</header>
66+
67+
<iframe id="preview" title="Rendered HTML preview"></iframe>
68+
</section>
69+
70+
<aside class="side" id="side" aria-label="Explanation panel">
71+
<div class="side-head">
72+
<div class="side-title">Info</div>
73+
<button
74+
id="btn-close-side"
75+
class="icon-btn"
76+
type="button"
77+
aria-label="Close info panel"
78+
>
79+
✕
80+
</button>
81+
</div>
82+
83+
<div class="side-body">
84+
<details open class="accordion">
85+
<summary>What this is</summary>
86+
<p>
87+
CommonMark JAR has been used with CheerpJ library mode to build
88+
a browser-based Markdown editor. Java is used as a computation
89+
engine to parse Markdown and render HTML, while JavaScript
90+
handles the UI.
91+
</p>
92+
</details>
93+
94+
<details open class="accordion">
95+
<summary>How it works</summary>
96+
On each edit, JS passes Markdown text to CommonMark, receives
97+
rendered HTML, and injects it into the page.
98+
<ol class="steps">
99+
<li>JS captures Markdown text from the editor</li>
100+
<li>Java (CommonMark) parses + renders HTML in-browser</li>
101+
<li>JS injects HTML into the preview</li>
102+
</ol>
103+
</details>
104+
105+
<details class="accordion">
106+
<summary>Runtime details</summary>
107+
<div class="kv">
108+
<div class="k">Library</div>
109+
<div class="v">commonmark-0.27.1.jar</div>
110+
<div class="k">Mode</div>
111+
<div class="v">cheerpjRunLibrary()</div>
112+
<div class="k">Java</div>
113+
<div class="v">17</div>
114+
</div>
115+
</details>
116+
117+
<div class="side-footer">
118+
<a
119+
class="link"
120+
href="https://github.com/commonmark/commonmark-java"
121+
target="_blank"
122+
rel="noreferrer"
123+
>
124+
Source (CommonMark)
125+
</a>
126+
<a
127+
class="link"
128+
href="https://cheerpj.com/docs/guides/library-mode"
129+
target="_blank"
130+
rel="noreferrer"
131+
>
132+
CheerpJ Library Mode
133+
</a>
134+
</div>
135+
</div>
136+
</aside>
137+
</div>
138+
139+
<footer class="statusbar" aria-label="Status">
140+
<div class="status-left">
141+
<span class="dot" id="dot"></span>
142+
<span id="status-label">Initializing…</span>
143+
</div>
144+
<div class="status-right" id="status-right">
145+
CommonMark via CheerpJ using Java 17
146+
</div>
147+
</footer>
148+
</div>
149+
150+
<script src="./main.js"></script>
151+
</body>
152+
</html>

0 commit comments

Comments
 (0)