mirror of
https://codeberg.org/vegvisir/website.git
synced 2025-09-13 16:33:42 +02:00
wip: 2025-02-20T15:01:08+0100 (1740060068)
This commit is contained in:
parent
94a3d873b6
commit
c0614d3634
74 changed files with 386 additions and 210 deletions
|
|
@ -1,12 +1,12 @@
|
|||
vv-shell {
|
||||
display: grid;
|
||||
grid-template-rows: calc(var(--running-size) - var(--padding)) 1fr var(--running-size);
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"aside main"
|
||||
"footer footer"
|
||||
;
|
||||
grid-template-columns: 300px 1fr;
|
||||
grid-template-rows: calc(var(--running-size) - var(--padding)) 1fr var(--running-size);
|
||||
}
|
||||
|
||||
/* # Main */
|
||||
|
|
@ -15,20 +15,20 @@ main {
|
|||
--primer-color-accent: 0, 0, 0;
|
||||
--color-accent: black;
|
||||
|
||||
gap: var(--padding);
|
||||
display: flex;
|
||||
padding: var(--padding);
|
||||
grid-area: main;
|
||||
font-family: sans-serif;
|
||||
flex-direction: column;
|
||||
padding: var(--padding);
|
||||
gap: calc(var(--padding) / 2);
|
||||
}
|
||||
|
||||
main code {
|
||||
color: white;
|
||||
padding: 0 5px;
|
||||
border-radius: 6px;
|
||||
font-weight: normal;
|
||||
font-family: monospace;
|
||||
border-radius: 6px;
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
|
|
@ -41,8 +41,15 @@ main h3 {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
main ol li {
|
||||
margin: calc(var(--padding) / 2) 0;
|
||||
/* # Sections */
|
||||
|
||||
section.md {
|
||||
gap: calc(var(--padding) / 2);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* # Sections */
|
||||
section.md :is(ol, ul) li {
|
||||
margin: calc(var(--padding) / 2) 0;
|
||||
}
|
||||
4
public/assets/css/pages/error.css
Normal file
4
public/assets/css/pages/error.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
vv-shell {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
42
public/assets/css/pages/examples.css
Normal file
42
public/assets/css/pages/examples.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
vv-shell {
|
||||
gap: var(--padding);
|
||||
}
|
||||
|
||||
/* # Sections */
|
||||
|
||||
/* ## Heading */
|
||||
|
||||
section.heading {
|
||||
text-align: center;
|
||||
margin: var(--padding) 0;
|
||||
}
|
||||
|
||||
/* ## Grid */
|
||||
|
||||
section.grid {
|
||||
gap: var(--padding);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
section.grid button {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
section.grid button img {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
section.grid button > div {
|
||||
display: flex;
|
||||
text-align: right;
|
||||
gap: var(--padding);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
section.grid button p {
|
||||
color: black;
|
||||
}
|
||||
24
public/assets/css/pages/features.css
Normal file
24
public/assets/css/pages/features.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
vv-shell {
|
||||
padding: 0 var(--padding);
|
||||
}
|
||||
|
||||
/* # Section */
|
||||
|
||||
/* ## This stays */
|
||||
|
||||
section#this-stays {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
fill: var(--color-accent);
|
||||
justify-content: space-evenly;
|
||||
height: var(--running-size);
|
||||
}
|
||||
|
||||
section#this-stays svg {
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
section#this-stays svg:last-child {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
|
@ -1,48 +1,12 @@
|
|||
vv-shell {
|
||||
padding: 0 var(--padding);
|
||||
}
|
||||
|
||||
/* # Components */
|
||||
|
||||
/* ## Split */
|
||||
|
||||
section.split {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin: 10svh 0;
|
||||
}
|
||||
|
||||
section.split.center {
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
section.split > div {
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
section.split.reverse > div:last-child {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
section.split.reverse > div:first-child {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
/* ### Text */
|
||||
|
||||
section.split .text {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ### Buttons */
|
||||
|
||||
section.split .buttons {
|
||||
display: flex;
|
||||
gap: var(--padding);
|
||||
margin-top: var(--padding);
|
||||
code-demo {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
/* # Sections */
|
||||
|
|
|
|||
|
|
@ -74,9 +74,14 @@ code-demo .header button[data-lang="html"] {
|
|||
/* # Body */
|
||||
|
||||
code-demo .body {
|
||||
overflow: scroll;
|
||||
padding: var(--padding);
|
||||
}
|
||||
|
||||
code-demo .body .view-line {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/* ## Tabs */
|
||||
|
||||
code-demo .body [data-file] {
|
||||
50
public/assets/css/snippets/split.css
Normal file
50
public/assets/css/snippets/split.css
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/* # Split */
|
||||
|
||||
section.split {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin: 10svh 0;
|
||||
}
|
||||
|
||||
section.split.center {
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
section.split > div {
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
section.split.reverse > div:last-child {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
section.split.reverse > div:first-child {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
/* ## Text */
|
||||
|
||||
section.split .text {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
section.split.reverse .text {
|
||||
align-items: end;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ## Buttons */
|
||||
|
||||
section.split .buttons {
|
||||
display: flex;
|
||||
gap: var(--padding);
|
||||
margin-top: var(--padding);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
const PUBLIC_ELEMENT_STYLESHEET_DIR = "/assets/css/elements/";
|
||||
const PUBLIC_ELEMENT_STYLESHEET_DIR = "/assets/css/snippets/";
|
||||
|
||||
export class CustomElement extends HTMLElement {
|
||||
constructor() {
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// Handle docs menu open/close
|
||||
{
|
||||
const CLASSNAME_DOCS_MENU_OPEN = "docsMenuOpen";
|
||||
|
||||
// Toggle docs menu on button click
|
||||
document.querySelector("section.menu").addEventListener("click", () => document.body.classList.toggle(CLASSNAME_DOCS_MENU_OPEN));
|
||||
// Hide docs menu on navigation
|
||||
document.addEventListener(vegvisir.Navigation.EVENTS.STARTED, () => document.body.classList.remove(CLASSNAME_DOCS_MENU_OPEN));
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// Handle global menu open/close events
|
||||
{
|
||||
const CLASSNAME_MENU_OPEN = "menuOpen";
|
||||
|
||||
// Toggle menu on menu button click
|
||||
document.querySelector("header .menuToggle").addEventListener("click", () => document.body.classList.toggle(CLASSNAME_MENU_OPEN));
|
||||
// Close menu on navigation
|
||||
document.addEventListener(vegvisir.Navigation.EVENTS.STARTED, () => document.body.classList.remove(CLASSNAME_MENU_OPEN));
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { CustomElement } from "./CustomElement.mjs";
|
||||
import { CustomElement } from "../CustomElement.mjs";
|
||||
|
||||
export const TAG_NAME = "code-demo";
|
||||
|
||||
1
public/assets/media/arrow.svg
Normal file
1
public/assets/media/arrow.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 106.3 101.4" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m1 48.5 2-1.9A51 51 0 0 0 13.7 31a203.8 203.8 0 0 0 6-11.9 389.6 389.6 0 0 1 5.5-10.6l2.5-4.7a7 7 0 0 1 4-3.5c1.9-.6 3.3 0 4.5 1.5 1.1 1.6 2 3.6 2.7 6A443.4 443.4 0 0 1 42.4 21 231.5 231.5 0 0 0 52 45a77.7 77.7 0 0 0 5.9 9.3c.9 1.2 1.8 2 2.9 2.4a48.4 48.4 0 0 1 3 1.6 3.3 3.3 0 0 1 .5 4 3.3 3.3 0 0 1-2.6 1.6c-5.7.4-3.7-8 .8-6.4a3.3 3.3 0 0 1 2.2 3.4 3.3 3.3 0 0 1-2.7 3h-1a675 675 0 0 0-1.3-.4 17 17 0 0 1-3-2.2 17 17 0 0 1-3.6-3.8 88.4 88.4 0 0 1-5.8-10 166.4 166.4 0 0 1-7.9-15.7 183 183 0 0 1-6.1-15.5c-.6-1.8-1.2-4.2-1.8-7.1C30 2.4 35 4.6 33.4 7a1049.1 1049.1 0 0 0-8 14.7A234.1 234.1 0 0 0 19.9 34a61.3 61.3 0 0 1-5.5 10.4 69.6 69.6 0 0 1-8.7 9.5A3.5 3.5 0 0 1 0 52.1a3.5 3.5 0 0 1 .7-3.2l.3-.4z"/><path d="m34.7 34.7-.4 2a33 33 0 0 0 3 21.7 48.6 48.6 0 0 0 14 17.5A90.7 90.7 0 0 0 65 85.4a48.9 48.9 0 0 0 11.2 4c1.6.4 3.1.7 4.7.9l4.6.5c1.6.2 3.3.4 5.2.4 2 0 3.6.2 5 .4s2.8.2 4 .2h2.8a4.7 4.7 0 0 1 4 4.2 4.7 4.7 0 0 1-3 5c-.5.2-1 .3-1.6.3-6.8.4-6.2-9.8 0-9.5a4.7 4.7 0 0 1 4.4 3.7 4.7 4.7 0 0 1-2.4 5.3l-1.5.5a975.2 975.2 0 0 0-1.4 0c-2.5 0-5-.3-7.4-.8L89 100a50.3 50.3 0 0 1-10-1.6L74 97a363.1 363.1 0 0 1-10.7-4 38.5 38.5 0 0 1-7.8-4.8 1150 1150 0 0 0-9-6.8 77.2 77.2 0 0 1-12.5-13 36.3 36.3 0 0 1-5.1-8.9l-2-4.5c-.5-1.7-.9-3.9-1.2-6.6a35.5 35.5 0 0 1 .7-13.2 32.1 32.1 0 0 1 1-3.4 4 4 0 0 1 6.6-.2 4 4 0 0 1 .8 2.7v.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
public/assets/media/icons/languages/txt.svg
Normal file
1
public/assets/media/icons/languages/txt.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 4.47 4.47" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path style="fill:none;stroke:none;stroke-width:.529167;stroke-miterlimit:0;stroke-opacity:1" d="M104.8 115.9h16.9v16.9h-16.9z" transform="translate(-27.73 -30.67) scale(.26458)"/><path d="M102.07 95.58v-.26h2.09v.52h-2.09zm0-.84v-.2h2.74v.4h-2.74zm0-.79v-.2h1.57v.4h-1.57zm0-.84v-.27h2.74v.53h-2.74z" transform="translate(-101.2 -92.17)"/></svg>
|
||||
|
After Width: | Height: | Size: 431 B |
BIN
public/assets/media/img/icellate-com.avif
Normal file
BIN
public/assets/media/img/icellate-com.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
public/assets/media/img/vegvisir-website.avif
Normal file
BIN
public/assets/media/img/vegvisir-website.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/assets/media/img/vlw-se.avif
Normal file
BIN
public/assets/media/img/vlw-se.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
|
|
@ -8,21 +8,17 @@
|
|||
<style><?= VV::css("public/assets/css/pages/docs/header") ?></style>
|
||||
<section class="header">
|
||||
<nav>
|
||||
<a href="/docs"><button class="inline sly">
|
||||
<a href="/docs"><button class="inline">
|
||||
<p>introduction</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/installation"><button class="inline sly">
|
||||
<a href="/docs/get-started"><button class="inline">
|
||||
<p>installation</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP"><button class="inline sly">
|
||||
<a href="/docs/Reference/PHP"><button class="inline">
|
||||
<p>PHP</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript"><button class="inline sly">
|
||||
<a href="/docs/Reference/JavaScript"><button class="inline">
|
||||
<p>JavaScript</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
</section>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<p>This is an instance property of <code>vegvisir.Navigation</code>.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/JS/abort/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/JS/abort/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Return value</h1>
|
||||
|
|
@ -24,6 +24,6 @@
|
|||
<p>In this example we will perform a simple programmatic Vegvsir navigation and abort it immediately.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/JS/abort/example_abort") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/JS/abort/example_abort") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<p>Include a CSS file into a page which will be automatically minified and inlined.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/css/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/css/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
<p>In this example we're importing a stylesheet from <code>/public/assets/css/style.css</code> relative from <a href=""><code>root_path</code></a>.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/css/example_import") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/css/example_import") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<p>Inject the compiled output of another Vegvisir page (or other PHP script).</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/include/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/include/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -46,6 +46,6 @@
|
|||
<p>In this example we will be including a PHP file that contains reusable code (a banner) from <code>/snippets/banner.php</code> into a Vegvisir page <code>/public/index.php</code>.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/include/example_import") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/include/example_import") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
|
||||
<main>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/description") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<p>Place this as close to the bottom of your <code>body</code> tag in your <code>shell_page</code> as possible.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/init/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/init/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -30,6 +30,6 @@
|
|||
<p>In this example we will initialize a single-page website with the two required files to run a bare-bones Vegvisir website: <code>/public/index.php</code> and <code>/public/shell.php</code>.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/init/example_init") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/init/example_init") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<p>Include a JavaScript source file into a page which will be automatically minified and inlined.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/js/description") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/js/description") ?>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Parameters</h1>
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
<p>In this example we're importing a JavaScript source file from <code>/public/assets/js/script.js</code> relative from <a href=""><code>root_path</code></a>.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/js/example_import") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/js/example_import") ?>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -1,86 +1,62 @@
|
|||
<?php
|
||||
|
||||
use const VVWebsite\DEFAULT_BUTTON_ICON;
|
||||
|
||||
require_once VV::root("src/Consts.php");
|
||||
|
||||
?>
|
||||
<style><?= VV::css("public/assets/css/pages/docs/aside") ?></style>
|
||||
<aside>
|
||||
<nav>
|
||||
<a href="/docs/PHP"><button class="inline">
|
||||
<p>environment variables</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
<div class="spacer"></div>
|
||||
<nav>
|
||||
<a href="/docs/Reference/PHP"><button class="inline">
|
||||
<p>PHP</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP/VV/css"><button class="inline sly">
|
||||
<p>VV::css()</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP/VV/embed"><button class="inline sly">
|
||||
<p>VV::embed()</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP/VV/include"><button class="inline sly">
|
||||
<p>VV::include()</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP/VV/init"><button class="inline sly">
|
||||
<p>VV::init()</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP/VV/JS"><button class="inline sly">
|
||||
<p>VV::js()</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
<div class="spacer"></div>
|
||||
<nav>
|
||||
<a href="/docs/Reference/JavaScript"><button class="inline">
|
||||
<p>JavaScript</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/constructor"><button class="inline sly">
|
||||
<p>Navigation.constructor</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/abort"><button class="inline sly">
|
||||
<p>.abort</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/options"><button class="inline sly">
|
||||
<p>.options</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/navigate"><button class="inline sly">
|
||||
<p>.navigate()</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/MODE"><button class="inline sly">
|
||||
<p>Navigation.MODE</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/TARGET"><button class="inline sly">
|
||||
<p>Navigation.TARGET</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/EVENTS"><button class="inline sly">
|
||||
<p>Navigation.EVENTS</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/POSITION"><button class="inline sly">
|
||||
<p>Navigation.POSITION</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/bindElements"><button class="inline sly">
|
||||
<p>Navigation.bindElements()</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<style><?= VV::css("public/assets/css/pages/docs/shell") ?></style>
|
||||
<style><?= VV::css("public/assets/css/pages/docs/layout") ?></style>
|
||||
<?= VV::include("public/docs/header") ?>
|
||||
<?= VV::include("public/docs/v3.1.4/Reference/aside") ?>
|
||||
|
|
@ -1,27 +1,17 @@
|
|||
<?php
|
||||
|
||||
use const VVWebsite\DEFAULT_BUTTON_ICON;
|
||||
|
||||
require_once VV::root("src/Consts.php");
|
||||
|
||||
?>
|
||||
<style><?= VV::css("public/assets/css/pages/docs/aside") ?></style>
|
||||
<aside>
|
||||
<nav>
|
||||
<a href="/docs"><button class="inline">
|
||||
<p>introduction</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/get-started"><button class="inline solid">
|
||||
<p>get started guide</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
<div class="spacer"></div>
|
||||
<nav>
|
||||
<a href="/docs/Reference"><button class="inline">
|
||||
<p>References</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
|
@ -1,17 +1,50 @@
|
|||
<?php
|
||||
|
||||
use const VVWebsite\{MEDIA_DIR, DEFAULT_BUTTON_ICON};
|
||||
|
||||
require_once VV::root("src/Consts.php");
|
||||
|
||||
?>
|
||||
<?= VV::include("public/docs/v3.1.4/layout") ?>
|
||||
<main>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h1>Introduction</h1>
|
||||
<p>Vegvisir is a PHP and JavaScript web framework developed by <a href="https://vlw.se">Victor Westerlund</a> as a hobby project.</p>
|
||||
<p>This framework is not intended to replace the true-and-tested like Laravel, it would be interesting of course if it gained some users but my goal is to keep this project small and flexible.</p>
|
||||
</container>
|
||||
<h1>Get Started with Vegvisir</h1>
|
||||
<p>In this guide we will install Vegvisir from a template repository. I will be using a Debian Linux environment for this demonstration.</p>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h1>Scope</h1>
|
||||
<p>This documentation only covers the new experimental version of Vegvisir, which is version 3.</p>
|
||||
<p>The older versions of Vegvisir can be found here. They lack proper documentation and function a bit differently than Vegvisir 3 which has been largely rewritten from scratch. The main addition to version 3 are what I call "shells".</p>
|
||||
</container>
|
||||
<h2>Prerequisites</h2>
|
||||
<ul>
|
||||
<li>PHP 8.3+</li>
|
||||
<li>Composer</li>
|
||||
<li>A web server</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="md">
|
||||
<h2>1. Clone the template repository</h2>
|
||||
<p>There is a template repository on Codeberg which you can clone or generate from which has a bare-bones website ready for us.</p>
|
||||
<a href="https://codeberg.org/vegvisir/template" target="_blank"><button class="inline">
|
||||
<p>Template repository</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</section>
|
||||
<section class="md">
|
||||
<h2>2. Run the install script</h2>
|
||||
<p>The template repository has an <code>install.sh</code> file in its root directory which will install and set up our Vegvisir configuration for us.</p>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/get-started/run_install_script") ?>
|
||||
</section>
|
||||
<section class="md">
|
||||
<h2>3. Configure your webserver</h2>
|
||||
<p>In this demo we will be using <strong>NGINX</strong> as our web server, and <a href="https://packages.sury.org/php/"><strong>PHP-FPM</strong></a> (packaged by Ondřej Surý) as our FastCGI processor.</p>
|
||||
<p>As long as you point <strong>all traffic</strong> to <code>/vegvisir/public/index.php</code> with PHP pass you should be fine with other web server programs too.</p>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/get-started/nginx") ?>
|
||||
</section>
|
||||
<section class="md">
|
||||
<h2>4. Done!</h2>
|
||||
<p>Navigate to your configured web server host and if you're greeted with a welcome to Vegvisir page, then everything is working as it should!</p>
|
||||
<p>Feel free to experiment or follow the reference guide for more information about each Vegvisir feature.</p>
|
||||
<a href="/docs/Reference"><button class="inline">
|
||||
<p>Reference guide</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -1,17 +1,7 @@
|
|||
<?= VV::include("public/docs/v3.1.4/layout") ?>
|
||||
<main>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h1>Introduction</h1>
|
||||
<p>Vegvisir is a PHP and JavaScript web framework developed by <a href="https://vlw.se">Victor Westerlund</a> as a hobby project.</p>
|
||||
<p>This framework is not intended to replace the true-and-tested like Laravel, it would be interesting of course if it gained some users but my goal is to keep this project small and flexible.</p>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h1>Scope</h1>
|
||||
<p>This documentation only covers the new experimental version of Vegvisir, which is version 3.</p>
|
||||
<p>The older versions of Vegvisir can be found here. They lack proper documentation and function a bit differently than Vegvisir 3 which has been largely rewritten from scratch. The main addition to version 3 are what I call "shells".</p>
|
||||
</container>
|
||||
<h1>Introduction</h1>
|
||||
<p>Vegvisir is a work in progress, based on a framework I developed for a company a few years ago, which in turn was based on a content injector I built for another company. You can read more about the history of this framework on my <a href="https://vlw.se/work/vlw/vegvisir">personal website</a>.</p>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<style><?= VV::css("public/assets/css/pages/docs/shell") ?></style>
|
||||
<style><?= VV::css("public/assets/css/pages/docs/layout") ?></style>
|
||||
<?= VV::include("public/docs/header") ?>
|
||||
<?= VV::include("public/docs/v3.1.4/aside") ?>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<section>
|
||||
<h1>404 Not Found</h1>
|
||||
</section>
|
||||
<style><?= VV::css("public/assets/css/pages/error") ?></style>
|
||||
<h1>404 Not found,</h1>
|
||||
<p>there's nothing to show here :(</p>
|
||||
37
public/examples.php
Normal file
37
public/examples.php
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<style><?= VV::css("public/assets/css/pages/examples") ?></style>
|
||||
<section class="heading">
|
||||
<h1>Vegvisir in production</h1>
|
||||
<p>Here are some examples of Vegvisir being used on real websites!</p>
|
||||
</section>
|
||||
<section class="grid">
|
||||
<a href="https://codeberg.org/vegvisir/website"><button class="inline">
|
||||
<img src="/assets/media/img/vegvisir-website.avif">
|
||||
<div>
|
||||
<div>
|
||||
<h3>This website</h3>
|
||||
<p>The website you're viewing right now has been built from scratch using only Vegvisir components.</p>
|
||||
</div>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</div>
|
||||
</button></a>
|
||||
<a href="https://vlw.se"><button class="inline">
|
||||
<img src="/assets/media/img/vlw-se.avif">
|
||||
<div>
|
||||
<div>
|
||||
<h3>vlw.se</h3>
|
||||
<p>My personal website built from scratch in Vegvisir for the front-end and other "in-house" libraries for the rest.</p>
|
||||
</div>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</div>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline">
|
||||
<img src="/assets/media/img/icellate-com.avif">
|
||||
<div>
|
||||
<div>
|
||||
<h3>icellate.com</h3>
|
||||
<p>[Archived] Website for the Swedish bio-pharma start-up iCellate Medical.</p>
|
||||
</div>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</div>
|
||||
</button></a>
|
||||
</section>
|
||||
62
public/features.php
Normal file
62
public/features.php
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<?php
|
||||
|
||||
use const VVWebsite\{MEDIA_DIR, DEFAULT_BUTTON_ICON};
|
||||
|
||||
require_once VV::root("src/Consts.php");
|
||||
|
||||
?>
|
||||
<style><?= VV::css("public/assets/css/snippets/split") ?></style>
|
||||
<style><?= VV::css("public/assets/css/pages/features") ?></style>
|
||||
<section id="this-stays">
|
||||
<?= VV::embed(MEDIA_DIR . "arrow.svg") ?>
|
||||
<div>
|
||||
<h1>This thing there,</h1>
|
||||
<p>That header is present on every page, so it's loaded once and never again.</p>
|
||||
</div>
|
||||
<?= VV::embed(MEDIA_DIR . "arrow.svg") ?>
|
||||
</section>
|
||||
<section id="softnav" class="split">
|
||||
<div class="text">
|
||||
<h1>Website shell</h1>
|
||||
<p>Load your website's main stylesheet, JavaScript, markdown, and other assets <strong>once</strong> and keep them around between page navigations. Saving bandwidth and increases page load times considerably.</p>
|
||||
<div class="buttons">
|
||||
<a href="/docs/Reference/JavaScript"><button class="inline">
|
||||
<p>Vegvisir shells</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=index_softnav") ?>
|
||||
</div>
|
||||
</section>
|
||||
<section id="navigate" class="split reverse">
|
||||
<div class="text">
|
||||
<h1>Navigate any element</h1>
|
||||
<p>Sometimes you just want to update a portion of your website. That can be done <a href="/docs/Reference/JavaScript/navigate">programmatically with JavaScript</a> or directly in the markdown using the <a href=""><code>vv</code> attributes</a>.</p>
|
||||
<div class="buttons">
|
||||
<a href="/docs/Reference/JavaScript"><button class="inline">
|
||||
<p>'vv' attributes</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=features/vv-nav") ?>
|
||||
</div>
|
||||
</section>
|
||||
<section id="include" class="split">
|
||||
<div class="text">
|
||||
<h1>..or include that page with the response</h1>
|
||||
<p>Vevisir pages, snippets, and other PHP files can be inlined with the response using <code>VV::include</code>.</p>
|
||||
<div class="buttons">
|
||||
<a href="/docs/Reference/JavaScript"><button class="inline">
|
||||
<p>VV::include()</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=features/vv-include") ?>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -5,11 +5,12 @@
|
|||
require_once VV::root("src/Consts.php");
|
||||
|
||||
?>
|
||||
<style><?= VV::css("public/assets/css/pages/index.css") ?></style>
|
||||
<style><?= VV::css("public/assets/css/snippets/split") ?></style>
|
||||
<style><?= VV::css("public/assets/css/pages/index") ?></style>
|
||||
<section id="intro" class="split">
|
||||
<div class="text">
|
||||
<h1>PHP Web framework</h1>
|
||||
<h3>with automatic soft-navigation <a href="">and more!</a></h3>
|
||||
<h3>with automatic soft-navigation <a href="/features">and more!</a></h3>
|
||||
<p>developed as a hobby project by <a href="https://vlw.se">Victor Westerlund</a></p>
|
||||
</div>
|
||||
<div class="compass">
|
||||
|
|
@ -18,42 +19,42 @@
|
|||
<?= VV::embed(MEDIA_DIR . "compass.svg") ?>
|
||||
</div>
|
||||
</section>
|
||||
<section id="assets" class="split">
|
||||
<div class="text">
|
||||
<h1>Asset injection</h1>
|
||||
<p>Bundle your page JavaScript and CSS using native PHP templating and the VV PHP class directly into a automatically minified and soft-navigated page.</p>
|
||||
<div class="buttons">
|
||||
<a href="/"><button class="inline solid">
|
||||
<p>more examples</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline">
|
||||
<p>reference</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=index_assets") ?>
|
||||
</div>
|
||||
</section>
|
||||
<section id="softnav" class="split reverse">
|
||||
<section id="softnav" class="split">
|
||||
<div class="text">
|
||||
<h1>Automatic soft navigation</h1>
|
||||
<p>Vegvisir will automatically compile and soft-navigate between pages on your website without any modifications to your markdown. Even the file structure on disk follows an MPA-layout.</p>
|
||||
<p>Load the shell of your website once, and soft-navigate between pages on the same host. That's what Vegvisir will automatically handle for you - without any ugly handle attributes.</p>
|
||||
<div class="buttons">
|
||||
<a href="/"><button class="inline solid">
|
||||
<a href="/demos"><button class="inline solid">
|
||||
<p>more examples</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline">
|
||||
<a href="/docs/Reference/JavaScript"><button class="inline">
|
||||
<p>reference</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=index_softnav") ?>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=index_softnav") ?>
|
||||
</div>
|
||||
</section>
|
||||
<section id="assets" class="split reverse">
|
||||
<div class="text">
|
||||
<h1>Asset injection</h1>
|
||||
<p>Bundle page-specific CSS and JavaScript from separate files directly with your markdown. Vegvisir will import and minify CSS and JavaScript on the fly and return the result as compiled HTML.</p>
|
||||
<div class="buttons">
|
||||
<a href="/demos"><button class="inline solid">
|
||||
<p>more examples</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP/VV/css"><button class="inline">
|
||||
<p>reference</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=index_assets") ?>
|
||||
</div>
|
||||
</section>
|
||||
<section id="freedom" class="split center">
|
||||
|
|
@ -71,4 +72,4 @@
|
|||
<?= VV::embed(MEDIA_DIR . "gnu.svg") ?>
|
||||
</div>
|
||||
</section>
|
||||
<script><?= VV::js("public/assets/js/pages/index.js") ?></script>
|
||||
<script><?= VV::js("public/assets/js/pages/index") ?></script>
|
||||
|
|
@ -59,16 +59,16 @@
|
|||
<p>vegvisir</p>
|
||||
</button></a>
|
||||
<div></div>
|
||||
<a href="/about"><button class="inline sly">
|
||||
<p>about</p>
|
||||
<a href="/features"><button class="inline sly">
|
||||
<p>features</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs"><button class="inline sly">
|
||||
<p>documentation</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/demos"><button class="inline sly">
|
||||
<p>demos</p>
|
||||
<a href="/examples"><button class="inline sly">
|
||||
<p>examples</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
<a href="https://codeberg.org/vegvisir"><button class="inline">
|
||||
<?= VV::embed(ICONS_DIR . "codeberg.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/installation"><button class="inline solid">
|
||||
<a href="/docs/get-started"><button class="inline solid">
|
||||
<p>get started</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
|
|
@ -96,19 +96,19 @@
|
|||
<p>Copyleft <?= date("Y") ?> - All rights reversed</p>
|
||||
</nav>
|
||||
<nav>
|
||||
<a href="/"><button class="inline sly">
|
||||
<a href="https://vlw.se"><button class="inline sly">
|
||||
<p>vlw</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline sly">
|
||||
<a href="https://codeberg.org/vegvisir/vegvisir/src/branch/master/LICENSE"><button class="inline sly">
|
||||
<p>license</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline sly">
|
||||
<a href="https://codeberg.org/vegvisir/website"><button class="inline sly">
|
||||
<p>website</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline solid sly">
|
||||
<a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline solid sly">
|
||||
<p>contribute ❤️</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,14 @@
|
|||
return explode(".", $file, 3)[1];
|
||||
}
|
||||
|
||||
public static function icon(string $file): string {
|
||||
$file = self::language($file);
|
||||
$path = ICONS_DIR . "languages/{$file}.svg";
|
||||
|
||||
// Return language icon if exists in icons dir else default to text
|
||||
return is_file(VV::root($path)) ? VV::embed($path) : VV::embed(ICONS_DIR . "languages/txt.svg");
|
||||
}
|
||||
|
||||
public function file_path(string $file): string {
|
||||
return $this->dir . $file;
|
||||
}
|
||||
|
|
@ -48,7 +56,7 @@
|
|||
|
||||
<?php foreach ($HTMLCodeDemoElement->files as $file): ?>
|
||||
<button class="inline" data-lang="<?= $HTMLCodeDemoElement::language($file) ?>" data-file="<?= $HTMLCodeDemoElement::name($file) ?>">
|
||||
<?= VV::embed(ICONS_DIR . "languages/{$HTMLCodeDemoElement::language($file)}.svg") ?>
|
||||
<?= $HTMLCodeDemoElement::icon($file) ?>
|
||||
<p><?= substr($file, 0, strlen($file) - 4) ?></p>
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -73,4 +81,4 @@
|
|||
<?php endif; ?>
|
||||
|
||||
</code-demo>
|
||||
<script type="module" src="/assets/js/elements/HTMLCodeDemoElement.mjs"></script>
|
||||
<script type="module" src="/assets/js/snippets/HTMLCodeDemoElement.mjs"></script>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk6">server</span><span class="mtk1"> {</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk6"> listen </span><span class="mtk7">80</span><span class="mtk1">;</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk6"> server_name </span><span class="mtk1">_;</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5"># Replace <path_to_repo> with your directory path</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk6"> root </span><span class="mtk1"><path_to_repo>/vegvisir/public;</span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk6">location</span><span class="mtk1"> </span><span class="mtk3">~</span><span class="mtk1"> </span><span class="mtk15">/* </span><span class="mtk1">{</span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk6"> try_files </span><span class="mtk1">/index.php = </span><span class="mtk7">503</span><span class="mtk1">;</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk6"> include </span><span class="mtk1">snippets/fastcgi-php.conf;</span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk6"> fastcgi_pass </span><span class="mtk1">unix:/run/php/php8.3-fpm.sock;</span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk1"> }</span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk1">}</span></span></div></div>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk1">./install.sh</span></span></div></div>
|
||||
|
|
@ -0,0 +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>
|
||||
|
|
@ -0,0 +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>
|
||||
|
|
@ -0,0 +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="mtk9">h1</span><span class="mtk3">{</span><span class="mtk10">color</span><span class="mtk3">:</span><span class="mtk12">salmon</span><span class="mtk3">;}</span><span class="mtk9">button</span><span class="mtk3">{</span><span class="mtk10">padding</span><span class="mtk3">:</span><span class="mtk7">10px</span><span class="mtk3">;}</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="mtk1"> </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="mtk1"> </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="mtk10">document</span><span class="mtk3">.</span><span class="mtk16">querySelector</span><span class="mtk3">(</span><span class="mtk12">"button"</span><span class="mtk3">).</span><span class="mtk16">addEventListener</span><span class="mtk3">(</span><span class="mtk12">"click"</span><span class="mtk3">,</span><span class="mtk10">event</span><span class="mtk6">=></span><span class="mtk10">event</span><span class="mtk3">.</span><span class="mtk10">target</span><span class="mtk3">.</span><span class="mtk10">innerText</span><span class="mtk3">=</span><span class="mtk12">"Button clicked!"</span><span class="mtk3">);</span><span class="mtk14"></</span><span class="mtk6">script</span><span class="mtk14">></span></span></div></div>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk1">- /</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1">- - public/</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">- - - index.php</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1">- - - page1.php</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1">- - - page2.php</span></span></div></div>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk1">.</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1">└── public/</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">│ └── index.php</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1">│ └── another_page.php</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1">│ │</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk1">│ └── subdirectory/</span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk1">│ │ └── index.php</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk1">│ │ └── another_page_in_subdirectory.php</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="mtk1"> </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="mtk1"> </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">section</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">a</span><span class="mtk1"> </span><span class="mtk10">href</span><span class="mtk1">=</span><span class="mtk12">"/another_page"</span><span class="mtk14">></span><span class="mtk1">Automatic soft-navigation between pages on the sam</span><span class="mtk1">e website.</span><span class="mtk14"></</span><span class="mtk6">a</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">a</span><span class="mtk1"> </span><span class="mtk10">href</span><span class="mtk1">=</span><span class="mtk12">"/subdirectory/another_page"</span><span class="mtk14">></span><span class="mtk1">Without any anchor-tag clutter. Just pure HTML!</span><span class="mtk14"></</span><span class="mtk6">a</span><span class="mtk14">></span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">h2</span><span class="mtk14">></span><span class="mtk1">And the best part?</span><span class="mtk14"></</span><span class="mtk6">h2</span><span class="mtk14">></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">p</span><span class="mtk14">></span><span class="mtk1">We're using a standard MPA file structure on the s</span><span class="mtk1">erver</span><span class="mtk14"></</span><span class="mtk6">p</span><span class="mtk14">></span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk14"></</span><span class="mtk6">section</span><span class="mtk14">></span></span></div></div>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<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="mtk1"> </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="mtk1"> </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>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<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="mtk1"> </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="mtk1"> </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>
|
||||
Loading…
Add table
Reference in a new issue