imrpoving ui SEO and adding pages for store details

src/components/HorizontalShopItem.astro

@@ -1,5 +1,18 @@
 ---
-const { title, img, desc, url, badge, tags, target = "_blank", pricing, oldPricing, checkoutUrl } = Astro.props;
+const {
+  title,
+  img,
+  desc,
+  url,
+  badge,
+  target = "_blank",
+  pricing,
+  oldPricing,
+  checkoutUrl,
+  details = true,
+  custom_link = false,
+  custom_link_label = "",
+} = Astro.props;
 ---
 
 <div class="rounded-lg bg-base-100 hover:shadow-xl transition ease-in-out hover:scale-[102%]">
@@ -16,8 +29,21 @@ const { title, img, desc, url, badge, tags, target = "_blank", pricing, oldPrici
       </div>
       <p class="py-1 text-1xl">{desc}</p>
       <div class="card-actions md:justify-end mt-3 md:mt-0 flex">
-        <a class="btn btn-primary grow md:grow-0" href={checkoutUrl}>Buy Now</a>
+        <a class="btn btn-primary grow md:grow-0" href={checkoutUrl} target="_blank">Buy</a>
-        <a href={url} class="btn btn-outline grow md:grow-0">Details </a>
+        {
+          custom_link && (
+            <a href={custom_link} target="_blank" class="btn btn-outline grow md:grow-0">
+              {custom_link_label}
+            </a>
+          )
+        }
+        {
+          details && (
+            <a href={url} class="btn btn-outline grow md:grow-0">
+              Details
+            </a>
+          )
+        }
       </div>
     </div>
   </div>

src/layouts/StoreItemLayout.astro

@@ -0,0 +1,61 @@
+---
+import BaseHead from "../components/BaseHead.astro";
+import BaseLayout from "./BaseLayout.astro";
+
+const {
+  content: {
+    title,
+    description,
+    pubDate,
+    updatedDate,
+    heroImage,
+    pricing,
+    oldPricing,
+    checkoutUrl,
+    badge,
+    custom_link,
+    custom_link_label,
+  },
+} = Astro.props;
+---
+
+<BaseLayout title={title} description={description} image={heroImage}>
+  <main class="md:flex md:justify-center">
+    <article class="prose prose-lg max-w-[750px] prose-img:mx-auto">
+      {heroImage && <img src={heroImage} alt={title} class="w-full mb-6" />}
+      <div class="">
+        <h1 class="title my-2 text-4xl font-bold">
+          {title}
+          {badge && <div class="badge badge-secondary mx-2">{badge}</div>}
+        </h1>
+        <div class="flex place-content-between items-center">
+          <div class="grow md:grow-0">
+            <span class="text-xl mr-1"> {pricing}</span>
+            <span class="text-md opacity-50 line-through">{oldPricing}</span>
+          </div>
+          <div>
+            {
+              custom_link && (
+                <a class="btn btn-outline grow md:grow-0 ml-4" href={custom_link} target="_blank">
+                  {custom_link_label}
+                </a>
+              )
+            }
+            <a class="btn btn-primary grow md:grow-0 ml-4" href={checkoutUrl} target="_blank">Buy Now</a>
+          </div>
+        
+        </div>
+      </div>
+      {
+        updatedDate && (
+          <div>
+            {" "}
+            Last updated on <time>{updatedDate}</time>{" "}
+          </div>
+        )
+      }
+      <div class="divider my-2"></div>
+      <slot />
+    </article>
+  </main>
+</BaseLayout>

src/pages/index.astro

@@ -17,7 +17,7 @@ const last_posts = posts.slice(0, 3);
       <div class="text-3xl py-3 font-bold">Software Engineer and Entrepreneur</div>
       <div class="py-2">
         <text class="text-lg">
-          I made this template for everyone who needs to create a personal website easily and quickly. This template includes Project Section, CV Section, Paginated Blog, RSS Feed, SEO Friendly, Responsive Desing and 29 Visual themes. I hope you find it useful!
+          I made this template for everyone who needs to create a personal website easily and quickly. This template includes Project Section, CV Section, Store, Paginated Blog, RSS Feed, SEO Friendly, Responsive Desing and 29 Visual themes. I hope you find it useful!
           </text
         >
       </div>

src/pages/store/[page].astro

@@ -24,8 +24,11 @@ const { page } = Astro.props;
         oldPricing={post.frontmatter.oldPricing}
         checkoutUrl={post.frontmatter.checkoutUrl}
         badge={post.frontmatter.badge}
+        details={post.frontmatter.details}
         tags={post.frontmatter.tags}
         url={post.url}
+        custom_link={post.frontmatter.custom_link}
+        custom_link_label={post.frontmatter.custom_link_label}
 		target="_self"
       />
 	  <div class="divider my-0"></div>

src/pages/store/item1.md

@@ -1,13 +1,16 @@
 ---
-layout: "../../layouts/PostLayout.astro"
+layout: "../../layouts/StoreItemLayout.astro"
 title: "Demo Item 1"
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-pubDate: "Sep 10 2022"
+details: true
+custom_link_label: "Live Preview"
+custom_link: "https://demourl.com/"
+pubDate: "Sep 15 2022"
 pricing: "$15"
 badge: "Featured"
 tags: ['Tag1','Tag2']
-checkoutUrl: "https://github.com/"
+checkoutUrl: "https://checkouturl.com/"
-heroImage: "/squared_item.png"
+heroImage: "/itemPreview.png"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

src/pages/store/item2.md

@@ -1,12 +1,15 @@
 ---
-layout: "../../layouts/PostLayout.astro"
+layout: "../../layouts/StoreItemLayout.astro"
 title: "Demo Item 2"
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+details: false
+custom_link_label: "Custom Btn"
+custom_link: "https://customurl.com/"
 pubDate: "Sep 11 2022"
 pricing: "$10"
 oldPricing: "$25.5"
-checkoutUrl: "https://github.com/"
+checkoutUrl: "https://checkouturl.com/"
-heroImage: "/squared_item.png"
+heroImage: "/itemPreview.png"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.