Merge pull request #14 from AegisJSProject/release/0.1.0

Rename to `@aegisjsproject/markdown`

Author: shgysk8zer0

.npmignore

@@ -1,4 +1,5 @@
 node_modules/
+test/
 .github/
 .editorconfig
 .eslintignore

CHANGELOG.md

@@ -6,6 +6,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.1.0] - 2024-02-28
+
+### Added
+- Add functions to load `highlight.js` stylesheets and fetch & parse markdown
+
+### Fixed
+- Do not publish `test/` directory
+
+### Changed
+- Renamed to `@aegisjsproject/markdown`
+
 ## [v0.0.3] - 2024-02-26
 
 ### Added

README.md

@@ -1,25 +1,25 @@
-# `@shgysk8zer0/aegis-markdown`
+# `@aegisjsproject/markdown`
 
-Markdown parser for [`@shgysk8zer0/aegis`](https://github.com/shgysk8zer0/aegis)
+Markdown parser for [`@aegisjsproject/core`](https://github.com/AegisJSProject/core)
 
-[![CodeQL](https://github.com/shgysk8zer0/aegis-markdown/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/shgysk8zer0/aegis-markdown/actions/workflows/codeql-analysis.yml)
-![Node CI](https://github.com/shgysk8zer0/aegis-markdown/workflows/Node%20CI/badge.svg)
-![Lint Code Base](https://github.com/shgysk8zer0/aegis-markdown/workflows/Lint%20Code%20Base/badge.svg)
+[![CodeQL](https://github.com/AegisJSProject/markdown/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/AegisJSProject/markdown/actions/workflows/codeql-analysis.yml)
+![Node CI](https://github.com/AegisJSProject/markdown/workflows/Node%20CI/badge.svg)
+![Lint Code Base](https://github.com/AegisJSProject/markdown/workflows/Lint%20Code%20Base/badge.svg)
 
-[![GitHub license](https://img.shields.io/github/license/shgysk8zer0/aegis-markdown.svg)](https://github.com/shgysk8zer0/aegis-markdown/blob/master/LICENSE)
-[![GitHub last commit](https://img.shields.io/github/last-commit/shgysk8zer0/aegis-markdown.svg)](https://github.com/shgysk8zer0/aegis-markdown/commits/master)
-[![GitHub release](https://img.shields.io/github/release/shgysk8zer0/aegis-markdown?logo=github)](https://github.com/shgysk8zer0/aegis-markdown/releases)
+[![GitHub license](https://img.shields.io/github/license/AegisJSProject/markdown.svg)](https://github.com/AegisJSProject/markdown/blob/master/LICENSE)
+[![GitHub last commit](https://img.shields.io/github/last-commit/AegisJSProject/markdown.svg)](https://github.com/AegisJSProject/markdown/commits/master)
+[![GitHub release](https://img.shields.io/github/release/AegisJSProject/markdown?logo=github)](https://github.com/AegisJSProject/markdown/releases)
 [![GitHub Sponsors](https://img.shields.io/github/sponsors/shgysk8zer0?logo=github)](https://github.com/sponsors/shgysk8zer0)
 
-[![npm](https://img.shields.io/npm/v/@shgysk8zer0/aegis-markdown)](https://www.npmjs.com/package/@shgysk8zer0/aegis-markdown)
-![node-current](https://img.shields.io/node/v/@shgysk8zer0/aegis-markdown)
-![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/%40shgysk8zer0%2Faegis-markdown)
+[![npm](https://img.shields.io/npm/v/@aegisjsproject/markdown)](https://www.npmjs.com/package/@aegisjsproject/markdown)
+![node-current](https://img.shields.io/node/v/@aegisjsproject/markdown)
+![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/%40shgysk8zer0%2Fmarkdown)
 
-[![npm](https://img.shields.io/npm/dw/@shgysk8zer0/aegis-markdown?logo=npm)](https://www.npmjs.com/package/@shgysk8zer0/aegis-markdown)
+[![npm](https://img.shields.io/npm/dw/@aegisjsproject/markdown?logo=npm)](https://www.npmjs.com/package/@aegisjsproject/markdown)
 
-[![GitHub followers](https://img.shields.io/github/followers/shgysk8zer0.svg?style=social)](https://github.com/shgysk8zer0)
-![GitHub forks](https://img.shields.io/github/forks/shgysk8zer0/aegis-markdown.svg?style=social)
-![GitHub stars](https://img.shields.io/github/stars/shgysk8zer0/aegis-markdown.svg?style=social)
+[![GitHub followers](https://img.shields.io/github/followers/AegisJSProject.svg?style=social)](https://github.com/AegisJSProject)
+![GitHub forks](https://img.shields.io/github/forks/AegisJSProject/markdown.svg?style=social)
+![GitHub stars](https://img.shields.io/github/stars/AegisJSProject/markdown.svg?style=social)
 [![Twitter Follow](https://img.shields.io/twitter/follow/shgysk8zer0.svg?style=social)](https://twitter.com/shgysk8zer0)
 
 [![Donate using Liberapay](https://img.shields.io/liberapay/receives/shgysk8zer0.svg?logo=liberapay)](https://liberapay.com/shgysk8zer0/donate "Donate using Liberapay")
@@ -32,7 +32,87 @@ Markdown parser for [`@shgysk8zer0/aegis`](https://github.com/shgysk8zer0/aegis)
 ## Example
 
 ```js
-import { md } from '@shgysk8zer0/aegis-markdown';
+import { md, createStyleSheet, getMarkdown } from '@aegisjsproject/markdown';
 
-document.body.append(md`# Hello, World!`);
+document.head.append(
+	createStyleSheet('github', { media: '(prefers-color-scheme: light)' }),
+	createStyleSheet('github-dark', { media: '(prefers-color-scheme: dark)' }),
+);
+
+document.getElementById('header').append(md`
+# Hello, World!
+
+## It is currently ${new Date().toLocaleString()}.
+`);
+
+customElements.define('md-preview', class HTMLMDPreviewElement extends HTMLElement {
+	#shadow;
+
+	constructor() {
+		super();
+
+		this.#shadow = this.attachShadow({ mode: 'closed' });
+		const container = document.createElement('div');
+		container.id = 'container';
+		container.part.add('container');
+
+		this.#shadow.append(
+			createStyleSheet('github', { media: '(prefers-color-scheme: light)' }),
+			createStyleSheet('github-dark', { media: '(prefers-color-scheme: dark)' }),
+			container,
+		);
+	}
+
+	async attributeChangedCallback(name, oldVal, newVal) {
+		switch(name) {
+			case 'src':
+				if (typeof newVal === 'string') {
+					this.#shadow.getElementById('container').replaceChildren(await getMarkdown(this.src));
+				} else {
+					this.#shadow.getElementById('container').replaceChildren();
+				}
+				break;
+
+			default:
+				throw new Error(`Unhandled attribute change: ${name}.`);
+		}
+	}
+
+	set content(val) {
+		if (typeof val === 'string' && val.length !== 0) {
+			this.#shadow.getElementById('container').replaceChildren(md`${val}`);
+			this.scrollIntoView({ behavior: 'smooth', block: 'start' });
+		} else {
+			this.#shadow.getElementById('container').replaceChildren();
+		}
+	}
+
+	get src() {
+		return this.getAttribute('src');
+	}
+
+	set src(val) {
+		if (typeof val === 'string' || val instanceof URL) {
+			this.setAttribute('src', val);
+		} else {
+			this.removeAttribute('src');
+		}
+	}
+
+	clear() {
+		this.content = null;
+	}
+
+	static get observedAttributes() {
+		return ['src'];
+	}
+});
+
+document.forms.test.addEventListener('submit', event => {
+	event.preventDefault();
+	const data = new FormData(event.target);
+	document.getElementById('preview').content = data.get('md');
+});
+
+document.forms.test.addEventListener('reset', () => document.getElementById('preview').clear());
 ```

markdown.js

@@ -1,7 +1,25 @@
 import { Marked } from 'marked';
 import { markedHighlight } from 'marked-highlight';
 import hljs from 'highlight.js';
-import { sanitizeString } from '@shgysk8zer0/aegis';
+import { sanitizeString } from '@aegisjsproject/core/core.js';
+
+export const hljsURL = new URL(`https://unpkg.com/@highlightjs/cdn-assets@${hljs.versionString}/`);
+
+export function createStyleSheet(path, { media, base = hljsURL } = {}) {
+	const link = document.createElement('link');
+	link.relList.add('stylesheet');
+	link.crossOrigin = 'anonymous';
+	link.referrerPolicy = 'no-referrer';
+
+	if (typeof media === 'string') {
+		link.media = media;
+	} else if (media instanceof MediaQueryList) {
+		link.media = media.media;
+	}
+
+	link.href = new URL(`./styles/${path}.min.css`, base);
+	return link;
+}
 
 export function createMDParser({
 	gfm = true,
@@ -36,3 +54,27 @@ export function createMDParser({
 }
 
 export const md = createMDParser({});
+
+export async function getMarkdown(url, {
+	mode = 'cors',
+	referrerPolicy = 'no-referrer',
+	parser =  md,
+	headers = new Headers({ Accept: 'text/markdown' }),
+	...rest
+} = {}) {
+	if (typeof headers === 'object' && ! (headers instanceof Headers)) {
+		return await getMarkdown(url, { mode, referrerPolicy, parser, headers: new Headers(headers), ...rest });
+	} else if (! headers.has('Accept')) {
+		headers.set('Accept', 'text/markdown');
+	}
+
+	const resp = await fetch(url, { mode, referrerPolicy, headers, ...rest });
+
+	if (! resp.ok) {
+		throw new Error(`${resp.url} [${resp.status} ${resp.statusText}]`);
+	} else if (! resp.headers.get('Content-Type').startsWith('text/markdown')) {
+		throw new TypeError(`Invalid Content-Type: ${resp.headers.get('Content-Type')}.`);
+	} else {
+		return parser`${await resp.text()}`;
+	}
+}