Merge pull request manulthanura#2 from christianascone/main

feat: read blog articles from json file
LiamMarega · Apr 28, 2024 · 14bb2fe · 14bb2fe
2 parents 7cc8d72 + a1997aa
commit 14bb2fe
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 45 deletions.
diff --git a/src/components/Data/articles.json b/src/components/Data/articles.json
@@ -0,0 +1,18 @@
+[
+  {
+    "type": "Tutorial",
+    "title": "How to quickly deploy a static website",
+    "publish_date": "14 days ago",
+    "brief": "Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers influence both web designers and developers.",
+    "author": "Jese Leos",
+    "authorImage": "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png"
+  },
+  {
+    "type": "Article",
+    "title": "Our first project with Astro",
+    "publish_date": "14 days ago",
+    "brief": "Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers influence both web designers and developers.",
+    "author": "Bonnie Green",
+    "authorImage": "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
+  }
+]
diff --git a/src/components/Icons/ArticleIcon.astro b/src/components/Icons/ArticleIcon.astro
@@ -0,0 +1 @@
+<svg class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z" clip-rule="evenodd"></path><path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path></svg>
diff --git a/src/components/Icons/VideoIcon.astro b/src/components/Icons/VideoIcon.astro
@@ -0,0 +1 @@
+<svg class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path></svg>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -1,6 +1,9 @@
 ---
 import Container from "../components/Container.astro"
 import Layout from '../layouts/Layout.astro';
+import articlesData from '../components//Data/articles.json';
+import ArticleIcon from "../components/Icons/ArticleIcon.astro";
+import VideoIcon from "../components/Icons/VideoIcon.astro";
 ---
 
 <Layout title="Positivus - Blog">
@@ -12,54 +15,35 @@ import Layout from '../layouts/Layout.astro';
                     <p class="font-light text-gray-500 sm:text-xl">We use an agile approach to test assumptions and connect with the needs of your audience early and often.</p>
                 </div> 
                 <div class="grid gap-8 lg:grid-cols-2">
-                    <article class="p-6 bg-white rounded-lg border border-gray-200 shadow-md">
-                        <div class="flex justify-between items-center mb-5 text-gray-500">
-                            <span class="bg-lime text-black text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded">
-                                <svg class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path></svg>
-                                Tutorial
-                            </span>
-                            <span class="text-sm">14 days ago</span>
-                        </div>
-                        <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900"><a href="#">How to quickly deploy a static website</a></h2>
-                        <p class="mb-5 font-light text-gray-500">Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers influence both web designers and developers.</p>
-                        <div class="flex justify-between items-center">
-                            <div class="flex items-center space-x-4">
-                                <img class="w-7 h-7 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="Jese Leos avatar" />
+                    {
+                    articlesData.map(({ type, title, publish_date, brief, author, authorImage} ) => (
+                      <article class="p-6 bg-white rounded-lg border border-gray-200 shadow-md">
+                          <div class="flex justify-between items-center mb-5 text-gray-500">
+                              <span class="bg-lime text-black text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded">
+                                {type == 'Article' ? (<ArticleIcon />) : (<VideoIcon />)}
+                                {type}
+                              </span>
+                              <span class="text-sm">{publish_date}</span>
+                          </div>
+                          <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900"><a href="#">{title}</a></h2>
+                          <p class="mb-5 font-light text-gray-500" style="white-space: pre-line">{brief}</p>
+                          <div class="flex justify-between items-center">
+                              <div class="flex items-center space-x-4">
+                                <img class="w-7 h-7 rounded-full" src={authorImage} alt={author + " cover"} />
                                 <span class="font-medium">
-                                    Jese Leos
+                                    {author}
                                 </span>
-                            </div>
-                            <a href="#" class="inline-flex items-center font-medium text-black hover:text-lime">
-                                Read more
-                                <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-                            </a>
-                        </div>
-                    </article> 
-                    <article class="p-6 bg-white rounded-lg border border-gray-200 shadow-md">
-                        <div class="flex justify-between items-center mb-5 text-gray-500">
-                            <span class="bg-lime text-black text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded">
-                                <svg class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z" clip-rule="evenodd"></path><path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path></svg>
-                                Article
-                            </span>
-                            <span class="text-sm">14 days ago</span>
-                        </div>
-                        <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900"><a href="#">Our first project with Astro</a></h2>
-                        <p class="mb-5 font-light text-gray-500">Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers influence both web designers and developers.</p>
-                        <div class="flex justify-between items-center">
-                            <div class="flex items-center space-x-4">
-                                <img class="w-7 h-7 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" alt="Bonnie Green avatar" />
-                                <span class="font-medium">
-                                    Bonnie Green
-                                </span>
-                            </div>
-                            <a href="#" class="inline-flex items-center font-medium text-black hover:text-lime">
-                                Read more
-                                <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-                            </a>
-                        </div>
-                    </article>                  
+                              </div>
+                              <a href="#" class="inline-flex items-center font-medium text-black hover:text-lime">
+                                  Read more
+                                  <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                              </a>
+                          </div>
+                      </article> 
+                    ))
+                    }
                 </div>  
             </div>
         </Container>
 	</main>
-</Layout>
+</Layout>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<svg class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z" clip-rule="evenodd"></path><path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path></svg>