Address review

.eleventy.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+const formatDistanceToNow = require('date-fns/formatDistanceToNow');
 const yaml = require('js-yaml');
 const markdown = require('markdown-it');
 const typogrify = require('typogr');
@@ -35,6 +36,10 @@ module.exports = (eleventyConfig) => {
     typogrify.typogrify(mdown.renderInline(content)),
   );
 
+  eleventyConfig.addLiquidShortcode('yearsAgo', () => {
+    return formatDistanceToNow(new Date('Tue Nov 28 19:43:58 2006 +0000'));
+  });
+
   eleventyConfig.addLiquidFilter('typogr', (content) =>
     typogrify.typogrify(content),
   );

package.json

@@ -53,6 +53,7 @@
     "@types/node": "^16",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
+    "date-fns": "^2.29.3",
     "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-import-resolver-typescript": "^3.5.3",

source/_includes/footer.liquid

@@ -10,12 +10,7 @@
         It is available for use and modification under the <a href="https://github.com/sass/dart-sass/blob/master/LICENSE">MIT&nbsp;License</a>.
 
         <nav class="sl-c-list-horizontal-wrapper">
-{% markdown %}
-- [Sass on GitHub](https://github.com/sass)
-- [Website Source Code](https://github.com/sass/sass-site)
-- [Style Guide](/styleguide)
-- [Community Guidelines](/community-guidelines)
-{% endmarkdown %}
+          {% include 'footer_links' %}
         </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.liquid

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

source/_includes/header.liquid

@@ -28,14 +28,7 @@
         itemscope="itemscope"
         role="navigation"
         aria-label="Site navigation">
-{% markdown %}
-- [Install](/install)
-- [Learn Sass](/guide)
-- [Blog](/blog)
-- [Documentation](/documentation)
-- [Get Involved](/community)
-- <div id="docsearch"></div>
-{% endmarkdown %}
+        {% include 'header_links' %}
       </nav>
     </div>
   </div>

source/_includes/header_links.liquid

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

source/index.md

@@ -3,6 +3,7 @@ layout: has_no_sidebars
 h1: CSS with superpowers
 no_container: true
 is_home: true
+eleventyComputed:
   section_bottom:
     - header: CSS Compatible
       body: |
@@ -16,7 +17,8 @@ section_bottom:
         keep up, but stay ahead.
     - header: Mature
       body: |
-      Sass has been actively supported for about 16 years by its loving Core Team.
+        Sass has been actively supported for {% yearsAgo %} by its loving Core
+        Team.
     - header: Industry Approved
       body: |
         Over and over again, the industry is choosing Sass as the premier CSS
@@ -28,8 +30,8 @@ section_bottom:
     - header: Frameworks
       body: |
         There are an endless number of frameworks built with Sass.
-      [Bootstrap](https://getbootstrap.com/), [Bourbon](http://bourbon.io/), and
-      [Susy](http://susy.oddbird.net/) just to name a few.
+        [Bootstrap](https://getbootstrap.com/), [Bourbon](http://bourbon.io/),
+        and [Susy](http://susy.oddbird.net/) just to name a few.
 ---
 
 <div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters-large">

yarn.lock

@@ -2878,6 +2878,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns@npm:^2.29.3":
+  version: 2.29.3
+  resolution: "date-fns@npm:2.29.3"
+  checksum: e01cf5b62af04e05dfff921bb9c9933310ed0e1ae9a81eb8653452e64dc841acf7f6e01e1a5ae5644d0337e9a7f936175fd2cb6819dc122fdd9c5e86c56be484
+  languageName: node
+  linkType: hard
+
 "debug@npm:2.6.9, debug@npm:^2.2.0":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -6632,6 +6639,7 @@ __metadata:
     "@types/node": ^16
     "@typescript-eslint/eslint-plugin": ^5.48.2
     "@typescript-eslint/parser": ^5.48.2
+    date-fns: ^2.29.3
     eslint: ^8.32.0
     eslint-config-prettier: ^8.6.0
     eslint-import-resolver-typescript: ^3.5.3