skyfall/skyfalldev
1
0
Fork 0
mirror of https://github.com/SkyfallWasTaken/skyfalldev.git synced 2024-09-19 23:57:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Formatting, use Image tag

Browse source
This commit is contained in:
SkyfallWasTaken 2024-07-07 21:38:45 +01:00
parent a446fdfc3f
commit 067bd91412
3 changed files with 29 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/layouts/BlogPost.astro
View file

@ -4,6 +4,7 @@ import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import FormattedDate from "../components/FormattedDate.astro";
import { Image } from "astro:assets";
type Props = CollectionEntry<"blog">["data"];
@ -38,10 +39,11 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
<div class="w-[1/4] flex justify-center">
{
heroImage && (
<img
<Image
width={1280}
height={720}
src={heroImage}
loading="eager"
class="article-banner my-10 aspect-ratio-[16/9] shadow-lg w-max rounded-lg"
alt=""
/>

21
src/pages/blog/index.astro
View file

@ -5,6 +5,7 @@ import Footer from "../../components/Footer.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
import { getCollection } from "astro:content";
import FormattedDate from "../../components/FormattedDate.astro";
import { Image } from "astro:assets";
const posts = (await getCollection("blog")).sort(
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
@ -25,13 +26,19 @@ const posts = (await getCollection("blog")).sort(
posts.map((post) => (
<li>
<a href={`/blog/${post.slug}/`}>
<img
width={720}
height={360}
src={post.data.heroImage}
class="rounded-md mb-3"
alt=""
/>
{() => {
if (post.data.heroImage) {
return (
<Image
width={720}
height={360}
src={post.data.heroImage}
class="rounded-md mb-3"
alt=""
/>
);
}
}}
<h4 class="text-2xl font-bold">{post.data.title}</h4>
<p class="text-text mb-2">{post.data.description}</p>
<p>

24
tailwind.config.mjs
View file

@ -6,22 +6,22 @@ export default {
typography: ({ theme }) => ({
DEFAULT: {
css: {
'--tw-prose-body': theme('colors.pink[800]'),
'--tw-prose-headings': theme('colors.text'),
'--tw-prose-links': theme('colors.text'),
'--tw-prose-hr': theme('colors.pink[300]'),
'--tw-prose-quotes': theme('colors.text'),
'--tw-prose-kbd': theme("colors.text"),
"--tw-prose-body": theme("colors.pink[800]"),
"--tw-prose-headings": theme("colors.text"),
"--tw-prose-links": theme("colors.text"),
"--tw-prose-hr": theme("colors.pink[300]"),
"--tw-prose-quotes": theme("colors.text"),
"--tw-prose-kbd": theme("colors.text"),
'--tw-prose-quote-borders': theme('colors.pink[300]'),
'--tw-prose-captions': theme('colors.pink[700]'),
'--tw-prose-code': theme('colors.text'),
'--tw-prose-pre-code': theme('colors.text'),
'--tw-prose-pre-bg': theme('colors.pink[900]'),
"--tw-prose-quote-borders": theme("colors.pink[300]"),
"--tw-prose-captions": theme("colors.pink[700]"),
"--tw-prose-code": theme("colors.text"),
"--tw-prose-pre-code": theme("colors.text"),
"--tw-prose-pre-bg": theme("colors.pink[900]"),
},
},
}),
}
},
},
plugins: [
require("@catppuccin/tailwindcss")({