a/andyscott-dot-me
1
0
Fork 0
mirror of https://codeberg.org/andyscott-pages/andyscott-dot-me.git synced 2024-12-21 17:23:10 -05:00
Code Issues Projects Releases Packages Wiki Activity

imrpoving ui SEO and adding pages for store details

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/itemPreview.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
public/squared_item.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8 KiB

32
src/components/HorizontalShopItem.astro
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%]">
@ -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 href={url} class="btn btn-outline grow md:grow-0">Details </a>
<a class="btn btn-primary grow md:grow-0" href={checkoutUrl} target="_blank">Buy</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>

61
src/layouts/StoreItemLayout.astro Normal file
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>

2
src/pages/index.astro
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="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>

3
src/pages/store/[page].astro
View file

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

11
src/pages/store/item1.md
View file

@ -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/"
heroImage: "/squared_item.png"
checkoutUrl: "https://checkouturl.com/"
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.

9
src/pages/store/item2.md
View file

@ -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/"
heroImage: "/squared_item.png"
checkoutUrl: "https://checkouturl.com/"
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.