Add Marko

CONTRIBUTING.md

@@ -1,13 +1,18 @@
 # 🧑‍💻 Contributing
 
-This site is built with [Astro](https://docs.astro.build). Site content is written in Markdown format located in `content`. For simple edits, you can directly edit the file on GitHub and generate a Pull Request.
+This site is built with [Vite](https://vitejs.dev) and [Svelte](https://svelte.dev). Site content is written in Markdown format located in `content`. For simple edits, you can directly edit the file on GitHub and generate a Pull Request.
 
 ## Add a framework
 
 1.  Fork the project and create a new branch
 2.  Add the new framework SVG logo in `public/framework`
 3.  Install the ESLint plugin associated to the framework
 4.  In `frameworks.mjs`, add a new entry with SVG link and ESLint configuration
+5.  If the framework needs a language syntax highlight, add it to the call to `getHighlighter`’s `langs` argument in `build/lib/generateContent.js`
+6.  To make a playground link:
+    1. Add a `create${FRAMEWORK}Playground.js` file in `build/lib/playground`.
+    2. That file should export a function that returns an object with a `fromContentByFilename` method that accepts an object of filepath keys and file content values, then returns an absolute URL to a framework’s online REPL with those files loaded.
+    3. Register its export in `build/lib/playground/index.js`
 
 ## Improve website
 

README.md

@@ -15,7 +15,7 @@ How do we solve this ? Developers love having framework overview by examples. It
 <summary>
 <img width="18" height="18" src="public/framework/svelte.svg" />
 <b>Svelte</b>
-<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+<img alt="100% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -52,7 +52,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/react.svg" />
             <b>React</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img alt="100% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -89,7 +89,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/vue.svg" />
             <b>Vue 3</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img alt="96% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -110,7 +110,7 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox
@@ -126,7 +126,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/solid.svg" />
             <b>SolidJS</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -153,8 +153,8 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Checkbox
   - [x] Radio
   - [x] Select
-- [ ] Webapp features
-  - [ ] Render app
+- [x] Webapp features
+  - [x] Render app
   - [x] Fetch data
   - [x] Router link
   - [x] Routing
@@ -163,7 +163,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/qwik.svg" />
             <b>Qwik</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -179,12 +179,12 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [ ] Component composition
+- [x] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox
@@ -200,7 +200,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/angular.svg" />
             <b>Angular</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -237,7 +237,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/lit.svg" />
             <b>Lit</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img alt="96% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -274,7 +274,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/vue.svg" />
             <b>Vue 2</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img alt="100% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -290,12 +290,12 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [ ] Component composition
+- [x] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox
@@ -311,7 +311,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/ember.svg" />
             <b>Ember</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -348,7 +348,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/alpine.svg" />
             <b>Alpine</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img alt="96% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -385,7 +385,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/aurelia.svg" />
             <b>Aurelia 1</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -418,6 +418,43 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Router link
   - [x] Routing
 
+</details><details>
+        <summary>
+            <img width="18" height="18" src="public/framework/marko.svg">
+            <b>Marko</b>
+            <img alt="100% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100"></summary>
+
+- [x] Reactivity
+  - [x] Declare state
+  - [x] Update state
+  - [x] Computed state
+- [x] Templating
+  - [x] Minimal template
+  - [x] Styling
+  - [x] Loop
+  - [x] Event click
+  - [x] Dom ref
+  - [x] Conditional
+- [x] Lifecycle
+  - [x] On mount
+  - [x] On unmount
+- [x] Component composition
+  - [x] Props
+  - [x] Emit to parent
+  - [x] Slot
+  - [x] Slot fallback
+  - [x] Context
+- [x] Form input
+  - [x] Input text
+  - [x] Checkbox
+  - [x] Radio
+  - [x] Select
+- [x] Webapp features
+  - [x] Render app
+  - [x] Fetch data
+  - [x] Router link
+  - [x] Routing
+
 </details>
 
 ## 🤝 Contributing
@@ -439,6 +476,11 @@ This project requires Node.js to be `v16.0.0` or higher.
 2.  Add the new framework SVG logo in `public/framework`
 3.  Install the ESLint plugin associated to the framework
 4.  In `frameworks.mjs`, add a new entry with SVG link and ESLint configuration
+5.  If the framework needs a language syntax highlight, add it to the call to `getHighlighter`’s `langs` argument in `build/lib/generateContent.js`
+6.  To make a playground link:
+    1. Add a `create${FRAMEWORK}Playground.js` file in `build/lib/playground`.
+    2. That file should export a function that returns an object with a `fromContentByFilename` method that accepts an object of filepath keys and file content values, then returns an absolute URL to a framework’s online REPL with those files loaded.
+    3. Register its export in `build/lib/playground/index.js`
 
 ## 🧑‍💻 Contributors
 

build/lib/generateContent.js

@@ -25,7 +25,16 @@ async function pathExists(path) {
 export default async function generateContent() {
   const highlighter = await getHighlighter({
     theme: componentPartyShikiTheme,
-    langs: ["javascript", "svelte", "html", "hbs", "tsx", "jsx", "vue"],
+    langs: [
+      "javascript",
+      "svelte",
+      "html",
+      "hbs",
+      "tsx",
+      "jsx",
+      "vue",
+      "marko",
+    ],
   });
 
   const rootDir = await packageDirectory();

build/lib/playground/createMarkoPlayground.js

@@ -0,0 +1,18 @@
+import nodePath from "node:path";
+import { compressToURL } from "@matschik/lz-string";
+
+const BASE = "https://markojs.com/playground/#";
+
+export default function createMarkoPlayground() {
+  return {
+    fromContentByFilename(contentByFilename) {
+      const data = Object.entries(contentByFilename).map(([path, content]) => ({
+        name: nodePath.parse(path).base,
+        path: `/components/${path}`,
+        content,
+      }));
+
+      return BASE + compressToURL(JSON.stringify(data));
+    },
+  };
+}

build/lib/playground/index.js

@@ -2,10 +2,12 @@ import createAlpinePlayground from "./createAlpinePlayground.js";
 import createSveltePlayground from "./createSveltePlayground.js";
 import createVue3Playground from "./createVue3Playground.js";
 import createSolidPlayground from "./createSolidPlayground.js";
+import createMarkoPlayground from "./createMarkoPlayground.js";
 
 export default {
   vue3: createVue3Playground(),
   svelte: createSveltePlayground(),
   alpine: createAlpinePlayground(),
   solid: createSolidPlayground(),
+  marko: createMarkoPlayground(),
 };

content/1-reactivity/1-declare-state/marko/Name.marko

@@ -0,0 +1,2 @@
+<let/name = "John"/>
+<h1>Hello ${name}</h1>

content/1-reactivity/2-update-state/marko/Name.marko

@@ -0,0 +1,3 @@
+<let/name = "John"/>
+<effect() { name = "Jane" }/>
+<h1>Hello ${name}</h1>

content/1-reactivity/3-computed-state/marko/DoubleCount.marko

@@ -0,0 +1,3 @@
+<let/count = 10/>
+<const/doubleCount = count * 2/>
+<div>${doubleCount}</div>

content/2-templating/1-minimal-template/marko/HelloWorld.marko

@@ -0,0 +1 @@
+<h1>Hello world</h1>

content/2-templating/2-styling/marko/CssStyle.marko

@@ -0,0 +1,14 @@
+<h1.title>I am red</h1>
+<button style={ fontSize: "10rem" }>I am a button</button>
+<button class=scopedButton>I am a style-scoped button</button>
+
+<style>
+  .title {
+    color: red;
+  }
+</style>
+<style/{ scopedButton }>
+  .scopedButton {
+    font-size: 10rem;
+  }
+</style>

content/2-templating/3-loop/marko/Colors.marko

@@ -0,0 +1,5 @@
+<ul>
+  <for|color| of=["red", "green", "blue"]>
+    <li>${color}</li>
+  </for>
+</ul>

content/2-templating/4-event-click/marko/Counter.marko

@@ -0,0 +1,3 @@
+<let/count = 0/>
+<p>Counter: ${count}</p>
+<button onClick() { count++ }>+1</button>

content/2-templating/5-dom-ref/marko/InputFocused.marko

@@ -0,0 +1,2 @@
+<input/inputElement>
+<effect() { inputElement().focus() }/>

content/2-templating/6-conditional/marko/TrafficLight.marko

@@ -0,0 +1,14 @@
+static const TRAFFIC_LIGHTS = ["red", "orange", "green"];
+<let/lightIndex = 0/>
+<const/light = TRAFFIC_LIGHTS[lightIndex]/>
+
+<button onClick() { lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length }>
+  Next light
+</button>
+<p>Light is: ${light}</p>
+<p>
+  You must
+  <if=light === "red">STOP</if>
+  <else-if=light === "orange">SLOW DOWN</else-if>
+  <else>GO</else>
+</p>

content/3-lifecycle/1-on-mount/marko/PageTitle.marko

@@ -0,0 +1,3 @@
+<let/pageTitle = ""/>
+<effect() { pageTitle = document.title }/>
+<p>Page title: ${pageTitle}</p>

content/3-lifecycle/2-on-unmount/marko/Time.marko

@@ -0,0 +1,6 @@
+<let/time = new Date()/>
+<lifecycle
+  onMount() { this.timer = setInterval(_ => time = new Date(), 1000) }
+  onDestroy() { clearInterval(this.timer) }
+/>
+<p>Current time: ${time.toLocaleTimeString()}</p>

content/4-component-composition/1-props/marko/App.marko

@@ -0,0 +1,6 @@
+<UserProfile
+  name="John"
+  age=20
+  favouriteColors=["green", "blue", "red"]
+  isAvailable
+/>

content/4-component-composition/1-props/marko/UserProfile.marko

@@ -0,0 +1,11 @@
+<const/{
+  name = "",
+  age = null,
+  favouriteColors = [],
+  isAvailable = false,
+} = input/>
+
+<p>My name is ${name}!</p>
+<p>My age is ${age}!</p>
+<p>My favourite colors are ${favouriteColors.join(", ")}!</p>
+<p>I am ${isAvailable ? "available" : "not available"}</p>

content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko

@@ -0,0 +1,2 @@
+<button onClick=input.onYes>YES</button>
+<button onClick=input.onNo>NO</button>

content/4-component-composition/2-emit-to-parent/marko/App.marko

@@ -0,0 +1,7 @@
+<let/isHappy = true/>
+<p>Are you happy?</p>
+<AnswerButton
+  onYes() { isHappy = true }
+  onNo() { isHappy = false }
+/>
+<p style={ fontSize: 50 }>${isHappy ? "😀" : "😥"}</p>

content/4-component-composition/3-slot/marko/App.marko

@@ -0,0 +1 @@
+<FunnyButton>Click me!</FunnyButton>

content/4-component-composition/3-slot/marko/FunnyButton.marko

@@ -0,0 +1,18 @@
+<button.${funnyButton}>
+  <${input.renderBody}/>
+</button>
+
+<style.module.css/{ funnyButton }>
+  .funnyButton {
+    background: rgba(0, 0, 0, 0.4);
+    color: #fff;
+    padding: 10px 20px;
+    font-size: 30px;
+    border: 2px solid #fff;
+    margin: 8px;
+    transform: scale(0.9);
+    box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
+    transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
+    outline: 0;
+  }
+</style>

content/4-component-composition/4-slot-fallback/marko/App.marko

@@ -0,0 +1,2 @@
+<FunnyButton/>
+<FunnyButton>I got content!</FunnyButton>