151 lines
4.5 KiB
Markdown
151 lines
4.5 KiB
Markdown
# 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.
|