diff --git a/preview/__main2.js b/preview/__main2.js new file mode 100644 index 0000000..a6f11ab --- /dev/null +++ b/preview/__main2.js @@ -0,0 +1,49 @@ +// globalThis.S=SPA({ +// target : document.querySelector("#app"), +// wrapper : Section().style({ +// display : "flex", +// justifyContent: "center", +// alignItems : "center", +// height : "100vh" +// }), +// routes:{ +// "/":()=>text("Hello world"), +// "/id/:id":async ({id})=>{ +// let resp = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`) +// let data = await resp.json() +// return Flex( +// text(data.title) +// ) +// }, +// "/users/:user":async ({user})=>{ +// let resp = await fetch(`https://api.github.com/users/${user}`) +// const {name,followers,public_repos, avatar_url}= await resp.json() +// // console.log({name, followers, public_repos, avatar_url}) +// useTitle(name) +// useFavIcon(avatar_url) +// const Card = Flex( +// text(name).style({ +// color : "darkblue", +// fontSize : "1.4rem", +// border : "2px darkblue solid", +// padding : "10px", +// background:"tomato" +// }), +// image(avatar_url).size("200px","auto").style({outline : "2px darkblue solid"}), +// Flex( +// text(`N° followers : ${followers}`), +// text(`N° repos : ${public_repos}`) +// ).horizontal("space-around",0).size("80%","auto").style({ +// color : "darkblue", +// border : "2px darkblue solid", +// padding : "10px", +// background:"tomato" +// }) +// ).size("400px","400px").vertical(0,"space-around").style({ +// border : "2px darkblue solid", +// background : "coral" +// }) +// return Card +// }, +// } +// }) diff --git a/preview/index.html b/preview/index.html index 44d0241..da444a1 100644 --- a/preview/index.html +++ b/preview/index.html @@ -5,8 +5,21 @@ Vite App + + +
diff --git a/preview/main.js b/preview/main.js index 5f14e93..799aa33 100644 --- a/preview/main.js +++ b/preview/main.js @@ -1,11 +1,2 @@ -import {Section,SPA, text} from "ziko" -__Ziko__.__Config__.default.target = document.body -const main=Section() -const p1=Section() -const p2=Section() -let S=SPA( - main,{ - "/":text("Hi"), - "/page1":text("p1"), - "/page2":text("p2") -}) \ No newline at end of file +import { FileBasedRouting } from "ziko"; +FileBasedRouting(import.meta.glob('./src/pages/**/*.js')) \ No newline at end of file diff --git a/preview/src/pages/[blog]/[lang]/index.js b/preview/src/pages/[blog]/[lang]/index.js new file mode 100644 index 0000000..b39fa28 --- /dev/null +++ b/preview/src/pages/[blog]/[lang]/index.js @@ -0,0 +1,3 @@ +export default ({blog,lang})=>{ + console.log({blog,lang}) +} \ No newline at end of file diff --git a/preview/src/pages/[blog]/index.js b/preview/src/pages/[blog]/index.js new file mode 100644 index 0000000..be21475 --- /dev/null +++ b/preview/src/pages/[blog]/index.js @@ -0,0 +1,3 @@ +export default (params)=>{ + console.log(params) +} \ No newline at end of file diff --git a/preview/src/pages/about.js b/preview/src/pages/about.js new file mode 100644 index 0000000..3a4cc3c --- /dev/null +++ b/preview/src/pages/about.js @@ -0,0 +1,6 @@ +import { p } from "ziko" +export default ()=>{ + return p("About ").style({ + color:"red", + }) +} \ No newline at end of file diff --git a/preview/src/pages/articles/[data]/[color]/index.js b/preview/src/pages/articles/[data]/[color]/index.js new file mode 100644 index 0000000..c89bb49 --- /dev/null +++ b/preview/src/pages/articles/[data]/[color]/index.js @@ -0,0 +1,6 @@ +import { text } from "ziko"; +export default ({data,color})=>{ + return text(data).style({ + color : color + }) +} \ No newline at end of file diff --git a/preview/src/pages/articles/a1.js b/preview/src/pages/articles/a1.js new file mode 100644 index 0000000..86f08b5 --- /dev/null +++ b/preview/src/pages/articles/a1.js @@ -0,0 +1,6 @@ +import { p } from "ziko" +export default ()=>{ + return p("Bla bla bla ").style({ + color:"red", + }) +} \ No newline at end of file diff --git a/preview/src/pages/index.js b/preview/src/pages/index.js new file mode 100644 index 0000000..877a319 --- /dev/null +++ b/preview/src/pages/index.js @@ -0,0 +1,20 @@ +import { p,App,Flex } from "ziko" + +const {QueryParams} = __Ziko__ +export default ()=>{ + return App({ + head : { + title : "ziko", + }, + wrapper : ()=>Flex(p("Hello world").style({ + color : QueryParams.color ?? "black" + })).size("100vw","100vh").vertical(0,0) + }) +} +document.body.style.overflow = "hidden" +// export default ()=>{ +// return p("Hello from zikojs File based routing ").style({ +// color:"red", +// fontFamily : "Gloria Hallelujah" +// }) +// } \ No newline at end of file diff --git a/preview/src/pages/me.js b/preview/src/pages/me.js new file mode 100644 index 0000000..81606d1 --- /dev/null +++ b/preview/src/pages/me.js @@ -0,0 +1,3 @@ +export default ()=>{ + console.log("me") +} \ No newline at end of file