edit meta and make sure all the pages work properly

.astro/types.d.ts

@@ -216,5 +216,5 @@ declare module 'astro:content' {
 
 	type AnyEntryMap = ContentEntryMap & DataEntryMap;
 
-	export type ContentConfig = typeof import("../src/content/config.js");
+	export type ContentConfig = typeof import("./../src/content/config.js");
 }

astro.config.mjs

@@ -10,4 +10,5 @@ export default defineConfig({
   integrations: [mdx(), icon(), tailwind({
     applyBaseStyles: false,
   }), compress()],
+  site: 'https://story-of-the-eight.vercel.app',
 })

src/components/SiteMeta.astro

@@ -16,7 +16,7 @@ let subtitle = 'Story of The Eight'
 <meta property="og:description" content={description} />
 <meta property="og:type" content="website" />
 <meta property="og:url" content={url} />
-<meta property="og:image" content={Astro.site ? `${Astro.site}${image}` : image} />
+<meta property="og:image" content={`${Astro.site}${image}`} />
 
 <!-- twitter card -->
 

src/layouts/DefaultLayout.astro

@@ -9,7 +9,7 @@ const {
   title = 'Story of The Eight',
   description = 'A Collection of stories as told by Samuel C Tyler, concerning the collected lore of The Eight.',
   url,
-  image = '/eight-social-preview.png',
+  image = 'eight-social-preview.png',
   author = 'Samuel C Tyler',
 } = Astro.props
 ---
@@ -26,9 +26,7 @@ const {
     <SiteMeta
       title={title}
       description={description.substring(0, 100)}
-      url={Astro.site
-        ? `${Astro.site}/${title.toLowerCase().replaceAll(' ', '-')}`
-        : `https://story-of-the-eight.vercel.app/${title.toLowerCase().replaceAll(' ', '-')}`}
+      url={`${Astro.site}${url}`}
       image={image}
       author={author}
     />

src/pages/posts/[...page].astro

@@ -5,7 +5,7 @@ import { getCollection } from "astro:content";
 
 export async function getStaticPaths({ paginate }) {
   let data = await getCollection("posts");
-  // data = data.sort((postA, postB) => postA.order > postB.order)
+  data.sort((postA, postB) => postA.data.order < postB.data.order ? -1 : 1)
 
   return paginate(data, { pageSize: 9 })
 }
@@ -34,10 +34,10 @@ const { page } = Astro.props
             <li>
               {post}
               <Card
-                img={post?.data?.image?.banner}
                 url={`/posts/${post.slug}`}
                 title={post?.data?.title}
                 footer={'posted by: ' + post?.data?.author}
+                img={`/${post?.data?.image?.banner}`}
               >
                 {post?.data?.description}
               </Card>

src/pages/posts/[...slug].astro

@@ -1,55 +1,55 @@
 ---
 import { getCollection } from 'astro:content';
 import DefaultLayout from '../../layouts/DefaultLayout.astro'
+import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection('posts');
   return blogEntries.map(entry => ({
-    params: { slug: entry.slug }, props: { entry },
+    params: { slug: entry.slug }, props: { post: entry },
   }));
 }
 
 const { post } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await post.render();
 ---
 
-<DefaultLayout title={post.title} description={post.body} url={post.title}>
+<DefaultLayout title={post.data.title} description={post.data.description} url={`posts/${post.slug}`}>
     <div class="container">
       <div class="mt-12">
         <Breadcrumbs>
           <BreadcrumbsItem href="/" label="Home" />
           <BreadcrumbsItem href="/blog" label="Blog" />
-          <BreadcrumbsItem currentPage={true} label={post.title} />
+          <BreadcrumbsItem currentPage={true} label={post.data.title} />
         </Breadcrumbs>
       </div>
     </div>
     <section class="my-12">
       <div class="container">
-        <h1>{post.title}</h1><br />
-        <p>By userId: {post.userId}</p>
+        <h1>{post.data.title}</h1><br />
+        <p>By: {post.data.author}</p>
       </div>
     </section>
     <section class="my-12">
       <div class="container">
-        <p class="text-2xl">{post.body}</p>
+        <p class="text-2xl"><Content/></p>
       </div>
     </section>
   </DefaultLayout>
-  
+
   <style lang="scss">
     ul {
       display: grid;
       grid-template-columns: 1fr;
       grid-gap: 4rem;
-  
+
       @media (min-width: 550px) {
         grid-template-columns: repeat(2, 1fr);
         grid-gap: 2rem;
       }
-  
+
       @media (min-width: 950px) {
         grid-template-columns: repeat(3, 1fr);
       }
     }
   </style>
-