diff --git a/elements/HTMLCodeDemoElement.php b/elements/HTMLCodeDemoElement.php new file mode 100644 index 0000000..e1b4f77 --- /dev/null +++ b/elements/HTMLCodeDemoElement.php @@ -0,0 +1,57 @@ +namespace = array_key_exists("id", $_GET) ? $_GET["id"] : null; + + if ($this->namespace) { + $this->dir = "snippets/HTMLCodeDemoElement/{$this->namespace}/"; + + if (is_dir(VV::root($this->dir))) { + // Strip "." and ".." + $this->files = array_filter(scandir(VV::root($this->dir)), function (string $item) { + return substr($item, 0, 1) !== "."; + }); + + $this->valid = true; + } + } + } + + public function file_path(string $file): string { + return $this->dir . $file; + } + } + +?> + +
+ files as $file): ?> + + + +
+
+ + files as $file): ?> +
+ file_path($file)) ?> +
+ + +
+ + \ No newline at end of file diff --git a/modules/docs/contribute.php b/modules/docs/contribute.php deleted file mode 100644 index 355e265..0000000 --- a/modules/docs/contribute.php +++ /dev/null @@ -1,12 +0,0 @@ - -
- -

Contribute? 💕

-

Have you found a problem om this page? Would you like to help make this little project a bit better?

- - -
\ No newline at end of file diff --git a/modules/docs/contribute/style.css b/modules/docs/contribute/style.css deleted file mode 100644 index 39b6f6b..0000000 --- a/modules/docs/contribute/style.css +++ /dev/null @@ -1,29 +0,0 @@ -section.contribute { - grid-area: contribute; - width: 100%; - background-color: rgba(var(--primer-color-deep), .1); -} - -section.contribute container { - justify-content: center; - flex-direction: column; -} - -section.contribute ul { - display: flex; - padding: var(--padding); - list-style: none; - gap: var(--padding); -} - -/* # Size queries */ - -@media (max-width: 950px) { - section.contribute ul { - flex-direction: column; - } - - section.contribute button { - width: 100%; - } -} \ No newline at end of file diff --git a/modules/docs/legend-js.php b/modules/docs/legend-js.php deleted file mode 100644 index 88e935f..0000000 --- a/modules/docs/legend-js.php +++ /dev/null @@ -1,24 +0,0 @@ - \ No newline at end of file diff --git a/modules/docs/legend-php.php b/modules/docs/legend-php.php deleted file mode 100644 index 819d38b..0000000 --- a/modules/docs/legend-php.php +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/modules/snippet/Snippet.php b/modules/snippet/Snippet.php deleted file mode 100644 index e3785b8..0000000 --- a/modules/snippet/Snippet.php +++ /dev/null @@ -1,33 +0,0 @@ -value); - - // Bail out if snippet can't be found - if (!is_file($path)) { - return "
!REF#
"; - } - - // Use enum name in lowercase as highlight.js lanuage definer - $output = "
";
-				$output .= htmlspecialchars(file_get_contents($path));
-				$output .= "
"; - - return $output; - } - } - -?> - - \ No newline at end of file diff --git a/modules/snippet/snippet.js b/modules/snippet/snippet.js deleted file mode 100644 index 0eefd2a..0000000 --- a/modules/snippet/snippet.js +++ /dev/null @@ -1,19 +0,0 @@ -import hljs from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/highlight.min.js"; - -import php from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/php.min.js"; -import css from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/css.min.js"; -import plaintext from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/plaintext.min.js"; -import javascript from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/javascript.min.js"; - -hljs.registerLanguage("php", php); -hljs.registerLanguage("css", css); -hljs.registerLanguage("plaintext", plaintext); -hljs.registerLanguage("javascript", javascript); - -// Initialize syntax highlighting for all code snippets on this page -const highlightElements = () => { - [...document.querySelectorAll("pre code")].forEach(element => hljs.highlightElement(element)); -} - -document.querySelector("[vv-shell-id='6ccb0465']").addEventListener(vegvisir.Navigation.EVENTS.FINISHED, () => highlightElements); -highlightElements(); diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description-additional.js b/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description-additional.js deleted file mode 100644 index 106a2c7..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description-additional.js +++ /dev/null @@ -1,3 +0,0 @@ -{ - target: HTMLElement -} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description.js deleted file mode 100644 index b3ebdcd..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description.js +++ /dev/null @@ -1,4 +0,0 @@ -static Navigation.EVENTS = { - STARTED: "navstarted", - FINISHED: "navfinished" -} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/example-0-0.js b/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/example-0-0.js deleted file mode 100644 index e58f8c6..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/example-0-0.js +++ /dev/null @@ -1,3 +0,0 @@ -document.addEventListener(vegvisir.Navigation.EVENTS.STARTED, (event) => { - console.log(event.detail.target); -}); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/MODE/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/MODE/description.js deleted file mode 100644 index 06714d6..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/MODE/description.js +++ /dev/null @@ -1,4 +0,0 @@ -static Navigation.MODE = { - REPLACE: "replace", - INSERT: "insert" -} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/POSITION/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/POSITION/description.js deleted file mode 100644 index 45bba4a..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/POSITION/description.js +++ /dev/null @@ -1,6 +0,0 @@ -static Navigation.POSITION = { - AFTEREND: "afterend", - BEFOREEND: "beforeend", - AFTERBEGIN: "afterbegin", - BEFOREBEGIN: "beforebegin" -} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/description.js deleted file mode 100644 index 3cbd36c..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/description.js +++ /dev/null @@ -1,6 +0,0 @@ -static Navigation.TARGET = { - TOP: "_top", - SELF: "_self", - BLANK: "_blank", - PARENT: "_parent" -}; \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-0.php b/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-0.php deleted file mode 100644 index 3f1b1de..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-0.php +++ /dev/null @@ -1 +0,0 @@ -Click here to replace this button with the contents of /some-page \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-1.php b/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-1.php deleted file mode 100644 index 6d9658f..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-1.php +++ /dev/null @@ -1,4 +0,0 @@ -
-

...

