@weser/markdown 0.0.8

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-present Robin Weser
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+# @weser/mdx
+
+<img alt="npm version" src="https://badge.fury.io/js/@weser%2Fmdx.svg"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/@weser/mdx.svg"> <a href="https://bundlephobia.com/result?p=@weser/mdx@latest"><img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@weser/mdx.svg"></a>
+
+## Installation
+
+```sh
+# npm
+npm i --save @weser/mdx
+# yarn
+yarn add @weser/mdx
+# pnpm
+pnpm add @weser/mdx
+```
+
+## Documentation
+
+## License
+
+@weser/mdx is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
+Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
+Created with ♥ by [@robinweser](http://weser.io).

package/dist/compileMarkdown.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+type Scope = {
+    id: string;
+};
+export default function compileMarkdown<MetaData>(markdown: string, components: any, scope?: Scope): Promise<{
+    content: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    words: number;
+    duration: number;
+    headings: {
+        id: string;
+        children: string;
+        depth: number;
+    }[];
+    meta: MetaData & {
+        words: number;
+        duration: number;
+    };
+}>;
+export {};

package/dist/compileMarkdown.js

@@ -0,0 +1,28 @@
+'use server';
+import { createElement } from 'react';
+import { compileMDX } from 'next-mdx-remote/rsc';
+import getHeadings from './getHeadings';
+export default async function compileMarkdown(markdown, components, scope) {
+    const { content, frontmatter } = await compileMDX({
+        source: markdown,
+        // @ts-ignore
+        components: {
+            ...components,
+            img: (props) => createElement(components.img, { ...props, ...scope }),
+        },
+        options: {
+            scope,
+            parseFrontmatter: true,
+        },
+    });
+    const headings = getHeadings(markdown);
+    const words = markdown.match(/[a-z]{2,}/gi)?.length || 0;
+    const duration = Math.ceil(words / 200);
+    return {
+        content,
+        words,
+        duration,
+        headings,
+        meta: { ...frontmatter, words, duration },
+    };
+}

package/dist/getHeadings.d.ts

@@ -0,0 +1,11 @@
+export type T_Heading = {
+    id: string;
+    children: string;
+    depth: number;
+};
+type Config = {
+    minDepth?: number;
+    maxDepth?: number;
+};
+export default function getHeadings(markdown: string, config?: Config): Array<T_Heading>;
+export {};

package/dist/getHeadings.js

@@ -0,0 +1,40 @@
+import { arrayReduce, arrayMap } from 'fast-loops';
+import { fromMarkdown as parseMarkdown } from 'mdast-util-from-markdown';
+import matter from 'gray-matter';
+const defaultConfig = {
+    minDepth: 1,
+    maxDepth: 4,
+};
+export default function getHeadings(markdown, config) {
+    const { minDepth, maxDepth } = {
+        ...defaultConfig,
+        ...config,
+    };
+    const { content } = matter(markdown);
+    const ast = parseMarkdown(content);
+    return arrayReduce(ast.children, (headings, child) => {
+        if (child.type === 'heading' &&
+            child.depth >= minDepth &&
+            child.depth <= maxDepth) {
+            const content = getHeadingContent(child.children);
+            headings.push({
+                id: getHeadingId(content.join('-')),
+                children: content.join(' '),
+                depth: child.depth,
+            });
+        }
+        return headings;
+    }, []);
+}
+function getHeadingId(text) {
+    return encodeURI(text.replace(/( |:)/gi, '-').toLowerCase());
+}
+function getNodeText(node) {
+    if (node.type === 'text' || node.type === 'inlineCode') {
+        return node.value.trim();
+    }
+    return '';
+}
+function getHeadingContent(children) {
+    return arrayMap(children, getNodeText);
+}

package/dist/getReadingDuration.d.ts

@@ -0,0 +1 @@
+export default function getReadingDuration(markdown: string, wordsPerMinute?: number): number;

package/dist/getReadingDuration.js

@@ -0,0 +1,5 @@
+import getWordsCount from './getWordCount.js';
+export default function getReadingDuration(markdown, wordsPerMinute = 200) {
+    const words = getWordsCount(markdown);
+    return Math.ceil(words / wordsPerMinute);
+}

package/dist/getWordCount.d.ts

@@ -0,0 +1 @@
+export default function getWordCount(markdown: string): number;

package/dist/getWordCount.js

@@ -0,0 +1,3 @@
+export default function getWordCount(markdown) {
+    return markdown.match(/[a-z]{2,}/gi)?.length || 0;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as getHeadings, T_Heading } from './getHeadings.js';
+export { default as getReadingDuration } from './getReadingDuration.js';
+export { default as getWordCount } from './getWordCount.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as getHeadings } from './getHeadings.js';
+export { default as getReadingDuration } from './getReadingDuration.js';
+export { default as getWordCount } from './getWordCount.js';

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/getheadings.ts","../src/getreadingduration.ts","../src/getwordcount.ts","../src/index.ts","../src/types.d.ts"],"version":"5.9.2"}

package/dist/useClickAway.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export default function useClickAway(ref: RefObject<HTMLElement | null>, callback: () => void, active?: boolean): void;

package/dist/useClickAway.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+export default function useClickAway(ref, callback, active = true) {
+    useEffect(() => {
+        const onClickAway = (e) => {
+            if (active && ref.current) {
+                const isClickOnInner = ref.current.contains(e.target);
+                if (!isClickOnInner) {
+                    setTimeout(callback, 0);
+                }
+            }
+        };
+        document.addEventListener('mousedown', onClickAway);
+        document.addEventListener('touchstart', onClickAway);
+        return () => {
+            document.removeEventListener('mousedown', onClickAway);
+            document.removeEventListener('touchstart', onClickAway);
+        };
+    }, [ref, active, callback]);
+}

package/dist/useClientOnly.d.ts

@@ -0,0 +1 @@
+export default function useClientSide(): boolean;

package/dist/useClientOnly.js

@@ -0,0 +1,6 @@
+import { useEffect, useState } from 'react';
+export default function useClientSide() {
+    const [isClientSide, setClientSide] = useState(false);
+    useEffect(() => setClientSide(true), []);
+    return isClientSide;
+}

package/dist/useDisclosure.d.ts

@@ -0,0 +1,16 @@
+export default function useDisclosure(defaultExpanded?: boolean): {
+    toggleProps: {
+        id: string;
+        onClick: void;
+        type: string;
+        'aria-expanded': boolean;
+        'aria-controls': string;
+    };
+    contentProps: {
+        id: string;
+        'aria-hidden': boolean;
+        'aria-labelledby': string;
+    };
+    isExpanded: boolean;
+    toggle: void;
+};

package/dist/useDisclosure.js

@@ -0,0 +1,25 @@
+import { useState, useEffect, useId } from 'react';
+export default function useDisclosure(defaultExpanded = false) {
+    const [isExpanded, setExpanded] = useState(defaultExpanded);
+    const id = useId();
+    useEffect(() => setExpanded(defaultExpanded), [defaultExpanded]);
+    const toggle = setExpanded((isExpanded) => !isExpanded);
+    const toggleProps = {
+        id: id + '-toggle',
+        onClick: toggle,
+        type: 'button',
+        'aria-expanded': isExpanded,
+        'aria-controls': id + '-content',
+    };
+    const contentProps = {
+        id: id + '-content',
+        'aria-hidden': !isExpanded,
+        'aria-labelledby': id + '-toggle',
+    };
+    return {
+        toggleProps,
+        contentProps,
+        isExpanded,
+        toggle,
+    };
+}

package/dist/useFocusTrap.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Config = {
+    visible?: boolean;
+    autoFocus?: boolean;
+};
+export default function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean, config?: Config): void;
+export {};

