Update blog files and details

This commit is contained in:
prototypa
2022-08-19 03:43:12 -04:00
parent ff7d3f5555
commit 4f9e31ef39
15 changed files with 202 additions and 160 deletions

View File

@ -7,3 +7,11 @@
@apply inline-flex items-center justify-center rounded border border-transparent font-medium text-center text-base leading-snug transition py-3 px-6 shadow-lg ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2; @apply inline-flex items-center justify-center rounded border border-transparent font-medium text-center text-base leading-snug transition py-3 px-6 shadow-lg ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2;
} }
} }
.menu-opened .line1 {
transform: rotate(-45deg) translate(-12px, 8px);
}
.menu-opened .line2 {
transform: rotate(45deg) translate(4px, -16px);
}

View File

@ -3,23 +3,40 @@ const {} = Astro.props;
--- ---
<script is:inline> <script is:inline>
function toggleDarkMode() {
document.documentElement.classList.toggle("dark");
localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
}
window.toggleDarkMode = toggleDarkMode;
if ( if (
localStorage.theme === "dark" || localStorage.theme === "dark" ||
(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) (!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) { ) {
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
} else { } else {
document.documentElement.classList.remove("dark"); document.documentElement.classList.remove("dark");
} }
function toggleMenu() { function attachEvent(selector, event, fn) {
document.getElementById("menu").classList.toggle("hidden"); const elem = document.querySelector(selector);
if (elem) {
elem.addEventListener(
event,
function () {
fn(elem);
},
false
);
} }
window.toggleMenu = toggleMenu; }
window.onload = function () {
attachEvent("[data-aw-toggle-menu]", "click", function (elem) {
elem.classList.toggle("menu-opened");
document.getElementById("menu").classList.toggle("hidden");
});
attachEvent("[data-aw-toggle-color-scheme]", "click", function (elem) {
document.documentElement.classList.toggle("dark");
localStorage.theme = document.documentElement.classList.contains("dark")
? "dark"
: "light";
});
};
</script> </script>

View File

@ -6,7 +6,7 @@ const {
alt, alt,
sizes, sizes,
widths, widths,
aspectRatio, aspectRatio = 1,
formats = ["avif", "webp"], formats = ["avif", "webp"],
loading = "lazy", loading = "lazy",
decoding = "async", decoding = "async",
@ -14,22 +14,32 @@ const {
...attrs ...attrs
} = Astro.props; } = Astro.props;
const { image, sources = [] } = // const { image, sources = [] } =
!src ? { image: {}} // !src ? { image: {}}
: (typeof src === "string" // : (typeof src === "string"
? { image: { src } } // ? { image: { src } }
: // :
await getPicture({
let picture = null;
try {
picture = await getPicture({
src, src,
widths, widths,
formats, formats,
aspectRatio, aspectRatio,
})) })
}
catch (e) {
console.log(e);
}
const { image = {}, sources = [] } = picture || {}
--- ---
{ (src || !image) && { (src && image?.src) &&
<picture {...attrs}> <picture {...attrs}>
{sources.map((attrs) => <source {...attrs} {sizes} />)} {sources.map((attrs) =>
<source {...attrs} {sizes} />)}
<img {...image} {loading} {decoding} {alt} class={className} /> <img {...image} {loading} {decoding} {alt} class={className} />
</picture> </picture>
} }

View File

@ -15,6 +15,6 @@ const { class: className = "w-5 h-5" } = Astro.props;
stroke-linejoin="round" stroke-linejoin="round"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="4" y1="8" x2="20" y2="8"></line> <line class="line1 transition" x1="4" y1="8" x2="20" y2="8"></line>
<line x1="4" y1="16" x2="20" y2="16"></line> <line class="line2 transition" x1="4" y1="16" x2="20" y2="16"></line>
</svg> </svg>

View File

@ -50,7 +50,7 @@ const {} = Astro.props;
<div> <div>
<p class="mb-4 text-xl font-bold"> <p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" /> <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
Is the Space Pope reptilian!? What's something that you completely don't understand?
</p> </p>
<p class="text-gray-700 dark:text-gray-400 mb-2"> <p class="text-gray-700 dark:text-gray-400 mb-2">
A flower in my garden, a mystery in my panties. Heart attack never A flower in my garden, a mystery in my panties. Heart attack never
@ -63,7 +63,7 @@ const {} = Astro.props;
<div> <div>
<p class="mb-4 text-xl font-bold"> <p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" /> <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
How much money you got on you? What's an example of when you changed your mind?
</p> </p>
<p class="text-gray-700 dark:text-gray-400 mb-2"> <p class="text-gray-700 dark:text-gray-400 mb-2">
Michael Knight a young loner on a crusade to champion the cause of Michael Knight a young loner on a crusade to champion the cause of
@ -75,7 +75,7 @@ const {} = Astro.props;
<div> <div>
<p class="mb-4 text-xl font-bold"> <p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" /> <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
Galaxies Orion's sword globular star cluster? What is something that you would really like to try again?
</p> </p>
<p class="text-gray-700 dark:text-gray-400 mb-2"> <p class="text-gray-700 dark:text-gray-400 mb-2">
A business big enough that it could be listed on the NASDAQ goes A business big enough that it could be listed on the NASDAQ goes
@ -89,7 +89,8 @@ const {} = Astro.props;
<div> <div>
<p class="mb-4 text-xl font-bold"> <p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" /> <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
When has justice ever been as simple as a rule book? If you could only ask one question to each person you meet, what would
that question be?
</p> </p>
<p class="text-gray-700 dark:text-gray-400 mb-2"> <p class="text-gray-700 dark:text-gray-400 mb-2">
This is not about revenge. This is about justice. A lot of things This is not about revenge. This is about justice. A lot of things

View File

@ -0,0 +1,37 @@
---
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"
style="
"
>
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>
{
(page.url.prev || page.url.next) && (
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
)
}
</section>

View File

@ -1,15 +1,10 @@
--- ---
import Picture from "~/components/core/Picture.astro"; import Picture from "~/components/core/Picture.astro";
import { findImage } from "~/utils/findImage";
const { post } = Astro.props; const { post } = Astro.props;
const images = import.meta.glob("../../assets/images/*"); const image = await findImage(post.image);
const imageSrc =
typeof images[post.image] === "function"
? (await images[post.image]())["default"]
: typeof post.image === "string"
? post.image
: null;
--- ---
<article <article
@ -20,18 +15,18 @@ const imageSrc =
class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg" class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
> >
<Picture <Picture
src={imageSrc} src={image}
class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg" class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg"
widths={[400, 768]} widths={[400, 768]}
sizes="(max-width: 767px) 400px, 768px" sizes="(max-width: 767px) 400px, 768px"
alt={post.description} alt={post.description}
aspectRatio="1" aspectRatio={1}
/> />
</div> </div>
</a> </a>
<div> <div>
<header> <header>
<h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2"> <h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2">
<a <a
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200" class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
href={`/blog/${post.slug}`} href={`/blog/${post.slug}`}

View File

@ -0,0 +1,42 @@
---
import Picture from "~/components/core/Picture.astro";
const { post } = Astro.props;
---
<section class="py-8 sm:py-16 lg:py-20 mx-auto">
<article>
<header>
<p class="max-w-3xl mx-auto text-center">
<time datetime={post.pubDate}>
{
new Date(post.pubDate).toLocaleDateString("en-us", {
year: "numeric",
month: "short",
day: "numeric",
})
}
</time> ~ {Math.ceil(post.readingTime)} min
</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"
>
{post.title}
</h1>
<Picture
src={post.image}
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
widths={[400, 768, 900]}
sizes="(max-width: 767px) 400px, (max-width: 900px) 768px, 900px"
alt={post.description}
aspectRatio="16:9"
/>
</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"
>
<Fragment set:html={post.body} />
</div>
</article>
</section>

View File

@ -4,7 +4,7 @@ const {} = Astro.props;
--- ---
<header <header
class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-sm border-b dark:border-b-0" class="sticky top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-sm border-b dark:border-b-0"
> >
<div <div
class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4" class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4"
@ -21,14 +21,14 @@ const {} = Astro.props;
type="button" type="button"
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Toggle between Dark and Light mode" aria-label="Toggle between Dark and Light mode"
onclick="window.toggleDarkMode()" data-aw-toggle-color-scheme
> >
<IconSun class="w-6 h-6" /> <IconSun class="w-6 h-6" />
</button> </button>
<button <button
class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center" class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition"
aria-label="Toggle Menu" aria-label="Toggle Menu"
onclick="toggleMenu()" data-aw-toggle-menu
> >
<IconMenu class="w-6 h-6" /> <IconMenu class="w-6 h-6" />
</button> </button>
@ -98,9 +98,6 @@ const {} = Astro.props;
> >
<IconGithub /> <IconGithub />
</a> </a>
<!-- <a class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-center ml-3 btn-sm" href="/login/">Get started
</a> -->
</div> </div>
</div> </div>
</nav> </nav>

View File

@ -30,16 +30,18 @@ const {} = Astro.props;
alt="Post 2 Image" alt="Post 2 Image"
aspectRatio="16:9" aspectRatio="16:9"
/> />
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl"> <h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
<a <a
href="/blog/get-started-with-astrowind" 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" class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
>Get started with AstroWind >Get started with AstroWind to create a website using Astro and
Tailwind CSS
</a> </a>
</h3> </h3>
<p class="text-gray-700 dark:text-gray-400"> <p class="text-gray-700 dark:text-gray-400">
I'll be sure to note that in my log. Smooth as an android's bottom, eh, Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim
Data? When has justice ever been as simple as a rule book? qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit
sit fugiat
</p> </p>
</div> </div>
@ -52,16 +54,17 @@ const {} = Astro.props;
alt="Post 1 Image" alt="Post 1 Image"
aspectRatio="16:9" aspectRatio="16:9"
/> />
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl"> <h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
<a <a
href="/blog/how-to-customize-the-template" href="/blog/how-to-customize-astrowind-to-your-branding"
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200" class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
>How to customize the template >How to customize AstroWind template to suit your branding
</a> </a>
</h3> </h3>
<p class="text-gray-700 dark:text-gray-400"> <p class="text-gray-700 dark:text-gray-400">
O for awesome, this chocka full cuzzie is as rip-off as a cracker. Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim
Meanwhile, in behind the bicycle shed, Hercules Morse. qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit
sit fugiat
</p> </p>
</div> </div>
@ -74,16 +77,17 @@ const {} = Astro.props;
alt="Post 3 Image" alt="Post 3 Image"
aspectRatio="16:9" aspectRatio="16:9"
/> />
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl"> <h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
<a <a
href="/blog/helpful-tools-and-resources-to-design" 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" class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
>Helpful tools and resources to design >Useful tools and resources to create a professional website
</a> </a>
</h3> </h3>
<p class="text-gray-700 dark:text-gray-400"> <p class="text-gray-700 dark:text-gray-400">
Yolo ipsum dolor sit amet, consectetur adipiscing elit. Ut ac suscipit Nibh senectus lacinia volutpat nostra taciti ac posuere, dictum
leo. Carpe diem vulputate est nec commodo rutrum. ultricies dictumst luctus in vehicula, mus molestie venenatis penatibus
ridiculus elementum. Phasellus sollicitudin dignissim parturient.
</p> </p>
</div> </div>
@ -96,7 +100,7 @@ const {} = Astro.props;
alt="Post 2 Image" alt="Post 2 Image"
aspectRatio="16:9" aspectRatio="16:9"
/> />
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl"> <h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
<a <a
href="/blog/astrowind-template-in-depth" href="/blog/astrowind-template-in-depth"
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200" class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
@ -104,8 +108,9 @@ const {} = Astro.props;
</a> </a>
</h3> </h3>
<p class="text-gray-700 dark:text-gray-400"> <p class="text-gray-700 dark:text-gray-400">
I'll be sure to note that in my log. Smooth as an android's bottom, eh, Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis
Data? When has justice ever been as simple as a rule book? vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non
potenti. Torquent hac sociosqu eleifend potenti.
</p> </p>
</div> </div>
</div> </div>

View File

@ -10,7 +10,7 @@ const {} = Astro.props;
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<div> <div>
<div <div
class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2" class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -50,7 +50,7 @@ const {} = Astro.props;
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<div> <div>
<div <div
class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2" class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -89,7 +89,7 @@ const {} = Astro.props;
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<div> <div>
<div <div
class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2" class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -128,7 +128,7 @@ const {} = Astro.props;
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<div> <div>
<div <div
class="flex items-center justify-center w-10 h-10 border rounded-full border-blue-600 border-2" class="flex items-center justify-center w-10 h-10 rounded-full border-blue-600 border-2"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

View File

@ -2,12 +2,12 @@
import Layout from "~/layouts/PageLayout.astro"; import Layout from "~/layouts/PageLayout.astro";
import { SITE } from "~/config.mjs"; import { SITE } from "~/config.mjs";
import { getAllPosts } from "~/utils/getAllPosts"; import { getPosts } from "~/utils/getPosts";
import BlogPostCard from "~/components/widgets/BlogPostCard.astro";
import Pagination from "~/components/widgets/Pagination.astro"; import BlogList from "~/components/widgets/BlogList.astro";
export async function getStaticPaths({ paginate }) { export async function getStaticPaths({ paginate }) {
const posts = await getAllPosts(); const posts = await getPosts();
return paginate(posts, { return paginate(posts, {
pageSize: SITE.postsPerPage, pageSize: SITE.postsPerPage,
@ -26,36 +26,7 @@ const canonical = new URL(page.url.current, Astro.site);
--- ---
<Layout meta={{ title, description, canonical }}> <Layout meta={{ title, description, canonical }}>
<main class="mt-20"> <main>
<section class="px-4 sm:px-6 py-8 sm:py-16 lg:py-20 mx-auto max-w-3xl"> <BlogList page={page} />
<header>
<h1
class="text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-8 md:mb-16"
style="
"
>
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">
<BlogPostCard post={post} />
</li>
))
}
</ul>
{
(page.url.prev || page.url.next) && (
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
)
}
</section>
</main> </main>
</Layout> </Layout>

View File

@ -1,12 +1,13 @@
--- ---
import Layout from "~/layouts/PageLayout.astro";
import Picture from "~/components/core/Picture.astro";
import { SITE } from "~/config.mjs"; import { SITE } from "~/config.mjs";
import { getAllPosts } from "~/utils/getAllPosts"; import { getPosts } from "~/utils/getPosts";
import { findImage } from "~/utils/findImage";
import Layout from "~/layouts/PageLayout.astro";
import BlogPost from "~/components/widgets/BlogPost.astro";
export async function getStaticPaths() { export async function getStaticPaths() {
const posts = await getAllPosts(); const posts = await getPosts();
return posts.map((post) => ({ return posts.map((post) => ({
params: { slug: post.slug }, params: { slug: post.slug },
@ -20,14 +21,7 @@ const title = `${post.title} — ${SITE.name}`;
const description = post.description; const description = post.description;
const canonical = new URL(`blog/${post.slug}`, Astro.site); const canonical = new URL(`blog/${post.slug}`, Astro.site);
const images = import.meta.glob("../../assets/images/*"); const image = await findImage(post.image);
const imageSrc =
typeof images[post.image] === "function"
? (await images[post.image]())["default"]
: typeof post.image === "string"
? post.image
: null;
--- ---
<Layout <Layout
@ -35,45 +29,10 @@ const imageSrc =
title, title,
description, description,
canonical, canonical,
image: imageSrc, image,
}} }}
> >
<main class="mt-20"> <main>
<section class="py-8 sm:py-16 lg:py-20 mx-auto"> <BlogPost post={{ ...post, image }} />
<article>
<header>
<p class="max-w-3xl mx-auto text-center">
<time datetime={post.pubDate}>
{
new Date(post.pubDate).toLocaleDateString("en-us", {
year: "numeric",
month: "short",
day: "numeric",
})
}
</time> ~ {Math.ceil(post.readingTime)} min
</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"
>
{post.title}
</h1>
<Picture
src={imageSrc}
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
widths={[400, 768, 900]}
sizes="(max-width: 767px) 400px, (max-width: 900px) 768px, 900px"
alt={post.description}
aspectRatio="16:9"
/>
</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"
>
<Fragment set:html={post.body} />
</div>
</article>
</section>
</main> </main>
</Layout> </Layout>

View File

@ -10,7 +10,7 @@ import StepsFeatures from "~/components/widgets/StepsFeatures.astro";
import BasicFAQs from "~/components/widgets/BasicFAQs.astro"; import BasicFAQs from "~/components/widgets/BasicFAQs.astro";
import TwoColsFeatures from "~/components/widgets/TwoColsFeatures.astro"; import TwoColsFeatures from "~/components/widgets/TwoColsFeatures.astro";
import StepsLeft from "~/components/widgets/StepsLeft.astro"; import StepsLeft from "~/components/widgets/StepsLeft.astro";
import BlogFeaturesPosts from "~/components/widgets/BlogFeaturesPosts.astro"; import HighlightedPosts from "~/components/widgets/HighlightedPosts.astro";
import Stats from "~/components/widgets/Stats.astro"; import Stats from "~/components/widgets/Stats.astro";
const title = `${SITE.name} — Your website with Astro + Tailwind CSS`; const title = `${SITE.name} — Your website with Astro + Tailwind CSS`;
@ -20,13 +20,13 @@ const canonical = new URL("", Astro.site);
--- ---
<Layout meta={{ title, description, canonical }}> <Layout meta={{ title, description, canonical }}>
<main class="mt-20"> <main>
<Hero /> <Hero />
<BasicFeatures /> <BasicFeatures />
<StepsLeft /> <StepsLeft />
<TwoColsFeatures /> <TwoColsFeatures />
<StepsFeatures /> <StepsFeatures />
<BlogFeaturesPosts /> <HighlightedPosts />
<BasicFAQs /> <BasicFAQs />
<Stats /> <Stats />
<BasicCTA /> <BasicCTA />

View File

@ -1,9 +1,9 @@
import rss from "@astrojs/rss"; import rss from "@astrojs/rss";
import { SITE } from "~/config"; import { SITE } from "~/config";
import { getAllPosts } from "~/utils/getAllPosts"; import { getPosts } from "~/utils/getPosts";
const posts = await getAllPosts(); const posts = await getPosts();
export const get = () => export const get = () =>
rss({ rss({