- Click here to replace this button and its siblings with /some-page - \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/abort/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/abort/description.js deleted file mode 100644 index 08afca9..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/abort/description.js +++ /dev/null @@ -1 +0,0 @@ -Navigation.abort: AbortController \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/bindElements/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/bindElements/description.js deleted file mode 100644 index e02da3b..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/bindElements/description.js +++ /dev/null @@ -1 +0,0 @@ -static Navigation.bindElements(): void \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/bindElements/example-0-0.js b/modules/snippet/snippets/docs/API/JS/Navigation/bindElements/example-0-0.js deleted file mode 100644 index e31c81f..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/bindElements/example-0-0.js +++ /dev/null @@ -1,5 +0,0 @@ -// The programatically appended anchor tag will not have Vegvisir event listeners on it yet -document.body.appendChild(document.createElement("a")); - -// It will have Vegvisir event listeners after this method is called -vegvisir.Navigation.bindElements(); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/constructor/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/constructor/description.js deleted file mode 100644 index b42d7a7..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/constructor/description.js +++ /dev/null @@ -1,4 +0,0 @@ -new globalThis.vegvisir.Navigation( - URL|String url = window.location, - Object options = vegvisir.Navigation.options -): Navigation \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-0.js b/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-0.js deleted file mode 100644 index 6494008..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-0.js +++ /dev/null @@ -1,2 +0,0 @@ -// Pathname string with leading slash -const nav = new vegvisir.Navigation("/some-page"); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-1.js b/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-1.js deleted file mode 100644 index 7e8d07a..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-1.js +++ /dev/null @@ -1,2 +0,0 @@ -// Pathname string without leading slash and a search parameter -const nav = new vegvisir.Navigation("some-page?foo=bar"); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-2.js b/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-2.js deleted file mode 100644 index a45cada..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-2.js +++ /dev/null @@ -1,6 +0,0 @@ -// URL object with a pathname and search parameter -const url = new URL(window.location); -url.pathname = "/some-page"; -url.searchParams.set("foo", "bar"); - -const nav = new vegvisir.Navigation(url); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/0.js b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/0.js deleted file mode 100644 index 02e89ef..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/0.js +++ /dev/null @@ -1,4 +0,0 @@ -const nav = new vegvisir.Navigation("/some-page"); - -// Will navigate the top shell to /some-page -nav.navigate(); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/1.js b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/1.js deleted file mode 100644 index 970bf78..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/1.js +++ /dev/null @@ -1,5 +0,0 @@ -const target = document.querySelector("#target"); -const nav = new vegvisir.Navigation("/some-page"); - -// Will replace the contents of an element with id #target with the contents of /some-page -nav.navigate(target); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/2.js b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/2.js deleted file mode 100644 index 1ce57bd..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/2.js +++ /dev/null @@ -1,8 +0,0 @@ -const target = document.querySelector("#target"); -const nav = new vegvisir.Navigation("/some-page"); - -// Will place the contents of /some-page after the target element as a sibling -nav.navigate(target, vegvisir.Navigation.POSITION.AFTEREND); - -// Tip: You can also pass an insertAdjacentElement position string directly -nav.navigate(target, "afterend"); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/description.js deleted file mode 100644 index 1714708..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/description.js +++ /dev/null @@ -1,5 +0,0 @@ -Navigation.navigate( - target: HTMLELement = Navigation.#rootShellElement - position: Navigation.POSITION = Navigation.POSITION.BEFOREEND, - mode: Navigation.MODE = Navigation.MODE.REPLACE -): void \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/example-0-0.js b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/example-0-0.js deleted file mode 100644 index 54c9df6..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/example-0-0.js +++ /dev/null @@ -1,6 +0,0 @@ -const target = document.querySelector("#update-this-element"); -const button = document.querySelector("#click-me-to-refresh"); - -const nav = new vegvisir.Navigation("/page-with-new-content"); - -button.addEventListener("click", () => nav.navigate(target)); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/options/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/options/description.js deleted file mode 100644 index c2bc5aa..0000000 --- a/modules/snippet/snippets/docs/API/JS/Navigation/options/description.js +++ /dev/null @@ -1,3 +0,0 @@ -{ - pushHistory: boolean -} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/css/0.php b/modules/snippet/snippets/docs/API/PHP/VV/css/0.php deleted file mode 100644 index ebb4007..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/css/0.php +++ /dev/null @@ -1,4 +0,0 @@ - - -// Without file extension (appended automatically) - \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/css/1.php b/modules/snippet/snippets/docs/API/PHP/VV/css/1.php deleted file mode 100644 index 0c6476c..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/css/1.php +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/css/2.php b/modules/snippet/snippets/docs/API/PHP/VV/css/2.php deleted file mode 100644 index 77d81a2..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/css/2.php +++ /dev/null @@ -1 +0,0 @@ -"const hello = ()=>console.log('Hello world');hello()" \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/css/description.php b/modules/snippet/snippets/docs/API/PHP/VV/css/description.php deleted file mode 100644 index 3251b2c..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/css/description.php +++ /dev/null @@ -1,4 +0,0 @@ -VV::css( - string $pathname, - bool $relative = true -): string \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/css/example-1-0.css b/modules/snippet/snippets/docs/API/PHP/VV/css/example-1-0.css deleted file mode 100644 index 0d2c803..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/css/example-1-0.css +++ /dev/null @@ -1,6 +0,0 @@ -/* File: /var/www/my-website/public/assets/css/style.css */ - -p { - color: blue; - background-color: red; -} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/css/example-1-1.php b/modules/snippet/snippets/docs/API/PHP/VV/css/example-1-1.php deleted file mode 100644 index dfb160d..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/css/example-1-1.php +++ /dev/null @@ -1,4 +0,0 @@ -// File: /var/www/my-website/public/index.php - - -

Some content...

\ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/embed/0.php b/modules/snippet/snippets/docs/API/PHP/VV/embed/0.php deleted file mode 100644 index ebb4007..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/embed/0.php +++ /dev/null @@ -1,4 +0,0 @@ - - -// Without file extension (appended automatically) - \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/embed/1.php b/modules/snippet/snippets/docs/API/PHP/VV/embed/1.php deleted file mode 100644 index 0c6476c..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/embed/1.php +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/embed/2.php b/modules/snippet/snippets/docs/API/PHP/VV/embed/2.php deleted file mode 100644 index 77d81a2..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/embed/2.php +++ /dev/null @@ -1 +0,0 @@ -"const hello = ()=>console.log('Hello world');hello()" \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/embed/description.php b/modules/snippet/snippets/docs/API/PHP/VV/embed/description.php deleted file mode 100644 index 70b5401..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/embed/description.php +++ /dev/null @@ -1,4 +0,0 @@ -VV::embed( - string $pathname, - bool $relative = true -): string \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-0.php b/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-0.php deleted file mode 100644 index c1826be..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-0.php +++ /dev/null @@ -1,3 +0,0 @@ -/* File: /var/www/my-website/public/assets/media/logo.svg */ - -... \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-1.php b/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-1.php deleted file mode 100644 index 5c07fee..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-1.php +++ /dev/null @@ -1,5 +0,0 @@ -// File: /var/www/my-website/shells/document.php - -
- -
\ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/include/0.php b/modules/snippet/snippets/docs/API/PHP/VV/include/0.php deleted file mode 100644 index a6f6f0e..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/include/0.php +++ /dev/null @@ -1,4 +0,0 @@ - - -// Without file extension (appended automatically) - \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/include/1.php b/modules/snippet/snippets/docs/API/PHP/VV/include/1.php deleted file mode 100644 index c5ca0f1..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/include/1.php +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/include/2.php b/modules/snippet/snippets/docs/API/PHP/VV/include/2.php deleted file mode 100644 index 77d81a2..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/include/2.php +++ /dev/null @@ -1 +0,0 @@ -"const hello = ()=>console.log('Hello world');hello()" \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/include/description.php b/modules/snippet/snippets/docs/API/PHP/VV/include/description.php deleted file mode 100644 index c154efc..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/include/description.php +++ /dev/null @@ -1,4 +0,0 @@ -VV::include( - string $pathname, - bool $relative = true -): never \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-0.php b/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-0.php deleted file mode 100644 index 1fbceb6..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-0.php +++ /dev/null @@ -1,5 +0,0 @@ -/* File: /var/www/my-website/modules/banner.php */ - - -

