From a01e9034949af379a051c1577026d858b1b37bc1 Mon Sep 17 00:00:00 2001 From: Taylor Hunt Date: Mon, 3 Apr 2023 16:36:25 -0400 Subject: [PATCH] Add Marko (#149) * WIP: add Marko * WTF, vscode * Consistent final newlines * Apply suggestions from code review Everything except for the TS declarations since I think Dylan ought to weigh in Co-authored-by: Michael Rawlings Co-authored-by: Luke LaValva * Feedback: no space before method parens, no TS, else-if, ColorSelect works now * Pre-bugbash updates * This is probably why they want us to provide a linter * Finishing touches * Argle * @rturnq feedback * Match examples to other frameworks --------- Co-authored-by: Michael Rawlings Co-authored-by: Luke LaValva Co-authored-by: tigt --- CONTRIBUTING.md | 7 +- README.md | 64 +++++++++++++++---- build/lib/generateContent.js | 11 +++- build/lib/playground/createMarkoPlayground.js | 18 ++++++ build/lib/playground/index.js | 2 + .../1-declare-state/marko/Name.marko | 2 + .../2-update-state/marko/Name.marko | 3 + .../3-computed-state/marko/DoubleCount.marko | 3 + .../1-minimal-template/marko/HelloWorld.marko | 1 + .../2-styling/marko/CssStyle.marko | 14 ++++ .../2-templating/3-loop/marko/Colors.marko | 5 ++ .../4-event-click/marko/Counter.marko | 3 + .../5-dom-ref/marko/InputFocused.marko | 2 + .../6-conditional/marko/TrafficLight.marko | 14 ++++ .../1-on-mount/marko/PageTitle.marko | 3 + .../3-lifecycle/2-on-unmount/marko/Time.marko | 6 ++ .../1-props/marko/App.marko | 6 ++ .../1-props/marko/UserProfile.marko | 11 ++++ .../2-emit-to-parent/marko/AnswerButton.marko | 2 + .../2-emit-to-parent/marko/App.marko | 7 ++ .../3-slot/marko/App.marko | 1 + .../3-slot/marko/FunnyButton.marko | 18 ++++++ .../4-slot-fallback/marko/App.marko | 2 + .../4-slot-fallback/marko/FunnyButton.marko | 20 ++++++ .../5-context/marko/App.marko | 13 ++++ .../5-context/marko/UserProfile.marko | 9 +++ .../1-input-text/marko/InputHello.marko | 3 + .../2-checkbox/marko/IsAvailable.marko | 5 ++ .../6-form-input/3-radio/marko/PickPill.marko | 21 ++++++ .../4-select/marko/ColorSelect.marko | 15 +++++ .../1-render-app/marko/App.marko | 1 + .../1-render-app/marko/index.marko | 4 ++ .../2-fetch-data/marko/App.marko | 18 ++++++ .../3-router-link/marko/cli.md | 8 +++ .../3-router-link/marko/run.md | 8 +++ .../7-webapp-features/4-routing/marko/cli.md | 9 +++ .../7-webapp-features/4-routing/marko/run.md | 19 ++++++ frameworks.mjs | 13 ++++ public/framework/marko.svg | 41 ++++++++++++ 39 files changed, 399 insertions(+), 13 deletions(-) create mode 100644 build/lib/playground/createMarkoPlayground.js create mode 100644 content/1-reactivity/1-declare-state/marko/Name.marko create mode 100644 content/1-reactivity/2-update-state/marko/Name.marko create mode 100644 content/1-reactivity/3-computed-state/marko/DoubleCount.marko create mode 100644 content/2-templating/1-minimal-template/marko/HelloWorld.marko create mode 100644 content/2-templating/2-styling/marko/CssStyle.marko create mode 100644 content/2-templating/3-loop/marko/Colors.marko create mode 100644 content/2-templating/4-event-click/marko/Counter.marko create mode 100644 content/2-templating/5-dom-ref/marko/InputFocused.marko create mode 100644 content/2-templating/6-conditional/marko/TrafficLight.marko create mode 100644 content/3-lifecycle/1-on-mount/marko/PageTitle.marko create mode 100644 content/3-lifecycle/2-on-unmount/marko/Time.marko create mode 100644 content/4-component-composition/1-props/marko/App.marko create mode 100644 content/4-component-composition/1-props/marko/UserProfile.marko create mode 100644 content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko create mode 100644 content/4-component-composition/2-emit-to-parent/marko/App.marko create mode 100644 content/4-component-composition/3-slot/marko/App.marko create mode 100644 content/4-component-composition/3-slot/marko/FunnyButton.marko create mode 100644 content/4-component-composition/4-slot-fallback/marko/App.marko create mode 100644 content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko create mode 100644 content/4-component-composition/5-context/marko/App.marko create mode 100644 content/4-component-composition/5-context/marko/UserProfile.marko create mode 100644 content/6-form-input/1-input-text/marko/InputHello.marko create mode 100644 content/6-form-input/2-checkbox/marko/IsAvailable.marko create mode 100644 content/6-form-input/3-radio/marko/PickPill.marko create mode 100644 content/6-form-input/4-select/marko/ColorSelect.marko create mode 100644 content/7-webapp-features/1-render-app/marko/App.marko create mode 100644 content/7-webapp-features/1-render-app/marko/index.marko create mode 100644 content/7-webapp-features/2-fetch-data/marko/App.marko create mode 100644 content/7-webapp-features/3-router-link/marko/cli.md create mode 100644 content/7-webapp-features/3-router-link/marko/run.md create mode 100644 content/7-webapp-features/4-routing/marko/cli.md create mode 100644 content/7-webapp-features/4-routing/marko/run.md create mode 100644 public/framework/marko.svg diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7ed5c263..a610be21 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,6 @@ # 🧑‍💻 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 @@ -8,6 +8,11 @@ This site is built with [Astro](https://docs.astro.build). Site content is writt 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 diff --git a/README.md b/README.md index 18722f6c..3776f706 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ How do we solve this ? Developers love having framework overview by examples. It Svelte - +100% progress - [x] Reactivity - [x] Declare state @@ -52,7 +52,7 @@ How do we solve this ? Developers love having framework overview by examples. It React - + 100% progress - [x] Reactivity - [x] Declare state @@ -89,7 +89,7 @@ How do we solve this ? Developers love having framework overview by examples. It Vue 3 - + 96% progress - [x] Reactivity - [x] Declare state @@ -126,7 +126,7 @@ How do we solve this ? Developers love having framework overview by examples. It SolidJS - + 92% progress - [x] Reactivity - [x] Declare state @@ -163,7 +163,7 @@ How do we solve this ? Developers love having framework overview by examples. It Qwik - + 92% progress - [x] Reactivity - [x] Declare state @@ -200,7 +200,7 @@ How do we solve this ? Developers love having framework overview by examples. It Angular - + 92% progress - [x] Reactivity - [x] Declare state @@ -237,7 +237,7 @@ How do we solve this ? Developers love having framework overview by examples. It Lit - + 96% progress - [x] Reactivity - [x] Declare state @@ -274,7 +274,7 @@ How do we solve this ? Developers love having framework overview by examples. It Vue 2 - + 100% progress - [x] Reactivity - [x] Declare state @@ -311,7 +311,7 @@ How do we solve this ? Developers love having framework overview by examples. It Ember - + 92% progress - [x] Reactivity - [x] Declare state @@ -348,7 +348,7 @@ How do we solve this ? Developers love having framework overview by examples. It Alpine - + 96% progress - [x] Reactivity - [x] Declare state @@ -385,7 +385,7 @@ How do we solve this ? Developers love having framework overview by examples. It Aurelia 1 - + 92% progress - [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 +
+ + + Marko + 100% progress + +- [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 +
## 🤝 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 diff --git a/build/lib/generateContent.js b/build/lib/generateContent.js index 6b4ea322..bf8bce2a 100644 --- a/build/lib/generateContent.js +++ b/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(); diff --git a/build/lib/playground/createMarkoPlayground.js b/build/lib/playground/createMarkoPlayground.js new file mode 100644 index 00000000..154ac1a9 --- /dev/null +++ b/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)); + }, + }; +} diff --git a/build/lib/playground/index.js b/build/lib/playground/index.js index 900e8dc6..1e05a653 100644 --- a/build/lib/playground/index.js +++ b/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(), }; diff --git a/content/1-reactivity/1-declare-state/marko/Name.marko b/content/1-reactivity/1-declare-state/marko/Name.marko new file mode 100644 index 00000000..81e05194 --- /dev/null +++ b/content/1-reactivity/1-declare-state/marko/Name.marko @@ -0,0 +1,2 @@ + +

Hello ${name}

diff --git a/content/1-reactivity/2-update-state/marko/Name.marko b/content/1-reactivity/2-update-state/marko/Name.marko new file mode 100644 index 00000000..d2cfcb4b --- /dev/null +++ b/content/1-reactivity/2-update-state/marko/Name.marko @@ -0,0 +1,3 @@ + + +

Hello ${name}

diff --git a/content/1-reactivity/3-computed-state/marko/DoubleCount.marko b/content/1-reactivity/3-computed-state/marko/DoubleCount.marko new file mode 100644 index 00000000..6cda1076 --- /dev/null +++ b/content/1-reactivity/3-computed-state/marko/DoubleCount.marko @@ -0,0 +1,3 @@ + + +
${doubleCount}
diff --git a/content/2-templating/1-minimal-template/marko/HelloWorld.marko b/content/2-templating/1-minimal-template/marko/HelloWorld.marko new file mode 100644 index 00000000..159202e8 --- /dev/null +++ b/content/2-templating/1-minimal-template/marko/HelloWorld.marko @@ -0,0 +1 @@ +

Hello world

diff --git a/content/2-templating/2-styling/marko/CssStyle.marko b/content/2-templating/2-styling/marko/CssStyle.marko new file mode 100644 index 00000000..e186e7c3 --- /dev/null +++ b/content/2-templating/2-styling/marko/CssStyle.marko @@ -0,0 +1,14 @@ +I am red + + + + + diff --git a/content/2-templating/3-loop/marko/Colors.marko b/content/2-templating/3-loop/marko/Colors.marko new file mode 100644 index 00000000..1e5420f1 --- /dev/null +++ b/content/2-templating/3-loop/marko/Colors.marko @@ -0,0 +1,5 @@ +
    + +
  • ${color}
    • + +
diff --git a/content/2-templating/4-event-click/marko/Counter.marko b/content/2-templating/4-event-click/marko/Counter.marko new file mode 100644 index 00000000..83d71fe5 --- /dev/null +++ b/content/2-templating/4-event-click/marko/Counter.marko @@ -0,0 +1,3 @@ + +

Counter: ${count}

+ diff --git a/content/2-templating/5-dom-ref/marko/InputFocused.marko b/content/2-templating/5-dom-ref/marko/InputFocused.marko new file mode 100644 index 00000000..3bd03996 --- /dev/null +++ b/content/2-templating/5-dom-ref/marko/InputFocused.marko @@ -0,0 +1,2 @@ + + diff --git a/content/2-templating/6-conditional/marko/TrafficLight.marko b/content/2-templating/6-conditional/marko/TrafficLight.marko new file mode 100644 index 00000000..8eb5c668 --- /dev/null +++ b/content/2-templating/6-conditional/marko/TrafficLight.marko @@ -0,0 +1,14 @@ +static const TRAFFIC_LIGHTS = ["red", "orange", "green"]; + + + + +

Light is: ${light}

+

+ You must + STOP + SLOW DOWN + GO +

diff --git a/content/3-lifecycle/1-on-mount/marko/PageTitle.marko b/content/3-lifecycle/1-on-mount/marko/PageTitle.marko new file mode 100644 index 00000000..e80376e1 --- /dev/null +++ b/content/3-lifecycle/1-on-mount/marko/PageTitle.marko @@ -0,0 +1,3 @@ + + +

Page title: ${pageTitle}

diff --git a/content/3-lifecycle/2-on-unmount/marko/Time.marko b/content/3-lifecycle/2-on-unmount/marko/Time.marko new file mode 100644 index 00000000..5fd8e9bd --- /dev/null +++ b/content/3-lifecycle/2-on-unmount/marko/Time.marko @@ -0,0 +1,6 @@ + + time = new Date(), 1000) } + onDestroy() { clearInterval(this.timer) } +/> +

