imrpoving ui SEO and adding pages for store details

This commit is contained in:
Manuel Ernesto Garcia 2022-10-23 16:51:06 -04:00
parent 5b5cb6da49
commit 7ded9bfa57
8 changed files with 107 additions and 11 deletions

BIN
public/itemPreview.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8 KiB

View file

@ -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%]"> <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> </div>
<p class="py-1 text-1xl">{desc}</p> <p class="py-1 text-1xl">{desc}</p>
<div class="card-actions md:justify-end mt-3 md:mt-0 flex"> <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> </div>
</div> </div>

View file

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

View file

@ -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="text-3xl py-3 font-bold">Software Engineer and Entrepreneur</div>
<div class="py-2"> <div class="py-2">
<text class="text-lg"> <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 </text
> >
</div> </div>

View file

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

View file

@ -1,13 +1,16 @@
--- ---
layout: "../../layouts/PostLayout.astro" layout: "../../layouts/StoreItemLayout.astro"
title: "Demo Item 1" title: "Demo Item 1"
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." 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" pricing: "$15"
badge: "Featured" badge: "Featured"
tags: ['Tag1','Tag2'] 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. 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.

View file

@ -1,12 +1,15 @@
--- ---
layout: "../../layouts/PostLayout.astro" layout: "../../layouts/StoreItemLayout.astro"
title: "Demo Item 2" title: "Demo Item 2"
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." 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" pubDate: "Sep 11 2022"
pricing: "$10" pricing: "$10"
oldPricing: "$25.5" 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. 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.