Websites
/
lektor-website
mirror of https://github.com/lektor/lektor-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Synchronized build

This commit is contained in:
Lektor Bot 2022-04-25 03:01:01 +00:00
parent a34a0b55d6
commit dc5f12b7a1
6 changed files with 122 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/api/templates/filters/tojson/index.html
View File

@ -195,8 +195,8 @@ supported by JSON directly and the return value will be in a format that
allows safe embedding in HTML. However if you want to use this value in an allows safe embedding in HTML. However if you want to use this value in an
attribute of an element it needs to use single quotes otherwise it will attribute of an element it needs to use single quotes otherwise it will
generate a syntax error due to the embedded quotes.</p> generate a syntax error due to the embedded quotes.</p>
<h2 id="examples">Examples</h2><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span> <h2 id="examples">Examples</h2><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span><span class="w"></span>
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="cp">{{</span> <span class="o">{</span><span class="s1">&#39;foo&#39;</span><span class="o">:</span> <span class="s1">&#39;bar&#39;</span><span class="o">}|</span><span class="nf">tojson</span> <span class="cp">}}</span><span class="p">;</span> <span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">options</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="cp">{{</span> <span class="o">{</span><span class="s1">&#39;foo&#39;</span><span class="o">:</span> <span class="s1">&#39;bar&#39;</span><span class="o">}|</span><span class="nf">tojson</span> <span class="cp">}}</span><span class="p">;</span><span class="w"></span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</pre></div> </pre></div>
<p>If used in attributes, single quotes are required:</p> <p>If used in attributes, single quotes are required:</p>

82
docs/guides/webpack/index.html
View File

@ -232,48 +232,48 @@ installed for as long as someone else ran it before.</p>
<li>all built files will go to <code>assets/static/gen</code></li> <li>all built files will go to <code>assets/static/gen</code></li>
<li>there will be a <code>gen/app.js</code> and a <code>gen/styles.css</code> file to include</li> <li>there will be a <code>gen/app.js</code> and a <code>gen/styles.css</code> file to include</li>
</ul> </ul>
<div class="highlight"><pre><span></span><span class="kd">var</span> <span class="nx">webpack</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;webpack&#39;</span><span class="p">);</span> <div class="highlight"><pre><span></span><span class="kd">var</span><span class="w"> </span><span class="nx">webpack</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s1">&#39;webpack&#39;</span><span class="p">);</span><span class="w"></span>
<span class="kd">var</span> <span class="nx">path</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;path&#39;</span><span class="p">);</span> <span class="kd">var</span><span class="w"> </span><span class="nx">path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s1">&#39;path&#39;</span><span class="p">);</span><span class="w"></span>
<span class="kd">var</span> <span class="nx">ExtractTextPlugin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;extract-text-webpack-plugin&#39;</span><span class="p">);</span> <span class="kd">var</span><span class="w"> </span><span class="nx">ExtractTextPlugin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s1">&#39;extract-text-webpack-plugin&#39;</span><span class="p">);</span><span class="w"></span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">entry</span><span class="o">:</span> <span class="p">{</span> <span class="w"> </span><span class="nx">entry</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="s1">&#39;app&#39;</span><span class="o">:</span> <span class="s1">&#39;./js/main.js&#39;</span><span class="p">,</span> <span class="w"> </span><span class="s1">&#39;app&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;./js/main.js&#39;</span><span class="p">,</span><span class="w"></span>
<span class="s1">&#39;styles&#39;</span><span class="o">:</span> <span class="s1">&#39;./scss/main.scss&#39;</span> <span class="w"> </span><span class="s1">&#39;styles&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;./scss/main.scss&#39;</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="nx">output</span><span class="o">:</span> <span class="p">{</span> <span class="w"> </span><span class="nx">output</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">path</span><span class="o">:</span> <span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;/assets/static/gen&#39;</span><span class="p">,</span> <span class="w"> </span><span class="nx">path</span><span class="o">:</span><span class="w"> </span><span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">)</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">&#39;/assets/static/gen&#39;</span><span class="p">,</span><span class="w"></span>
<span class="nx">filename</span><span class="o">:</span> <span class="s1">&#39;[name].js&#39;</span> <span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;[name].js&#39;</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="nx">devtool</span><span class="o">:</span> <span class="s1">&#39;#cheap-module-source-map&#39;</span><span class="p">,</span> <span class="w"> </span><span class="nx">devtool</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;#cheap-module-source-map&#39;</span><span class="p">,</span><span class="w"></span>
<span class="nx">resolve</span><span class="o">:</span> <span class="p">{</span> <span class="w"> </span><span class="nx">resolve</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;node_modules&#39;</span><span class="p">],</span> <span class="w"> </span><span class="nx">modules</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;node_modules&#39;</span><span class="p">],</span><span class="w"></span>
<span class="nx">extensions</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;.js&#39;</span><span class="p">]</span> <span class="w"> </span><span class="nx">extensions</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;.js&#39;</span><span class="p">]</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="nx">module</span><span class="o">:</span> <span class="p">{</span> <span class="w"> </span><span class="nx">module</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">rules</span><span class="o">:</span> <span class="p">[</span> <span class="w"> </span><span class="nx">rules</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
<span class="p">{</span> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.js$/</span><span class="p">,</span> <span class="nx">exclude</span><span class="o">:</span> <span class="sr">/node_modules/</span><span class="p">,</span> <span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.js$/</span><span class="p">,</span><span class="w"> </span><span class="nx">exclude</span><span class="o">:</span><span class="w"> </span><span class="sr">/node_modules/</span><span class="p">,</span><span class="w"></span>
<span class="nx">loader</span><span class="o">:</span> <span class="s1">&#39;babel-loader&#39;</span> <span class="p">},</span> <span class="w"> </span><span class="nx">loader</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;babel-loader&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="p">{</span> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.scss$/</span><span class="p">,</span> <span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.scss$/</span><span class="p">,</span><span class="w"></span>
<span class="nx">loader</span><span class="o">:</span> <span class="nx">ExtractTextPlugin</span><span class="p">.</span><span class="nx">extract</span><span class="p">({</span> <span class="w"> </span><span class="nx">loader</span><span class="o">:</span><span class="w"> </span><span class="nx">ExtractTextPlugin</span><span class="p">.</span><span class="nx">extract</span><span class="p">({</span><span class="w"></span>
<span class="nx">fallback</span><span class="o">:</span> <span class="s1">&#39;style-loader&#39;</span><span class="p">,</span> <span class="w"> </span><span class="nx">fallback</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;style-loader&#39;</span><span class="p">,</span><span class="w"></span>
<span class="nx">use</span><span class="o">:</span> <span class="s1">&#39;css-loader!sass-loader&#39;</span> <span class="p">}</span> <span class="p">)</span> <span class="p">},</span> <span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;css-loader!sass-loader&#39;</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="p">{</span> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.css$/</span><span class="p">,</span> <span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.css$/</span><span class="p">,</span><span class="w"></span>
<span class="nx">loader</span><span class="o">:</span> <span class="nx">ExtractTextPlugin</span><span class="p">.</span><span class="nx">extract</span><span class="p">({</span> <span class="w"> </span><span class="nx">loader</span><span class="o">:</span><span class="w"> </span><span class="nx">ExtractTextPlugin</span><span class="p">.</span><span class="nx">extract</span><span class="p">({</span><span class="w"></span>
<span class="nx">fallback</span><span class="o">:</span> <span class="s1">&#39;style-loader&#39;</span><span class="p">,</span> <span class="w"> </span><span class="nx">fallback</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;style-loader&#39;</span><span class="p">,</span><span class="w"></span>
<span class="nx">use</span><span class="o">:</span> <span class="s1">&#39;css-loader&#39;</span> <span class="p">}</span> <span class="p">)</span> <span class="p">},</span> <span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;css-loader&#39;</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="p">{</span> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.(woff2?|ttf|eot|svg|png|jpe?g|gif)$/</span><span class="p">,</span> <span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.(woff2?|ttf|eot|svg|png|jpe?g|gif)$/</span><span class="p">,</span><span class="w"></span>
<span class="nx">loader</span><span class="o">:</span> <span class="s1">&#39;file&#39;</span> <span class="p">}</span> <span class="w"> </span><span class="nx">loader</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;file&#39;</span><span class="w"> </span><span class="p">}</span><span class="w"></span>
<span class="p">]</span> <span class="w"> </span><span class="p">]</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span> <span class="w"> </span><span class="nx">plugins</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
<span class="ow">new</span> <span class="nx">ExtractTextPlugin</span><span class="p">({</span> <span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">ExtractTextPlugin</span><span class="p">({</span><span class="w"></span>
<span class="nx">filename</span><span class="o">:</span> <span class="s1">&#39;styles.css&#39;</span><span class="p">,</span> <span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;styles.css&#39;</span><span class="p">,</span><span class="w"></span>
<span class="nx">allChunks</span><span class="o">:</span> <span class="kc">true</span> <span class="w"> </span><span class="nx">allChunks</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="w"></span>
<span class="p">}),</span> <span class="w"> </span><span class="p">}),</span><span class="w"></span>
<span class="ow">new</span> <span class="nx">webpack</span><span class="p">.</span><span class="nx">optimize</span><span class="p">.</span><span class="nx">UglifyJsPlugin</span><span class="p">()</span> <span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">webpack</span><span class="p">.</span><span class="nx">optimize</span><span class="p">.</span><span class="nx">UglifyJsPlugin</span><span class="p">()</span><span class="w"></span>
<span class="p">]</span> <span class="w"> </span><span class="p">]</span><span class="w"></span>
<span class="p">};</span> <span class="p">};</span><span class="w"></span>
</pre></div> </pre></div>
<h2 id="creating-the-app">Creating the App</h2><p>Now we can start building our app. We configured at least two files <h2 id="creating-the-app">Creating the App</h2><p>Now we can start building our app. We configured at least two files
in webpack: <code>js/main.js</code> and <code>scss/main.scss</code>. Those are the entry in webpack: <code>js/main.js</code> and <code>scss/main.scss</code>. Those are the entry

6
index.html
View File

@ -151,7 +151,7 @@ speak multiple languages and allow you to easily create localized websites.</li>
<div class="slideshow-wrapper"> <div class="slideshow-wrapper">
<div class="slideshow"> <div class="slideshow">
<div class="slideshow-inner"> <div class="slideshow-inner">
<div class="carousel slide" data-ride="carousel" data-interval="8500" id="carousel-9bb3620d3ccb48e99944981e3c93e4cf"> <div class="carousel slide" data-ride="carousel" data-interval="8500" id="carousel-08425d57c51e493b95bc5d72a2ce243e">
<div class="carousel-inner" role="listbox"> <div class="carousel-inner" role="listbox">
@ -210,11 +210,11 @@ be completely customized.</p>
</div> </div>
</div> </div>
<a class="left carousel-control" href="#carousel-9bb3620d3ccb48e99944981e3c93e4cf" role="button" data-slide="prev"> <a class="left carousel-control" href="#carousel-08425d57c51e493b95bc5d72a2ce243e" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-9bb3620d3ccb48e99944981e3c93e4cf" role="button" data-slide="next"> <a class="right carousel-control" href="#carousel-08425d57c51e493b95bc5d72a2ce243e" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>

2
plugins/lektor-npm-support/index.html
View File

@ -206,7 +206,7 @@ $ yarn add parcel-bundler babel-preset-env node-sass
</pre> </pre>
<h3><code>parcel/main.js</code></h3> <h3><code>parcel/main.js</code></h3>
<p>A simple Javascript file that imports the SCSS file so that Parcel will know to include it as well.</p> <p>A simple Javascript file that imports the SCSS file so that Parcel will know to include it as well.</p>
<pre><span class="k">import</span> <span class="s1">&#39;./main.scss&#39;</span><span class="p">;</span> <pre><span class="k">import</span><span class="w"> </span><span class="s1">&#39;./main.scss&#39;</span><span class="p">;</span><span class="w"></span>
</pre> </pre>
<h2>Running the Server</h2> <h2>Running the Server</h2>
<p>Now you're ready to go. When you run <code>lektor server</code> nothing wil happen, <p>Now you're ready to go. When you run <code>lektor server</code> nothing wil happen,

78
plugins/lektor-webpack-html-helper/index.html
View File

@ -138,47 +138,47 @@
These files will then be copied over to Lektors templates folder so that they can be used by Lektor. These files will then be copied over to Lektors templates folder so that they can be used by Lektor.
This plugin depends on the <a href="https://github.com/lektor/lektor-webpack-support" rel="nofollow">lektor-webpack-support</a> plugin to be really useful.</p> This plugin depends on the <a href="https://github.com/lektor/lektor-webpack-support" rel="nofollow">lektor-webpack-support</a> plugin to be really useful.</p>
<h1>webpack/webpack.config.js</h1> <h1>webpack/webpack.config.js</h1>
<pre><span class="kd">const</span> <span class="nx">path</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&quot;path&quot;</span><span class="p">);</span> <pre><span class="kd">const</span><span class="w"> </span><span class="nx">path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;path&quot;</span><span class="p">);</span><span class="w"></span>
<span class="kd">const</span> <span class="nx">MiniCssExtractPlugin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&quot;mini-css-extract-plugin&quot;</span><span class="p">);</span> <span class="kd">const</span><span class="w"> </span><span class="nx">MiniCssExtractPlugin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;mini-css-extract-plugin&quot;</span><span class="p">);</span><span class="w"></span>
<span class="kd">const</span> <span class="nx">HtmlWebpackPlugin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&quot;html-webpack-plugin&quot;</span><span class="p">);</span> <span class="kd">const</span><span class="w"> </span><span class="nx">HtmlWebpackPlugin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;html-webpack-plugin&quot;</span><span class="p">);</span><span class="w"></span>
<span class="kd">const</span> <span class="p">{</span> <span class="nx">CleanWebpackPlugin</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&quot;clean-webpack-plugin&quot;</span><span class="p">);</span> <span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">CleanWebpackPlugin</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;clean-webpack-plugin&quot;</span><span class="p">);</span><span class="w"></span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">mode</span><span class="o">:</span> <span class="s2">&quot;production&quot;</span><span class="p">,</span> <span class="w"> </span><span class="nx">mode</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;production&quot;</span><span class="p">,</span><span class="w"></span>
<span class="nx">entry</span><span class="o">:</span> <span class="p">{</span> <span class="w"> </span><span class="nx">entry</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">main</span><span class="o">:</span> <span class="s2">&quot;./src/index.js&quot;</span> <span class="w"> </span><span class="nx">main</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;./src/index.js&quot;</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="nx">output</span><span class="o">:</span> <span class="p">{</span> <span class="w"> </span><span class="nx">output</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">filename</span><span class="o">:</span> <span class="s2">&quot;[name].bundle.js&quot;</span><span class="p">,</span> <span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;[name].bundle.js&quot;</span><span class="p">,</span><span class="w"></span>
<span class="nx">path</span><span class="o">:</span> <span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;/assets/generated&quot;</span> <span class="w"> </span><span class="nx">path</span><span class="o">:</span><span class="w"> </span><span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">)</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">&quot;/assets/generated&quot;</span><span class="w"> </span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="nx">optimization</span><span class="o">:</span> <span class="p">{</span> <span class="w"> </span><span class="nx">optimization</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">minimizer</span><span class="o">:</span> <span class="p">[</span> <span class="w"> </span><span class="nx">minimizer</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
<span class="ow">new</span> <span class="nx">HtmlWebpackPlugin</span><span class="p">({</span> <span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">HtmlWebpackPlugin</span><span class="p">({</span><span class="w"></span>
<span class="nx">inject</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="w"> </span><span class="nx">inject</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span><span class="w"></span>
<span class="nx">filename</span><span class="o">:</span> <span class="s2">&quot;layout_generated.html&quot;</span><span class="p">,</span> <span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;layout_generated.html&quot;</span><span class="p">,</span><span class="w"></span>
<span class="nx">template</span><span class="o">:</span> <span class="s2">&quot;./src/layout_template.html&quot;</span> <span class="w"> </span><span class="nx">template</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;./src/layout_template.html&quot;</span><span class="w"></span>
<span class="p">})</span> <span class="w"> </span><span class="p">})</span><span class="w"></span>
<span class="p">],</span> <span class="w"> </span><span class="p">],</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span> <span class="w"> </span><span class="nx">plugins</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
<span class="ow">new</span> <span class="nx">CleanWebpackPlugin</span><span class="p">(),</span> <span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">CleanWebpackPlugin</span><span class="p">(),</span><span class="w"></span>
<span class="ow">new</span> <span class="nx">MiniCssExtractPlugin</span><span class="p">({</span> <span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">MiniCssExtractPlugin</span><span class="p">({</span><span class="w"></span>
<span class="nx">filename</span><span class="o">:</span> <span class="s2">&quot;[name].css&quot;</span> <span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;[name].css&quot;</span><span class="w"></span>
<span class="p">})</span> <span class="w"> </span><span class="p">})</span><span class="w"></span>
<span class="p">],</span> <span class="w"> </span><span class="p">],</span><span class="w"></span>
<span class="nx">module</span><span class="o">:</span> <span class="p">{</span> <span class="w"> </span><span class="nx">module</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">rules</span><span class="o">:</span> <span class="p">[{</span> <span class="w"> </span><span class="nx">rules</span><span class="o">:</span><span class="w"> </span><span class="p">[{</span><span class="w"></span>
<span class="nx">test</span><span class="o">:</span> <span class="sr">/\.scss$/</span><span class="p">,</span> <span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.scss$/</span><span class="p">,</span><span class="w"></span>
<span class="nx">use</span><span class="o">:</span> <span class="p">[</span> <span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
<span class="nx">MiniCssExtractPlugin</span><span class="p">.</span><span class="nx">loader</span><span class="p">,</span> <span class="w"> </span><span class="nx">MiniCssExtractPlugin</span><span class="p">.</span><span class="nx">loader</span><span class="p">,</span><span class="w"></span>
<span class="s2">&quot;css-loader&quot;</span><span class="p">,</span> <span class="w"> </span><span class="s2">&quot;css-loader&quot;</span><span class="p">,</span><span class="w"></span>
<span class="s2">&quot;sass-loader&quot;</span> <span class="w"> </span><span class="s2">&quot;sass-loader&quot;</span><span class="w"></span>
<span class="p">]</span> <span class="w"> </span><span class="p">]</span><span class="w"></span>
<span class="p">}]</span> <span class="w"> </span><span class="p">}]</span><span class="w"></span>
<span class="p">}</span> <span class="w"> </span><span class="p">}</span><span class="w"></span>
<span class="p">}</span> <span class="p">}</span><span class="w"></span>
</pre> </pre>
<h1>webpack/src/layout_template.html</h1> <h1>webpack/src/layout_template.html</h1>
<pre><span class="cp">&lt;!DOCTYPE html&gt;</span> <pre><span class="cp">&lt;!DOCTYPE html&gt;</span>

