GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → clenemt → Eleventy Webpack

clenemt / Eleventy Webpack

Licence: mit
A barebone Eleventy and Webpack boilerplate 🎈

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

webpacktemplatesassbabelstatic-siteprettier

Projects that are alternatives of or similar to Eleventy Webpack

Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-52.94%)
Mutual labels:  webpack, prettier, babel, template
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: ✭ 971 (+1327.94%)
Mutual labels:  webpack, prettier, babel, sass
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+1394.12%)
Mutual labels:  webpack, babel, static-site, sass
Vue Web Extension
🛠️ A Vue CLI 3+ preset (previously a Vue CLI 2 boilerplate) for quickly starting a web extension with Vue, Babel, ESLint and more!
Stars: ✭ 1,147 (+1586.76%)
Mutual labels:  webpack, prettier, babel
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: ✭ 65 (-4.41%)
Mutual labels:  webpack, prettier, babel
Naomi
Sublime Text enhanced syntax highlighting for JavaScript ES6/ES7/ES2015/ES2016/ES2017+, Babel, FlowType, React JSX, Styled Components, HTML5, SCSS3, PHP 7, phpDoc, PHPUnit, MQL4. Basic: Git config files.
Stars: ✭ 544 (+700%)
Mutual labels:  webpack, babel, sass
Threejs Webpack Es6 Boilerplate
A basic boilerplate for a Three.js project compiled with Webpack and transpiled via Babel to enable using ES6 syntax.
Stars: ✭ 267 (+292.65%)
Mutual labels:  webpack, babel, sass
Vue
Stars: ✭ 65 (-4.41%)
Mutual labels:  webpack, babel, sass
React Webpack Typescript Starter
Minimal starter with hot module replacement (HMR) for rapid development.
Stars: ✭ 632 (+829.41%)
Mutual labels:  webpack, babel, sass
Serverless Typescript Starter
🗄🙅‍♀️ Deploy your next serverless JavaScript function in seconds
Stars: ✭ 653 (+860.29%)
Mutual labels:  webpack, prettier, babel
Online Bling
Stars: ✭ 9 (-86.76%)
Mutual labels:  webpack, babel, sass
Webpack Boilerplate
A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board
Stars: ✭ 404 (+494.12%)
Mutual labels:  webpack, babel, sass
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: ✭ 339 (+398.53%)
Mutual labels:  webpack, babel, sass
React App
Create React App with server-side code support
Stars: ✭ 614 (+802.94%)
Mutual labels:  webpack, babel, template
React Redux Sass Starter
Everything you need to get started with a basic React application
Stars: ✭ 293 (+330.88%)
Mutual labels:  webpack, babel, sass
Slinky
A light-weight, responsive, mobile-like navigation menu plugin
Stars: ✭ 649 (+854.41%)
Mutual labels:  webpack, babel, sass
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (+236.76%)
Mutual labels:  webpack, prettier, babel
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: ✭ 228 (+235.29%)
Mutual labels:  webpack, babel, sass
React Ssr Setup
React Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties
Stars: ✭ 678 (+897.06%)
Mutual labels:  webpack, prettier, babel
Wordpress Starter
📦 A starter template for WordPress websites
Stars: ✭ 26 (-61.76%)
Mutual labels:  webpack, babel, sass
View All Similar Projects ➔

eleventy-webpack 🎈

A barebone eleventy and webpack template. Fork and go.

Netlify Status

Features

  • 🔥 Barebone 11ty (literally 😱)
  • ⚡️ Fast build with per env configs (babel-env, postcss-preset-env, webpack...)
  • .js (ES6, Babel, Polyfills)
  • .css (Sass, PostCSS, Autoprefixer)
  • ✅ Optimized for production (source maps, headers, minified code...)
  • 📸 Responsive images and cached remote images (@11ty/eleventy-img)
  • 📦 SVG icon sprite generation
  • 🤖 SEO metadata and Open Graph tags
  • 🔗 Safe external links (noopener and noreferrer)
  • 📝 Useful shortcodes and filters (date, markdown, sprite icons, responsive images...)
  • Neat error overlay (eleventy-plugin-error-overlay)
  • 🎨 Prettier for formatting

Live demo https://eleventy-webpack.netlify.app

Usage

First install the dependencies:

npm install

Then you can:

Command Description
npm run start Run your website on http://localhost:8080
npm run build Build your production website inside /_site
npm run format Run prettier on all filles except /_site
npm run analyze Output info on your bundle size

Make sure you use the correct node.js version:

# with bash nvm 
nvm use `cat .nvmrc`
# with windows nvm
nvm use $(cat .nvmrc)
# or just install the version specified inside `.nvmrc`

Webpack

A very simple webpack.config.js is included. Feel free to change it.

Shortcodes

All shortcodes can be used inside .md or .njk files.

icon

Any SVG added to src/assets/icons is bundled into a symbol sprite file and made available through this shortcode.

<!-- Assuming `src/assets/icons/github.svg` exist -->
{% icon "github" %} Github icon
<!-- Will be rendered as -->
<svg class="icon icon--github" role="img" aria-hidden="true">
  <use xlink:href="/assets/images/sprite.svg#github"></use>
</svg>
image

Creates 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.

<!-- Assuming `src/assets/images/image.jpeg` of width 330px exist -->
{% image "image.jpeg", "Image alt" %}
<!-- Will be rendered as -->
<picture>
  <source type="image/webp" srcset="/assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 330w" sizes="90vw">
  <source type="image/png" srcset="/assets/images/678868de-320.png 320w, /assets/images/678868de.png 330w" sizes="90vw">
  <img loading="lazy" src="/assets/images/678868de.png" alt="Image alt" width="330" height="580">
</picture>

<!-- If a title is passed the shortcode will output a <figure> with <figcaption> -->
{% image "image.jpeg", "Image alt", "Image title" %}
<!-- Will be rendered as -->
<figure>
  <picture>
    <source type="image/webp" srcset="/assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 330w" sizes="90vw">
    <source type="image/png" srcset="/assets/images/678868de-320.png 320w, /assets/images/678868de.png 330w" sizes="90vw">
    <img loading="lazy" src="/assets/images/678868de.png" alt="Image alt" width="330" height="580">
  </picture>
  <figcaption>Image title</figcaption>
</figure>

<!-- Additional options -->
{% image [100,100], "image.jpeg", "Image alt", "Image title", "my-class", false, "90vw" %}
<!-- Will be rendered as -->
<figure class="fig-my-class">
  <picture>
    <source type="image/webp" srcset="..." sizes="90vw">
    <source type="image/png" srcset="..." sizes="90vw">
    <img class="img-my-class" loading="eager" src="..." alt="Image alt" width="100" height="100">
  </picture>
  <figcaption>Image title</figcaption>
</figure>
markdown

Embed markdown easily.

{% markdown %}
Let's you use **Markdown** like _this_.
Or with includes {%- include 'content.md' -%}.
{% endmarkdown %}

Filters

All filters can be used inside .md or .njk files.

format

Format the passed date with date-fns:

<!-- Assuming page.date is a javascript date -->
{{ page.date | format("yyyy") }}
<!-- Will be rendered as -->
2020
formatISO

Format the passed date according to ISO format:

<!-- Assuming page.date is a javascript date -->
{{ page.date | formatISO }}
<!-- Will be rendered as -->
2020-09-18T19:00:52Z
markdown

Parse the passed string with markdown:

<!-- Assuming page.title is `# My header` -->
{{ page.title | markdown }}
<!-- Will be rendered as -->
<h1>My header</h1>

Thanks

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].