Important text!

- \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-1.php b/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-1.php deleted file mode 100644 index 777ce4e..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-1.php +++ /dev/null @@ -1,6 +0,0 @@ -// File: /var/www/my-website/public/index.php - -
-

Some header content

- -
\ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/js/0.php b/modules/snippet/snippets/docs/API/PHP/VV/js/0.php deleted file mode 100644 index 3fc3023..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/js/0.php +++ /dev/null @@ -1,4 +0,0 @@ - - -// Without file extension (appended automatically) - \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/js/1.php b/modules/snippet/snippets/docs/API/PHP/VV/js/1.php deleted file mode 100644 index 983cfef..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/js/1.php +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/js/2.php b/modules/snippet/snippets/docs/API/PHP/VV/js/2.php deleted file mode 100644 index 77d81a2..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/js/2.php +++ /dev/null @@ -1 +0,0 @@ -"const hello = ()=>console.log('Hello world');hello()" \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/js/description.php b/modules/snippet/snippets/docs/API/PHP/VV/js/description.php deleted file mode 100644 index fe7dea6..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/js/description.php +++ /dev/null @@ -1,4 +0,0 @@ -VV::js( - string $pathname, - bool $relative = true -): string \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/js/example-1-0.js b/modules/snippet/snippets/docs/API/PHP/VV/js/example-1-0.js deleted file mode 100644 index a4e944e..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/js/example-1-0.js +++ /dev/null @@ -1,5 +0,0 @@ -// File: /var/www/my-website/public/assets/js/script.js - -const hello = () => { - console.log("Hello world!"); -} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/js/example-1-1.php b/modules/snippet/snippets/docs/API/PHP/VV/js/example-1-1.php deleted file mode 100644 index a9a296e..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/js/example-1-1.php +++ /dev/null @@ -1,4 +0,0 @@ -// File: /var/www/my-website/public/index.php - -

Some content...

- \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/root/0.php b/modules/snippet/snippets/docs/API/PHP/VV/root/0.php deleted file mode 100644 index 34f4b5a..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/root/0.php +++ /dev/null @@ -1 +0,0 @@ -VV::root("/src/databases"); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/root/1.txt b/modules/snippet/snippets/docs/API/PHP/VV/root/1.txt deleted file mode 100644 index 38f9b6d..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/root/1.txt +++ /dev/null @@ -1 +0,0 @@ -"/var/www/my-website/src/databases" \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/root/2.php b/modules/snippet/snippets/docs/API/PHP/VV/root/2.php deleted file mode 100644 index c5b8f90..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/root/2.php +++ /dev/null @@ -1,9 +0,0 @@ -// File: /var/www/my-website/src/MyClass.php - - -

A normal Vegvisir page whch has access to MyClass

\ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/root/description.php b/modules/snippet/snippets/docs/API/PHP/VV/root/description.php deleted file mode 100644 index 6bf4ff6..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/root/description.php +++ /dev/null @@ -1,3 +0,0 @@ -VV::root( - string $pathname = "" -): string \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/shell/0.php b/modules/snippet/snippets/docs/API/PHP/VV/shell/0.php deleted file mode 100644 index 0df0de9..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/shell/0.php +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/shell/description.php b/modules/snippet/snippets/docs/API/PHP/VV/shell/description.php deleted file mode 100644 index 9d82be9..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/shell/description.php +++ /dev/null @@ -1,3 +0,0 @@ -VV::shell( - string $pathname = "" -): never \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/shell/example-0-0.php b/modules/snippet/snippets/docs/API/PHP/VV/shell/example-0-0.php deleted file mode 100644 index 091a064..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/shell/example-0-0.php +++ /dev/null @@ -1,4 +0,0 @@ -// File: /var/www/my-website/public/some-page.php - -

Inner content

- \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/shell/example-0-1.php b/modules/snippet/snippets/docs/API/PHP/VV/shell/example-0-1.php deleted file mode 100644 index 9dad618..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/shell/example-0-1.php +++ /dev/null @@ -1,5 +0,0 @@ -// File: /var/www/my-website/shells/some-shell.php - -

This paragraph will be above the wrapped content

- -

This parahraph will be below the wrapped content

