markopress 0.0.2 → 0.0.4

package/templates/example-tags/README.md

@@ -1,212 +0,0 @@
-# Marko Tags Example Components
-
-This directory contains example Marko components demonstrating best practices for the Marko Tags in Markdown feature.
-
-## Available Components
-
-### Alert Boxes
-
-**File:** `alert-box.marko`
-
-A styled alert component with 6 variants: note, tip, warning, danger, info, caution
-
-**Usage:**
-```markdown
-<alert-box kind="warning">
-  This is a **warning** alert with `code` support!
-</alert-box>
-```
-
-**Features:**
-- Emoji icons for each variant
-- Left icon bar
-- Gradient overlay
-- Proper markdown content rendering
-- Responsive styling
-
-### Buttons
-
-**Files:** `button-primary.marko`, `button-secondary.marko`, `button.marko`
-
-Styled button components with icon support.
-
-**Usage:**
-```markdown
-<button-primary href="/docs" icon="📚">
-  Documentation
-</button-primary>
-
-<button-secondary href="/blog">
-  Blog
-</button-secondary>
-```
-
-**Features:**
-- Primary and secondary styles
-- Optional icon attribute (emoji)
-- Dynamic href binding
-- Proper body content rendering
-
-### Cards
-
-**Files:** `card.marko`, `card-header.marko`, `card-body.marko`, `card-footer.marko`
-
-Card components with named slots for flexible content layout.
-
-**Usage:**
-```markdown
-<card>
-  <card-header>
-    <h3>Card Title</h3>
-  </card-header>
-  <card-body>
-    - List item 1
-    - List item 2
-  </card-body>
-  <card-footer>
-    <button-primary href="/learn">Learn More</button-primary>
-  </card-footer>
-</card>
-```
-
-**Features:**
-- Named slots (header, body, footer)
-- Nested component support
-- Flexible content layout
-
-### Icons
-
-**File:** `icon.marko`
-
-SVG icon component with customizable size and color.
-
-**Usage:**
-```markdown
-<icon name="check" size="24" color="success" />
-<icon name="warning" size="32" color="warning" />
-```
-
-**Available Icons:**
-- **Actions:** check, x-circle, plus, minus
-- **Navigation:** arrow-right, arrow-left, arrow-up, arrow-down
-- **Status:** info, warning, danger, success, error
-- **Social:** star, heart, bookmark
-- **And more...** (18+ icons included)
-
-**Features:**
-- 18+ built-in SVG icons
-- Customizable size
-- Color variants (success, warning, danger, info, default)
-- Self-closing syntax
-
-## Component Patterns
-
-These examples demonstrate key Marko Tags patterns:
-
-### 1. Body Content Rendering
-```marko
-<div class="my-component">
-  <${input.content}/>  <!-- Renders markdown content -->
-</div>
-```
-
-### 2. Dynamic Classes (Array Syntax)
-```marko
-<div class=["base-class", input.variant && "base-" + input.variant]>
-```
-
-### 3. Conditional Attributes
-```marko
-<div class=["alert", input.kind && "alert-" + input.kind, !input.kind && "alert-note"]>
-```
-
-### 4. Named Slots
-```marko
-<!-- Parent component -->
-<div class="card">
-  <${input@header}/>  <!-- Renders header slot -->
-  <${input@body/>     <!-- Renders body slot -->
-  <${input@footer}/>  <!-- Renders footer slot -->
-</div>
-```
-
-### 5. Self-Closing Components
-```marko
-<icon name="check" size="24" />
-```
-
-### 6. Inline Styles
-```marko
-<style>
-  .my-component {
-    padding: 1rem;
-    border-radius: 8px;
-  }
-</style>
-```
-
-## Best Practices
-
-1. **Use kebab-case tag names:** `<my-component>`, not `<MyComponent>`
-2. **Avoid reserved HTML attributes:** Use `kind` instead of `type`, `uid` instead of `id`
-3. **Use array syntax for dynamic classes:** `class=["base", modifier]`
-4. **Use `<${input.content}/>` for body content:** Not `<input.text/>`
-5. **Use unquoted attributes for dynamic values:** `href=input.link`, not `href="input.link"`
-6. **Include inline styles:** Components should be self-contained with styling
-
-## Copying to Your Project
-
-To use these components in your project:
-
-1. **Create a `tags/` directory** in your project root
-2. **Copy components** from this directory to `tags/`
-3. **Enable Marko Tags** in your config:
-
-```typescript
-// markopress.config.ts
-export default defineConfig({
-  markdown: {
-    markoTags: {
-      enabled: true,
-      tagsDir: 'tags/',
-    },
-  },
-});
-```
-
-4. **Use in Markdown:**
-
-```markdown
-<alert-box kind="tip">
-  Check out the **documentation** for more info!
-</alert-box>
-```
-
-## Customization
-
-These are examples - feel free to:
-
-- Modify styles to match your design system
-- Add new variants (e.g., `<alert-box kind="custom">`)
-- Create new components based on these patterns
-- Extend icon component with more SVG icons
-
-## Technical Notes
-
-- **Marko Version:** v6 syntax
-- **Markdown Support:** Full markdown rendering inside components
-- **CSS:** Inline styles per component (scoped)
-- **Build-time Validation:** Missing components trigger build errors
-- **Performance:** Components compiled at build time
-
-## See Also
-
-- [Marko Tags Guide](../../../docs/guides/marko-tags.md) - Feature overview
-- [Component API Reference](../../../docs/guides/marko-components.md) - Detailed API docs
-- [Marko.js v6 Syntax](../../../docs/guides/marko-v6-syntax.md) - Syntax reference
-- [Lessons Learned](../../../docs/development/marko-tags-lessons.md) - Common mistakes to avoid
-
----
-
-**Last Updated:** 2025-01-17
-**Status:** ✅ Production Ready

