How to use github-slugger - 10 common examples

export const BlogLayout = ({ children, meta }) => {
  const {
    title,
    description,
    image,
    imageCaption,
    slug,
    date,
    author,
    github,
  } = meta
  const route = slug && `/blog/${slug}`

  // Slugified headings
  const slugger = new GitHubSlugger()
  const h1 = props => 
  const h2 = props => 
  const h3 = props => 
  const h4 = props => 
  const h5 = props => 
  const h6 = props => 

  return (
    
      <article>
        <a href="{route"></a></article>

import isNaN from 'lodash/isNaN';
import GithubSlugger from 'github-slugger';

// Export the singleton instance of GithubSlugger
export const slugger = new GithubSlugger();

export function setSlugs(sections) {
	return sections.map(section => {
		const { name, components, sections } = section;
		if (name) {
			section.slug = slugger.slug(section.name);
		}
		if (components && components.length) {
			section.components = setSlugs(components);
		}
		if (sections && sections.length) {
			section.sections = setSlugs(sections);
		}
		return section;
	});
}

import GithubSlugger from 'github-slugger';

const GithubSluggerInstance = GithubSlugger();

GithubSluggerInstance.reset();

// TODO(jim): Not sure what is the point of this.
export const toString = node => {
  if (typeof node === 'string') {
    return node;
  } else if (Array.isArray(node)) {
    return node.map(toString).join('');
  } else if (node.props.children) {
    return toString(node.props.children);
  } else {
    return '';
  }
};

const SectionToC = ({tree}) => {
  const slugger = new GithubSlugger();

  return (
    <ol>
      {
        tree.map(el =&gt; {
          const slug = slugger.slug(el.value);
          return <li><a href="{`#${slug}`}">{el.value}</a></li>;
        })
      }
    </ol>
  );
};

const AutolinkHeading = ({ children, ...props }) => {
  const slugger = new GithubSlugger()

  const slug = slugger.slug(children)

  return (

.filter(({ depth }) => depth <= 3)
      .map(i => {
        i.children = []
        return i
      })
      .reduce((acc, curr, i, arr) => {
        const prev = acc[acc.length - 1]
        if (prev && curr.depth > prev.depth) {
          prev.children.push(curr)
          return acc
        }

        acc.push(curr)
        return acc
      }, [])
    const slugger = GitHubSlugger()

    return (
      
        <h3>Sections</h3>
        <ol>
          {nestedHeadings.map(({ value, depth, children }) =&gt; {
            return (
              <li>
                <a value="" href="{`#${slugger.slug(value)}`}"></a>
                {children.length &gt; 0 &amp;&amp; (
                  <ol>
                    {children.map(({ value, depth }) =&gt; {
                      return (
                        <li>
                          <a value="" href="{`#${slugger.slug(value)}`}"></a>
                        </li></ol></li></ol>

import cheerio from 'cheerio'

import GitHubSlugger from 'github-slugger'
const slugger = new GitHubSlugger()

export default function(html) {
  const $ = cheerio.load(html)
  $('h2, h3').each(function() {
    const id = slugger.slug($(this).text())
    const svg =
      '<svg viewBox="0 0 512 512"><path d="M459.7 233.4L369 324c-49.8 50-131 50-181 0-7.8-8-14-16.8-19.3-26l42-42c2-2 4.5-3.2 7-4.5 2.8 10 8 19.3 15.7 27 25 25 65.5 25 90.5 0l90.4-90.4c25-24.8 25-65.4 0-90.4s-65.6-25-90.5 0l-32.3 32.2c-26-10-54.3-13-81.7-9l68.6-68.4c50-50 131-50 181 0s50 131 0 181zM220.3 382.2L188 414.4c-24.8 25-65.4 25-90.4 0s-25-65.6 0-90.5l90.5-90.6c25-25 65.7-25 90.6 0 7.8 7.8 13 17.2 15.8 27 2.4-1.3 4.8-2.4 6.8-4.4l42-42c-5.3-9.2-11.5-18-19.3-26-50-50-131.2-50-181 0l-90.6 90.6c-50 50-50 131 0 181s131 50 181 0l68.6-68.5c-27.4 4-55.6 1.3-81.7-8.8z"></path></svg>'
    $(this).attr('id', id)
    $(this).append(`<a aria-hidden="true" href="#${id}"> ${svg} </a>`)
  })
  return $.html()
}

.filter(Boolean)
    )
  }, [width, height, contentRef, imagesLoaded])

  let activeHeading = null
  const windowOffset = height / 2
  const scrollTop = y + windowOffset
  for (let i = offsets.length - 1; i >= 0; i--) {
    const {id, offset} = offsets[i]
    if (scrollTop >= offset) {
      activeHeading = id
      break
    }
  }

  const slugger = new Slugger()
  return (
    
      {props.headings.map(({value}) => {
        const text = striptags(value)
        const slug = slugger.slug(text)
        return (
          
            <a href="{`#${slug}`}">
              {text}
            </a>
          
        )
      })}
    
  )
}