Add Categories and Tags with new configs
This commit is contained in:
prototypa
@ -1,31 +1,15 @@
|
||||
---
|
||||
import BlogListItem from "~/components/widgets/BlogListItem.astro";
|
||||
import Pagination from "~/components/widgets/Pagination.astro";
|
||||
|
||||
const { page } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="px-4 sm:px-6 py-8 sm:py-16 lg:py-20 mx-auto max-w-3xl">
|
||||
<header>
|
||||
<h1 class="text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-8 md:mb-16">
|
||||
News and step-by-step guides about
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">AstroWind
|
||||
</span>
|
||||
</h1>
|
||||
</header>
|
||||
<ul>
|
||||
{
|
||||
page.data.map((post) => (
|
||||
<li class="mb-10 md:mb-16">
|
||||
<BlogListItem post={post} />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
{
|
||||
(page.url.prev || page.url.next) && (
|
||||
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
|
||||
)
|
||||
page.data.map((post) => (
|
||||
<li class="mb-10 md:mb-16">
|
||||
<BlogListItem post={post} />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</section>
|
||||
</ul>
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
import { getPermalink } from "~/utils/permalinks";
|
||||
import { findImage } from "~/utils/findImage";
|
||||
import { getFormattedDate } from "~/utils/getFormatedDate";
|
||||
|
||||
@ -20,7 +21,7 @@ const image = await findImage(post.image);
|
||||
<header>
|
||||
<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2">
|
||||
<a class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||
href={`/blog/${post.slug}`}>
|
||||
href={getPermalink(post.slug, "post")}>
|
||||
{post.title}
|
||||
</a>
|
||||
</h2>
|
||||
@ -31,7 +32,7 @@ const image = await findImage(post.image);
|
||||
<footer class="flex items-center mt-4">
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-slate-400">
|
||||
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time>
|
||||
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -9,10 +9,10 @@ const { post } = Astro.props;
|
||||
<article>
|
||||
<header>
|
||||
<p class="max-w-3xl mx-auto text-center">
|
||||
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min
|
||||
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
|
||||
</p>
|
||||
<h1
|
||||
class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-6 md:mb-8">
|
||||
class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8">
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
@ -25,7 +25,7 @@ const { post } = Astro.props;
|
||||
}
|
||||
</header>
|
||||
<div
|
||||
class="container mx-auto px-4 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8">
|
||||
class="container mx-auto px-8 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8">
|
||||
<Fragment set:html={post.body} />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="flex items-center h-full p-16">
|
||||
|
||||
@ -7,7 +7,7 @@ const { } = Astro.props;
|
||||
<footer>
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12 border-t border-gray-200 dark:border-slate-800">
|
||||
<div class="col-span-12 lg:col-span-3">
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="mb-2">
|
||||
<a class="inline-block font-bold text-xl" href="/">AstroWind</a>
|
||||
</div>
|
||||
@ -22,59 +22,54 @@ const { } = Astro.props;
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
|
||||
Products
|
||||
Product
|
||||
</div>
|
||||
<ul class="text-sm">
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Web Studio
|
||||
href="#">Features
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">DynamicBox Flex
|
||||
href="#">Security
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Programming Forms
|
||||
href="#">Team
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Integrations
|
||||
href="#">Enterprise
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Command-line
|
||||
href="#">Customer stories
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Resources
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
|
||||
Resources
|
||||
Platform
|
||||
</div>
|
||||
<ul class="text-sm">
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Tutorials & Guides
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Support Center
|
||||
href="#">Developer API
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
@ -82,6 +77,53 @@ const { } = Astro.props;
|
||||
href="#">Partners
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Atom
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Electron
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">GitHub Desktop
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
|
||||
Support
|
||||
</div>
|
||||
<ul class="text-sm">
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Docs
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Community Forum
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Professional Services
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Skills
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Status
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
||||
@ -91,32 +133,42 @@ const { } = Astro.props;
|
||||
<ul class="text-sm">
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Home
|
||||
href="#">About
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">About us
|
||||
href="#">Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Company values
|
||||
href="#">Careers
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Pricing
|
||||
href="#">Press
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Privacy Policy
|
||||
href="#">Inclusion
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Social Impact
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Shop
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-3 lg:col-span-3">
|
||||
<!-- <div class="col-span-12 md:col-span-3 lg:col-span-3">
|
||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
|
||||
Subscribe
|
||||
</div>
|
||||
@ -142,7 +194,7 @@ const { } = Astro.props;
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="md:flex md:items-center md:justify-between py-4 md:py-8">
|
||||
<ul class="flex mb-6 md:order-1 md:ml-4 md:mb-0">
|
||||
@ -166,10 +218,16 @@ const { } = Astro.props;
|
||||
</li>
|
||||
<li class="ml-4">
|
||||
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||
aria-label="Twitter" href="/rss.xml">
|
||||
aria-label="RSS" href="/rss.xml">
|
||||
<Icon name="tabler:rss" class="w-5 h-5" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="ml-4">
|
||||
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||
aria-label="Github" href="">
|
||||
<Icon name="tabler:brand-github" class="w-5 h-5" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
|
||||
<span
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
import { Icon } from "astro-icon";
|
||||
import Logo from "~/components/widgets/Logo.astro";
|
||||
import { getPermalink, getBlogPermalink, getHomePermalink } from "~/utils/permalinks";
|
||||
|
||||
const { } = Astro.props;
|
||||
---
|
||||
@ -9,7 +10,7 @@ const { } = Astro.props;
|
||||
class="sticky top-0 z-40 flex-none mx-auto w-full bg-white md:bg-white/90 dark:bg-slate-900 dark:md:bg-slate-900/90 md:backdrop-blur-sm border-b dark:border-b-0">
|
||||
<div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
|
||||
<div class="flex justify-between">
|
||||
<a class="flex items-center" href="/">
|
||||
<a class="flex items-center" href={getHomePermalink()}>
|
||||
<Logo />
|
||||
</a>
|
||||
<div class="flex items-center md:hidden">
|
||||
@ -36,12 +37,12 @@ const { } = Astro.props;
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#">Resources
|
||||
href={getPermalink("useful-resources-to-create-websites", "post")}>Resources
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="/blog">Blog
|
||||
href={getBlogPermalink()}>Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="md:hidden">
|
||||
@ -78,11 +79,10 @@ const { } = Astro.props;
|
||||
@apply transition;
|
||||
}
|
||||
[data-aw-toggle-menu].expanded g > path:first-child {
|
||||
@apply -rotate-45 translate-y-[14px] translate-x-[-3px];
|
||||
/* transform: rotate(-45deg) translate(-12px, 8px); */
|
||||
@apply -rotate-45 translate-y-[15px] translate-x-[-3px];
|
||||
}
|
||||
|
||||
[data-aw-toggle-menu].expanded g > path:last-child {
|
||||
@apply rotate-45 translate-y-[-9px] translate-x-[14px];
|
||||
@apply rotate-45 translate-y-[-8px] translate-x-[14px];
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,21 @@
|
||||
---
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
import { findPostsByIds } from "~/utils/fetchPosts";
|
||||
import { findImage } from "~/utils/findImage";
|
||||
import { getPermalink } from "~/utils/permalinks";
|
||||
const { } = Astro.props;
|
||||
|
||||
const ids = [
|
||||
"get-started-website-with-astro-tailwind-css",
|
||||
"how-to-customize-astrowind-to-your-brand",
|
||||
"useful-resources-to-create-websites",
|
||||
"astrowind-template-in-depth"
|
||||
]
|
||||
|
||||
const items = (await Promise.all((await findPostsByIds(ids))
|
||||
.map(async (item) =>
|
||||
({ ...item, image: await findImage(item.image) }
|
||||
))));
|
||||
---
|
||||
|
||||
<section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
|
||||
@ -18,73 +33,19 @@ const { } = Astro.props;
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6">
|
||||
<div class="mb-6 transition">
|
||||
<Picture src={import("~/assets/images/steps.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400]}
|
||||
alt="Post 2 Image" aspectRatio="16:9" />
|
||||
{items.map((post) => (
|
||||
<article class="mb-6 transition">
|
||||
<Picture src={post.image} class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400]} alt="Post 2 Image" aspectRatio="16:9" />
|
||||
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
|
||||
<a href="/blog/get-started-website-with-astro-tailwind-css"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200">Get
|
||||
started with AstroWind to create a website using Astro and
|
||||
Tailwind CSS
|
||||
<a href={getPermalink(post.slug, "type")}
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200">{post.title}
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-400">
|
||||
Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim
|
||||
qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit
|
||||
sit fugiat
|
||||
{post.excerpt || post.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 transition">
|
||||
<Picture src={import("~/assets/images/colors.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400]}
|
||||
alt="Post 1 Image" aspectRatio="16:9" />
|
||||
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
|
||||
<a href="/blog/how-to-customize-astrowind-to-your-brand"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200">How
|
||||
to customize AstroWind template to suit your branding
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-400">
|
||||
Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim
|
||||
qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit
|
||||
sit fugiat
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 transition">
|
||||
<Picture src={import("~/assets/images/tools.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400]}
|
||||
alt="Post 3 Image" aspectRatio="16:9" />
|
||||
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
|
||||
<a href="/blog/useful-resources-to-create-websites"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200">Useful
|
||||
tools and resources to create a professional website
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-400">
|
||||
Nibh senectus lacinia volutpat nostra taciti ac posuere, dictum
|
||||
ultricies dictumst luctus in vehicula, mus molestie venenatis penatibus
|
||||
ridiculus elementum. Phasellus sollicitudin dignissim parturient.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 transition">
|
||||
<Picture src={import("~/assets/images/hero.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400]}
|
||||
alt="Post 2 Image" aspectRatio="16:9" />
|
||||
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
|
||||
<a href="/blog/astrowind-template-in-depth"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200">AstroWind
|
||||
template in depth
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-400">
|
||||
Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis
|
||||
vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non
|
||||
potenti. Torquent hac sociosqu eleifend potenti.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
@ -1,30 +1,25 @@
|
||||
---
|
||||
const { prevUrl, nextUrl } = Astro.props;
|
||||
import { Icon } from "astro-icon"
|
||||
const { prevUrl, nextUrl, prevText = "Newer posts", nextText = "Older posts" } = Astro.props;
|
||||
---
|
||||
|
||||
{(prevUrl || nextUrl) && (
|
||||
<div class="container flex">
|
||||
<div class="flex flex-row mx-auto container justify-between">
|
||||
<a href={prevUrl} class={`btn font-medium text-gray-600 hover:text-gray-900 dark:hover:text-white shadow-none mr-2
|
||||
<a href={prevUrl} class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none mr-2
|
||||
${ !prevUrl ? "invisible" : "" }`}>
|
||||
<div class="flex flex-row align-middle">
|
||||
<svg class="w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<p class="ml-2">Newer posts</p>
|
||||
<Icon name="tabler:arrow-left" class="w-6 h-6" />
|
||||
<p class="ml-2">{prevText}</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href={nextUrl} class={`btn font-medium text-gray-600 hover:text-gray-900 dark:hover:text-white shadow-none ${
|
||||
<a href={nextUrl} class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none ${
|
||||
!nextUrl ? "invisible" : "" }`}>
|
||||
<div class="flex flex-row align-middle">
|
||||
<span class="mr-2">Older posts</span>
|
||||
<svg class="w-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="mr-2">{nextText}</span>
|
||||
<Icon name="tabler:arrow-right" class="w-6 h-6" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -7,7 +7,11 @@ const { } = Astro.props;
|
||||
|
||||
<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
|
||||
<div class="grid gap-6 row-gap-10 md:grid-cols-2">
|
||||
<div class="md:py-6 md:pr-16 text-gray-700 dark:text-gray-400">
|
||||
<div class="md:pb-6 md:pr-16">
|
||||
<h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading">
|
||||
Sed ac magna sit amet risus tristique interdum.
|
||||
hac.
|
||||
</h2>
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user