Current time: ${time.toLocaleTimeString()}

diff --git a/content/4-component-composition/1-props/marko/App.marko b/content/4-component-composition/1-props/marko/App.marko new file mode 100644 index 00000000..7322ec50 --- /dev/null +++ b/content/4-component-composition/1-props/marko/App.marko @@ -0,0 +1,6 @@ + diff --git a/content/4-component-composition/1-props/marko/UserProfile.marko b/content/4-component-composition/1-props/marko/UserProfile.marko new file mode 100644 index 00000000..65e14b1a --- /dev/null +++ b/content/4-component-composition/1-props/marko/UserProfile.marko @@ -0,0 +1,11 @@ + + +

My name is ${name}!

+

My age is ${age}!

+

My favourite colors are ${favouriteColors.join(", ")}!

+

I am ${isAvailable ? "available" : "not available"}

diff --git a/content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko b/content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko new file mode 100644 index 00000000..4aecf12f --- /dev/null +++ b/content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko @@ -0,0 +1,2 @@ + + diff --git a/content/4-component-composition/2-emit-to-parent/marko/App.marko b/content/4-component-composition/2-emit-to-parent/marko/App.marko new file mode 100644 index 00000000..d771bd5b --- /dev/null +++ b/content/4-component-composition/2-emit-to-parent/marko/App.marko @@ -0,0 +1,7 @@ + +

