diff --git a/src/components/Blog.astro b/src/components/Blog.astro new file mode 100644 index 0000000..f6dc5d4 --- /dev/null +++ b/src/components/Blog.astro @@ -0,0 +1,163 @@ +--- +// TODO: List some projects +const projects = [ + { + name: "My First Blog Post", + url: "/posts/post-1/", + color: "var(--ctp-lavender)", + }, + { + name: "My Second Blog Post", + url: "/posts/post-2/", + color: "var(--ctp-lavender)", + }, + { + name: "My Third Blog Post", + url: "/posts/post-3/", + color: "var(--ctp-lavender)", + }, +]; +--- + +
+
+

Blog

+
+ { + projects.map((project) => ( + + ◈ + {project.name} + + + + + )) + } +
+
+
+ + diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro new file mode 100644 index 0000000..e2df42c --- /dev/null +++ b/src/layouts/PostLayout.astro @@ -0,0 +1,71 @@ +--- +interface Props { + title: string; +} + +const { title } = Astro.props; +--- + + + + + + + + + + {title} + + + + + + + diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md new file mode 100644 index 0000000..7984dae --- /dev/null +++ b/src/pages/posts/post-1.md @@ -0,0 +1,28 @@ +--- +layout: ../../layouts/PostLayout.astro +title: 'My First Blog Post' +pubDate: 2022-07-01 +description: 'This is the first post of my new Astro blog.' +author: 'Astro Learner' +image: + url: 'https://docs.astro.build/assets/rose.webp' + alt: 'The Astro logo on a dark background with a pink glow.' +tags: ["astro", "blogging", "learning in public"] +--- +# My First Blog Post + +Published on: 2022-07-01 + +Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website. + +## What I've accomplished + +1. **Installing Astro**: First, I created a new Astro project and set up my online accounts. + +2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder. + +3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts! + +## What's next + +I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come. \ No newline at end of file diff --git a/src/pages/posts/post-2.md b/src/pages/posts/post-2.md new file mode 100644 index 0000000..d2d21ed --- /dev/null +++ b/src/pages/posts/post-2.md @@ -0,0 +1,12 @@ +--- +layout: ../../layouts/PostLayout.astro +title: My Second Blog Post +author: Astro Learner +description: "After learning some Astro, I couldn't stop!" +image: + url: "https://docs.astro.build/assets/arc.webp" + alt: "The Astro logo on a dark background with a purple gradient arc." +pubDate: 2022-07-08 +tags: ["astro", "blogging", "learning in public", "successes"] +--- +After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory! \ No newline at end of file diff --git a/src/pages/posts/post-3.md b/src/pages/posts/post-3.md new file mode 100644 index 0000000..a6fe8c1 --- /dev/null +++ b/src/pages/posts/post-3.md @@ -0,0 +1,12 @@ +--- +layout: ../../layouts/PostLayout.astro +title: My Third Blog Post +author: Astro Learner +description: "I had some challenges, but asking in the community really helped!" +image: + url: "https://docs.astro.build/assets/rays.webp" + alt: "The Astro logo on a dark background with rainbow rays." +pubDate: 2022-07-15 +tags: ["astro", "learning in public", "setbacks", "community"] +--- +It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.build/chat) is really friendly and helpful! \ No newline at end of file