mirror of
https://codeberg.org/vegvisir/website.git
synced 2025-09-13 16:33:42 +02:00
content(fix): replace the word 'compile' with 'bundle' and add new examples to features page (#11)
The word "compile" is not really what this thing is doing, so I replaced every "compile" reference to "bundle" instead. I also added an anchor tag example to the "navigate any element" snippet on the /features page. And I also copied the asset injection example from the /index page into the /features page. Reviewed-on: https://codeberg.org/vegvisir/website/pulls/11
This commit is contained in:
parent
23480e5b44
commit
cc3803d414
10 changed files with 27 additions and 8 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<main>
|
||||
<section>
|
||||
<h1>VV::include()</h1>
|
||||
<p>Inject the compiled output of another Vegvisir page (or other PHP script).</p>
|
||||
<p>Inject the bundled output of another Vegvisir page (or other PHP script).</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/include/description") ?>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</section>
|
||||
<section>
|
||||
<h3><code class="mtk6">string</code></h3>
|
||||
<p>Returns a script tag with the compiled and minified JavaScript required to run the Vegvisir front-end.</p>
|
||||
<p>Returns a script tag with the bundled and minified JavaScript required to run the Vegvisir front-end.</p>
|
||||
</section>
|
||||
<hr>
|
||||
<section>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<main>
|
||||
<section>
|
||||
<h1>VV::include()</h1>
|
||||
<p>Inject the compiled output of another Vegvisir page (or other PHP script).</p>
|
||||
<p>Inject the bundled output of another Vegvisir page (or other PHP script).</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.5/PHP/VV/include/description") ?>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</section>
|
||||
<section>
|
||||
<h3><code class="mtk6">string</code></h3>
|
||||
<p>Returns a script tag with the compiled and minified JavaScript required to run the Vegvisir front-end.</p>
|
||||
<p>Returns a script tag with the bundled and minified JavaScript required to run the Vegvisir front-end.</p>
|
||||
</section>
|
||||
<hr>
|
||||
<section>
|
||||
|
|
|
|||
|
|
@ -53,3 +53,22 @@
|
|||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=features/vv-include") ?>
|
||||
</div>
|
||||
</section>
|
||||
<section id="assets" class="split reverse">
|
||||
<div class="text">
|
||||
<h1>Asset injection</h1>
|
||||
<p>Bundle page-specific CSS and JavaScript with your templating markdown. Vegvisir will import and minify CSS and JavaScript on the fly. The bundled result is returned in a single response.</p>
|
||||
<div class="buttons">
|
||||
<a href="/docs"><button class="inline solid">
|
||||
<p>More info</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP/VV/css"><button class="inline">
|
||||
<p>Example reference</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=index_assets") ?>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<section id="assets" class="split reverse">
|
||||
<div class="text">
|
||||
<h1>Asset injection</h1>
|
||||
<p>Bundle page-specific CSS and JavaScript with your templating markdown. Vegvisir will import and minify CSS and JavaScript on the fly. The compiled result is returned in a single response.</p>
|
||||
<p>Bundle page-specific CSS and JavaScript with your templating markdown. Vegvisir will import and minify CSS and JavaScript on the fly. The bundled result is returned in a single response.</p>
|
||||
<div class="buttons">
|
||||
<a href="/docs"><button class="inline solid">
|
||||
<p>More info</p>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">vv-shell</span><span class="mtk14">></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5"><!-- The compiled HTML of 'some-page' will be serv</span><span class="mtk5">er-side rendered inside the <main> element --></span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">main</span><span class="mtk14">></span><span class="mtk6"><?=</span><span class="mtk3"> </span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">include</span><span class="mtk3">(</span><span class="mtk12">"public/some-page"</span><span class="mtk3">) </span><span class="mtk6">?</span><span class="mtk6">></span><span class="mtk14"></</span><span class="mtk6">main</span><span class="mtk14">></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk14"></</span><span class="mtk6">vv-shell</span><span class="mtk14">></span></span></div></div>
|
||||
<div><div style="top:0px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">vv-shell</span><span class="mtk14">></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5"><!-- The bundled HTML of 'some-page' will be serv</span><span class="mtk5">er-side rendered inside the <main> element --></span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">main</span><span class="mtk14">></span><span class="mtk6"><?=</span><span class="mtk3"> </span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">include</span><span class="mtk3">(</span><span class="mtk12">"public/some-page"</span><span class="mtk3">) </span><span class="mtk6">?</span><span class="mtk6">></span><span class="mtk14"></</span><span class="mtk6">main</span><span class="mtk14">></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk14"></</span><span class="mtk6">vv-shell</span><span class="mtk14">></span></span></div></div>
|
||||
|
|
@ -1 +1 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">vv-shell</span><span class="mtk14">></span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">main</span><span class="mtk14">></span><span class="mtk5"><!-- This comment will be replaced with the conten</span><span class="mtk5">ts of /some-page --></span><span class="mtk14"></</span><span class="mtk6">main</span><span class="mtk14">></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5"><!-- </span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk5"> The 'vv' attibute specifies a page and 'vv-targe</span><span class="mtk5">t' a CSS selector.</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk5"> If 'vv-target' is omitted, the innerHTML of the </span><span class="mtk5">element with 'vv' will be navigated. (the button i</span><span class="mtk5">tself)</span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk5"> --></span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">button</span><span class="mtk1"> </span><span class="mtk10">vv</span><span class="mtk1">=</span><span class="mtk12">"/some-page"</span><span class="mtk1"> </span><span class="mtk10">vv-target</span><span class="mtk1">=</span><span class="mtk12">"main"</span><span class="mtk14">></span><span class="mtk1">Load the contents of /some-page into the </span><span class="mtk14"><</span><span class="mtk6">main</span><span class="mtk14">></span><span class="mtk1"> tag</span><span class="mtk14"></</span><span class="mtk6">button</span><span class="mtk14">></span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk14"></</span><span class="mtk6">vv-shell</span><span class="mtk14">></span></span></div></div>
|
||||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">vv-shell</span><span class="mtk14">></span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">main</span><span class="mtk14">></span><span class="mtk5"><!-- This comment will be replaced with the conten</span><span class="mtk5">ts of /some-page --></span><span class="mtk14"></</span><span class="mtk6">main</span><span class="mtk14">></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5"><!-- </span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk5"> The 'vv' attibute specifies a page and 'vv</span><span class="mtk5">-target' a CSS selector.</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk5"> If 'vv-target' is omitted, the innerHTML o</span><span class="mtk5">f the element with 'vv' will be navigated. (the bu</span><span class="mtk5">tton itself)</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk5"> --></span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">button</span><span class="mtk1"> </span><span class="mtk10">vv</span><span class="mtk1">=</span><span class="mtk12">"/some-page"</span><span class="mtk1"> </span><span class="mtk10">vv-target</span><span class="mtk1">=</span><span class="mtk12">"main"</span><span class="mtk14">></span><span class="mtk1">Load the contents of /some-page into the </span><span class="mtk14"><</span><span class="mtk6">main</span><span class="mtk14">></span><span class="mtk1"> tag</span><span class="mtk14"></</span><span class="mtk6">button</span><span class="mtk14">></span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5"><!-- </span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk5"> The target attribute of an anchor tag will</span><span class="mtk5"> match a CSS selector </span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span class="mtk5"> if it doesn't match an iframe or a browsin</span><span class="mtk5">g context keyword.</span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk5"> --></span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">a</span><span class="mtk1"> </span><span class="mtk10">href</span><span class="mtk1">=</span><span class="mtk12">"/some-page"</span><span class="mtk1"> </span><span class="mtk10">target</span><span class="mtk1">=</span><span class="mtk12">"main"</span><span class="mtk14">></span><span class="mtk1">Load the contents of /some-page into the </span><span class="mtk14"><</span><span class="mtk6">main</span><span class="mtk14">></span><span class="mtk1"> tag</span><span class="mtk14"></</span><span class="mtk6">a</span><span class="mtk14">></span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk14"></</span><span class="mtk6">vv-shell</span><span class="mtk14">></span></span></div></div>
|
||||
|
|
@ -1 +1 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">style</span><span class="mtk14">></span><span class="mtk6"><?=</span><span class="mtk3"> </span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">css</span><span class="mtk3">(</span><span class="mtk12">"demo.css"</span><span class="mtk3">) </span><span class="mtk6">?</span><span class="mtk6">></span><span class="mtk14"></</span><span class="mtk6">style</span><span class="mtk14">></span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">section</span><span class="mtk14">></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">h1</span><span class="mtk14">></span><span class="mtk1">Hello world</span><span class="mtk14"></</span><span class="mtk6">h1</span><span class="mtk14">></span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk14"></</span><span class="mtk6">section</span><span class="mtk14">></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">script</span><span class="mtk14">></span><span class="mtk6"><?=</span><span class="mtk3"> </span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">css</span><span class="mtk3">(</span><span class="mtk12">"demo.js"</span><span class="mtk3">) </span><span class="mtk6">?</span><span class="mtk6">></span><span class="mtk14"></</span><span class="mtk6">script</span><span class="mtk14">></span></span></div></div>
|
||||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">style</span><span class="mtk14">></span><span class="mtk6"><?=</span><span class="mtk3"> </span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">css</span><span class="mtk3">(</span><span class="mtk12">"demo.css"</span><span class="mtk3">) </span><span class="mtk6">?</span><span class="mtk6">></span><span class="mtk14"></</span><span class="mtk6">style</span><span class="mtk14">></span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">section</span><span class="mtk14">></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">h1</span><span class="mtk14">></span><span class="mtk1">Hello world</span><span class="mtk14"></</span><span class="mtk6">h1</span><span class="mtk14">></span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk14"></</span><span class="mtk6">section</span><span class="mtk14">></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">script</span><span class="mtk14">></span><span class="mtk6"><?=</span><span class="mtk3"> </span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">js</span><span class="mtk3">(</span><span class="mtk12">"demo.js"</span><span class="mtk3">) </span><span class="mtk6">?</span><span class="mtk6">></span><span class="mtk14"></</span><span class="mtk6">script</span><span class="mtk14">></span></span></div></div>
|
||||
Loading…
Add table
Reference in a new issue