<commit_before>import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { useState, useEffect, useRef } from "react";
import classnames from "classnames";
import { join } from "path";
import {
  getPreviousPost,
  getNextPost,
  buildPageTree,
  getPage,
} from "../../lib/lib";
import Meta from "../../components/Meta";
import Pagination from "../../components/Pagination";
import Markdown from "../../components/Markdown";
import ContentArea from "../../components/ContentArea";
import Sidebar from "../../components/Sidebar";
import markdownStyles from "../../styles/markdown.module.css";
import { decode } from "html-entities";
import { TableOfContents } from "../../components/TableOfContents";

const breadcrumbs = (posts, paths) => {
  const results = [
    <Link href="/">Urbit</Link>,
    <span className="px-1">/</span>,
    <Link href="/docs">Documentation</Link>,
  ];
  let thisLink = "/docs";
  for (const path of paths) {
    posts = posts.children[path];
    thisLink = join(thisLink, path);
    results.push(
      <span className="px-1">/</span>,
      <Link href={thisLink}>{posts.title}</Link>
    );
  }
  return results;
};

const childPages = (thisLink, children, level = 0) => (
  <ul className="pl-0">
    {Object.entries(children).map(([childSlug, child]) => (
      <li>{pageTree(join(thisLink, childSlug), child, level)}</li>
    ))}
  </ul>
);

const pageTree = (thisLink, tree, level = 0) => {
  const router = useRouter();
  const firstCrumb = "/" + router.asPath.split("/").slice(1, -1).join("/");

  const includesThisPage = firstCrumb.includes(thisLink);
  const isThisPage = router.asPath === thisLink;
  const [isOpen, toggleTree] = useState(includesThisPage);

  const activeClasses = classnames({
    hidden: !isOpen,
  });

  const headingItemClasses = classnames({
    "pl-0 text-black text-base font-semibold hover:text-green leading-relaxed":
      level === 0,
    "pl-4 text-black text-base font-semibold hover:text-green": level === 1,
    "pl-8 text-black text-base hover:text-green": level === 2,
  });

  const pageItemClasses = classnames({
    "pl-4 text-black text-base hover:text-green": level === 0,
    "pl-8 text-black text-base hover:text-green": level === 1,
    "pl-12 text-black text-base hover:text-green": level === 2,
  });

  return (
    <>
      <span onClick={() => toggleTree(!isOpen)}>
        <p className={`${headingItemClasses} cursor-pointer`}>{tree.title}</p>
      </span>
      <div className={activeClasses}>
        <ul className={""}>
          {tree.pages.map(({ title, slug }) => {
            const href = join(thisLink, slug);
            const isSelected = router.asPath === href;
            const selectedClasses = classnames({
              dot: isSelected,
              "text-green": isSelected,
            });
            return (
              <li>
                <Link href={href}>
                  <a
                    className={`relative ${pageItemClasses} ${selectedClasses}`}
                  >
                    {title}
                  </a>
                </Link>
              </li>
            );
          })}
        </ul>
        {childPages(thisLink, tree.children, level + 1)}
      </div>
    </>
  );
};

