### Astrofy Installation and Deployment Commands

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Provides essential commands for installing dependencies, running the development server, building the project for production, and deploying to various platforms like Netlify, Vercel, and GitHub Pages. It covers the complete workflow from setup to deployment.

```bash
# Install dependencies
pnpm install

# Start development server (http://localhost:4321)
pnpm run dev

# Build for production
pnpm run build
# Output: dist/ folder with static HTML, CSS, JS, and assets

# Preview production build locally
pnpm run preview

# Deploy to Netlify (automatic detection)
# 1. Push to GitHub repository
# 2. Connect to Netlify
# 3. Build command: pnpm run build
# 4. Publish directory: dist
# 5. Deploy!

# Deploy to Vercel
vercel deploy --prod

# Deploy to GitHub Pages
# Update astro.config.mjs:
# site: 'https://username.github.io'
# base: '/repository-name'
# Then push dist/ to gh-pages branch

# Deploy to any static host (AWS S3, Cloudflare Pages, etc.)
# Upload contents of dist/ folder after running build command
```

--------------------------------

### Install Project Dependencies (pnpm)

Source: https://github.com/manuelernestog/astrofy/blob/main/README.md

Installs all necessary project dependencies using the pnpm package manager. This command should be run after cloning the repository.

```bash
pnpm install
```

--------------------------------

### Start Development Server (pnpm)

Source: https://github.com/manuelernestog/astrofy/blob/main/README.md

Starts the Astro development server to preview the website locally. This command allows for live reloading during development.

```bash
pnpm run dev
```

--------------------------------

### Astro Custom Page Example

Source: https://context7.com/manuelernestog/astrofy/llms.txt

An example of creating a custom page component in Astro, demonstrating the use of layouts, Astro components, and dynamic content rendering. This snippet showcases how to define a page for services with a grid of cards.

```astro
---
// src/pages/services.astro - Custom page example
import BaseLayout from "../layouts/BaseLayout.astro";
import Card from "../components/Card.astro";
---

<BaseLayout
  title="Services - Astrofy"
  sideBarActiveItemID="services"
>
  <div class="mb-5">
    <div class="text-3xl w-full font-bold">My Services</div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <Card
      title="Web Development"
      img="/web-dev.webp"
      desc="Full-stack web applications with modern frameworks"
      url="/services/web-development"
      badge="Popular"
      tags={['react', 'nodejs', 'astro']}
    />

    <Card
      title="UI/UX Design"
      img="/design.webp"
      desc="User-centered design for web and mobile applications"
      url="/services/ui-ux-design"
      tags={['figma', 'sketch', 'adobe-xd']}
    />

    <Card
      title="Consulting"
      img="/consulting.webp"
      desc="Technical consulting and architecture planning"
      url="/services/consulting"
      badge="New"
      tags={['architecture', 'performance', 'security']}
    />
  </div>
</BaseLayout>

<!-- Then add to navigation in src/components/SideBarMenu.astro: -->
<!-- <li><a class="py-3 text-base" id="services" href="/services">Services</a></li> -->
```

--------------------------------

### Astro Component: Sidebar Menu Link

Source: https://github.com/manuelernestog/astrofy/blob/main/README.md

Example of how to add a navigation link to the sidebar menu in Astro. It uses an anchor tag with specific styling and an ID for active item tracking.

```astro
<li><a class="py-3 text-base" id="home" href="/">Home</a></li>
```

--------------------------------

### Astro Blog Post Creation with Markdown and Frontmatter

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Illustrates the creation of blog posts using Markdown files with frontmatter for metadata. This includes essential fields like title, description, publication date, hero image, and tags. It also shows how to embed JavaScript code snippets and use MDX syntax within the content.

