sumitkharche/[slug].astro Secret

## [slug].astro
---
import BaseHead from '../../components/BaseHead.astro';
import Footer from '../../components/Footer.astro';
import Navigation from '../../components/Navigation.astro';
import { apiURL,bucketSlug,readKey} from '../../lib/config';


export async function getStaticPaths() {
const response = await fetch(`https://api.cosmicjs.com/v2/buckets/${bucketSlug}/objects?pretty=true&query=%7B%22type%22%3A%22posts%22%7D&read_key=${readKey}`);
const objs = await response.json();
const allPosts = objs.objects;

 return allPosts.map(( post,i) => {
    return {
      params: { slug: post.slug },
      props: {post}
    };
  });

}

const { slug } = Astro.request.params;
const {post} = Astro.props;
const url = `${post.metadata.image.url}`;

---
<html lang="en">
<head>
    <BaseHead />
</head>
<body>
        <!-- Navigation-->
        <Navigation />
        <!-- Page Header-->
        <header class="masthead" style={`background-image: url(${post.metadata.image.imgix_url})`}>
            <div class="container position-relative px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                        <div class="post-heading">
                            <h1>{post.title}</h1>
                            <span class="meta">
                                Posted on
                                {new Date(post.published_at).toDateString()}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main Content-->
        <article class="mb-4">
            <div class="container px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                        {post.metadata.content}
                    </div>
                </div>
            </div>
        </article>
        <!-- Footer-->
        <Footer />
    </body>
</html>
	---
	import BaseHead from '../../components/BaseHead.astro';
	import Footer from '../../components/Footer.astro';
	import Navigation from '../../components/Navigation.astro';
	import { apiURL,bucketSlug,readKey} from '../../lib/config';


	export async function getStaticPaths() {
	const response = await fetch(`https://api.cosmicjs.com/v2/buckets/${bucketSlug}/objects?pretty=true&query=%7B%22type%22%3A%22posts%22%7D&read_key=${readKey}`);
	const objs = await response.json();
	const allPosts = objs.objects;

	return allPosts.map(( post,i) => {
	return {
	params: { slug: post.slug },
	props: {post}
	};
	});

	}

	const { slug } = Astro.request.params;
	const {post} = Astro.props;
	const url = `${post.metadata.image.url}`;

	---
	<html lang="en">
	<head>
	<BaseHead />
	</head>
	<body>
	<!-- Navigation-->
	<Navigation />
	<!-- Page Header-->
	<header class="masthead" style={`background-image: url(${post.metadata.image.imgix_url})`}>
	<div class="container position-relative px-4 px-lg-5">
	<div class="row gx-4 gx-lg-5 justify-content-center">
	<div class="col-md-10 col-lg-8 col-xl-7">
	<div class="post-heading">
	<h1>{post.title}</h1>
	<span class="meta">
	Posted on
	{new Date(post.published_at).toDateString()}
	</span>
	</div>
	</div>
	</div>
	</div>
	</header>
	<!-- Main Content-->
	<article class="mb-4">
	<div class="container px-4 px-lg-5">
	<div class="row gx-4 gx-lg-5 justify-content-center">
	<div class="col-md-10 col-lg-8 col-xl-7">
	{post.metadata.content}
	</div>
	</div>
	</div>
	</article>
	<!-- Footer-->
	<Footer />
	</body>
	</html>