\ No newline at end of file diff --git a/modules/snippet/snippets/docs/installation/0.txt b/modules/snippet/snippets/docs/installation/0.txt deleted file mode 100644 index 6a68fe0..0000000 --- a/modules/snippet/snippets/docs/installation/0.txt +++ /dev/null @@ -1 +0,0 @@ -git clone https://codeberg.org/vegvisir/vegvisir.git --depth 1 \ No newline at end of file diff --git a/modules/snippet/snippets/docs/installation/1.txt b/modules/snippet/snippets/docs/installation/1.txt deleted file mode 100644 index 312037a..0000000 --- a/modules/snippet/snippets/docs/installation/1.txt +++ /dev/null @@ -1 +0,0 @@ -composer install --optimize-autoloader \ No newline at end of file diff --git a/modules/snippet/snippets/docs/installation/2.txt b/modules/snippet/snippets/docs/installation/2.txt deleted file mode 100644 index 92a4de8..0000000 --- a/modules/snippet/snippets/docs/installation/2.txt +++ /dev/null @@ -1,16 +0,0 @@ -# You might need to alter this block to suit your NGINX configuration -# The important thing is that all requests should be routed to /public/index.php - -server { - listen 80; - server_name _; - - root /var/www/vegvisir/public; - - location / { - try_files /index.php =503; - - include snippets/fastcgi-php.conf; - fastcgi_pass unix:/run/php/php8.3-fpm.sock; - } -} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/installation/3.txt b/modules/snippet/snippets/docs/installation/3.txt deleted file mode 100644 index 8b30c60..0000000 --- a/modules/snippet/snippets/docs/installation/3.txt +++ /dev/null @@ -1 +0,0 @@ -mkdir /var/www/my-website \ No newline at end of file diff --git a/modules/snippet/snippets/docs/installation/4.txt b/modules/snippet/snippets/docs/installation/4.txt deleted file mode 100644 index 038eaa1..0000000 --- a/modules/snippet/snippets/docs/installation/4.txt +++ /dev/null @@ -1 +0,0 @@ -cp -p /var/www/vegvisir/.env.example.ini /var/www/vegvisir/.env.ini \ No newline at end of file diff --git a/modules/snippet/snippets/docs/installation/5.txt b/modules/snippet/snippets/docs/installation/5.txt deleted file mode 100644 index 7c45f5b..0000000 --- a/modules/snippet/snippets/docs/installation/5.txt +++ /dev/null @@ -1,10 +0,0 @@ -# /var/www/vegvisir/.env.ini - -; +--------------------+ -; | Base configuration | -; +--------------------+ - -; An absolute path to the root directory of your website -root_path = "/var/www/my-website" - -... \ No newline at end of file diff --git a/public/assets/css/document.css b/public/assets/css/document.css deleted file mode 100644 index 524af4b..0000000 --- a/public/assets/css/document.css +++ /dev/null @@ -1,267 +0,0 @@ -:root { - --primer-color-deep: 0, 128, 255; - --primer-color-light: 135, 255, 255; - --color-deep: rgba(var(--primer-color-deep)); - --color-light: rgba(var(--primer-color-light)); - - --border-style-width: 1px; - --border-style: solid var(--border-style-width) rgba(var(--primer-color-deep), .2); - - --padding: 10px; - --running-size: 70px; - --max-width: 1400px; -} - -/* # Cornerstones */ - -* { - margin: 0; - color: inherit; - font-size: inherit; - box-sizing: border-box; - font-family: monospace; -} - -body { - font-size: 15px; - overflow-x: hidden; - overscroll-behavior: none; -} - -body.menuOpen { - overflow: hidden; -} - -a { - color: inherit; - display: contents; - text-decoration: none; -} - -/* # Components */ - -:is(h1, h2, h3, p, li) > a { - --underline-tickness: 3px; - - display: initial; - text-decoration: underline; - text-decoration-color: var(--color-accent); - text-underline-offset: var(--underline-tickness); - text-decoration-thickness: var(--underline-tickness); -} - -@media (hover: hover) { - :is(h1, h2, h3, p, li) > a:hover { - text-decoration-color: var(--color-deep); - } -} - -h1 { - font-size: 30px; - color: var(--color-accent); -} - -h2 { - font-size: 25px; -} - -h3 { - font-size: 18px; -} - -/* ## Container */ - -container { - margin: auto; - height: 100%; - display: flex; - width: clamp(200px, 100%, 80vw); - max-width: var(--max-width); - align-items: center; - gap: var(--padding); - padding: var(--padding) 0; -} - -container.split { - display: grid; - grid-template-columns: repeat(2, 1fr); -} - -container.split.reverse div:last-child { - order: -1; -} - -container.split > div { - display: flex; - flex-direction: column; - align-items: baseline; - gap: var(--padding); -} - -/* ## Button */ - -button { - border: unset; - fill: black; - cursor: pointer; - padding: 10px 15px; - border-radius: 4px; - background-color: rgba(0, 0, 0, 0); - border: solid var(--border-style-width) transparent; -} - -button.solid { - fill: white; - color: white; - background-color: var(--color-deep); -} - -button.shade { - background-color: rgba(0, 0, 0, .05); -} - -@media (hover: hover) { - button:hover { - background-color: rgba(var(--primer-color-light), .3); - } - - button.solid:hover { - color: var(--color-light); - background-color: var(--color-deep); - } -} - -button svg { - fill: inherit; - width: 1em; -} - -/* # Content */ - -/* ## Runners */ - -:is(header, footer) ul { - display: flex; - padding-left: 0; - list-style: none; - gap: var(--padding); -} - -:is(header, footer) ul:last-of-type { - margin-left: auto; -} - -:is(header, footer) container > button { - display: none; - margin-left: auto; -} - -/* ### Header */ - -header { - --border-width: 2px; - - top: 0px; - position: sticky; - background-color: white; - height: calc(var(--running-size) + var(--border-style-width)); - border-bottom: var(--border-style); - z-index: 1000; -} - -header .logo { - height: 40px; - padding: 5px; - border-radius: 4px; - background-color: var(--color-deep); -} - -[vv-top-page="/"] header:not(.transparent) a[href="/"] button, -[vv-top-page="/help"] header a[href="/help"] button, -[vv-top-page^="/docs"] header a[href="/docs"] button, -[vv-top-page="/demos"] header a[href="/demos"] button, -[vv-top-page="/why"] header a[href="/why"] button { - font-weight: bold; - color: var(--color-deep); - border: var(--border-style); -} - -/* ### Footer */ - -footer { - padding: var(--padding); - color: var(--color-light); - background-color: var(--color-deep); -} - -/* ### Menu */ - -menu { - display: none; - position: fixed; - top: var(--running-size); - left: 0; - width: 100svw; - padding: calc(var(--padding) * 2); - height: calc(100svh - var(--running-size)); - background-color: var(--color-deep); -} - -body.menuOpen menu { - display: initial; -} - -menu ul { - list-style: none; - padding-left: unset; -} - -menu button { - color: white; - width: 100%; - margin-top: var(--padding); -} - -/* # Size queries */ - -@media (max-width: 950px) { - container { - min-width: unset; - width: 100%; - padding: calc(var(--padding) * 2); - } - - container.split { - display: flex; - flex-direction: column; - } - - container.split.reverse { - flex-direction: column-reverse; - } - - header ul button.solid, - :is(header, footer) ul:not(:last-of-type) { - display: none; - } - - :is(header, footer) container > button { - display: initial; - } - - footer :is(container, ul) { - flex-direction: column; - } - - footer button, - footer ul:last-of-type { - width: 100%; - margin-left: unset; - } -} - -@media (min-width: 950px) { - body.menuOpen menu { - display: none; - } -} \ No newline at end of file diff --git a/public/assets/css/elements/HTMLCodeDemoElement.css b/public/assets/css/elements/HTMLCodeDemoElement.css new file mode 100644 index 0000000..e156adf --- /dev/null +++ b/public/assets/css/elements/HTMLCodeDemoElement.css @@ -0,0 +1,70 @@ +code-demo { + --primer-color-base: 31, 31, 31; + --color-base: rgb(var(--primer-color-base)); + --height: calc(var(--padding) * 2.5); + + min-width: 700px; + border-radius: 12px; + background-color: var(--color-base); +} + +/* # Header */ + +code-demo .header { + display: flex; + height: var(--height); + border-bottom: solid 1px rgba(255, 255, 255, .1); +} + +code-demo .header button.inline { + border: solid 1px rgba(255, 255, 255, .1); + border-bottom: unset; + border-radius: unset; + box-shadow: unset; +} + +code-demo .header button.inline:hover { + box-shadow: unset; +} + +code-demo .header button:first-child { + margin-left: var(--height); +} + +code-demo .header button.inline + button.inline { + border-left: unset; +} + +/* # Body */ + +code-demo .body { + padding: var(--padding); +} + +/* # Syntax highliting */ + +code-demo .mtk1 { color: #cccccc; } +code-demo .mtk2 { color: #1f1f1f; } +code-demo .mtk3 { color: #d4d4d4; } +code-demo .mtk4 { color: #000080; } +code-demo .mtk5 { color: #6a9955; } +code-demo .mtk6 { color: #569cd6; } +code-demo .mtk7 { color: #b5cea8; } +code-demo .mtk8 { color: #646695; } +code-demo .mtk9 { color: #d7ba7d; } +code-demo .mtk10 { color: #9cdcfe; } +code-demo .mtk11 { color: #f44747; } +code-demo .mtk12 { color: #ce9178; } +code-demo .mtk13 { color: #6796e6; } +code-demo .mtk14 { color: #808080; } +code-demo .mtk15 { color: #d16969; } +code-demo .mtk16 { color: #dcdcaa; } +code-demo .mtk17 { color: #4ec9b0; } +code-demo .mtk18 { color: #c586c0; } +code-demo .mtk19 { color: #4fc1ff; } +code-demo .mtk20 { color: #c8c8c8; } +code-demo .mtk21 { color: #cd9731; } +code-demo .mtk22 { color: #b267e6; } +code-demo .mtki { font-style: italic; } +code-demo .mtkb { font-weight: bold; } +code-demo .mtks { text-decoration: line-through; } \ No newline at end of file diff --git a/public/assets/css/fonts.css b/public/assets/css/fonts.css new file mode 100644 index 0000000..782405f --- /dev/null +++ b/public/assets/css/fonts.css @@ -0,0 +1,8 @@ +@font-face { + font-family: "Roboto Mono"; + src: + url("/assets/fonts/roboto-mono.woff2") format("woff2 supports variations"), + url("/assets/fonts/roboto-mono.woff2") format("woff2-variations") + ; + font-weight: 100 900; +} \ No newline at end of file diff --git a/public/assets/css/pages/demos.css b/public/assets/css/pages/demos.css deleted file mode 100644 index 036cef3..0000000 --- a/public/assets/css/pages/demos.css +++ /dev/null @@ -1,26 +0,0 @@ -/* # WIP */ - -section#wip { - background-color: rgba(var(--primer-color-light), .3); -} - -section#wip container { - flex-direction: column; - gap: var(--padding); -} - -/* # Websites */ - -section#websites container { - flex-direction: column; -} - -section#websites ul { - list-style: none; - padding-left: unset; -} - -section#websites button { - margin-top: var(--padding); - width: 100%; -} \ No newline at end of file diff --git a/public/assets/css/pages/index.css b/public/assets/css/pages/index.css index 2a189f5..2363e13 100644 --- a/public/assets/css/pages/index.css +++ b/public/assets/css/pages/index.css @@ -1,188 +1,53 @@ -:root { - --wavelength: 20vw; +/* # Components */ + +section.split { + display: grid; + grid-template-columns: repeat(2, 1fr); } -body { - background-color: var(--color-deep); -} - -section h2 { - color: white; - background-color: black; -} - -header.transparent { - color: white; - background-color: transparent; - border-color: rgba(255, 255, 255, .1); -} - -header.transparent .logo { - fill: var(--color-deep); -} - -header.transparent button { - fill: white; -} - -header.transparent button.solid { - fill: var(--color-deep); - color: var(--color-deep); - background-color: white; +section.split > div { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; } /* # Sections */ -/* ## Divider */ - -section.divider { - width: 100%; - overflow: hidden; - line-height: 0; - background-color: white; -} - -section.divider svg { - position: relative; - display: block; - width: calc(148% + 1.3px); - height: 79px; -} - -section.divider .shape-fill { - fill: var(--color-deep); -} - /* ## Intro */ section#intro { - display: grid; - color: white; - min-height: 300px; + min-height: 70svh; } -section#intro h1 { - font-size: 50px; -} +/* ### Compass */ -section#intro div { - display: flex; - flex-direction: column; - justify-content: center; - align-items: baseline; -} +section#intro div.compass svg { + --size: 50svh; -/* ### Waves */ - -section.waves { - --easing: .2; - - position: relative; - height: 300px; - user-select: none; - pointer-events: none; - z-index: -1; -} - -section.waves img { - margin: auto; - margin-top: -14%; - width: 50%; - transform-origin: 50% 100%; - animation: ship 6s alternate infinite ease; -} - -@keyframes ship { - 0% { - transform: translate(0, -7px) rotate(-7deg); - } - - 100% { - transform: translate(5px, 10px) rotate(4deg); - } -} - -section.waves .wave { + width: var(--size); + height: var(--size); position: absolute; - width: 100%; - height: 100%; - transform: scale(1.5); - bottom: 70px; - animation: wave 7s alternate infinite cubic-bezier(var(--easing), 0, calc(1 - var(--easing)), 1); } -@keyframes wave { - to { transform: scale(1.5) translateX(100px); } +section#intro div.compass svg.points { + opacity: .2; + animation: spin 10s alternate infinite linear; } -section.waves + section { - background-color: #4ca6ff; +@keyframes spin { + to { transform: rotate(30deg); } } -section.waves .wave:first-child { - background-image: url("/assets/media/waves/0.svg"); +section#intro div.compass svg:nth-child(2) { + --size: calc(var(--size) - 30px); + + animation-duration: 15s; + animation-direction: alternate-reverse; } -section.waves .wave:last-child { - animation-duration: 5s; - background-image: url("/assets/media/waves/1.svg"); -} +/* ## Assets */ -/* ## Softnav */ - -section#softnav { - color: white; - background: linear-gradient(0deg, rgba(0,128,255,1) 0%, rgba(76,166,255,1) 100%); -} - -/* ## BYOE */ - -section.info { - background-color: white; -} - -section.info container { - min-height: 400px; -} - -section.info svg { - justify-self: center; - width: 400px; -} - -/* ## Lead */ - -section#lead h1 { - color: white; - text-align: center; - font-weight: normal; -} - -/* ## Free */ - -section#free { - box-shadow: inset 0 0 20px 20px white, inset 0 0 140px 20px white; - background-color: rgba(255, 255, 255, .9); - background-blend-mode: screen; - background-image: url("/assets/media/gnu.png"); -} - -/* # Size queries */ - -@media (max-width: 950px) { - section.waves { - display: none; - } - - section.info container { - min-height: unset; - } - - section.info svg { - width: 300px; - } - - section#lead h1 { - font-size: 20px; - } +section#assets { + height: 100svh; } \ No newline at end of file diff --git a/public/assets/css/pages/why.css b/public/assets/css/pages/why.css deleted file mode 100644 index d2fded6..0000000 --- a/public/assets/css/pages/why.css +++ /dev/null @@ -1,15 +0,0 @@ -/* # Sections */ - -/* ## Free */ - -section#freedom { - background-position: 50% 50%; - background-size: 400px; - background-color: var(--color-deep); - background-blend-mode: lighten; - background-image: url("/assets/media/gnu.png"); -} - -section#freedom svg { - filter: drop-shadow(0 0 40px rgba(255, 255, 255, .3)); -} \ No newline at end of file diff --git a/public/assets/css/shell.css b/public/assets/css/shell.css new file mode 100644 index 0000000..646c426 --- /dev/null +++ b/public/assets/css/shell.css @@ -0,0 +1,324 @@ +:root { + --primer-color-accent: 0, 128, 255; + --color-accent: rgb(var(--primer-color-accent)); + + --padding: 20px; + --running-size: 80px; +} + +/* # Cornerstones */ + +* { + margin: 0; + fill: inherit; + box-sizing: border-box; + font-family: "Roboto Mono", sans-serif; + color: inherit; + font-size: inherit; +} + +::-webkit-scrollbar { + display: none; +} + +body { + display: grid; + justify-items: center; + grid-template-rows: var(--running-size) 1fr; + overscroll-behavior: none; + background-color: white; + color: black; + overflow-x: hidden; + min-height: 100svh; + font-size: 15px; +} + +body::before { + transition: 1s opacity; + content: ""; + position: absolute; + top: -5%; + right: 0; + width: 20%; + height: 5%; + border-radius: 100%; + z-index: 1000; + box-shadow: + 0 0 30svh 10svh rgba(var(--primer-color-accent), .2), + 0 0 30svh 60svh rgba(var(--primer-color-accent), .1), + 0 0 30svh 150svh rgba(var(--primer-color-accent), .02) + ; + opacity: 0; +} + +/* "enable" the corner glow effect on initial load when a page has been fully loaded */ +body[vv-top-page]::before { + opacity: 1; +} + +a { + display: contents; + color: inherit; + text-decoration: none; +} + +/* ## vv-shell */ + +vv-shell { + width: 100%; + display: flex; + position: relative; + flex-direction: column; +} + +/* # Components */ + +:is(h1, h2, h3, p, li) > a { + --underline-tickness: 3px; + + display: initial; + text-decoration: underline; + text-decoration-thickness: var(--underline-tickness); + text-underline-offset: var(--underline-tickness); + text-decoration-color: var(--color-accent); +} + +h1 { + font-size: 30px; + color: var(--color-accent); +} + +h2 { + font-size: 30px; +} + +h3 { + font-size: 25px; +} + +/* ## Page transition */ + +[vv-loading] * { + transition: 200ms opacity; +} + +[vv-loading="true"] * { + opacity: 0; + pointer-events: none; +} + +[vv-loading="true"]::after { + content: ""; + position: fixed; + top: 50%; + left: 50%; + width: 45px; + height: 49px; + background-size: contain; + image-rendering: pixelated; + transform: translate(-50%, -50%); + background-image: url("/assets/media/spinner.gif"); + -webkit-filter: hue-rotate(var(--hue-accent)); + filter: hue-rotate(var(--hue-accent)); +} + +/* ## Buttons */ + +button { + border: none; + background-color: transparent; + color: inherit; + fill: inherit; + cursor: pointer; +} + +/* ### Inline */ + +button.inline { + gap: 10px; + display: flex; + border-radius: 7px; + align-items: center; + fill: var(--color-accent); + color: var(--color-accent); + padding: calc(var(--padding) / 1.5); + background: linear-gradient(139deg, rgba(0, 0, 0, 0) 0%, rgba(var(--primer-color-accent), .1) 100%); +} + +button.inline:not(.solid, .sly) { + box-shadow: + 0 0 0 2px rgba(var(--primer-color-accent), .1), + 10px 7px 40px 3px rgba(var(--primer-color-accent), .06) + ; +} + +button.inline svg { + flex: none; + height: 1em; +} + +button.inline svg:last-child { + width: 1.5em; + margin-left: auto; +} + +button.inline svg.chevron:last-child { + transform: rotate(-90deg); +} + +/* #### Solid */ + +button.inline.solid { + fill: white; + color: white; + border-color: var(--color-accent); + background-color: var(--color-accent); + border: solid 2px rgba(var(--primer-color-accent), 1); +} + +/* #### Sly */ + +button.sly { + border-color: transparent; + background: transparent; + box-shadow: none; +} + +button.sly > svg.chevron { + transition: 200ms width; + width: 0; +} + +button.sly:hover > svg.chevron { + width: 1.5em; +} + +/* ## Header */ + +header { + --border-style: solid 1px rgba(0, 0, 0, .07); + + top: 0; + width: 100%; + z-index: 100; + display: grid; + position: sticky; + overflow: hidden; + align-items: stretch; + backdrop-filter: blur(20px); + height: var(--running-size); + border-bottom: var(--border-style); + -webkit-backdrop-filter: blur(20px); + grid-template-rows: var(--running-size); + background-color: rgba(255, 255, 255, .8); + grid-template-columns: var(--running-size) repeat(2, 1fr); +} + +/* ### Nav */ + +header nav { + display: flex; + align-items: center; + padding: var(--padding); + justify-content: baseline; +} + +header nav:last-of-type { + justify-content: end; + gap: calc(var(--padding) / 2); +} + +/* ### Spacer */ + +header nav > div { + width: 2px; + height: 80%; + margin: 0 var(--padding); + background-color: rgba(0, 0, 0, .07); +} + +/* ### Buttons */ + +header button { + --icon-size: 25px; + + display: grid; + border-left: var(--border-style); + grid-template-columns: 1fr; + align-items: center; + justify-items: center; + padding: var(--padding); + gap: var(--padding); + fill: var(--color-accent); + font-size: 13px; + color: rgba(255, 255, 255, .5); + cursor: pointer; +} + +header button:not(.logo) svg { + width: var(--icon-size); +} + +header button.search p { + display: none; +} + +/* # Feature queries */ + +@media (hover: hover) { + :is(h1, h2, h3, p, li) > a:hover { + text-underline-offset: 1px; + text-decoration-thickness: calc(var(--underline-tickness) * 2); + color: var(--color-accent); + } + + /* # Components */ + + button.inline { + transition-duration: 300ms; + transition-property: background-color, border-color, box-shadow, color, fill; + } + + button:hover { + border-color: rgba(255, 255, 255, .2); + background-color: rgba(255, 255, 255, .1); + } + + button.inline:hover { + fill: var(--color-accent); + color: var(--color-accent); + } + + button.inline:not(.solid):hover { + box-shadow: + 0 0 0 2px rgba(var(--primer-color-accent), 1), + 10px 7px 30px 3px rgba(var(--primer-color-accent), .07) + ; + } + + button.solid:hover { + border-color: rgba(var(--primer-color-accent), .2); + background-color: rgba(var(--primer-color-accent), .2); + box-shadow: 0 -10px 20px 10px rgba(var(--primer-color-accent), .05); + } +} + +/* # Size queries */ + +@media (min-width: 700px) { + :root { + --header-search-size: 250px; + } + + /* # Cornerstones */ + + body::before { + right: unset; + left: 0; + box-shadow: + 0 0 30svh 10svh rgba(var(--primer-color-accent), .1), + 0 0 30svh 60svh rgba(var(--primer-color-accent), .05), + 0 0 30svh 150svh rgba(var(--primer-color-accent), .02) + ; + } +} \ No newline at end of file diff --git a/public/assets/css/shells/docs.css b/public/assets/css/shells/docs.css deleted file mode 100644 index 7573160..0000000 --- a/public/assets/css/shells/docs.css +++ /dev/null @@ -1,274 +0,0 @@ -body { - background-color: rgba(var(--primer-color-deep), .01); -} - -[vv-shell-id="/"] { - display: grid; - min-height: calc(100svh - var(--running-size) - var(--border-style-width)); - grid-template-areas: - "aside main" - "contribute contribute" - ; - grid-template-columns: 400px 1fr; - grid-template-rows: 1fr 200px; - gap: calc(var(--padding) * 2); - margin: auto; -} - -[vv-shell-id="6ccb0465"] { - grid-area: main; - display: flex; - flex-direction: column; - gap: calc(var(--padding) * 2); - margin-top: calc(var(--padding) * 2); - padding-right: calc(var(--padding) * 2); -} - -hr { - border: unset; - border-top: var(--border-style); -} - -/* # Aside */ - -aside { - grid-area: aside; - height: 100%; - display: flex; - flex-direction: column; - padding: var(--padding) 0; - padding-left: calc(var(--padding) * 2); - border-right: var(--border-style); -} - -aside button { - width: calc(100% - (var(--padding) * 2)); - text-align: left; -} - -aside hr { - margin: calc(var(--padding) * 2) 0; -} - -aside ul { - list-style: none; - padding-left: 0; -} - -aside ul ul { - padding-left: var(--padding); -} - -aside ul > p { - margin: var(--padding) 0; -} - -/* ---- */ - -aside .cc + ul { - display: none; -} - -aside .cc.php button { - background-color: rgba(122, 134, 184, .2); -} - -aside .cc.js button { - background-color: rgba(240, 219, 79, .3); -} - -[vv-page^="/docs/API/PHP"] aside .cc.php + ul, -[vv-page^="/docs/API/JS"] aside .cc.js + ul { - display: initial; -} - -/* # Collapsible */ - -details { - border: 1px solid #aaa; - border-radius: 4px; - padding: 0.5em 0.5em 0; -} - -summary { - margin: -0.5em -0.5em 0; - padding: 0.5em; - cursor: pointer; -} - -details[open] { - width: 100%; - padding: 0.5em; -} - -details[open] summary { - border-bottom: 1px solid #aaa; - margin-bottom: 0.5em; -} - -/* # Sections */ - -/* ## Inset */ - -section.inset { - padding-left: var(--padding); -} - -/* ## Markdown */ - -section.md container { - padding-top: 0; - flex-direction: column; - align-items: baseline; -} - -section.md :is(h1, h2, h3) { - cursor: pointer; -} - -section.md h1::before { - content: "#"; - opacity: 1; - padding: 0 10px; - margin-right: .5em; - color: var(--color-light); - background-color: var(--color-deep); -} - -section.md h2::before { - content: "#"; - opacity: 1; - margin-right: .5em; - color: var(--color-deep); -} - -/* ## Code inline */ - -:is(h1, h2, h3, a, p, quote) > code { - padding: 5px; - border-radius: 6px; - white-space: nowrap; - font-family: 'Courier New', monospace; - background-color: rgba(0, 0, 0, .05); -} - -code.tag::before { - content: "<"; -} - -code.tag::after { - content: ">"; -} - -/* ## Code block */ - -section.md pre { - width: 100%; - max-width: calc(100svw - (var(--padding) * 4)); - tab-size: 3; - overflow: scroll; -} - -section.md pre code { - --copy-size: 37px; - --copy-inset: 5px; - --copy-border-size: 1px; - - overflow: scroll; - position: relative; - padding-right: calc(var(--copy-size) + (var(--copy-inset) * 2) + var(--padding)); - border-radius: 6px; -} - -section.md pre code::after { - content: "📋"; - display: grid; - font-size: 20px; - cursor: pointer; - position: absolute; - border-radius: 4px; - align-items: center; - justify-items: center; - top: var(--copy-inset); - width: var(--copy-size); - right: var(--copy-inset); - height: var(--copy-size); - border: solid 1px rgba(255, 255, 255, .1); - background-color: rgba(255, 255, 255, .1); -} - -@media (hover: hover) { - section.md h1:hover::before { - background-color: black; - } - - section.md :is(h1, h2, h3):hover::after { - content: " <- click to copy link"; - font-size: .5em; - opacity: .5; - } - - section.md pre code:hover::after { - border: solid 1px rgba(255, 255, 255, .3); - background-color: rgba(255, 255, 255, .2); - } -} - -/* ## Menu */ - -section.menu { - display: none; - fill: white; - color: white; - grid-area: menu; - cursor: pointer; - background-color: rgba(var(--primer-color-deep), .8); -} - -section.menu container svg { - width: 1em; -} - -section.menu p::before { - content: "Open "; -} - -/* # Size queries */ - -@media (max-width: 950px) { - [vv-shell-id="/"] { - grid-template-areas: - "menu" - "main" - "contribute" - ; - grid-template-columns: 1fr; - grid-template-rows: var(--running-size) 1fr 300px; - } - - body.docsMenuOpen [vv-shell-id="/"] { - grid-template-areas: - "menu" - "aside" - ; - grid-template-rows: var(--running-size) 1fr; - } - - body.docsMenuOpen [vv-shell-id="6ccb0465"], - body.docsMenuOpen section.contribute, - body:not(.docsMenuOpen) aside { - display: none; - } - - /* ---- */ - - [vv-shell-id="6ccb0465"] { - margin-top: unset; - } - - /* ---- */ - - section.menu { - display: initial; - } -} \ No newline at end of file diff --git a/public/assets/css/snippets/footer.css b/public/assets/css/snippets/footer.css new file mode 100644 index 0000000..73fd61f --- /dev/null +++ b/public/assets/css/snippets/footer.css @@ -0,0 +1,5 @@ +footer { + width: 100%; + height: var(--running-size); + background-color: var(--color-accent); +} \ No newline at end of file diff --git a/public/assets/fonts/roboto-mono.woff2 b/public/assets/fonts/roboto-mono.woff2 new file mode 100644 index 0000000..26e996b Binary files /dev/null and b/public/assets/fonts/roboto-mono.woff2 differ diff --git a/public/assets/js/elements/CustomElement.mjs b/public/assets/js/elements/CustomElement.mjs new file mode 100644 index 0000000..5499283 --- /dev/null +++ b/public/assets/js/elements/CustomElement.mjs @@ -0,0 +1,32 @@ +const PUBLIC_ELEMENT_STYLESHEET_DIR = "/assets/css/elements/"; + +export class CustomElement extends HTMLElement { + constructor() { + super(); + } + + /** + * Return a pathname to a custom element CSS stylesheet + * @param {String} stylesheet + * @returns {String} + */ + static #getElementStylesheetHref(stylesheet) { + return `${PUBLIC_ELEMENT_STYLESHEET_DIR}${stylesheet}.css`; + } + + /** + * Include a stylesheet for a custom element + * @param {String} stylesheet + */ + importElementStylesheet(stylesheet) { + if (document.head.querySelector(`link[href="${CustomElement.#getElementStylesheetHref(stylesheet)}"]`)) { + return; + } + + const element = document.createElement("link"); + element.href = CustomElement.#getElementStylesheetHref(stylesheet); + element.rel = "stylesheet"; + + document.head.appendChild(element); + } +} \ No newline at end of file diff --git a/public/assets/js/elements/HTMLCodeDemoElement.mjs b/public/assets/js/elements/HTMLCodeDemoElement.mjs new file mode 100644 index 0000000..820b627 --- /dev/null +++ b/public/assets/js/elements/HTMLCodeDemoElement.mjs @@ -0,0 +1,13 @@ +import { CustomElement } from "./CustomElement.mjs"; + +export const TAG_NAME = "code-demo"; + +class HTMLCodeDemoElement extends CustomElement { + constructor() { + super(); + + this.importElementStylesheet(this.constructor.name); + } +} + +globalThis.customElements.define(TAG_NAME, HTMLCodeDemoElement); \ No newline at end of file diff --git a/public/assets/media/compass-points.svg b/public/assets/media/compass-points.svg new file mode 100644 index 0000000..e97dcf2 --- /dev/null +++ b/public/assets/media/compass-points.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/compass.svg b/public/assets/media/compass.svg new file mode 100644 index 0000000..4a7390f --- /dev/null +++ b/public/assets/media/compass.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/icons/chevron.svg b/public/assets/media/icons/chevron.svg new file mode 100644 index 0000000..5f067d3 --- /dev/null +++ b/public/assets/media/icons/chevron.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/logo.svg b/public/assets/media/logo.svg index 510be1a..5c52250 100644 --- a/public/assets/media/logo.svg +++ b/public/assets/media/logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/assets/media/spinner.gif b/public/assets/media/spinner.gif new file mode 100644 index 0000000..b5975c0 Binary files /dev/null and b/public/assets/media/spinner.gif differ diff --git a/public/demos.php b/public/demos.php deleted file mode 100644 index da2e789..0000000 --- a/public/demos.php +++ /dev/null @@ -1,18 +0,0 @@ - -
- -