package/dist/useFocusTrap.js

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+import useKeyDown from './useKeyDown.js';
+const focusableSelector = `:is(
+  a[href], 
+  area[href], 
+  input:not([disabled]), 
+  select:not([disabled]), 
+  textarea:not([disabled]), 
+  button:not([disabled]), 
+  [tabindex]:not([tabindex="-1"]), 
+  [contenteditable]
+)`;
+export default function useFocusTrap(ref, active, config = {}) {
+    const { visible, autoFocus = true } = config;
+    useKeyDown('Tab', (e) => {
+        const element = ref.current;
+        if (!active || !element) {
+            return;
+        }
+        const focusables = [
+            ...element.querySelectorAll(focusableSelector),
+        ].filter((el) => el.hasAttribute('tabindex')
+            ? el.getAttribute('tabindex') !== '-1'
+            : true);
+        const firstFocusable = focusables[0];
+        const lastFocusable = focusables[focusables.length - 1];
+        const activeElement = document.activeElement;
+        let nextElement;
+        if (activeElement && focusables.includes(activeElement)) {
+            const index = focusables.indexOf(activeElement);
+            if (e.shiftKey) {
+                if (index === 0) {
+                    nextElement = lastFocusable;
+                }
+            }
+            else {
+                if (index === focusables.length - 1) {
+                    nextElement = firstFocusable;
+                }
+            }
+        }
+        else {
+            if (e.shiftKey) {
+                nextElement = lastFocusable;
+            }
+            else {
+                nextElement = firstFocusable;
+            }
+        }
+        if (nextElement) {
+            ;
+            nextElement.focus();
+            e.preventDefault();
+        }
+    }, {
+        active,
+    });
+    useEffect(() => {
+        const element = ref.current;
+        if (!autoFocus || !visible || !element) {
+            return;
+        }
+        const autoFocusElement = element.querySelector('[data-autofocus="true"]' + focusableSelector);
+        if (autoFocusElement) {
+            // @ts-ignore
+            autoFocusElement.focus();
+            return;
+        }
+        const nodeList = element.querySelectorAll(focusableSelector);
+        const elements = Array.from(nodeList);
+        const focusableElements = elements.filter((element) => !element.hasAttribute('tabindex') ||
+            element.getAttribute('tabindex') === '0');
+        // 1. focus the first focusable
+        // @ts-ignore, TODO: fix typing
+        focusableElements[0]?.focus();
+    }, [visible, ref, autoFocus]);
+}