72
plugins/lektor-webpack-support/index.html
View File

@ -182,43 +182,43 @@ setup that's good enough to cover most things you will encounter. The
idea is to build the files from <code>webpack/scss</code> and <code>webpack/js</code> into idea is to build the files from <code>webpack/scss</code> and <code>webpack/js</code> into
<code>assets/static/gen</code> so that we can use it even if we do not have webpack <code>assets/static/gen</code> so that we can use it even if we do not have webpack
installed for as long as someone else ran it before.</p> installed for as long as someone else ran it before.</p>
<pre><span class="kd">const</span> <span class="nx">path</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&quot;path&quot;</span><span class="p">);</span> <pre><span class="kd">const</span><span class="w"> </span><span class="nx">path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;path&quot;</span><span class="p">);</span><span class="w"></span>
<span class="kd">const</span> <span class="nx">MiniCssExtractPlugin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&quot;mini-css-extract-plugin&quot;</span><span class="p">);</span> <span class="kd">const</span><span class="w"> </span><span class="nx">MiniCssExtractPlugin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;mini-css-extract-plugin&quot;</span><span class="p">);</span><span class="w"></span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">entry</span><span class="o">:</span> <span class="p">{</span> <span class="w"> </span><span class="nx">entry</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">app</span><span class="o">:</span> <span class="s2">&quot;./js/main.js&quot;</span><span class="p">,</span> <span class="w"> </span><span class="nx">app</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;./js/main.js&quot;</span><span class="p">,</span><span class="w"></span>
<span class="nx">styles</span><span class="o">:</span> <span class="s2">&quot;./scss/main.scss&quot;</span><span class="p">,</span> <span class="w"> </span><span class="nx">styles</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;./scss/main.scss&quot;</span><span class="p">,</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="nx">output</span><span class="o">:</span> <span class="p">{</span> <span class="w"> </span><span class="nx">output</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">path</span><span class="o">:</span> <span class="nx">path</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">),</span> <span class="s2">&quot;assets&quot;</span><span class="p">,</span> <span class="s2">&quot;static&quot;</span><span class="p">,</span> <span class="s2">&quot;gen&quot;</span><span class="p">),</span> <span class="w"> </span><span class="nx">path</span><span class="o">:</span><span class="w"> </span><span class="nx">path</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">),</span><span class="w"> </span><span class="s2">&quot;assets&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;static&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;gen&quot;</span><span class="p">),</span><span class="w"></span>
<span class="nx">filename</span><span class="o">:</span> <span class="s2">&quot;[name].js&quot;</span><span class="p">,</span> <span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;[name].js&quot;</span><span class="p">,</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="nx">devtool</span><span class="o">:</span> <span class="s2">&quot;source-map&quot;</span><span class="p">,</span> <span class="w"> </span><span class="nx">devtool</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;source-map&quot;</span><span class="p">,</span><span class="w"></span>
<span class="nx">mode</span><span class="o">:</span> <span class="s2">&quot;production&quot;</span><span class="p">,</span> <span class="w"> </span><span class="nx">mode</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;production&quot;</span><span class="p">,</span><span class="w"></span>
<span class="nx">module</span><span class="o">:</span> <span class="p">{</span> <span class="w"> </span><span class="nx">module</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">rules</span><span class="o">:</span> <span class="p">[</span> <span class="w"> </span><span class="nx">rules</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
<span class="p">{</span> <span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">test</span><span class="o">:</span> <span class="sr">/\.js$/</span><span class="p">,</span> <span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.js$/</span><span class="p">,</span><span class="w"></span>
<span class="nx">exclude</span><span class="o">:</span> <span class="sr">/node_modules/</span><span class="p">,</span> <span class="w"> </span><span class="nx">exclude</span><span class="o">:</span><span class="w"> </span><span class="sr">/node_modules/</span><span class="p">,</span><span class="w"></span>
<span class="nx">use</span><span class="o">:</span> <span class="p">[</span><span class="s2">&quot;babel-loader&quot;</span><span class="p">],</span> <span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;babel-loader&quot;</span><span class="p">],</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="p">{</span> <span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">test</span><span class="o">:</span> <span class="sr">/\.scss$/</span><span class="p">,</span> <span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.scss$/</span><span class="p">,</span><span class="w"></span>
<span class="nx">use</span><span class="o">:</span> <span class="p">[</span><span class="nx">MiniCssExtractPlugin</span><span class="p">.</span><span class="nx">loader</span><span class="p">,</span> <span class="s2">&quot;css-loader&quot;</span><span class="p">,</span> <span class="s2">&quot;sass-loader&quot;</span><span class="p">],</span> <span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">MiniCssExtractPlugin</span><span class="p">.</span><span class="nx">loader</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;css-loader&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;sass-loader&quot;</span><span class="p">],</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="p">{</span> <span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">test</span><span class="o">:</span> <span class="sr">/\.css$/</span><span class="p">,</span> <span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.css$/</span><span class="p">,</span><span class="w"></span>
<span class="nx">use</span><span class="o">:</span> <span class="p">[</span><span class="nx">MiniCssExtractPlugin</span><span class="p">.</span><span class="nx">loader</span><span class="p">,</span> <span class="s2">&quot;css-loader&quot;</span><span class="p">],</span> <span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">MiniCssExtractPlugin</span><span class="p">.</span><span class="nx">loader</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;css-loader&quot;</span><span class="p">],</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="p">{</span> <span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="nx">test</span><span class="o">:</span> <span class="sr">/\.(woff2?|ttf|eot|svg|png|jpe?g|gif)$/</span><span class="p">,</span> <span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.(woff2?|ttf|eot|svg|png|jpe?g|gif)$/</span><span class="p">,</span><span class="w"></span>
<span class="nx">use</span><span class="o">:</span> <span class="p">[</span><span class="s2">&quot;file&quot;</span><span class="p">],</span> <span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;file&quot;</span><span class="p">],</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="p">],</span> <span class="w"> </span><span class="p">],</span><span class="w"></span>
<span class="p">},</span> <span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span><span class="ow">new</span> <span class="nx">MiniCssExtractPlugin</span><span class="p">({</span> <span class="nx">filename</span><span class="o">:</span> <span class="s2">&quot;styles.css&quot;</span> <span class="p">})],</span> <span class="w"> </span><span class="nx">plugins</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="ow">new</span><span class="w"> </span><span class="nx">MiniCssExtractPlugin</span><span class="p">({</span><span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;styles.css&quot;</span><span class="w"> </span><span class="p">})],</span><span class="w"></span>
<span class="p">};</span> <span class="p">};</span><span class="w"></span>
</pre> </pre>
<h2>Creating the App</h2> <h2>Creating the App</h2>
<p>Now we can start building our app. We configured at least two files <p>Now we can start building our app. We configured at least two files