diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs
index 3b2f75c84..40e75a89e 100644
--- a/examples/blog/astro.config.mjs
+++ b/examples/blog/astro.config.mjs
@@ -7,4 +7,4 @@ import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://example.com',
integrations: [mdx(), sitemap()],
-});
+});
\ No newline at end of file
diff --git a/examples/blog/public/blog-placeholder-1.jpg b/examples/blog/public/blog-placeholder-1.jpg
new file mode 100644
index 000000000..b4c20543e
Binary files /dev/null and b/examples/blog/public/blog-placeholder-1.jpg differ
diff --git a/examples/blog/public/blog-placeholder-2.jpg b/examples/blog/public/blog-placeholder-2.jpg
new file mode 100644
index 000000000..a819b59c2
Binary files /dev/null and b/examples/blog/public/blog-placeholder-2.jpg differ
diff --git a/examples/blog/public/blog-placeholder-3.jpg b/examples/blog/public/blog-placeholder-3.jpg
new file mode 100644
index 000000000..067802c0f
Binary files /dev/null and b/examples/blog/public/blog-placeholder-3.jpg differ
diff --git a/examples/blog/public/blog-placeholder-4.jpg b/examples/blog/public/blog-placeholder-4.jpg
new file mode 100644
index 000000000..947e7eaab
Binary files /dev/null and b/examples/blog/public/blog-placeholder-4.jpg differ
diff --git a/examples/blog/public/blog-placeholder-5.jpg b/examples/blog/public/blog-placeholder-5.jpg
new file mode 100644
index 000000000..1a59ad9b6
Binary files /dev/null and b/examples/blog/public/blog-placeholder-5.jpg differ
diff --git a/examples/blog/public/blog-placeholder-about.jpg b/examples/blog/public/blog-placeholder-about.jpg
new file mode 100644
index 000000000..7b4aafbec
Binary files /dev/null and b/examples/blog/public/blog-placeholder-about.jpg differ
diff --git a/examples/blog/public/fonts/atkinson-bold.woff b/examples/blog/public/fonts/atkinson-bold.woff
new file mode 100644
index 000000000..e7f8977ec
Binary files /dev/null and b/examples/blog/public/fonts/atkinson-bold.woff differ
diff --git a/examples/blog/public/fonts/atkinson-regular.woff b/examples/blog/public/fonts/atkinson-regular.woff
new file mode 100644
index 000000000..bbe09c584
Binary files /dev/null and b/examples/blog/public/fonts/atkinson-regular.woff differ
diff --git a/examples/blog/public/placeholder-hero.jpg b/examples/blog/public/placeholder-hero.jpg
deleted file mode 100644
index 66c86497e..000000000
Binary files a/examples/blog/public/placeholder-hero.jpg and /dev/null differ
diff --git a/examples/blog/public/placeholder-social.jpg b/examples/blog/public/placeholder-social.jpg
deleted file mode 100644
index e8844fed3..000000000
Binary files a/examples/blog/public/placeholder-social.jpg and /dev/null differ
diff --git a/examples/blog/src/components/BaseHead.astro b/examples/blog/src/components/BaseHead.astro
index e11d11149..344124012 100644
--- a/examples/blog/src/components/BaseHead.astro
+++ b/examples/blog/src/components/BaseHead.astro
@@ -11,7 +11,7 @@ interface Props {
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
+const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
---
@@ -20,6 +20,10 @@ const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
+
+
+
+
diff --git a/examples/blog/src/components/Footer.astro b/examples/blog/src/components/Footer.astro
index 08395a4d1..8c5e2f871 100644
--- a/examples/blog/src/components/Footer.astro
+++ b/examples/blog/src/components/Footer.astro
@@ -3,11 +3,37 @@ const today = new Date();
---
diff --git a/examples/blog/src/components/Header.astro b/examples/blog/src/components/Header.astro
index 4d3da1fcf..d559509ae 100644
--- a/examples/blog/src/components/Header.astro
+++ b/examples/blog/src/components/Header.astro
@@ -4,22 +4,65 @@ import { SITE_TITLE } from '../consts';
---
-
- {SITE_TITLE}
-
diff --git a/examples/blog/src/consts.ts b/examples/blog/src/consts.ts
index 1d5dbf632..b42411da8 100644
--- a/examples/blog/src/consts.ts
+++ b/examples/blog/src/consts.ts
@@ -1,5 +1,5 @@
// Place any global data in this file.
// You can import this data from anywhere in your site by using the `import` keyword.
-export const SITE_TITLE = 'My personal website.';
-export const SITE_DESCRIPTION = 'Welcome to my website!';
+export const SITE_TITLE = 'Astro Blog';
+export const SITE_DESCRIPTION = 'Welcome to my website!';
\ No newline at end of file
diff --git a/examples/blog/src/content/blog/first-post.md b/examples/blog/src/content/blog/first-post.md
index eb5e250f8..3066715be 100644
--- a/examples/blog/src/content/blog/first-post.md
+++ b/examples/blog/src/content/blog/first-post.md
@@ -2,7 +2,7 @@
title: 'First post'
description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jul 08 2022'
-heroImage: '/placeholder-hero.jpg'
+heroImage: '/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/examples/blog/src/content/blog/markdown-style-guide.md b/examples/blog/src/content/blog/markdown-style-guide.md
index bb7bb2daa..e7cede3d3 100644
--- a/examples/blog/src/content/blog/markdown-style-guide.md
+++ b/examples/blog/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: '/placeholder-hero.jpg'
+heroImage: '/blog-placeholder-1.jpg'
---
Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.
@@ -31,7 +31,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
## Images
-
+
## Blockquotes
diff --git a/examples/blog/src/content/blog/second-post.md b/examples/blog/src/content/blog/second-post.md
index b5a067938..19a910598 100644
--- a/examples/blog/src/content/blog/second-post.md
+++ b/examples/blog/src/content/blog/second-post.md
@@ -2,7 +2,7 @@
title: 'Second post'
description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jul 22 2022'
-heroImage: '/placeholder-hero.jpg'
+heroImage: '/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/examples/blog/src/content/blog/third-post.md b/examples/blog/src/content/blog/third-post.md
index a2bc343bd..463cd253d 100644
--- a/examples/blog/src/content/blog/third-post.md
+++ b/examples/blog/src/content/blog/third-post.md
@@ -2,7 +2,7 @@
title: 'Third post'
description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jul 15 2022'
-heroImage: '/placeholder-hero.jpg'
+heroImage: '/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/examples/blog/src/content/blog/using-mdx.mdx b/examples/blog/src/content/blog/using-mdx.mdx
index 036209d3b..d976693e7 100644
--- a/examples/blog/src/content/blog/using-mdx.mdx
+++ b/examples/blog/src/content/blog/using-mdx.mdx
@@ -2,7 +2,7 @@
title: 'Using MDX'
description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jul 02 2022'
-heroImage: '/placeholder-hero.jpg'
+heroImage: '/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/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro
index a9526d0d4..da1cafe58 100644
--- a/examples/blog/src/layouts/BlogPost.astro
+++ b/examples/blog/src/layouts/BlogPost.astro
@@ -14,13 +14,39 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;