Skip to content

Initial working commit for CommonMark Demo #345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
rijulshrestha wants to merge 1 commit into
base: main
Choose a base branch
from
+1,024 −0
Draft

Initial working commit for CommonMark Demo #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added sites/labs/public/CommonMark-Demo/CommonMark/commonmark-0.27.1.jar
View file
Open in desktop
Binary file not shown.
189 changes: 189 additions & 0 deletions sites/labs/public/CommonMark-Demo/Template/preview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
:root {
color-scheme: light;

/* Layout */
--pad: 18px;
--max: 920px;

/* Typography */
--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
--mono:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;

/* Colors */
--fg: #0b1220;
--muted: #475569;
--bg: #ffffff;
--link: #2563eb;

--surface: #f7f9fc;
--border: #e6eaf2;

/* Radius */
--r-sm: 8px;
--r-md: 12px;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

html,
body {
height: 100%;
}

body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Keep the preview readable on wide screens */
body > * {
max-width: var(--max);
margin-left: auto;
margin-right: auto;
}

body {
padding: var(--pad);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.2;
margin: 1.05em 0 0.4em;
letter-spacing: -0.01em;
}

h1 {
font-size: 1.65em;
}
h2 {
font-size: 1.35em;
}
h3 {
font-size: 1.15em;
}

p {
margin: 0.65em 0;
}

small {
color: var(--muted);
}

a {
color: var(--link);
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* Lists */
ul,
ol {
margin: 0.65em 0;
padding-left: 1.25em;
}

li {
margin: 0.25em 0;
}

li > p {
margin: 0.35em 0;
}

/* Code */
code,
pre,
kbd {
font-family: var(--mono);
font-size: 0.95em;
}

code {
background: var(--surface);
border: 1px solid var(--border);
padding: 0.12em 0.38em;
border-radius: var(--r-sm);
}

pre {
background: var(--surface);
border: 1px solid var(--border);
padding: 12px 14px;
border-radius: var(--r-md);
overflow: auto;
line-height: 1.45;
}

/* Ensure code blocks don't double-style */
pre code {
background: transparent;
border: none;
padding: 0;
border-radius: 0;
}

/* Quotes */
blockquote {
margin: 0.9em 0;
padding: 0.35em 0 0.35em 14px;
border-left: 3px solid #d3dcf3;
color: var(--muted);
}

/* Tables */
table {
border-collapse: collapse;
margin: 0.9em 0;
width: 100%;
}

th,
td {
border: 1px solid var(--border);
padding: 7px 10px;
vertical-align: top;
}

th {
background: #f1f5ff;
text-align: left;
}

/* Images and rules */
img {
max-width: 100%;
height: auto;
border-radius: var(--r-md);
}

hr {
border: 0;
border-top: 1px solid var(--border);
margin: 18px 0;
}

/* Subtle selection */
::selection {
background: rgba(37, 99, 235, 0.18);
}
11 changes: 11 additions & 0 deletions sites/labs/public/CommonMark-Demo/Template/preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="color-scheme" content="light" />
<!--__CSS__-->
</head>
<body>
<!--__BODY__-->
</body>
</html>
152 changes: 152 additions & 0 deletions sites/labs/public/CommonMark-Demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<title>CommonMark – Library Mode</title>
<script src="https://cjrtnc.leaningtech.com/4.2/loader.js"></script>
<link rel="stylesheet" href="./style.css" />
</head>

<body>
<div class="app">
<header class="appbar">
<div class="brand">
<div class="brand-text">
<div class="brand-title">CommonMark</div>
<div class="brand-subtitle">Java-powered Markdown rendering</div>
</div>
</div>

<div class="appbar-spacer"></div>

<div class="toolbar" role="toolbar" aria-label="CommonMark actions">
<label class="toggle">
<input id="live-toggle" type="checkbox" checked />
<span class="toggle-ui" aria-hidden="true"></span>
<span class="toggle-label">Live</span>
</label>

<button id="btn-render" class="btn btn-primary" type="button">
Render
</button>

<button id="btn-reset" class="btn" type="button">Reset</button>

<button id="btn-help" class="btn btn-ghost" type="button">
About
</button>
</div>
</header>

<div class="workspace" id="workspace">
<section class="panel panel-editor" aria-label="Markdown editor">
<header class="panel-header">
<div class="panel-title">Editor</div>
</header>

<div class="editor-wrap">
<textarea
id="md-input"
spellcheck="false"
autocomplete="off"
autocapitalize="off"
placeholder="Write Markdown here…"
></textarea>
</div>
</section>

<section class="panel panel-preview" aria-label="HTML preview">
<header class="panel-header">
<div class="panel-title">Preview</div>
</header>

<iframe id="preview" title="Rendered HTML preview"></iframe>
</section>

<aside class="side" id="side" aria-label="Explanation panel">
<div class="side-head">
<div class="side-title">Info</div>
<button
id="btn-close-side"
class="icon-btn"
type="button"
aria-label="Close info panel"
>
✕
</button>
</div>

<div class="side-body">
<details open class="accordion">
<summary>What this is</summary>
<p>
CommonMark JAR has been used with CheerpJ library mode to build
a browser-based Markdown editor. Java is used as a computation
engine to parse Markdown and render HTML, while JavaScript
handles the UI.
</p>
</details>

<details open class="accordion">
<summary>How it works</summary>
On each edit, JS passes Markdown text to CommonMark, receives
rendered HTML, and injects it into the page.
<ol class="steps">
<li>JS captures Markdown text from the editor</li>
<li>Java (CommonMark) parses + renders HTML in-browser</li>
<li>JS injects HTML into the preview</li>
</ol>
</details>

<details class="accordion">
<summary>Runtime details</summary>
<div class="kv">
<div class="k">Library</div>
<div class="v">commonmark-0.27.1.jar</div>
<div class="k">Mode</div>
<div class="v">cheerpjRunLibrary()</div>
<div class="k">Java</div>
<div class="v">17</div>
</div>
</details>

<div class="side-footer">
<a
class="link"
href="https://github.com/commonmark/commonmark-java"
target="_blank"
rel="noreferrer"
>
Source (CommonMark)
</a>
<a
class="link"
href="https://cheerpj.com/docs/guides/library-mode"
target="_blank"
rel="noreferrer"
>
CheerpJ Library Mode
</a>
</div>
</div>
</aside>
</div>

<footer class="statusbar" aria-label="Status">
<div class="status-left">
<span class="dot" id="dot"></span>
<span id="status-label">Initializing…</span>
</div>
<div class="status-right" id="status-right">
CommonMark via CheerpJ using Java 17
</div>
</footer>
</div>

<script src="./main.js"></script>
</body>
</html>
Loading