Skip to content

Commit 1aff960

Browse files
jogibear9988jogibear9988
committed
add doc and playground
1 parent 4ece237 commit 1aff960

4 files changed

Lines changed: 756 additions & 8 deletions

File tree

‎.github/workflows/pages.yml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: Deploy GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
paths:
8+
- 'docs/**'
9+
workflow_dispatch:
10+
11+
permissions:
12+
contents: read
13+
pages: write
14+
id-token: write
15+
16+
# Allow only one concurrent deployment
17+
concurrency:
18+
group: pages
19+
cancel-in-progress: true
20+
21+
jobs:
22+
deploy:
23+
name: Deploy to GitHub Pages
24+
runs-on: ubuntu-latest
25+
environment:
26+
name: github-pages
27+
url: ${{ steps.deployment.outputs.page_url }}
28+
29+
steps:
30+
- name: Checkout repository
31+
uses: actions/checkout@v4
32+
33+
- name: Setup Pages
34+
uses: actions/configure-pages@v5
35+
36+
- name: Upload docs/ as Pages artifact
37+
uses: actions/upload-pages-artifact@v3
38+
with:
39+
path: docs
40+
41+
- name: Deploy to GitHub Pages
42+
id: deployment
43+
uses: actions/deploy-pages@v4

‎README.md‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,21 @@ This package provides a true ESM (EcmaScript Module) build of the [Monaco Editor
2020
```js
2121
import * as monaco from '@node-projects/monaco-editor-esm/esm/vs/editor/editor.main.js';
2222
```
23-
3. Make sure to load the required CSS from `/min`:
24-
```js
25-
import editorStyle from '@node-projects/monaco-editor-esm/min/vs/editor/editor.main.css' with { type : 'css' };
26-
shadowRoot.adoptedStyleSheets.push(editorStyle);
27-
// or
28-
document.adoptedStyleSheets.push(editorStyle);
29-
```
30-
Or include it in your HTML:
23+
3. Always include the CSS via a `<link>` tag in your **main HTML file** (`index.html`):
3124
```html
3225
<link rel="stylesheet" href="node_modules/@node-projects/monaco-editor-esm/min/vs/editor/editor.main.css">
3326
```
27+
> **Important:** The CSS **must** be loaded through a `<link>` element in the top-level document.
28+
> Monaco's CSS contains `@font-face` declarations (for Codicon icons), and `@font-face` rules inside
29+
> `adoptedStyleSheets` or Shadow DOM stylesheets are [ignored by browsers](https://github.com/WICG/construct-stylesheets/issues/119).
30+
> If you skip the `<link>`, editor icons will not render correctly.
31+
32+
If you are building a Web Component and still want to adopt the stylesheet for scoped styles, keep the
33+
`<link>` in the host document **and** optionally adopt for the shadow root:
34+
```js
35+
import editorStyle from '@node-projects/monaco-editor-esm/min/vs/editor/editor.main.css' with { type: 'css' };
36+
shadowRoot.adoptedStyleSheets.push(editorStyle);
37+
```
3438

3539
### CSS Import Caveats
3640
- The ESM modules may contain `import './file.css'` statements, which are not yet supported natively in browsers or Node.js. Most bundlers can handle these imports with the appropriate loader/plugin.

‎docs/index.html‎

Lines changed: 307 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>@node-projects/monaco-editor-esm</title>
7+
<style>
8+
:root {
9+
--bg: #0d1117;
10+
--surface: #161b22;
11+
--border: #30363d;
12+
--accent: #58a6ff;
13+
--accent2: #3fb950;
14+
--text: #c9d1d9;
15+
--muted: #8b949e;
16+
--code-bg: #1f2428;
17+
}
18+
* { box-sizing: border-box; margin: 0; padding: 0; }
19+
body {
20+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
21+
background: var(--bg);
22+
color: var(--text);
23+
line-height: 1.6;
24+
}
25+
26+
/* NAV */
27+
nav {
28+
background: var(--surface);
29+
border-bottom: 1px solid var(--border);
30+
padding: 0 2rem;
31+
display: flex;
32+
align-items: center;
33+
gap: 1.5rem;
34+
height: 60px;
35+
}
36+
nav .logo {
37+
font-weight: 700;
38+
font-size: 1rem;
39+
color: var(--text);
40+
text-decoration: none;
41+
}
42+
nav .logo span { color: var(--accent); }
43+
nav a {
44+
color: var(--muted);
45+
text-decoration: none;
46+
font-size: 0.9rem;
47+
transition: color .15s;
48+
}
49+
nav a:hover { color: var(--text); }
50+
nav .spacer { flex: 1; }
51+
nav .badge {
52+
background: var(--code-bg);
53+
border: 1px solid var(--border);
54+
border-radius: 6px;
55+
padding: 4px 10px;
56+
font-size: 0.8rem;
57+
color: var(--accent2);
58+
font-family: monospace;
59+
}
60+
61+
/* HERO */
62+
.hero {
63+
text-align: center;
64+
padding: 5rem 2rem 4rem;
65+
max-width: 860px;
66+
margin: 0 auto;
67+
}
68+
.hero h1 {
69+
font-size: clamp(2rem, 5vw, 3.2rem);
70+
font-weight: 800;
71+
line-height: 1.2;
72+
margin-bottom: 1rem;
73+
}
74+
.hero h1 .hl { color: var(--accent); }
75+
.hero p {
76+
font-size: 1.15rem;
77+
color: var(--muted);
78+
max-width: 600px;
79+
margin: 0 auto 2rem;
80+
}
81+
.btn-row {
82+
display: flex;
83+
gap: 1rem;
84+
justify-content: center;
85+
flex-wrap: wrap;
86+
}
87+
.btn {
88+
display: inline-flex;
89+
align-items: center;
90+
gap: .5rem;
91+
padding: .7rem 1.5rem;
92+
border-radius: 8px;
93+
font-size: .95rem;
94+
font-weight: 600;
95+
text-decoration: none;
96+
transition: opacity .15s, transform .1s;
97+
}
98+
.btn:hover { opacity: .85; transform: translateY(-1px); }
99+
.btn-primary { background: var(--accent); color: #0d1117; }
100+
.btn-secondary {
101+
background: transparent;
102+
border: 1px solid var(--border);
103+
color: var(--text);
104+
}
105+
106+
/* FEATURES */
107+
.section {
108+
max-width: 1000px;
109+
margin: 0 auto;
110+
padding: 3rem 2rem;
111+
}
112+
.section h2 {
113+
font-size: 1.6rem;
114+
margin-bottom: 1.5rem;
115+
border-bottom: 1px solid var(--border);
116+
padding-bottom: .75rem;
117+
}
118+
.features {
119+
display: grid;
120+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
121+
gap: 1.25rem;
122+
}
123+
.card {
124+
background: var(--surface);
125+
border: 1px solid var(--border);
126+
border-radius: 10px;
127+
padding: 1.4rem;
128+
}
129+
.card h3 { font-size: 1rem; margin-bottom: .45rem; }
130+
.card p { font-size: .9rem; color: var(--muted); }
131+
.card .icon { font-size: 1.5rem; margin-bottom: .6rem; }
132+
133+
/* INSTALL */
134+
.install-block {
135+
background: var(--code-bg);
136+
border: 1px solid var(--border);
137+
border-radius: 10px;
138+
padding: 1.5rem 1.75rem;
139+
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
140+
font-size: .95rem;
141+
position: relative;
142+
overflow-x: auto;
143+
}
144+
.install-block .comment { color: var(--muted); }
145+
.install-block .cmd { color: var(--accent2); }
146+
.install-block .import { color: var(--accent); }
147+
.install-block .str { color: #a5d6ff; }
148+
149+
/* USAGE STEPS */
150+
.steps { display: flex; flex-direction: column; gap: 1.5rem; }
151+
.step { display: flex; gap: 1rem; align-items: flex-start; }
152+
.step-num {
153+
flex-shrink: 0;
154+
width: 2rem; height: 2rem;
155+
background: var(--accent);
156+
color: #0d1117;
157+
border-radius: 50%;
158+
display: flex; align-items: center; justify-content: center;
159+
font-weight: 700; font-size: .9rem;
160+
}
161+
.step-body h3 { font-size: .95rem; margin-bottom: .3rem; }
162+
.step-body p { font-size: .88rem; color: var(--muted); }
163+
pre code {
164+
display: block;
165+
background: var(--code-bg);
166+
border: 1px solid var(--border);
167+
border-radius: 6px;
168+
padding: .7rem 1rem;
169+
font-size: .85rem;
170+
margin-top: .5rem;
171+
overflow-x: auto;
172+
color: var(--accent);
173+
font-family: "SFMono-Regular", Consolas, monospace;
174+
}
175+
176+
/* FOOTER */
177+
footer {
178+
border-top: 1px solid var(--border);
179+
text-align: center;
180+
padding: 2rem;
181+
color: var(--muted);
182+
font-size: .85rem;
183+
}
184+
footer a { color: var(--accent); text-decoration: none; }
185+
footer a:hover { text-decoration: underline; }
186+
</style>
187+
</head>
188+
<body>
189+
190+
<nav>
191+
<a class="logo" href="index.html">@node-projects/<span>monaco-editor-esm</span></a>
192+
<a href="playground.html">Playground</a>
193+
<a href="https://github.com/node-projects/monaco-editor-esm" target="_blank">GitHub</a>
194+
<a href="https://www.npmjs.com/package/@node-projects/monaco-editor-esm" target="_blank">npm</a>
195+
<span class="spacer"></span>
196+
<span class="badge">v0.55.x</span>
197+
</nav>
198+
199+
<section class="hero">
200+
<h1>Monaco Editor<br><span class="hl">True ESM Build</span></h1>
201+
<p>
202+
A native ES-module build of the Monaco Editor — no AMD, no CommonJS, no bundler magic required.
203+
Import directly in the browser or wire into any modern bundler.
204+
</p>
205+
<div class="btn-row">
206+
<a class="btn btn-primary" href="playground.html">▶ Open Playground</a>
207+
<a class="btn btn-secondary" href="https://github.com/node-projects/monaco-editor-esm" target="_blank">⭐ View on GitHub</a>
208+
<a class="btn btn-secondary" href="https://www.npmjs.com/package/@node-projects/monaco-editor-esm" target="_blank">📦 npm</a>
209+
</div>
210+
</section>
211+
212+
<section class="section">
213+
<h2>Why this package?</h2>
214+
<div class="features">
215+
<div class="card">
216+
<div class="icon">⚡</div>
217+
<h3>Native ESM</h3>
218+
<p>All modules are true <code>import</code>/<code>export</code> ES modules — no AMD loader, no <code>require()</code>.</p>
219+
</div>
220+
<div class="card">
221+
<div class="icon">🌐</div>
222+
<h3>Works in the Browser</h3>
223+
<p>Import directly from a CDN or <code>node_modules</code> with a bare <code>&lt;script type="module"&gt;</code>.</p>
224+
</div>
225+
<div class="card">
226+
<div class="icon">🔗</div>
227+
<h3>Bundler Friendly</h3>
228+
<p>Full compatibility with Vite, Rollup, Webpack, esbuild, and other modern build tools via standard ESM exports.</p>
229+
</div>
230+
<div class="card">
231+
<div class="icon">🎨</div>
232+
<h3>CSS Included</h3>
233+
<p>All required styles are in <code>/min</code>. Adopt them as a <code>CSSStyleSheet</code> or via a plain <code>&lt;link&gt;</code>.</p>
234+
</div>
235+
<div class="card">
236+
<div class="icon">🔄</div>
237+
<h3>Auto-updated</h3>
238+
<p>A GitHub Actions workflow tracks Monaco Editor releases and updates this package automatically.</p>
239+
</div>
240+
<div class="card">
241+
<div class="icon">🪶</div>
242+
<h3>Same API</h3>
243+
<p>100% Monaco Editor API — no wrapper, no abstraction. Switch from the official package with a one-line import change.</p>
244+
</div>
245+
</div>
246+
</section>
247+
248+
<section class="section">
249+
<h2>Quick Start</h2>
250+
<div class="steps">
251+
<div class="step">
252+
<div class="step-num">1</div>
253+
<div class="step-body">
254+
<h3>Install</h3>
255+
<pre><code>npm install @node-projects/monaco-editor-esm</code></pre>
256+
</div>
257+
</div>
258+
<div class="step">
259+
<div class="step-num">2</div>
260+
<div class="step-body">
261+
<h3>Import the editor</h3>
262+
<pre><code>import * as monaco from '@node-projects/monaco-editor-esm/esm/vs/editor/editor.main.js';</code></pre>
263+
</div>
264+
</div>
265+
<div class="step">
266+
<div class="step-num">3</div>
267+
<div class="step-body">
268+
<h3>Load the CSS in your HTML file</h3>
269+
<p>
270+
Always add this <code>&lt;link&gt;</code> to your top-level <strong>index.html</strong>.
271+
Monaco's CSS contains <code>@font-face</code> rules for the Codicon icon font —
272+
browsers ignore <code>@font-face</code> inside <code>adoptedStyleSheets</code> or
273+
Shadow DOM, so the link tag in the main document is required for icons to render.
274+
</p>
275+
<pre><code>&lt;link rel="stylesheet" href="node_modules/@node-projects/monaco-editor-esm/min/vs/editor/editor.main.css"&gt;</code></pre>
276+
<p style="margin-top:.5rem">
277+
If you are using a Web Component you may additionally adopt the sheet for scoped styles,
278+
but the top-level <code>&lt;link&gt;</code> must still be present:
279+
</p>
280+
<pre><code>import editorStyle from '@node-projects/monaco-editor-esm/min/vs/editor/editor.main.css' with { type: 'css' };
281+
shadowRoot.adoptedStyleSheets.push(editorStyle);</code></pre>
282+
</div>
283+
</div>
284+
<div class="step">
285+
<div class="step-num">4</div>
286+
<div class="step-body">
287+
<h3>Create an editor instance</h3>
288+
<pre><code>const editor = monaco.editor.create(document.getElementById('container'), {
289+
value: 'console.log("Hello, Monaco!");',
290+
language: 'javascript',
291+
theme: 'vs-dark',
292+
});</code></pre>
293+
</div>
294+
</div>
295+
</div>
296+
</section>
297+
298+
<footer>
299+
<p>
300+
Released under the <a href="https://github.com/node-projects/monaco-editor-esm/blob/main/LICENSE" target="_blank">MIT License</a> &middot;
301+
Built by <a href="https://github.com/node-projects" target="_blank">node-projects</a> &middot;
302+
Based on <a href="https://github.com/microsoft/monaco-editor" target="_blank">Monaco Editor by Microsoft</a>
303+
</p>
304+
</footer>
305+
306+
</body>
307+
</html>

0 commit comments

Comments
 (0)