```markdown
---
title: "Getting Started with Astro"
description: "Learn how to build fast static sites with Astro framework"
pubDate: "Nov 02 2025"
heroImage: "/post_img.webp"
badge: "NEW"
tags: ["astro", "javascript", "web-development"]
updatedDate: "Nov 05 2025"
---

# Getting Started with Astro

Astro is a modern static site generator that delivers **lightning-fast** performance.

## Key Features

- Zero JavaScript by default
- Component Islands architecture
- Support for React, Vue, Svelte, and more
- Built-in optimizations

```javascript
// Example Astro component
const greeting = "Hello, Astro!";
console.log(greeting);
```

This content supports full **MDX** syntax including components!
```

--------------------------------

### Global Site Configuration in Astrofy

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Manages site-wide settings like title, description, slug generation, and view transitions. It defines constants for various configurations and can be imported and used across the project. Dependencies include Astro's built-in features for view transitions.

```typescript
// src/config.ts
export const SITE_TITLE = 'Astrofy | Personal Portfolio Website Template';
export const SITE_DESCRIPTION = 'Astrofy is a free and open-source template for your Personal Portfolio Website built with Astro and TailwindCSS. Create in minutes a website with Blog, CV, Project Section, Store and RSS Feed.';
export const GENERATE_SLUG_FROM_TITLE = true;  // true: slug from title, false: slug from filename
export const TRANSITION_API = true;             // Enable Astro View Transitions API

// Import and use in any file
import { SITE_TITLE, SITE_DESCRIPTION } from './config';

```

--------------------------------

### Astrofy Package.json Scripts

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Defines project dependencies and script commands for development, building, and previewing the Astrofy project. It includes scripts for running the development server, building for production, and accessing the Astro CLI.

```json
{
  "name": "astrofy",
  "version": "3.0.0",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/mdx": "^2.0.3",
    "@astrojs/rss": "^3.0.0",
    "@astrojs/sitemap": "^3.0.1",
    "@astrojs/tailwind": "^5.0.3",
    "astro": "^4.0.2",
    "daisyui": "^4.4.10",
    "dayjs": "^1.11.9",
    "sharp": "^0.32.6",
    "tailwindcss": "^3.3.5"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.10"
  }
}
```

--------------------------------

### Astro Individual Blog Post Rendering

Source: https://context7.com/manuelernestog/astrofy/llms.txt

This TypeScript code demonstrates dynamic route generation for individual blog posts in Astro. It fetches blog entries, creates unique slugs based on the title and entry slug, and prepares props for rendering each post. The `entry.render()` method is used to process MDX/Markdown content, which is then passed to a `PostLayout` component.

```typescript
// src/pages/blog/[slug].astro
import { CollectionEntry, getCollection } from "astro:content";
import { BlogSchema } from "../../content/config";
import PostLayout from "../../layouts/PostLayout.astro";
import createSlug from "../../lib/createSlug";

export async function getStaticPaths() {
  const postEntries = await getCollection("blog");
  return postEntries.map((entry) => ({
    params: { slug: createSlug(entry.data.title, entry.slug) },
    props: { entry },
  }));
}

interface Props {
  entry: CollectionEntry<"blog">;
}

const { entry } = Astro.props;
const post: BlogSchema = entry.data;
const { Content } = await entry.render();  // Render MDX content

// Usage in template
<PostLayout
  title={post.title}
  description={post.description}
  pubDate={post.pubDate}
  heroImage={post.heroImage}
  updatedDate={post.updatedDate}
  badge={post.badge}
  tags={post.tags}
>
  <Content />  <!-- Rendered MDX/Markdown content -->
</PostLayout>

```

--------------------------------

### Astro Project Structure Overview

Source: https://github.com/manuelernestog/astrofy/blob/main/README.md

Provides a visual representation of the Astrofy project's directory and file structure. Key directories include 'src', 'public', and configuration files.

