converting TailwindUI syntax documentation to a page in my app.

Hey I’m just struggling to convert the Syntax docs template from TailwindUI into a page in my application.

5 Replies

import Head from 'next/head'
import { slugifyWithCounter } from '@sindresorhus/slugify'

import { Layout } from 'src/components/docs/Layout'

function getNodeText(node) {
  let text = ''
  for (let child of node.children ?? []) {
    if (typeof child === 'string') {
      text += child
    }
    text += getNodeText(child)
  }
  return text
}

function collectHeadings(nodes, slugify = slugifyWithCounter()) {
  let sections = []

  for (let node of nodes) {
    if (node.name === 'h2' || node.name === 'h3') {
      let title = getNodeText(node)
      if (title) {
        let id = slugify(title)
        node.attributes.id = id
        if (node.name === 'h3') {
          if (!sections[sections.length - 1]) {
            throw new Error(
              'Cannot add `h3` to table of contents without a preceding `h2`'
            )
          }
          sections[sections.length - 1].children.push({
            ...node.attributes,
            title,
          })
        } else {
          sections.push({ ...node.attributes, title, children: [] })
        }
      }
    }

    sections.push(...collectHeadings(node.children ?? [], slugify))
  }

  return sections
}

export default function Docs({ Component, pageProps }) {
  console.log(pageProps)
  let title = pageProps.markdoc?.frontmatter.title

  let pageTitle =
    pageProps.markdoc?.frontmatter.pageTitle ||
    `${pageProps.markdoc?.frontmatter.title} - Docs`

  let description = pageProps.markdoc?.frontmatter.description

  let tableOfContents = pageProps.markdoc?.content
    ? collectHeadings(pageProps.markdoc.content)
    : []

  return (
    <>
      <Head>
        <title>{pageTitle}</title>
        {description && <meta name="description" content={description} />}
      </Head>
      <Layout title={title} tableOfContents={tableOfContents}>
        <Component {...pageProps} />
      </Layout>
    </>
  )
}

import Head from 'next/head'
import { slugifyWithCounter } from '@sindresorhus/slugify'

import { Layout } from 'src/components/docs/Layout'

function getNodeText(node) {
  let text = ''
  for (let child of node.children ?? []) {
    if (typeof child === 'string') {
      text += child
    }
    text += getNodeText(child)
  }
  return text
}

function collectHeadings(nodes, slugify = slugifyWithCounter()) {
  let sections = []

  for (let node of nodes) {
    if (node.name === 'h2' || node.name === 'h3') {
      let title = getNodeText(node)
      if (title) {
        let id = slugify(title)
        node.attributes.id = id
        if (node.name === 'h3') {
          if (!sections[sections.length - 1]) {
            throw new Error(
              'Cannot add `h3` to table of contents without a preceding `h2`'
            )
          }
          sections[sections.length - 1].children.push({
            ...node.attributes,
            title,
          })
        } else {
          sections.push({ ...node.attributes, title, children: [] })
        }
      }
    }

    sections.push(...collectHeadings(node.children ?? [], slugify))
  }

  return sections
}

export default function Docs({ Component, pageProps }) {
  console.log(pageProps)
  let title = pageProps.markdoc?.frontmatter.title

  let pageTitle =
    pageProps.markdoc?.frontmatter.pageTitle ||
    `${pageProps.markdoc?.frontmatter.title} - Docs`

  let description = pageProps.markdoc?.frontmatter.description

  let tableOfContents = pageProps.markdoc?.content
    ? collectHeadings(pageProps.markdoc.content)
    : []

  return (
    <>
      <Head>
        <title>{pageTitle}</title>
        {description && <meta name="description" content={description} />}
      </Head>
      <Layout title={title} tableOfContents={tableOfContents}>
        <Component {...pageProps} />
      </Layout>
    </>
  )
}

that is my index.jsx file inside the /pages/docs dir I have my index page as ts/tsx, not sure if that affects anything. Im just trying to copy a template from TailwindUI, so I dont have to start from scratch.

rocawear•2y ago

Sorry but what is your question?

mac.dev•2y ago

What do I have to change in order for the page to work?

error - src/pages/docs/index.jsx (49:24) @ Docs
error - TypeError: Cannot read properties of undefined (reading 'markdoc'

error - src/pages/docs/index.jsx (49:24) @ Docs
error - TypeError: Cannot read properties of undefined (reading 'markdoc'

rocawear•2y ago

There is the answer on error message but cant see your lines

mac.dev•2y ago

wdym?

TypeError: Cannot read properties of undefined (reading 'markdoc')
    at Docs (webpack-internal:///./src/pages/docs/index.jsx:81:25)
    at renderWithHooks (/Users/macbook/Desktop/Code/quest-bot/web-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/macbook/Desktop/Code/quest-bot/web-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)

TypeError: Cannot read properties of undefined (reading 'markdoc')
    at Docs (webpack-internal:///./src/pages/docs/index.jsx:81:25)
    at renderWithHooks (/Users/macbook/Desktop/Code/quest-bot/web-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/macbook/Desktop/Code/quest-bot/web-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)

Gaming

Programming

converting TailwindUI syntax documentation to a page in my app.