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 096756a5..54c99e34 100644 --- a/README.md +++ b/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 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/2-templating/2-styling/marko/CssStyle.marko b/content/2-templating/2-styling/marko/CssStyle.marko index 708991c3..529b9dbd 100644 --- a/content/2-templating/2-styling/marko/CssStyle.marko +++ b/content/2-templating/2-styling/marko/CssStyle.marko @@ -1,7 +1,7 @@ I am red - diff --git a/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko b/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko index f558610b..e889afde 100644 --- a/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko +++ b/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko @@ -1,16 +1,20 @@ - + + + .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 index 3694c90a..c1cbe20f 100644 --- a/content/4-component-composition/5-context/marko/App.marko +++ b/content/4-component-composition/5-context/marko/App.marko @@ -3,12 +3,11 @@ username: "unicorn42", email: "unicorn42@example.com", }/> - -function updateUsername(newUsername) { +

Welcome back, ${user.username}

- + diff --git a/content/7-webapp-features/1-render-app/marko/index.marko b/content/7-webapp-features/1-render-app/marko/index.marko index 75bc3eaf..f3be8a0d 100644 --- a/content/7-webapp-features/1-render-app/marko/index.marko +++ b/content/7-webapp-features/1-render-app/marko/index.marko @@ -1,4 +1,4 @@ - + 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..418b0cbd --- /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,*} // 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 +``` diff --git a/frameworks.mjs b/frameworks.mjs index 272e0bda..9b5ffdcc 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", @@ -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"]); - }, - }, ];