```php
├── src/
│   ├── components/
│   │   ├── cv/
│   │   │   ├── TimeLine
│   │   ├── BaseHead.astro
│   │   ├── Card.astro
│   │   ├── Footer.astro
│   │   ├── Header.astro
│   │   └── HorizontalCard.astro
│   │   └── SideBar.astro
│   │   └── SideBarMenu.astro
│   │   └── SideBarFooter.astro
│   ├── content/
│   │   ├── blog/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   ├── store/
│   │   │   ├── item1.md
│   │   │   ├── item2.md
│   ├── layouts/
│   │   └── BaseLayout.astro
│   │   └── PostLayout.astro
│   ├── pages/
│   │   ├── blog/
│   │   │   ├── [...page].astro
│   │   │   ├── [slug].astro
│   │   └── cv.astro
│   │   └── index.astro
│   │   └── projects.astro
│   │   └── rss.xml.js
│   ├── styles/
│   │   └── global.css
│   └── config.ts
├── public/
│   ├── favicon.svg
│   └── profile.webp
│   └── social_img.webp
├── astro.config.mjs
├── tailwind.config.cjs
├── package.json
└── tsconfig.json
```

--------------------------------

### Astro Project Configuration

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Configures the Astro build process, including site URL, integrations like MDX, sitemap, and Tailwind CSS, and optional build settings. This file is written in JavaScript and uses the defineConfig function from 'astro/config'.

```javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import tailwind from "@astrojs/tailwind";

export default defineConfig({
  site: 'https://astrofy-template.netlify.app',  // Used for RSS and sitemap
  integrations: [
    mdx(),         // Enable MDX support for blog posts
    sitemap(),     // Auto-generate sitemap.xml
    tailwind()     // TailwindCSS integration
  ],
  // Optional configurations:
  // base: '/subpath',           // For deployment to subdirectory
  // trailingSlash: 'always',    // URL trailing slash behavior
  // build: {
  //   format: 'directory',      // URL format: /page/ vs /page.html
  // },
});
```

--------------------------------

### Markdown Store Item Structure

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Defines the frontmatter structure for markdown files used to represent store items. This includes product details, pricing, and links for preview and checkout. No specific programming language is required to write these files, but they are processed by Astro.

```markdown
---
title: "Premium Portfolio Template"
description: "Professional portfolio template with blog, store, and CV sections"
custom_link_label: "Live Preview"
custom_link: "https://demo.astrofy-template.netlify.app/"
updatedDate: "Nov 02 2025"
pricing: "$49"
oldPricing: "$79"
badge: "Best Seller"
checkoutUrl: "https://gumroad.com/l/astrofy-premium"
heroImage: "/itemPreview.webp"
---

## What's Included

- ✅ 10+ Pre-designed page templates
- ✅ Advanced blog system with categories
- ✅ E-commerce integration
- ✅ SEO optimized
- ✅ Dark mode support
- ✅ Lifetime updates
- ✅ Priority support

## Technical Details

Built with Astro 4.0, TailwindCSS 3.0, and DaisyUI. Fully responsive
and optimized for performance. Lighthouse score: 100/100.

## License

Single site license with unlimited projects for personal use.
Commercial license available for client work.
```

--------------------------------

### Astro Dynamic Blog Routes with Pagination

Source: https://context7.com/manuelernestog/astrofy/llms.txt

This TypeScript code defines static path generation for paginated blog listings in Astro. It fetches all blog posts from a content collection, sorts them by publication date, and uses the `paginate` function to create routes for each page of blog posts. It demonstrates how to access pagination data like current page, total pages, and previous/next page URLs.

