{"id":15208960,"url":"https://github.com/voorjaar/eleventy-plugin-mtos","last_synced_at":"2025-03-06T19:41:39.217Z","repository":{"id":63107678,"uuid":"564733654","full_name":"voorjaar/eleventy-plugin-mtos","owner":"voorjaar","description":"A plugin for Eleventy that turns your site into a single page application.","archived":false,"fork":false,"pushed_at":"2022-11-14T13:34:35.000Z","size":97,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-18T07:04:16.977Z","etag":null,"topics":["11ty","eleventy","eleventy-plugin","mpa","mtos","spa"],"latest_commit_sha":null,"homepage":"https://voorjaar.github.io/eleventy-plugin-mtos/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/voorjaar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-11T11:21:37.000Z","updated_at":"2024-10-16T07:29:00.000Z","dependencies_parsed_at":"2023-01-21T18:19:42.474Z","dependency_job_id":null,"html_url":"https://github.com/voorjaar/eleventy-plugin-mtos","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voorjaar%2Feleventy-plugin-mtos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voorjaar%2Feleventy-plugin-mtos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voorjaar%2Feleventy-plugin-mtos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voorjaar%2Feleventy-plugin-mtos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/voorjaar","download_url":"https://codeload.github.com/voorjaar/eleventy-plugin-mtos/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242276918,"owners_count":20101528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","eleventy","eleventy-plugin","mpa","mtos","spa"],"created_at":"2024-09-28T07:05:07.296Z","updated_at":"2025-03-06T19:41:39.192Z","avatar_url":"https://github.com/voorjaar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# eleventy-plugin-mtos\n\nA plugin for [Eleventy](https://www.11ty.dev/) that turns your site into a single page application.\n\n\u003e Checkout [this page](https://voorjaar.github.io/eleventy-plugin-mtos/) for a preview demo. You can compare it to [the site without mtos confgured](https://eleventy-base-blog.netlify.app/).\n\n[![npm](https://img.shields.io/npm/v/eleventy-plugin-mtos.svg)](https://www.npmjs.com/package/eleventy-plugin-mtos)\n\n## What it does?\n\nThe plugin uses Eleventy's [addTransform API](https://www.11ty.dev/docs/config/#transforms) to add [mtos](https://github.com/voorjaar/mtos) to your HTML head. You can configure to use a CDN or serve static script.\n\nYou still serve the static HTML files, but the user experience is the same as SPA with incremental requests via fetch API on the client side. And you can also add transition animations, progress bar, etc.\n\n## Installation\n\nInstall the dependency from npm:\n\n```bash\nnpm install eleventy-plugin-mtos\n```\n\nUpdate your 11ty configuration:\n\n```js\nconst mtos = require(\"eleventy-plugin-mtos\");\n\nmodule.exports = (eleventyConfig) =\u003e {\n  eleventyConfig.addPlugin(mtos, {\n    /* options */\n  });\n};\n```\n\n## Options\n\nThe following options can be used to configure this plugin.\n\n| Option       | Type                 | Description                                                                                                                                      |\n| ------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |\n| cdn          | `boolean`            | Using a CDN instead of static script. Defaults to `false`.                                                                                       |\n| cdnLink      | `string`             | The CDN link of [mtos](https://github.com/voorjaar/mtos). Defaults to `https://cdn.jsdelivr.net/npm/mtos@${mtos.version}/dist/mtos-iife.min.js`. |\n| customJs     | `string \\| string[]` | Path to a custom JS file to for the script to import.                                                                                            |\n| customCss    | `string \\| string[]` | Path to a custom Css file to for the script to import.                                                                                           |\n| customStyle  | `string`             | Add custom css content to document head.                                                                                                         |\n| customScript | `string`             | Add custom script content to document head.                                                                                                      |\n| customHead   | `string \\| string[]` | Add custom DOM elements to head.                                                                                                                 |\n\n## Advanced\n\nBy using `customJs` \\| `customCss` \\| `customStyle` \\| `customScript` options, you can implement some SPA features, such as adding page transition animation and page loading progress bar.\n\nCreate a css file named `assets/custom.css`, then add the following css:\n\n```css\n.animated {\n  -webkit-animation-duration: 0.5s;\n  animation-duration: 0.5s;\n  -webkit-animation-fill-mode: both;\n  animation-fill-mode: both;\n}\n\n@-webkit-keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n.fadeIn {\n  -webkit-animation-name: fadeIn;\n  animation-name: fadeIn;\n}\n\n.progress {\n  height: 2px;\n  width: 100%;\n  background-color: #abb8c6;\n}\n\n.progress-bar {\n  width: 0%;\n  height: 100%;\n  background-color: #1aa4f4;\n  transition: width 0.4s ease;\n}\n```\n\nCreate a js file named `assets/custom.js`, add the following script:\n\n```js\nfunction updateProgress(n) {\n  const bar = document.querySelector(\".progress-bar\");\n  if (!bar) return;\n  bar.style.width = n + \"%\";\n}\n\nfunction loadProgress(n = 0) {\n  const header = document.querySelector(\"header\");\n  if (!header) return;\n  const bar = document.createElement(\"div\");\n  bar.classList.add(\"progress\");\n\n  const p = document.createElement(\"div\");\n  p.classList.add(\"progress-bar\");\n  p.style.width = n + \"%\";\n\n  bar.appendChild(p);\n  header.appendChild(bar);\n\n  setTimeout(() =\u003e {\n    updateProgress(100);\n  }, 150);\n}\n\nwindow.addEventListener(\"load\", loadProgress);\n\nmtos.setup({\n  onBeforeElUpdated(fromEl, toEl) {\n    if (toEl.tagName === \"DIV\" \u0026\u0026 toEl.classList.contains(\"col-content\")) {\n      toEl.classList.add(\"animated\", \"fadeIn\");\n    }\n  },\n  onElUpdated(el) {\n    if (el.tagName === \"DIV\" \u0026\u0026 el.classList.contains(\"col-content\")) {\n      setTimeout(() =\u003e {\n        el.classList.remove(\"animated\", \"fadeIn\");\n      }, 250);\n    }\n  },\n  onFetchStart() {\n    updateProgress(0);\n  },\n  onFetchEnd() {\n    updateProgress(30);\n  },\n  onPageRendered() {\n    loadProgress(30);\n  },\n});\n```\n\nThen we can load the animation and progress:\n\n```js\nconst mtos = require(\"eleventy-plugin-mtos\");\n\nmodule.exports = (eleventyConfig) =\u003e {\n  eleventyConfig.addPlugin(mtos, {\n    customJs: \"assets/custom.js\",\n    customCss: \"assets/custom.css\",\n  });\n};\n```\n\n**Note**: The above steps are just examples, you can define your own animation and progress bar as needed.\n\n## License\n\n[MIT](https://github.com/voorjaar/eleventy-plugin-mtos/blob/main/LICENSE)\n\nCopyright (c) 2022, Raven Satir\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoorjaar%2Feleventy-plugin-mtos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvoorjaar%2Feleventy-plugin-mtos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoorjaar%2Feleventy-plugin-mtos/lists"}