package/dist/useKeyDown.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Options = {
+    target?: RefObject<HTMLElement>;
+    active?: boolean;
+};
+export default function useKeyDown(keyCode: string | Array<string>, callback: (e: KeyboardEvent) => void, options?: Options): void;
+export {};

package/dist/useKeyDown.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+export default function useKeyDown(keyCode, callback, options = {}) {
+    const { active = true, target } = options;
+    const keyCodes = [].concat(keyCode);
+    useEffect(() => {
+        if (!active || target === null || target?.current === null) {
+            return;
+        }
+        const hasRef = target && target.current;
+        const element = hasRef ? target.current : document;
+        if (element) {
+            const handleKeyDown = (e) => {
+                if (keyCodes.includes(e.code) &&
+                    (!hasRef || (hasRef && document.activeElement === element))) {
+                    callback(e);
+                }
+            };
+            element.addEventListener('keydown', handleKeyDown);
+            return () => element.removeEventListener('keydown', handleKeyDown);
+        }
+    }, [target, callback, active, keyCode]);
+}

package/dist/useRouteChange.d.ts

@@ -0,0 +1 @@
+export default function useRouteChange(onRouteChange: (path: string) => void, pathname?: string): void;

package/dist/useRouteChange.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+export default function useRouteChange(onRouteChange, pathname) {
+    useEffect(() => {
+        if (pathname) {
+            onRouteChange(pathname);
+        }
+    }, [pathname]);
+    // track clicks on links with the current path
+    useEffect(() => {
+        const onClick = (e) => {
+            const target = e.target;
+            if (target.tagName === 'A' && target.href === pathname) {
+                onRouteChange(pathname);
+            }
+        };
+        window.addEventListener('click', onClick);
+        return () => window.removeEventListener('click', onClick);
+    }, []);
+}

