Skip to content

Commit ee83cfd

Browse files
keithamuskeithamus
authored
Merge pull request #71 from WebComponentsGuide/codemirror
codemirror
2 parents d2c5556 + 1b9291d commit ee83cfd

File tree

11 files changed

+2063
-10548
lines changed

11 files changed

+2063
-10548
lines changed

‎.eleventy.js‎

Lines changed: 63 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,83 @@ const headers = require("markdown-it-github-headings")
44
const js = require("@jamshop/eleventy-plugin-esbuild")
55
const glob = require("glob")
66
const path = require("node:path")
7-
const highlight = require("@11ty/eleventy-plugin-syntaxhighlight")
7+
const fs = require("node:fs/promises")
88
const rss = require("@11ty/eleventy-plugin-rss")
99
const dedent = require("dedent")
10+
const { build } = require("esbuild")
11+
12+
const buildJS = (config = {}) => {
13+
return build({
14+
minify: process.NODE_ENV === "development" ? false : true,
15+
bundle: true,
16+
splitting: true,
17+
write: true,
18+
format: "esm",
19+
metafile: true,
20+
outdir: "_site/script",
21+
plugins: [
22+
{
23+
name: "css",
24+
setup: (plugin) => {
25+
plugin.onResolve({ filter: /^.*\.css$/ }, ({ path, importer, resolveDir, kind }) => {
26+
return {
27+
path,
28+
namespace: "css",
29+
pluginData: { importer, resolveDir, kind },
30+
}
31+
})
32+
plugin.onLoad({ filter: /^.*\.css$/, namespace: "css" }, async (ctx) => {
33+
const { default: stringToTemplateLiteral } = await import("string-to-template-literal")
34+
let contents = await fs.readFile(path.resolve(ctx.pluginData.resolveDir, ctx.path), "utf8")
35+
36+
contents = `const c = new CSSStyleSheet(); c.replaceSync(${stringToTemplateLiteral(
37+
contents
38+
)}); export default c;`
39+
40+
return { contents, resolveDir: ctx.pluginData.resolveDir }
41+
})
42+
},
43+
},
44+
],
45+
...config,
46+
})
47+
}
1048