```typescript
// src/pages/blog/[...page].astro
import BaseLayout from "../../layouts/BaseLayout.astro";
import HorizontalCard from "../../components/HorizontalCard.astro";
import { getCollection } from "astro:content";
import createSlug from "../../lib/createSlug";

export async function getStaticPaths({ paginate }) {
  // Fetch all blog posts from content collection
  const posts = await getCollection("blog");

  // Sort by publication date (newest first)
  posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

  // Generate paginated routes (10 posts per page)
  return paginate(posts, { pageSize: 10 });
}

const { page } = Astro.props;

// Generated routes:
// /blog/          -> Page 1
// /blog/2/        -> Page 2
// /blog/3/        -> Page 3
// etc.

// Access pagination data:
// page.data        -> Array of posts for current page
// page.url.prev    -> Previous page URL (or undefined)
// page.url.next    -> Next page URL (or undefined)
// page.currentPage -> Current page number
// page.total       -> Total number of pages

```

--------------------------------

### Tailwind and DaisyUI Configuration

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Sets up Tailwind CSS and DaisyUI for styling. It specifies content files, extends theme settings, and enables plugins like @tailwindcss/typography and DaisyUI. DaisyUI theme options are also configured here.

```javascript
// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      // Add custom colors, fonts, or spacing here
      // colors: {
      //   'brand': '#FF6B6B',
      // }
    },
  },
  plugins: [
    require("@tailwindcss/typography"),  // Prose classes for markdown
    require("daisyui")                    // DaisyUI component library
  ],
  daisyui: {
    themes: true,        // Enable all 30+ themes
    darkTheme: "dark",   // Default dark theme
    logs: false,         // Disable build logs

    // Or specify only certain themes:
    // themes: ["light", "dark", "cupcake", "cyberpunk", "dracula"],
  }
};

// Apply theme in BaseLayout.astro:
// <html lang="en" data-theme="lofi">  // Change "lofi" to any theme name
```

--------------------------------

### Astro Base Layout Component Usage

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Demonstrates how to use the BaseLayout component in Astro for creating consistent page structures. It shows basic and advanced usage scenarios, including customization of titles, descriptions, images, sidebar activity, and social media meta tags. The component also supports disabling the sidebar.

```astro
---
// src/layouts/BaseLayout.astro - Usage example
import BaseLayout from "../layouts/BaseLayout.astro";
---

<!-- Basic usage with defaults -->
<BaseLayout>
  <h1>Welcome to my site</h1>
  <p>Page content goes here</p>
</BaseLayout>

<!-- Advanced usage with all options -->
<BaseLayout
  title="Custom Page Title"
  description="Custom meta description for SEO"
  image="/custom-social-image.webp"
  sideBarActiveItemID="blog"
  ogType="article"
  includeSidebar={true}
>
  <div class="prose">
    <h1>Blog Post Title</h1>
    <p>Article content...</p>
  </div>
</BaseLayout>

<!-- Page without sidebar -->
<BaseLayout includeSidebar={false}>
  <div>Full-width content</div>
</BaseLayout>
```

--------------------------------

### Timeline Component Usage in Astro

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Demonstrates how to use the TimeLineElement component within an Astro page to display educational and work experience chronologically. It requires the BaseLayout and TimeLineElement components.

```astro
---
// src/pages/cv.astro - Timeline usage example
import BaseLayout from "../layouts/BaseLayout.astro";
import TimeLineElement from "../components/cv/TimeLine.astro";
---

<BaseLayout title="Resume / CV" sideBarActiveItemID="cv">
  <div class="mb-5">
    <div class="text-3xl w-full font-bold">Education</div>
  </div>

  <div class="time-line-container mb-10">
    <TimeLineElement
      title="Master of Computer Science"
      subtitle="2020 to 2022 | Stanford University, CA"
    >
      Specialized in Machine Learning and Distributed Systems.
      GPA: 3.9/4.0. Thesis on scalable neural network architectures.
    </TimeLineElement>

    <TimeLineElement
      title="Bachelor of Software Engineering"
      subtitle="2016 to 2020 | MIT, Cambridge, MA"
    >
      <div>Focus on web technologies and software architecture.</div>
      <ul class="list-disc ml-6">
        <li>Dean's List all semesters</li>
        <li>President of Computer Science Club</li>
        <li>Published 2 research papers</li>
      </ul>
    </TimeLineElement>
  </div>

  <div class="mb-5">
    <div class="text-3xl w-full font-bold">Experience</div>
  </div>

  <div class="time-line-container">
    <TimeLineElement
      title="Senior Full-Stack Developer"
      subtitle="From 2022 to Present | Tech Company Inc."
    >
      Leading development of microservices architecture serving 1M+ users.
      Technologies: React, Node.js, PostgreSQL, AWS, Docker, Kubernetes.
    </TimeLineElement>

    <TimeLineElement
      title="Software Engineer Intern"
      subtitle="Summer 2021 | Google, Mountain View"
    >
      Worked on search infrastructure optimization, improving query
      performance by 25%. Collaborated with team of 8 engineers.
    </TimeLineElement>
  </div>
</BaseLayout>
```