package/dist/useScrollBlocking.d.ts

@@ -0,0 +1 @@
+export default function useScrollBlocking(active: boolean): void;

package/dist/useScrollBlocking.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+let scrollTop;
+function blockScrolling(scrollElement) {
+    scrollTop = window.scrollY;
+    scrollElement.style.overflow = 'hidden';
+    scrollElement.style.position = 'fixed';
+    scrollElement.style.width = '100%';
+    scrollElement.style.top = -scrollTop + 'px';
+}
+function enableScrolling(scrollElement) {
+    scrollElement.style.removeProperty('position');
+    scrollElement.style.removeProperty('overflow');
+    scrollElement.style.removeProperty('top');
+    scrollElement.style.removeProperty('width');
+    window.scrollTo(0, scrollTop);
+}
+function toggleScrolling(isBlocked) {
+    const scrollElement = document.scrollingElement;
+    if (isBlocked) {
+        blockScrolling(scrollElement);
+    }
+    else {
+        enableScrolling(scrollElement);
+    }
+}
+export default function useScrollBlocking(active) {
+    useEffect(() => toggleScrolling(active), [active]);
+}

package/dist/useTrigger.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Props = {
+    defaultVisible?: boolean;
+    getTrigger?: () => HTMLElement | null;
+};
+export default function useTrigger({ defaultVisible, getTrigger, }?: Props): [boolean, (visible: boolean) => void, RefObject<HTMLElement>];
+export {};

package/dist/useTrigger.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from 'react';
+export default function useTrigger({ defaultVisible = false, getTrigger, } = {}) {
+    const triggerRef = useRef(null);
+    const [isVisible, _setVisible] = useState(false);
+    function getTriggerElement() {
+        if (getTrigger) {
+            return getTrigger();
+        }
+        return triggerRef.current;
+    }
+    function setVisible(visible) {
+        if (isVisible !== visible) {
+            _setVisible(visible);
+            if (!visible) {
+                const trigger = getTriggerElement();
+                if (trigger) {
+                    trigger.focus();
+                }
+            }
+        }
+    }
+    useEffect(() => _setVisible(defaultVisible), [defaultVisible]);
+    return [isVisible, setVisible, triggerRef];
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@weser/markdown",
+  "version": "0.0.8",
+  "description": "Helpers for working with markdown files",
+  "author": "Robin Weser <robin@weser.io>",
+  "license": "MIT",
+  "homepage": "https://github.com/robinweser/weser.git",
+  "repository": "https://github.com/robinweser/weser.git",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist/**"
+  ],
+  "browserslist": [
+    "IE >= 11",
+    "Firefox >= 60",
+    "Safari >= 11.1",
+    "Chrome >= 66",
+    "ChromeAndroid >= 66",
+    "iOS >= 11.3",
+    "Edge >= 15"
+  ],
+  "scripts": {
+    "setup": "pnpm build",
+    "clean": "rimraf dist",
+    "build": "tsc -b",
+    "dev": "pnpm build -w",
+    "test": "echo 1"
+  },
+  "keywords": [
+    "react",
+    "react-hook",
+    "react hooks",
+    "hooks",
+    "utils"
+  ],
+  "dependencies": {
+    "fast-loops": "^1.1.4",
+    "gray-matter": "^4.0.3",
+    "mdast-util-from-markdown": "^2.0.2"
+  },
+  "devDependencies": {
+    "ava": "^6.1.3",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.4.5"
+  },
+  "gitHead": "9dce5f658f08431e80506b022369229dfeff7dd7"
+}