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 6be5bd81..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 @@ -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 SolidJS - + 92% progress - [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 Qwik - + 92% progress - [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 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 @@ -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 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/ember/app.hbs b/content/4-component-composition/5-context/ember/app.hbs new file mode 100644 index 00000000..bbbdd3cf --- /dev/null +++ b/content/4-component-composition/5-context/ember/app.hbs @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/4-component-composition/5-context/ember/user-profile.hbs b/content/4-component-composition/5-context/ember/user-profile.hbs new file mode 100644 index 00000000..b8b77a8c --- /dev/null +++ b/content/4-component-composition/5-context/ember/user-profile.hbs @@ -0,0 +1,8 @@ +
+

My Profile

+

Username: {{this.user.username}}

+

Email: {{this.user.email}}

+ +
\ No newline at end of file diff --git a/content/4-component-composition/5-context/ember/user-profile.js b/content/4-component-composition/5-context/ember/user-profile.js new file mode 100644 index 00000000..64a3e037 --- /dev/null +++ b/content/4-component-composition/5-context/ember/user-profile.js @@ -0,0 +1,10 @@ +import Component from '@glimmer/component'; +import { service } from '@ember/service'; + +export default class UserProfileComponent extends Component { + @service userService; + + get user() { + return this.userService.user; + } +} diff --git a/content/4-component-composition/5-context/ember/user-service.js b/content/4-component-composition/5-context/ember/user-service.js new file mode 100644 index 00000000..fac7602c --- /dev/null +++ b/content/4-component-composition/5-context/ember/user-service.js @@ -0,0 +1,22 @@ +import Service from '@ember/service'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class UserServiceService extends Service { + @tracked id = 1; + @tracked username = 'unicorn42'; + @tracked email = 'unicorn42@example.com'; + + get user() { + return { + id: this.id, + username: this.username, + email: this.email, + }; + } + + @action + updateUserName(newUsername) { + this.username = newUsername; + } +} 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/4-component-composition/5-context/qwik/App.tsx b/content/4-component-composition/5-context/qwik/App.tsx new file mode 100644 index 00000000..00e295bf --- /dev/null +++ b/content/4-component-composition/5-context/qwik/App.tsx @@ -0,0 +1,33 @@ +import { + component$, + useStore, + useContextProvider, + createContext, + $, +} from "@builder.io/qwik"; +import UserProfile from "./UserProfile"; + +export const UserContext = createContext("user-context"); + +const App = component$(() => { + const user = useStore({ + id: 1, + username: "unicorn42", + email: "unicorn42@example.com", + }); + + const updateUsername = $((newUsername) => { + user.username = newUsername; + }); + + useContextProvider(UserContext, { user, updateUsername }); + + return ( + <> +

Welcome back, {user.username}

+ + + ); +}); + +export default App; diff --git a/content/4-component-composition/5-context/qwik/UserProfile.tsx b/content/4-component-composition/5-context/qwik/UserProfile.tsx new file mode 100644 index 00000000..15830c00 --- /dev/null +++ b/content/4-component-composition/5-context/qwik/UserProfile.tsx @@ -0,0 +1,19 @@ +import { component$, useContext } from "@builder.io/qwik"; +import { UserContext } from "./App"; + +const UserProfile = component$(() => { + const { user, updateUsername } = useContext(UserContext); + + return ( +
+

My Profile

+

Username: {user.username}

+

Email: {user.email}

+ +
+ ); +}); + +export default UserProfile; diff --git a/content/4-component-composition/5-context/react/App.jsx b/content/4-component-composition/5-context/react/App.jsx index 9469aa8f..dee7d03a 100644 --- a/content/4-component-composition/5-context/react/App.jsx +++ b/content/4-component-composition/5-context/react/App.jsx @@ -1,7 +1,7 @@ import { useState, createContext } from "react"; import UserProfile from "./UserProfile"; -const UserContext = createContext(); +export const UserContext = createContext(); export default function App() { // In a real app, you would fetch the user data from an API diff --git a/content/4-component-composition/5-context/vue2/App.vue b/content/4-component-composition/5-context/vue2/App.vue new file mode 100644 index 00000000..384d721e --- /dev/null +++ b/content/4-component-composition/5-context/vue2/App.vue @@ -0,0 +1,35 @@ + + + diff --git a/content/4-component-composition/5-context/vue2/UserProfile.vue b/content/4-component-composition/5-context/vue2/UserProfile.vue new file mode 100644 index 00000000..780af1a7 --- /dev/null +++ b/content/4-component-composition/5-context/vue2/UserProfile.vue @@ -0,0 +1,16 @@ + + + diff --git a/content/4-component-composition/5-context/vue3/App.vue b/content/4-component-composition/5-context/vue3/App.vue new file mode 100644 index 00000000..bd47c300 --- /dev/null +++ b/content/4-component-composition/5-context/vue3/App.vue @@ -0,0 +1,21 @@ + + + diff --git a/content/4-component-composition/5-context/vue3/UserProfile.vue b/content/4-component-composition/5-context/vue3/UserProfile.vue new file mode 100644 index 00000000..31e23228 --- /dev/null +++ b/content/4-component-composition/5-context/vue3/UserProfile.vue @@ -0,0 +1,15 @@ + + + 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/1-render-app/solid/App.jsx b/content/7-webapp-features/1-render-app/solid/App.jsx new file mode 100644 index 00000000..5f06ef03 --- /dev/null +++ b/content/7-webapp-features/1-render-app/solid/App.jsx @@ -0,0 +1,3 @@ +export default function App() { + return

Hello world

; +} diff --git a/content/7-webapp-features/1-render-app/solid/index.html b/content/7-webapp-features/1-render-app/solid/index.html new file mode 100644 index 00000000..fe8efca8 --- /dev/null +++ b/content/7-webapp-features/1-render-app/solid/index.html @@ -0,0 +1,7 @@ + + + +
+ + + diff --git a/content/7-webapp-features/1-render-app/solid/main.jsx b/content/7-webapp-features/1-render-app/solid/main.jsx new file mode 100644 index 00000000..90a4e2fa --- /dev/null +++ b/content/7-webapp-features/1-render-app/solid/main.jsx @@ -0,0 +1,4 @@ +import { render } from "solid-js/web"; +import App from "./App"; + +render(() => , document.getElementById("app")); 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 fba15e07..6a0d775b 100644 --- a/frameworks.mjs +++ b/frameworks.mjs @@ -79,7 +79,7 @@ export default [ playgroundURL: "https://playground.solidjs.com/", documentationURL: "https://www.solidjs.com/", filesSorter(files) { - return sortAllFilenames(files, ["App.jsx"]); + return sortAllFilenames(files, ["index.html", "App.jsx"]); }, }, { @@ -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/index.html b/index.html index d61306fa..cd81ce1b 100644 --- a/index.html +++ b/index.html @@ -48,7 +48,7 @@ font-family: "Mona Sans"; src: url("/font/Mona-Sans.woff2") format("woff2 supports variations"), url("/font/Mona-Sans.woff2") format("woff2-variations"); - font-weight: 200 500; + font-weight: 200 500 600; font-stretch: 75% 125%; font-display: swap; } 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 diff --git a/public/framework/qwik.svg b/public/framework/qwik.svg index b9337f62..96b61bf5 100644 --- a/public/framework/qwik.svg +++ b/public/framework/qwik.svg @@ -1,1784 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + \ No newline at end of file diff --git a/src/App.svelte b/src/App.svelte index e21936cc..4a5f81d5 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -130,7 +130,7 @@