PR to main

src/components/Aside.astro

@@ -1,8 +1,9 @@
 ---
-import Author from '../data/author.json';
+import json from '../data/author.json';
 
-//if key matches in author deconstruct the value and assign it to the variable
-const { name, bio, photo, twitter, twitterHandle, linkedin, github, githubHandle} = Author.Mark;
+
+// I want to take the page url and return a writer aside
+const { name, bio, photo, twitter, twitterHandle, linkedin, github, githubHandle} = json.Mark;  // <-- Find the writer;
 
 ---
 
@@ -30,10 +31,6 @@ const { name, bio, photo, twitter, twitterHandle, linkedin, github, githubHandle
     </div>
 </aside>
 
-<script>
-
-</script>
-
 <style>
 /*---------Aside----------*/
 .aside{
@@ -62,7 +59,7 @@ const { name, bio, photo, twitter, twitterHandle, linkedin, github, githubHandle
 /*---------Text-----------*/
 .text{
     padding: 0 6%;
-    
+
 }
 
 .text p:nth-child(1){

src/components/blog/PostPreview.astro

@@ -1,5 +1,6 @@
 ---
 import "../../styles/root.css";
+import Author from '../../data/author.json';
 
 export interface Props {
 	post: {
@@ -12,9 +13,9 @@ export interface Props {
     }[];
 }
 const { post } = Astro.props;
-const { title, publishDate, name, href, description, img, alt, tags } = post.frontmatter;
-// tags is an string of comma separated tags. return the first tag.
-const tag = tags.split(",")[0];
+const { title, publishDate, writer, href, description, img, alt, tags } = post.frontmatter;
+
+const tag = tags.split(",")[0]; // returns the first tag
 
 ---
 <!--Article-->
@@ -29,6 +30,8 @@ const tag = tags.split(",")[0];
             <div class="details">
                 <a href={post.url}><h1>{title}</h1></a>
                 <span>{publishDate}  |  {tag}</span>
+                <br/>
+                <span>{writer}</span>
 
                 <p>{description}</p>
                 <a href={post.url}> Read more.</a>
@@ -47,8 +50,7 @@ article{
     height: 190px;
     background-color: rgb(255, 255, 255, 0.5);
     border-radius: 5px;
-    margin-top: 25px;
-    margin-left: 30px;
+    margin: 25px;
     padding: 15px;
     display: flex;
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

src/draft/root.css

@@ -1,9 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap');
 
 /* 
 --c = Color
 --th = theme
 */
 * {
+	font-family: ubuntu, sans-serif;
 	box-sizing: border-box;
 	margin: 0;
 }

src/pages/index.astro

@@ -7,8 +7,9 @@ import Cursor from '../components/cursorEffect/Cursor.astro';
 import Navbar from '../components/Navbar.astro';
 import Aside from '../components/Aside.astro';
 import BlogPostPreview from '../components/blog/PostPreview.astro';
-import { getBlogPosts } from '../utils/api.astro';
+import { getBlogPosts, getPosts } from '../utils/api.astro';
 	const { allBlogPosts } = await getBlogPosts();
+	const { allPosts } = await getPosts();
 
 const title = '<BLOG />';
 const description = 'Hi! My name is Mark Spratt. I am a software engineer who started a blog!';
@@ -24,7 +25,7 @@ const permalink = '#';
 		<Cursor />
 		<Navbar />
 		<div class="container">
-			<Aside />
+			<Aside post={allPosts}/>
 			<main>{allBlogPosts.map((p) => <BlogPostPreview post={p} />)}</main>
 		</div>		
 	</body>

tsconfig.base.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
     // Enable top-level await, and other modern ESM features.
-    "target": "ESNext",
+    // "target": "ESNext",
+    "target": "ES6",
     "module": "ESNext",
     // Enable node-style module resolution, for things like npm package imports.
     "moduleResolution": "node",