From c97a72e1ecf1a4f0069a61c51caa14294dd1e825 Mon Sep 17 00:00:00 2001
From: Andre Rossouw <andre@wr360.co.za>
Date: Thu, 21 Dec 2023 07:51:06 +0200
Subject: [PATCH] Finished with Layouts and Components And starting with the
 api https://docs.astro.build/en/tutorial/5-astro-api/

---
 src/components/Footer.astro          | 18 ++++++
 src/components/Hamburger.astro       |  7 +++
 src/components/Header.astro          | 10 ++++
 src/components/Navigation.astro      |  7 +++
 src/components/Social.astro          | 13 +++++
 src/layouts/BaseLayout.astro         | 25 +++++++++
 src/layouts/MarkdownPostLayout.astro | 10 ++++
 src/pages/about.astro                | 50 +++++++++++------
 src/pages/blog.astro                 | 31 ++++------
 src/pages/index.astro                | 23 ++------
 src/pages/posts/post-1.md            | 11 +---
 src/pages/posts/post-2.md            |  1 +
 src/pages/posts/post-3.md            |  1 +
 src/scripts/menu.js                  |  3 +
 src/styles/global.css                | 84 ++++++++++++++++++++++++++++
 15 files changed, 231 insertions(+), 63 deletions(-)
 create mode 100644 src/components/Footer.astro
 create mode 100644 src/components/Hamburger.astro
 create mode 100644 src/components/Header.astro
 create mode 100644 src/components/Navigation.astro
 create mode 100644 src/components/Social.astro
 create mode 100644 src/layouts/BaseLayout.astro
 create mode 100644 src/layouts/MarkdownPostLayout.astro
 create mode 100644 src/scripts/menu.js
 create mode 100644 src/styles/global.css

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..8551294
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,18 @@
+---
+const platform = "github";
+const username = "withastro";
+import Social from './Social.astro';
+---
+<style>
+    footer {
+        display: flex;
+        gap: 1rem;
+        margin-top: 2rem;
+    }
+</style>
+
+<footer>
+    <Social platform="twitter" username="astrodotbuild" />
+    <Social platform="github" username="withastro" />
+    <Social platform="youtube" username="astrodotbuild" />
+</footer>
\ No newline at end of file
diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
new file mode 100644
index 0000000..aa83679
--- /dev/null
+++ b/src/components/Hamburger.astro
@@ -0,0 +1,7 @@
+---
+---
+<div class="hamburger">
+    <span class="line"></span>
+    <span class="line"></span>
+    <span class="line"></span>
+</div>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..7935af7
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,10 @@
+---
+import Hamburger from './Hamburger.astro';
+import Navigation from './Navigation.astro';
+---
+<header>
+    <nav>
+        <Hamburger />
+        <Navigation />
+    </nav>
+</header>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
new file mode 100644
index 0000000..cf6026f
--- /dev/null
+++ b/src/components/Navigation.astro
@@ -0,0 +1,7 @@
+---
+---
+<div class="nav-links">
+    <a href="/">Home</a>
+    <a href="/about/">About</a>
+    <a href="/blog/">Blog</a>
+</div>
\ No newline at end of file
diff --git a/src/components/Social.astro b/src/components/Social.astro
new file mode 100644
index 0000000..20979f4
--- /dev/null
+++ b/src/components/Social.astro
@@ -0,0 +1,13 @@
+---
+const { platform, username } = Astro.props;
+---
+<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
+
+<style>
+    a {
+        padding: 0.5rem 1rem;
+        color: white;
+        background-color: #4c1d95;
+        text-decoration: none;
+    }
+</style>
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
new file mode 100644
index 0000000..9938436
--- /dev/null
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,25 @@
+---
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import '../styles/global.css';
+const { pageTitle } = Astro.props;
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{pageTitle}</title>
+	</head>
+	<body>
+		<Header />
+		<h1>{pageTitle}</h1>
+        <slot />
+		<Footer />
+		<script>
+			import "../scripts/menu.js";
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
new file mode 100644
index 0000000..d8725e8
--- /dev/null
+++ b/src/layouts/MarkdownPostLayout.astro
@@ -0,0 +1,10 @@
+---
+import BaseLayout from './BaseLayout.astro';
+const { frontmatter } = Astro.props;
+---
+<BaseLayout pageTitle={frontmatter.title}>
+    <p>Publishd on {frontmatter.pubDate.slice(0,10)} by {frontmatter.author}</p>
+    <p><em>{frontmatter.description}</em></p>
+    <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
+    <slot />
+</BaseLayout>
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 4bc3482..29227ab 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,21 +1,35 @@
 ---
-const pageTitle = "About Andre Rossouw";
+import BaseLayout from '../layouts/BaseLayout.astro';
+const identity = {
+  firstName: "Andre",
+  country: "South Africa",
+  occupation: "Random dude",
+  hobbies: ["photography", "birdwatching", "baseball"],
+};
+
+const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
+
+const happy = true;
+const finished = false;
+const goal = 3;
+
+const skillColor = "navy";
+const pageTitle = 'About Me';
 ---
 
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{pageTitle}</title>
-	</head>
-	<body>
-        <a href="/">Home</a>
-        <a href="/about/">About</a>
-		<a href="/blog/">Blog</a>
-		<h1>{pageTitle}</h1>
-        <p>This is my firwst paragraph on my about page. It sure does look good!</p>
-        <p>And here is another parapgraph that I'm adding. I think it looks pretty darn cool.</p>
-	</body>
-</html>
+<BaseLayout pageTitle={pageTitle}>
+    <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 work as 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 class="skill">{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>}
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 838484c..ea015ab 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -1,22 +1,13 @@
 ---
