From f2a36aa12cd33b4fb6562267f70963f4b2a7513c Mon Sep 17 00:00:00 2001 From: SkyfallWasTaken Date: Sun, 14 Jul 2024 12:08:21 +0100 Subject: [PATCH] Add hero images to src folder, sort posts by latest --- {public => src/assets}/blog-placeholder-1.jpg | Bin {public => src/assets}/blog-placeholder-2.jpg | Bin {public => src/assets}/blog-placeholder-3.jpg | Bin {public => src/assets}/blog-placeholder-4.jpg | Bin {public => src/assets}/blog-placeholder-5.jpg | Bin .../assets}/blog-placeholder-about.jpg | Bin src/content/blog/first-post.md | 2 +- src/content/blog/markdown-style-guide.md | 2 +- src/content/blog/second-post.md | 2 +- src/content/blog/third-post.md | 2 +- src/content/blog/using-mdx.mdx | 2 +- src/layouts/BlogPost.astro | 22 +++++++++++++----- src/pages/about.astro | 2 +- src/pages/blog/index.astro | 2 +- 14 files changed, 23 insertions(+), 13 deletions(-) rename {public => src/assets}/blog-placeholder-1.jpg (100%) rename {public => src/assets}/blog-placeholder-2.jpg (100%) rename {public => src/assets}/blog-placeholder-3.jpg (100%) rename {public => src/assets}/blog-placeholder-4.jpg (100%) rename {public => src/assets}/blog-placeholder-5.jpg (100%) rename {public => src/assets}/blog-placeholder-about.jpg (100%) diff --git a/public/blog-placeholder-1.jpg b/src/assets/blog-placeholder-1.jpg similarity index 100% rename from public/blog-placeholder-1.jpg rename to src/assets/blog-placeholder-1.jpg diff --git a/public/blog-placeholder-2.jpg b/src/assets/blog-placeholder-2.jpg similarity index 100% rename from public/blog-placeholder-2.jpg rename to src/assets/blog-placeholder-2.jpg diff --git a/public/blog-placeholder-3.jpg b/src/assets/blog-placeholder-3.jpg similarity index 100% rename from public/blog-placeholder-3.jpg rename to src/assets/blog-placeholder-3.jpg diff --git a/public/blog-placeholder-4.jpg b/src/assets/blog-placeholder-4.jpg similarity index 100% rename from public/blog-placeholder-4.jpg rename to src/assets/blog-placeholder-4.jpg diff --git a/public/blog-placeholder-5.jpg b/src/assets/blog-placeholder-5.jpg similarity index 100% rename from public/blog-placeholder-5.jpg rename to src/assets/blog-placeholder-5.jpg diff --git a/public/blog-placeholder-about.jpg b/src/assets/blog-placeholder-about.jpg similarity index 100% rename from public/blog-placeholder-about.jpg rename to src/assets/blog-placeholder-about.jpg diff --git a/src/content/blog/first-post.md b/src/content/blog/first-post.md index 7848b7f..44deff2 100644 --- a/src/content/blog/first-post.md +++ b/src/content/blog/first-post.md @@ -2,7 +2,7 @@ title: "First post" description: "Lorem ipsum dolor sit amet" pubDate: "Jul 08 2022" -heroImage: "/blog-placeholder-3.jpg" +heroImage: "/src/assets/blog-placeholder-3.jpg" --- 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. diff --git a/src/content/blog/markdown-style-guide.md b/src/content/blog/markdown-style-guide.md index 7645494..ed3fd0c 100644 --- a/src/content/blog/markdown-style-guide.md +++ b/src/content/blog/markdown-style-guide.md @@ -2,7 +2,7 @@ title: "Markdown Style Guide" description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro." pubDate: "Jul 01 2022" -heroImage: "/blog-placeholder-1.jpg" +heroImage: "/src/assets/blog-placeholder-1.jpg" --- Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro. diff --git a/src/content/blog/second-post.md b/src/content/blog/second-post.md index a907080..9e24551 100644 --- a/src/content/blog/second-post.md +++ b/src/content/blog/second-post.md @@ -2,7 +2,7 @@ title: "Second post" description: "Lorem ipsum dolor sit amet" pubDate: "Jul 15 2022" -heroImage: "/blog-placeholder-4.jpg" +heroImage: "/src/assets/blog-placeholder-4.jpg" --- 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. diff --git a/src/content/blog/third-post.md b/src/content/blog/third-post.md index 21326aa..d447fa4 100644 --- a/src/content/blog/third-post.md +++ b/src/content/blog/third-post.md @@ -2,7 +2,7 @@ title: "Third post" description: "Lorem ipsum dolor sit amet" pubDate: "Jul 22 2022" -heroImage: "/blog-placeholder-2.jpg" +heroImage: "/src/assets/blog-placeholder-2.jpg" --- 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. diff --git a/src/content/blog/using-mdx.mdx b/src/content/blog/using-mdx.mdx index 122fcfb..a75976e 100644 --- a/src/content/blog/using-mdx.mdx +++ b/src/content/blog/using-mdx.mdx @@ -2,7 +2,7 @@ title: "Using MDX" description: "Lorem ipsum dolor sit amet" pubDate: "Jul 02 2022" -heroImage: "/blog-placeholder-5.jpg" +heroImage: "/src/assets/blog-placeholder-5.jpg" --- This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file. diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index b040af3..6dc07c8 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -1,14 +1,28 @@ --- import type { CollectionEntry } from "astro:content"; +import type { ImageMetadata } from "astro"; +import { Image } from "astro:assets"; + 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"]; const { title, description, pubDate, updatedDate, heroImage } = Astro.props; + +let heroImagePromise; +if (heroImage) { + const images = import.meta.glob<{ default: ImageMetadata }>( + "/src/assets/*.{jpeg,jpg,png,gif}", + ); + if (!images[heroImage]) + throw new Error( + `"${heroImage}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`, + ); + heroImagePromise = images[heroImage]; +} --- @@ -39,11 +53,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
{ heroImage && ( - + ) }
diff --git a/src/pages/about.astro b/src/pages/about.astro index af84633..544d145 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -6,7 +6,7 @@ import Layout from "../layouts/BlogPost.astro"; title="About Me" description="Lorem ipsum dolor sit amet" pubDate={new Date("August 08 2021")} - heroImage="/blog-placeholder-about.jpg" + heroImage="/src/assets/blog-placeholder-about.jpg" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 64b5728..69e778a 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -8,7 +8,7 @@ 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(), + (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(), ); const IMAGE_EAGER_COUNT = 8;