feat: add trailingSlash flag

the option `trailingSlash` defines weather a trailing slash will be added to the generated link just before the anker reference or not. Set this to `true` will lead into generated links like this: `.../foo/#myTocLink`. If it's `false` (default), the generated link will look like this: `.../foo#myTocLink`.

closes #5

README.md

@@ -33,9 +33,10 @@ import { ScullyConfig, setPluginConfig } from '@scullyio/scully';
 import { getTocPlugin, TocConfig } = from './scully-plugins/toc';
 
 const tocOptions: TocConfig = {
-  blogAreaSelector: '.blog-content',
-  insertSelector: '#toc',
-  level: ['h2', 'h3'],
+  blogAreaSelector: '.blog-content', // where to search for TOC headings
+  insertSelector: '#toc',            // where to insert the TOC
+  level: ['h2', 'h3'],               // what heading levels to include
+  trailingSlash: true,               // add trailing slash before the anker ('#')
 };
 const TocPlugin = getTocPlugin();
 setPluginConfig(TocPlugin, tocOptions);
@@ -89,3 +90,4 @@ The following table will explain the options in detail.
   In fact to insert the TOC in a blog post, you should at least add a `<div id="toc"></div>` in your blog post and this is the place where the TOC will be inserted.
 - `level`: This option defines the heading levels to include in the TOC. By default the value `level: ['h2', 'h3']` is used.
   Only valid HTML headings are supported (`h1`, `h2`, `h3`, `h4`, `h5` and `h6`).
+- `trailingSlash` define weather a trailing slash will be added to the generated link just before the anker reference or not. Set this to `true` will lead into generated links like this: `.../foo/#myTocLink`. If it's `false` (default), the generated link will look like this: `.../foo#myTocLink`.

projects/scully-plugin-toc/src/lib/interfaces.ts

@@ -1,6 +1,7 @@
 export type Level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 export interface TocConfig {
+  trailingSlash?: boolean;
   blogAreaSelector?: string;
   insertSelector?: string;
   level?: Level[];

projects/scully-plugin-toc/src/lib/toc.spec.ts

@@ -1,7 +1,7 @@
-import { headingLevel, tocPlugin } from './toc';
-import { Level, TocConfig } from './interfaces';
 import { HandledRoute, setPluginConfig } from '@scullyio/scully';
 import { getTocPlugin } from './index';
+import { Level, TocConfig } from './interfaces';
+import { headingLevel, tocPlugin } from './toc';
 
 describe('headingLevel', () => {
   it('should return the heading level number', () => {
@@ -88,6 +88,18 @@ describe('tocPlugin', () => {
     );
   });
 
+  it('should respect using a trailing slash in the generated link', async () => {
+    const options = { ...tocConfig };
+    options.trailingSlash = true;
+    setPluginConfig(TocPlugin, options);
+
+    const html = await tocPlugin(defaultValidHtml, defaultRouteDataConfig);
+
+    expect(html).toEqual(
+      `${resultStart}<div id="toc"><ul><li><a href="/foo/bar/#h2-1">H2-1</a></li><ul style="margin-bottom: 0px"><li><a href="/foo/bar/#h3-1">H3-1</a></li></ul><li><a href="/foo/bar/#h2-2">H2-2</a></li></ul></div>${resultEnd}`,
+    );
+  });
+
   it('should return the HTML including TOC by using default "blogAreaSelector"', async () => {
     const options = { ...tocConfig };
     options.blogAreaSelector = '';

projects/scully-plugin-toc/src/lib/toc.ts

@@ -1,13 +1,13 @@
 import {
+  getPluginConfig,
   HandledRoute,
+  log,
   logWarn,
   yellow,
-  log,
-  getPluginConfig,
 } from '@scullyio/scully';
 import { JSDOM } from 'jsdom';
-import { TocConfig, Level } from './interfaces';
 import { TocPluginName } from './constants';
+import { Level, TocConfig } from './interfaces';
 
 export const headingLevel = (tag: string): number | null => {
   const match = tag.match(/(?!h)[123456]/g);
@@ -82,7 +82,8 @@ export const tocPlugin = async (html: string, routeData: HandledRoute) => {
     let toc = '';
     headers.forEach((c: any) => {
       const level = headingLevel(c.tagName);
-      const baseLiEl = `<li><a href="${route}#${c.id}">${c.textContent}</a></li>`;
+      const trailingSlash = c.trailingSlash ? '/' : '';
+      const baseLiEl = `<li><a href="${route}${trailingSlash}#${c.id}">${c.textContent}</a></li>`;
       if (previousTag && level && level > previousTag) {
         toc += '<ul style="margin-bottom: 0px">';
       }