From ee1507cfb4177bbd158b25f7b07b022d15be6ed1 Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Tue, 2 Feb 2021 22:50:55 -0600
Subject: [PATCH] Added markdown styling basics

---
 .eleventy.js         | 17 +++++++++++++++++
 _includes/pinned.njk |  2 +-
 package-lock.json    |  5 +++++
 package.json         |  3 +++
 repos/team-cli.md    | 20 ++++++++++----------
 5 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 70bcd94..4ced637 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,8 +1,25 @@
 const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const markdownIt = require('markdown-it');
+const markdownItClass = require('@toycode/markdown-it-class');
+
+const markdownClassMapping = {
+  h1: ['text-4xl'],
+  h2: ['text-3xl'],
+  h3: ['text-2xl'],
+  h4: ['text-xl'],
+  h5: ['text-lg'],
+  h6: ['font-bold'],
+  a: ['text-blue-300', 'hover:underline'],
+  p: ['mb-2'],
+};
 
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight);
 
+  const md = markdownIt({ linkify: true, html: true });
+  md.use(markdownItClass, markdownClassMapping);
+  eleventyConfig.setLibrary('md', md);
+
   eleventyConfig.addCollection(
     "pinned",
     collection => collection.getAllSorted().filter(item => item.data.pinned),
diff --git a/_includes/pinned.njk b/_includes/pinned.njk
index 70107de..6c23662 100644
--- a/_includes/pinned.njk
+++ b/_includes/pinned.njk
@@ -21,7 +21,7 @@
               </span>
             </a>
           </div>
-          <a href="{{ content.data.url }}" class="block mt-4">
+          <a href="{{ content.url }}" class="block mt-4">
             <p class="text-xl font-semibold text-gray-900">
               {{ content.data.title }}
             </p>
diff --git a/package-lock.json b/package-lock.json
index fcb89e9..458570b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,6 +86,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@toycode/markdown-it-class": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@toycode/markdown-it-class/-/markdown-it-class-1.2.4.tgz",
+      "integrity": "sha512-hA4gHBK8moObkOYdWTjhy1wYcYy0MJeM3JjSKbsXHRpRMvIKhk6Jm+t3bXsSScTdz/byWqQbs8YIwVYjHp+SlQ=="
+    },
     "@types/babel-types": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.9.tgz",
diff --git a/package.json b/package.json
index c471238..f14f00e 100644
--- a/package.json
+++ b/package.json
@@ -21,5 +21,8 @@
   "devDependencies": {
     "@11ty/eleventy": "^0.11.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.6"
+  },
+  "dependencies": {
+    "@toycode/markdown-it-class": "^1.2.4"
   }
 }
diff --git a/repos/team-cli.md b/repos/team-cli.md
index 4bc32ad..5c990c6 100644
--- a/repos/team-cli.md
+++ b/repos/team-cli.md
@@ -8,15 +8,15 @@ pinned: true
 
 [Fork on Github](https://github.com/q2ebanking/team-cli)
 
-# team-cli
+## team-cli
 
 [![npm version](https://badge.fury.io/js/team-cli.svg)](https://badge.fury.io/js/team-cli)
 
 Automate all the things with a team-centric CLI. Abstract away annoying day-to-day tasks and eliminate tribal team knowledge by building your team their very own CLI.
 
-## Getting Started
+### Getting Started
 
-### Initialize Project
+#### Initialize Project
 
 ```bash
 mkdir teamname-cli
@@ -26,7 +26,7 @@ npm init
 npm install --save team-cli
 ```
 
-### Create Bin index.js
+#### Create Bin index.js
 
 Then in an `index.js` you could write the following:
 
@@ -40,7 +40,7 @@ const commandsDir = resolve(__dirname, 'commands');
 cli(commandsDir);
 ```
 
-### Point to Bin index.js in Package
+#### Point to Bin index.js in Package
 
 Then customize your `package.json` to include a path to the bin:
 
@@ -50,7 +50,7 @@ Then customize your `package.json` to include a path to the bin:
 }
 ```
 
-### Create Commands
+#### Create Commands
 
 Then you may make a `commands` directory with files like `command-foo.js`:
 
@@ -72,7 +72,7 @@ module.exports = {
 }
 ```
 
-### Try it out!
+#### Try it out!
 
 ```bash
 node ./index.js --help
@@ -92,11 +92,11 @@ Any command can export the following options:
 }
 ```
 
-## For Your Users
+### For Your Users
 
 At any time a `--help` or `-h` may be passed to log commands to the console.
 
-### Prompts
+#### Prompts
 
 Optionally, you may find it useful to walk users through a guided CLI experience with prompts to your users. I suggest [prompts](https://www.npmjs.com/package/prompts) for this task, but any tool of your choice will work within an action.
 
@@ -116,7 +116,7 @@ const action = async (cmd) => {
 };
 ```
 
-### Logging
+#### Logging
 
 The environment's log level can be changed with `process.env.LOG_LEVEL` to any of [winston's](https://github.com/winstonjs/winston) supported log levels including `verbose`.