howto md to_mdx|astro

This commit is contained in:
lovebird 2025-03-27 14:59:55 +01:00
parent be441f8482
commit 536ef93e38

View File

@ -157,7 +157,6 @@ const content = async (str: string, filters: FilterFunction[] = default_filters)
const to_github = async (item: IHowto) => {
const itemDir = item_path(item)
mkdir(itemDir)
// Create README.md with all content
const readmeContent = [
@ -233,6 +232,55 @@ const to_mdx = async (item: IHowto) => {
write(path.join(itemDir, 'index.mdx'), mdxContent)
}
const to_astro = async (item: IHowto) => {
const itemDir = item_path(item)
mkdir(itemDir)
// Create index.astro with all content
const astroContent = [
'---',
`import { Image } from 'astro:assets'`,
`import Layout from '../../layouts/Layout.astro'`,
'',
`const { frontmatter } = Astro.props`,
'',
`const title = "${item.title}"`,
`const description = "${item.description}"`,
`const tags = ${JSON.stringify(item.tags)}`,
`const category = "${item.category?.label || 'uncategorized'}"`,
`const difficulty = "${item.difficulty_level}"`,
`const time = "${item.time}"`,
`const location = "${item.user?.geo ? `${item.user.geo.city ? `${item.user.geo.city}, ` : ''}${item.user.geo.countryName || ''}` : ''}"`,
'---',
'',
`<Layout title={title} description={description}>`,
' <article class="max-w-4xl mx-auto px-4 py-8">',
` <h1 class="text-4xl font-bold mb-8">{title}</h1>`,
'',
item.cover_image ? ` <Image src={import('./${item.cover_image.name}')} alt={title} class="w-full rounded-lg shadow-lg mb-8" />` : '',
'',
` <div class="prose prose-lg max-w-none mb-8">`,
` <p>{description}</p>`,
item.user?.geo ? ` <p class="text-gray-600">User Location: ${item.user.geo.city ? `${item.user.geo.city}, ` : ''}${item.user.geo.countryName || ''}</p>` : '',
` </div>`,
'',
' <div class="space-y-12">',
...item.steps.map((step, index) => [
` <section class="step-${index + 1}">`,
` <h2 class="text-2xl font-semibold mb-4">Step ${index + 1}: ${step.title}</h2>`,
` <div class="prose prose-lg max-w-none mb-6">`,
` <Fragment set:html={step.text} />`,
` </div>`,
// Add step images if any using Astro's Image component
...step.images.map(img => ` <Image src={import('./${img.name}')} alt="${img.name}" class="w-full rounded-lg shadow-md mb-6" />`)
].join('\n')),
' </div>',
' </article>',
'</Layout>'
].filter(Boolean).join('\n')
write(path.join(itemDir, 'index.astro'), astroContent)
}
const complete = async (item: IHowto) => {
if (!HOWTO_ANNOTATIONS) {
// return item
@ -273,6 +321,7 @@ const complete = async (item: IHowto) => {
await to_github(item)
await to_mdx(item)
await to_astro(item)
return item
}