Skip to content

Commit d736654

Browse files
webdiscuswebdiscus
committed
test: add test case for including many md files in Eta template
1 parent b79feaf commit d736654

File tree

12 files changed

+1533
-52
lines changed

12 files changed

+1533
-52
lines changed

‎package-lock.json‎

Lines changed: 1055 additions & 52 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@
197197
"pug": "^3.0.3",
198198
"react": "18.3.1",
199199
"react-dom": "18.3.1",
200+
"remark-loader": "^6.0.0",
200201
"responsive-loader": "^3.1.2",
201202
"rtlcss": "^4.3.0",
202203
"sass": "1.89.2",

‎test/cases/_preprocessor/eta-include-md-many-files/expected/img/plumber.6c89dfc3.webp‎

6.54 KB
Loading

‎test/cases/_preprocessor/eta-include-md-many-files/expected/index.html‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Demo</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<!-- Load PrismJS styles of Highlighting from CDN, see https://cdnjs.com/libraries/prism -->
7+
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css" rel="stylesheet" />
8+
<!-- Load GitHub styles of Markdown from CDN, see https://cdnjs.com/libraries/github-markdown-css -->
9+
<link href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css" rel="stylesheet" />
10+
<!-- Load your custom styles. -->
11+
<link href="style.css" rel="stylesheet" />
12+
</head>
13+
<body class="markdown-body">
14+
<i style="color: green;">Markdown file code.md</i>
15+
<h1>Highlighting code blocks</h1>
16+
<p>Highlight <code>Ruby</code> code:</p>
17+
<pre class="language-"><code>```ruby
18+
require 'redcarpet'
19+
markdown = Redcarpet.new("Hello World!")
20+
puts markdown.to_html
21+
```
22+
</code></pre>
23+
<p>This will display the code block with syntax highlighting:</p>
24+
<pre class="language-ruby"><code><span class="token keyword">require</span> <span class="token string-literal"><span class="token string">'redcarpet'</span></span>
25+
markdown <span class="token operator">=</span> <span class="token class-name">Redcarpet</span><span class="token punctuation">.</span><span class="token keyword">new</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Hello World!"</span></span><span class="token punctuation">)</span>
26+
puts markdown<span class="token punctuation">.</span>to_html
27+
</code></pre>
28+
29+
<i style="color: green;">Markdown file demo.md</i>
30+
<h1>Markdown demo</h1>
31+
<h1>h1 Heading</h1>
32+
<h2>h2 Heading</h2>
33+
<h3>h3 Heading</h3>
34+
<h4>h4 Heading</h4>
35+
<h5>h5 Heading</h5>
36+
<h6>h6 Heading</h6>
37+
<h2>Horizontal Rule</h2>
38+
<hr>
39+
<pre class="language-"><code>---
40+
</code></pre>
41+
<h2>Emphasis</h2>
42+
<p><strong>This is bold text</strong></p>
43+
<pre class="language-"><code>**This is bold text**
44+
</code></pre>
45+
<p><em>This is italic text</em></p>
46+
<pre class="language-"><code>_This is italic text_
47+
</code></pre>
48+
<p><s>Strikethrough</s></p>
49+
<pre class="language-"><code>~~Strikethrough~~
50+
</code></pre>
51+
<h2>Blockquotes</h2>
52+
<blockquote>
53+
<p>Blockquotes can also be nested...</p>
54+
<blockquote>
55+
<p>...by using additional greater-than signs right next to each other...</p>
56+
<blockquote>
57+
<p>...or with spaces between arrows.</p>
58+
</blockquote>
59+
</blockquote>
60+
</blockquote>
61+
<h2>GitHub Alerts</h2>
62+
<p>Alerts are a Markdown extension based on the blockquote syntax.</p>
63+
<p>Five types of alerts are available:</p>
64+
<pre class="language-"><code>> [!NOTE]
65+
> Useful information that users should know, even when skimming content.
66+
67+
> [!TIP]
68+
> Helpful advice for doing things better or more easily.
69+
70+
> [!IMPORTANT]
71+
> Key information users need to know to achieve their goal.
72+
73+
> [!WARNING]
74+
> Urgent info that needs immediate user attention to avoid problems.
75+
76+
> [!CAUTION]
77+
> Advises about risks or negative outcomes of certain actions.
78+
</code></pre>
79+
<p>Here are the rendered alerts:</p>
80+
<blockquote class="markdown-alert markdown-alert-note"><p class="markdown-alert-title"><svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon mr-2" aria-hidden=""><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg> Note</p><p>
81+
Useful information that users should know, even when skimming content.</p>
82+
</blockquote>
83+
<blockquote class="markdown-alert markdown-alert-tip"><p class="markdown-alert-title"><svg class="octicon octicon-light-bulb mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg> Tip</p><p>
84+
Helpful advice for doing things better or more easily.</p>
85+
</blockquote>
86+
<blockquote class="markdown-alert markdown-alert-important"><p class="markdown-alert-title"><svg class="octicon octicon-report mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg> Important</p><p>
87+
Key information users need to know to achieve their goal.</p>
88+
</blockquote>
89+
<blockquote class="markdown-alert markdown-alert-warning"><p class="markdown-alert-title"><svg class="octicon octicon-alert mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg> Warning</p><p>
90+
Urgent info that needs immediate user attention to avoid problems.</p>
91+
</blockquote>
92+
<blockquote class="markdown-alert markdown-alert-caution"><p class="markdown-alert-title"><svg class="octicon octicon-stop mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg> Caution</p><p>
93+
Advises about risks or negative outcomes of certain actions.</p>
94+
</blockquote>
95+
<h2>Lists</h2>
96+
<p>Unordered</p>
97+
<ul>
98+
<li>Create a list by starting a line with <code>+</code>, <code>-</code>, or <code>*</code></li>
99+
<li>Sub-lists are made by indenting 2 spaces:
100+
<ul>
101+
<li>Marker character change forces new list start:
102+
<ul>
103+
<li>Ac tristique libero volutpat at</li>
104+
</ul>
105+
<ul>
106+
<li>Facilisis in pretium nisl aliquet</li>
107+
</ul>
108+
<ul>
109+
<li>Nulla volutpat aliquam velit</li>
110+
</ul>
111+
</li>
112+
</ul>
113+
</li>
114+
<li>Very easy!</li>
115+
</ul>
116+
<p>Ordered</p>
117+
<ol>
118+
<li>Lorem ipsum dolor sit amet</li>
119+
<li>Consectetur adipiscing elit</li>
120+
<li>Integer molestie lorem at massa</li>
121+
</ol>
122+
<p>Start numbering with offset:</p>
123+
<ol start="57">
124+
<li>foo</li>
125+
<li>bar</li>
126+
</ol>
127+
<h2>Code</h2>
128+
<p>Inline <code>code</code></p>
129+
<p>Indented code</p>
130+
<pre><code>// Some comments
131+
line 1 of code
132+
line 2 of code
133+
line 3 of code
134+
</code></pre>
135+
<p>Block code &quot;fences&quot;</p>
136+
<pre class="language-"><code>Sample text here...
137+
</code></pre>
138+
<p>Syntax highlighting</p>
139+
<pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">bar</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
140+
<span class="token keyword">return</span> bar<span class="token operator">++</span><span class="token punctuation">;</span>
141+
<span class="token punctuation">}</span><span class="token punctuation">;</span>
142+
143+
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">foo</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
144+
</code></pre>
145+
<p>To display triple backticks in a fenced code block, wrap them inside quadruple backticks</p>
146+
<pre class="language-"><code>```
147+
Look! You can see my backticks.
148+
```
149+
</code></pre>
150+
<h2>Tables</h2>
151+
<table>
152+
<thead>
153+
<tr>
154+
<th style="text-align:left">Left-aligned</th>
155+
<th style="text-align:center">Center-aligned</th>
156+
<th style="text-align:right">Right-aligned</th>
157+
</tr>
158+
</thead>
159+
<tbody>
160+
<tr>
161+
<td style="text-align:left">git status</td>
162+
<td style="text-align:center">git status</td>
163+
<td style="text-align:right">git status</td>
164+
</tr>
165+
<tr>
166+
<td style="text-align:left">git diff</td>
167+
<td style="text-align:center">git diff</td>
168+
<td style="text-align:right">git diff</td>
169+
</tr>
170+
</tbody>
171+
</table>
172+
<h2>Links</h2>
173+
<p><a href="ttps://github.com/webdiscus" title="title text!">link with title</a></p>
174+
<pre class="language-md"><code><span class="token url">[<span class="token content">link with title</span>](<span class="token url">ttps://github.com/webdiscus</span> <span class="token string">"title text!"</span>)</span>
175+
</code></pre>
176+
<h2>Images</h2>
177+
<p>External image URL</p>
178+
<pre class="language-md"><code><span class="token url"><span class="token operator">!</span>[<span class="token content">Octocat</span>](<span class="token url">https://octodex.github.com/images/original.png</span> <span class="token string">"The Octocat original"</span>)</span>
179+
</code></pre>
180+
<p><img src="https://octodex.github.com/images/original.png" alt="Octocat" title="The Octocat original"></p>
181+
<p>Local image path using Webpack alias</p>
182+
<pre class="language-md"><code><span class="token url"><span class="token operator">!</span>[<span class="token content">Image</span>](<span class="token url">@images/octocats/plumber.webp</span> <span class="token string">"The plumber"</span>)</span>
183+
</code></pre>
184+
<p><img src="img/plumber.6c89dfc3.webp" alt="Image" title="The plumber"></p>
185+
<div>-= FOOTER =-</div></body>
186+
</html>

‎test/cases/_preprocessor/eta-include-md-many-files/expected/style.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* The container styles of your rendered Markdown */
2+
3+
.markdown-body {
4+
box-sizing: border-box;
5+
min-width: 200px;
6+
max-width: 980px;
7+
margin: 0 auto;
8+
padding: 45px;
9+
}
10+
11+
@media (max-width: 767px) {
12+
.markdown-body {
13+
padding: 15px;
14+
}
15+
}
16+
17+
/* GitHub Alerts */

‎test/cases/_preprocessor/eta-include-md-many-files/src/footer.eta‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div><%= footerText %></div>

‎test/cases/_preprocessor/eta-include-md-many-files/src/index.eta‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Demo</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<!-- Load PrismJS styles of Highlighting from CDN, see https://cdnjs.com/libraries/prism -->
7+
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css" rel="stylesheet" />
8+
<!-- Load GitHub styles of Markdown from CDN, see https://cdnjs.com/libraries/github-markdown-css -->
9+
<link href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css" rel="stylesheet" />
10+
<!-- Load your custom styles. -->
11+
<link href="./style.css" rel="stylesheet" />
12+
</head>
13+
<body class="markdown-body">
14+
<i style="color: green;">Markdown file code.md</i>
15+
<%~ include('/src/markdown/code.md'); %>
16+
17+
<i style="color: green;">Markdown file demo.md</i>
18+
<%~ include('/src/markdown/demo.md'); %>
19+
<%~ include('/src/footer.eta', {footerText: '-= FOOTER =-'}); %>
20+
</body>
21+
</html>

‎test/cases/_preprocessor/eta-include-md-many-files/src/markdown/code.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Highlighting code blocks
2+
3+
Highlight `Ruby` code:
4+
````
5+
```ruby
6+
require 'redcarpet'
7+
markdown = Redcarpet.new("Hello World!")
8+
puts markdown.to_html
9+
```
10+
````
11+
12+
This will display the code block with syntax highlighting:
13+
```ruby
14+
require 'redcarpet'
15+
markdown = Redcarpet.new("Hello World!")
16+
puts markdown.to_html
17+
```

0 commit comments

Comments
 (0)