From 430b08947f200355617c06a8d194a779c397562c Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Wed, 24 May 2023 16:49:22 -0400
Subject: [PATCH] More human-friendly hash slugs

---
 package.json                              |  2 ++
 source/community.md                       | 18 +++++++++---------
 source/guide.liquid                       |  2 +-
 source/helpers/engines.ts                 |  2 ++
 source/libsass.md                         |  4 ++--
 source/styleguide/styleguide.11tydata.yml |  2 +-
 yarn.lock                                 |  3 ++-
 7 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 4cf2f88..2b7b493 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@rollup/plugin-inject": "^5.0.3",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-terser": "^0.4.3",
+    "@sindresorhus/slugify": "^1.1.0",
     "@types/jquery": "^3.5.16",
     "@types/jqueryui": "^1.12.17",
     "@types/markdown-it": "^12.2.3",
@@ -93,6 +94,7 @@
   },
   "yarn-upgrade-all": {
     "ignore": [
+      "@sindresorhus/slugify",
       "@types/node"
     ]
   }
diff --git a/source/community.md b/source/community.md
index 366c6ea..d32d54a 100644
--- a/source/community.md
+++ b/source/community.md
@@ -8,19 +8,19 @@ introduction: >
 complementary_content: |
   <nav class="sl-c-list-navigation-wrapper" aria-label="Resources">
 
-    ## Resources
+  <h2>Resources</h2>
 
-    ### [Jump Start Sass](https://amzn.to/2LKF0uR)
-    by Kitty Giraudel and Miriam Suzanne
+  ### [Jump Start Sass](https://amzn.to/2LKF0uR)
+  by Kitty Giraudel and Miriam Suzanne
 
-    ### [Pragmatic Guide to Sass 3: Tame the Modern Style Sheet](https://amzn.to/2LEwXiZ)
-    by Hampton Lintorn-Catlin and Michael Lintorn-Catlin
+  ### [Pragmatic Guide to Sass 3: Tame the Modern Style Sheet](https://amzn.to/2LEwXiZ)
+  by Hampton Lintorn-Catlin and Michael Lintorn-Catlin
 
-    ### [Sass for Web Designers](https://amzn.to/2RkIVU3)
-    by Dan Cederholm
+  ### [Sass for Web Designers](https://amzn.to/2RkIVU3)
+  by Dan Cederholm
 
-    ### [Sass and Compass in Action](https://amzn.to/2RjAQz7)
-    by Wynn Netherland, Natalie Weizenbaum, Chris Eppstein, Brandon Mathis
+  ### [Sass and Compass in Action](https://amzn.to/2RjAQz7)
+  by Wynn Netherland, Natalie Weizenbaum, Chris Eppstein, Brandon Mathis
 
   </nav>
 ---
diff --git a/source/guide.liquid b/source/guide.liquid
index 07d31b7..fc71d8c 100644
--- a/source/guide.liquid
+++ b/source/guide.liquid
@@ -6,7 +6,7 @@ introduction: >
   just browse here, go ahead, but we recommend you go install Sass first. [Go
   here](/install) if you want to learn how to get everything set up.
 navigation: |
-  ### Topics
+  <h3>Topics</h3>
 
   <nav class="sl-c-list-navigation-wrapper">
 
diff --git a/source/helpers/engines.ts b/source/helpers/engines.ts
index 78d2eda..f28bac8 100644
--- a/source/helpers/engines.ts
+++ b/source/helpers/engines.ts
@@ -1,3 +1,4 @@
+import slugify from '@sindresorhus/slugify';
 import { Liquid } from 'liquidjs';
 import markdown from 'markdown-it';
 import markdownAnchor from 'markdown-it-anchor';
@@ -23,6 +24,7 @@ export const markdownEngine = markdown({
   .use(markdownAnchor, {
     level: 2,
     permalink: renderPermalink,
+    slugify: (s) => slugify(s),
   });
 
 /**
diff --git a/source/libsass.md b/source/libsass.md
index 9acd7f7..b38b2df 100644
--- a/source/libsass.md
+++ b/source/libsass.md
@@ -7,7 +7,7 @@ introduction: >
   lagging behind [Dart Sass](/dart-sass) in features and CSS compatibility.
   **LibSass is now deprecated**—new projects should use Dart Sass instead.
 navigation: |
-  ## Wrappers
+  <h2>Wrappers</h2>
 
   <nav class="sl-c-list-navigation-wrapper">
 
@@ -29,7 +29,7 @@ navigation: |
 
   </nav>
 complementary_content: |
-  ## Resources
+  <h2>Resources</h2>
 
   - [Lightning fast Sass compiling with libsass, Node-sass and
     Grunt-sass](https://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/)
diff --git a/source/styleguide/styleguide.11tydata.yml b/source/styleguide/styleguide.11tydata.yml
index 81b6021..97dc294 100644
--- a/source/styleguide/styleguide.11tydata.yml
+++ b/source/styleguide/styleguide.11tydata.yml
@@ -2,7 +2,7 @@ layout: has_navigation
 navigation: |
   <nav class="sl-c-list-navigation-wrapper">
 
-  ### [Style Guide](/styleguide)
+  <h3><a href="/styleguide">Style Guide</a></h3>
 
   - [Brand](/styleguide/brand)
   - [Color](/styleguide/color)
diff --git a/yarn.lock b/yarn.lock
index e1de76c..9292fac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1797,7 +1797,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sindresorhus/slugify@npm:^1.1.2":
+"@sindresorhus/slugify@npm:^1.1.0, @sindresorhus/slugify@npm:^1.1.2":
   version: 1.1.2
   resolution: "@sindresorhus/slugify@npm:1.1.2"
   dependencies:
@@ -6904,6 +6904,7 @@ __metadata:
     "@rollup/plugin-inject": ^5.0.3
     "@rollup/plugin-node-resolve": ^15.0.2
     "@rollup/plugin-terser": ^0.4.3
+    "@sindresorhus/slugify": ^1.1.0
     "@types/jquery": ^3.5.16
     "@types/jqueryui": ^1.12.17
     "@types/markdown-it": ^12.2.3