astrofy

Add your .md items to the /content/store/ folder. Each item requires a frontmatter block with these fields:

---
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/"
---

To add a new component, create a .astro file in the src/components/ directory. Follow the standard Astro component structure:

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

To set up the Astrofy template, install the dependencies using pnpm and then start the local development server using the dev script. This will allow you to view the website in your browser during development.

pnpm install
pnpm run dev

Blog posts are managed via Astro content collections. Add your .md files to the /content/blog/ folder. Each post must include a frontmatter block with the following format:

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

The Sidebar is composed of several components. To customize it:

1. Profile & Socials: Edit the SideBar component to change your profilePicture and social icons (which use BoxIcons). You can also change the avatar shape using DaisyUI mask classes.
2. Menu Links: To add a new page to the sidebar, add an <li> element to the SideBarMenu component:

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

3. Active State: To ensure the correct menu item is highlighted as active, set the sideBarActiveItemID prop in the BaseLayout component of your page to match the id of the link in SideBarMenu.

Global site configuration is managed in /src/config.ts. You can modify the following variables:

• SITE_TITLE: The default title for your pages.
• SITE_DESCRIPTION: The default description for your pages.
• GENERATE_SLUG_FROM_TITLE: Set to false if you want to use the Astro file base for blog slugs instead of the article name.
• TRANSITION_API: Enables or disables the transition API.

This component is used for items in the Store. It includes pricing and checkout functionality.

<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)"
/>

Cards are used for Project and Blog displays. They support a picture, title, description, and optional tags or badges.

<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']} />

The TimeLine component is used to build the CV section. Wrap your elements in a time-line-container and use TimeLineElement for each entry.

<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>