+import BaseLayout from '../layouts/BaseLayout.astro';
+const pageTitle = 'My astro Learning Blog';
+import '../styles/global.css';
 ---
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width" />
-    <title>Astro</title>
-  </head>
-  <body>
-    <a href="/">Home</a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-
-    <h1>My Astro Learning Blog</h1>
-    <p>This is where I will post about my journey learning Astro.</p>
-    <ul>
-      <li><a href="/posts/post-1/">Post 1</a></li>
-      <li><a href="/posts/post-2/">Post 2</a></li>
-      <li><a href="/posts/post-3/">Post 3</a></li>
-    </ul>
-  </body>
-</html>
\ No newline at end of file
+<BaseLayout pageTitle={pageTitle}>
+  <p>This is where I will post about my journey learning Astro.</p>
+  <ul>
+    <li><a href="/posts/post-1/">Post 1</a></li>
+    <li><a href="/posts/post-2/">Post 2</a></li>
+    <li><a href="/posts/post-3/">Post 3</a></li>
+  </ul>
+</BaseLayout>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c457af5..7312aea 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,19 +1,8 @@
 ---
+import BaseLayout from '../layouts/BaseLayout.astro';
+const pageTitle = 'Home Page';
+---
 
----
-
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<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>
-	</head>
-	<body>
-		<a href="/">Home</a>
-		<a href="/about/">About</a>
-		<a href="/blog/">Blog</a>
-		<h1>My Astro Site</h1>
-	</body>
-</html>
+<BaseLayout pageTitle={pageTitle}>
+	<h2>My awesome blog subtitle</h2>
+</BaseLayout>
\ No newline at end of file
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
index 982e74a..73d2944 100644
--- a/src/pages/posts/post-1.md
+++ b/src/pages/posts/post-1.md
@@ -1,19 +1,14 @@
 ---
+layout: ../../layouts/MarkdownPostLayout.astro
 title: 'My First Blog Post'
 pubDate: 2022-07-01
-description: 'This is the first post of my new Astro blog.'
+description: "Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website."
 author: 'Astro Learner'
 image:
-    url: 'https://docs.astro.build/assets/full-logo-light.png'
+    url: "https://docs.astro.build/assets/full-logo-light.png"
     alt: 'The full Astro logo.'
 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.
diff --git a/src/pages/posts/post-2.md b/src/pages/posts/post-2.md
index 06a4544..d3ca609 100644
--- a/src/pages/posts/post-2.md
+++ b/src/pages/posts/post-2.md
@@ -1,4 +1,5 @@
 ---
+layout: ../../layouts/MarkdownPostLayout.astro
 title: My Second Blog Post
 author: Astro Learner
 description: "After learning some Astro, I couldn't stop!"
diff --git a/src/pages/posts/post-3.md b/src/pages/posts/post-3.md
index d8c9844..c79fe82 100644
--- a/src/pages/posts/post-3.md
+++ b/src/pages/posts/post-3.md
@@ -1,4 +1,5 @@
 ---
+layout: ../../layouts/MarkdownPostLayout.astro
 title: My Third Blog Post
 author: Astro Learner
 description: "I had some challenges, but asking in the community really helped!"
diff --git a/src/scripts/menu.js b/src/scripts/menu.js
new file mode 100644
index 0000000..5e40f5f
--- /dev/null
+++ b/src/scripts/menu.js
@@ -0,0 +1,3 @@
+document.querySelector('.hamburger').addEventListener('click', () => {
+    document.querySelector('.nav-links').classList.toggle('expanded');
+});
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..e0ae1b1
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,84 @@
+html {
+    background-color: #f1f5f9;
+    font-family: sans-serif;
+}
+
+body {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 80ch;
+    padding: 1rem;
+    line-height: 1.5;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+h1 {
+    margin: 1rem 0;
+    font-size: 2.5rem;
+}
+
+/* nav styles */
+
+.hamburger {
+    padding-right: 20px;
+    cursor: pointer;
+}
+
+.hamburger .line {
+    display: block;
+    width: 40px;
+    height: 5px;
+    margin-bottom: 10px;
+    background-color: #ff9776;
+}
+
+.nav-links {
+    width: 100%;
+    top: 5rem;
+    left: 48px;
+    background-color: #ff9776;
+    display: none;
+    margin: 0;
+  }
+  
+.nav-links a {
+    display: block;
+    text-align: center;
+    padding: 10px 0;
+    text-decoration: none;
+    font-size: 1.2rem;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+  
+.nav-links a:hover,
+.nav-links a:focus {
+    background-color: #ff9776;
+}
+  
+.expanded {
+    display: unset;
+}
+
+@media screen and (min-width: 636px) {
+    .nav-links {
+      margin-left: 5em;
+      display: block;
+      position: static;
+      width: auto;
+      background: none;
+    }
+  
+    .nav-links a {
+      display: inline-block;
+      padding: 15px 20px;
+    }
+
+    .hamburger {
+        display: none;
+      }
+
+}
\ No newline at end of file