-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3dd9ba4
commit f5e1fbb
Showing
20 changed files
with
2,376 additions
and
574 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,18 @@ | ||
|
||
router.get('/', async (req, res) => { | ||
res.render(await require('./pages/index.jsx'), req, res) | ||
res.render(await import('./pages/index.js'), req, res) | ||
}) | ||
//@desc /pages/index.jsx | ||
|
||
|
||
router.get('/404/', async (req, res) => { | ||
res.render(await require('./pages/404/index.jsx'), req, res) | ||
router.get('/docs', async (req, res) => { | ||
res.render(await import('./pages/docs/index.js'), req, res) | ||
}) | ||
//@desc /pages/404/index.jsx | ||
//@desc /pages/docs/index.jsx | ||
|
||
|
||
router.get('/docs/:page', async (req, res) => { | ||
res.render(await require('./pages/docs/[page].jsx'), req, res) | ||
router.get('/404', async (req, res) => { | ||
res.render(await import('./pages/404/index.js'), req, res) | ||
}) | ||
//@desc /pages/docs/[page].jsx | ||
//@desc /pages/404/index.jsx | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,30 +1,21 @@ | ||
<!DOCTYPE html> | ||
<html lang="en" > | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Vaderjs v1.3.3</title> | ||
<meta name="description" content="Vader.js is a modern web framework for building web applications."> | ||
<link rel="shortcut icon" href="https://raw.githubusercontent.com/Postr-Inc/Vader.js/vader1.3.3-beta/logo.png" type="image/x-icon"> | ||
<link rel="stylesheet" href="./public/styles.css"> | ||
|
||
<link rel="shortcut icon" href="https://raw.githubusercontent.com/Postr-Inc/Vader.js/main/logo.png" type="image/x-icon"> | ||
<link rel="stylesheet" href="./public//styles.css"> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" defer> | ||
<script type="module"> | ||
import VaderRouter from './router.js' | ||
const router = new VaderRouter('/', 3000) | ||
window.router = router | ||
await import('./app.js') | ||
router.listen(3000) | ||
</script> | ||
|
||
|
||
|
||
|
||
</body> | ||
</html> | ||
|
||
<link rel="prefetch" href="/pages/index.jsx" as="fetch"> | ||
<link rel="prefetch" href="/pages/docs/[page].jsx" as="fetch"> | ||
<link rel="prefetch" href="/pages/404/index.jsx" as="fetch"> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
let {Component, useParams} = await import('/dist/vader.js') | ||
|
||
class Index extends Component{ | ||
constructor(props){ | ||
super(props) | ||
|
||
} | ||
render(){ | ||
|
||
|
||
return ` | ||
<h1 class="mx-auto text-2xl align-middle w-screen h-screen hero"> | ||
404 | Not Found | ||
</h1> | ||
` | ||
} | ||
} | ||
|
||
|
||
export default Index | ||
|
||
//wascompiled |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,125 @@ | ||
import { Component, useState, strictMount, useRef } from "/dist/vader.js" | ||
import {Button} from "/dist/src/button.js" | ||
import {Nav }from '/dist/src/Nav.js' | ||
import { ComponentExample} from "/dist/src/examples/component.js" | ||
|
||
export default class Index extends Component { | ||
constructor(props) { | ||
super(props); | ||
this.key = 'index' | ||
|
||
} | ||
render() { | ||
|
||
let [/** @type {String} */view, setView] = this.useState('view', 'index') | ||
|
||
|
||
let [/** @type {Boolean} */loaded, setLoaded] = this.useState('loaded', false) | ||
|
||
|
||
let embedref = this.useRef('embedref', null) | ||
|
||
return ` | ||
<div key="${this.key}", class="xl:px-64 lg:px-64"> | ||
${this.memoize(this.createComponent(Nav, {key:1}, [``,]))} | ||
<div class="p-2 " > | ||
<div class="mt-5 flex flex-col w-full justify-center mx-auto xl:w-[50vw] lg:w-[70vw] md:w-[70vw] "> | ||
<h1 | ||
class="mb-5 mt-5 xl:text-6xl font-bold text-4xl w-full font-sans text-clip text-center | ||
text-black antialiased break-words capitalize drop-shadow-lg" | ||
> | ||
The future of spa web${" "} | ||
<span class="text-blue-500">development</span> is here | ||
</h1> | ||
<p class="text-center mx-auto align-middle text-md p-2 xl:w-[30vw]"> | ||
Vaderjs is a lightweight framework for building websites with a focus on simplicity and speed. Create performant production ready - full-stack webapps with ease. | ||
</p> | ||
<div class="flex gap-5 mt-16 w-fit mx-auto justify-center"> | ||
${this.memoize(this.createComponent(Button, {key:2, class:'btn border bg-blue-500 hover:bg-blue-500 text-white h-fit flex mx-auto justify-center w-fit border-slate-200 ', redirect:'/docs?page=getting-started',}, [` <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="${1.5}", stroke="currentColor" class="w-6 h-6" > <path strokeLinecap="round" strokeLinejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" /> </svg> <p> Get Started</p>`,]))} | ||
<div class="flex flex-col"> | ||
<div class="bg-slate-900 btn text-white pointer-events-none rounded w-42 sm:w-50 sm:text-sm flex gap-2"> | ||
<p>> npx vaderjs --build</p> | ||
<svg | ||
class="w-5" | ||
viewBox="0 0 24 24" | ||
fill="none" | ||
stroke="currentColor" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
> | ||
<rect | ||
x="9" | ||
y="9" | ||
width="13" | ||
height="13" | ||
rx="2" | ||
ry="2" | ||
></rect>{" "} | ||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>{" "} | ||
</svg> | ||
</div> | ||
<span class="badge badge-neutral text-white rounded mx-auto justify-center align-center mt-2"> | ||
Version ${Vader.version} | ||
</span> | ||
</div> | ||
</div> | ||
<div class="text-center mx-auto mt-24 justify-center flex flex-col gap-5"> | ||
<h1 class="font-bold xl:w-[36vw] lg:w-[36vw] mt-12 text-4xl">Create Interactive Webapps from Components</h1> | ||
<p> | ||
Vader allows you to add seamless reactivity through its component system. | ||
</p> | ||
</div> | ||
<button | ||
class="btn btn-ghost shadow border-slate-200 border hover:bg-white btn-sm w-fit text-center align-middle mx-auto mt-5" | ||
onClick="${this.bind(`setView(view === 'index' ? 'stackblitz' : 'index'); console.log(view); `, false, false, '6lzjjsogrba', "setView,view,embedref,", setView, view, embedref)}", usesEvent="true", eventType="onClick",data-ref="6lzjjsogrba", | ||
> | ||
${ | ||
view === 'index' ? 'Click to View Code' : 'Click to View Example Component' | ||
} | ||
</button> | ||
<div | ||
ref="${embedref.bind}", | ||
class="${`mt-16 mb-16 flex xl:mx-auto xl:justify-center md:mx-auto md:justify-center ${view !== "index" ? "p-5" : ""} `}",> | ||
${ | ||
view == 'index' ? ` | ||
${this.memoize(this.createComponent(ComponentExample, {key:3}, [``,]))} | ||
` | ||
: ` | ||
<embed | ||
ref="${embedref.bind}", | ||
onLoad="${this.bind(``, false, false, 'ksey12ogw', "setLoaded,loaded,", setLoaded, loaded)}", usesEvent="true", eventType="onLoad",data-ref="ksey12ogw", | ||
class="h-[600px] w-[600px] rounded " | ||
src="https://stackblitz.com/edit/web-platform-aanbgw?file=dev%2Fpages%2Findex.jsx&view=editor" | ||
style={{ width: '100%', height: '100%' }} | ||
/> | ||
` | ||
} | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
` | ||
|
||
} | ||
} | ||
|
||
|
||
|
||
|
||
//wascompiled |
Oops, something went wrong.