package/templates/example-tags/alert-box.marko

@@ -1,98 +0,0 @@
-<!-- Alert Box Component -->
-<!-- Types: note, tip, warning, danger, info, caution -->
-<!-- Example: <alert-box kind="warning">This is important!</alert-box> -->
-
-<div class=["alert", input.kind && "alert-" + input.kind, !input.kind && "alert-note"]>
-  <div class="alert-content">
-    <${input.content}/>
-  </div>
-</div>
-
-<style>
-  .alert {
-    --alert-icon-size: 1.5rem;
-  }
-
-  .alert-content {
-    position: relative;
-    z-index: 1;
-  }
-
-  /* Ensure markdown content renders properly */
-  .alert-content p:first-child {
-    margin-top: 0;
-  }
-
-  .alert-content p:last-child {
-    margin-bottom: 0;
-  }
-
-  .alert-content ul,
-  .alert-content ol {
-    margin: 0.5rem 0;
-    padding-left: 1.5rem;
-  }
-
-  .alert-content li {
-    margin-bottom: 0.25rem;
-  }
-
-  .alert-content li:last-child {
-    margin-bottom: 0;
-  }
-
-  .alert-content code {
-    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-    font-weight: 600;
-  }
-
-  /* Add icon bar on the left */
-  .alert::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 4px;
-    background: currentColor;
-    opacity: 0.3;
-    border-radius: 0.5rem 0 0 0.5rem;
-  }
-
-  /* Enhance emoji icon */
-  .alert::after {
-    font-size: var(--alert-icon-size);
-    line-height: 1;
-  }
-
-  .alert-note::after {
-    content: "💡";
-  }
-
-  .alert-tip::after {
-    content: "✨";
-  }
-
-  .alert-warning::after {
-    content: "⚠️";
-  }
-
-  .alert-danger::after {
-    content: "🚫";
-  }
-
-  .alert-info::after {
-    content: "ℹ️";
-  }
-
-  .alert-caution::after {
-    content: "⚡";
-  }
-
-  /* Add subtle pattern overlay */
-  .alert {
-    background-image:
-      radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
-      radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
-  }
-</style>

package/templates/example-tags/button-primary.marko

@@ -1,28 +0,0 @@
-<!-- Primary Button Component -->
-<!-- Creates a prominent call-to-action button -->
-<!-- Example: <button-primary href="/docs" icon="arrow">Get Started</button-primary> -->
-
-<a href=input.href||"#" class=["btn", "btn-primary", input.disabled && "btn-disabled"] aria-disabled=input.disabled>
-  <if=input.icon>
-    <span class="btn-icon">${input.icon}</span>
-  </if>
-  <${input.content}/>
-  <if=input.arrow>
-    <span class="btn-arrow">→</span>
-  </if>
-</a>
-
-<style>
-  .btn-icon {
-    font-size: 1.125em;
-  }
-
-  .btn-arrow {
-    margin-left: 0.5rem;
-    transition: transform 0.2s;
-  }
-
-  a:hover .btn-arrow {
-    transform: translateX(4px);
-  }
-</style>

