Upgrade to 11ty v2-beta

eleventy.config.cjs

@@ -5,6 +5,7 @@ const yaml = require('js-yaml');
 const markdown = require('markdown-it');
 const markdownDefList = require('markdown-it-deflist');
 const typogrify = require('typogr');
+const { EleventyRenderPlugin } = require('@11ty/eleventy');
 
 /** @param {import('@11ty/eleventy').UserConfig} eleventyConfig */
 module.exports = (eleventyConfig) => {
@@ -12,9 +13,6 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addPassthroughCopy('source/assets/img');
   eleventyConfig.addPassthroughCopy('source/favicon.ico');
 
-  eleventyConfig.addWatchTarget('source/assets/dist');
-  eleventyConfig.addWatchTarget('source/assets/img');
-
   eleventyConfig.setLiquidOptions({
     jsTruthy: true,
   });
@@ -22,11 +20,8 @@ module.exports = (eleventyConfig) => {
 
   const mdown = markdown({
     html: true,
-    breaks: false,
     typographer: true,
-  })
-    .disable('code')
-    .use(markdownDefList);
+  }).use(markdownDefList);
 
   eleventyConfig.setLibrary('md', mdown);
   eleventyConfig.addDataExtension('yaml', yaml.load);
@@ -61,6 +56,8 @@ module.exports = (eleventyConfig) => {
     page.url.startsWith('/documentation/js-api/'),
   );
 
+  eleventyConfig.addPlugin(EleventyRenderPlugin);
+
   // settings
   return {
     dir: {

package.json

@@ -25,8 +25,8 @@
     "build-dev:scripts": "rollup -c",
     "build-prod:scripts": "BABEL_ENV=production rollup -c",
     "watch:scripts": "npm run build-dev:scripts -- -w",
-    "build:11ty": "eleventy --config=.eleventy.cjs",
-    "watch:11ty": "eleventy --config=.eleventy.cjs --serve",
+    "build:11ty": "eleventy",
+    "watch:11ty": "eleventy --serve --incremental",
     "tsc": "tsc",
     "prettier": "prettier --write .",
     "prettier:ci": "prettier --check .",
@@ -39,7 +39,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^1.0.2",
+    "@11ty/eleventy": "^2.0.0-0",
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",

source/_includes/footer.liquid

@@ -6,15 +6,18 @@
   <div class="sl-l-container sl-l-section">
     <div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters">
       <div class="sl-l-grid__column">
-        <p>
+        {% renderTemplate 'liquid,md' %}
           Sass &copy; 2006&ndash;{{ 'now' | date: '%Y' }} the Sass team, and numerous contributors.
-          It is available for use and modification under the <a href="https://github.com/sass/dart-sass/blob/master/LICENSE">MIT&nbsp;License</a>.
-        </p>
+          It is available for use and modification under the [MIT&nbsp;License](https://github.com/sass/dart-sass/blob/master/LICENSE).
+        {% endrenderTemplate %}
 
         <nav class="sl-c-list-horizontal-wrapper">
-          {% markdown -%}
-            {% include 'footer_links.md' %}
-          {%- endmarkdown %}
+          {% renderTemplate 'md' %}
+- [Sass on GitHub](https://github.com/sass)
+- [Website Source Code](https://github.com/sass/sass-site)
+- [Style Guide](/styleguide)
+- [Community Guidelines](/community-guidelines)
+          {% endrenderTemplate %}
         </nav>
       </div>
       <div class="sl-l-grid__column sl-l-large-grid__column--auto-size sl-l-large-grid--justify-right">

source/_includes/footer_links.md

@@ -1,4 +0,0 @@
-- [Sass on GitHub](https://github.com/sass)
-- [Website Source Code](https://github.com/sass/sass-site)
-- [Style Guide](/styleguide)
-- [Community Guidelines](/community-guidelines)

source/_includes/header.liquid

@@ -6,10 +6,10 @@
   <div class="sl-c-alert sl-c-alert--info" style="background: #000; padding: 3rem 0; text-align: left;">
     <div class="sl-l-container">
       <h2 style="margin-top: 0;">Black Lives Matter</h2>
-      <p>
+      {% renderTemplate 'md' %}
         Sass stands with the protesters against police violence. We encourage our users to
-        <strong>get in the streets and join them if you can</strong>.
-      </p>
+        **get in the streets and join them if you can**.
+      {% endrenderTemplate %}
     </div>
   </div>
 
@@ -17,10 +17,7 @@
   <div class="sl-l-container">
     <div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters">
       <p class="sl-l-grid__column sl-r-banner__brand">
-        <a href="/"><img
-            height="48"
-            alt="Sass"
-            src="/assets/img/logos/logo.svg"></a>
+        <a href="/"><img height="48" alt="Sass" src="/assets/img/logos/logo.svg"></a>
       </p>
       <nav
         class="sl-r-banner__navigation sl-l-grid__column sl-l-large-grid sl-l-large-grid__column--auto-size sl-c-list-horizontal-wrapper"
@@ -28,9 +25,14 @@
         itemscope="itemscope"
         role="navigation"
         aria-label="Site navigation">
-        {% markdown -%}
-          {% include 'header_links.md' %}
-        {%- endmarkdown %}
+        {% renderTemplate 'md' %}
+- [Install](/install)
+- [Learn Sass](/guide)
+- [Blog](/blog)
+- [Documentation](/documentation)
+- [Get Involved](/community)
+- <div id="docsearch"></div>
+        {% endrenderTemplate %}
       </nav>
     </div>
   </div>

source/_includes/header_links.md

@@ -1,6 +0,0 @@
-- [Install](/install)
-- [Learn Sass](/guide)
-- [Blog](/blog)
-- [Documentation](/documentation)
-- [Get Involved](/community)
-- <div id="docsearch"></div>