# LiteralJS Starter 💜

A beautiful starter template for [LiteralJS](https://literaljs.com) — a 4.25 kB zero-dependency framework with keyed reconciliation, WeakMap events, and component memoization.

![Catppuccin Mocha Theme](https://catppuccin.com)

## ✨ Features

- **Cute Catppuccin Mocha design** — Soft pastels, bouncy animations, floating shapes
- **Interactive counter demo** — With sound effects and visual feedback
- **Copy-to-clipboard** — Click "npm" button to copy install command
- **Sound effects** — Animal Crossing-style bloops on every interaction
- **Responsive** — Looks great on mobile and desktop
- **Zero config** — Parcel handles JSX, SCSS, and bundling

## 🚀 Quick Start

```bash
# Clone this repository
git clone git@gitlab.com:mikeysax/LiteralJS-Starter.git my-app
cd my-app

# Install dependencies
npm install

# Start development server
npm start

# Open http://localhost:1234 in your browser
```

## 📦 Available Scripts

| Script | Description |
|--------|-------------|
| `npm start` | Start development server (Parcel) |
| `npm run dev` | Start and open browser |
| `npm run build-netlify` | Build for production (Netlify) |

## 🎨 Design System

This starter uses the **Catppuccin Mocha** palette:

| Color | Hex | Usage |
|-------|-----|-------|
| Mauve | `#cba6f7` | Primary accent, buttons |
| Pink | `#f5c2e7` | Secondary accent |
| Sky | `#89dceb` | Links, highlights |
| Green | `#a6e3a1` | Success, badges |
| Peach | `#fab387` | Warnings, tags |
| Lavender | `#b4befe` | Gradients, glows |

## 🧩 JSX Setup

This starter uses the `h` pragma for JSX. Configured via `.babelrc`:

```json
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", { "pragma": "h" }],
    ["@babel/plugin-transform-runtime", { "regenerator": true }]
  ]
}
```

All JSX files must include the pragma comment:

```js
/** @jsx h */
import { component, h } from 'literaljs';
```

## 📁 Project Structure

```
.
├── index.html          # Entry HTML with favicon
├── index.js           # Root app and global store
├── index.scss         # Global Catppuccin Mocha styles
├── package.json       # Dependencies
├── .babelrc           # JSX pragma config
└── components/
    └── Main/
        └── index.js   # Main component with counter demo
```

## 🎯 Example Component

```js
/** @jsx h */
import { component, h } from 'literaljs';

export default component({
  name: 'MyComponent',
  state: { count: 0 },
  methods() {
    return {
      increment() {
        this.setState({ count: this.getState().count + 1 });
      }
    };
  },
  render() {
    const { count } = this.getState();
    return (
      <div>
        <p>Count: {count}</p>
        <button events={{ click: () => this.increment() }}>+</button>
      </div>
    );
  }
});
```

## ⬆️ Upgrading LiteralJS

```bash
npm install literaljs@latest
```

See [LiteralJS Changelog](https://gitlab.com/mikeysax/LiteralJS/-/blob/master/CHANGELOG.md) for version details.

## 🔗 Links

- [LiteralJS Website](https://literaljs.com)
- [LiteralJS GitLab](https://gitlab.com/mikeysax/LiteralJS)
- [npm Package](https://www.npmjs.com/package/literaljs)
- [Catppuccin Theme](https://catppuccin.com)

## 📄 License

MIT