diff --git a/src/content/blog/using-mdx.mdx b/src/content/blog/using-mdx.mdx deleted file mode 100644 index bd8856e..0000000 --- a/src/content/blog/using-mdx.mdx +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: 'Using MDX' -description: 'Lorem ipsum dolor sit amet' -pubDate: 'Jun 01 2024' -heroImage: '../../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. - -## Why MDX? - -MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to [mix JavaScript and UI Components into your Markdown content](https://docs.astro.build/en/guides/markdown-content/#mdx-features) for things like interactive charts or alerts. - -If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze. - -## Example - -Here is how you import and use a UI component inside of MDX. -When you open this page in the browser, you should see the clickable button below. - -import HeaderLink from '../../components/HeaderLink.astro'; - - - Embedded component in MDX - - -## More Links - -- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx) -- [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) -- **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default. diff --git a/src/content/config.ts b/src/content/config.ts index 8763547..795e6d0 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -2,20 +2,15 @@ import { defineCollection, z } from "astro:content"; const blog = defineCollection({ type: "content", - schema: z.object({ - title: z.string(), - description: z.string().optional(), - pubDate: z.coerce.date(), - updatedDate: z.coerce.date().optional(), - draft: z.boolean().optional().default(false), - // Optional if you use hero images in your layout: - heroImage: z - .object({ - src: z.string(), - alt: z.string().optional(), - }) - .optional(), - }), + schema: ({ image }) => + z.object({ + title: z.string(), + description: z.string().optional(), + pubDate: z.coerce.date(), + updatedDate: z.coerce.date().optional(), + draft: z.boolean().default(false), + heroImage: image().optional(), + }), }); export const collections = { blog }; diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index 2c79f3b..3ad3b31 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -1,86 +1,88 @@ --- -import { Image } from 'astro:assets'; -import type { CollectionEntry } from 'astro:content'; -import BaseHead from '../components/BaseHead.astro'; -import Footer from '../components/Footer.astro'; -import FormattedDate from '../components/FormattedDate.astro'; -import Header from '../components/Header.astro'; +import { Image } from "astro:assets"; +import type { CollectionEntry } from "astro:content"; +import BaseHead from "../components/BaseHead.astro"; +import Footer from "../components/Footer.astro"; +import FormattedDate from "../components/FormattedDate.astro"; +import Header from "../components/Header.astro"; -type Props = CollectionEntry<'blog'>['data']; +type Props = CollectionEntry<"blog">["data"]; -const { title, description, pubDate, updatedDate, heroImage } = Astro.props; +const { title, description, pubDate, updatedDate, heroImage } = Astro.props as Props; --- - - - - + + + + - -
-
-
-
- {heroImage && } -
-
-
-
- - { - updatedDate && ( -
- Last updated on -
- ) - } -
-

{title}

-
-
- -
-
-
-