skyfall/skyfalldev
1
0
Fork 0
mirror of https://github.com/SkyfallWasTaken/skyfalldev.git synced 2025-02-07 22:42:49 +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 Header from "../components/Header.astro";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
import FormattedDate from "../components/FormattedDate.astro"; import FormattedDate from "../components/FormattedDate.astro";
import { Image } from "astro:assets";
type Props = CollectionEntry<"blog">["data"]; 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"> <div class="w-[1/4] flex justify-center">
{ {
heroImage && ( heroImage && (
<img <Image
width={1280} width={1280}
height={720} height={720}
src={heroImage} src={heroImage}
loading="eager"
class="article-banner my-10 aspect-ratio-[16/9] shadow-lg w-max rounded-lg" class="article-banner my-10 aspect-ratio-[16/9] shadow-lg w-max rounded-lg"
alt="" 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 { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import FormattedDate from "../../components/FormattedDate.astro"; import FormattedDate from "../../components/FormattedDate.astro";
import { Image } from "astro:assets";
const posts = (await getCollection("blog")).sort( const posts = (await getCollection("blog")).sort(
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(), (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
@ -25,13 +26,19 @@ const posts = (await getCollection("blog")).sort(
posts.map((post) => ( posts.map((post) => (
<li> <li>
<a href={`/blog/${post.slug}/`}> <a href={`/blog/${post.slug}/`}>
<img {() => {
width={720} if (post.data.heroImage) {
height={360} return (
src={post.data.heroImage} <Image
class="rounded-md mb-3" width={720}
alt="" height={360}
/> src={post.data.heroImage}
class="rounded-md mb-3"
alt=""
/>
);
}
}}
<h4 class="text-2xl font-bold">{post.data.title}</h4> <h4 class="text-2xl font-bold">{post.data.title}</h4>
<p class="text-text mb-2">{post.data.description}</p> <p class="text-text mb-2">{post.data.description}</p>
<p> <p>

24
tailwind.config.mjs
View file

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