Updated URLs

astro.config.mjs

@@ -4,7 +4,7 @@ export default {
   // dist: './dist',       // When running `astro build`, path to final static output
   // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
   buildOptions: {
-    // site: 'http://example.com',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
+    site: 'https://astro-blog-template.netlify.app',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
     sitemap: true,         // Generate sitemap (set to "false" to disable)
   },
   devOptions: {

src/data/blog-posts/hello-world.md

@@ -1,6 +1,4 @@
 ---
-setup: |
-  import Layout from '../../../layouts/BlogPostLayout.astro'
 title: Hello World 👋
 publishDate: 30 Nov 2021
 description: Every blog starts with a single post. This is yours. Make it great.

src/data/blog-posts/markdown-test.md

@@ -1,6 +1,4 @@
 ---
-setup: |
-  import Layout from '../../../layouts/BlogPostLayout.astro'
 title: Markdown Test Page
 publishDate: 01 Dec 2021
 description: A sample page with the most common elements of an article, including headings, paragraphs, lists, and images. Use it as a starting point for applying your own styles.

src/pages/about.astro

@@ -3,7 +3,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 
 const title = 'About';
 const description = 'About your blog.';
-const permalink = 'https://example.com/about';
+const permalink = `${Astro.site.href}about`;
 ---
 
 <BaseLayout title={title} description={description} permalink={permalink} current="about">

src/pages/blog/[slug].astro

@@ -1,9 +1,18 @@
 ---
-import BaseLayout from './BaseLayout.astro';
-import Bio from '../components/Bio.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import Bio from '../../components/Bio.astro';
 
-const {content} = Astro.props;
-const {title, description, publishDate, author, heroImage, permalink, alt} = content;
+export function getStaticPaths() {
+  const posts = Astro.fetchContent('../../data/blog-posts/*.md');
+  return posts.map(p => ({
+    params: { slug: p.file.pathname.split('/').pop().split('.').shift() },
+    props: { post: p },
+  }));
+}
+
+const { Content, title, description, publishDate, heroImage } = Astro.props.post;
+const slug = Astro.props.post.file.pathname.split('/').pop().split('.').shift();
+const permalink = `${Astro.site.href}${slug}`;
 ---
 
 <BaseLayout title={title} description={description} permalink={permalink} current="blog">
@@ -14,7 +23,7 @@ const {title, description, publishDate, author, heroImage, permalink, alt} = con
   </header>
   <div class="container">
     <article class="content">
-      <slot />
+      <Content />
     </article>
     <hr />
     <Bio />

src/pages/blog/index.astro

@@ -3,29 +3,32 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 
 const title = 'Blog';
 const description = 'Latest articles.';
-const permalink = 'https://example.com/blog';
+const permalink = `${Astro.site.href}blog`;
 
-let allPosts = await Astro.fetchContent('./posts/*.md');
+let allPosts = await Astro.fetchContent('../../data/blog-posts/*.md');
 allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf());
 ---
 
 <BaseLayout title={title} description={description} permalink={permalink} current="blog">
   <div class="container">
     <h1>Blog</h1>
-    {allPosts.map((post, index) => (
-      <div>
-        { index !== 0 && <hr /> }
-        <div class="post-item">
-          <h2>
-            <a href={post.url}>{post.title}</a>
-          </h2>
-          <p>{post.description}</p>
-          <div class="post-item-footer">
-            <span class="post-item-date">— {post.publishDate}</span>
+    {allPosts.map((post, index) => {
+      const href = `/blog/${post.file.pathname.split('/').pop().split('.').shift()}`;
+      return (
+        <div>
+          { index !== 0 && <hr /> }
+          <div class="post-item">
+            <h2>
+              <a href={href}>{post.title}</a>
+            </h2>
+            <p>{post.description}</p>
+            <div class="post-item-footer">
+              <span class="post-item-date">— {post.publishDate}</span>
+            </div>
           </div>
         </div>
-      </div>
-    ))}
+      )
+    })}
   </div>
 </BaseLayout>
 

src/pages/index.astro

@@ -3,7 +3,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 
 const title = 'My Astro Blog';
 const description = 'The perfect starter for your perfect blog.';
-const permalink = 'https://example.com/';
+const permalink = Astro.site.href;
 ---
 
 <BaseLayout title={title} description={description} permalink={permalink}>