Updated to Astro 1.0.3

.gitignore

@@ -1,14 +1,16 @@
 # build output
-dist
+dist/
+.output/
 
 # dependencies
 node_modules/
-.snowpack/
 
 # logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+
 
 # environment variables
 .env

.npmrc

@@ -1,2 +1,2 @@
-## force pnpm to hoist 
+# Expose Astro dependencies for `pnpm` users
 shamefully-hoist=true

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Maxi Ferreira
+Copyright (c) 2022 Maxi Ferreira
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -18,6 +18,7 @@ npm init astro -- --template Charca/astro-blog-template
 
 ## ✨ Features:
 
+- ✅ Astro 1.0
 - ✅ Dark Mode
 - ✅ Full Markdown support
 - ✅ SEO-friendly setup with canonical URLs and OpenGraph data
@@ -52,7 +53,7 @@ Any static assets, like images, can be placed in the `public/` directory.
 All commands are run from the root of the project, from a terminal:
 
 | Command           | Action                                       |
-|:----------------  |:-------------------------------------------- |
+| :---------------- | :------------------------------------------- |
 | `npm install`     | Installs dependencies                        |
 | `npm run dev`     | Starts local dev server at `localhost:3030`  |
 | `npm run build`   | Build your production site to `./dist/`      |

astro.config.mjs

@@ -1,17 +1,9 @@
-export default {
+import { defineConfig } from 'astro/config'
-  // projectRoot: '.',     // Where to resolve all URLs relative to. Useful if you have a monorepo project.
+import svelte from '@astrojs/svelte'
-  // pages: './src/pages', // Path to Astro components, pages, and data
+import mdx from '@astrojs/mdx'
-  // 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.
+// https://astro.build/config
-  buildOptions: {
+export default defineConfig({
-    site: 'https://astro-blog-template.netlify.app',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
+  site: 'https://astro-blog-template.netlify.app',
-    sitemap: true,         // Generate sitemap (set to "false" to disable)
+  integrations: [mdx(), svelte()],
-  },
+})
-  devOptions: {
-    // hostname: 'localhost',  // The hostname to run the dev server on.
-    port: 3030,             // The port to run the dev server on.
-  },
-  renderers: [
-    "@astrojs/renderer-svelte"
-  ],
-};

package.json

@@ -6,11 +6,13 @@
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
-    "preview": "astro preview"
+    "preview": "astro preview",
+    "astro": "astro"
   },
   "devDependencies": {
-    "astro": "^0.21.5",
+    "@astrojs/mdx": "^0.8.3",
-    "@astrojs/renderer-svelte": "^0.2.1"
+    "@astrojs/svelte": "^1.0.0",
+    "astro": "^1.0.3"
   },
   "dependencies": {
     "reading-time": "^1.5.0"

src/components/BaseHead.astro

@@ -1,9 +1,13 @@
 ---
+import '../styles/global.css'
+import '../styles/highlight.css'
+
 export interface Props {
   title: string;
   description: string;
   permalink: string;
 }
+
 const { title, description, permalink } = Astro.props;
 const socialUrl = Astro.site.href + 'assets/social.png'
 ---
@@ -38,10 +42,6 @@ const socialUrl = Astro.site.href + 'assets/social.png'
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
 
-<!-- Styles -->
-<link rel="stylesheet" href={Astro.resolve('../styles/global.css')} />
-<link rel="stylesheet" href={Astro.resolve('../styles/highlight.css')} />
-
 <!-- This is intentionally inlined to avoid FOUC -->
 <script>
   const root = document.documentElement;

src/pages/blog/[slug].astro

@@ -3,15 +3,16 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import Bio from '../../components/Bio.astro';
 import getPostData from '../../utils/getPostData';
 
-export function getStaticPaths() {
+export async function getStaticPaths() {
-  const posts = Astro.fetchContent('../../data/blog-posts/*.md');
+  const posts = await Astro.glob('../../data/blog-posts/*.md');
   return posts.map(p => ({
-    params: { slug: p.file.pathname.split('/').pop().split('.').shift() },
+    params: { slug: p.file.split('/').pop().split('.').shift() },
     props: { post: p },
   }));
 }
 
-const { Content, title, description, publishDate, heroImage } = Astro.props.post;
+const { Content, frontmatter } = Astro.props.post;
+const { title, description, publishDate } = frontmatter;
 const { slug, readingTime } = getPostData(Astro.props.post);
 const permalink = `${Astro.site.href}${slug}`;
 ---

src/pages/blog/index.astro

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

src/utils/getPostData.ts

@@ -1,14 +1,14 @@
-import readingTime from 'reading-time';
+import readingTime from 'reading-time'
 
 type Post = {
-  title: string,
+  title: string
-  file: URL,
+  file: string
-  content: { source: string }
+  rawContent: () => string
 }
 
 export default function getPostData(post: Post) {
   return {
-    slug: post.file.pathname.split('/').pop().split('.').shift(),
+    slug: post.file.split('/').pop().split('.').shift(),
-    readingTime: readingTime(post.content.source).text,
+    readingTime: readingTime(post.rawContent()).text,
   }
 }

tsconfig.json

@@ -1,3 +1,15 @@
 {
-  "moduleResolution": "node"
+  "compilerOptions": {
+    // Enable top-level await, and other modern ESM features.
+    "target": "ESNext",
+    "module": "ESNext",
+    // Enable node-style module resolution, for things like npm package imports.
+    "moduleResolution": "node",
+    // Enable JSON imports.
+    "resolveJsonModule": true,
+    // Enable stricter transpilation for better output.
+    "isolatedModules": true,
+    // Astro will directly run your TypeScript code, no transpilation needed.
+    "noEmit": true
+  }
 }