WIP

-

Sorry, this whole website is a work in progress.. this page especially so.

- -
-
- -

Websites built with Vegvisir

- - -
\ No newline at end of file diff --git a/public/index.php b/public/index.php index e422b19..f099a48 100644 --- a/public/index.php +++ b/public/index.php @@ -1,58 +1,33 @@ + -
- -
-

Vegvisir

-

A PHP and JavaScript Web Framework

-

that handles navigation and routing, and nothing else

-
- +
+
+

Vegvisir

+

is a PHP and JavaScript web framework with

+

native soft-navigation and asset injection

+

that also gives you

+

automatic soft-navigation from an MPA-like file structure

+
+
+ + + +
-
-
- -
 
- - -
-
-
- -

This is a framework for building complete websites with automatic soft-navigation between pages that follow a traditional "multi-page" (MPA) file structure

- -
-
- - -
-

Soft-navigation by design

-

Vegvisir will automatically soft-navigate between your pages. Dive deeper and fetch only the parts of your site that haven't been loaded yet with the help of shells.

-
- -
-
- - - -
-
- - -
-

TypeScript, Bootstrap, something else?

-

No problem, Vegvisir's primary ethos is to not lock you down a specific paradigm. That is why Vegvisir will always try to interfere as little as possible with how and with what you build your website by being as simple as possible.