Are you happy?

+ +

${isHappy ? "😀" : "😥"}

diff --git a/content/4-component-composition/3-slot/marko/App.marko b/content/4-component-composition/3-slot/marko/App.marko new file mode 100644 index 00000000..63cea083 --- /dev/null +++ b/content/4-component-composition/3-slot/marko/App.marko @@ -0,0 +1 @@ +Click me! diff --git a/content/4-component-composition/3-slot/marko/FunnyButton.marko b/content/4-component-composition/3-slot/marko/FunnyButton.marko new file mode 100644 index 00000000..d213be23 --- /dev/null +++ b/content/4-component-composition/3-slot/marko/FunnyButton.marko @@ -0,0 +1,18 @@ + + <${input.renderBody}/> + + + + .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; + } + diff --git a/content/4-component-composition/4-slot-fallback/marko/App.marko b/content/4-component-composition/4-slot-fallback/marko/App.marko new file mode 100644 index 00000000..b1436e7a --- /dev/null +++ b/content/4-component-composition/4-slot-fallback/marko/App.marko @@ -0,0 +1,2 @@ + +I got content! diff --git a/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko b/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko new file mode 100644 index 00000000..e889afde --- /dev/null +++ b/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko @@ -0,0 +1,20 @@ + + <${input.renderBody}> + No content found + + + + + .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; + } + diff --git a/content/4-component-composition/5-context/marko/App.marko b/content/4-component-composition/5-context/marko/App.marko new file mode 100644 index 00000000..c1cbe20f --- /dev/null +++ b/content/4-component-composition/5-context/marko/App.marko @@ -0,0 +1,13 @@ + + + +

