{"id":15016467,"url":"https://github.com/clenemt/eleventy-webpack","last_synced_at":"2025-04-12T09:30:31.717Z","repository":{"id":48213151,"uuid":"263952095","full_name":"clenemt/eleventy-webpack","owner":"clenemt","description":"A barebone Eleventy and Webpack boilerplate 🎈","archived":false,"fork":false,"pushed_at":"2021-01-12T22:26:26.000Z","size":1950,"stargazers_count":146,"open_issues_count":6,"forks_count":28,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-26T04:24:20.642Z","etag":null,"topics":["babel","eleventy","prettier","sass","static-site","template","webpack"],"latest_commit_sha":null,"homepage":"https://eleventy-webpack.netlify.app","language":"JavaScript","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/clenemt.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":"2020-05-14T15:25:37.000Z","updated_at":"2025-03-13T12:45:05.000Z","dependencies_parsed_at":"2022-09-21T03:02:06.252Z","dependency_job_id":null,"html_url":"https://github.com/clenemt/eleventy-webpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clenemt%2Feleventy-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clenemt%2Feleventy-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clenemt%2Feleventy-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clenemt%2Feleventy-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clenemt","download_url":"https://codeload.github.com/clenemt/eleventy-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248545913,"owners_count":21122240,"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":["babel","eleventy","prettier","sass","static-site","template","webpack"],"created_at":"2024-09-24T19:48:56.396Z","updated_at":"2025-04-12T09:30:31.688Z","avatar_url":"https://github.com/clenemt.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# eleventy-webpack :balloon:\n\nA barebone [eleventy](https://www.11ty.dev/) and [webpack](https://webpack.js.org/) template. Fork and go.\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/c952af3b-547a-40a6-a999-a7966a846b2c/deploy-status)](https://app.netlify.com/sites/eleventy-webpack/deploys)\n\n[![](https://user-images.githubusercontent.com/447956/82975961-e47f6680-9fab-11ea-9c5c-cdfb6ef2932c.png)](https://eleventy-webpack.netlify.app)\n\n## Features\n\n- :fire: Barebone [11ty](https://www.11ty.dev/) (literally :scream:)\n- :zap: Fast build with per env configs ([babel-env](https://babeljs.io/docs/en/babel-preset-env), [postcss-preset-env](https://github.com/csstools/postcss-preset-env), [webpack](https://webpack.js.org/configuration/#use-different-configuration-file)...)\n- `.js` (ES6, Babel, Polyfills)\n- `.css` (Sass, PostCSS, Autoprefixer)\n- :white_check_mark: Optimized for production (source maps, headers, minified code...)\n- :camera_flash: Responsive images and cached remote images ([@11ty/eleventy-img](https://github.com/11ty/eleventy-img))\n- :package: SVG icon sprite generation\n- :robot: SEO metadata and Open Graph tags\n- :link: Safe external links (`noopener` and `noreferrer`)\n- :memo: Useful shortcodes and filters (date, markdown, sprite icons, responsive images...)\n- :shipit: Neat error overlay ([eleventy-plugin-error-overlay](https://github.com/stevenpetryk/eleventy-plugin-error-overlay))\n- :art: [Prettier](https://prettier.io/) for formatting\n\nLive demo https://eleventy-webpack.netlify.app\n\n## Usage\n\nFirst install the dependencies:\n\n```sh\nnpm install\n```\n\nThen you can:\n\n| Command               | Description                                   |\n| --------------------- | --------------------------------------------- |\n| **`npm run start`**   | Run your website on http://localhost:8080     |\n| **`npm run build`**   | Build your production website inside `/_site` |\n| **`npm run format`**  | Run prettier on all filles except `/_site`    |\n| **`npm run analyze`** | Output info on your bundle size               |\n\nMake sure you use the correct node.js version:\n\n```sh\n# with bash nvm \nnvm use `cat .nvmrc`\n# with windows nvm\nnvm use $(cat .nvmrc)\n# or just install the version specified inside `.nvmrc`\n```\n\n## Webpack\n\nA very simple `webpack.config.js` is included. Feel free to change it.\n\n## Shortcodes\n\nAll shortcodes can be used inside `.md` or `.njk` files.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e\u003ccode\u003eicon\u003c/code\u003e\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nAny SVG added to `src/assets/icons` is bundled into a symbol sprite file and made available through this shortcode.\n```html\n\u003c!-- Assuming `src/assets/icons/github.svg` exist --\u003e\n{% icon \"github\" %} Github icon\n\u003c!-- Will be rendered as --\u003e\n\u003csvg class=\"icon icon--github\" role=\"img\" aria-hidden=\"true\"\u003e\n  \u003cuse xlink:href=\"/assets/images/sprite.svg#github\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n___\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e\u003ccode\u003eimage\u003c/code\u003e\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nCreates a WebP version of the image and the corresponding optimized JPEG / PNG. Images will be created in multiple sizes. See `utils/shortcodes.js` for default values.\n\n```html\n\u003c!-- Assuming `src/assets/images/image.jpeg` of width 330px exist --\u003e\n{% image \"image.jpeg\", \"Image alt\" %}\n\u003c!-- Will be rendered as --\u003e\n\u003cpicture\u003e\n  \u003csource type=\"image/webp\" srcset=\"/assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 330w\" sizes=\"90vw\"\u003e\n  \u003csource type=\"image/png\" srcset=\"/assets/images/678868de-320.png 320w, /assets/images/678868de.png 330w\" sizes=\"90vw\"\u003e\n  \u003cimg loading=\"lazy\" src=\"/assets/images/678868de.png\" alt=\"Image alt\" width=\"330\" height=\"580\"\u003e\n\u003c/picture\u003e\n\n\u003c!-- If a title is passed the shortcode will output a \u003cfigure\u003e with \u003cfigcaption\u003e --\u003e\n{% image \"image.jpeg\", \"Image alt\", \"Image title\" %}\n\u003c!-- Will be rendered as --\u003e\n\u003cfigure\u003e\n  \u003cpicture\u003e\n    \u003csource type=\"image/webp\" srcset=\"/assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 330w\" sizes=\"90vw\"\u003e\n    \u003csource type=\"image/png\" srcset=\"/assets/images/678868de-320.png 320w, /assets/images/678868de.png 330w\" sizes=\"90vw\"\u003e\n    \u003cimg loading=\"lazy\" src=\"/assets/images/678868de.png\" alt=\"Image alt\" width=\"330\" height=\"580\"\u003e\n  \u003c/picture\u003e\n  \u003cfigcaption\u003eImage title\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003c!-- Additional options --\u003e\n{% image [100,100], \"image.jpeg\", \"Image alt\", \"Image title\", \"my-class\", false, \"90vw\" %}\n\u003c!-- Will be rendered as --\u003e\n\u003cfigure class=\"fig-my-class\"\u003e\n  \u003cpicture\u003e\n    \u003csource type=\"image/webp\" srcset=\"...\" sizes=\"90vw\"\u003e\n    \u003csource type=\"image/png\" srcset=\"...\" sizes=\"90vw\"\u003e\n    \u003cimg class=\"img-my-class\" loading=\"eager\" src=\"...\" alt=\"Image alt\" width=\"100\" height=\"100\"\u003e\n  \u003c/picture\u003e\n  \u003cfigcaption\u003eImage title\u003c/figcaption\u003e\n\u003c/figure\u003e\n```\n___\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e\u003ccode\u003emarkdown\u003c/code\u003e\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nEmbed markdown easily.\n\n```html\n{% markdown %}\nLet's you use **Markdown** like _this_.\nOr with includes {%- include 'content.md' -%}.\n{% endmarkdown %}\n```\n___\n\u003c/details\u003e\n\n## Filters\n\nAll filters can be used inside `.md` or `.njk` files.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e\u003ccode\u003eformat\u003c/code\u003e\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nFormat the passed date with [date-fns](https://date-fns.org/v2.16.1/docs/format):\n\n```html\n\u003c!-- Assuming page.date is a javascript date --\u003e\n{{ page.date | format(\"yyyy\") }}\n\u003c!-- Will be rendered as --\u003e\n2020\n```\n___\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e\u003ccode\u003eformatISO\u003c/code\u003e\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nFormat the passed date according to [ISO format](https://date-fns.org/v2.16.1/docs/formatISO):\n\n```html\n\u003c!-- Assuming page.date is a javascript date --\u003e\n{{ page.date | formatISO }}\n\u003c!-- Will be rendered as --\u003e\n2020-09-18T19:00:52Z\n```\n___\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e\u003ccode\u003emarkdown\u003c/code\u003e\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nParse the passed string with markdown:\n\n```html\n\u003c!-- Assuming page.title is `# My header` --\u003e\n{{ page.title | markdown }}\n\u003c!-- Will be rendered as --\u003e\n\u003ch1\u003eMy header\u003c/h1\u003e\n```\n___\n\u003c/details\u003e\n\n## Thanks\n\n- https://github.com/gregives/twelvety\n- https://github.com/hankchizljaw/hylia\n- https://github.com/MadeByMike/supermaya\n- https://github.com/jeromecoupe/webstoemp\n- https://github.com/maxboeck/eleventastic\n- https://github.com/deviousdodo/elevenpack\n- https://github.com/ixartz/Eleventy-Starter-Boilerplate\n- https://github.com/google/eleventy-high-performance-blog\n- https://github.com/danurbanowicz/eleventy-netlify-boilerplate\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclenemt%2Feleventy-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclenemt%2Feleventy-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclenemt%2Feleventy-webpack/lists"}