chore(v2): Define type for markdown right table of contents (#3306)

This commit is contained in:
Sam Zhou 2020-08-20 11:57:19 -04:00 committed by GitHub
parent fb49a7fc89
commit b38f562322
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 57 additions and 3 deletions

View file

@ -6,6 +6,9 @@
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },
"scripts": {
"build": "tsc"
},
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/parser": "^7.9.4", "@babel/parser": "^7.9.4",
@ -27,6 +30,7 @@
"url-loader": "^4.1.0" "url-loader": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@docusaurus/types": "^2.0.0-alpha.61",
"remark": "^12.0.0", "remark": "^12.0.0",
"remark-mdx": "^1.5.8", "remark-mdx": "^1.5.8",
"to-vfile": "^6.0.0", "to-vfile": "^6.0.0",

View file

@ -5,11 +5,29 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
// @ts-check
const toString = require('mdast-util-to-string'); const toString = require('mdast-util-to-string');
const visit = require('unist-util-visit'); const visit = require('unist-util-visit');
const escapeHtml = require('escape-html'); const escapeHtml = require('escape-html');
/** @typedef {import('@docusaurus/types').MarkdownRightTableOfContents} TOC */
/** @typedef {import('unist').Node} Node */
/**
* @typedef {Object} StringValuedNode
* @property {string} type
* @property {string} value
* @property {number} depth
* @property {Object} data
* @property {StringValuedNode[]} children
*/
// https://github.com/syntax-tree/mdast#heading // https://github.com/syntax-tree/mdast#heading
/**
* @param {StringValuedNode | undefined} node
* @returns {string}
*/
function toValue(node) { function toValue(node) {
if (node && node.type) { if (node && node.type) {
switch (node.type) { switch (node.type) {
@ -34,11 +52,22 @@ function toValue(node) {
// Visit all headings. We `slug` all headings (to account for // Visit all headings. We `slug` all headings (to account for
// duplicates), but only take h2 and h3 headings. // duplicates), but only take h2 and h3 headings.
/**
* @param {StringValuedNode} node
* @returns {TOC[]}
*/
function search(node) { function search(node) {
/** @type {TOC[]} */
const headings = []; const headings = [];
let current = -1; let current = -1;
let currentDepth = 0; let currentDepth = 0;
/**
* @param {StringValuedNode} child
* @param {number} index
* @param {Node | undefined} parent
* @returns {void}
*/
const onHeading = (child, index, parent) => { const onHeading = (child, index, parent) => {
const value = toString(child); const value = toString(child);

View file

@ -0,0 +1,9 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"allowJs": true,
"noEmit": true,
"noImplicitAny": false
},
"include": ["src/"]
}

View file

@ -8,6 +8,8 @@
/* eslint-disable camelcase */ /* eslint-disable camelcase */
declare module '@theme/BlogPostPage' { declare module '@theme/BlogPostPage' {
import type {MarkdownRightTableOfContents} from '@docusaurus/types';
export type FrontMatter = { export type FrontMatter = {
readonly title: string; readonly title: string;
readonly author?: string; readonly author?: string;
@ -42,7 +44,7 @@ declare module '@theme/BlogPostPage' {
export type Content = { export type Content = {
readonly frontMatter: FrontMatter; readonly frontMatter: FrontMatter;
readonly metadata: Metadata; readonly metadata: Metadata;
readonly rightToc: any; // TODO where to define this shared type? readonly rightToc: MarkdownRightTableOfContents;
(): JSX.Element; (): JSX.Element;
}; };

View file

@ -28,6 +28,7 @@
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2",
"react-toggle": "^4.1.1", "react-toggle": "^4.1.1",
"use-onclickoutside": "^0.3.1", "use-onclickoutside": "^0.3.1",
"@docusaurus/types": "^2.0.0-alpha.61",
"@docusaurus/utils-validation": "^2.0.0-alpha.61" "@docusaurus/utils-validation": "^2.0.0-alpha.61"
}, },
"devDependencies": { "devDependencies": {

View file

@ -8,14 +8,17 @@
import React from 'react'; import React from 'react';
import useTOCHighlight from '@theme/hooks/useTOCHighlight'; import useTOCHighlight from '@theme/hooks/useTOCHighlight';
import type {MarkdownRightTableOfContents} from '@docusaurus/types';
import styles from './styles.module.css'; import styles from './styles.module.css';
const LINK_CLASS_NAME = 'table-of-contents__link'; const LINK_CLASS_NAME = 'table-of-contents__link';
const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active'; const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active';
const TOP_OFFSET = 100; const TOP_OFFSET = 100;
type TOCProps = {readonly headings: MarkdownRightTableOfContents[]};
/* eslint-disable jsx-a11y/control-has-associated-label */ /* eslint-disable jsx-a11y/control-has-associated-label */
function Headings({headings, isChild}: {headings; isChild?: boolean}) { function Headings({headings, isChild}: TOCProps & {isChild?: boolean}) {
if (!headings.length) { if (!headings.length) {
return null; return null;
} }
@ -40,7 +43,7 @@ function Headings({headings, isChild}: {headings; isChild?: boolean}) {
); );
} }
function TOC({headings}) { function TOC({headings}: TOCProps): JSX.Element {
useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET); useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
return ( return (
<div className={styles.tableOfContents}> <div className={styles.tableOfContents}>

View file

@ -270,3 +270,9 @@ export interface ValidationSchema<T> {
unknown(): ValidationSchema<T>; unknown(): ValidationSchema<T>;
append(data: any): ValidationSchema<T>; append(data: any): ValidationSchema<T>;
} }
export interface MarkdownRightTableOfContents {
readonly value: string;
readonly id: string;
readonly children: MarkdownRightTableOfContents[];
}