Welcome back, ${user.username}

+ + + diff --git a/content/4-component-composition/5-context/marko/UserProfile.marko b/content/4-component-composition/5-context/marko/UserProfile.marko new file mode 100644 index 00000000..19d28dcd --- /dev/null +++ b/content/4-component-composition/5-context/marko/UserProfile.marko @@ -0,0 +1,9 @@ + +
+

My Profile

+

Username: ${username}

+

Email: ${email}

+ +
diff --git a/content/6-form-input/1-input-text/marko/InputHello.marko b/content/6-form-input/1-input-text/marko/InputHello.marko new file mode 100644 index 00000000..308d854f --- /dev/null +++ b/content/6-form-input/1-input-text/marko/InputHello.marko @@ -0,0 +1,3 @@ + +

${text}

+ diff --git a/content/6-form-input/2-checkbox/marko/IsAvailable.marko b/content/6-form-input/2-checkbox/marko/IsAvailable.marko new file mode 100644 index 00000000..8d2d272c --- /dev/null +++ b/content/6-form-input/2-checkbox/marko/IsAvailable.marko @@ -0,0 +1,5 @@ + + diff --git a/content/6-form-input/3-radio/marko/PickPill.marko b/content/6-form-input/3-radio/marko/PickPill.marko new file mode 100644 index 00000000..bebf8b88 --- /dev/null +++ b/content/6-form-input/3-radio/marko/PickPill.marko @@ -0,0 +1,21 @@ + + + +
Picked: ${picked}
+ + + + + diff --git a/content/6-form-input/4-select/marko/ColorSelect.marko b/content/6-form-input/4-select/marko/ColorSelect.marko new file mode 100644 index 00000000..6f8defc6 --- /dev/null +++ b/content/6-form-input/4-select/marko/ColorSelect.marko @@ -0,0 +1,15 @@ +static const colors = [ + { id: 1, text: "red" }, + { id: 2, text: "blue" }, + { id: 3, text: "green" }, + { id: 4, text: "gray", isDisabled: true }, +]; + + + diff --git a/content/7-webapp-features/1-render-app/marko/App.marko b/content/7-webapp-features/1-render-app/marko/App.marko new file mode 100644 index 00000000..159202e8 --- /dev/null +++ b/content/7-webapp-features/1-render-app/marko/App.marko @@ -0,0 +1 @@ +

