Pre-bugbash updates

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

@@ -476,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/2-templating/2-styling/marko/CssStyle.marko

@@ -1,7 +1,7 @@
 <h1.title>I am red</h1>
 <button style={ fontSize: "10rem" }>I am a button</button>
 
-<style>
+<style> /* TODO: the Vue example uses style scoping, maybe we should show ours off too here */
   .title {
     color: red;
   }

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

@@ -9,6 +9,6 @@ static const TRAFFIC_LIGHTS = ["red", "orange", "green"];
 <p>
   You must
   <if=light === "red">STOP</if>
-  <else-if=light === "orange">SLOW DOWN</if>
-  <else>GO</if>
+  <else-if=light === "orange">SLOW DOWN</else-if>
+  <else>GO</else>
 </p>

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

@@ -1,14 +1,18 @@
-<button style={
-  background: "rgba(0, 0, 0, 0.4)",
-  color: "#fff",
-  padding: "10px 20px",
-  fontSize: "30px",
-  border: "2px solid #fff",
-  margin: "8px",
-  transform: "scale(0.9)",
-  boxShadow: "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",
-}>
+<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/FunnyButton.marko

@@ -1,16 +1,20 @@
-<button style={
-  background: "rgba(0, 0, 0, 0.4)",
-  color: "#fff",
-  padding: "10px 20px",
-  fontSize: "30px",
-  border: "2px solid #fff",
-  margin: "8px",
-  transform: "scale(0.9)",
-  boxShadow: "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",
-}>
+<button.${funnyButton}>
   <${input.renderBody}>
     <span>No content found</span>
   </>
 </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/5-context/marko/App.marko

@@ -3,12 +3,11 @@
   username: "unicorn42",
   email: "[email protected]",
 }/>
-
-function updateUsername(newUsername) {
+<const/updateUsername(newUsername) {
   user = { ...user, username: newUsername };
-}
+}/>
 
 <h1>Welcome back, ${user.username}</h1>
-<set user={ ...user, updateUsername }>
+<set={ ...user, updateUsername }>
   <UserProfile />
 </set>

content/7-webapp-features/1-render-app/marko/index.marko

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <App/>
 </html>

content/7-webapp-features/3-router-link/marko/cli.md

@@ -0,0 +1,8 @@
+With [`@marko/cli`’s `build` or `serve`](https://github.com/marko-js/cli/tree/main/packages/serve)
+
+```marko
+<nav>
+  <a href="/">Index</a>
+  <a href="/contact">Contact Us</a>
+</nav>
+```

content/7-webapp-features/3-router-link/marko/run.md

@@ -0,0 +1,8 @@
+With [`@marko/run`](https://github.com/marko-js/run/tree/main/packages/serve)
+
+```marko
+<nav>
+  <a href="/">Index</a>
+  <a href="/contact">Contact Us</a>
+</nav>
+```

content/7-webapp-features/4-routing/marko/cli.md

@@ -0,0 +1,9 @@
+With [`@marko/cli`’s `build` or `serve`](https://github.com/marko-js/cli/tree/main/packages/serve)
+
+```
+index.marko // index page "/"
+about.marko // about page "/about"
+hello/
+|-- [name].marko // dynamic Hello page "/hello/Emily"
+[rest].marko // dynamic parameter can be used as catch-all to show 404 page
+```

content/7-webapp-features/4-routing/marko/run.md

@@ -0,0 +1,19 @@
+With [`@marko/run`](https://github.com/marko-js/run/tree/main/packages/serve)
+
+```
+routes/
+|-- +page.marko // index page "/"
+|-- about/
+    |-- +page.marko // about page "/about"
+|-- +layout.marko // global app layout
+|-- +handler.{js,ts,*} // run code for conditionally rendering HTML/API route
+|-- +middleware.{js,ts,*} // added to HTTP framework middleware chain
+|-- +meta.{js,ts,*} // adds metadata to route
+|-- +404.marko // shows when no suitable route found
+|-- +500.marko // shows when any route throws
+|-- /path/_less/
+    |-- +page.marko // pathless directory, page "/path"
+|-- /$dynamic/
+    |-- +page.marko // dynamic parameter, can be used as a route-specific 404
+|-- /$$catchall/ // like dynamic, but consumes all path segments until the end
+```

frameworks.mjs

@@ -110,6 +110,19 @@ export default [
       return sortAllFilenames(files, ["index.html", "App.tsx"]);
     },
   },
+  {
+    id: "marko",
+    title: "Marko",
+    img: "framework/marko.svg",
+    eslint: {
+      files: ["!**"], // Marko’s linter/prettyprinter doesn’t use eslint
+    },
+    playgroundURL: "https://markojs.com/playground/",
+    documentationURL: "https://markojs.com/docs/getting-started/",
+    filesSorter(files) {
+      return sortAllFilenames(files, ["index.marko", "App.marko"]);
+    },
+  },
   {
     id: "angular",
     title: "Angular",
@@ -251,24 +264,4 @@ export default [
       return sortAllFilenames(files, ["app.html", "app.ts"]);
     },
   },
-  {
-    id: "marko",
-    title: "Marko",
-    img: "framework/marko.svg",
-    eslint: {
-      env: {
-        browser: true,
-        es2021: true,
-        node: true,
-      },
-      parser: "@typescript-eslint/parser",
-      files: ["**/marko/**"],
-      extends: ["eslint:recommended"],
-    },
-    playgroundURL: "https://markojs.com/playground/",
-    documentationURL: "https://markojs.com/docs/getting-started/",
-    filesSorter(files) {
-      return sortAllFilenames(files, ["app.marko"]);
-    },
-  },
 ];