Website shell
+Load your website's main stylesheet, JavaScript, markdown, and other assets once and keep them around between page navigations. Saving bandwidth and increases page load times considerably.
+ +diff --git a/public/about.php b/public/about.php
deleted file mode 100644
index e69de29..0000000
diff --git a/public/assets/css/pages/docs/shell.css b/public/assets/css/pages/docs/layout.css
similarity index 83%
rename from public/assets/css/pages/docs/shell.css
rename to public/assets/css/pages/docs/layout.css
index b8c6688..3a28f56 100644
--- a/public/assets/css/pages/docs/shell.css
+++ b/public/assets/css/pages/docs/layout.css
@@ -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 */
\ No newline at end of file
+section.md :is(ol, ul) li {
+ margin: calc(var(--padding) / 2) 0;
+}
\ No newline at end of file
diff --git a/public/assets/css/pages/error.css b/public/assets/css/pages/error.css
new file mode 100644
index 0000000..0497f60
--- /dev/null
+++ b/public/assets/css/pages/error.css
@@ -0,0 +1,4 @@
+vv-shell {
+ margin: auto;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/public/assets/css/pages/examples.css b/public/assets/css/pages/examples.css
new file mode 100644
index 0000000..3e93239
--- /dev/null
+++ b/public/assets/css/pages/examples.css
@@ -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;
+}
\ No newline at end of file
diff --git a/public/assets/css/pages/features.css b/public/assets/css/pages/features.css
new file mode 100644
index 0000000..16325e5
--- /dev/null
+++ b/public/assets/css/pages/features.css
@@ -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);
+}
\ No newline at end of file
diff --git a/public/assets/css/pages/index.css b/public/assets/css/pages/index.css
index 0ab16b4..aa0d13e 100644
--- a/public/assets/css/pages/index.css
+++ b/public/assets/css/pages/index.css
@@ -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 */
diff --git a/public/assets/css/elements/HTMLCodeDemoElement.css b/public/assets/css/snippets/HTMLCodeDemoElement.css
similarity index 96%
rename from public/assets/css/elements/HTMLCodeDemoElement.css
rename to public/assets/css/snippets/HTMLCodeDemoElement.css
index 8260aaa..c0039d2 100644
--- a/public/assets/css/elements/HTMLCodeDemoElement.css
+++ b/public/assets/css/snippets/HTMLCodeDemoElement.css
@@ -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] {
diff --git a/public/assets/css/snippets/split.css b/public/assets/css/snippets/split.css
new file mode 100644
index 0000000..ffc102e
--- /dev/null
+++ b/public/assets/css/snippets/split.css
@@ -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);
+}
\ No newline at end of file
diff --git a/public/assets/js/elements/CustomElement.mjs b/public/assets/js/CustomElement.mjs
similarity index 93%
rename from public/assets/js/elements/CustomElement.mjs
rename to public/assets/js/CustomElement.mjs
index bf91ff6..456774b 100644
--- a/public/assets/js/elements/CustomElement.mjs
+++ b/public/assets/js/CustomElement.mjs
@@ -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() {
diff --git a/public/assets/js/shells/docs.js b/public/assets/js/shells/docs.js
deleted file mode 100644
index c5dd70b..0000000
--- a/public/assets/js/shells/docs.js
+++ /dev/null
@@ -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));
-}
\ No newline at end of file
diff --git a/public/assets/js/shells/document.js b/public/assets/js/shells/document.js
deleted file mode 100644
index 27bdc5f..0000000
--- a/public/assets/js/shells/document.js
+++ /dev/null
@@ -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));
-}
\ No newline at end of file
diff --git a/public/assets/js/elements/HTMLCodeDemoElement.mjs b/public/assets/js/snippets/HTMLCodeDemoElement.mjs
similarity index 95%
rename from public/assets/js/elements/HTMLCodeDemoElement.mjs
rename to public/assets/js/snippets/HTMLCodeDemoElement.mjs
index 935aa85..d8305ec 100644
--- a/public/assets/js/elements/HTMLCodeDemoElement.mjs
+++ b/public/assets/js/snippets/HTMLCodeDemoElement.mjs
@@ -1,4 +1,4 @@
-import { CustomElement } from "./CustomElement.mjs";
+import { CustomElement } from "../CustomElement.mjs";
export const TAG_NAME = "code-demo";
diff --git a/public/assets/media/arrow.svg b/public/assets/media/arrow.svg
new file mode 100644
index 0000000..3fd37f2
--- /dev/null
+++ b/public/assets/media/arrow.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/assets/media/icons/languages/txt.svg b/public/assets/media/icons/languages/txt.svg
new file mode 100644
index 0000000..082cfe9
--- /dev/null
+++ b/public/assets/media/icons/languages/txt.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/assets/media/img/icellate-com.avif b/public/assets/media/img/icellate-com.avif
new file mode 100644
index 0000000..11e7c21
Binary files /dev/null and b/public/assets/media/img/icellate-com.avif differ
diff --git a/public/assets/media/img/vegvisir-website.avif b/public/assets/media/img/vegvisir-website.avif
new file mode 100644
index 0000000..f6452e0
Binary files /dev/null and b/public/assets/media/img/vegvisir-website.avif differ
diff --git a/public/assets/media/img/vlw-se.avif b/public/assets/media/img/vlw-se.avif
new file mode 100644
index 0000000..e73bc05
Binary files /dev/null and b/public/assets/media/img/vlw-se.avif differ
diff --git a/public/demos.php b/public/demos.php
deleted file mode 100644
index e69de29..0000000
diff --git a/public/docs/header.php b/public/docs/header.php
index 2d651b9..3055e20 100644
--- a/public/docs/header.php
+++ b/public/docs/header.php
@@ -8,21 +8,17 @@
This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.
In this example we will be inlining an SVG icon from /public/assets/icon.svg
directly into our page as if it were hardcoded.
This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.
In this example we will be inlining an SVG icon from /public/assets/icon.svg
directly into our page as if it were hardcoded.
This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.
In this example we will be inlining an SVG icon from /public/assets/icon.svg
directly into our page as if it were hardcoded.
This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.
In this example we will be inlining an SVG icon from /public/assets/icon.svg
directly into our page as if it were hardcoded.
This is an instance property of vegvisir.Navigation
.
In this example we will perform a simple programmatic Vegvsir navigation and abort it immediately.
This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.
In this example we will be inlining an SVG icon from /public/assets/icon.svg
directly into our page as if it were hardcoded.
This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.
In this example we will be inlining an SVG icon from /public/assets/icon.svg
directly into our page as if it were hardcoded.
This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.
In this example we will be inlining an SVG icon from /public/assets/icon.svg
directly into our page as if it were hardcoded.
This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.
In this example we will be inlining an SVG icon from /public/assets/icon.svg
directly into our page as if it were hardcoded.
Include a CSS file into a page which will be automatically minified and inlined.
In this example we're importing a stylesheet from /public/assets/css/style.css
relative from root_path
.
This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.
In this example we will be inlining an SVG icon from /public/assets/icon.svg
directly into our page as if it were hardcoded.
Inject the compiled output of another Vegvisir page (or other PHP script).
In this example we will be including a PHP file that contains reusable code (a banner) from /snippets/banner.php
into a Vegvisir page /public/index.php
.
Place this as close to the bottom of your body
tag in your shell_page
as possible.
In this example we will initialize a single-page website with the two required files to run a bare-bones Vegvisir website: /public/index.php
and /public/shell.php
.
Include a JavaScript source file into a page which will be automatically minified and inlined.
In this example we're importing a JavaScript source file from /public/assets/js/script.js
relative from root_path
.
Vegvisir is a PHP and JavaScript web framework developed by Victor Westerlund as a hobby project.
-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.
-In this guide we will install Vegvisir from a template repository. I will be using a Debian Linux environment for this demonstration.
This documentation only covers the new experimental version of Vegvisir, which is version 3.
-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".
-There is a template repository on Codeberg which you can clone or generate from which has a bare-bones website ready for us.
+Template repository
+ = VV::embed(DEFAULT_BUTTON_ICON) ?> +The template repository has an install.sh
file in its root directory which will install and set up our Vegvisir configuration for us.
In this demo we will be using NGINX as our web server, and PHP-FPM (packaged by Ondřej Surý) as our FastCGI processor.
+As long as you point all traffic to /vegvisir/public/index.php
with PHP pass you should be fine with other web server programs too.
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!
+Feel free to experiment or follow the reference guide for more information about each Vegvisir feature.
+Reference guide
+ = VV::embed(DEFAULT_BUTTON_ICON) ?> +Vegvisir is a PHP and JavaScript web framework developed by Victor Westerlund as a hobby project.
-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.
-This documentation only covers the new experimental version of Vegvisir, which is version 3.
-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".
-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 personal website.
there's nothing to show here :(
\ No newline at end of file diff --git a/public/examples.php b/public/examples.php new file mode 100644 index 0000000..0d9d5fc --- /dev/null +++ b/public/examples.php @@ -0,0 +1,37 @@ + +Here are some examples of Vegvisir being used on real websites!
+The website you're viewing right now has been built from scratch using only Vegvisir components.
+My personal website built from scratch in Vegvisir for the front-end and other "in-house" libraries for the rest.
+[Archived] Website for the Swedish bio-pharma start-up iCellate Medical.
+That header is present on every page, so it's loaded once and never again.
+Vevisir pages, snippets, and other PHP files can be inlined with the response using VV::include
.
developed as a hobby project by Victor Westerlund
Bundle your page JavaScript and CSS using native PHP templating and the VV PHP class directly into a automatically minified and soft-navigated page.
- -