package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@doc-utils/markdown2html",
-  "version": "0.3.0",
+  "version": "0.2.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@doc-utils/markdown2html",
-      "version": "0.3.0",
+      "version": "0.2.6",
       "dependencies": {
         "bytefield-svg": "^1.6.1",
         "dompurify": "^2.3.6",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doc-utils/markdown2html",
-  "version": "0.3.0",
+  "version": "0.2.6",
   "publishConfig": {
     "registry": "https://gitea.home.jbrumond.me/api/packages/doc-utils/npm/"
   },

src/breadcrumb-nav.ts

@@ -0,0 +1,64 @@
+
+import { marked } from 'marked';
+import { ParsedAttributes, parse_attributes } from './attrs';
+import { MarkdownOptions } from './render';
+
+// todo: deprecate this
+
+export interface BreadcrumbNavToken extends marked.Tokens.Generic {
+	text: string;
+	attrs: ParsedAttributes;
+	items: marked.Token[][];
+}
+
+export function breadcrumb_nav_ext(renderer: marked.Renderer, opts: MarkdownOptions) : marked.TokenizerExtension & marked.RendererExtension {
+	return {
+		name: 'breadcrumb_nav',
+		level: 'block',
+		start: (src) => src.match(/^\/\/\//)?.index,
+		tokenizer(src, tokens) {
+			const rule = /^\/\/\/(\/*)([^\n]+)?(?:\n)((?:[^\/]|\/\/?(?!\/\1))+)\/\/\/\1/;
+			const match = rule.exec(src);
+
+			if (match) {
+				const token: BreadcrumbNavToken = {
+					type: 'breadcrumb_nav',
+					raw: match[0],
+					text: match[3],
+					attrs: parse_attributes(match[2] || ''),
+					tokens: [ ],
+					items: [ ],
+				};
+
+				const lines = match[3].trim().split('\n');
+
+				for (const line of lines) {
+					const tokens = this.lexer.inlineTokens(line, [ ]);
+					token.tokens.push(...tokens);
+					token.items.push(tokens);
+				}
+
+				return token;
+			}
+		},
+		renderer(token: BreadcrumbNavToken) {
+			return `<nav aria-label="breadcrumbs" ${token.attrs.html_attrs.join(' ')}>\n`
+				+ `\t<ol>\n`
+				+ '\t\t'
+					+ token.items.map((tokens, index) =>{ 
+						let item = '<li>\n';
+
+						if (index) {
+							item += '\t\t\t<span class="separator" aria-hidden="true">/</span>\n';
+						}
+
+						item += `\t\t\t${this.parser.parseInline(tokens, renderer)}\n`;
+
+						return item + '\t\t</li>';
+					}).join('\n\t\t')
+				+ '\n'
+				+ `\t</ol>\n`
+				+ `</nav>`;
+		}
+	};
+}

src/description-list.ts

@@ -3,19 +3,14 @@ import { marked } from 'marked';
 import { MarkdownOptions } from './render';
 
 export interface DescriptionListToken extends marked.Tokens.Generic {
-	type: 'description_list';
 	items: (DescriptionTermToken | DescriptionDetailToken)[];
 }
 
-export type DescriptionElemToken = DescriptionTermToken | DescriptionDetailToken;
-
 export interface DescriptionTermToken extends marked.Tokens.Generic {
-	type: 'description_term';
 	text: string;
 }
 
 export interface DescriptionDetailToken extends marked.Tokens.Generic {
-	type: 'description_detail';
 	text: string;
 }
 
@@ -23,107 +18,72 @@ export function description_list_ext(renderer: marked.Renderer, opts: MarkdownOp
 	return {
 		name: 'description_list',
 		level: 'block',
-		start: (src) => src.match(/^: /)?.index,
+		start: (src) => src.match(/^:[:#-]/)?.index,
 		tokenizer(src, tokens) {
-			const start = src.match(/^: /)?.index;
+			const rule = /^(?::[:#-](?:\s[^\n]*)?(?:\n|$))+/;
-			const lines = src.slice(start).split(/\n/g);
+			const match = rule.exec(src);
-			const token: DescriptionListToken = {
-				type: 'description_list',
-				raw: '',
-				items: [ ]
-			};
 
-			let current: DescriptionElemToken;
+			if (match) {
-			const render_current = () => {
+				const token: DescriptionListToken = {
-				if (current) {
+					type: 'description_list',
-					this.lexer.blockTokens(current.text, current.tokens);
+					raw: match[0],
-					current = null;
+					items: [ ]
-				}
+				};
-			};
 
-			for (const line of lines) {
+				const items = token.raw.trim().split('\n');
-				// Skip empty lines
+				const raw_buffer: string[] = [ ];
-				if (! line.trim()) {
+				const text_buffer: string[] = [ ];
-					token.raw += line + '\n';
 
-					if (current) {
+				const flush_buffer = () => {
-						current.raw += line + '\n';
+					if (! raw_buffer.length) {
-						current.text += '\n';
+						return;
 					}
 
-					continue;
+					// Grab the second character from the first line to determine the
-				}
+					// token type (should be "#" or "-")
+					const type = raw_buffer[0][1] === '#' ? 'description_term' : 'description_detail';
+					
+					const sub_token: (DescriptionTermToken | DescriptionDetailToken) = {
+						type,
+						raw: raw_buffer.join('\n'),
+						text: text_buffer.join('\n'),
+						tokens: [ ],
+					};
 
-				// If the line starts immediately with a colon, it is a <dt>
+					raw_buffer.length = 0;
-				if (line.startsWith(': ')) {
+					text_buffer.length = 0;
-					render_current();
+
-					token.raw += line + '\n';
+					this.lexer.blockTokens(sub_token.text, sub_token.tokens);
-					token.items.push(
+					token.items.push(sub_token);
-						current = {
+				};
-							type: 'description_term',
+
-							raw: line,
+				for (const line of items) {
-							text: line.slice(2),
+					const rule = /^:([:#-])(?:\s([^\n]*))?(?:\n|$)/;
-							tokens: [ ],
+					const match = rule.exec(line);
+		
+					if (match) {
+						if (match[1] !== ':') {
+							flush_buffer();
 						}
-					);
-					continue;
-				}
 
-				// If the line starts with a colon after an indent, it is a <dd>
+						raw_buffer.push(match[0]);
-				if (line.startsWith('  : ')) {
+						text_buffer.push(match[2]);
-					render_current();
-					token.raw += line + '\n';
-					token.items.push(
-						current = {
-							type: 'description_detail',
-							raw: line,
-							text: line.slice(4),
-							tokens: [ ],
-						}
-					);
-					continue;
-				}
-
-				// If the line starts with (at least) two indents, it is a child
-				// of the current element
-				if (line.startsWith('    ')) {
-					token.raw += line + '\n';
-					current.raw += '\n' + line;
-					current.text += '\n' + line.slice(current.type === 'description_term' ? 2 : 4);
-					continue;
-				}
-
-				// If the line starts with one indent, it is a child of the current
-				// <dt> (but is not allowed after a <dd>)
-				if (line.startsWith('  ')) {
-					if (current.type !== 'description_term') {
-						render_current();
-						break;
 					}
-
-					token.raw += line + '\n';
-					current.raw += '\n' + line;
-					current.text += '\n' + line.slice(2);
-					continue;
 				}
 
-				// If the line starts any other way, it is the start of new content
+				flush_buffer();
-				// and we are done parsing
+				
-				render_current();
-				break;
-			}
-			
-			render_current();
-
-			if (token.items.length) {
-				console.log(token);
 				return token;
 			}
 		},
 		renderer(token: DescriptionListToken) {
 			const items = token.items.map((item) => {
 				const tag = item.type === 'description_term' ? 'dt' : 'dd';
-				return `<${tag}>${this.parser.parse(item.tokens)}</${tag}>`;
+				return `
+					<${tag}>
+						${this.parser.parse(item.tokens)}
+					</${tag}>
+				`;
 			});
 
 			return `<dl>${items.join('')}</dl>`;

src/render.ts

@@ -9,6 +9,7 @@ import { katex_block_ext, katex_inline_ext } from './katex';
 import { footnote_list_ext, footnote_ref_ext } from './footnotes';
 import { description_list_ext } from './description-list';
 import { resolve_async_bindings } from './async-steps';
+import { breadcrumb_nav_ext } from './breadcrumb-nav';
 import { base_url_walk_tokens } from './base-url';
 
 export interface MarkdownOptions {
@@ -64,6 +65,7 @@ function setup_marked(options: MarkdownOptions, marked_options: marked.MarkedOpt
 			description_list_ext(marked_options.renderer, options),
 			section_ext(marked_options.renderer, options),
 			icon_ext(marked_options.renderer, options),
+			breadcrumb_nav_ext(marked_options.renderer, options),
 			...(options.extensions || [ ]).map((ext) => {
 				return ext(marked_options.renderer, options);
 			}),

src/renderer.ts

@@ -152,10 +152,6 @@ function code(renderer: marked.Renderer, opts: MarkdownOptions) {
 				const binding = bind_data_async(promise);
 				return figure(binding);
 			};
-
-			case 'yaml:calendar': {
-				// todo
-			};
 	
 			default:
 				return figure(`<pre class="language-${args[0] || 'txt'}">${render_prism(code, args[0])}</pre>`);