summaryrefslogtreecommitdiff
path: root/examples/blog/src
diff options
context:
space:
mode:
Diffstat (limited to 'examples/blog/src')
-rw-r--r--examples/blog/src/assets/placeholder-about.jpgbin109629 -> 0 bytes
-rw-r--r--examples/blog/src/assets/placeholder-hero.jpgbin119318 -> 0 bytes
-rw-r--r--examples/blog/src/layouts/BlogPost.astro28
-rw-r--r--examples/blog/src/pages/about.md2
-rw-r--r--examples/blog/src/pages/blog.astro6
-rw-r--r--examples/blog/src/pages/blog/first-post.md4
-rw-r--r--examples/blog/src/pages/blog/markdown-style-guide.md4
-rw-r--r--examples/blog/src/pages/blog/second-post.md4
-rw-r--r--examples/blog/src/pages/blog/third-post.md4
-rw-r--r--examples/blog/src/pages/blog/using-mdx.mdx4
-rw-r--r--examples/blog/src/pages/index.astro5
-rw-r--r--examples/blog/src/pages/rss.xml.js9
12 files changed, 30 insertions, 40 deletions
diff --git a/examples/blog/src/assets/placeholder-about.jpg b/examples/blog/src/assets/placeholder-about.jpg
deleted file mode 100644
index 9653cc1c5..000000000
--- a/examples/blog/src/assets/placeholder-about.jpg
+++ /dev/null
Binary files differ
diff --git a/examples/blog/src/assets/placeholder-hero.jpg b/examples/blog/src/assets/placeholder-hero.jpg
deleted file mode 100644
index c8898768d..000000000
--- a/examples/blog/src/assets/placeholder-hero.jpg
+++ /dev/null
Binary files differ
diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro
index 7587913f7..177fe2519 100644
--- a/examples/blog/src/layouts/BlogPost.astro
+++ b/examples/blog/src/layouts/BlogPost.astro
@@ -2,36 +2,20 @@
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
-import {Image} from '@astrojs/image/components';
export interface Props {
content: {
title: string;
description: string;
- publishDate?: string;
+ pubDate?: string;
updatedDate?: string;
heroImage?: string;
};
}
const {
- content: { title, description, publishDate, updatedDate, heroImage },
+ content: { title, description, pubDate, updatedDate, heroImage },
} = Astro.props as Props;
-
-
-// Match the `heroImage` frontmatter string to its correct
-// Astro.glob() import of the file in the src/ directory.
-const assets = await Astro.glob('../assets/**/*');
-const heroImageAsset = assets.find(asset => {
- if (!heroImage) {
- return false;
- }
- if (!asset.default?.src) {
- return false;
- }
- const index = asset.default.src.indexOf('/assets/');
- return asset.default.src.slice(index) === heroImage;
-});
---
<html>
@@ -53,16 +37,16 @@ const heroImageAsset = assets.find(asset => {
<Header />
<main>
<article>
- {heroImageAsset && (
- <Image
+ {heroImage && (
+ <img
width={720}
height={360}
- src={heroImageAsset.default}
+ src={heroImage}
alt=""
/>
)}
<h1 class="title">{title}</h1>
- {publishDate && <time>{publishDate}</time>}
+ {pubDate && <time>{pubDate}</time>}
{updatedDate && <div>Last updated on <time>{updatedDate}</time></div>}
<hr/>
<slot />
diff --git a/examples/blog/src/pages/about.md b/examples/blog/src/pages/about.md
index ee0b25ca4..2aeb6562e 100644
--- a/examples/blog/src/pages/about.md
+++ b/examples/blog/src/pages/about.md
@@ -3,7 +3,7 @@ layout: "../layouts/BlogPost.astro"
title: "About Me"
description: "Lorem ipsum dolor sit amet"
updatedDate: "August 08 2022"
-heroImage: "/assets/placeholder-about.jpg"
+heroImage: "/placeholder-about.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/pages/blog.astro b/examples/blog/src/pages/blog.astro
index 1ba45a36c..73576c498 100644
--- a/examples/blog/src/pages/blog.astro
+++ b/examples/blog/src/pages/blog.astro
@@ -7,7 +7,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
// Use Astro.glob() to fetch all posts, and then sort them by date.
const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
(a, b) =>
- new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()
+ new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf()
);
---
@@ -40,8 +40,8 @@ const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
<ul>
{posts.map((post) => (
<li>
- <time datetime={post.frontmatter.publishDate}>
- {new Date(post.frontmatter.publishDate).toLocaleDateString('en-us', {
+ <time datetime={post.frontmatter.pubDate}>
+ {new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', {
year: 'numeric',
month: 'short',
day: 'numeric',
diff --git a/examples/blog/src/pages/blog/first-post.md b/examples/blog/src/pages/blog/first-post.md
index d07210ac5..f98986a08 100644
--- a/examples/blog/src/pages/blog/first-post.md
+++ b/examples/blog/src/pages/blog/first-post.md
@@ -2,8 +2,8 @@
layout: "../../layouts/BlogPost.astro"
title: "First post"
description: "Lorem ipsum dolor sit amet"
-publishDate: "Jul 08 2022"
-heroImage: "/assets/placeholder-hero.jpg"
+pubDate: "Jul 08 2022"
+heroImage: "/placeholder-hero.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/pages/blog/markdown-style-guide.md b/examples/blog/src/pages/blog/markdown-style-guide.md
index 7ef708f74..01e2a4546 100644
--- a/examples/blog/src/pages/blog/markdown-style-guide.md
+++ b/examples/blog/src/pages/blog/markdown-style-guide.md
@@ -2,8 +2,8 @@
layout: "../../layouts/BlogPost.astro"
title: "Markdown Style Guide"
description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
-publishDate: "Jul 01 2022"
-heroImage: "/assets/placeholder-hero.jpg"
+pubDate: "Jul 01 2022"
+heroImage: "/placeholder-hero.jpg"
---
Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.
diff --git a/examples/blog/src/pages/blog/second-post.md b/examples/blog/src/pages/blog/second-post.md
index 7edb9af76..6b4f2d242 100644
--- a/examples/blog/src/pages/blog/second-post.md
+++ b/examples/blog/src/pages/blog/second-post.md
@@ -2,8 +2,8 @@
layout: "../../layouts/BlogPost.astro"
title: "Second post"
description: "Lorem ipsum dolor sit amet"
-publishDate: "Jul 22 2022"
-heroImage: "/assets/placeholder-hero.jpg"
+pubDate: "Jul 22 2022"
+heroImage: "/placeholder-hero.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/pages/blog/third-post.md b/examples/blog/src/pages/blog/third-post.md
index a847cc39a..cba1991c5 100644
--- a/examples/blog/src/pages/blog/third-post.md
+++ b/examples/blog/src/pages/blog/third-post.md
@@ -2,8 +2,8 @@
layout: "../../layouts/BlogPost.astro"
title: "Third post"
description: "Lorem ipsum dolor sit amet"
-publishDate: "Jul 15 2022"
-heroImage: "/assets/placeholder-hero.jpg"
+pubDate: "Jul 15 2022"
+heroImage: "/placeholder-hero.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/pages/blog/using-mdx.mdx b/examples/blog/src/pages/blog/using-mdx.mdx
index f5ba282bf..628cc7e02 100644
--- a/examples/blog/src/pages/blog/using-mdx.mdx
+++ b/examples/blog/src/pages/blog/using-mdx.mdx
@@ -2,8 +2,8 @@
layout: '../../layouts/BlogPost.astro'
title: 'Using MDX'
description: 'Lorem ipsum dolor sit amet'
-publishDate: 'Jul 02 2022'
-heroImage: '/assets/placeholder-hero.jpg'
+pubDate: 'Jul 02 2022'
+heroImage: '/placeholder-hero.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/pages/index.astro b/examples/blog/src/pages/index.astro
index 02ad846c9..b85a0b6dd 100644
--- a/examples/blog/src/pages/index.astro
+++ b/examples/blog/src/pages/index.astro
@@ -23,10 +23,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
This template comes with a few integrations already configured in your
<code>astro.config.mjs</code> file. You can customize your setup with
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
- React, or Vue to your project. Add a blog RSS feed with <a
- href="https://docs.astro.build/en/guides/rss/"
- >@astrojs/rss
- </a>.
+ React, or Vue to your project.
</p>
<p>Here are a few ideas on how to get started with the template:</p>
<ul>
diff --git a/examples/blog/src/pages/rss.xml.js b/examples/blog/src/pages/rss.xml.js
new file mode 100644
index 000000000..9fd153480
--- /dev/null
+++ b/examples/blog/src/pages/rss.xml.js
@@ -0,0 +1,9 @@
+import rss from '@astrojs/rss';
+import {SITE_TITLE, SITE_DESCRIPTION} from '../config';
+
+export const get = () => rss({
+ title: SITE_TITLE,
+ description: SITE_DESCRIPTION,
+ site: import.meta.env.SITE,
+ items: import.meta.glob('./blog/**/*.md'),
+ }); \ No newline at end of file