package/templates/example-tags/button-secondary.marko

@@ -1,28 +0,0 @@
-<!-- Secondary Button Component -->
-<!-- Creates a subtle secondary action button -->
-<!-- Example: <button-secondary href="/about">Learn More</button-secondary> -->
-
-<a href=input.href||"#" class=["btn", "btn-secondary", input.disabled && "btn-disabled"] aria-disabled=input.disabled>
-  <if=input.icon>
-    <span class="btn-icon">${input.icon}</span>
-  </if>
-  <${input.content}/>
-  <if=input.arrow>
-    <span class="btn-arrow">→</span>
-  </if>
-</a>
-
-<style>
-  .btn-icon {
-    font-size: 1.125em;
-  }
-
-  .btn-arrow {
-    margin-left: 0.5rem;
-    transition: transform 0.2s;
-  }
-
-  a:hover .btn-arrow {
-    transform: translateX(4px);
-  }
-</style>

package/templates/example-tags/button.marko

@@ -1,6 +0,0 @@
-<!-- Button component -->
-<!-- Supports: href, style, disabled attributes -->
-
-<a href=input.href class=["btn", "btn-" + (input.style || 'primary'), input.disabled && "btn-disabled"] aria-disabled=input.disabled>
-  <input.text/>
-</a>

package/templates/example-tags/card-body.marko

@@ -1,8 +0,0 @@
-<!-- Card Body Component -->
-<!-- Creates the main content area of a card -->
-<!-- Supports full markdown formatting -->
-<!-- Example: <card-body>This is **bold** and *italic* text.</card-body> -->
-
-<div class="card-body">
-  <input/>
-</div>

package/templates/example-tags/card-footer.marko

@@ -1,7 +0,0 @@
-<!-- Card Footer Component -->
-<!-- Creates a styled card footer section -->
-<!-- Example: <card-footer>Additional info</card-footer> -->
-
-<div class="card-footer">
-  <input/>
-</div>

package/templates/example-tags/card-header.marko

@@ -1,7 +0,0 @@
-<!-- Card Header Component -->
-<!-- Creates a styled card header section -->
-<!-- Example: <card-header><h3>Card Title</h3></card-header> -->
-
-<div class="card-header">
-  <input/>
-</div>

package/templates/example-tags/card.marko

@@ -1,20 +0,0 @@
-<!-- Card component -->
-<!-- Supports header, body, footer content slots -->
-
-<div class="card">
-  <if=input.header>
-    <div class="card-header">
-      <input.header/>
-    </div>
-  </if>
-  <if=input.body>
-    <div class="card-body">
-      <input.body/>
-    </div>
-  </if>
-  <if=input.footer>
-    <div class="card-footer">
-      <input.footer/>
-    </div>
-  </if>
-</div>

package/templates/example-tags/icon.marko

