Added markdown styling basics

.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),

_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>

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",

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"
   }
 }

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`.