Added a blog page with 3 md posts and started using variables

DanielWElliott · Jun 25, 2024 · f2e6295 · f2e6295
1 parent 728e962
commit f2e6295
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 9 deletions.
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,5 +1,18 @@
 ---
+const pageTitle = "About Me";
 
+const identity = {
+    firstName: "Daniel",
+    country: "Narnia",
+    occupation: "Son of Adam",
+    hobbies: ["reading","homelabbing","making things"],
+}
+
+const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
+
+const happy = true;
+const finished = false;
+const goal = 3;
 ---
 
 <html lang="en">
@@ -8,17 +21,34 @@
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
+		<title>{pageTitle}</title>
 	</head>
 	<body>
 		<a href="/astrotutorial/">Home</a>
         <a href="/astrotutorial/about/">About</a>
         <a href="/astrotutorial/blog/">Blog</a>
-        <h1>About Me</h1>
+        <h1>{pageTitle}</h1>
         <h2>... and my new Astro site!</h2>
 
         <p>I am working through Astro's introductory tutorial. This is the second page on my first Astro website, and it's the first page I've added myself!</p>
 
         <p>This site will update as I complete more of the tutorial, so keep checking back to see my progress and see how my journey is going! I'm already deviating from the tutorial a little bit, since I'm using GitHub Pages to host it instead of Netlify.</p>
-	</body>
+        <p>Here are a few facts about me:</p>
+        <ul>
+            <li>My name is {identity.firstName}.</li>
+            <li>I live in {identity.country} and I am a {identity.occupation}.</li>
+            {identity.hobbies.length >= 2 &&
+                <li>Two of my hobbies are: {identity.hobbies[0]} and {identity.hobbies[1]}</li>
+            }
+        </ul>
+        <p>My skills are:</p>
+        <ul>
+            {skills.map((skill) => <li>{skill}</li>)}
+        </ul>
+        {happy && <p>I am happy to be learning Astro!</p>}
+
+        {finished && <p>I finished this tutorial!</p>}
+
+        {goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}
+    </body>
 </html>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -1,5 +1,5 @@
 ---
-
+const pageTitle = "My Astro Learning Blog";
 ---
 
 <html lang="en">
@@ -8,14 +8,19 @@
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
+		<title>{pageTitle}</title>
 	</head>
 	<body>
 		<a href="/astrotutorial/">Home</a>
         <a href="/astrotutorial/about/">About</a>
         <a href="/astrotutorial/blog/">Blog</a>
-		<h1>My Astro Learning Blog</h1>
+		<h1>{pageTitle}</h1>
 
         <p>This is where I will post about my journey learning Astro.</p>
+        <ul>
+            <li><a href="/astrotutorial/posts/post-1/">Post 1</a></li>
+            <li><a href="/astrotutorial/posts/post-2/">Post 2</a></li>
+            <li><a href="/astrotutorial/posts/post-3/">Post 3</a></li>
+        </ul>
 	</body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-
+const pageTitle = "Home Page";
 ---
 
 <html lang="en">
@@ -8,12 +8,12 @@
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
+		<title>{pageTitle}</title>
 	</head>
 	<body>
 		<a href="/astrotutorial/">Home</a>
         <a href="/astrotutorial/about/">About</a>
         <a href="/astrotutorial/blog/">Blog</a>
-		<h1>My Astro Site</h1>
+		<h1>{pageTitle}</h1>
 	</body>
 </html>
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
@@ -0,0 +1,27 @@
+---
+title: 'My First Blog Post'
+pubDate: 2024-06-24
+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: 2024-06-24
+
+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.
diff --git a/src/pages/posts/post-2.md b/src/pages/posts/post-2.md
@@ -0,0 +1,11 @@
+---
+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!
diff --git a/src/pages/posts/post-3.md b/src/pages/posts/post-3.md
@@ -0,0 +1,11 @@
+---
+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!