0

I'm much more accustomed to React rather than Astro and Nextjs. I'm trying to develop a blog subdomain using Astrojs and i would like to use a template rather than build something from scratch. I'm using Astrowind template and all i really need is to move the blog list of articles to the home page. I won't need much else and i can customise the look and feel of the rest of the site.

This is what i want to see on the home page

This is what i get

After copying the index.astro located in the pages -> [...blog] -> index.astro into the pages->index.astro

I am struggling to import the post hence the permalink error.

---
import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';

import merge from 'lodash.merge';
import type { ImageMetadata } from 'astro';
import Layout from '~/layouts/PageLayout.astro';
import SinglePost from '~/components/blog/SinglePost.astro';
import ToBlogLink from '~/components/blog/ToBlogLink.astro';

import { getCanonical, getPermalink } from '~/utils/permalinks';
import { getStaticPathsBlogPost, blogPostRobots } from '~/utils/blog';
import { findImage } from '~/utils/images';
import type { MetaData } from '~/types';
import RelatedPosts from '~/components/blog/RelatedPosts.astro';

export const prerender = true;

export const getStaticPaths = (async () => {
  return await getStaticPathsBlogPost();
}) satisfies GetStaticPaths;

type Props = InferGetStaticPropsType<typeof getStaticPaths>;

const { post } = Astro.props as Props;

const url = getCanonical(getPermalink(post.permalink, 'post'));
const image = (await findImage(post.image)) as ImageMetadata | string | undefined;

const metadata = merge(
  {
    title: post.title,
    description: post.excerpt,
    robots: {
      index: blogPostRobots?.index,
      follow: blogPostRobots?.follow,
    },
    openGraph: {
      type: 'article',
      ...(image
        ? { images: [{ url: image, width: (image as ImageMetadata)?.width, height: (image as ImageMetadata)?.height }] }
        : {}),
    },
  },
  { ...(post?.metadata ? { ...post.metadata, canonical: post.metadata?.canonical || url } : {}) }
) as MetaData;
---

<Layout metadata={metadata}>
  <SinglePost post={{ ...post, image: image }} url={url}>
    {post.Content ? <post.Content /> : <Fragment set:html={post.content || ''} />}
  </SinglePost>
  <ToBlogLink />
  <RelatedPosts post={post} />
</Layout>

Please assist or at least point me in the right direction.

2
  • Please provide a stackoverflow.com/help/minimal-reproducible-example const { post } = Astro.props works only on a component, but what you posted seems to be a page, not a component? Commented Feb 24 at 8:40
  • The page you shared src/pages/[...blog]/index.astro is a route that includes a rest parameter. This means it runs getStaticPaths to generate a list of pages to render, and provide unique props to each. If you're new, I'd recommend avoiding this template as it tends to trip a lot of people up. I'd also recommend joining the Astro Discord (astro.build/chat), since it's better for long-chain conversations, which might be more helpful if you do want to find a way to use this template. Commented Feb 24 at 14:29

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.