Merge pull request sass#7 from oddbird/install

Add Install page.

.eleventy.cjs → eleventy.config.cjs

@@ -3,27 +3,25 @@
 const formatDistanceToNow = require('date-fns/formatDistanceToNow');
 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) => {
   eleventyConfig.addPassthroughCopy('source/assets/dist');
   eleventyConfig.addPassthroughCopy('source/assets/img');
   eleventyConfig.addPassthroughCopy('source/favicon.ico');
 
-  eleventyConfig.addWatchTarget('source/assets/dist');
-  eleventyConfig.addWatchTarget('source/assets/img');
-
   eleventyConfig.setLiquidOptions({
     jsTruthy: true,
   });
   eleventyConfig.setUseGitIgnore(false);
 
   const mdown = markdown({
     html: true,
-    breaks: false,
     typographer: true,
-  }).disable('code');
+  }).use(markdownDefList);
 
   eleventyConfig.setLibrary('md', mdown);
   eleventyConfig.addDataExtension('yaml', yaml.load);
@@ -58,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",
@@ -62,6 +62,7 @@
     "jquery": "^3.6.3",
     "jquery-ui": "^1.13.2",
     "js-yaml": "^4.1.0",
+    "markdown-it-deflist": "^2.1.0",
     "netlify-plugin-11ty": "^1.3.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.3",

source/_includes/footer.liquid

@@ -6,16 +6,12 @@
   <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 %}
-        </nav>
+        {% renderFile 'source/_includes/footer_nav.md' %}
       </div>
       <div class="sl-l-grid__column sl-l-large-grid__column--auto-size sl-l-large-grid--justify-right">
         <a

source/_includes/footer_links.md → source/_includes/footer_nav.md

@@ -1,4 +1,8 @@
+<nav class="sl-c-list-horizontal-wrapper">
+
 - [Sass on GitHub](https://github.com/sass)
 - [Website Source Code](https://github.com/sass/sass-site)
 - [Style Guide](/styleguide)
 - [Community Guidelines](/community-guidelines)
+
+</nav>

source/_includes/header.liquid

@@ -6,32 +6,21 @@
   <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>
 
   <div class="sl-c-pop-stripe"></div>
   <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"
-        itemtype="http://schema.org/SiteNavigationElement"
-        itemscope="itemscope"
-        role="navigation"
-        aria-label="Site navigation">
-        {% markdown -%}
-          {% include 'header_links.md' %}
-        {%- endmarkdown %}
-      </nav>
+
+      {% renderFile 'source/_includes/header_nav.md' %}
     </div>
   </div>
 </header>

source/_includes/header_nav.md

@@ -0,0 +1,19 @@
+<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"
+  itemtype="http://schema.org/SiteNavigationElement"
+  itemscope="itemscope"
+  role="navigation"
+  aria-label="Site navigation">
+
+- [Install](/install)
+- [Learn Sass](/guide)
+- [Blog](/blog)
+- [Documentation](/documentation)
+- [Get Involved](/community)
+- <div id="docsearch"></div>
+
+</nav>

source/install.md

@@ -0,0 +1,111 @@
+---
+layout: has_no_sidebars
+title: Install Sass
+no_container: true
+---
+
+<div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--gutters-large">
+  <div class="sl-l-grid__column">
+
+## Applications
+
+![Mouse](/assets/img/illustrations/mouse.svg)
+
+There are a good many applications that will get you up and running
+with Sass in a few minutes for Mac, Windows, and Linux. You can download
+most of the applications for free but a few of them are paid apps
+<small>(and totally worth it)</small>.
+
+- [CodeKit](https://codekitapp.com/) (Paid) Mac
+- [Hammer](http://hammerformac.com/) (Paid) Mac
+- [LiveReload](http://livereload.com/) (Paid, Open Source) Mac Windows
+- [Prepros](https://prepros.io/) (Paid) Mac Windows Linux
+- [Scout-App](http://scout-app.io/) (Free, Open Source) Windows Linux Mac
+
+## Libraries
+
+The Sass team maintains two Node.js packages for Sass, both of which
+support [the standard JavaScript API]. The [`sass` package] is pure
+JavaScript, which is a little slower but can be installed on all platforms
+Node.js supports. The [`sass-embedded` package] wraps a JS API around the
+Dart VM, so it's faster but only supports Windows, Mac OS, and Linux.
+
+[the standard JavaScript API]: /documentation/js-api
+[`sass` package]: https://www.npmjs.com/package/sass
+[`sass-embedded` package]: https://www.npmjs.com/package/sass-embedded
+
+There are also community-maintained wrappers for the following languages:
+
+- [Java](https://mvnrepository.com/artifact/de.larsgrefer.sass), including
+  [Gradle](https://docs.freefair.io/gradle-plugins/current/reference/#_embedded_sass)
+  and [Maven](https://github.com/HebiRobotics/sass-cli-maven-plugin) plugins
+- [Ruby](https://github.com/ntkme/sass-embedded-host-ruby#readme)
+- [Swift](https://github.com/johnfairh/swift-sass#readme)
+
+</div>
+<div class="sl-l-grid__column">
+
+## Command Line
+
+![Keyboard](/assets/img/illustrations/keyboard.svg)
+
+When you install Sass on the command line, you'll be able to run the
+`sass` executable to compile `.sass` and `.scss` files to `.css` files.
+For example:
+
+```shell
+sass source/stylesheets/index.scss build/stylesheets/index.css
+```
+
+First install Sass using one of the options below, then run
+`sass --version` to be sure it installed correctly. If it did, this will
+include `#{impl_version(:dart)}`. You can also run `sass --help` for more
+information about the command-line interface.
+
+Once it's all set up, **go and play**. If you're brand new to
+Sass we've set up some resources to help you learn pretty darn quick.
+
+<a href="/guide" class="sl-c-button sl-c-button--primary">Learn More About Sass</a>
+
+Install Anywhere (Standalone)
+
+: You can install Sass on Windows, Mac, or Linux by downloading the package for
+your operating system [from
+GitHub](https://github.com/sass/dart-sass/releases/tag/1.57.1) and [adding it to
+your `PATH`](https://katiek2.github.io/path-doc/). That's all—there are no
+external dependencies and nothing else you need to install.
+
+Install Anywhere (npm)
+
+: If you use Node.js, you can also install Sass using
+[npm](https://www.npmjs.com/) by running
+
+    ```shell
+    npm install -g sass
+    ```
+
+    **However, please note** that this will install the pure JavaScript
+    implementation of Sass, which runs somewhat slower than the other options
+    listed here. But it has the same interface, so it'll be easy to swap in
+    another implementation later if you need a bit more speed!
+
+Install on Windows (Chocolatey)
+
+: If you use the [Chocolatey package manager](https://chocolatey.org/) for
+Windows, you can install Dart Sass by running
+
+    ```shell
+    choco install sass
+    ```
+
+Install on Mac OS X or Linux (Homebrew)
+
+: If you use [the Homebrew package manager](https://brew.sh/) for Mac OS X or
+Linux, you can install Dart Sass by running
+
+    ```shell
+    brew install sass/sass/sass
+    ```
+
+  </div>
+</div>