# CaTML (Cat Altered Text Markup Language) 🐾

> Standard HTML is for humans. **CaTML** is for fine felines.

CaTML is a lightweight, zero-dependency HTML compiler and runtime written in JavaScript that translates feline markup tags and attributes directly into standard semantic HTML.

Repository: [https://git.p20.dev/christian/CaTML.git](https://git.p20.dev/christian/CaTML.git)

---

## 🚀 Quick Start

### 1. In HTML with `<script type="text/catml">`

Simply load `catml.js` and write your CaTML code directly:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Cat Page</title>
  <script src="catml.js"></script>
</head>
<body>
  <script type="text/catml">
    <box breed="container">
      <meow1>🐾 Welcome to My Website</meow1>
      <purr>This page is written in pure <claw>CaTML</claw>!</purr>
      <bap on-bap="alert('PURRR!')">Bap Me</bap>
    </box>
  </script>
</body>
</html>
```

### 2. Standalone Page (`<catworld>`)

You can even write the entire document root in CaTML:

```html
<catworld>
  <whiskers>
    <collar>Kitty Portal</collar>
    <script src="catml.js"></script>
  </whiskers>
  <fur>
    <box>
      <meow1>Welcome!</meow1>
      <purr>The world is feline now.</purr>
    </box>
  </fur>
</catworld>
```

### 3. JavaScript API

```javascript
// Compile to HTML string
const html = CatML.compile('<box><purr>Meow!</purr></box>');
console.log(html); // <div><p>Meow!</p></div>

// Render directly into a DOM element
CatML.render('<box><purr>Meow!</purr></box>', document.getElementById('app'));
```

---

## 📖 Feline Dictionary

### Core Tags

| CaTML Tag | HTML Tag | Feline Concept / Description |
|---|---|---|
| `<catworld>` / `<catml>` | `<html>` | The whole cat universe |
| `<whiskers>` | `<head>` | Metadata & sensory inputs |
| `<collar>` | `<title>` | Identification |
| `<fur>` | `<body>` | The visible body |
| `<box>` / `<cardboard>` | `<div>` | If it fits, I sits (container) |
| `<feather>` / `<mouse>` | `<span>` | Small things to chase |
| `<meow1>` ... `<meow6>` | `<h1>` ... `<h6>` | Headings (from roar to tiny squeak) |
| `<purr>` | `<p>` | Steady purring paragraph |
| `<scratch>` | `<a>` | Hyperlink (scratch and jump) |
| `<stare>` | `<img>` | Image (what the cat stares at) |
| `<bap>` / `<paw>` | `<button>` | Action button (bap items off tables) |
| `<sniff>` | `<input>` | Input field |
| `<yowl>` | `<textarea>` | Multi-line text field |
| `<bowl>` | `<ul>` | Food bowl / list |
| `<numbered-bowl>` | `<ol>` | Ordered list |
| `<treat>` | `<li>` | Single treat / list item |
| `<claw>` | `<strong>` / `<b>` | Sharp emphasis |
| `<hiss>` | `<em>` / `<i>` | Italic hissed tone |
| `<catnip>` | `<script>` | JavaScript (gives zoomies!) |
| `<groom>` | `<style>` | CSS styling |
| `<litterbox>` | `<footer>` | Bottom footer |
| `<nap>` | `<hr>` | Rest / horizontal rule |
| `<door>` | `<form>` | Form container |
| `<curtain>` | `<header>` | Page header |
| `<shelf>` | `<nav>` | Navigation bar |
| `<hammock>` | `<main>` | Main content |
| `<perch>` | `<section>` | Section |

### Attributes

| CaTML Attribute | HTML Attribute | Description |
|---|---|---|
| `catch="..."` | `href="..."` | Destination URL to chase |
| `prey="..."` | `src="..."` | Source image URL |
| `scent="..."` | `alt="..."` | Alt text / scent profile |
| `tag="..."` | `id="..."` | ID attribute |
| `breed="..."` | `class="..."` | CSS class attribute |
| `fluff="..."` | `style="..."` | Inline CSS styles |
| `on-bap="..."` | `onclick="..."` | Click event listener |
| `on-sniff="..."` | `oninput="..."` | Input event listener |
| `on-change="..."` | `onchange="..."` | Change event listener |
| `on-stalk="..."` | `onmouseover="..."` | Mouseover event listener |
| `on-pounce="..."` | `onmousedown="..."` | Mousedown event listener |
| `treat-type="..."` | `type="..."` | Input type (`text`, `number`, etc.) |
| `kibble="..."` | `value="..."` | Input value |
| `curiosity="..."` | `placeholder="..."` | Placeholder text |
| `collar-name="..."` | `name="..."` | Name attribute |

---

## 🎮 Interactive Playground

Open `index.html` in any browser to experience the **CaTML Playground**:
- Real-time syntax compiler
- Split view: Live preview & compiled raw HTML
- Pre-built templates:
  - *Welcome to CaTML*
  - *Interactive Bap Counter*
  - *Kitten Adoption Form*
  - *Sir Pounce-a-Lot Portfolio*
- Built-in interactive feline vocabulary modal

---

## 🧪 Testing

Run the automated test suite with Node.js:

```bash
node test/test.js
```

---

## 📄 License

MIT. Built with 🐾 purrs and catnip.