Hello world

diff --git a/content/7-webapp-features/1-render-app/marko/index.marko b/content/7-webapp-features/1-render-app/marko/index.marko new file mode 100644 index 00000000..f3be8a0d --- /dev/null +++ b/content/7-webapp-features/1-render-app/marko/index.marko @@ -0,0 +1,4 @@ + + + + diff --git a/content/7-webapp-features/2-fetch-data/marko/App.marko b/content/7-webapp-features/2-fetch-data/marko/App.marko new file mode 100644 index 00000000..6d1e7df1 --- /dev/null +++ b/content/7-webapp-features/2-fetch-data/marko/App.marko @@ -0,0 +1,18 @@ + res.json()))> + <@placeholder> +

Fetching users...

+ + <@catch|error|> +

An error occured while fetching users

+ + <@then|{ results: users }|> +
    + +
  • + user +

    ${name.first} ${name.last}

    +
    • + +
+ + diff --git a/content/7-webapp-features/3-router-link/marko/cli.md b/content/7-webapp-features/3-router-link/marko/cli.md new file mode 100644 index 00000000..6c41bf44 --- /dev/null +++ b/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 + +``` diff --git a/content/7-webapp-features/3-router-link/marko/run.md b/content/7-webapp-features/3-router-link/marko/run.md new file mode 100644 index 00000000..ecd82bc4 --- /dev/null +++ b/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 + +``` diff --git a/content/7-webapp-features/4-routing/marko/cli.md b/content/7-webapp-features/4-routing/marko/cli.md new file mode 100644 index 00000000..efbb11db --- /dev/null +++ b/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 +``` diff --git a/content/7-webapp-features/4-routing/marko/run.md b/content/7-webapp-features/4-routing/marko/run.md new file mode 100644 index 00000000..9ba3a53e --- /dev/null +++ b/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,*} // conditionally render HTML, API route, run arbitrary code… +|-- +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 +``` diff --git a/frameworks.mjs b/frameworks.mjs index b71ce18f..6a0d775b 100644 --- a/frameworks.mjs +++ b/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", diff --git a/public/framework/marko.svg b/public/framework/marko.svg new file mode 100644 index 00000000..18597e6d --- /dev/null +++ b/public/framework/marko.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file