-

Bring-Your-Own-Experience

-
- -
-
- - -
-

It's a GNU!

-

The big names in PHP frameworks are all licensed under the permissive MIT license. This legally allows those frameworks to be used to develop proprietary malware. Vegvisir is free to use and will always respects your rights.

-

Free as in -dom AND beer

-
- +
+
+

Asset injection

+

Vegvisir allows you to bundle your page JavaScript and CSS directly into a soft-navigated page using native PHP templating and the VV PHP class.

+
+
+ +
+ \ No newline at end of file diff --git a/public/shell.php b/public/shell.php new file mode 100644 index 0000000..26482b9 --- /dev/null +++ b/public/shell.php @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + Vegvisir + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/snippets/HTMLCodeDemoElement/index_assets/demo.php.php b/snippets/HTMLCodeDemoElement/index_assets/demo.php.php new file mode 100644 index 0000000..d769d72 --- /dev/null +++ b/snippets/HTMLCodeDemoElement/index_assets/demo.php.php @@ -0,0 +1 @@ +
<style><?= VV::css("demo.css") ?></style>
    <section>
        <h1>Hello world</h1>
    </section>
<script><?= VV::css("demo.js") ?></script>
\ No newline at end of file diff --git a/snippets/footer.php b/snippets/footer.php new file mode 100644 index 0000000..482b6bf --- /dev/null +++ b/snippets/footer.php @@ -0,0 +1,18 @@ + + \ No newline at end of file diff --git a/src/Consts.php b/src/Consts.php new file mode 100644 index 0000000..1aa6300 --- /dev/null +++ b/src/Consts.php @@ -0,0 +1,11 @@ +