Getting Started

{
    "scripts": {
        "dev": "npx htmldocs@latest dev",
    }
}

import { Document, Footer } from "@htmldocs/react"
import MarkdownIt from 'markdown-it'

import "~/index.css"

const MARKDOWN_CONTENT = `
# The Art of Programming

## Chapter 1: Fundamentals

Programming is both a science and an art. It requires logical thinking and creative problem-solving. In this book, we will explore the principles that make software development a fascinating discipline.

### 1.1 The Programming Mindset

To become an effective programmer, one must develop a particular way of thinking. This includes:

- Breaking down complex problems into manageable parts
- Thinking algorithmically about solutions
- Understanding data structures and their applications
- Embracing continuous learning and adaptation

The journey of a programmer is one of constant growth and discovery.
`

const md = new MarkdownIt({ html: true })

function Book() {
  const html = md.render(MARKDOWN_CONTENT)
  
  return (
    <Document size="6in 9in" orientation="portrait" margin="0.75in">
      <article className="prose max-w-none font-serif">
        <div dangerouslySetInnerHTML={{ __html: html }} />
      </article>

      <Footer 
        position="bottom-center"
        className="font-serif text-sm"
        children={({ currentPage }) => currentPage}
        marginBoxStyles={{
          marginBottom: '0.25in',
        }}
      />
    </Document>
  )
}

Book.documentId = "book"

export default Book