export default function DocsLayout({
  posts,
  data,
  params,
  search,
  markdown,
  previousPost,
  nextPost,
}) {
  const router = useRouter();
  const isSelected = "/docs".includes(router.asPath);
  const selectedClasses = classnames({
    dot: isSelected,
    "text-green": isSelected,
    "text-black": !isSelected,
  });
  const rootClasses = "pl-0 text-base hover:text-green";
  return (
    <>
      <Head>
        <title>{data.title} • Documentation • urbit.org</title>
        {Meta(data)}
      </Head>
      <div className="flex w-screen h-screen min-h-screen w-screen sidebar">
        <Sidebar search={search}>
          <ul>
            <li>
              <Link href="/docs">
                <a className={`relative ${selectedClasses} ${rootClasses}`}>
                  Developer Documentation
                </a>
              </Link>
            </li>
          </ul>
          {childPages("/docs", posts.children)}
        </Sidebar>
        <ContentArea
          breadcrumbs={breadcrumbs(posts, params.slug?.slice(0, -1) || "")}
          title={data.title}
          search={search}
          section="Urbit Documentation"<commit_msg>docs: change dev docs -> Introduction<commit_after>import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { useState, useEffect, useRef } from "react";
import classnames from "classnames";
import { join } from "path";
import {
  getPreviousPost,
  getNextPost,
  buildPageTree,
  getPage,
} from "../../lib/lib";
import Meta from "../../components/Meta";
import Pagination from "../../components/Pagination";
import Markdown from "../../components/Markdown";
import ContentArea from "../../components/ContentArea";
import Sidebar from "../../components/Sidebar";
import markdownStyles from "../../styles/markdown.module.css";
import { decode } from "html-entities";
import { TableOfContents } from "../../components/TableOfContents";

const breadcrumbs = (posts, paths) => {
  const results = [
    <Link href="/">Urbit</Link>,
    <span className="px-1">/</span>,
    <Link href="/docs">Documentation</Link>,
  ];
  let thisLink = "/docs";
  for (const path of paths) {
    posts = posts.children[path];
    thisLink = join(thisLink, path);
    results.push(
      <span className="px-1">/</span>,
      <Link href={thisLink}>{posts.title}</Link>
    );
  }
  return results;
};

const childPages = (thisLink, children, level = 0) => (
  <ul className="pl-0">
    {Object.entries(children).map(([childSlug, child]) => (
      <li>{pageTree(join(thisLink, childSlug), child, level)}</li>
    ))}
  </ul>
);

const pageTree = (thisLink, tree, level = 0) => {
  const router = useRouter();
  const firstCrumb = "/" + router.asPath.split("/").slice(1, -1).join("/");

  const includesThisPage = firstCrumb.includes(thisLink);
  const isThisPage = router.asPath === thisLink;
  const [isOpen, toggleTree] = useState(includesThisPage);

  const activeClasses = classnames({
    hidden: !isOpen,
  });

  const headingItemClasses = classnames({
    "pl-0 text-black text-base font-semibold hover:text-green leading-relaxed":
      level === 0,
    "pl-4 text-black text-base font-semibold hover:text-green": level === 1,
    "pl-8 text-black text-base hover:text-green": level === 2,
  });

  const pageItemClasses = classnames({
    "pl-4 text-black text-base hover:text-green": level === 0,
    "pl-8 text-black text-base hover:text-green": level === 1,
    "pl-12 text-black text-base hover:text-green": level === 2,
  });

  return (
    <>
      <span onClick={() => toggleTree(!isOpen)}>
        <p className={`${headingItemClasses} cursor-pointer`}>{tree.title}</p>
      </span>
      <div className={activeClasses}>
        <ul className={""}>
          {tree.pages.map(({ title, slug }) => {
            const href = join(thisLink, slug);
            const isSelected = router.asPath === href;
            const selectedClasses = classnames({
              dot: isSelected,
              "text-green": isSelected,
            });
            return (
              <li>
                <Link href={href}>
                  <a
                    className={`relative ${pageItemClasses} ${selectedClasses}`}
                  >
                    {title}
                  </a>
                </Link>
              </li>
            );
          })}
        </ul>
        {childPages(thisLink, tree.children, level + 1)}
      </div>
    </>
  );
};

export default function DocsLayout({
  posts,
  data,
  params,
  search,
  markdown,
  previousPost,
  nextPost,
}) {
  const router = useRouter();
  const isSelected = "/docs".includes(router.asPath);
  const selectedClasses = classnames({
    dot: isSelected,
    "text-green": isSelected,
    "text-black": !isSelected,
  });
  const rootClasses = "pl-0 text-base hover:text-green";
  return (
    <>
      <Head>
        <title>{data.title} • Documentation • urbit.org</title>
        {Meta(data)}
      </Head>
      <div className="flex w-screen h-screen min-h-screen w-screen sidebar">
        <Sidebar search={search}>
          <ul>
            <li>
              <Link href="/docs">
                <a className={`relative ${selectedClasses} ${rootClasses}`}>
                  Introduction
                </a>
              </Link>
            </li>
          </ul>
          {childPages("/docs", posts.children)}
        </Sidebar>
        <ContentArea
          breadcrumbs={breadcrumbs(posts, params.slug?.slice(0, -1) || "")}
          title={data.title}
          search={search}
          section="Urbit Documentation"
{'fraction_non_alphanumeric': 0.16386980515823854, 'fraction_numerical': 0.005406014190787251, 'mean_word_length': 2.3712984054669706, 'pattern_counts': {'":': 18, '<': 97, '<?xml version=': 0, '>': 108, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1650219', 'n_tokens_mistral': 2683, 'n_tokens_neox': 2648, 'n_words': 618}