Convert list of H1..6 to Hierarchy – SEO

I was able to solve this problem in Typescript.

I am not experienced in this language and while it works fine, someone with more experience may be able to improve this code.

My goal was to take any list of H1..6 and turn it into a Hierarchy and then filter to final Hierarchy to produce a useful Table of Content.

Output Screen Shot

Heading.ts

export default class Heading {
  text: string;
  slug: string;
  depth: number;
  sequence: number;

  parent: Heading | null;
  headings: Heading[] | null;

  constructor(text: string, slug: string, depth: number, sequence: number) {
    this.text = text;
    this.slug = slug;
    this.depth = depth;
    this.sequence = sequence;

    this.parent = null;
    this.headings = null;
  }

  add_heading(heading: Heading) {
    heading.parent = this;
    if (this.headings === null) {
      this.headings = [];
    }
    this.headings.push(heading);
  }

  root() {
    return this.depth === 0;
  }

  valid() {
    return this.depth > 0;
  }

  data() {
    let result: any = {
      text: this.text,
      slug: this.slug,
      depth: this.depth,
      sequence: this.sequence,
      headings: this.headings?.map((h) => h.data()),
    };
    return result;
  }
}

CreateToc.ts

import Heading from './heading';

export default class CreateToc {
  toc: Heading;
  current_heading: Heading;

  constructor() {
    this.toc = new Heading("*", '-', 0, -1);
    this.current_heading = this.toc;
  }

  process(astro_headings: any[]) {
    astro_headings.forEach((astro_heading, index) => {
      let heading = new Heading(
        astro_heading.text,
        astro_heading.slug,
        astro_heading.depth,
        index
      );
      this.process_heading(heading);
    });
    return this.data();
  }

  debug() {
    console.log(JSON.stringify(this.data(), null, 2));
  }

  private data() {
    return (this.toc.headings || []).map((h) => h.data());
  }

  private process_heading(heading: Heading) {
    if (heading.depth > this.current_heading.depth) {
      this.add_child_heading(heading);
    } else if (heading.depth === this.current_heading.depth) {
      this.add_sibling_heading(heading);
    } else if (heading.depth < this.current_heading.depth) {
      this.add_upstream_heading(heading);
    }
  }

  private add_child_heading(heading: Heading) {
    this.current_heading.add_heading(heading);
    this.current_heading = heading;
  }

  private add_sibling_heading(heading: Heading) {
    if (this.current_heading!.parent === null) {
      return;
    }
    this.current_heading = this.current_heading.parent;
    this.add_child_heading(heading);
  }

  private add_upstream_heading(heading: Heading) {
    while (this.current_heading.valid() && heading.depth < this.current_heading.depth) {
      if (this.current_heading.parent === null) {
        throw new Error("current_heading.parent is null");
      }

      this.current_heading = this.current_heading.parent;
    }

    // There is no upstream heading to attach to, so just add a new root node
    if (this.current_heading.root()) {
      return this.add_child_heading(heading);
    }

    this.add_sibling_heading(heading);
  }
}

Example Usage

let filterHeadings = headings
  .filter((heading) => heading.depth === 2 || heading.depth === 3)

let tocHeadings = (new CreateToc()).process(filterHeadings);

Sample Data

[
  {
    "text": "Traits for data variation",
    "slug": "traits-for-data-variation",
    "depth": 2,
    "sequence": 0,
    "headings": [
      {
        "text": "User with role flag",
        "slug": "user-with-role-flag",
        "depth": 3,
        "sequence": 1
      },
      {
        "text": "Blog article in draft mode",
        "slug": "blog-article-in-draft-mode",
        "depth": 3,
        "sequence": 2
      }
    ]
  },
  {
    "text": "Enum Traits (non ActiveRecord)",
    "slug": "enum-traits-non-activerecord",
    "depth": 2,
    "sequence": 3,
    "headings": [
      {
        "text": "#traits_for_enums",
        "slug": "traits_for_enums",
        "depth": 3,
        "sequence": 4
      }
    ]
  },
  {
    "text": "Get a list of available traits",
    "slug": "get-a-list-of-available-traits",
    "depth": 2,
    "sequence": 5,
    "headings": [
      {
        "text": "#defined_traits",
        "slug": "defined_traits",
        "depth": 3,
        "sequence": 6
      }
    ]
  },
  {
    "text": "Global traits",
    "slug": "global-traits",
    "depth": 2,
    "sequence": 7
  }
]