mdzjs 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ZAKARIA ELALAOUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# Markdown for [Zikojs](https://github.com/zakarialaoui10/ziko.js)
+
+## Install 
+```bash
+ npm i mdzjs
+```
+
+## Usage 
+
+### Config 
+```js
+import {defineConfig} from "vite"
+import {MDZ} from "mdzjs"
+export default defineConfig({
+    plugins : [
+        MDZ()
+    ]
+})
+```
+
+### Example 
+
+```md
+---
+modules : 
+ - import InteractiveBlock from "./InteractiveBlock.js"
+title : MDZ
+background : tomato
+---
+**MDZ** (Markdown for ***zikojs***) is a format that allows you to append Zikojs Elements directly within Markdown.
+
+It combines the simplicity of Markdown syntax with the power and flexibility of ***Javascript***
+
+Here’s an example of an interactive block rendered within this MDZ file:
+
+<InteractiveBlock data="Hello  from MDZ" color="darkblue"/>
+
+### Features of MDZ:
+1- **Simple Integration :** Write Markdown as usual, and inject ZikoJS elements wherever needed.
+2- **Frontmatter Support :** In this example, the title of the document is set dynamically through the frontmatter.
+
+3- **Extensible :** Create custom components like InteractiveBlock and use them in any Markdown file.
+```
+
+```js
+// InteractiveBlock.js
+import {Flex, input, text} from "ziko"
+export default ({data, color})=>{
+    let txt = text(data).style({color})
+    let inp = input(data).style({
+        padding : "5px",
+        background : "transparent",
+        outline :"none",
+        boxShadow :"1px 1px 1px white",
+        fontSize : "inherit"
+    })
+    inp.onInput(e=>txt.setValue(e.value))
+    return Flex(
+        inp,
+        txt
+    ).vertical(0, "space-around").size("60%").style({
+        border : "2px darkblue solid",
+        padding : "10px",
+        minHeight : "100px",
+        margin : "auto"
+    })
+}
+```
+
+```js
+// main.js
+import { useTitle } from "ziko"
+import UI,{attributes} from "./test.mdz"
+const {title, background} = attributes
+title && useTitle(title)
+UI().style({
+    border : "2px darkblue solid",
+    width : "70%",
+    margin : "auto",
+    padding : "10px",
+    fontFamily : "Cheeronsta",
+    background : background ?? "orange"
+}).vertical(-1, "space-around")
+```

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "mdzjs",
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.js",
+    "watch": "cross-env NODE_ENV=development rollup --config rollup.config.js -w",
+    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js"
+  },
+  "./": {
+    "import": "./src/index.js"
+  },
+  "./vite": {
+    "import": "./src/vite/index.js"
+  },
+  "author": "",
+  "keywords": [
+    "zikojs",
+    "zikojs-addons"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "front-matter": "^4.0.2",
+    "marked": "^14.1.2",
+    "rollup": "^4.24.0",
+    "ziko": "^0.0.16"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "cross-env": "^7.0.3"
+  }
+}

package/preview/InteractiveBlock.js

@@ -0,0 +1,21 @@
+import {Flex, input, text} from "ziko"
+export default ({data, color})=>{
+    let txt = text(data).style({color})
+    let inp = input(data).style({
+        padding : "5px",
+        background : "transparent",
+        outline :"none",
+        boxShadow :"1px 1px 1px white",
+        fontSize : "inherit"
+    })
+    inp.onInput(e=>txt.setValue(e.value))
+    return Flex(
+        inp,
+        txt
+    ).vertical(0, "space-around").size("60%").style({
+        border : "2px darkblue solid",
+        padding : "10px",
+        minHeight : "100px",
+        margin : "auto"
+    })
+}

package/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
+//       },
+//    }
+// })

package/preview/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.cdnfonts.com/css/cheeronsta" rel="stylesheet">
+                                
+    <!-- <style>
+      body{
+        font-family: "Gloria Hallelujah", cursive;
+        font-weight: 700;
+        text-wrap :wrap !important;
+        overflow-x: hidden;
+      }
+    </style> -->
+  </head>
+  <body>
+    <script type="module" src="/main.js"></script>
+    <div id="app"></div>
+  </body>
+</html>

package/preview/main.js

@@ -0,0 +1,12 @@
+import { useTitle } from "ziko"
+import UI,{attributes} from "./test.mdz"
+const {title, background} = attributes
+title && useTitle(title)
+UI().style({
+    border : "2px darkblue solid",
+    width : "70%",
+    margin : "auto",
+    padding : "10px",
+    fontFamily : "Cheeronsta",
+    background : background ?? "orange"
+}).vertical(-1, "space-around")