--------------------------------

### Astro Blog Post Frontmatter Format

Source: https://github.com/manuelernestog/astrofy/blob/main/README.md

Frontmatter format for blog posts in Astro. This YAML-like frontmatter defines metadata for each blog post, including title, description, publication date, and an optional hero image.

```yaml
---
title: "Post Title"
description: "Description"
pubDate: "Post date format(Sep 10 2022)"
heroImage: "Post Hero Image URL"
---
```

--------------------------------

### Astro Shop Item Frontmatter Format

Source: https://github.com/manuelernestog/astrofy/blob/main/README.md

Frontmatter format for shop items in Astro. This JavaScript-style frontmatter defines metadata for each shop item, including title, description, image, pricing, and custom link options.

```js
---
title: "Demo Item 1"
description: "Item description"
heroImage: "Item img url"
details: true // show or hide details btn
custom_link_label: "Custom btn link label"
custom_link: "Custom btn link"
pubDate: "Sep 15 2022"
pricing: "$15"
oldPricing: "$25.5"
badge: "Featured"
checkoutUrl: "https://checkouturl.com/"
---

```

--------------------------------

### Filter Blog Posts by Tag with Pagination (Astro)

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Dynamically generates routes to filter blog posts by tags and supports pagination. It extracts unique tags, filters posts accordingly, sorts them by publication date, and paginates the results. Accessible via dynamic routes like /blog/tag/[tag]/[...page].

```typescript
// src/pages/blog/tag/[tag]/[...page].astro
import { getCollection } from "astro:content";

export async function getStaticPaths({ paginate }) {
  const all_posts = await getCollection("blog");

  // Extract all unique tags from all posts
  const all_tags = all_posts.flatMap((post) => post.data.tags || []);
  const unique_tags = [...new Set(all_tags)];

  // Generate paginated routes for each tag
  return unique_tags.flatMap((tag) => {
    const filtered_posts = all_posts.filter((post) =>
      post.data.tags?.includes(tag)
    );

    filtered_posts.sort((a, b) =>
      b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
    );

    return paginate(filtered_posts, {
      params: { tag },
      pageSize: 10,
    });
  });
}

// Generated routes:
// /blog/tag/astro/          -> Page 1 of posts tagged "astro"
// /blog/tag/astro/2/        -> Page 2 of posts tagged "astro"
// /blog/tag/javascript/     -> Page 1 of posts tagged "javascript"
// etc.

const { page } = Astro.props;
const { tag } = Astro.params;  // Access the tag from route params

```

--------------------------------

### Astro Component: Horizontal Card for Projects/Blog

Source: https://github.com/manuelernestog/astrofy/blob/main/README.md

Demonstrates the use of the HorizontalCard component for displaying project or blog post summaries. It accepts properties for title, image, description, URL, optional target, badge, and tags.

```html
<HorizontalCard title="Card Title" img="imge_url" desc="Description" url="Link
URL" target="Optional link target (_blank default)" badge="Optional badge"
tags={['Array','of','tags']} />
```

--------------------------------

### Astro Component: Horizontal Shop Item

