feat(v2): allow custom heading component by endiliey · Pull Request #1687 · facebook/docusaurus

endiliey · 2019-07-22T08:07:08Z

Motivation

Rather than hardcoding/ transforming the header automatically in html, we should allow composition style. This will allow user to modify the heading as they like. Example: if they dont want hash icon

previously

docusaurus/packages/docusaurus-mdx-loader/src/rehype/linkHeadings.js

Lines 8 to 56 in 55ef751

    
           const visit = require('unist-util-visit'); 
        
           const createAnchor = id => ({ 
        
             type: 'element', 
        
             tagName: 'a', 
        
             properties: { 
        
               ariaHidden: true, 
        
               className: 'anchor', 
        
               id, 
        
             }, 
        
           }); 
        
           const createLink = id => ({ 
        
             type: 'element', 
        
             tagName: 'a', 
        
             properties: { 
        
               ariaHidden: true, 
        
               className: 'hash-link', 
        
               href: `#${id}`, 
        
             }, 
        
             children: [ 
        
               { 
        
                 type: 'text', 
        
                 value: '#', 
        
               }, 
        
             ], 
        
           }); 
        
           const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; 
        
           const visitor = node => { 
        
             const {properties} = node; 
        
             if (!properties || !properties.id || !headings.includes(node.tagName)) { 
        
               return; 
        
             } 
        
             node.children.unshift(createLink(properties.id)); 
        
             node.children.unshift(createAnchor(properties.id)); 
        
             delete properties.id; 
        
           }; 
        
           const transformer = node => { 
        
             visit(node, 'element', visitor); 
        
           }; 
        
           const plugin = () => transformer; 
        
           module.exports = plugin;

For now i make it the same format as before, feel free to tweak in new pr

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

anchor and hash link still works. same format as before but now easily swizzleable

docusaurus-bot · 2019-07-22T08:09:58Z

Deploy preview for docusaurus-2 ready!

Built with commit 277480e

https://deploy-preview-1687--docusaurus-2.netlify.com

docusaurus-bot · 2019-07-22T08:10:48Z

Deploy preview for docusaurus-preview ready!

Built with commit 277480e

https://deploy-preview-1687--docusaurus-preview.netlify.com

yangshun

Would people accidentally cause their headings on blog to break if they only want to modify the headings on docs?

endiliey · 2019-07-23T05:13:28Z

@yangshun

technically theme classic use the same mdxcomponents. if they want different, swizzle the blog layout to use different comp.

anw this pr is better than previous, previously we alrd transform the heading in html 😂

feat(v2): allow custom heading component

d29e0e8

endiliey requested a review from yangshun July 22, 2019 08:07

facebook-github-bot added the CLA Signed Signed Facebook CLA label Jul 22, 2019

wgao19 mentioned this pull request Jul 22, 2019

docs(v2) themes #1645

Merged

changelog

277480e

yangshun approved these changes Jul 23, 2019

View reviewed changes

endiliey merged commit 84b2270 into master Jul 23, 2019

endiliey deleted the endiliey/heading branch July 23, 2019 05:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

feat(v2): allow custom heading component#1687

feat(v2): allow custom heading component#1687
endiliey merged 2 commits intomasterfrom
endiliey/heading

endiliey commented Jul 22, 2019 •

edited

Loading

Uh oh!

docusaurus-bot commented Jul 22, 2019 •

edited

Loading

Uh oh!

docusaurus-bot commented Jul 22, 2019 •

edited

Loading

Uh oh!

yangshun left a comment

Uh oh!

endiliey commented Jul 23, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	const visit = require('unist-util-visit');

	const createAnchor = id => ({
	type: 'element',
	tagName: 'a',
	properties: {
	ariaHidden: true,
	className: 'anchor',
	id,
	},
	});

	const createLink = id => ({
	type: 'element',
	tagName: 'a',
	properties: {
	ariaHidden: true,
	className: 'hash-link',
	href: `#${id}`,
	},
	children: [
	{
	type: 'text',
	value: '#',
	},
	],
	});

	const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

	const visitor = node => {
	const {properties} = node;
	if (!properties \|\| !properties.id \|\| !headings.includes(node.tagName)) {
	return;
	}

	node.children.unshift(createLink(properties.id));
	node.children.unshift(createAnchor(properties.id));

	delete properties.id;
	};

	const transformer = node => {
	visit(node, 'element', visitor);
	};

	const plugin = () => transformer;

	module.exports = plugin;

Uh oh!

Comments

Conversation

endiliey commented Jul 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Have you read the Contributing Guidelines on pull requests?

Test Plan

Uh oh!

docusaurus-bot commented Jul 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

docusaurus-bot commented Jul 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yangshun left a comment

Choose a reason for hiding this comment

Uh oh!

endiliey commented Jul 23, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

endiliey commented Jul 22, 2019 •

edited

Loading

docusaurus-bot commented Jul 22, 2019 •

edited

Loading

docusaurus-bot commented Jul 22, 2019 •

edited

Loading