1149
module.exports = (eleventyConfig) => {
1250
eleventyConfig.addPlugin(rss)
1351
eleventyConfig.addPlugin(css)
14-
eleventyConfig.addPlugin(js, {
15-
entryPoints: Object.fromEntries(glob.sync("script/*.[tj]s").map((e) => [path.basename(e, path.extname(e)), e])),
16-
output: "_site/script",
52+
53+
const entryPoints = glob.sync("script/*.[tj]s")
54+
eleventyConfig.addWatchTarget("script/*.[tj]s")
55+
56+
buildJS({ entryPoints })
57+
58+
eleventyConfig.on("beforeWatch", (changedFiles) => {
59+
// Run me before --watch or --serve re-runs
60+
if (changedFiles.some((watchPath) => watchPath.endsWith(".css") || entryPoints.includes(watchPath))) {
61+
buildJS({ entryPoints })
62+
}
1763
})
18-
eleventyConfig.addPlugin(highlight)
1964

2065
eleventyConfig.addFilter("iso8601", rss.dateToRfc3339)
2166
eleventyConfig.addFilter("date_to_rfc3339", rss.dateToRfc3339)
2267
eleventyConfig.addFilter("date_to_rfc822", rss.dateToRfc822)
2368
eleventyConfig.addFilter("html_to_absolute_urls", rss.convertHtmlToAbsoluteUrls)
2469
eleventyConfig.addFilter("domain", (str) => new URL(str).hostname)
2570

26-
eleventyConfig.setLibrary(
27-
"md",
28-
markdown({
29-
html: true,
30-
linkify: true,
31-
})
32-
.use(headers, { prefixHeadingIds: false })
33-
.disable("code")
34-
)
71+
const md = markdown({
72+
html: true,
73+
linkify: true,
74+
highlight: (str, lang) => {
75+
return `<pre class="code-interactive"><code-interactive lang="${lang}">${md.utils.escapeHtml(
76+
str
77+
)}</code-interactive></pre>`
78+
},
79+
})
80+
.use(headers, { prefixHeadingIds: false })
81+
.disable("code")
82+
83+
eleventyConfig.setLibrary("md", md)
3584

3685
eleventyConfig.addPassthroughCopy("images")
3786
eleventyConfig.addPassthroughCopy("browserconfig.xml")

‎_includes/main.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,12 @@
3535
<link rel="stylesheet" href="/css/{{file}}" />
3636
{% endfor %}
3737
<link href="/feed.xml" rel="alternate" type="application/atom+xml" title="Web Components Guide Blog" />
38+
39+
<script type="module" defer src="/script/polyfills.js"></script>
40+
<script type="module" defer src="/script/custom-element-loader.js"></script>
41+
{% for file in script %}
42+
<script type="module" defer src="/script/{{ file }}"></script>
43+
{% endfor %}
3844
</head>
3945
<body>
4046
{% include 'header.html' %} {% include 'navigation.html' %}
@@ -49,10 +55,5 @@
4955
</ol>
5056
</nav>
5157
</footer>
52-
53-
<script type="module" src="/script/polyfills.js"></script>
54-
{% for file in script %}
55-
<script type="module" src="/script/{{ file }}"></script>
56-
{% endfor %}
5758
</body>
5859
</html>

‎css/code-interactive.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
:host {
2+
background-color: var(--surface-2);
3+
display: block;
4+
border-radius: var(--radius-2);
5+
overflow-x: auto;
6+
color: var(--text-2);
7+
8+
--token-tag: var(--indigo-6);
9+
--token-attr-name: var(--pink-6);
10+
--token-attr-equals: var(--gray-6);
11+
--token-attr-value: var(--cyan-7);
12+
--token-selector: var(--indigo-6);
13+
--token-property: var(--pink-6);
14+
--token-punctuation: var(--gray-6);
15+
--token-keyword: var(--orange-6);
16+
--token-class-name: var(--indigo-6);
17+
--token-number: var(--green-6);
18+
--token-comment: var(--teal-6);
19+
--token-function: var(--pink-6);
20+
--token-variable: var(--text-2);
21+
--token-string: var(--cyan-6);
22+
--token-template-string: var(--cyan-6);
23+
--token-interpolation: var(--gray-6);
24+
}
25+
26+
/* Dark syntax highlighting */
27+
@media (prefers-color-scheme: dark) {
28+
:host {
29+
color: var(--cyan-6);
30+
31+
--token-punctuation: var(--indigo-2);
32+
--token-tag: var(--indigo-4);
33+
--token-attr-name: var(--pink-6);
34+
--token-attr-equals: var(--indigo-2);
35+
--token-attr-value: var(--cyan-6);
36+
--token-selector: var(--indigo-4);
37+
--token-property: var(--pink-6);
38+
}
39+
}
40+
41+
/* stylelint-disable selector-class-pattern */
42+
.ͼ1 .cm-scroller {
43+
font-family: var(--font-mono);
44+
padding: var(--size-3);
45+
}
46+
47+
.ͼb {
48+
color: var(--token-keyword);
49+
}
50+
51+
.ͼd {
52+
color: var(--token-number);
53+
}
54+
55+
.ͼe {
56+
color: var(--token-string);
57+
}
58+
59+
.ͼf {
60+
color: var(--token-template-string);
61+
}
62+
63+
.ͼg {
64+
color: var(--token-variable);
65+
}
66+
67+
.ͼj {
68+
color: var(--token-class-name);
69+
}
70+
71+
.ͼl {
72+
color: var(--token-function);
73+
}
74+
75+
.ͼm {
76+
color: var(--token-comment);
77+
}
78+
79+
.ͼ2 .cm-activeLine {
80+
background-color: unset;
81+
}
82+
83+
/* stylelint-enable selector-class-pattern */

‎css/global.css‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -346,15 +346,6 @@ page-search {
346346
}
347347
}
348348

349-
pre[class^="language-"] {
350-
background: var(--surface-2);
351-
border-radius: var(--radius-2);
352-
max-inline-size: 100ch;
353-
padding: var(--size-3);
354-
margin-block: var(--size-5);
355-
overflow-x: auto;
356-
}
357-
358349
.surface {
359350
box-shadow: var(--shadow-4);
360351
border-radius: var(--radius-3);
@@ -467,3 +458,8 @@ pre[class^="language-"] {
467458
.token.attr-equals {
468459
color: var(--token-attr-equals);
469460
}
461+
462+
.code-interactive {
463+
max-inline-size: 100ch;
464+
margin-block: var(--size-5);
465+
}

‎learn/components/naming-your-components.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
title: Naming your components
33
order: 3
4-
script: ["tag-name-input.js"]
54
---
65

76
_Custom Element tag names_ must have at least one dash (`-`) in them. As such you probably want to name your element

0 commit comments

Comments
 (0)