Source: https://github.com/manuelernestog/astrofy/blob/main/README.md

Shows how to use the HorizontalShopItem component for displaying products in a store. It includes props for title, image, description, pricing, checkout URL, badge, and custom link options.

```html
<HorizontalShopItem
  title="Item Title"
  img="imge_url"
  desc="Item description"
  pricing="current_price"
  oldPricing="old_price"
  checkoutUrl="external store checkout url"
  badge="Optional badge"
  url="item details url"
  custom_link="Custom link url"
  custom_link_label="Cutom link btn label"
  target="Optional link target (_self default)"
/>
```

--------------------------------

### Generate RSS Feed for Blog Content (Astro)

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Automatically creates an RSS feed for blog content, including essential metadata and item formatting. It fetches all blog posts and formats them into an XML structure suitable for RSS readers. Accessible at /rss.xml.

```javascript
// src/pages/rss.xml.js
import rss from "@astrojs/rss";
import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
import { getCollection } from "astro:content";

export async function get(context) {
  const blog = await getCollection("blog");

  return rss({
    title: SITE_TITLE,
    description: SITE_DESCRIPTION,
    site: import.meta.env.SITE,  // From astro.config.mjs
    items: blog.map((post) => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      description: post.data.description,
      link: `/blog/${post.slug}/`,
    })),
    customData: `<language>en-us</language>`,
  });
}

// Accessible at: https://yoursite.com/rss.xml
// Feed includes all blog posts with title, description, pubDate, and link

```

--------------------------------

### Content Collections Schema Validation with Zod

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Defines type-safe schemas for blog posts and store items using Zod for validation. It ensures data integrity and provides automatic TypeScript type inference for content management. This is crucial for maintaining consistency across the content. Dependencies include 'astro:content' and 'zod'.

```typescript
// src/content/config.ts
import { z, defineCollection } from "astro:content";

const blogSchema = z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.string().optional(),
    heroImage: z.string().optional(),
    badge: z.string().optional(),
    tags: z.array(z.string()).refine(items => new Set(items).size === items.length, {
        message: 'tags must be unique',
    }).optional(),
});

const storeSchema = z.object({
    title: z.string(),
    description: z.string(),
    custom_link_label: z.string(),
    custom_link: z.string().optional(),
    updatedDate: z.coerce.date(),
    pricing: z.string().optional(),
    oldPricing: z.string().optional(),
    badge: z.string().optional(),
    checkoutUrl: z.string().optional(),
    heroImage: z.string().optional(),
});

export type BlogSchema = z.infer<typeof blogSchema>;
export type StoreSchema = z.infer<typeof storeSchema>;

const blogCollection = defineCollection({ schema: blogSchema });
const storeCollection = defineCollection({ schema: storeSchema });

export const collections = {
    'blog': blogCollection,
    'store': storeCollection
};

```

--------------------------------

### Create Slug Utility Function for URL Safety

Source: https://context7.com/manuelernestog/astrofy/llms.txt

Generates URL-safe slugs from titles, automatically sanitizing them and offering configurable behavior based on site settings. It handles trimming whitespace, lowercasing, replacing spaces with hyphens, and removing special characters. The function can be used to create slugs for content like blog posts or store items. Dependencies include './config'.

```typescript
// src/lib/createSlug.ts
import { GENERATE_SLUG_FROM_TITLE } from '../config';

export default function createSlug(title: string, staticSlug: string): string {
  return (
    !GENERATE_SLUG_FROM_TITLE ? staticSlug : title
      .trim()                      // Remove leading & trailing whitespace
      .toLowerCase()               // Convert to lowercase
      .replace(/\s+/g, '-')        // Replace spaces with hyphens
      .replace(/[^\w-]/g, '')      // Remove special characters
      .replace(/^-+|-+$/g, '')     // Remove leading & trailing separators
  );
}

// Usage example
import createSlug from './lib/createSlug';

const slug1 = createSlug("Hello World!", "hello-world");
// Returns: "hello-world" (generated from title if GENERATE_SLUG_FROM_TITLE is true)

const slug2 = createSlug("My Blog Post: A Journey!", "my-blog-post");
// Returns: "my-blog-post-a-journey" (sanitized and formatted)

```