@@ -1,149 +0,0 @@
-<!-- Icon Component -->
-<!-- Displays SVG icons with customizable size and color -->
-<!-- Supported icons: user, settings, check, home, menu, close, search, arrow, star, heart -->
-<!-- Example: <icon name="check" size="24" color="success" /> -->
-<!-- Example: <icon name="arrow" size="20" spin /> -->
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width=(input.size || 20)
-  height=(input.size || 20)
-  class=["icon", input.spin && "icon-spin"]
-  fill=input.fill || "none"
-  stroke=input.color === "primary" ? "var(--accent-primary)" :
-        input.color === "success" ? "var(--c-success)" :
-        input.color === "warning" ? "var(--c-warning)" :
-        input.color === "danger" ? "var(--c-danger)" :
-        input.color === "light" ? "var(--c-gray-300)" :
-        "currentColor"
-  stroke-width=input.strokeWidth || 2
-  stroke-linecap="round"
-  stroke-linejoin="round">
-
-  <if=input.name === 'user'>
-    <!-- User/Person Icon -->
-    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-    <circle cx="12" cy="7" r="4"></circle>
-  </if>
-
-  <if=input.name === 'settings'>
-    <!-- Settings/Gear Icon -->
-    <circle cx="12" cy="12" r="3"></circle>
-    <path d="M12 1v6m0 6v6m9-9h-6m-6 0H3m15.364 6.364l-4.243 4.243M9.879 9.879L5.636 5.636m12.728 12.728l-4.243 4.243M9.879 14.121l-4.243 4.243"></path>
-  </if>
-
-  <if=input.name === 'check'>
-    <!-- Check/Tick Icon -->
-    <polyline points="20 6 9 17 4 12"></polyline>
-  </if>
-
-  <if=input.name === 'check-circle'>
-    <!-- Check in Circle Icon -->
-    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-    <polyline points="22 4 12 14.01 9 11.01"></polyline>
-  </if>
-
-  <if=input.name === 'home'>
-    <!-- Home Icon -->
-    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-    <polyline points="9 22 9 12 15 12 15 22"></polyline>
-  </if>
-
-  <if=input.name === 'menu'>
-    <!-- Menu/Hamburger Icon -->
-    <line x1="3" y1="12" x2="21" y2="12"></line>
-    <line x1="3" y1="6" x2="21" y2="6"></line>
-    <line x1="3" y1="18" x2="21" y2="18"></line>
-  </if>
-
-  <if=input.name === 'close'>
-    <!-- Close/X Icon -->
-    <line x1="18" y1="6" x2="6" y2="18"></line>
-    <line x1="6" y1="6" x2="18" y2="18"></line>
-  </if>
-
-  <if=input.name === 'search'>
-    <!-- Search/Magnifying Glass Icon -->
-    <circle cx="11" cy="11" r="8"></circle>
-    <path d="m21 21-4.35-4.35"></path>
-  </if>
-
-  <if=input.name === 'arrow'>
-    <!-- Arrow Right Icon -->
-    <line x1="5" y1="12" x2="19" y2="12"></line>
-    <polyline points="12 5 19 12 12 19"></polyline>
-  </if>
-
-  <if=input.name === 'arrow-left'>
-    <!-- Arrow Left Icon -->
-    <line x1="19" y1="12" x2="5" y2="12"></line>
-    <polyline points="12 19 5 12 12 5"></polyline>
-  </if>
-
-  <if=input.name === 'star'>
-    <!-- Star Icon -->
-    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
-  </if>
-
-  <if=input.name === 'heart'>
-    <!-- Heart Icon -->
-    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
-  </if>
-
-  <if=input.name === 'info'>
-    <!-- Info Icon -->
-    <circle cx="12" cy="12" r="10"></circle>
-    <line x1="12" y1="16" x2="12" y2="12"></line>
-    <line x1="12" y1="8" x2="12.01" y2="8"></line>
-  </if>
-
-  <if=input.name === 'warning'>
-    <!-- Warning/Alert Icon -->
-    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
-    <line x1="12" y1="9" x2="12" y2="13"></line>
-    <line x1="12" y1="17" x2="12.01" y2="17"></line>
-  </if>
-
-  <if=input.name === 'download'>
-    <!-- Download Icon -->
-    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-    <polyline points="7 10 12 15 17 10"></polyline>
-    <line x1="12" y1="15" x2="12" y2="3"></line>
-  </if>
-
-  <if=input.name === 'upload'>
-    <!-- Upload Icon -->
-    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-    <polyline points="17 8 12 3 7 8"></polyline>
-    <line x1="12" y1="3" x2="12" y2="15"></line>
-  </if>
-
-  <if=input.name === 'external-link'>
-    <!-- External Link Icon -->
-    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
-    <polyline points="15 3 21 3 21 9"></polyline>
-    <line x1="10" y1="14" x2="21" y2="3"></line>
-  </if>
-
-  <else>
-    <!-- Default Circle Icon for unknown names -->
-    <circle cx="12" cy="12" r="10"></circle>
-    <line x1="12" y1="8" x2="12" y2="12"></line>
-    <line x1="12" y1="16" x2="12.01" y2="16"></line>
-  </else>
-</svg>
-
-<style>
-  .icon-spin {
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>