Skip to content

Commit

Permalink
latest doc changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@MalikWhitten67
MalikWhitten67 authored Jan 21, 2024
1 parent 3dd9ba4 commit f5e1fbb
Show file tree
Hide file tree
Showing 20 changed files with 2,376 additions and 574 deletions.
14 changes: 7 additions & 7 deletions app.js
View file
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

19 changes: 5 additions & 14 deletions index.html
View file
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>
23 changes: 23 additions & 0 deletions pages/404/index.js
View file
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
264 changes: 264 additions & 0 deletions pages/docs/index.js
View file

Large diffs are not rendered by default.

125 changes: 125 additions & 0 deletions pages/index.js
View file
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>&gt; 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
Loading

0 comments on commit f5e1fbb

Please sign in to comment.