--------------------------------

### Store Item Card Component for E-commerce (Astro)

Source: https://context7.com/manuelernestog/astrofy/llms.txt

A specialized Astro component for e-commerce store items, designed to display product details, pricing, and facilitate checkout. It includes features for current and old pricing, checkout URLs, badges, custom links, and target attributes, enabling flexible product presentation.

```astro
---
// Store item with all features
import HorizontalShopItem from "../components/HorizontalShopItem.astro";
---

<HorizontalShopItem
  title="Premium Astro Theme"
  img="/itemPreview.webp"
  desc="Professional portfolio theme with advanced features and lifetime updates"
  pricing="$49"
  oldPricing="$79"
  checkoutUrl="https://gumroad.com/l/product-id"
  badge="BEST SELLER"
  url="/store/premium-astro-theme"
  custom_link="https://demo.example.com"
  custom_link_label="View Live Demo"
  target="_self"
/>

<!-- Store item with discount -->
<HorizontalShopItem
  title="Starter Template Pack"
  img="/template-pack.webp"
  desc="Collection of 5 ready-to-use templates"
  pricing="$29"
  oldPricing="$49"
  checkoutUrl="https://checkout.stripe.com/pay/xyz"
  badge="SALE"
  url="/store/starter-pack"
/>

```

--------------------------------

### Astro Custom Component Template

Source: https://github.com/manuelernestog/astrofy/blob/main/README.md

Template for creating custom Astro components. It includes a script section for JavaScript logic and a template section for HTML and JS expressions. The script section is defined within --- fences and uses JavaScript.

```html
---
// Component Script (JavaScript)
---
<!-- Component Template (HTML + JS Expressions) -->
```

--------------------------------

### Reusable Horizontal Card Component (Astro)

Source: https://context7.com/manuelernestog/astrofy/llms.txt

A versatile Astro component for displaying various content types like blog posts, projects, or general items. It supports displaying an image, title, description, URL, target attribute, a badge, and tags. This component is designed for reusability across different sections of a website.

```astro
---
// src/components/HorizontalCard.astro - Usage examples
import HorizontalCard from "../components/HorizontalCard.astro";
---

<!-- Blog post card -->
<HorizontalCard
  title="Understanding Astro Components"
  img="/post_img.webp"
  desc="A comprehensive guide to building reusable components in Astro"
  url="/blog/understanding-astro-components"
  target="_self"
  badge="FEATURED"
  tags={['astro', 'components', 'web-development']}
/>

<!-- Project card with external link -->
<HorizontalCard
  title="E-commerce Platform"
  img="/project-screenshot.webp"
  desc="Full-stack e-commerce solution built with modern technologies"
  url="https://github.com/username/project"
  target="_blank"
  badge="NEW"
  tags={['react', 'nodejs', 'mongodb']}
/>

<!-- Simple card without image or tags -->
<HorizontalCard
  title="Minimal Example"
  desc="Card with just title and description"
  url="/projects/minimal"
  target="_self"
/>

```

--------------------------------

### Astro Component: Timeline Element

Source: https://github.com/manuelernestog/astrofy/blob/main/README.md

Illustrates the usage of the TimeLineElement component for displaying timeline entries, typically used for CV sections. It accepts 'title' and 'subtitle' props and can contain arbitrary HTML content.

```html
<div class="time-line-container">
  <TimeLineElement title="Element Title" subtitle="Subtitle">
    Content that can contain
    <div>divs</div>
    and <span>anything else you want</span>.
  </TimeLineElement>
  ...
</div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.