eleventy webpack

onze-webpack ?

Um modelo barebone onze e webpack. Garfo e pronto.

Características

• Barebone 11ty (literalmente?)
• ⚡ Construção rápida com configurações por ambiente (babel-env, postcss-preset-env, webpack...)
• .js (ES6, Babel, Polyfills)
• .css (Sass, PostCSS, Autoprefixador)
• ✅ Otimizado para produção (mapas de origem, cabeçalhos, código minificado...)
• ? Imagens responsivas e imagens remotas em cache (@11ty/eleventy-img)
• ? Geração de sprites de ícone SVG
• ? Metadados SEO e tags Open Graph
• ? Links externos seguros ( noopener e noreferrer )
• Códigos de acesso e filtros úteis (data, markdown, ícones de sprites, imagens responsivas...)
• Sobreposição de erro bacana (onze-plugin-error-overlay)
• ? Mais bonito para formatação

Demonstração ao vivo https://eleventy-webpack.netlify.app

Uso

Primeiro instale as dependências:

npm install

Então você pode:

Comando	Descrição
npm run start	Execute seu site em http://localhost:8080
npm run build	Crie seu site de produção dentro de /_site
npm run format	Execute mais bonito em todos os preenchimentos, exceto /_site
npm run analyze	Informações de saída sobre o tamanho do seu pacote

Certifique-se de usar a versão correta do node.js:

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

Webpack

Um webpack.config.js muito simples está incluído. Sinta-se à vontade para alterá-lo.

Códigos de acesso

Todos os códigos de acesso podem ser usados ​​dentro de arquivos .md ou .njk .

icon

Qualquer SVG adicionado a src/assets/icons é agrupado em um arquivo sprite de símbolo e disponibilizado por meio deste 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

Cria uma versão WebP da imagem e o JPEG/PNG otimizado correspondente. As imagens serão criadas em vários tamanhos. Consulte utils/shortcodes.js para valores padrão.

 <!-- 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

Incorpore descontos facilmente.

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

---

Filtros

Todos os filtros podem ser usados ​​dentro de arquivos .md ou .njk .

format

Formate a data passada com date-fns:

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

---

formatISO

Formate a data passada de acordo com o formato ISO:

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

---

markdown

Analise a string passada com markdown:

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

---

Obrigado

• https://github.com/gregives/twelvety
• https://github.com/hankchizljaw/hylia
• https://github.com/MadeByMike/supermaya
• https://github.com/jeromecoupe/webstoemp
• https://github.com/maxboeck/eleventastic
• https://github.com/deviousdodo/elevenpack
• https://github.com/ixartz/Eleventy-Starter-Boilerplate
• https://github.com/google/eleventy-high-performance-blog
• https://github.com/danurbanowicz/eleventy-netlify-boilerplate