# Tana to Paged Media

A single-page HTML/JavaScript tool for converting Tana JSON document structures into printable HTML format.

## Overview

This tool parses JSON documents exported from Tana (a React-based outliner/knowledge management application) and transforms them into well-formatted HTML suitable for printing or export to PDF. The parser handles nested parent-child relationships at arbitrary depths and supports various content types including lists, tables, and tuples.

## Features

- **Recursive parsing**: Handles arbitrarily deep nested structures
- **Multiple content types**: Supports lists, tables, tuples, and standard content blocks
- **Document structure preservation**: Maintains parent-child relationships and document order
- **Printable output**: Generates clean HTML optimized for printing
- **User-friendly interface**:
  - Paste JSON directly or upload `.json` files
  - Drag-and-drop file support
  - Live preview of parsed output
  - One-click printing

## Usage

### Basic Usage

1. Open `index.html` in a web browser
2. Either:
   - **Paste JSON**: Select the "Paste JSON" tab and paste your Tana JSON data
   - **Upload File**: Select the "Upload File" tab and click to select or drag-and-drop a `.json` file
3. Click "Parse Document" to process the JSON
4. View the parsed output in the preview pane
5. Click "Print" to open a print dialog or "View HTML" to see the raw HTML

### JSON Structure

The parser expects Tana JSON data with the following structure:

```json
{
  "nodes": [
    {
      "id": "node-1",
      "name": "Published Content",
      "children": ["node-2", "node-3"]
    },
    {
      "id": "node-2",
      "name": "Section Title",
      "content": "Section content text",
      "children": []
    }
  ]
}
```

**Key fields:**
- `id`: Unique identifier for the node
- `name`: Node title/heading (the root node should have `name: "Published Content"`)
- `content` or `text`: Text content of the node
- `children`: Array of child node IDs or child node objects
- `type`: Optional type indicator (`list`, `table`, `tuple`)

### Content Types

#### Lists
```json
{
  "id": "list-1",
  "type": "list",
  "name": "My List",
  "ordered": false,
  "children": [...]
}
```

#### Tables
```json
{
  "id": "table-1",
  "type": "table",
  "name": "My Table",
  "children": [
    {
      "id": "row-1",
      "isHeader": true,
      "children": [...]
    }
  ]
}
```

#### Tuples (Key-Value Pairs)
```json
{
  "id": "tuple-1",
  "type": "tuple",
  "name": "My Tuple",
  "children": [
    {
      "id": "item-1",
      "key": "Author",
      "value": "John Doe"
    }
  ]
}
```

## Development

### Project Structure

```
tana-to-paged-media/
├── index.html          # Main tool interface
├── parser.js           # Core parsing logic (shared module)
├── README.md           # This file
└── dev/                # Development environment
    ├── index.html      # Test harness
    └── examples/       # Sample JSON documents
```

### Development Environment

The `dev/` folder contains a test harness for developing and testing the parser:

1. Open `dev/index.html` in a browser
2. Load sample JSON files from `dev/examples/`
3. Test parsing and debug output

The test harness shares the same `parser.js` module as the main tool, ensuring consistency.

### Parser API

The parser is implemented as a JavaScript class that can be used programmatically:

```javascript
const parser = new TanaParser({
  rootNodeName: 'Published Content',  // Name of the root node
  debug: false                        // Enable debug logging
});

// Parse JSON and get HTML
const html = parser.parse(tanaJsonData);
```

**Methods:**
- `parse(tanaData)`: Parse Tana JSON and return complete HTML document
- `parseNode(node, depth)`: Parse a single node recursively
- `getNodeChildren(node)`: Get child nodes of a parent
- `determineNodeType(node)`: Determine the type of content (list, table, etc.)

## Browser Compatibility

Works in all modern browsers:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)

## Technical Details

- **No build step required**: Pure HTML/CSS/JavaScript
- **No external dependencies**: Self-contained single-page application
- **Modular architecture**: Parser logic separated for reusability
- **Print-optimized**: CSS includes print media queries
- **Error handling**: Graceful error messages for invalid JSON

## Future Enhancements

Potential improvements:
- Export to PDF directly in the browser
- Custom CSS theme support
- Support for images and embedded media
- Advanced formatting options
- Page break controls for print layout

## License

See repository root for license information.